mozaik/src/themes/night-blue/_vars.styl

Mozaik dashboard composition tool

@import url("https://fonts.googleapis.com/css?family=Raleway:200,400,600,800|Montserrat:400,700")

// GENERIC
$main-bg-color                  = #1e2430
$main-txt-color                 = #eedba5
$main-font                      = normal normal 400 unquote("1.6vmin/3vmin") "Raleway", sans-serif

// DASHBOARD
$dashboard-header-height        = 5vmin
$dashboard-header-txt-color     = #e0c671
$dashboard-header-font          = normal normal 400 unquote("2.6vmin/5vmin") "Raleway", sans-serif

// WIDGET
$widget-bg-color                = #2b3847
$widget-shadow                  = 0 1px 1px rgba(0, 0, 0, 0.35)
$widget-border-radius           = 2px
$widget-border                  = none

// WIDGET — header
$widget-header-border           = none
$widget-header-bg-color         = #323f53
$widget-header-txt-color        = #eedba5
$widget-header-icon-color       = #e0c671
$widget-header-shadow           = 0 1px 0 #495b71 inset
$widget-header-border-bottom    = 1px solid #253246
$widget-header-font             = normal normal 400 1.6vmin "Montserrat", sans-serif

// WIDGET — header count
$widget-header-count-bg-color   = #1e2836
$widget-header-count-txt-color  = #7e9ebc
$widget-header-count-shadow     = 0 1px 0 rgba(0, 0, 0, 0.5) inset
$widget-header-count-txt-shadow = 0 1px 0 rgba(0, 0, 0, 0.5)
$widget-header-count-border     = none

// WIDGET — body
$widget-body-border             = none
$widget-body-bg-color           = transparent
$widget-body-shadow             = none

// TABLE
$table-border-h                 = 1px solid #253246

// COUNT
$count-padding                  = 3px 7px
$count-bg-color                 = #1e2836
$count-txt-color                = $main-txt-color
$count-border-radius            = 2px
$count-border                   = none

// LABEL
$label-bg-color                 = #212e41
$label-txt-color                = $widget-header-txt-color
$label-addon-bg-color           = #1e2836
$label-addon-txt-color          = $widget-header-txt-color
$label-border-radius            = 2px

// NOTIFICATIONS
$notifications-bg-color         = lighten($widget-header-bg-color, 5)
$notifications-txt-color        = $widget-header-txt-color
$notifications-shadow           = 0 1px 1px rgba(0, 0, 0, 0.85)

// Meaningful color
$unknown-color                  = #495b71
$success-color                  = #4ec2b4
$warning-color                  = #d1be65
$failure-color                  = #de5029

// CHART
$chart-elements-color           = lighten($widget-bg-color, 40)
$histogram-bar-bg-color         = lighten($widget-bg-color, 7)
$pie-chart-outline-stroke       = #27313e
$pie-chart-outline-stroke-width = 6px
$pie-gauge-needle-color         = #151b26
$pie-svg-legend-bg-color        = $widget-header-bg-color

// PROPS
$prop-key-txt-color             = $main-txt-color
$prop-value-txt-color           = lighten($main-txt-color, 10)