1203 lines
32 KiB
SCSS
1203 lines
32 KiB
SCSS
//
|
|
// Dark Mode Theme
|
|
// --------------------------------------------------
|
|
|
|
@mixin color-theme-dark(
|
|
$primary,
|
|
$primary-light,
|
|
$primary-lighter,
|
|
$primary-dark,
|
|
$primary-darker,
|
|
$body-bg,
|
|
$body-bg-dark,
|
|
$body-bg-light,
|
|
$body-color,
|
|
$body-color-dark,
|
|
$body-color-light,
|
|
$link-color,
|
|
$link-hover-color
|
|
) {
|
|
html.dark {
|
|
// Main Structure
|
|
&,
|
|
#page-container,
|
|
#side-overlay,
|
|
#page-loader {
|
|
background-color: darken($primary-darker, 3%);
|
|
color: lighten($primary-dark, 45%);
|
|
}
|
|
|
|
// Typography
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
.h1,
|
|
.h2,
|
|
.h3,
|
|
.h4,
|
|
.h5,
|
|
.h6 {
|
|
color: $body-bg-dark;
|
|
}
|
|
|
|
.content-heading {
|
|
border-bottom-color: lighten($primary-darker, 6%);
|
|
}
|
|
|
|
hr {
|
|
border-top-color: lighten($primary-darker, 6%);
|
|
}
|
|
|
|
code {
|
|
color: $pink-300;
|
|
}
|
|
|
|
.story p,
|
|
p.story {
|
|
color: lighten($primary-dark, 35%);
|
|
}
|
|
|
|
// Links
|
|
a:not(.mini-nav-item):not(.badge):not(.btn):not(.btn-block-option):not(.block):not(.dropdown-item):not(.nav-link):not(.page-link):not(.alert-link):not(.nav-main-link):not(.list-group-item-action):not(.close):not(.fc-event):not(.text-success-light):not(.text-danger-light):not(.text-warning-light):not(.text-info-light) {
|
|
color: lighten($primary, 12%);
|
|
|
|
&.link-fx::before {
|
|
background-color: lighten($primary, 12%);
|
|
}
|
|
|
|
&:hover {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
// Contextual background colors
|
|
@include bg-variant(".bg-body", darken($primary-darker, 3%));
|
|
@include bg-variant(".bg-body-light", lighten($primary-darker, 3%));
|
|
@include bg-variant(".bg-body-dark", darken($primary-darker, 4.5%));
|
|
@include bg-variant(".bg-body-extra-light", $primary-darker);
|
|
@include bg-variant(".bg-muted", darken($body-bg-light, 30%));
|
|
|
|
// Contextual text colors
|
|
@include text-emphasis-variant(".text-primary", lighten($primary, 12%));
|
|
|
|
@include text-emphasis-variant(".text-success", lighten($success, 5%));
|
|
@include text-emphasis-variant(".text-warning", lighten($warning, 5%));
|
|
@include text-emphasis-variant(".text-info", lighten($info, 5%));
|
|
@include text-emphasis-variant(".text-danger", lighten($danger, 5%));
|
|
|
|
@include text-emphasis-variant(".text-body-bg", darken($primary-darker, 3%));
|
|
@include text-emphasis-variant(".text-body-bg-dark", darken($primary-darker, 6%));
|
|
@include text-emphasis-variant(".text-body-bg-light", lighten($primary-darker, 3%));
|
|
@include text-emphasis-variant(".text-body-color", lighten($primary-dark, 45%));
|
|
@include text-emphasis-variant(".text-body-color-dark", lighten($primary-dark, 30%));
|
|
@include text-emphasis-variant(".text-body-color-light", lighten($primary-dark, 60%));
|
|
|
|
@include text-emphasis-variant(".text-dark", darken($body-bg-dark, 20%));
|
|
|
|
@include text-emphasis-variant(".text-muted", lighten($primary-dark, 35%));
|
|
|
|
// Buttons
|
|
.btn-secondary,
|
|
.btn-alt-secondary {
|
|
@include button-variant(lighten($primary-darker, 5%), lighten($primary-darker, 5%), $white, darken($primary-darker, 5%), darken($primary-darker, 5%), $white);
|
|
}
|
|
|
|
// Nav links
|
|
.nav-link {
|
|
color: darken($body-bg-dark, 10%);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
// Nav Pills
|
|
.nav-pills {
|
|
.nav-link {
|
|
color: darken($body-bg-dark, 30%);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: lighten($primary-darker, 8%);
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.show > .nav-link {
|
|
color: $white;
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
|
|
// Nav Tabs
|
|
.nav-tabs {
|
|
border-bottom-color: lighten($primary-darker, 6%);
|
|
|
|
.nav-link {
|
|
&:hover,
|
|
&:focus {
|
|
border-color: lighten($primary-darker, 6%) lighten($primary-darker, 6%) lighten($primary-darker, 6%);
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: transparent;
|
|
border-color: lighten($primary-darker, 6%) lighten($primary-darker, 6%) $primary-darker;
|
|
}
|
|
}
|
|
|
|
// Tabs block variation
|
|
.nav-tabs-block {
|
|
background-color: lighten($primary-darker, 6%);
|
|
|
|
.nav-link {
|
|
border-color: transparent;
|
|
color: darken($body-bg-dark, 10%);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $primary;
|
|
background-color: lighten($primary-darker, 3%);
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: $primary-darker;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
// Tabs block alternative variation
|
|
.nav-tabs-alt {
|
|
border-bottom-color: lighten($primary-darker, 3%);
|
|
|
|
.nav-link {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $primary;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: inset 0 -3px $primary;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: inset 0 -3px $primary;
|
|
}
|
|
}
|
|
|
|
// Various Items Navigation
|
|
.nav-items {
|
|
a {
|
|
&:hover {
|
|
background-color: lighten($primary-darker, 8%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
> li:not(:last-child) > a {
|
|
border-bottom-color: lighten($primary-darker, 6%);
|
|
}
|
|
}
|
|
|
|
// Cards
|
|
.card {
|
|
background-color: $primary-darker;
|
|
|
|
&.card-borderless {
|
|
box-shadow: 0 1px 2px rgba(darken($primary-darker, 4%), .5), 0 1px 2px rgba(darken($primary-darker, 4%), .5);
|
|
}
|
|
|
|
> .card-header:not(.bg-transparent),
|
|
> .card-footer:not(.bg-transparent) {
|
|
background-color: lighten($primary-darker, 6%);
|
|
}
|
|
|
|
> .card-header:not(.border-bottom-0),
|
|
> .card-footer:not(.border-top-0) {
|
|
border-color: lighten($primary-darker, 6%);
|
|
}
|
|
|
|
&:not(.card-borderless) {
|
|
&,
|
|
> .card-header {
|
|
border-color: lighten($primary-darker, 6%);
|
|
}
|
|
}
|
|
|
|
> .card-header .block-title small {
|
|
color: darken($body-bg-light, 30%);
|
|
}
|
|
}
|
|
|
|
// Pagination
|
|
.page-item {
|
|
&.active .page-link {
|
|
color: $white;
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
|
|
&.disabled .page-link {
|
|
color: darken($body-bg-dark, 50%);
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.page-item:not(.active) > .page-link:focus {
|
|
background-color: darken($primary-darker, 6%);
|
|
border-color: darken($primary-darker, 6%);
|
|
}
|
|
|
|
.page-link {
|
|
color: darken($body-bg-dark, 30%);
|
|
background-color: darken($primary-darker, 3%);
|
|
border-color: darken($primary-darker, 3%);
|
|
|
|
&:hover {
|
|
color: darken($body-bg-dark, 30%);
|
|
background-color: darken($primary-darker, 6%);
|
|
border-color: darken($primary-darker, 6%);
|
|
}
|
|
|
|
&:focus {
|
|
background-color: darken($primary-darker, 6%);
|
|
border-color: darken($primary-darker, 6%);
|
|
}
|
|
}
|
|
|
|
// List Group
|
|
.list-group-item-action {
|
|
color: darken($body-bg-dark, 10%);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: lighten($primary-darker, 4.5%);
|
|
}
|
|
|
|
&:active {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: darken($primary-darker, 3%);
|
|
}
|
|
|
|
&.disabled {
|
|
color: darken($body-bg-dark, 40%);
|
|
}
|
|
}
|
|
|
|
.list-group-item {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: lighten($primary-darker, 3%);
|
|
border-color: darken($primary-darker, 4.5%);
|
|
|
|
&.active {
|
|
color: $white;
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
|
|
// Popovers
|
|
.popover {
|
|
border-color: darken($primary-darker, 4.5%);
|
|
background-color: lighten($primary-darker, 3%);
|
|
}
|
|
|
|
.bs-popover-top {
|
|
.popover-arrow::before {
|
|
border-top-color: fade-in(darken($primary-darker, 4.5%), 0.05);
|
|
}
|
|
|
|
.popover-arrow::after {
|
|
border-top-color: lighten($primary-darker, 3%);
|
|
}
|
|
}
|
|
|
|
.bs-popover-end {
|
|
.popover-arrow::before {
|
|
border-right-color: fade-in(darken($primary-darker, 4.5%), 0.05);
|
|
}
|
|
|
|
.popover-arrow::after {
|
|
border-right-color: lighten($primary-darker, 3%);
|
|
}
|
|
}
|
|
|
|
.bs-popover-bottom {
|
|
.popover-arrow::before {
|
|
border-bottom-color: fade-in(darken($primary-darker, 4.5%), 0.05);
|
|
}
|
|
|
|
.popover-arrow::after {
|
|
border-bottom-color: lighten($primary-darker, 3%);
|
|
}
|
|
}
|
|
|
|
.bs-popover-start {
|
|
.popover-arrow::before {
|
|
border-left-color: fade-in(darken($primary-darker, 4.5%), 0.05);
|
|
}
|
|
|
|
.popover-arrow::after {
|
|
border-left-color: lighten($primary-darker, 3%);
|
|
}
|
|
}
|
|
|
|
.bs-popover-auto {
|
|
&[x-placement^="top"] {
|
|
@extend .bs-popover-top;
|
|
}
|
|
&[x-placement^="right"] {
|
|
@extend .bs-popover-end;
|
|
}
|
|
&[x-placement^="bottom"] {
|
|
@extend .bs-popover-bottom;
|
|
}
|
|
&[x-placement^="left"] {
|
|
@extend .bs-popover-start;
|
|
}
|
|
}
|
|
|
|
.popover-header {
|
|
color: $body-bg-dark;
|
|
background-color: lighten($primary-darker, 3%);
|
|
border-bottom-color: darken($primary-darker, 4.5%);
|
|
}
|
|
|
|
.popover-body {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: lighten($primary-darker, 3%);
|
|
}
|
|
|
|
// Dropdowns
|
|
.dropdown-menu {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: lighten($primary-darker, 3%);
|
|
border-color: lighten($primary-darker, 3%);
|
|
box-shadow: 0 .25rem 2rem rgba($black, .25);
|
|
|
|
.dropdown-item {
|
|
color: darken($body-bg-dark, 15%);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: lighten($primary-darker, 8%);
|
|
}
|
|
|
|
&.active,
|
|
&:active {
|
|
color: darken($body-bg-dark, 5%);
|
|
background-color: lighten($primary-darker, 12%);
|
|
}
|
|
|
|
&.disabled,
|
|
&:disabled {
|
|
color: darken($body-bg-dark, 50%);
|
|
}
|
|
}
|
|
|
|
.dropdown-divider {
|
|
border-color: lighten($primary-darker, 10%);
|
|
}
|
|
|
|
.dropdown-item-text {
|
|
color: darken($body-bg-dark, 10%);
|
|
}
|
|
|
|
.dropdown-header {
|
|
color: darken($body-bg-dark, 25%) !important;
|
|
}
|
|
}
|
|
|
|
// Tables
|
|
.table {
|
|
--#{$prefix}table-color: #{lighten($primary-dark, 45%)};
|
|
--#{$prefix}table-bg: #{$primary-darker};
|
|
--#{$prefix}table-striped-color: #{$body-bg-light};
|
|
--#{$prefix}table-striped-bg: #{darken($primary-darker, 1.5%)};
|
|
--#{$prefix}table-active-color: #{$body-bg-light};
|
|
--#{$prefix}table-active-bg: #{lighten($primary-darker, 6%)};
|
|
--#{$prefix}table-hover-color: #{$body-bg-light};
|
|
--#{$prefix}table-hover-bg: #{darken($primary-darker, 2.5%)};
|
|
|
|
color: $body-bg-light;
|
|
border-color: darken($primary-darker, 6%);
|
|
}
|
|
|
|
.table > :not(:last-child) > :last-child > * {
|
|
border-bottom-color: darken($primary-darker, 6%);
|
|
}
|
|
|
|
@include table-variant("dark", rgba(darken($primary-darker, 4.5%), .75));
|
|
@include table-variant("primary", rgba(shade-color($primary, 20%), .75));
|
|
@include table-variant("info", rgba(#1E3A8A, .75));
|
|
@include table-variant("success", rgba(#14532D, .75));
|
|
@include table-variant("danger", rgba(#7F1D1D, .75));
|
|
@include table-variant("warning", rgba(#713F12, .75));
|
|
|
|
// Forms
|
|
.form-text {
|
|
color: lighten($primary-dark, 30%);
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: tint-color($body-color, 30%);
|
|
}
|
|
|
|
.form-control,
|
|
.form-select {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: darken($primary-darker, 4.5%);
|
|
border-color: lighten($primary-darker, 8%);
|
|
|
|
&:focus {
|
|
color: $white;
|
|
background-color: darken($primary-darker, 4.5%);
|
|
border-color: $primary;
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: lighten($primary-darker, 2%);
|
|
border-color: lighten($primary-darker, 2%);
|
|
}
|
|
}
|
|
|
|
.form-select {
|
|
&:focus::-ms-value {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: darken($primary-darker, 4.5%);
|
|
}
|
|
}
|
|
|
|
.form-control-plaintext {
|
|
color: darken($body-bg-dark, 10%);
|
|
}
|
|
|
|
@include form-validation-state("valid", lighten($success, 10%), $form-feedback-icon-valid);
|
|
@include form-validation-state("invalid", lighten($danger, 15%), $form-feedback-icon-invalid);
|
|
|
|
.form-control.form-control-alt {
|
|
color: darken($body-bg-dark, 10%);
|
|
border-color: darken($primary-darker, 3%);
|
|
background-color: darken($primary-darker, 3%);
|
|
|
|
&:focus {
|
|
color: $white;
|
|
border-color: darken($primary-darker, 4.5%);
|
|
background-color: darken($primary-darker, 4.5%);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.is-valid {
|
|
&::placeholder {
|
|
color: lighten($primary-dark, 30%);
|
|
}
|
|
|
|
border-color: rgba(#14532D, .85);
|
|
background-color: rgba(#14532D, .85);
|
|
|
|
&:focus {
|
|
border-color: rgba(#14532D, 1);
|
|
background-color: rgba(#14532D, 1);
|
|
}
|
|
}
|
|
|
|
&.is-invalid {
|
|
&::placeholder {
|
|
color: lighten($primary-dark, 30%);
|
|
}
|
|
|
|
border-color: rgba(#7F1D1D, .85);
|
|
background-color: rgba(#7F1D1D, .85);
|
|
|
|
&:focus {
|
|
border-color: rgba(#7F1D1D, 1);
|
|
background-color: rgba(#7F1D1D, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-group-text {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: darken($primary-darker, 3%);
|
|
border-color: lighten($primary-darker, 8%);
|
|
}
|
|
|
|
.input-group-text.input-group-text-alt {
|
|
background-color: darken($primary-darker, 4.5%);
|
|
border-color: darken($primary-darker, 4.5%);
|
|
}
|
|
|
|
.is-valid ~ .valid-feedback,
|
|
.is-valid ~ .valid-tooltip,
|
|
.was-validated :valid ~ .valid-feedback,
|
|
.was-validated :valid ~ .valid-tooltip,
|
|
.is-invalid ~ .invalid-feedback,
|
|
.is-invalid ~ .invalid-tooltip,
|
|
.was-validated :invalid ~ .invalid-feedback,
|
|
.was-validated :invalid~.invalid-tooltip {
|
|
display: block;
|
|
}
|
|
|
|
.form-check-input {
|
|
background-color: darken($primary-darker, 3%);
|
|
border-color: lighten($primary-darker, 8%);
|
|
|
|
&:focus {
|
|
border-color: $primary;
|
|
}
|
|
|
|
&:checked {
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
|
|
.form-block {
|
|
.form-check-label {
|
|
border-color: lighten($primary-darker, 8%);
|
|
|
|
&:hover {
|
|
border-color: lighten(lighten($primary-darker, 4.5%), 5%);
|
|
}
|
|
|
|
&::before {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
|
|
.form-check-input:checked ~ .form-check-label {
|
|
border-color: $primary;
|
|
}
|
|
|
|
.form-check-input:focus ~ .form-check-label {
|
|
border-color: $primary;
|
|
box-shadow: 0 0 0 0.25rem rgba($primary, .25);
|
|
}
|
|
|
|
.form-check-input:disabled:not([checked]) + .form-check-label:hover,
|
|
.form-check-input[readonly]:not([checked]) + .form-check-label:hover {
|
|
border-color: darken($primary-darker, 4.5%);
|
|
}
|
|
}
|
|
|
|
.form-floating > .form-control::placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
.form-floating > .form-control:focus ~ label,
|
|
.form-floating > .form-control:not(:placeholder-shown) ~ label,
|
|
.form-floating > .form-control-plaintext ~ label,
|
|
.form-floating > .form-select ~ label {
|
|
color: tint-color($body-color, 50%);
|
|
}
|
|
|
|
.form-floating > .form-control:focus ~ label::after,
|
|
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
|
|
.form-floating > .form-control-plaintext ~ label::after,
|
|
.form-floating > .form-select ~ label::after {
|
|
background-color: darken($primary-darker, 4.5%);
|
|
}
|
|
|
|
// Breadcrumb
|
|
.breadcrumb-item + .breadcrumb-item::before {
|
|
color: rgba($white, .15);
|
|
}
|
|
|
|
.breadcrumb.breadcrumb-alt {
|
|
.breadcrumb-item + .breadcrumb-item::before {
|
|
color: rgba($white, .15);
|
|
}
|
|
}
|
|
|
|
.breadcrumb-item.active {
|
|
color: $white;
|
|
}
|
|
|
|
// Alerts
|
|
.alert-primary {
|
|
@include alert-variant($primary, $primary, $white);
|
|
}
|
|
|
|
.alert-secondary {
|
|
@include alert-variant(lighten($primary-darker, 6%), lighten($primary-darker, 6%), $white);
|
|
}
|
|
|
|
.alert-success {
|
|
@include alert-variant(shade-color($success, 25%), shade-color($success, 25%), $white);
|
|
}
|
|
|
|
.alert-info {
|
|
@include alert-variant(shade-color($info, 25%), shade-color($info, 25%), $white);
|
|
}
|
|
|
|
.alert-warning {
|
|
@include alert-variant(shade-color($warning, 25%), shade-color($warning, 25%), $white);
|
|
}
|
|
|
|
.alert-danger {
|
|
@include alert-variant(shade-color($danger, 25%), shade-color($danger, 25%), $white);
|
|
}
|
|
|
|
.alert-dark {
|
|
@include alert-variant(darken($primary-darker, 6%), darken($primary-darker, 6%), $white);
|
|
}
|
|
|
|
.alert-light {
|
|
@include alert-variant(lighten($primary-darker, 12%), lighten($primary-darker, 12%), $white);
|
|
}
|
|
|
|
.btn-close {
|
|
filter: $btn-close-white-filter;
|
|
}
|
|
|
|
// Progress Bars
|
|
.progress {
|
|
background-color: darken($primary-darker, 4.5%);
|
|
}
|
|
|
|
// Lists
|
|
.list-activity > li:not(:last-child) {
|
|
border-bottom-color: darken($primary-darker, 4.5%);
|
|
}
|
|
|
|
// Modals
|
|
.modal-header {
|
|
border-bottom-color: lighten($primary-darker, 6%);
|
|
}
|
|
|
|
.modal-content {
|
|
background: $primary-darker;
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top-color: lighten($primary-darker, 6%);
|
|
}
|
|
|
|
// Toasts
|
|
.toast {
|
|
background-color: $primary-darker;
|
|
}
|
|
|
|
.toast-header {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: lighten($primary-darker, 6%);
|
|
}
|
|
|
|
// Borders
|
|
.border {
|
|
border-color: lighten($primary-darker, 6%) !important;
|
|
}
|
|
|
|
.border-top {
|
|
border-top-color: lighten($primary-darker, 6%) !important;
|
|
}
|
|
|
|
.border-end {
|
|
border-right-color: lighten($primary-darker, 6%) !important;
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom-color: lighten($primary-darker, 6%) !important;
|
|
}
|
|
|
|
.border-start {
|
|
border-left-color: lighten($primary-darker, 6%) !important;
|
|
}
|
|
|
|
.border-primary {
|
|
border-color: $primary !important;
|
|
}
|
|
.border-white {
|
|
border-color: $white !important;
|
|
}
|
|
.border-white-op {
|
|
border-color: rgba($white, 0.1) !important;
|
|
}
|
|
.border-black-op {
|
|
border-color: rgba($black, 0.1) !important;
|
|
}
|
|
|
|
// Blocks
|
|
.block {
|
|
background-color: $primary-darker;
|
|
box-shadow: 0 1px 2px rgba(darken($primary-darker, 4%), .5), 0 1px 2px rgba(darken($primary-darker, 4%), .5);
|
|
|
|
&.block-bordered {
|
|
border: 1px solid lighten($primary-darker, 6%);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.block-header-default {
|
|
background-color: lighten($primary-darker, 6%) !important;
|
|
}
|
|
|
|
.block-title {
|
|
small {
|
|
color: darken($body-bg-light, 30%);
|
|
}
|
|
}
|
|
|
|
&.block-mode-loading::before {
|
|
background-color: rgba(lighten($primary-darker, 6%), .85);
|
|
}
|
|
|
|
&.block-mode-loading::after {
|
|
color: $white;
|
|
}
|
|
|
|
&.block-transparent {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.block-mode-fullscreen {
|
|
&.block-transparent {
|
|
background-color: $primary-darker;
|
|
}
|
|
}
|
|
}
|
|
|
|
.block .block,
|
|
.content-side .block {
|
|
box-shadow: none;
|
|
}
|
|
|
|
a.block {
|
|
color: darken($body-bg-dark, 10%);
|
|
|
|
&.block-link-pop {
|
|
&:hover {
|
|
box-shadow: 0 0.5rem 2.5rem darken($primary-darker, 8%);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0.375rem 0.55rem darken($primary-darker, 1%);
|
|
}
|
|
}
|
|
|
|
&.block-link-shadow {
|
|
&:hover {
|
|
box-shadow: 0 0 1.5rem darken($primary-darker, 8%);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0 0.75rem darken($primary-darker, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-block-option {
|
|
color: darken($body-bg-light, 30%);
|
|
|
|
.block-header-default & {
|
|
color: darken($body-bg-light, 35%);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: darken($body-bg-light, 40%);
|
|
}
|
|
|
|
&:active {
|
|
color: darken($body-bg-light, 30%);
|
|
}
|
|
}
|
|
|
|
a.btn-block-option:focus,
|
|
.active > a.btn-block-option,
|
|
.show > button.btn-block-option {
|
|
color: darken($body-bg-light, 40%);
|
|
}
|
|
|
|
.block.block-themed {
|
|
.btn-block-option,
|
|
.btn-block-option:hover,
|
|
.btn-block-option:focus,
|
|
.btn-block-option:active,
|
|
a.btn-block-option:focus,
|
|
.active > a.btn-block-option,
|
|
.show > button.btn-block-option {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// Timeline
|
|
.timeline::before {
|
|
background-color: lighten($primary-darker, 6%);
|
|
}
|
|
|
|
.timeline-event-icon {
|
|
border-color: lighten($primary-darker, 6%);
|
|
box-shadow: 0 0.375rem 1.5rem $primary-darker;
|
|
|
|
&::before {
|
|
border-left-color: lighten($primary-darker, 6%);
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(xl) {
|
|
.timeline-centered {
|
|
.timeline-event-time {
|
|
background-color: lighten($primary-darker, 6%);
|
|
}
|
|
|
|
.timeline-event-icon::before {
|
|
border-right-color: lighten($primary-darker, 6%);
|
|
}
|
|
|
|
&.timeline-alt .timeline-event:nth-child(even),
|
|
.timeline-event.timeline-event-alt {
|
|
.timeline-event-icon::before {
|
|
border-left-color: lighten($primary-darker, 6%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Images
|
|
.img-thumb {
|
|
background-color: darken($primary-darker, 6%);
|
|
}
|
|
|
|
// SweetAlert2
|
|
.swal2-popup {
|
|
background-color: $primary-darker;
|
|
}
|
|
|
|
.swal2-html-container {
|
|
color: darken($body-bg-dark, 10%);
|
|
}
|
|
|
|
// jVectorMap
|
|
.jvectormap-container {
|
|
background-color: $primary-darker !important;
|
|
}
|
|
|
|
// CKEditor 5
|
|
.ck.ck-editor {
|
|
color: $body-color;
|
|
}
|
|
|
|
// DropzoneJS
|
|
.dropzone {
|
|
background-color: lighten($primary-darker, 3%);
|
|
border-color: lighten($primary-darker, 6%);
|
|
|
|
.dz-message {
|
|
color: darken($body-bg-dark, 10%);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: lighten($primary-darker, 6%);
|
|
border-color: $primary;
|
|
|
|
.dz-message {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.dz-preview.dz-image-preview {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
// FullCalendar
|
|
.fc.fc-theme-standard {
|
|
a {
|
|
color: darken($body-bg-dark, 15%) !important;
|
|
}
|
|
|
|
.fc-button-primary {
|
|
color: darken($body-bg-dark, 15%);
|
|
background-color: darken($primary-darker, 4.5%);
|
|
border-color: darken($primary-darker, 4.5%);
|
|
|
|
&:not(:disabled):hover {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: lighten($primary-darker, 3%);
|
|
border-color: lighten($primary-darker, 3%);
|
|
}
|
|
|
|
&:not(:disabled).fc-button-active,
|
|
&:not(:disabled):active {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: lighten($primary-darker, 3%);
|
|
border-color: lighten($primary-darker, 3%);
|
|
}
|
|
|
|
&:focus,
|
|
&:not(:disabled).fc-button-active:focus,
|
|
&:not(:disabled):active:focus {
|
|
box-shadow: 0 0 0 .2rem rgba($primary, .4)
|
|
}
|
|
}
|
|
|
|
.fc-list, .fc-scrollgrid,
|
|
th,
|
|
td {
|
|
border-color: darken($primary-darker, 6%);
|
|
}
|
|
|
|
.fc-list-day-cushion,
|
|
.fc-col-header-cell {
|
|
background-color: lighten($primary-darker, 3%);
|
|
}
|
|
|
|
.fc-list-event:hover td {
|
|
background-color: darken($primary-darker, 2.5%);
|
|
}
|
|
}
|
|
|
|
// Ion Range Slider
|
|
.irs,
|
|
.irs--round .irs-grid-text {
|
|
color: darken($body-bg-dark, 10%);
|
|
}
|
|
|
|
.irs.irs--round {
|
|
.irs-min,
|
|
.irs-max,
|
|
.irs-line,
|
|
.irs-grid-pol,
|
|
.irs-handle {
|
|
color: darken($body-bg-dark, 10%);
|
|
background: darken($primary-darker, 3%);
|
|
}
|
|
}
|
|
|
|
// Select2
|
|
.select2-container--default {
|
|
.select2-selection--single .select2-selection__placeholder {
|
|
color: lighten($primary-dark, 30%);
|
|
}
|
|
|
|
.select2-selection--single,
|
|
.select2-selection--multiple {
|
|
background-color: darken($primary-darker, 4.5%);
|
|
border-color: lighten($primary-darker, 8%);
|
|
}
|
|
|
|
&.select2-container--focus .select2-selection--multiple,
|
|
&.select2-container--focus .select2-selection--single,
|
|
&.select2-container--open .select2-selection--multiple,
|
|
&.select2-container--open .select2-selection--single {
|
|
border-color: $primary;
|
|
}
|
|
|
|
.select2-selection--single .select2-selection__rendered {
|
|
color: darken($body-bg-dark, 10%);
|
|
}
|
|
|
|
.select2-search--dropdown .select2-search__field {
|
|
border-color: lighten($primary-darker, 8%);
|
|
}
|
|
|
|
.select2-dropdown .select2-search__field:focus {
|
|
border-color: $primary;
|
|
}
|
|
|
|
.select2-dropdown {
|
|
background-color: darken($primary-darker, 4.5%);
|
|
border-color: lighten($primary-darker, 8%);
|
|
}
|
|
|
|
.select2-search--dropdown .select2-search__field {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: darken($primary-darker, 4.5%);
|
|
border-color: lighten($primary-darker, 8%);
|
|
}
|
|
|
|
.select2-results__option[aria-selected=true] {
|
|
color: $white;
|
|
background-color: $primary;
|
|
}
|
|
|
|
.select2-search__field::placeholder {
|
|
color: lighten($primary-dark, 30%);
|
|
}
|
|
}
|
|
|
|
.is-valid + .select2-container--default,
|
|
.is-valid + .select2-container--default.select2-container--focus {
|
|
.select2-selection--single,
|
|
.select2-selection--multiple {
|
|
border-color: lighten($success, 10%);
|
|
}
|
|
}
|
|
|
|
.is-valid + .select2-container--default.select2-container--focus,
|
|
.is-valid + .select2-container--default.select2-container--open {
|
|
.select2-selection--single,
|
|
.select2-selection--multiple {
|
|
box-shadow: 0 0 0 $input-focus-width rgba(lighten($success, 10%), 0.25);
|
|
}
|
|
}
|
|
|
|
.is-invalid + .select2-container--default,
|
|
.is-invalid + .select2-container--default.select2-container--focus {
|
|
.select2-selection--single,
|
|
.select2-selection--multiple {
|
|
border-color: lighten($danger, 10%);
|
|
}
|
|
}
|
|
|
|
.is-invalid + .select2-container--default.select2-container--focus,
|
|
.is-invalid + .select2-container--default.select2-container--open {
|
|
.select2-selection--single,
|
|
.select2-selection--multiple {
|
|
box-shadow: 0 0 0 $input-focus-width rgba(lighten($danger, 10%), 0.25);
|
|
}
|
|
}
|
|
|
|
// Bootstrap Datepicker
|
|
.datepicker .datepicker-switch:hover,
|
|
.datepicker .next:hover,
|
|
.datepicker .prev:hover,
|
|
.datepicker tfoot tr th:hover,
|
|
.datepicker table tr td.day:hover,
|
|
.datepicker table tr td.focused {
|
|
background-color: darken($primary-darker, 4.5%);
|
|
}
|
|
|
|
.datepicker table tr td.selected,
|
|
.datepicker table tr td.selected.highlighted {
|
|
color: $white;
|
|
background-color: darken($primary-darker, 4.5%);
|
|
border-color: darken($primary-darker, 4.5%);
|
|
}
|
|
|
|
.datepicker table tr td.range {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: darken($primary-darker, 4.5%);
|
|
border-color: darken($primary-darker, 4.5%);
|
|
}
|
|
|
|
.datepicker table tr td.active:hover,
|
|
.datepicker table tr td.active:hover:hover,
|
|
.datepicker table tr td.active.disabled:hover,
|
|
.datepicker table tr td.active.disabled:hover:hover,
|
|
.datepicker table tr td.active:focus,
|
|
.datepicker table tr td.active:hover:focus,
|
|
.datepicker table tr td.active.disabled:focus,
|
|
.datepicker table tr td.active.disabled:hover:focus,
|
|
.datepicker table tr td.active:active,
|
|
.datepicker table tr td.active:hover:active,
|
|
.datepicker table tr td.active.disabled:active,
|
|
.datepicker table tr td.active.disabled:hover:active,
|
|
.datepicker table tr td.active.active,
|
|
.datepicker table tr td.active:hover.active,
|
|
.datepicker table tr td.active.disabled.active,
|
|
.datepicker table tr td.active.disabled:hover.active,
|
|
.open .dropdown-toggle.datepicker table tr td.active,
|
|
.open .dropdown-toggle.datepicker table tr td.active:hover,
|
|
.open .dropdown-toggle.datepicker table tr td.active.disabled,
|
|
.open .dropdown-toggle.datepicker table tr td.active.disabled:hover,
|
|
.datepicker table tr td span.active:hover,
|
|
.datepicker table tr td span.active:hover:hover,
|
|
.datepicker table tr td span.active.disabled:hover,
|
|
.datepicker table tr td span.active.disabled:hover:hover,
|
|
.datepicker table tr td span.active:focus,
|
|
.datepicker table tr td span.active:hover:focus,
|
|
.datepicker table tr td span.active.disabled:focus,
|
|
.datepicker table tr td span.active.disabled:hover:focus,
|
|
.datepicker table tr td span.active:active,
|
|
.datepicker table tr td span.active:hover:active,
|
|
.datepicker table tr td span.active.disabled:active,
|
|
.datepicker table tr td span.active.disabled:hover:active,
|
|
.datepicker table tr td span.active.active,
|
|
.datepicker table tr td span.active:hover.active,
|
|
.datepicker table tr td span.active.disabled.active,
|
|
.datepicker table tr td span.active.disabled:hover.active,
|
|
.open .dropdown-toggle.datepicker table tr td span.active,
|
|
.open .dropdown-toggle.datepicker table tr td span.active:hover,
|
|
.open .dropdown-toggle.datepicker table tr td span.active.disabled,
|
|
.open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
|
|
// Flatpickr
|
|
.flatpickr-input.form-control:disabled,
|
|
.flatpickr-input.form-control[readonly],
|
|
.input.form-control:disabled,
|
|
.input.form-control[readonly] {
|
|
color: darken($body-bg-dark, 10%);
|
|
background-color: darken($primary-darker, 4.5%);
|
|
border-color: lighten($primary-darker, 8%);
|
|
}
|
|
|
|
.flatpickr-day.selected,
|
|
.flatpickr-day.startRange,
|
|
.flatpickr-day.endRange,
|
|
.flatpickr-day.selected.inRange,
|
|
.flatpickr-day.startRange.inRange,
|
|
.flatpickr-day.endRange.inRange,
|
|
.flatpickr-day.selected:focus,
|
|
.flatpickr-day.startRange:focus,
|
|
.flatpickr-day.endRange:focus,
|
|
.flatpickr-day.selected:hover,
|
|
.flatpickr-day.startRange:hover,
|
|
.flatpickr-day.endRange:hover,
|
|
.flatpickr-day.selected.prevMonthDay,
|
|
.flatpickr-day.startRange.prevMonthDay,
|
|
.flatpickr-day.endRange.prevMonthDay,
|
|
.flatpickr-day.selected.nextMonthDay,
|
|
.flatpickr-day.startRange.nextMonthDay,
|
|
.flatpickr-day.endRange.nextMonthDay {
|
|
border-color: $primary;
|
|
background: $primary;
|
|
}
|
|
|
|
.flatpickr-months .flatpickr-prev-month:hover svg,
|
|
.flatpickr-months .flatpickr-next-month:hover svg {
|
|
fill: $primary;
|
|
}
|
|
|
|
// Nestable2
|
|
.dd-handle {
|
|
color: darken($body-bg-dark, 10%);
|
|
background: lighten($primary-darker, 3%);
|
|
border-color: darken($primary-darker, 4.5%);
|
|
|
|
&:hover {
|
|
color: darken($body-bg-dark, 20%);
|
|
}
|
|
}
|
|
|
|
.dd-empty,
|
|
.dd-placeholder {
|
|
border-color: $primary-lighter;
|
|
background: $primary-darker;
|
|
}
|
|
|
|
// DataTables
|
|
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
|
|
box-shadow: inset 0 0 0 9999px darken($primary-darker, 1.5%);
|
|
}
|
|
}
|
|
}
|