github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

dark mode 40% done

pull/4884/head
Daniel 2023-01-27 19:17:29 +05:30
parent 24863ac596
commit 0390491e57
13 changed files with 155 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/scss/_content-wrapper.scss
View File

@ -1,6 +1,6 @@
.content-wrapper { .content-wrapper {
grid-area: content-wrapper; grid-area: content-wrapper;
padding-bottom: 1rem; padding-bottom: 1rem;
color: --#{$lte-prefix}main-color; color: var(--#{$lte-prefix}main-color);
background-color: --#{$lte-prefix}main-bg; background-color: var(--#{$lte-prefix}main-bg);
} }

24
src/scss/_direct-chat.scss
View File

@ -18,13 +18,13 @@
&.timestamp-light { &.timestamp-light {
.direct-chat-timestamp { .direct-chat-timestamp {
color: tint-color(color-contrast($color-contrast-light), 10%); color: rgba(var(--#{$prefix}body-color-rgb), .65);
} }
} }
&.timestamp-dark { &.timestamp-dark {
.direct-chat-timestamp { .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 { .direct-chat-timestamp {
color: shade-color($gray-500, 25%); color: rgba(var(--#{$prefix}body-color-rgb), .75);
} }
//Direct chat contacts pane //Direct chat contacts pane
@ -141,23 +141,23 @@
width: 100%; width: 100%;
height: 250px; height: 250px;
overflow: auto; overflow: auto;
color: $white; color: var(--#{$prefix}body-bg);
background-color: $dark; background-color: var(--#{$prefix}body-color);
} }
.direct-chat-contacts-light { .direct-chat-contacts-light {
background-color: $light; background-color: var(--#{$prefix}light-bg-subtle);
.contacts-list-name { .contacts-list-name {
color: $gray-700; color: var(--#{$prefix}body-color);
} }
.contacts-list-date { .contacts-list-date {
color: $gray-600; color: var(--#{$prefix}secondary-color);
} }
.contacts-list-msg { .contacts-list-msg {
color: shade-color($gray-600, 10%); color: var(--#{$prefix}secondary-color);
} }
} }
@ -185,7 +185,7 @@
.contacts-list-info { .contacts-list-info {
margin-left: 45px; margin-left: 45px;
color: $white; color: var(--#{$prefix}body-bg);
} }
.contacts-list-name, .contacts-list-name,
@ -203,11 +203,11 @@
.contacts-list-date { .contacts-list-date {
font-weight: 400; font-weight: 400;
color: $gray-400; color: var(--#{$prefix}secondary-bg);
} }
.contacts-list-msg { .contacts-list-msg {
color: shade-color($gray-400, 10%); color: var(--#{$prefix}secondary-bg);
} }
// Color variants // Color variants

12
src/scss/_dropdown.scss
View File

@ -142,8 +142,8 @@
position: absolute; position: absolute;
right: 5%; right: 5%;
left: auto; left: auto;
background-color: $white; background-color: var(--#{$prefix}body-bg);
border: 1px solid #ddd; border: 1px solid var(--#{$prefix}border-color);
} }
} }
} }
@ -178,7 +178,7 @@
height: 90px; height: 90px;
border: 3px solid; border: 3px solid;
border-color: transparent; border-color: transparent;
border-color: rgba(255, 255, 255, .2); border-color: var(--#{$prefix}border-color-translucent);
} }
> p { > p {
@ -198,8 +198,8 @@
> .user-body { > .user-body {
@include clearfix (); @include clearfix ();
padding: 15px; padding: 15px;
border-top: 1px solid $gray-300; border-top: 1px solid var(--#{$prefix}border-color);
border-bottom: 1px solid $gray-700; border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
a { a {
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
@ -213,7 +213,7 @@
> .user-footer { > .user-footer {
@include clearfix (); @include clearfix ();
padding: 10px; padding: 10px;
background-color: var(--#{$prefix}secondary-bg); background-color: var(--#{$prefix}light-bg);
.btn-default { .btn-default {
color: var(--#{$prefix}body-color); color: var(--#{$prefix}body-color);

3
src/scss/_info-box.scss
View File

@ -12,7 +12,8 @@
min-height: 80px; min-height: 80px;
padding: .5rem; padding: .5rem;
margin-bottom: map-get($spacers, 3); margin-bottom: map-get($spacers, 3);
background-color: $white; color: var(--#{$prefix}body-color);
background-color: var(--#{$prefix}body-bg);
.progress { .progress {
height: 2px; height: 2px;

8
src/scss/_main-header.scss
View File

@ -3,10 +3,10 @@
// //
@include header-variant( @include header-variant(
$lte-header-light-bg, var(--#{$lte-prefix}header-light-bg),
$lte-header-light-color, var(--#{$lte-prefix}header-light-color),
$lte-header-mobile-light-bg, var(--#{$lte-prefix}header-mobile-light-bg),
$lte-header-mobile-light-color var(--#{$lte-prefix}header-mobile-light-color)
); );
.main-header { .main-header {

48
src/scss/_main-sidebar.scss
View File

@ -4,35 +4,35 @@
.sidebar-bg-dark { .sidebar-bg-dark {
@include nav-treeview-dark ( @include nav-treeview-dark (
$lte-sidebar-dark-bg, var(--#{$lte-prefix}sidebar-dark-bg),
$lte-sidebar-dark-hover-bg, var(--#{$lte-prefix}sidebar-dark-hover-bg),
$lte-sidebar-dark-color, var(--#{$lte-prefix}sidebar-dark-color),
$lte-sidebar-dark-hover-color, var(--#{$lte-prefix}sidebar-dark-hover-color),
$lte-sidebar-dark-active-color, var(--#{$lte-prefix}sidebar-dark-active-color),
$lte-sidebar-dark-submenu-bg, var(--#{$lte-prefix}sidebar-dark-submenu-bg),
$lte-sidebar-dark-submenu-color, var(--#{$lte-prefix}sidebar-dark-submenu-color),
$lte-sidebar-dark-submenu-hover-color, var(--#{$lte-prefix}sidebar-dark-submenu-hover-color),
$lte-sidebar-dark-submenu-hover-bg, var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg),
$lte-sidebar-dark-submenu-active-color, var(--#{$lte-prefix}sidebar-dark-submenu-active-color),
$lte-sidebar-dark-submenu-active-bg, var(--#{$lte-prefix}sidebar-dark-submenu-active-bg),
$lte-sidebar-dark-header-color var(--#{$lte-prefix}sidebar-dark-header-color)
); );
} }
.sidebar-bg-light { .sidebar-bg-light {
@include nav-treeview-light ( @include nav-treeview-light (
$lte-sidebar-light-bg, var(--#{$lte-prefix}sidebar-light-bg),
$lte-sidebar-light-hover-bg, var(--#{$lte-prefix}sidebar-light-hover-bg),
$lte-sidebar-light-color, var(--#{$lte-prefix}sidebar-light-color),
$lte-sidebar-light-hover-color, var(--#{$lte-prefix}sidebar-light-hover-color),
$lte-sidebar-light-active-color, var(--#{$lte-prefix}sidebar-light-active-color),
$lte-sidebar-light-submenu-bg, var(--#{$lte-prefix}sidebar-light-submenu-bg),
$lte-sidebar-light-submenu-color, var(--#{$lte-prefix}sidebar-light-submenu-color),
$lte-sidebar-light-submenu-hover-color, var(--#{$lte-prefix}sidebar-light-submenu-hover-color),
$lte-sidebar-light-submenu-hover-bg, var(--#{$lte-prefix}sidebar-light-submenu-hover-bg),
$lte-sidebar-light-submenu-active-color, var(--#{$lte-prefix}sidebar-light-submenu-active-color),
$lte-sidebar-light-submenu-active-bg, var(--#{$lte-prefix}sidebar-light-submenu-active-bg),
$lte-sidebar-light-header-color var(--#{$lte-prefix}sidebar-light-header-color)
); );
} }

4
src/scss/_products.scss
View File

@ -15,7 +15,7 @@
} }
padding: 10px 0; padding: 10px 0;
background-color: $white; background-color: var(--#{$prefix}body-bg);
} }
@ -39,7 +39,7 @@
.product-description { .product-description {
display: block; display: block;
overflow: hidden; overflow: hidden;
color: $gray-600; color: var(--#{$prefix}secondary-color);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }

62
src/scss/_root.scss
View File

@ -1,23 +1,61 @@
:root { :root {
--#{$lte-prefix}main-color: $lte-main-color; // Content Wrapper
--#{$lte-prefix}main-bg: $lte-main-bg; --#{$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 { @if $enable-dark-mode {
@include color-mode(dark, true) { @include color-mode(dark, true) {
color-scheme: dark; color-scheme: dark;
// Body Color // Body Color
--#{$lte-prefix}main-color: $lte-main-color-dark; --#{$lte-prefix}main-color: #{$lte-main-color-dark};
--#{$lte-prefix}main-bg: $lte-main-bg-dark; --#{$lte-prefix}main-bg: #{$lte-main-bg-dark};
// Sidebar active links // // Dark Sidebar Native Variables
--#{$lte-prefix}sidebar-menu-active-bg: #{$primary}; --#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg-dark};
--#{$lte-prefix}sidebar-menu-active-color: #{$white};
// Dark Sidebar Native Variables // // Light Sidebar Native Variables
--#{$lte-prefix}sidebar-dark-bg: #{$dark}; --#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg-dark};
// Light Sidebar Native Variables
--#{$lte-prefix}sidebar-light-bg: #{$white};
} }
} }

2
src/scss/_sidebar-close.scss
View File

@ -1,6 +1,6 @@
.sidebar-close:not(.sidebar-horizontal) { .sidebar-close:not(.sidebar-horizontal) {
.main-sidebar { .main-sidebar {
// stylelint-disable-next-line // stylelint-disable-next-line
margin-left: calc(#{$lte-sidebar-width} * -1); margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
} }
} }

6
src/scss/_users-list.scss
View File

@ -20,7 +20,7 @@
> a:hover { > a:hover {
&, &,
.users-list-name { .users-list-name {
color: #999; color: var(--#{$prefix}body-color);
} }
} }
} }
@ -34,12 +34,12 @@
.users-list-name { .users-list-name {
overflow: hidden; overflow: hidden;
font-size: $font-size-sm; font-size: $font-size-sm;
color: $gray-700; color: var(--#{$prefix}secondary-color);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.users-list-date { .users-list-date {
font-size: 12px; font-size: 12px;
color: shade-color($gray-500, 20%); color: var(--#{$prefix}tertiary-color);
} }

6
src/scss/_variables-dark.scss
View File

@ -1,3 +1,9 @@
// Body background (Affects main content background only) // Body background (Affects main content background only)
$lte-main-bg-dark: $body-bg-dark !default; $lte-main-bg-dark: $body-bg-dark !default;
$lte-main-color-dark: $body-color-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;

112
src/scss/_variables.scss
View File

@ -3,49 +3,6 @@
// Prefix for :root CSS variables // Prefix for :root CSS variables
$lte-prefix: lte- !default; $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 // LAYOUT
// -------------------------------------------------------- // --------------------------------------------------------
@ -60,7 +17,7 @@ $lte-transition-fn: ease-in-out !default;
// Sidebar // Sidebar
// -------------------------------------------------------- // --------------------------------------------------------
$lte-sidebar-width: var(--#{$lte-prefix}sidebar-width) !default; $lte-sidebar-width: 250px !default;
$lte-sidebar-padding-x: .5rem !default; $lte-sidebar-padding-x: .5rem !default;
$lte-sidebar-padding-y: .5rem !default; $lte-sidebar-padding-y: .5rem !default;
$lte-sidebar-custom-height: 4rem !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-left $lte-transition-speed $lte-transition-fn,
margin-right $lte-transition-speed $lte-transition-fn !default; 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 SKINS
// -------------------------------------------------------- // --------------------------------------------------------
// Sidebar active links
$lte-sidebar-menu-active-bg: $primary !default;
$lte-sidebar-menu-active-color: $white !default;
// Dark sidebar // Dark sidebar
$lte-sidebar-dark-bg: var(--#{$lte-prefix}sidebar-dark-bg) !default; $lte-sidebar-dark-bg: #343a40 !default;
$lte-sidebar-dark-hover-bg: var(--#{$lte-prefix}sidebar-dark-hover-bg) !default; $lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
$lte-sidebar-dark-color: var(--#{$lte-prefix}sidebar-dark-color) !default; $lte-sidebar-dark-color: #c2c7d0 !default;
$lte-sidebar-dark-hover-color: var(--#{$lte-prefix}sidebar-dark-hover-color) !default; $lte-sidebar-dark-hover-color: $white !default;
$lte-sidebar-dark-active-color: var(--#{$lte-prefix}sidebar-dark-active-color) !default; $lte-sidebar-dark-active-color: $white !default;
$lte-sidebar-dark-submenu-bg: var(--#{$lte-prefix}sidebar-dark-submenu-bg) !default; $lte-sidebar-dark-submenu-bg: transparent !default;
$lte-sidebar-dark-submenu-color: var(--#{$lte-prefix}sidebar-dark-submenu-color) !default; $lte-sidebar-dark-submenu-color: $lte-sidebar-dark-color !default;
$lte-sidebar-dark-submenu-hover-color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-color) !default; $lte-sidebar-dark-submenu-hover-color: $white !default;
$lte-sidebar-dark-submenu-hover-bg: var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg) !default; $lte-sidebar-dark-submenu-hover-bg: $lte-sidebar-dark-hover-bg !default;
$lte-sidebar-dark-submenu-active-color: var(--#{$lte-prefix}sidebar-dark-submenu-active-color) !default; $lte-sidebar-dark-submenu-active-color: $lte-sidebar-dark-bg !default;
$lte-sidebar-dark-submenu-active-bg: var(--#{$lte-prefix}sidebar-dark-submenu-active-bg) !default; $lte-sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
$lte-sidebar-dark-header-color: var(--#{$lte-prefix}sidebar-dark-header-color) !default; $lte-sidebar-dark-header-color: tint-color(#c2c7d0, 5%) !default;
// Light sidebar // Light sidebar
$lte-sidebar-light-bg: var(--#{$lte-prefix}sidebar-light-bg) !default; $lte-sidebar-light-bg: $white !default;
$lte-sidebar-light-hover-bg: var(--#{$lte-prefix}sidebar-light-hover-bg) !default; $lte-sidebar-light-hover-bg: rgba($black, .1) !default;
$lte-sidebar-light-color: var(--#{$lte-prefix}sidebar-light-color) !default; $lte-sidebar-light-color: $gray-800 !default;
$lte-sidebar-light-hover-color: var(--#{$lte-prefix}sidebar-light-hover-color) !default; $lte-sidebar-light-hover-color: $gray-900 !default;
$lte-sidebar-light-active-color: var(--#{$lte-prefix}sidebar-light-active-color) !default; $lte-sidebar-light-active-color: $black !default;
$lte-sidebar-light-submenu-bg: var(--#{$lte-prefix}sidebar-light-submenu-bg) !default; $lte-sidebar-light-submenu-bg: transparent !default;
$lte-sidebar-light-submenu-color: var(--#{$lte-prefix}sidebar-light-submenu-color) !default; $lte-sidebar-light-submenu-color: #777 !default;
$lte-sidebar-light-submenu-hover-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-color) !default; $lte-sidebar-light-submenu-hover-color: $black !default;
$lte-sidebar-light-submenu-hover-bg: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg) !default; $lte-sidebar-light-submenu-hover-bg: $lte-sidebar-light-hover-bg !default;
$lte-sidebar-light-submenu-active-color: var(--#{$lte-prefix}sidebar-light-submenu-active-color) !default; $lte-sidebar-light-submenu-active-color: $lte-sidebar-light-hover-color !default;
$lte-sidebar-light-submenu-active-bg: var(--#{$lte-prefix}sidebar-light-submenu-active-bg) !default; $lte-sidebar-light-submenu-active-bg: $lte-sidebar-light-submenu-hover-bg !default;
$lte-sidebar-light-header-color: var(--#{$lte-prefix}sidebar-light-header-color) !default; $lte-sidebar-light-header-color: shade-color($gray-800, 5%) !default;
// SIDEBAR MINI // SIDEBAR MINI
// -------------------------------------------------------- // --------------------------------------------------------
@ -125,7 +83,7 @@ $lte-control-sidebar-width: $lte-sidebar-width !default;
// MAIN HEADER // MAIN HEADER
// -------------------------------------------------------- // --------------------------------------------------------
$lte-main-header-bottom-border-width: $border-width !default; $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-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-link-padding-y: $navbar-padding-y !default;
$lte-main-header-height-inner: ($nav-link-height + ($lte-main-header-link-padding-y * 2)) !default; $lte-main-header-height-inner: ($nav-link-height + ($lte-main-header-link-padding-y * 2)) !default;
@ -159,7 +117,7 @@ $lte-img-size-push: .625rem !default;
$lte-main-footer-padding: 1rem !default; $lte-main-footer-padding: 1rem !default;
$lte-main-footer-padding-sm: $lte-main-footer-padding * .812 !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-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-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-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; $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 // Cards
// -------------------------------------------------------- // --------------------------------------------------------
$lte-card-dark-border-color: tint-color($gray-900, 10%) !default; $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: 1.1rem !default;
$lte-card-title-font-size-sm: 1rem !default; $lte-card-title-font-size-sm: 1rem !default;
$lte-card-title-font-weight: $font-weight-normal !default; $lte-card-title-font-weight: $font-weight-normal !default;
@ -191,9 +149,9 @@ $lte-progress-bar-border-radius: 1px !default;
// DIRECT CHAT // DIRECT CHAT
// -------------------------------------------------------- // --------------------------------------------------------
$lte-direct-chat-default-msg-bg: $lte-gray-x-light !default; $lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;
$lte-direct-chat-default-font-color: #444 !default; $lte-direct-chat-default-font-color: var(--#{$prefix}body-color) !default;
$lte-direct-chat-default-msg-border-color: $lte-gray-x-light !default; $lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !default;
// Z-INDEX // Z-INDEX
// -------------------------------------------------------- // --------------------------------------------------------

10
src/scss/pages/_login_and_register.scss
View File

@ -10,7 +10,7 @@
text-align: center; text-align: center;
a { a {
color: $gray-700; color: var(--#{$prefix}secondary-color);
} }
} }
@ -21,7 +21,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
background-color: $gray-200; background-color: var(--#{$prefix}secondary-bg);
} }
.login-box, .login-box,
@ -41,8 +41,8 @@
.login-card-body, .login-card-body,
.register-card-body { .register-card-body {
padding: 20px; padding: 20px;
color: #666; color: var(--#{$prefix}secondary-color);
background-color: $white; background-color: var(--#{$prefix}body-bg);
border-top: 0; border-top: 0;
.input-group { .input-group {
@ -81,7 +81,7 @@
} }
.input-group-text { .input-group-text {
color: #777; color: var(--#{$prefix}secondary-color);
background-color: transparent; background-color: transparent;
border-left: 0; border-left: 0;
@include border-top-end-radius($border-radius); @include border-top-end-radius($border-radius);