Blame | Last modification | View Log | Download | RSS feed
//## Light theme color file@import '../../../global/_variables'; // global metronic framework variables@import '../../../global/components/_mixins'; // global metronic framework mixings@import '../_variables'; // theme level variables// Theme Colors Settigns// Main settings$theme-name: "light";$brand-main-color: #3FD5C0 !default;$brand-main-font-color: #ffffff !default;// Body and header$bg-color: #FFFFFF !default;$header-bg-color: #747F8C !default;// Mega Menu$header-hor-menu-bg-color: $header-bg-color;$header-hor-menu-fixed-border-box: 0px 1px 10px 0px rgba($header-hor-menu-bg-color, 0.2);//** Default Mega Menu$header-hor-menu-mega-menu-header-font-color: lighten($header-hor-menu-bg-color, 50%);$header-hor-menu-default-link-font-color: lighten($header-hor-menu-bg-color, 50%);$header-hor-menu-default-link-font-color-on-hover: lighten($header-hor-menu-default-link-font-color, 5%);$header-hor-menu-default-link-font-color-on-active: lighten($header-hor-menu-default-link-font-color, 50%);$header-hor-menu-default-link-icon-color: lighten($header-hor-menu-bg-color, 35%);$header-hor-menu-default-link-icon-color-on-hover: lighten($header-hor-menu-default-link-icon-color, 5%);$header-hor-menu-default-link-icon-color-on-active: lighten($header-hor-menu-default-link-icon-color, 30%);$header-hor-menu-default-link-bg-color-on-hover: lighten($header-bg-color, 10%);$header-hor-menu-default-link-bg-color-on-active: $brand-main-color;// Default Mega Menu Sub Menu$header-hor-menu-dropdown-menu-bg-color: $header-hor-menu-default-link-bg-color-on-hover;$header-hor-menu-box-shadow: 5px 5px rgba($header-hor-menu-dropdown-menu-bg-color, 0.2);$header-hor-menu-dropdown-menu-link-bg-color-on-active: lighten($header-hor-menu-default-link-bg-color-on-hover, 4%);$header-hor-menu-dropdown-menu-link-bg-color-on-hover: lighten($header-hor-menu-default-link-bg-color-on-hover, 4%);$header-hor-menu-dropdown-menu-link-font-color: lighten($header-hor-menu-bg-color, 50%);$header-hor-menu-dropdown-menu-link-font-color-on-hover: lighten($header-hor-menu-dropdown-menu-link-font-color, 14%);$header-hor-menu-dropdown-menu-link-font-color-on-active: lighten($header-hor-menu-dropdown-menu-link-font-color, 14%);$header-hor-menu-dropdown-menu-link-icon-color: darken($header-hor-menu-dropdown-menu-link-font-color, 2%);$header-hor-menu-dropdown-menu-link-icon-color-on-hover: lighten($header-hor-menu-dropdown-menu-link-icon-color, 10%);$header-hor-menu-dropdown-menu-link-icon-color-on-active: lighten($header-hor-menu-dropdown-menu-link-icon-color, 10%);//** Light Mega Menu$header-light-hor-menu-mega-menu-header-font-color: #666;$header-light-hor-menu-default-link-font-color: $header-hor-menu-default-link-font-color;$header-light-hor-menu-default-link-font-color-on-hover: $header-hor-menu-default-link-font-color-on-hover;$header-light-hor-menu-default-link-font-color-on-active: $header-hor-menu-default-link-font-color-on-active;$header-light-hor-menu-default-link-icon-color: $header-hor-menu-default-link-icon-color;$header-light-hor-menu-default-link-icon-color-on-hover: $header-hor-menu-default-link-icon-color-on-hover;$header-light-hor-menu-default-link-icon-color-on-active: $header-hor-menu-default-link-icon-color-on-active;$header-light-hor-menu-default-link-bg-color-on-hover: $header-hor-menu-default-link-bg-color-on-hover;$header-light-hor-menu-default-link-bg-color-on-active: $header-hor-menu-default-link-bg-color-on-active;$header-light-hor-menu-default-link-bg-color-on-onen: lighten(#FAFAFC, 2%);$header-light-hor-menu-default-link-font-color-on-onen: #333;$header-light-hor-menu-default-link-icon-color-on-onen: #333;// Light Mega Menu Sub Menu$header-light-hor-menu-dropdown-menu-bg-color: $header-light-hor-menu-default-link-bg-color-on-onen;$header-light-hor-menu-box-shadow: 5px 5px rgba(#666, 0.1);$header-light-hor-menu-dropdown-menu-link-bg-color-on-active: darken($header-light-hor-menu-dropdown-menu-bg-color, 4%);$header-light-hor-menu-dropdown-menu-link-bg-color-on-hover: darken($header-light-hor-menu-dropdown-menu-bg-color, 4%);$header-light-hor-menu-dropdown-menu-link-font-color: #000;$header-light-hor-menu-dropdown-menu-link-font-color-on-hover: #000;$header-light-hor-menu-dropdown-menu-link-font-color-on-active: #000;$header-light-hor-menu-dropdown-menu-link-icon-color: #888;$header-light-hor-menu-dropdown-menu-link-icon-color-on-hover: #666;$header-light-hor-menu-dropdown-menu-link-icon-color-on-active: #666;// Header search$header-search-bg-color: darken($header-bg-color, 4%) !default;$header-search-bg-hover-color: $header-hor-menu-default-link-bg-color-on-hover !default;$header-search-bg-color-on-open: $header-search-bg-hover-color !default;$header-search-font-color: #c4c9d0 !default;$header-search-placeholder-font-color: darken($header-search-font-color, 1%) !default;// Top menu$header-top-menu-bg-hover-color: $header-hor-menu-default-link-bg-color-on-hover !default;$header-top-menu-bg-hover-color-on-dropdown-open: $header-hor-menu-default-link-bg-color-on-hover !default;$header-top-menu-badge-bg-color: $brand-main-color;$header-top-menu-badge-font-color: #ffffff;$header-top-menu-icon-font-color: lighten(#9fa7b1, 10%) !default;// Top menu user bar$header-top-menu-user-font-color: $header-hor-menu-default-link-font-color !default;$header-top-menu-user-bg-color: $header-search-bg-color !default;//begin: Top Menu Extended Dropdowns$header-top-menu-extended-dropdown-item-bg-color-on-hover: #f8f9fa;$header-top-menu-extended-dropdown-item-border-color: #EFF2F6;$header-top-menu-extended-dropdown-item-font-color: #888888;$header-top-menu-extended-dropdown-header-bg-color: darken(#f7f8fa, 4%);$header-top-menu-extended-dropdown-border-color: darken($header-top-menu-extended-dropdown-header-bg-color, 1%);$header-top-menu-extended-dropdown-header-font-color: darken(#6f949c, 5%);$header-top-menu-inbox-dropdown-from-font-color: #5b9bd1;$header-top-menu-task-dropdown-progress-bg-color: #dfe2e9;$header-top-menu-notification-time-bg-color: lighten(#eee, 1%);// Top Menu Notifications$header-top-menu-dropdown-dark-bg-color: darken($header-hor-menu-bg-color, 1%);$header-top-menu-dropdown-dark-header-bg-color: darken($header-hor-menu-bg-color, 5%);$header-top-menu-dropdown-dark-header-font-color: lighten($header-top-menu-dropdown-dark-header-bg-color, 40%);$header-top-menu-dropdown-dark-item-font-color: lighten($header-top-menu-dropdown-dark-header-bg-color, 40%);$header-top-menu-dropdown-dark-item-border-color: lighten($header-top-menu-dropdown-dark-bg-color, 3%);$header-top-menu-dropdown-dark-item-icon-color: lighten($header-top-menu-dropdown-dark-header-bg-color, 30%);$header-top-menu-dropdown-dark-item-bg-color-on-hover: lighten($header-top-menu-dropdown-dark-bg-color, 2%);$header-top-menu-dropdown-dark-default-menu-divider: $header-top-menu-dropdown-dark-item-border-color;$header-top-menu-dropdown-dark-notification-time-bg-color: darken($header-top-menu-dropdown-dark-bg-color, 2%);//end: Top Menu Extended Dropdowns// Sidebar menu$sidebar-menu-devider-border-color: #F0F5F7 !default;$sidebar-menu-link-font-color: #555555 !default;$sidebar-menu-link-font-color-on-hover: $sidebar-menu-link-font-color !default;$sidebar-menu-link-font-color-on-active: #ffffff !default;$sidebar-menu-link-icon-font-color: lighten($header-bg-color, 18%) !default;$sidebar-menu-link-icon-font-color-on-active: $sidebar-menu-link-font-color-on-active !default;$sidebar-menu-link-icon-font-color-on-hover: lighten($sidebar-menu-link-font-color, 35%) !default;$sidebar-menu-link-bg-color-on-hover: #F1F1F1 !default;$sidebar-menu-link-bg-color-on-active: $brand-main-color;$sidebar-menu-arrow-color: $sidebar-menu-link-icon-font-color !default;$sidebar-menu-arrow-color-on-active: $sidebar-menu-link-icon-font-color-on-active !default;$sidebar-menu-arrow-color-on-hover: $sidebar-menu-link-icon-font-color-on-hover !default;$sidebar-menu-sub-menu-box-shadow-color: $sidebar-menu-link-bg-color-on-hover !default;$sidebar-menu-sub-menu-link-font-color: $sidebar-menu-link-font-color !default;$sidebar-menu-sub-menu-link-icon-font-color: $sidebar-menu-arrow-color !default;$sidebar-menu-sub-menu-link-bg-color-on-hover: #F1F1F1 !default;$sidebar-menu-sub-menu-link-icon-font-color-on-hover: $sidebar-menu-link-icon-font-color-on-hover !default;$sidebar-menu-hover-sub-menu-bg-color: darken($sidebar-menu-link-bg-color-on-hover, 3%) !default;// Sidebar for mobile$mobile-sidebar-menu-bg-color: darken($bg-color, 1%) !default;$mobile-sidebar-menu-link-bg-color-on-hover: darken($bg-color, 15%) !default;// Light sidebar menu$light-sidebar-menu-link-border-color: $brand-main-color !default;$light-sidebar-menu-link-bg-color-on-hover: darken($bg-color, 4%) !default;$light-sidebar-menu-link-bg-color-on-active: darken($bg-color, 7%) !default;$light-sidebar-menu-link-font-color-on-active: #666666 !default;$light-sidebar-menu-link-icon-color-on-active: #999999 !default;$light-sidebar-menu-link-arrow-color-on-active: #999999 !default;$light-sidebar-menu-sub-menu-bg-color: lighten($bg-color, 2%) !default;$light-sidebar-menu-sub-menu-link-bg-color-on-hover: darken($bg-color, 7%) !default;$mobile-light-sidebar-menu-sub-menu-bg-color: $mobile-sidebar-menu-bg-color !default;$mobile-light-sidebar-menu-link-bg-color-on-hover: lighten($mobile-sidebar-menu-bg-color, 6%) !default;$mobile-light-sidebar-menu-link-bg-color-on-active: lighten($mobile-sidebar-menu-bg-color, 2%) !default;$mobile-light-sidebar-menu-sub-menu-link-bg-color-on-hover: lighten($mobile-sidebar-menu-bg-color, 6%) !default;// Sidebar search$sidebar-search-bg-color: darken($bg-color, 3%) !default;$sidebar-search-bottom-border-color: darken($sidebar-menu-devider-border-color, 3%) !default;$sidebar-search-full-border-color: darken($sidebar-menu-devider-border-color, 3%) !default;$sidebar-search-input-font-color: #B5C0C9 !default;$sidebar-search-input-placeholder-font-color: lighten($sidebar-search-input-font-color, 3%) !default;// Quick Sidebar$quick-sidebar-bg-color: lighten($header-bg-color, 3%);$quick-sidebar-font-color: #dddddd;// Quick Sidebar$quick-sidebar-bg-color: lighten($header-bg-color, 15%);$quick-sidebar-font-color: #eee;// Footer$footer-default-font-color: #333333 !default;$footer-default-go-top-bg-color: #9CA6AD !default;$footer-default-go-top-icon-font-color: #dddddd !default;$footer-fixed-bg-color: lighten($header-bg-color, 40%) !default;//Boxed layout$for-min-992px-page-boxed-page-container-bg-color: $sidebar-menu-devider-border-color !default;$for-min-992px-page-boxed-bg-color: darken($bg-color, 3%) !default;$for-min-992px-page-boxed-sidebar-fixed-border-color: $sidebar-menu-devider-border-color !default;@import '_base';/* Page sidebar */.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,.page-sidebar {.page-sidebar-menu {/* Adjust "selected" arrow */> li {&.active.open,&.active {> a {> .selected {top:0px;right: -8px;border-top: 20px double transparent;border-bottom: 20px double transparent;border-right:0;border-left:8px solid $brand-main-color;.page-sidebar-reversed & {right: auto;left: -8px;border-left:0;border-right:8px solid $brand-main-color;}.page-container-bg-solid & {border-color: transparent transparent transparent $brand-main-color;}.page-container-bg-solid.page-sidebar-reversed & {border-color: transparent $brand-main-color transparent transparent;}}}}}/* Change sidebar link font weight */li {> a {font-weight: 400;> i {font-weight: 300;}}.page-sidebar-closed &:hover {.sub-menu {background-color: #F9F9F9;}}.sub-menu {li {> a {font-weight: normal;> i {font-weight: 300;}}}}}/* Sidebar search */.sidebar-search.open {.page-sidebar-closed:not(.page-sidebar-reversed) & {.input-group {margin-left: 16px;border: 1px solid #F0F0F0;border-left-color: transparent;}}.page-sidebar-closed.page-sidebar-reversed & {.input-group {margin-left: -($sidebar-collapsed-submenu-width-on-hover + 10px + 8px) !important;border: 1px solid #F0F0F0;border-right-color: transparent;}}}}.page-sidebar-menu.page-sidebar-menu-light {> li {> a {.selected {display: none;}}}}}.page-content {border-left: 1px solid $sidebar-menu-devider-border-color;border-bottom: 1px solid $sidebar-menu-devider-border-color;.page-sidebar-reversed & {border-right: 1px solid $sidebar-menu-devider-border-color;}}@media (max-width: $screen-sm-max) { /* 991px */.page-content {border-left: 0;border-bottom: 0;.page-sidebar-reversed & {border-right: 0;}}.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,.page-sidebar {.page-sidebar-menu {> li {> a {border-top: 1px solid $sidebar-menu-devider-border-color;}}}}}@media (max-width: $screen-xs-min) { /* 480px */body {background: lighten($header-bg-color, 13%);}.page-header.navbar {.top-menu {background-color: lighten($header-bg-color, 13%);.page-header-fixed-mobile & {background-color: $header-bg-color;}.navbar-nav {> li.dropdown {.dropdown-toggle {> i {color: lighten($header-top-menu-icon-font-color, 12%);}}}}}}}