CHIEFSOFT\ameye
205 lines
9.7 KiB
SCSS
205 lines
9.7 KiB
SCSS
//
|
|
// root.scss
|
|
//
|
|
|
|
@mixin color-mode($mode: light, $root: false) {
|
|
@if $color-mode-type =="media-query" {
|
|
@if $root ==true {
|
|
@media (prefers-color-scheme: $mode) {
|
|
:root {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@else {
|
|
@media (prefers-color-scheme: $mode) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@else {
|
|
[data-bs-theme="#{$mode}"] {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
//theme-light
|
|
:root {
|
|
--#{$prefix}header-bg: #{$header-bg};
|
|
--#{$prefix}header-item-color: #{$header-item-color};
|
|
--#{$prefix}top-tagbar-bg: #{$top-tagbar-bg};
|
|
--#{$prefix}header-item-sub-color: #{$text-muted};
|
|
|
|
// card
|
|
--#{$prefix}card-logo-dark: block;
|
|
--#{$prefix}card-logo-light: none;
|
|
|
|
// Topbar User
|
|
--#{$prefix}topbar-user-bg: #{$gray-100};
|
|
|
|
// Horizontal nav
|
|
--#{$prefix}topnav-bg: #{$white};
|
|
--#{$prefix}topnav-item-color: #{darken($gray-600, 10%)};
|
|
--#{$prefix}topnav-item-color-active: var(--#{$prefix}primary);
|
|
|
|
// twocolumn menu
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$white};
|
|
--#{$prefix}twocolumn-menu-bg: #{$white};
|
|
|
|
&[data-topbar="dark"] {
|
|
--#{$prefix}header-bg: #{$gray-800};
|
|
--#{$prefix}header-item-color: #{$gray-100};
|
|
--#{$prefix}header-item-sub-color: #8795ab;
|
|
--#{$prefix}topbar-user-bg: #{rgba($gray-200, 0.1)};
|
|
}
|
|
|
|
&[data-topbar="brand"] {
|
|
--#{$prefix}header-bg: #{$blue-700};
|
|
--#{$prefix}header-item-color: #{$gray-100};
|
|
--#{$prefix}header-item-sub-color: #{lighten($blue-100, 2.5%)};
|
|
--#{$prefix}topbar-user-bg: #335fa1;
|
|
}
|
|
|
|
&[data-topbar="purple"] {
|
|
--#{$prefix}header-bg: #{$purple-700};
|
|
--#{$prefix}header-item-color: #{$gray-100};
|
|
--#{$prefix}header-item-sub-color: #{lighten($purple-100, 1.5%)};
|
|
}
|
|
|
|
//vertical light
|
|
--#{$prefix}vertical-menu-bg: #{$white};
|
|
--#{$prefix}vertical-menu-border: #{$border-color};
|
|
--#{$prefix}vertical-menu-item-color: #{darken($gray-600, 10%)};
|
|
--#{$prefix}vertical-menu-item-hover-color: var(--#{$prefix}primary);
|
|
--#{$prefix}vertical-menu-item-hover-bg: var(--#{$prefix}primary);
|
|
--#{$prefix}vertical-menu-item-active-color: var(--#{$prefix}primary);
|
|
--#{$prefix}vertical-menu-sub-item-color: #{darken($gray-600, 4%)};
|
|
--#{$prefix}vertical-menu-sub-item-hover-color: var(--#{$prefix}primary);
|
|
--#{$prefix}vertical-menu-sub-item-active-color: var(--#{$prefix}primary);
|
|
--#{$prefix}vertical-menu-title-color: #919da9;
|
|
|
|
&[data-sidebar="dark"] {
|
|
--#{$prefix}vertical-menu-bg: #0e203a;
|
|
--#{$prefix}vertical-menu-border: #0e203a;
|
|
--#{$prefix}vertical-menu-item-color: #9aa5b5;
|
|
--#{$prefix}vertical-menu-item-hover-color: #{$white};
|
|
--#{$prefix}vertical-menu-item-hover-bg: #1c2932;
|
|
--#{$prefix}vertical-menu-item-active-color: #{$white};
|
|
--#{$prefix}vertical-menu-sub-item-color: #9aa5b5;
|
|
--#{$prefix}vertical-menu-sub-item-hover-color: #{$white};
|
|
--#{$prefix}vertical-menu-sub-item-active-color: #{$white};
|
|
--#{$prefix}vertical-menu-title-color: #9aa5b5;
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #112645;
|
|
--#{$prefix}twocolumn-menu-bg: #0e203a;
|
|
}
|
|
|
|
&[data-sidebar="brand"] {
|
|
--#{$prefix}vertical-menu-bg: #{$blue-700};
|
|
--#{$prefix}vertical-menu-border: #{$blue-700};
|
|
--#{$prefix}vertical-menu-item-color: #a5bad9;
|
|
--#{$prefix}vertical-menu-item-hover-color: #{$white};
|
|
--#{$prefix}vertical-menu-item-hover-bg: #1c2932;
|
|
--#{$prefix}vertical-menu-item-active-color: #{$white};
|
|
--#{$prefix}vertical-menu-sub-item-color: #a5bad9;
|
|
--#{$prefix}vertical-menu-sub-item-hover-color: #{$white};
|
|
--#{$prefix}vertical-menu-sub-item-active-color: #{$white};
|
|
--#{$prefix}vertical-menu-title-color: #a5bad9;
|
|
}
|
|
|
|
|
|
&:is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) {
|
|
--#{$prefix}vertical-menu-item-color: #{rgba($white, .50)};
|
|
--#{$prefix}vertical-menu-item-hover-color: #{$white};
|
|
--#{$prefix}vertical-menu-item-hover-bg: #1c2932;
|
|
--#{$prefix}vertical-menu-item-active-color: #{$white};
|
|
--#{$prefix}vertical-menu-sub-item-color: #{rgba($white, .50)};
|
|
--#{$prefix}vertical-menu-sub-item-hover-color: #{$white};
|
|
--#{$prefix}vertical-menu-sub-item-active-color: #{$white};
|
|
--#{$prefix}vertical-menu-title-color: #{rgba($white, .50)};
|
|
}
|
|
|
|
&[data-sidebar="gradient"] {
|
|
--#{$prefix}vertical-menu-bg: linear-gradient(to left, #{$blue-700}, #{$blue-800});
|
|
--#{$prefix}vertical-menu-border: #{$blue-700};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: linear-gradient(to left, #{$blue-700}, #{$blue-800});
|
|
--#{$prefix}twocolumn-menu-bg: linear-gradient(to left, #{$blue-700}, #{$blue-800});
|
|
}
|
|
|
|
&[data-sidebar="gradient-2"] {
|
|
--#{$prefix}vertical-menu-bg: linear-gradient(to left, #{$purple-700}, #{$purple-800});
|
|
--#{$prefix}vertical-menu-border: #{$purple-700};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: linear-gradient(to left, #{$purple-700}, #{$purple-800});
|
|
--#{$prefix}twocolumn-menu-bg: linear-gradient(to left, #{$purple-700}, #{$purple-800});
|
|
}
|
|
|
|
&[data-sidebar="gradient-3"] {
|
|
--#{$prefix}vertical-menu-bg: linear-gradient(to left, #{$green-700}, #{$green-800});
|
|
--#{$prefix}vertical-menu-border: #{$green-700};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: linear-gradient(to left, #{$green-700}, #{$green-800});
|
|
--#{$prefix}twocolumn-menu-bg: linear-gradient(to left, #{$green-700}, #{$green-800});
|
|
}
|
|
|
|
&[data-sidebar="gradient-4"] {
|
|
--#{$prefix}vertical-menu-bg: linear-gradient(to left, #{$cyan-700}, #{$cyan-800});
|
|
--#{$prefix}vertical-menu-border: #{$cyan-700};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: linear-gradient(to left, #{$cyan-700}, #{$cyan-800});
|
|
--#{$prefix}twocolumn-menu-bg: linear-gradient(to left, #{$cyan-700}, #{$cyan-800});
|
|
}
|
|
|
|
&[data-body-image="img-1"] {
|
|
--#{$prefix}body-bg-image: url("../images/sidebar/body-light-1.png");
|
|
}
|
|
|
|
&[data-body-image="img-2"] {
|
|
--#{$prefix}body-bg-image: url("../images/sidebar/body-light-2.png");
|
|
}
|
|
|
|
&[data-body-image="img-3"] {
|
|
--#{$prefix}body-bg-image: url("../images/sidebar/body-light-3.png");
|
|
}
|
|
}
|
|
|
|
//theme dark
|
|
@if $enable-dark-mode {
|
|
@include color-mode(dark, true) {
|
|
--#{$prefix}light: #{$light-dark};
|
|
--#{$prefix}light-rgb: #{to-rgb($light-dark)};
|
|
--#{$prefix}dark: #{$light-dark};
|
|
--#{$prefix}dark-rgb: #{to-rgb($light-dark)};
|
|
|
|
--#{$prefix}header-bg: #{$header-bg-dark};
|
|
--#{$prefix}header-item-color: #{$header-item-color-dark};
|
|
|
|
--#{$prefix}top-tagbar-bg: #{$top-tagbar-bg-dark};
|
|
--#{$prefix}header-item-sub-color: #{$text-muted};
|
|
|
|
// card
|
|
--#{$prefix}card-logo-dark: none;
|
|
--#{$prefix}card-logo-light: block;
|
|
|
|
|
|
.btn-dark {
|
|
--#{$prefix}btn-bg: #{lighten($gray-700, 1.5%)};
|
|
--#{$prefix}btn-border-color: #{lighten($gray-700, 1.5%)};
|
|
--#{$prefix}btn-hover-bg: #{lighten($gray-700, 3.5%)};
|
|
--#{$prefix}btn-hover-border-color: #{lighten($gray-700, 3.5%)};
|
|
--#{$prefix}btn-active-bg: #{lighten($gray-700, 3.5%)};
|
|
--#{$prefix}btn-active-border-color: #{lighten($gray-700, 3.5%)};
|
|
--#{$prefix}btn-disabled-bg: #{lighten($gray-700, 3.5%)};
|
|
--#{$prefix}btn-disabled-border-color: #{lighten($gray-700, 3.5%)};
|
|
}
|
|
|
|
.btn-outline-dark {
|
|
--#{$prefix}btn-color: #{$white};
|
|
--#{$prefix}btn-border-color: #{lighten($gray-700, 1.5%)};
|
|
--#{$prefix}btn-hover-bg: #{lighten($gray-700, 1.5%)};
|
|
--#{$prefix}btn-hover-border-color: #{lighten($gray-700, 1.5%)};
|
|
--#{$prefix}btn-active-bg: #{lighten($gray-700, 1.5%)};
|
|
--#{$prefix}btn-active-border-color: #{lighten($gray-700, 1.5%)};
|
|
}
|
|
}
|
|
}
|