// This file is included in the build if src/main.js imports
// either app.mat.styl or app.ios.styl.
// Check "DEFAULT / CUSTOM STYLE" in src/main.js

// App Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Stylus variables found in Quasar's source Stylus files. Setting
// variables before Quasar's Stylus will use these variables rather than
// Quasar's default Stylus variable values. Stylus variables specific
// to the themes belong in either the app.ios.styl or app.mat.styl files.

// App Shared Color Variables
// --------------------------------------------------
// It's highly recommended to change the default colors
// to match your app's branding.

$primary   = #40cc3d
$secondary = #3b3440
$tertiary  = #6e747f

$neutral   = #E0E1E2
$positive  = $primary
$negative  = #de2a2a
$info      = #38c7ce
$warning   = #ffcc24
$faded     = #999999
$dark      = #151d30
$white     = #ffffff
$light     = #cccccc

$main-menu-background = alpha($dark, 80%)
$main-menu-item-hover-background = lighten($main-menu-background, 12%)
$main-menu-title-color = $white
$main-menu-title-hover-color = $white
$main-menu-title-active-color = $primary
$main-menu-subtitle-color = $white
$main-menu-subtitle-hover-color = $white
$main-menu-subtitle-active-color = $primary
$main-menu-icon-color = $white
$main-menu-icon-hover-color = $white
$main-menu-icon-active-color = $primary

$main-menu-minimized-width = 56px

$call-minimized-background = $main-menu-background

$body-background = $secondary
$body-color = white

$header-height = 60px
$header-height-mobile = 60px

$logo-margin = $flex-gutter-sm
$logo-margin-mobile = $flex-gutter-xs

$csc-label = rgba(0,0,0,0.46)

$alert-color = $dark

$toolbar-background = $primary
$toolbar-min-height = 60px

$layout-header-shadow = $no-shadow
$layout-aside-background = $main-menu-background
$layout-aside-shadow = $no-shadow
$layout-aside-left-width = 280px
$layout-aside-right-width = 320px
$layout-footer-shadow = $no-shadow

$tooltip-background = $primary

$csc-subtitle-font-size = 18px
$csc-subtitle-line-height = 2rem

$item-stripe-color = alpha(white, 0.06)
$item-highlight-color = alpha(white, 0.1)
$item-content-secondary-text-color = alpha($white, 70%)

$typography-font-family = 'Muli', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif

$popover-background = alpha($dark, 90%)

$modal-background = $body-background
$modal-body-color = $body-color

$call-footer-height = $toolbar-min-height
$call-footer-height-big = $call-footer-height * 2
$call-footer-action-margin = 27px
$call-footer-height-mobile = $call-footer-height * 1.4

$popover-box-shadow	= $shadow-1

$loading-background = $main-menu-background

$chip-color = $dark

$conf-participant-icon-color = rgba(255, 255, 255, 0.6);
$conf-participant-box-color = rgba(21,29,48,0.8);

$cf-disabled-label = lighten($white, -35%);
$cf-disabled-link = lighten($primary, -35%);
$cf-disabled-btn = lighten($negative, -35%);
