mirror of https://github.com/ColorlibHQ/AdminLTE
dark mode 40% done
parent
24863ac596
commit
0390491e57
|
@ -1,6 +1,6 @@
|
|||
.content-wrapper {
|
||||
grid-area: content-wrapper;
|
||||
padding-bottom: 1rem;
|
||||
color: --#{$lte-prefix}main-color;
|
||||
background-color: --#{$lte-prefix}main-bg;
|
||||
color: var(--#{$lte-prefix}main-color);
|
||||
background-color: var(--#{$lte-prefix}main-bg);
|
||||
}
|
||||
|
|
|
@ -18,13 +18,13 @@
|
|||
|
||||
&.timestamp-light {
|
||||
.direct-chat-timestamp {
|
||||
color: tint-color(color-contrast($color-contrast-light), 10%);
|
||||
color: rgba(var(--#{$prefix}body-color-rgb), .65);
|
||||
}
|
||||
}
|
||||
|
||||
&.timestamp-dark {
|
||||
.direct-chat-timestamp {
|
||||
color: shade-color(color-contrast($color-contrast-dark), 20%);
|
||||
color: rgba(var(--#{$prefix}body-color-rgb), .9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -123,7 +123,7 @@
|
|||
}
|
||||
|
||||
.direct-chat-timestamp {
|
||||
color: shade-color($gray-500, 25%);
|
||||
color: rgba(var(--#{$prefix}body-color-rgb), .75);
|
||||
}
|
||||
|
||||
//Direct chat contacts pane
|
||||
|
@ -141,23 +141,23 @@
|
|||
width: 100%;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
color: $white;
|
||||
background-color: $dark;
|
||||
color: var(--#{$prefix}body-bg);
|
||||
background-color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.direct-chat-contacts-light {
|
||||
background-color: $light;
|
||||
background-color: var(--#{$prefix}light-bg-subtle);
|
||||
|
||||
.contacts-list-name {
|
||||
color: $gray-700;
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.contacts-list-date {
|
||||
color: $gray-600;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
|
||||
.contacts-list-msg {
|
||||
color: shade-color($gray-600, 10%);
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -185,7 +185,7 @@
|
|||
|
||||
.contacts-list-info {
|
||||
margin-left: 45px;
|
||||
color: $white;
|
||||
color: var(--#{$prefix}body-bg);
|
||||
}
|
||||
|
||||
.contacts-list-name,
|
||||
|
@ -203,11 +203,11 @@
|
|||
|
||||
.contacts-list-date {
|
||||
font-weight: 400;
|
||||
color: $gray-400;
|
||||
color: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
|
||||
.contacts-list-msg {
|
||||
color: shade-color($gray-400, 10%);
|
||||
color: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
|
||||
// Color variants
|
||||
|
|
|
@ -142,8 +142,8 @@
|
|||
position: absolute;
|
||||
right: 5%;
|
||||
left: auto;
|
||||
background-color: $white;
|
||||
border: 1px solid #ddd;
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -178,7 +178,7 @@
|
|||
height: 90px;
|
||||
border: 3px solid;
|
||||
border-color: transparent;
|
||||
border-color: rgba(255, 255, 255, .2);
|
||||
border-color: var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
> p {
|
||||
|
@ -198,8 +198,8 @@
|
|||
> .user-body {
|
||||
@include clearfix ();
|
||||
padding: 15px;
|
||||
border-top: 1px solid $gray-300;
|
||||
border-bottom: 1px solid $gray-700;
|
||||
border-top: 1px solid var(--#{$prefix}border-color);
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
|
||||
a {
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
@ -213,7 +213,7 @@
|
|||
> .user-footer {
|
||||
@include clearfix ();
|
||||
padding: 10px;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
background-color: var(--#{$prefix}light-bg);
|
||||
|
||||
.btn-default {
|
||||
color: var(--#{$prefix}body-color);
|
||||
|
|
|
@ -12,7 +12,8 @@
|
|||
min-height: 80px;
|
||||
padding: .5rem;
|
||||
margin-bottom: map-get($spacers, 3);
|
||||
background-color: $white;
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
|
||||
.progress {
|
||||
height: 2px;
|
||||
|
|
|
@ -3,10 +3,10 @@
|
|||
//
|
||||
|
||||
@include header-variant(
|
||||
$lte-header-light-bg,
|
||||
$lte-header-light-color,
|
||||
$lte-header-mobile-light-bg,
|
||||
$lte-header-mobile-light-color
|
||||
var(--#{$lte-prefix}header-light-bg),
|
||||
var(--#{$lte-prefix}header-light-color),
|
||||
var(--#{$lte-prefix}header-mobile-light-bg),
|
||||
var(--#{$lte-prefix}header-mobile-light-color)
|
||||
);
|
||||
|
||||
.main-header {
|
||||
|
|
|
@ -4,35 +4,35 @@
|
|||
|
||||
.sidebar-bg-dark {
|
||||
@include nav-treeview-dark (
|
||||
$lte-sidebar-dark-bg,
|
||||
$lte-sidebar-dark-hover-bg,
|
||||
$lte-sidebar-dark-color,
|
||||
$lte-sidebar-dark-hover-color,
|
||||
$lte-sidebar-dark-active-color,
|
||||
$lte-sidebar-dark-submenu-bg,
|
||||
$lte-sidebar-dark-submenu-color,
|
||||
$lte-sidebar-dark-submenu-hover-color,
|
||||
$lte-sidebar-dark-submenu-hover-bg,
|
||||
$lte-sidebar-dark-submenu-active-color,
|
||||
$lte-sidebar-dark-submenu-active-bg,
|
||||
$lte-sidebar-dark-header-color
|
||||
var(--#{$lte-prefix}sidebar-dark-bg),
|
||||
var(--#{$lte-prefix}sidebar-dark-hover-bg),
|
||||
var(--#{$lte-prefix}sidebar-dark-color),
|
||||
var(--#{$lte-prefix}sidebar-dark-hover-color),
|
||||
var(--#{$lte-prefix}sidebar-dark-active-color),
|
||||
var(--#{$lte-prefix}sidebar-dark-submenu-bg),
|
||||
var(--#{$lte-prefix}sidebar-dark-submenu-color),
|
||||
var(--#{$lte-prefix}sidebar-dark-submenu-hover-color),
|
||||
var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg),
|
||||
var(--#{$lte-prefix}sidebar-dark-submenu-active-color),
|
||||
var(--#{$lte-prefix}sidebar-dark-submenu-active-bg),
|
||||
var(--#{$lte-prefix}sidebar-dark-header-color)
|
||||
);
|
||||
}
|
||||
|
||||
.sidebar-bg-light {
|
||||
@include nav-treeview-light (
|
||||
$lte-sidebar-light-bg,
|
||||
$lte-sidebar-light-hover-bg,
|
||||
$lte-sidebar-light-color,
|
||||
$lte-sidebar-light-hover-color,
|
||||
$lte-sidebar-light-active-color,
|
||||
$lte-sidebar-light-submenu-bg,
|
||||
$lte-sidebar-light-submenu-color,
|
||||
$lte-sidebar-light-submenu-hover-color,
|
||||
$lte-sidebar-light-submenu-hover-bg,
|
||||
$lte-sidebar-light-submenu-active-color,
|
||||
$lte-sidebar-light-submenu-active-bg,
|
||||
$lte-sidebar-light-header-color
|
||||
var(--#{$lte-prefix}sidebar-light-bg),
|
||||
var(--#{$lte-prefix}sidebar-light-hover-bg),
|
||||
var(--#{$lte-prefix}sidebar-light-color),
|
||||
var(--#{$lte-prefix}sidebar-light-hover-color),
|
||||
var(--#{$lte-prefix}sidebar-light-active-color),
|
||||
var(--#{$lte-prefix}sidebar-light-submenu-bg),
|
||||
var(--#{$lte-prefix}sidebar-light-submenu-color),
|
||||
var(--#{$lte-prefix}sidebar-light-submenu-hover-color),
|
||||
var(--#{$lte-prefix}sidebar-light-submenu-hover-bg),
|
||||
var(--#{$lte-prefix}sidebar-light-submenu-active-color),
|
||||
var(--#{$lte-prefix}sidebar-light-submenu-active-bg),
|
||||
var(--#{$lte-prefix}sidebar-light-header-color)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
padding: 10px 0;
|
||||
background-color: $white;
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
|
||||
}
|
||||
|
||||
|
@ -39,7 +39,7 @@
|
|||
.product-description {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: $gray-600;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
@ -1,23 +1,61 @@
|
|||
:root {
|
||||
--#{$lte-prefix}main-color: $lte-main-color;
|
||||
--#{$lte-prefix}main-bg: $lte-main-bg;
|
||||
// Content Wrapper
|
||||
--#{$lte-prefix}main-color: #{$lte-main-color};
|
||||
--#{$lte-prefix}main-bg: #{$lte-main-bg};
|
||||
|
||||
// Main Header
|
||||
--#{$lte-prefix}header-light-bg: #{$lte-header-light-bg};
|
||||
--#{$lte-prefix}header-light-color: #{$lte-header-light-color};
|
||||
--#{$lte-prefix}header-mobile-light-bg: #{$lte-header-mobile-light-bg};
|
||||
--#{$lte-prefix}header-mobile-light-color: #{$lte-header-mobile-light-color};
|
||||
|
||||
// Sidebar
|
||||
--#{$lte-prefix}sidebar-width: #{$lte-sidebar-width};
|
||||
|
||||
// Sidebar active links
|
||||
--#{$lte-prefix}sidebar-menu-active-bg: #{$lte-sidebar-menu-active-bg};
|
||||
--#{$lte-prefix}sidebar-menu-active-color: #{$lte-sidebar-menu-active-color};
|
||||
|
||||
// Dark Sidebar Native Variables
|
||||
--#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg};
|
||||
--#{$lte-prefix}sidebar-dark-hover-bg: #{$lte-sidebar-dark-hover-bg};
|
||||
--#{$lte-prefix}sidebar-dark-color: #{$lte-sidebar-dark-color};
|
||||
--#{$lte-prefix}sidebar-dark-hover-color: #{$lte-sidebar-dark-hover-color};
|
||||
--#{$lte-prefix}sidebar-dark-active-color: #{$lte-sidebar-dark-active-color};
|
||||
--#{$lte-prefix}sidebar-dark-submenu-bg: #{$lte-sidebar-dark-submenu-bg};
|
||||
--#{$lte-prefix}sidebar-dark-submenu-color: #{$lte-sidebar-dark-submenu-color};
|
||||
--#{$lte-prefix}sidebar-dark-submenu-hover-color: #{$lte-sidebar-dark-submenu-hover-color};
|
||||
--#{$lte-prefix}sidebar-dark-submenu-hover-bg: #{$lte-sidebar-dark-submenu-hover-bg};
|
||||
--#{$lte-prefix}sidebar-dark-submenu-active-color: #{$lte-sidebar-dark-submenu-active-color};
|
||||
--#{$lte-prefix}sidebar-dark-submenu-active-bg: #{$lte-sidebar-dark-submenu-active-bg};
|
||||
--#{$lte-prefix}sidebar-dark-header-color: #{$lte-sidebar-dark-header-color};
|
||||
|
||||
// Light Sidebar Native Variables
|
||||
--#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg};
|
||||
--#{$lte-prefix}sidebar-light-hover-bg: #{$lte-sidebar-light-hover-bg};
|
||||
--#{$lte-prefix}sidebar-light-color: #{$lte-sidebar-light-color};
|
||||
--#{$lte-prefix}sidebar-light-hover-color: #{$lte-sidebar-light-hover-color};
|
||||
--#{$lte-prefix}sidebar-light-active-color: #{$lte-sidebar-light-active-color};
|
||||
--#{$lte-prefix}sidebar-light-submenu-bg: #{$lte-sidebar-light-submenu-bg};
|
||||
--#{$lte-prefix}sidebar-light-submenu-color: #{$lte-sidebar-light-submenu-color};
|
||||
--#{$lte-prefix}sidebar-light-submenu-hover-color: #{$lte-sidebar-light-submenu-hover-color};
|
||||
--#{$lte-prefix}sidebar-light-submenu-hover-bg: #{$lte-sidebar-light-submenu-hover-bg};
|
||||
--#{$lte-prefix}sidebar-light-submenu-active-color: #{$lte-sidebar-light-submenu-active-color};
|
||||
--#{$lte-prefix}sidebar-light-submenu-active-bg: #{$lte-sidebar-light-submenu-active-bg};
|
||||
--#{$lte-prefix}sidebar-light-header-color: #{$lte-sidebar-light-header-color};
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark, true) {
|
||||
color-scheme: dark;
|
||||
// Body Color
|
||||
--#{$lte-prefix}main-color: $lte-main-color-dark;
|
||||
--#{$lte-prefix}main-bg: $lte-main-bg-dark;
|
||||
--#{$lte-prefix}main-color: #{$lte-main-color-dark};
|
||||
--#{$lte-prefix}main-bg: #{$lte-main-bg-dark};
|
||||
|
||||
// Sidebar active links
|
||||
--#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
|
||||
--#{$lte-prefix}sidebar-menu-active-color: #{$white};
|
||||
// // Dark Sidebar Native Variables
|
||||
--#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg-dark};
|
||||
|
||||
// Dark Sidebar Native Variables
|
||||
--#{$lte-prefix}sidebar-dark-bg: #{$dark};
|
||||
|
||||
// Light Sidebar Native Variables
|
||||
--#{$lte-prefix}sidebar-light-bg: #{$white};
|
||||
// // Light Sidebar Native Variables
|
||||
--#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg-dark};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.sidebar-close:not(.sidebar-horizontal) {
|
||||
.main-sidebar {
|
||||
// stylelint-disable-next-line
|
||||
margin-left: calc(#{$lte-sidebar-width} * -1);
|
||||
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
> a:hover {
|
||||
&,
|
||||
.users-list-name {
|
||||
color: #999;
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -34,12 +34,12 @@
|
|||
.users-list-name {
|
||||
overflow: hidden;
|
||||
font-size: $font-size-sm;
|
||||
color: $gray-700;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.users-list-date {
|
||||
font-size: 12px;
|
||||
color: shade-color($gray-500, 20%);
|
||||
color: var(--#{$prefix}tertiary-color);
|
||||
}
|
||||
|
|
|
@ -1,3 +1,9 @@
|
|||
// Body background (Affects main content background only)
|
||||
$lte-main-bg-dark: $body-bg-dark !default;
|
||||
$lte-main-color-dark: $body-color-dark !default;
|
||||
|
||||
// Dark sidebar
|
||||
$lte-sidebar-dark-bg-dark: $dark !default;
|
||||
|
||||
// Light sidebar
|
||||
$lte-sidebar-light-bg-dark: $light !default;
|
||||
|
|
|
@ -3,49 +3,6 @@
|
|||
// Prefix for :root CSS variables
|
||||
$lte-prefix: lte- !default;
|
||||
|
||||
// COLORS
|
||||
// --------------------------------------------------------
|
||||
$lte-gray-x-light: #d2d6de !default;
|
||||
|
||||
// Dynamic Variables
|
||||
// --------------------------------------------------------
|
||||
:root {
|
||||
// Sidebar
|
||||
--#{$lte-prefix}sidebar-width: 250px;
|
||||
|
||||
// Sidebar active links
|
||||
--#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
|
||||
--#{$lte-prefix}sidebar-menu-active-color: #{$white};
|
||||
|
||||
// Dark Sidebar Native Variables
|
||||
--#{$lte-prefix}sidebar-dark-bg: #343a40;
|
||||
--#{$lte-prefix}sidebar-dark-hover-bg: rgba(255, 255, 255, .1);
|
||||
--#{$lte-prefix}sidebar-dark-color: #c2c7d0;
|
||||
--#{$lte-prefix}sidebar-dark-hover-color: #{$white};
|
||||
--#{$lte-prefix}sidebar-dark-active-color: #{$white};
|
||||
--#{$lte-prefix}sidebar-dark-submenu-bg: transparent;
|
||||
--#{$lte-prefix}sidebar-dark-submenu-color: var(--#{$lte-prefix}sidebar-dark-color);
|
||||
--#{$lte-prefix}sidebar-dark-submenu-hover-color: #{$white};
|
||||
--#{$lte-prefix}sidebar-dark-submenu-hover-bg: var(--#{$lte-prefix}sidebar-dark-hover-bg);
|
||||
--#{$lte-prefix}sidebar-dark-submenu-active-color: var(--#{$lte-prefix}sidebar-dark-bg);
|
||||
--#{$lte-prefix}sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9);
|
||||
--#{$lte-prefix}sidebar-dark-header-color: #{tint-color(#c2c7d0, 5%)};
|
||||
|
||||
// Light Sidebar Native Variables
|
||||
--#{$lte-prefix}sidebar-light-bg: #{$white};
|
||||
--#{$lte-prefix}sidebar-light-hover-bg: rgba(#{$black}, .1);
|
||||
--#{$lte-prefix}sidebar-light-color: #{$gray-800};
|
||||
--#{$lte-prefix}sidebar-light-hover-color: #{$gray-900};
|
||||
--#{$lte-prefix}sidebar-light-active-color: #{$black};
|
||||
--#{$lte-prefix}sidebar-light-submenu-bg: transparent;
|
||||
--#{$lte-prefix}sidebar-light-submenu-color: #777;
|
||||
--#{$lte-prefix}sidebar-light-submenu-hover-color: #{$black};
|
||||
--#{$lte-prefix}sidebar-light-submenu-hover-bg: var(--#{$lte-prefix}sidebar-light-hover-bg);
|
||||
--#{$lte-prefix}sidebar-light-submenu-active-color: var(--#{$lte-prefix}sidebar-light-hover-color);
|
||||
--#{$lte-prefix}sidebar-light-submenu-active-bg: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
|
||||
--#{$lte-prefix}sidebar-light-header-color: #{shade-color($gray-800, 5%)};
|
||||
}
|
||||
|
||||
// LAYOUT
|
||||
// --------------------------------------------------------
|
||||
|
||||
|
@ -60,7 +17,7 @@ $lte-transition-fn: ease-in-out !default;
|
|||
|
||||
// Sidebar
|
||||
// --------------------------------------------------------
|
||||
$lte-sidebar-width: var(--#{$lte-prefix}sidebar-width) !default;
|
||||
$lte-sidebar-width: 250px !default;
|
||||
$lte-sidebar-padding-x: .5rem !default;
|
||||
$lte-sidebar-padding-y: .5rem !default;
|
||||
$lte-sidebar-custom-height: 4rem !default;
|
||||
|
@ -73,39 +30,40 @@ $lte-sidebar-transition: min-width $lte-transition-speed $lte-transitio
|
|||
margin-left $lte-transition-speed $lte-transition-fn,
|
||||
margin-right $lte-transition-speed $lte-transition-fn !default;
|
||||
|
||||
// margin-top $lte-transition-speed $lte-transition-fn,
|
||||
// transform $lte-transition-speed $lte-transition-fn;
|
||||
|
||||
// SIDEBAR SKINS
|
||||
// --------------------------------------------------------
|
||||
|
||||
// Sidebar active links
|
||||
$lte-sidebar-menu-active-bg: $primary !default;
|
||||
$lte-sidebar-menu-active-color: $white !default;
|
||||
|
||||
// Dark sidebar
|
||||
$lte-sidebar-dark-bg: var(--#{$lte-prefix}sidebar-dark-bg) !default;
|
||||
$lte-sidebar-dark-hover-bg: var(--#{$lte-prefix}sidebar-dark-hover-bg) !default;
|
||||
$lte-sidebar-dark-color: var(--#{$lte-prefix}sidebar-dark-color) !default;
|
||||
$lte-sidebar-dark-hover-color: var(--#{$lte-prefix}sidebar-dark-hover-color) !default;
|
||||
$lte-sidebar-dark-active-color: var(--#{$lte-prefix}sidebar-dark-active-color) !default;
|
||||
$lte-sidebar-dark-submenu-bg: var(--#{$lte-prefix}sidebar-dark-submenu-bg) !default;
|
||||
$lte-sidebar-dark-submenu-color: var(--#{$lte-prefix}sidebar-dark-submenu-color) !default;
|
||||
$lte-sidebar-dark-submenu-hover-color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-color) !default;
|
||||
$lte-sidebar-dark-submenu-hover-bg: var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg) !default;
|
||||
$lte-sidebar-dark-submenu-active-color: var(--#{$lte-prefix}sidebar-dark-submenu-active-color) !default;
|
||||
$lte-sidebar-dark-submenu-active-bg: var(--#{$lte-prefix}sidebar-dark-submenu-active-bg) !default;
|
||||
$lte-sidebar-dark-header-color: var(--#{$lte-prefix}sidebar-dark-header-color) !default;
|
||||
$lte-sidebar-dark-bg: #343a40 !default;
|
||||
$lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
|
||||
$lte-sidebar-dark-color: #c2c7d0 !default;
|
||||
$lte-sidebar-dark-hover-color: $white !default;
|
||||
$lte-sidebar-dark-active-color: $white !default;
|
||||
$lte-sidebar-dark-submenu-bg: transparent !default;
|
||||
$lte-sidebar-dark-submenu-color: $lte-sidebar-dark-color !default;
|
||||
$lte-sidebar-dark-submenu-hover-color: $white !default;
|
||||
$lte-sidebar-dark-submenu-hover-bg: $lte-sidebar-dark-hover-bg !default;
|
||||
$lte-sidebar-dark-submenu-active-color: $lte-sidebar-dark-bg !default;
|
||||
$lte-sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
|
||||
$lte-sidebar-dark-header-color: tint-color(#c2c7d0, 5%) !default;
|
||||
|
||||
// Light sidebar
|
||||
$lte-sidebar-light-bg: var(--#{$lte-prefix}sidebar-light-bg) !default;
|
||||
$lte-sidebar-light-hover-bg: var(--#{$lte-prefix}sidebar-light-hover-bg) !default;
|
||||
$lte-sidebar-light-color: var(--#{$lte-prefix}sidebar-light-color) !default;
|
||||
$lte-sidebar-light-hover-color: var(--#{$lte-prefix}sidebar-light-hover-color) !default;
|
||||
$lte-sidebar-light-active-color: var(--#{$lte-prefix}sidebar-light-active-color) !default;
|
||||
$lte-sidebar-light-submenu-bg: var(--#{$lte-prefix}sidebar-light-submenu-bg) !default;
|
||||
$lte-sidebar-light-submenu-color: var(--#{$lte-prefix}sidebar-light-submenu-color) !default;
|
||||
$lte-sidebar-light-submenu-hover-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-color) !default;
|
||||
$lte-sidebar-light-submenu-hover-bg: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg) !default;
|
||||
$lte-sidebar-light-submenu-active-color: var(--#{$lte-prefix}sidebar-light-submenu-active-color) !default;
|
||||
$lte-sidebar-light-submenu-active-bg: var(--#{$lte-prefix}sidebar-light-submenu-active-bg) !default;
|
||||
$lte-sidebar-light-header-color: var(--#{$lte-prefix}sidebar-light-header-color) !default;
|
||||
$lte-sidebar-light-bg: $white !default;
|
||||
$lte-sidebar-light-hover-bg: rgba($black, .1) !default;
|
||||
$lte-sidebar-light-color: $gray-800 !default;
|
||||
$lte-sidebar-light-hover-color: $gray-900 !default;
|
||||
$lte-sidebar-light-active-color: $black !default;
|
||||
$lte-sidebar-light-submenu-bg: transparent !default;
|
||||
$lte-sidebar-light-submenu-color: #777 !default;
|
||||
$lte-sidebar-light-submenu-hover-color: $black !default;
|
||||
$lte-sidebar-light-submenu-hover-bg: $lte-sidebar-light-hover-bg !default;
|
||||
$lte-sidebar-light-submenu-active-color: $lte-sidebar-light-hover-color !default;
|
||||
$lte-sidebar-light-submenu-active-bg: $lte-sidebar-light-submenu-hover-bg !default;
|
||||
$lte-sidebar-light-header-color: shade-color($gray-800, 5%) !default;
|
||||
|
||||
// SIDEBAR MINI
|
||||
// --------------------------------------------------------
|
||||
|
@ -125,7 +83,7 @@ $lte-control-sidebar-width: $lte-sidebar-width !default;
|
|||
// MAIN HEADER
|
||||
// --------------------------------------------------------
|
||||
$lte-main-header-bottom-border-width: $border-width !default;
|
||||
$lte-main-header-bottom-border-color: $gray-300 !default;
|
||||
$lte-main-header-bottom-border-color: var(--#{$prefix}border-color) !default;
|
||||
$lte-main-header-bottom-border: $lte-main-header-bottom-border-width solid $lte-main-header-bottom-border-color !default;
|
||||
$lte-main-header-link-padding-y: $navbar-padding-y !default;
|
||||
$lte-main-header-height-inner: ($nav-link-height + ($lte-main-header-link-padding-y * 2)) !default;
|
||||
|
@ -149,9 +107,9 @@ $lte-content-padding-x: .5rem !default;
|
|||
|
||||
// IMAGE SIZES
|
||||
// --------------------------------------------------------
|
||||
$lte-img-size-sm: 1.875rem !default;
|
||||
$lte-img-size-md: 3.75rem !default;
|
||||
$lte-img-size-lg: 6.25rem !default;
|
||||
$lte-img-size-sm: 1.875rem !default;
|
||||
$lte-img-size-md: 3.75rem !default;
|
||||
$lte-img-size-lg: 6.25rem !default;
|
||||
$lte-img-size-push: .625rem !default;
|
||||
|
||||
// MAIN FOOTER
|
||||
|
@ -159,7 +117,7 @@ $lte-img-size-push: .625rem !default;
|
|||
$lte-main-footer-padding: 1rem !default;
|
||||
$lte-main-footer-padding-sm: $lte-main-footer-padding * .812 !default;
|
||||
$lte-main-footer-border-top-width: 1px !default;
|
||||
$lte-main-footer-border-top-color: $gray-300 !default;
|
||||
$lte-main-footer-border-top-color: var(--#{$prefix}border-color) !default;
|
||||
$lte-main-footer-border-top: $lte-main-footer-border-top-width solid $lte-main-footer-border-top-color !default;
|
||||
$lte-main-footer-height-inner: (($lte-font-size-root * $line-height-base) + ($lte-main-footer-padding * 2)) !default;
|
||||
$lte-main-footer-height: add($lte-main-footer-height-inner, $lte-main-footer-border-top-width) !default;
|
||||
|
@ -177,7 +135,7 @@ $lte-brand-link-border-buttom: 1px !default;
|
|||
// Cards
|
||||
// --------------------------------------------------------
|
||||
$lte-card-dark-border-color: tint-color($gray-900, 10%) !default;
|
||||
$lte-card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
|
||||
$lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
|
||||
$lte-card-title-font-size: 1.1rem !default;
|
||||
$lte-card-title-font-size-sm: 1rem !default;
|
||||
$lte-card-title-font-weight: $font-weight-normal !default;
|
||||
|
@ -191,9 +149,9 @@ $lte-progress-bar-border-radius: 1px !default;
|
|||
|
||||
// DIRECT CHAT
|
||||
// --------------------------------------------------------
|
||||
$lte-direct-chat-default-msg-bg: $lte-gray-x-light !default;
|
||||
$lte-direct-chat-default-font-color: #444 !default;
|
||||
$lte-direct-chat-default-msg-border-color: $lte-gray-x-light !default;
|
||||
$lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$lte-direct-chat-default-font-color: var(--#{$prefix}body-color) !default;
|
||||
$lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !default;
|
||||
|
||||
// Z-INDEX
|
||||
// --------------------------------------------------------
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $gray-700;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -21,7 +21,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background-color: $gray-200;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
|
||||
.login-box,
|
||||
|
@ -41,8 +41,8 @@
|
|||
.login-card-body,
|
||||
.register-card-body {
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
background-color: $white;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
border-top: 0;
|
||||
|
||||
.input-group {
|
||||
|
@ -81,7 +81,7 @@
|
|||
}
|
||||
|
||||
.input-group-text {
|
||||
color: #777;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
background-color: transparent;
|
||||
border-left: 0;
|
||||
@include border-top-end-radius($border-radius);
|
||||
|
|
Loading…
Reference in New Issue