You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2275 lines
50 KiB
2275 lines
50 KiB
// ================================================================================================ |
|
// File Name: dark-layout.scss |
|
// Description: SCSS file for dark layout. |
|
// ---------------------------------------------------------------------------------------------- |
|
// Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template |
|
// Author: PIXINVENT |
|
// Author URL: http://www.themeforest.net/user/pixinvent |
|
// ================================================================================================ |
|
|
|
@import "../bootstrap-extended/include"; // Bootstrap includes |
|
@import "../components/include"; // Components includes |
|
|
|
.dark-layout { |
|
@at-root body#{&} { |
|
color: $theme-dark-body-color; |
|
background-color: $theme-dark-body-bg; |
|
} |
|
body { |
|
color: $theme-dark-body-color; |
|
background-color: $theme-dark-body-bg; |
|
} |
|
// universal elements |
|
//heading tags |
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6 { |
|
color: $theme-dark-headings-color; |
|
} |
|
|
|
// border color |
|
.border, |
|
.border-top, |
|
.border-end, |
|
.border-bottom, |
|
.border-start { |
|
border-color: $theme-dark-border-color !important; |
|
} |
|
|
|
// other tags |
|
a { |
|
&:hover { |
|
color: $primary; |
|
} |
|
} |
|
|
|
label { |
|
color: $theme-dark-label-color; |
|
} |
|
|
|
.btn span { |
|
color: inherit; |
|
} |
|
|
|
hr { |
|
color: $theme-dark-border-color; |
|
} |
|
|
|
pre { |
|
background-color: $theme-dark-body-bg !important; |
|
border: 0; |
|
|
|
code { |
|
background-color: inherit; |
|
text-shadow: none; |
|
|
|
.url { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
} |
|
|
|
code { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
|
|
kbd { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
|
|
// for dark text |
|
.text-dark { |
|
color: $gray-600 !important; |
|
} |
|
|
|
.text-muted { |
|
color: $theme-dark-text-muted-color !important; |
|
} |
|
|
|
.text-body { |
|
color: $theme-dark-body-color !important; |
|
} |
|
.text-body-heading { |
|
color: $theme-dark-headings-color; |
|
} |
|
|
|
.section-label { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
|
|
// shadow |
|
.shadow { |
|
box-shadow: $theme-dark-box-shadow !important; |
|
} |
|
|
|
// blockquote footer |
|
.blockquote-footer { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
|
|
// main navbar and header navbar shadow(generic navbar) |
|
.header-navbar-shadow { |
|
background: linear-gradient(180deg, rgba(22, 29, 49, 0.9) 44%, rgba(22, 29, 49, 0.43) 73%, rgba(22, 29, 49, 0)); |
|
} |
|
|
|
// main header navbar dark style |
|
|
|
.horizontal-layout { |
|
.header-navbar { |
|
background-color: $theme-dark-card-bg; |
|
} |
|
&.navbar-sticky, |
|
&.navbar-static { |
|
.header-navbar { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
} |
|
.navbar-sticky { |
|
.header-navbar { |
|
&.navbar-shadow { |
|
box-shadow: 0 4px 24px 0 rgba($black, 0.75); |
|
} |
|
} |
|
} |
|
.header-navbar { |
|
background-color: $theme-dark-card-bg; |
|
|
|
.navbar-container { |
|
.nav { |
|
.nav-item { |
|
.nav-link { |
|
color: $theme-dark-headings-color; |
|
background-color: transparent; |
|
|
|
i, |
|
svg { |
|
color: $theme-dark-headings-color; |
|
} |
|
|
|
&.bookmark-star { |
|
i, |
|
svg { |
|
color: $white !important; |
|
} |
|
} |
|
} |
|
|
|
&.nav-search { |
|
.search-input { |
|
&.open { |
|
background-color: $theme-dark-card-bg; |
|
|
|
.input { |
|
border-color: $theme-dark-border-color; |
|
} |
|
|
|
.input, |
|
.input::placeholder, |
|
.search-input-close { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.bookmark-input { |
|
background-color: $theme-dark-card-bg; |
|
.form-control { |
|
background-color: $theme-dark-card-bg; |
|
} |
|
} |
|
|
|
.search-list { |
|
background-color: $theme-dark-card-bg; |
|
li { |
|
a { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
|
|
.auto-suggestion.current_item { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
} |
|
|
|
li i.ficon, |
|
li svg.ficon { |
|
color: $theme-dark-body-color; |
|
} |
|
|
|
.dropdown-cart, |
|
.dropdown-notification { |
|
.dropdown-menu.dropdown-menu-media { |
|
overflow: hidden; |
|
|
|
.list-item { |
|
border-color: $theme-dark-border-color; |
|
|
|
.media-meta { |
|
color: $theme-dark-body-color; |
|
} |
|
|
|
&:hover { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
.dropdown-menu-header { |
|
border-bottom: 1px solid $theme-dark-border-color; |
|
} |
|
.dropdown-menu-footer { |
|
background-color: $theme-dark-card-bg; |
|
border-top: 1px solid $theme-dark-border-color; |
|
.dropdown-item { |
|
border-color: $theme-dark-border-color; |
|
|
|
&:hover { |
|
background-color: $theme-dark-card-bg; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.dropdown-cart { |
|
&.empty-cart { |
|
&:before { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
li { |
|
color: $white; |
|
} |
|
.cart-item { |
|
color: $theme-dark-body-color; |
|
} |
|
.dropdown-header { |
|
span { |
|
color: $white; |
|
} |
|
} |
|
.list-item { |
|
img { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
.media-heading .cart-item-by { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
} |
|
.dropdown-notification { |
|
.list-item-body .media-heading { |
|
color: $theme-dark-headings-color; |
|
} |
|
.notification-text { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
&.navbar-static-top { |
|
background-color: transparent !important; |
|
} |
|
|
|
&[class*="bg-"] { |
|
.navbar-nav { |
|
.nav-item { |
|
.nav-link { |
|
background-color: inherit; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
//Text color for Blank page with transparent card |
|
.blank-page { |
|
.card.bg-transparent { |
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6 { |
|
color: $theme-dark-card-bg; |
|
} |
|
|
|
p { |
|
color: $theme-dark-body-bg; |
|
} |
|
} |
|
} |
|
|
|
// main menu |
|
.main-menu { |
|
background-color: $theme-dark-card-bg; |
|
|
|
.shadow-bottom { |
|
background: linear-gradient(180deg, $theme-dark-card-bg 44%, rgba($theme-dark-card-bg, 0.51) 73%, rgba($theme-dark-card-bg, 0)); |
|
} |
|
|
|
&:not(.expanded) { |
|
.navigation { |
|
.sidebar-group-active { |
|
> a { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
} |
|
} |
|
|
|
&.menu-dark { |
|
.navigation > li.open:not(.menu-item-closing) > a { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
.navigation > li.sidebar-group-active > a { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
|
|
.collapse-toggle-icon { |
|
color: $primary !important; |
|
} |
|
} |
|
|
|
// Perfect Scrollbar |
|
.ps__thumb-x, |
|
.ps__thumb-y { |
|
background-color: $theme-dark-body-color; |
|
} |
|
.ps .ps__rail-x.ps--clicking, |
|
.ps .ps__rail-x:focus, |
|
.ps .ps__rail-x:hover, |
|
.ps .ps__rail-y.ps--clicking, |
|
.ps .ps__rail-y:focus, |
|
.ps .ps__rail-y:hover { |
|
background-color: $theme-dark-border-color; |
|
} |
|
|
|
.ps__rail-y.ps--clicking .ps__thumb-y, |
|
.ps__rail-y:focus > .ps__thumb-y, |
|
.ps__rail-y:hover > .ps__thumb-y { |
|
background-color: $theme-dark-body-color; |
|
} |
|
|
|
// main menu content |
|
.main-menu-content { |
|
.navigation-main { |
|
background-color: $theme-dark-card-bg; |
|
|
|
.navigation-header { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
|
|
li { |
|
a { |
|
color: $theme-dark-headings-color !important; |
|
} |
|
ul { |
|
.open, |
|
.sidebar-group-active { |
|
> a { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.nav-item { |
|
i, |
|
svg { |
|
color: $theme-dark-headings-color; |
|
} |
|
|
|
&.open { |
|
> a { |
|
background-color: $theme-dark-body-bg !important; |
|
} |
|
} |
|
|
|
a:after { |
|
color: $theme-dark-headings-color; |
|
} |
|
|
|
.menu-content { |
|
background-color: $theme-dark-card-bg; |
|
|
|
.active { |
|
.menu-item { |
|
color: $white; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.active { |
|
.menu-title, |
|
i, |
|
svg { |
|
color: $white; |
|
} |
|
} |
|
|
|
.sidebar-group-active { |
|
.menu-content { |
|
background-color: $theme-dark-card-bg; |
|
|
|
.active { |
|
z-index: 1; |
|
|
|
a { |
|
background-color: transparent; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// menu collapsed active item color |
|
.menu-collapsed { |
|
.main-menu:not(.expanded) { |
|
.navigation-main { |
|
li.active { |
|
> a { |
|
background: $theme-dark-body-bg !important; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
/********* COMPONENTS *********/ |
|
|
|
/* Accordion */ |
|
|
|
.accordion-item:not(:last-of-type) { |
|
border-color: $theme-dark-border-color; |
|
} |
|
.accordion-item { |
|
background: $theme-dark-card-bg !important; |
|
} |
|
.accordion-button { |
|
background: $theme-dark-card-bg !important; |
|
color: $theme-dark-body-color; |
|
&:after { |
|
background-image: str-replace(str-replace($accordion-button-icon, "#{$accordion-icon-color}", $theme-dark-body-color), "#", "%23"); |
|
} |
|
} |
|
// for shadow and bordered |
|
.accordion-border { |
|
.accordion-item { |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
|
|
// margin accordion |
|
.accordion-margin { |
|
.accordion-item { |
|
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.24) !important; |
|
} |
|
} |
|
|
|
/* alerts */ |
|
.alert { |
|
.alert-heading, |
|
p { |
|
color: inherit; |
|
} |
|
&.alert-dark { |
|
.alert-heading, |
|
.alert-body, |
|
p { |
|
color: $gray-600; |
|
} |
|
} |
|
} |
|
|
|
/* breadcrumbs */ |
|
|
|
// Header breadcrumb |
|
.content-header-left { |
|
.breadcrumbs-top { |
|
.content-header-title { |
|
color: $theme-dark-headings-color; |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
} |
|
// Breadcrumb dark style |
|
.breadcrumb { |
|
.breadcrumb-item { |
|
color: $theme-dark-body-color; |
|
+ .breadcrumb-item::before { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
&:not([class*="breadcrumb-"]) { |
|
.breadcrumb-item + .breadcrumb-item { |
|
&:before { |
|
background-image: url(str-replace(str-replace($chevron-right, "currentColor", $theme-dark-body-color), "#", "%23")); |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Breadcrumb with Chevron |
|
.breadcrumb-chevron { |
|
&.breadcrumb { |
|
.breadcrumb-item + .breadcrumb-item:before { |
|
background-image: url(str-replace(str-replace($chevron-right, "currentColor", $theme-dark-body-color), "#", "%23")); |
|
} |
|
} |
|
} |
|
|
|
/* buttons */ |
|
.btn { |
|
&:not([class*="btn-"]) { |
|
color: $theme-dark-body-color; |
|
} |
|
|
|
&.btn-dark, |
|
&.btn-outline-dark, |
|
&.btn-flat-dark { |
|
color: $gray-600; |
|
} |
|
|
|
&.btn-dark { |
|
background-color: $dark !important; |
|
} |
|
|
|
&.btn-outline-dark { |
|
border-color: $dark; |
|
color: $gray-600; |
|
&:hover:not(.disabled):not(:disabled) { |
|
color: $gray-600; |
|
} |
|
} |
|
|
|
&.btn-flat-dark { |
|
&:active, |
|
&:focus { |
|
background: $dark; |
|
} |
|
} |
|
} |
|
|
|
.btn-group { |
|
label[class*="btn-outline-"] { |
|
color: $primary !important; |
|
} |
|
} |
|
|
|
/* dropdown */ |
|
.dropdown-menu { |
|
background-color: $theme-dark-card-bg; |
|
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.24); |
|
|
|
.dropdown-header { |
|
color: $theme-dark-headings-color; |
|
} |
|
|
|
.dropdown-item { |
|
color: $theme-dark-body-color; |
|
&:hover, |
|
&:focus { |
|
background: $dropdown-link-hover-bg; |
|
color: $dropdown-link-hover-color; |
|
} |
|
&:active, |
|
&.active { |
|
color: $dropdown-link-active-color; |
|
background-color: $dropdown-link-active-bg; |
|
} |
|
&.disabled, |
|
&:disabled { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
} |
|
} |
|
.dropdown-divider { |
|
border-color: $theme-dark-border-color; |
|
} |
|
|
|
/* modal */ |
|
.modal { |
|
.modal-header, |
|
.modal-header[class*="bg-"] { |
|
// why removed !important? Not working if added bg-COLOR class with modal-header |
|
// background-color: $theme-dark-card-bg !important; |
|
background-color: $theme-dark-body-bg; |
|
} |
|
|
|
// close button |
|
.modal-header .btn-close { |
|
text-shadow: none; |
|
background-color: $theme-dark-card-bg !important; |
|
color: $theme-dark-body-color; |
|
box-shadow: 0 3px 8px 0 rgba(11, 10, 25, 0.49) !important; |
|
// background-image: str-replace(str-replace($btn-close-bg, "#{$btn-close-color}", $theme-dark-body-color), "#", "%23"); |
|
} |
|
|
|
.modal-content, |
|
.modal-body, |
|
.modal-footer { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
|
|
/* Close btn */ |
|
.btn-close { |
|
// background: transparent escape-svg(str-replace(str-replace($btn-close-bg, "#{$btn-close-color}", $theme-dark-body-color), "#", "%23")) center / |
|
// $btn-close-width auto no-repeat; |
|
} |
|
|
|
/* OffCanvas */ |
|
.offcanvas { |
|
background-color: $theme-dark-card-bg; |
|
color: $theme-dark-body-color; |
|
} |
|
|
|
/* pagination */ |
|
.pagination { |
|
&:not([class*="pagination-"]) { |
|
.page-item { |
|
&.active { |
|
background-color: $theme-dark-pagination-bg; |
|
|
|
.page-link { |
|
background-color: $primary; |
|
|
|
&:hover { |
|
color: $white; |
|
} |
|
} |
|
} |
|
|
|
.page-link { |
|
background-color: $theme-dark-pagination-bg; |
|
color: $theme-dark-body-color; |
|
|
|
&:hover { |
|
color: $primary; |
|
} |
|
} |
|
|
|
&.prev-item, |
|
&.next-item { |
|
.page-link:hover { |
|
color: $white; |
|
} |
|
} |
|
} |
|
} |
|
|
|
&[class*="pagination-"] { |
|
.page-item:not(.active) { |
|
.page-link { |
|
background-color: $theme-dark-pagination-bg; |
|
} |
|
|
|
&:not(:hover) { |
|
.page-link { |
|
color: $white; |
|
} |
|
} |
|
} |
|
|
|
.page-item { |
|
&:not(.active) { |
|
.page-link:hover { |
|
background-color: $theme-dark-pagination-bg; |
|
} |
|
} |
|
|
|
&.active { |
|
background-color: $theme-dark-pagination-bg; |
|
} |
|
} |
|
} |
|
|
|
.page-item { |
|
&.prev-item, |
|
&.previous, |
|
&.prev { |
|
.page-link:before { |
|
background-image: url(str-replace(str-replace($chevron-left, "currentColor", $theme-dark-body-color), "#", "%23")); |
|
} |
|
&.disabled { |
|
.page-link { |
|
&:before { |
|
background-image: url(str-replace(str-replace($chevron-left, "currentColor", $theme-dark-text-muted-color), "#", "%23")); |
|
} |
|
} |
|
} |
|
} |
|
&.next-item, |
|
&.next { |
|
.page-link::after { |
|
background-image: url(str-replace(str-replace($chevron-right, "currentColor", $theme-dark-body-color), "#", "%23")); |
|
} |
|
&.disabled { |
|
.page-link { |
|
&:after { |
|
background-image: url(str-replace(str-replace($chevron-right, "currentColor", $theme-dark-text-muted-color), "#", "%23")); |
|
} |
|
} |
|
} |
|
} |
|
&.disabled { |
|
.page-link { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* nav tabs */ |
|
.nav-tabs, |
|
.nav-pills, |
|
.nav-tabs.nav-justified { |
|
.nav-item { |
|
.nav-link { |
|
color: $theme-dark-headings-color; |
|
&.active { |
|
background-color: $theme-dark-card-bg; |
|
color: $primary; |
|
} |
|
|
|
&.disabled { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// bordered nav |
|
.nav.wrap-border { |
|
border-color: $theme-dark-border-color; |
|
} |
|
|
|
// nav pills |
|
.nav-pills { |
|
.nav-item { |
|
.nav-link { |
|
&.active { |
|
color: $white; |
|
background-color: $primary; |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* popover */ |
|
.popover { |
|
&.bs-popover-top { |
|
.popover-arrow { |
|
&:before { |
|
border-top-color: $theme-dark-border-color; |
|
} |
|
&:after { |
|
border-top-color: $theme-dark-card-bg; |
|
} |
|
} |
|
} |
|
|
|
&.bs-popover-start { |
|
.popover-arrow { |
|
&:before { |
|
border-left-color: $theme-dark-border-color; |
|
} |
|
&:after { |
|
border-left-color: $theme-dark-card-bg; |
|
} |
|
} |
|
} |
|
|
|
&.bs-popover-end { |
|
.popover-arrow { |
|
&:before { |
|
border-right-color: $theme-dark-border-color; |
|
} |
|
&:after { |
|
border-right-color: $theme-dark-card-bg; |
|
} |
|
} |
|
} |
|
.popover-header { |
|
color: $white; |
|
} |
|
|
|
.popover-body { |
|
background-color: $theme-dark-card-bg; |
|
color: $theme-dark-body-color; |
|
border-color: $theme-dark-border-color !important; |
|
} |
|
} |
|
|
|
/* BS toast */ |
|
.toast { |
|
background-color: rgba($theme-dark-card-bg, 0.85); |
|
box-shadow: $theme-dark-box-shadow; |
|
color: $theme-dark-body-color; |
|
|
|
.toast-header { |
|
background-color: $theme-dark-card-bg; |
|
color: $theme-dark-body-color; |
|
|
|
.btn-close { |
|
background-color: transparent !important; |
|
// background-image: str-replace(str-replace($btn-close-bg, "#{$btn-close-color}", $theme-dark-body-color), "#", "%23"); |
|
box-shadow: none !important; |
|
text-shadow: none; |
|
} |
|
} |
|
} |
|
|
|
/* list group */ |
|
.list-group { |
|
.list-group-item { |
|
&:not([class*="list-group-item-"]), |
|
&.list-group-item-action:not(.active):not(:active) { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
&:not(.disabled) { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
&.list-group-item-action { |
|
&:not(.active):not(:active) { |
|
&:hover, |
|
&:focus { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
&.active, |
|
&:active { |
|
&:hover, |
|
&:focus { |
|
color: $white; |
|
} |
|
} |
|
} |
|
|
|
&.active { |
|
p, |
|
small { |
|
color: $white; |
|
} |
|
&:hover { |
|
color: $white; |
|
} |
|
} |
|
|
|
&.disabled { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
} |
|
|
|
&.list-group-circle .list-group-item:after { |
|
background-image: url(str-replace(str-replace($circle, "currentColor", $theme-dark-body-color), "#", "%23")); |
|
} |
|
} |
|
|
|
/* spinners */ |
|
.spinner-border { |
|
border-color: currentColor !important; |
|
border-right-color: transparent !important; |
|
} |
|
|
|
/* avatar */ |
|
.avatar { |
|
background-color: $theme-dark-body-bg; |
|
|
|
[class*="avatar-status-"] { |
|
border-color: $theme-dark-card-bg; |
|
} |
|
} |
|
.avatar-group { |
|
.avatar { |
|
img, |
|
.avatar-content { |
|
box-shadow: 0 0 0 2px $theme-dark-card-bg, inset 0 0 0 1px rgba($theme-dark-card-bg, 0.07); |
|
} |
|
} |
|
} |
|
|
|
/* divider */ |
|
.divider { |
|
.divider-text { |
|
color: $theme-dark-body-color; |
|
|
|
&::before, |
|
&::after { |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
|
|
&.divider-dark { |
|
.divider-text { |
|
&::before, |
|
&::after { |
|
border-color: $theme-dark-border-color !important; |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* Timeline */ |
|
.timeline { |
|
.timeline-item { |
|
border-color: $theme-dark-border-color; |
|
|
|
.timeline-point:not(.timeline-point-indicator) { |
|
background-color: $theme-dark-card-bg; |
|
} |
|
.timeline-event { |
|
.timeline-event-time { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
} |
|
&:last-of-type:after { |
|
background: linear-gradient($theme-dark-border-color, transparent); |
|
} |
|
} |
|
} |
|
|
|
/* card */ |
|
.card { |
|
background-color: $theme-dark-card-bg; |
|
box-shadow: $theme-dark-box-shadow; |
|
.card-footer { |
|
border-color: $theme-dark-border-color; |
|
} |
|
|
|
&.overlay-img-card { |
|
.card-img-overlay { |
|
span, |
|
p, |
|
.card-body { |
|
color: $white; |
|
} |
|
} |
|
} |
|
} |
|
|
|
//--------------- Advance Cards --------------- |
|
//--------------------------------------------- |
|
|
|
// Developer Meetup Card |
|
.card-developer-meetup { |
|
.meetup-header .meetup-day { |
|
border-right-color: $theme-dark-input-border-color; |
|
} |
|
} |
|
|
|
// Profile Card |
|
.card-profile { |
|
.profile-image-wrapper .profile-image { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
|
|
// Business Card |
|
.business-card { |
|
.business-items .business-item { |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
|
|
// App Design Card |
|
.card-app-design { |
|
.design-planning-wrapper .design-planning { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
|
|
//--------------- Statistics Card --------------- |
|
//------------------------------------------------ |
|
|
|
.card-tiny-line-stats { |
|
.apexcharts-series-markers { |
|
.apexcharts-marker { |
|
stroke: $info; |
|
} |
|
|
|
&:last-child { |
|
.apexcharts-marker { |
|
fill: $theme-dark-card-bg; |
|
} |
|
} |
|
} |
|
} |
|
|
|
//-------------- Analytics Cards -------------- |
|
//--------------------------------------------- |
|
|
|
// Revenue Report Card |
|
.card-revenue-budget { |
|
.revenue-report-wrapper { |
|
border-right-color: $theme-dark-border-color; |
|
} |
|
.budget-wrapper { |
|
.apexcharts-series:not(:first-child) { |
|
path { |
|
stroke: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Earnings Card |
|
.earnings-card { |
|
.apexcharts-canvas .apexcharts-pie { |
|
.apexcharts-datalabel-label { |
|
fill: $theme-dark-body-color !important; |
|
} |
|
|
|
.apexcharts-datalabel-value { |
|
fill: $theme-dark-headings-color; |
|
} |
|
} |
|
} |
|
|
|
// Company Table Card |
|
.card-company-table { |
|
.avatar { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
|
|
/********** FORMS **********/ |
|
|
|
// Autofill style |
|
input:-webkit-autofill, |
|
textarea:-webkit-autofill, |
|
select:-webkit-autofill { |
|
-webkit-box-shadow: 0 0 0 1000px $theme-dark-card-bg inset !important; |
|
-webkit-text-fill-color: $theme-dark-body-color !important; |
|
} |
|
|
|
// input |
|
input.form-control, |
|
select.form-select, |
|
textarea.form-control { |
|
background-color: $theme-dark-input-bg; |
|
color: $theme-dark-body-color; |
|
|
|
&:not(:focus) { |
|
border-color: $theme-dark-input-border-color; |
|
} |
|
|
|
&::placeholder { |
|
color: $theme-dark-input-placeholder-color; |
|
} |
|
|
|
&:disabled, |
|
&[readonly="readonly"] { |
|
opacity: 0.5; |
|
} |
|
} |
|
// Floating textarea placeholder style |
|
.form-floating { |
|
textarea.form-control::placeholder { |
|
color: transparent; |
|
} |
|
} |
|
.form-control { |
|
// File Input |
|
|
|
// stylelint-disable-next-line selector-pseudo-element-no-unknown |
|
&::file-selector-button { |
|
@include gradient-bg($theme-dark-input-bg); |
|
color: $theme-dark-label-color; |
|
} |
|
&:hover:not(:disabled):not([readonly])::file-selector-button { |
|
background-color: tint-color($theme-dark-input-bg, 5%); |
|
} |
|
} |
|
// text area counter |
|
.char-textarea { |
|
&.active { |
|
color: $theme-dark-body-color !important; |
|
} |
|
|
|
&.max-limit { |
|
color: $danger !important; |
|
} |
|
} |
|
|
|
// custom control like checkbox, radio and switch |
|
.form-check-input { |
|
&:not(:checked) { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-input-border-color; |
|
} |
|
&:not(:checked):not(:indeterminate) { |
|
background-color: $theme-dark-card-bg; |
|
&:not(:focus) { |
|
border-color: $theme-dark-input-border-color; |
|
} |
|
&:disabled { |
|
background-color: $theme-dark-input-disabled-border-color !important; |
|
border-color: $theme-dark-input-disabled-border-color !important; |
|
} |
|
} |
|
} |
|
.form-switch { |
|
.form-check-input:not(:checked) { |
|
background-color: $theme-dark-switch-bg; |
|
} |
|
.form-check-input:disabled { |
|
background-color: $theme-dark-switch-bg-disabled; |
|
border-color: $theme-dark-switch-bg-disabled; |
|
} |
|
.form-check-input:not(:checked):not(:focus) { |
|
background-image: str-replace(str-replace($form-switch-bg-image, "#{$form-switch-color}", $white), "#", "%23"); |
|
} |
|
} |
|
|
|
select.form-select { |
|
&:not([multiple="multiple"]) { |
|
background-image: url(str-replace(str-replace($chevron-down, "currentColor", $theme-dark-body-color), "#", "%23")); |
|
} |
|
} |
|
|
|
// Added for override |
|
.was-validated { |
|
.form-control:invalid, |
|
.form-control.is-invalid, |
|
.form-check-input:invalid, |
|
.form-check-input.is-invalid, |
|
select.form-select:not(:focus):invalid, |
|
select.form-select:not(:focus).is-valid { |
|
border-color: $danger !important; |
|
} |
|
|
|
.form-control:valid, |
|
.form-control.is-valid, |
|
.form-check-input:valid, |
|
.form-check-input.is-valid, |
|
select.form-select:not(:focus):valid, |
|
select.form-select:not(:focus).is-valid { |
|
border-color: $success !important; |
|
} |
|
} |
|
|
|
// form wizard |
|
.wizard { |
|
.steps { |
|
ul { |
|
.disabled, |
|
.done { |
|
a { |
|
color: $theme-dark-body-color !important; |
|
|
|
&:hover { |
|
color: $theme-dark-body-color; |
|
} |
|
|
|
.step { |
|
background-color: $theme-dark-body-bg !important; |
|
color: $white !important; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// input groups |
|
.input-group { |
|
.input-group-text { |
|
background-color: $theme-dark-input-bg; |
|
border-color: $theme-dark-border-color; |
|
color: $theme-dark-body-color; |
|
} |
|
|
|
&:focus-within { |
|
.form-control, |
|
.input-group-text { |
|
border-color: $primary; |
|
box-shadow: none; |
|
} |
|
} |
|
} |
|
|
|
// floating label |
|
.form-label-group { |
|
& > input:not(:focus):not(:placeholder-shown) ~ label, |
|
& > textarea:not(:focus):not(:placeholder-shown) ~ label { |
|
color: $theme-dark-body-color !important; |
|
} |
|
} |
|
|
|
.counter-value { |
|
color: $white; |
|
} |
|
|
|
// custom options |
|
.custom-option-item-check { |
|
&:not(:checked) { |
|
+ .custom-option-item { |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
} |
|
/********** TABLE **********/ |
|
|
|
// table |
|
.table { |
|
td, |
|
th { |
|
color: $theme-dark-body-color; |
|
border-color: $theme-dark-border-color !important; |
|
} |
|
|
|
.thead, |
|
tbody { |
|
tr:not([class*="table-"]) { |
|
th, |
|
td { |
|
border-color: $theme-dark-border-color; |
|
color: $theme-dark-body-color; |
|
|
|
code { |
|
background-color: $theme-dark-table-row-bg; |
|
} |
|
} |
|
} |
|
} |
|
|
|
thead, |
|
tfoot { |
|
tr { |
|
th { |
|
border-color: $theme-dark-border-color; |
|
background-color: $theme-dark-table-header-bg; |
|
color: $theme-dark-headings-color; |
|
} |
|
} |
|
} |
|
|
|
thead.table-dark th { |
|
color: $dark; |
|
background-color: $white; |
|
} |
|
|
|
// if table not light/dark and thead not have dark class |
|
&:not(.table-dark):not(.table-light) thead:not(.table-dark) th, |
|
&:not(.table-dark):not(.table-light) tfoot:not(.table-dark) th { |
|
background-color: $theme-dark-table-header-bg; |
|
} |
|
|
|
// table-dark style |
|
&.table-dark { |
|
background-color: $white; |
|
&.table-striped tbody tr:nth-of-type(odd) { |
|
--bs-table-accent-bg: #{rgba($dark, 0.05)}; |
|
} |
|
td, |
|
th { |
|
border-color: #f8f9fa !important; |
|
// color: $dark !important; |
|
background-color: $white; |
|
.text-white { |
|
color: $dark !important; |
|
} |
|
} |
|
} |
|
tbody { |
|
tr { |
|
&.table-dark { |
|
td, |
|
th { |
|
color: $white; |
|
} |
|
} |
|
|
|
&.table-active { |
|
td, |
|
th { |
|
color: $theme-dark-body-color; |
|
background-color: tint-color($theme-dark-table-bg, 30%); |
|
} |
|
} |
|
} |
|
} |
|
|
|
// bordered table |
|
&.table-bordered { |
|
border-color: $theme-dark-border-color; |
|
} |
|
|
|
// table hover row color |
|
&.table-hover { |
|
tbody { |
|
tr { |
|
&:hover { |
|
--bs-table-accent-bg: #{$theme-dark-table-hover-bg}; |
|
} |
|
|
|
th, |
|
td { |
|
background-color: unset; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// table striped |
|
&.table-striped { |
|
tbody { |
|
tr { |
|
&:nth-of-type(odd) { |
|
--bs-table-accent-bg: #{$theme-dark-table-striped-bg}; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// datatable |
|
.dataTables_wrapper { |
|
.dt-buttons { |
|
.buttons-copy, |
|
.buttons-excel, |
|
.buttons-pdf, |
|
.buttons-print, |
|
.btn-secondary, |
|
.dt-button-collection [class*="buttons-"] { |
|
color: $white; |
|
background-color: $theme-dark-body-bg !important; |
|
&:active { |
|
background-color: $primary !important; |
|
color: $white; |
|
} |
|
} |
|
} |
|
.dt-button-collection { |
|
> div[role="menu"] { |
|
box-shadow: $theme-dark-box-shadow; |
|
} |
|
} |
|
|
|
.table.dataTable { |
|
tr { |
|
&.group { |
|
td { |
|
background-color: $theme-dark-table-striped-bg; |
|
color: $theme-dark-headings-color; |
|
} |
|
} |
|
} |
|
|
|
// Sorting Icons Change |
|
thead { |
|
.sorting, |
|
.sorting_asc, |
|
.sorting_desc { |
|
&:before { |
|
background-image: url(str-replace(str-replace($chevron-up, "currentColor", $theme-dark-body-color), "#", "%23")); |
|
} |
|
&:after { |
|
background-image: url(str-replace(str-replace($chevron-down, "currentColor", $theme-dark-body-color), "#", "%23")); |
|
} |
|
} |
|
.sorting { |
|
&:before, |
|
&:after { |
|
opacity: 0.5; |
|
} |
|
} |
|
.sorting_asc { |
|
&:before { |
|
opacity: 1; |
|
} |
|
&:after { |
|
opacity: 0.5; |
|
} |
|
} |
|
.sorting_desc { |
|
&:after { |
|
opacity: 1; |
|
} |
|
&:before { |
|
opacity: 0.5; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
// Datatable Modal for responsive |
|
.dtr-modal { |
|
.dtr-modal-display { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
div.dtr-modal-close { |
|
background-color: transparent; |
|
border-color: transparent; |
|
} |
|
} |
|
|
|
/********** PAGES **********/ |
|
|
|
// coming soon |
|
.getting-started { |
|
.clockCard { |
|
p { |
|
color: $theme-dark-body-color !important; |
|
} |
|
} |
|
} |
|
|
|
// profile page |
|
#user-profile { |
|
.profile-header { |
|
.navbar { |
|
background-color: $theme-dark-card-bg; |
|
.navbar-toggler { |
|
color: $theme-dark-body-color; |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Search page |
|
.search-bar { |
|
.form-control { |
|
background-color: $theme-dark-card-bg; |
|
} |
|
} |
|
|
|
// Blog Edit Page |
|
.blog-edit-wrapper { |
|
.border { |
|
border-color: $theme-dark-border-color !important; |
|
} |
|
} |
|
// Knowledge Base |
|
.kb-search-content-info { |
|
.kb-search-content { |
|
.card-img-top { |
|
background-color: #3f4860; |
|
} |
|
} |
|
} |
|
|
|
// list group circle for kb |
|
.list-group-circle { |
|
.list-group-item:not([class*="list-group-item-"]), |
|
.list-group-item-action { |
|
&:hover, |
|
&:focus, |
|
&:active { |
|
background-color: transparent !important; |
|
} |
|
} |
|
} |
|
|
|
.pricing-card { |
|
.card { |
|
&.basic-pricing, |
|
&.enterprise-pricing, |
|
&.standard-pricing { |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
} |
|
|
|
/********** APPLICATIONS **********/ |
|
|
|
// App common sidebar and content dark style |
|
.content-area-wrapper { |
|
border-color: $theme-dark-border-color !important; |
|
|
|
.sidebar { |
|
.sidebar-content { |
|
background-color: $theme-dark-card-bg !important; |
|
} |
|
} |
|
.app-fixed-search { |
|
background-color: $theme-dark-card-bg !important; |
|
border-color: $theme-dark-border-color !important; |
|
} |
|
.content-right { |
|
border-color: $theme-dark-border-color !important; |
|
} |
|
} |
|
|
|
// email application |
|
.email-application { |
|
.content-area-wrapper { |
|
// Email Sidebar |
|
.email-app-sidebar { |
|
.list-group { |
|
.list-group-item:hover { |
|
background-color: transparent; |
|
} |
|
} |
|
} |
|
|
|
// Email list |
|
.email-app-list { |
|
.app-action { |
|
border-color: $theme-dark-border-color; |
|
background-color: $theme-dark-card-bg; |
|
.action-right { |
|
.list-inline-item { |
|
.dropdown-toggle { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.email-user-list { |
|
.user-mail { |
|
border-color: $theme-dark-border-color; |
|
background-color: $theme-dark-card-bg; |
|
|
|
&:hover { |
|
box-shadow: 0 3px 10px 0 $theme-dark-card-bg; |
|
} |
|
|
|
&.selected-row-bg { |
|
background-color: rgba($primary, 0.06); |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
|
|
.user-mail { |
|
.user-details, |
|
.mail-message { |
|
p, |
|
.mail-date { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
} |
|
} |
|
|
|
.mail-read { |
|
background-color: $theme-dark-table-hover-bg; |
|
} |
|
} |
|
} |
|
|
|
// app email details |
|
.email-app-details { |
|
border-color: $theme-dark-border-color; |
|
.email-scroll-area { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
|
|
.email-detail-header { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
|
|
.email-header-right { |
|
.list-inline-item { |
|
.dropdown-toggle, |
|
.action-icon { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
} |
|
.email-info-dropup { |
|
.dropdown-toggle::after { |
|
background-image: url(str-replace(str-replace($chevron-down, "currentColor", $theme-dark-text-muted-color), "#", "%23")); |
|
} |
|
} |
|
|
|
.mail-message-wrapper, |
|
.email-detail-head { |
|
border-color: $theme-dark-border-color !important; |
|
} |
|
} |
|
|
|
// Compose mail |
|
#compose-mail { |
|
.compose-mail-form-field, |
|
.ql-toolbar, |
|
.ql-container { |
|
border-color: $theme-dark-border-color; |
|
} |
|
label { |
|
color: $theme-dark-body-color; |
|
} |
|
.modal-body { |
|
border-bottom-left-radius: $modal-content-border-radius; |
|
border-bottom-right-radius: $modal-content-border-radius; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// chat application |
|
.chat-application { |
|
.content-area-wrapper { |
|
border-color: $theme-dark-border-color; |
|
} |
|
// left sidebar |
|
.sidebar { |
|
.chat-profile-sidebar { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
} |
|
|
|
.sidebar-content { |
|
border-color: $theme-dark-border-color; |
|
|
|
.chat-fixed-search { |
|
border-color: $theme-dark-border-color; |
|
} |
|
|
|
.chat-user-list-wrapper { |
|
.chat-users-list { |
|
li { |
|
&:not(.active):hover { |
|
background: $theme-dark-body-bg; |
|
} |
|
.chat-info .card-text, |
|
.chat-time { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
&.active { |
|
.chat-info .card-text, |
|
.chat-time { |
|
color: $white; |
|
} |
|
} |
|
img { |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.avatar-border { |
|
img { |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
|
|
// Right side content area |
|
.content-right { |
|
.chat-app-window { |
|
.start-chat-area { |
|
background-color: $theme-dark-card-bg; |
|
|
|
.start-chat-icon, |
|
.start-chat-text { |
|
background: $theme-dark-card-bg; |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
.start-chat-area, |
|
.user-chats { |
|
background-image: url($chat-bg-dark); |
|
background-color: #1e232f; |
|
} |
|
.user-chats { |
|
.divider .divider-text { |
|
background: $theme-dark-card-bg; |
|
&:before, |
|
&:after { |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
.avatar img { |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
// Active conversation style |
|
.active-chat { |
|
.chat-left { |
|
.chat-content { |
|
background-color: $theme-dark-card-bg; |
|
p { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
|
|
.chat-content { |
|
p { |
|
color: $white; |
|
} |
|
} |
|
// Chat form |
|
.chat-header .dropdown-toggle { |
|
color: $theme-dark-body-color; |
|
} |
|
.chat-header, |
|
.chat-app-form { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
} |
|
|
|
.user-profile-sidebar { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
} |
|
|
|
// Chat widget dark style |
|
.chat-widget { |
|
.user-chats { |
|
background-color: $theme-dark-widget-bg !important; |
|
} |
|
.card-header, |
|
.chat-app-form { |
|
background-color: $theme-dark-card-bg; |
|
} |
|
.chat-app-window .user-chats .chat-left .chat-content { |
|
background-color: $theme-dark-card-bg !important; |
|
color: $theme-dark-body-color !important; |
|
} |
|
.chat-app-window .user-chats .avatar img { |
|
border-color: $theme-dark-body-bg; |
|
} |
|
} |
|
|
|
// Kanban application |
|
.kanban-application { |
|
.kanban-wrapper { |
|
.kanban-container { |
|
.kanban-board { |
|
.kanban-board-header { |
|
.kanban-title-board { |
|
color: $white; |
|
|
|
&:hover, |
|
&:focus { |
|
background-color: $theme-dark-card-bg; |
|
} |
|
} |
|
} |
|
.kanban-item { |
|
background-color: $theme-dark-card-bg; |
|
.item-dropdown i.dropdown-toggle, |
|
.item-dropdown svg.dropdown-toggle { |
|
stroke: $white; |
|
} |
|
.kanban-title-button { |
|
color: $theme-dark-body-color; |
|
} |
|
i, |
|
svg { |
|
stroke: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.update-item-sidebar { |
|
.nav-tabs .nav-item .nav-link, |
|
.tab-content .tab-pane { |
|
background-color: transparent; |
|
} |
|
} |
|
} |
|
.kanban-board.gu-mirror, |
|
.kanban-item.gu-mirror { |
|
background-color: $theme-dark-card-bg !important; |
|
} |
|
|
|
// Todo application |
|
.todo-application { |
|
.content-area-wrapper { |
|
.sidebar { |
|
.todo-form { |
|
.todo-item-action { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
.content-right { |
|
.todo-task-list-wrapper { |
|
background-color: $theme-dark-card-bg !important; |
|
border-color: $theme-dark-border-color; |
|
} |
|
.todo-task-list { |
|
.todo-item { |
|
&:not(:first-child) { |
|
border-color: $theme-dark-border-color; |
|
} |
|
&.completed { |
|
.todo-title { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
} |
|
&:hover { |
|
box-shadow: $theme-dark-box-shadow; |
|
} |
|
|
|
.todo-item-action { |
|
.todo-item-favorite:not(.text-warning) { |
|
i, |
|
svg { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.todo-item.gu-mirror { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
box-shadow: $theme-dark-box-shadow; |
|
&.completed { |
|
.todo-title { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
} |
|
} |
|
|
|
// E-commerce application |
|
.ecommerce-application { |
|
.ecommerce-card { |
|
.btn-light { |
|
background-color: $theme-dark-body-bg !important; |
|
color: $white; |
|
border-color: transparent; |
|
} |
|
} |
|
|
|
// main content |
|
.content-right, |
|
.content-body { |
|
// header items |
|
.ecommerce-header-items { |
|
.result-toggler { |
|
.search-results { |
|
color: $theme-dark-headings-color; |
|
} |
|
|
|
.shop-sidebar-toggler { |
|
i, |
|
svg { |
|
color: $theme-dark-headings-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// list and grid view |
|
.grid-view, |
|
.list-view { |
|
.ecommerce-card { |
|
.card-body { |
|
border-color: $theme-dark-border-color; |
|
} |
|
.item-options { |
|
.wishlist { |
|
span { |
|
color: $headings-color; |
|
} |
|
} |
|
|
|
.cart { |
|
span { |
|
color: $white; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.grid-view { |
|
.item-name a, |
|
.item-price { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
|
|
// wishlist-items |
|
.wishlist-items { |
|
.ecommerce-card { |
|
.move-cart { |
|
.move-to-cart { |
|
color: $white; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// checkout |
|
.product-checkout { |
|
.checkout-options { |
|
.coupons { |
|
input { |
|
color: $theme-dark-body-color; |
|
&::placeholder { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
// Ecommerce details |
|
.app-ecommerce-details { |
|
.item-features, |
|
.swiper-responsive-breakpoints.swiper-container .swiper-slide { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
} |
|
} |
|
|
|
// file manager app |
|
.file-manager-application { |
|
.sidebar-file-manager { |
|
background-color: $theme-dark-card-bg !important; |
|
.jstree { |
|
.jstree-container-ul { |
|
.jstree-anchor { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
.storage-status { |
|
i, |
|
svg { |
|
color: $theme-dark-body-color !important; |
|
} |
|
} |
|
|
|
.file-manager-title { |
|
color: $theme-dark-label-color; |
|
} |
|
|
|
&.show { |
|
border: 1px solid $theme-dark-border-color !important; |
|
} |
|
} |
|
|
|
.content-area-wrapper { |
|
border: 1px solid $theme-dark-border-color !important; |
|
} |
|
|
|
// File Manager App |
|
.file-manager-main-content { |
|
border: 1px solid $theme-dark-border-color !important; |
|
|
|
.file-manager-app-searchbar { |
|
background-color: transparent !important; |
|
border-bottom: 1px solid $theme-dark-border-color !important; |
|
|
|
.file-manager-toggler { |
|
color: $theme-dark-body-color !important; |
|
} |
|
} |
|
|
|
.file-manager-content-header, |
|
.file-manager-content-body { |
|
background-color: $theme-dark-card-bg !important; |
|
} |
|
|
|
.file-manager-content-header { |
|
border-color: $theme-dark-border-color !important; |
|
} |
|
|
|
.file-manager-content-body { |
|
.drives { |
|
.card { |
|
background-color: $theme-dark-table-bg; |
|
} |
|
} |
|
|
|
.view-container { |
|
.file-manager-item { |
|
.file-logo-wrapper { |
|
background-color: $theme-dark-body-bg !important; |
|
} |
|
&:not(.selected) { |
|
border-color: $theme-dark-border-color !important; |
|
} |
|
} |
|
&:not(.list-view) { |
|
.file-manager-item { |
|
.file-size, |
|
.file-accessed { |
|
color: $theme-dark-text-muted-color !important; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
#app-file-manager-info-sidebar { |
|
.nav-tabs .nav-link, |
|
.tab-content .tab-pane { |
|
background-color: transparent; |
|
} |
|
|
|
.nav-tabs { |
|
.nav-item:not(.active) { |
|
.nav-link { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// calendar |
|
.app-calendar { |
|
.app-calendar-sidebar { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
|
|
.sidebar-content-title { |
|
color: $theme-dark-label-color; |
|
} |
|
.select-all, |
|
.input-filter { |
|
~ label { |
|
color: $theme-dark-label-color; |
|
} |
|
} |
|
} |
|
.fc { |
|
.fc-day-today { |
|
background: $theme-dark-body-bg !important; |
|
background-color: $theme-dark-body-bg !important; |
|
} |
|
|
|
.fc-timegrid { |
|
.fc-scrollgrid-section { |
|
.fc-col-header-cell, |
|
.fc-timegrid-axis, |
|
.fc-daygrid-day { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
} |
|
.fc-day-today { |
|
background-color: rgba($color: $gray-100, $alpha: 0.12) !important; |
|
|
|
&.fc-col-header-cell { |
|
background-color: $theme-dark-card-bg !important; |
|
} |
|
} |
|
} |
|
} |
|
.fc-popover { |
|
background: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
} |
|
.fc-popover-header { |
|
.fc-popover-title, |
|
.fc-popover-close { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
tbody td, |
|
thead th { |
|
border-color: $theme-dark-border-color; |
|
} |
|
|
|
.fc-scrollgrid { |
|
border-color: $theme-dark-border-color; |
|
} |
|
|
|
.fc-list, |
|
th { |
|
border-color: $theme-dark-border-color; |
|
.fc-list-day-cushion { |
|
background: $theme-dark-body-bg; |
|
} |
|
.fc-list-event:hover td { |
|
background-color: $theme-dark-body-bg; |
|
} |
|
.fc-list-event-time { |
|
color: $theme-dark-body-color; |
|
} |
|
.fc-list-event { |
|
td { |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
} |
|
} |
|
.fc-timegrid-event-harness-inset .fc-timegrid-event, |
|
.fc-timegrid-event.fc-event-mirror, |
|
.fc-timegrid-more-link { |
|
box-shadow: 0 0 0 1px $theme-dark-border-color; |
|
} |
|
} |
|
|
|
// Invoice Application |
|
.invoice-list-wrapper { |
|
.dataTables_wrapper { |
|
.invoice-list-dataTable-header { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
} |
|
.invoice-data-table { |
|
background-color: $theme-dark-card-bg; |
|
tbody .selected-row-bg { |
|
background-color: $theme-dark-border-color; |
|
} |
|
td { |
|
background-color: inherit; |
|
} |
|
} |
|
} |
|
} |
|
.invoice-edit, |
|
.invoice-add { |
|
.invoice-preview-card { |
|
.invoice-product-details { |
|
background-color: $theme-dark-body-bg; |
|
.product-details-border { |
|
background-color: $theme-dark-card-bg; |
|
border-color: $theme-dark-border-color; |
|
} |
|
} |
|
} |
|
} |
|
.invoice-print { |
|
.form-control { |
|
background-color: $theme-dark-card-bg; |
|
} |
|
} |
|
|
|
// Users Application |
|
.app-user-view { |
|
.plan-card { |
|
border-color: $primary !important; |
|
} |
|
} |
|
|
|
/********** CUSTOMIZER **********/ |
|
|
|
.customizer { |
|
background-color: $theme-dark-card-bg; |
|
|
|
.customizer-close { |
|
i, |
|
svg { |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
} |
|
|
|
.footer-fixed { |
|
.footer { |
|
background-color: $theme-dark-card-bg; |
|
} |
|
} |
|
|
|
/********** HORIZONTAL LAYOUT **********/ |
|
.horizontal-layout { |
|
&.navbar-sticky .horizontal-menu-wrapper .navbar-horizontal.header-navbar.fixed-top { |
|
box-shadow: 0 4px 24px 0 rgba($black, 0.75) !important; |
|
} |
|
.horizontal-menu-wrapper { |
|
background: linear-gradient(to bottom, rgba(37, 43, 71, 0.76) 44%, rgba(56, 53, 53, 0.46) 73%, rgba($white, 0) 100%) !important; |
|
.header-navbar { |
|
background: $theme-dark-card-bg !important; |
|
&.navbar-shadow { |
|
box-shadow: 0 4px 24px 0 rgba($black, 0.75); |
|
} |
|
&.navbar-horizontal { |
|
ul#main-menu-navigation > li:hover:not(.active) > a { |
|
background: $theme-dark-body-bg; |
|
} |
|
|
|
.active { |
|
.nav-link { |
|
&.dropdown-toggle::after { |
|
background-image: url(str-replace(str-replace($chevron-down, "currentColor", $white), "#", "%23")); |
|
} |
|
} |
|
} |
|
|
|
&.navbar-dark { |
|
background: $theme-dark-card-bg !important; |
|
} |
|
|
|
.nav-link { |
|
&.dropdown-toggle::after { |
|
background-image: url(str-replace(str-replace($chevron-down, "currentColor", $theme-dark-body-color), "#", "%23")); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.main-menu-content { |
|
.navbar-nav { |
|
.dropdown-submenu { |
|
&.show { |
|
background-color: $theme-dark-card-bg !important; |
|
color: $theme-dark-body-color; |
|
} |
|
} |
|
.dropdown-menu { |
|
a { |
|
&:hover { |
|
color: $theme-dark-headings-color !important; |
|
} |
|
} |
|
.disabled a { |
|
color: $theme-dark-text-muted-color; |
|
} |
|
.dropdown-item { |
|
color: $theme-dark-headings-color; |
|
} |
|
.dropdown-toggle { |
|
&::after { |
|
background-image: url(str-replace(str-replace($chevron-right, "currentColor", $theme-dark-body-color), "#", "%23")); |
|
} |
|
&:hover, |
|
&:active { |
|
&::after { |
|
background-image: url(str-replace(str-replace($chevron-right, "currentColor", $white), "#", "%23")); |
|
} |
|
} |
|
} |
|
} |
|
|
|
> li.active { |
|
> a { |
|
> i, |
|
> svg { |
|
color: $white !important; |
|
} |
|
} |
|
|
|
.dropdown-menu { |
|
li.active > a { |
|
background: $theme-dark-body-bg !important; |
|
color: $theme-dark-body-color; |
|
&:hover { |
|
color: $primary !important; |
|
} |
|
} |
|
} |
|
|
|
.dropdown-menu { |
|
li.open.active { |
|
> a { |
|
color: $theme-dark-body-color !important; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
}
|
|
|