pension-app/styles/argon-dashboard-2.0.4/assets/scss/argon-dashboard/_dark-version.scss

283 lines
5.4 KiB
SCSS

.dark-version {
background-color: $dark-version-bg-color !important;
> div[class*='bg-']{
background-color: $dark-version-bg-color !important;
}
.sidenav {
background: $dark-version-sidenav-bg-color !important;
&.bg-transparent {
background: transparent !important;
.navbar-nav {
.nav-link {
color: $white !important;
}
}
.nav {
.nav-link {
color: $white !important;
}
}
}
&.bg-white {
background: $white !important;
.navbar-nav {
.nav-link {
&.active:after {
color: $dark-version-caret-sidebar-color;
}
}
}
.collapse {
.nav-item {
.nav-link:not(.active) {
i {
color: $dark !important;
}
}
h6 {
color: $dark !important;
}
}
}
}
}
.fixed-plugin {
.btn {
&.bg-gradient-dark,
&.btn-outline-dark {
color: $white !important;
border: 1px solid $white !important;
}
&.active {
background: $white !important;
color: $h-color !important;
}
}
}
.bg-gradient-dark {
background-image: linear-gradient(195deg, $dark-gradient-dark, $dark-gradient-state-dark);
}
.card,
.swal2-popup,
.dropdown .dropdown-menu,
.kanban-board {
background: $dark-version-card-bg-color;
box-shadow: $dark-version-card-box-shadow;
.card-header {
background: transparent;
}
p {
color: $white !important;
opacity: .6;
}
}
.kanban-item {
background: transparent !important;
border: 1px solid;
}
.swal2-html-container {
color: $white !important;
opacity: .6;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
a:not(.dropdown-item):not(.choices__item):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.btn):not(.nav-link):not(.fixed-plugin-button),
.table thead tr th,
.kanban-title-board {
color: $white !important;
}
.input-group {
&.input-group-dynamic,
&.input-group-static {
.form-control {
background-image: $dark-version-input-bg-image !important;
background-size: 0 100%, 100% 100%;
&:focus {
background-size: 100% 100%, 100% 100%;
}
}
}
&.input-group-outline {
.form-control {
border-color: $dark-version-border-color !important;
}
}
.is-valid,
.is-invalid {
border-color: $dark-version-border-color !important;
}
}
.accordion {
.accordion-button {
border-color: $dark-version-border-color !important;
color: $white;
opacity: .8;
}
}
.table > :not(caption) > * > * {
border-color: $dark-version-border-color !important;
color: $dark-version-table-color !important;
}
label {
color: $dark-version-body-color !important;
}
.list-group-item,
.multisteps-form__panel {
background-color: transparent !important;
border-color: rgba(255, 255, 255, .15) !important;
}
.nav {
&.bg-white {
background-color: $dark-version-card-bg-color !important;
box-shadow: $dark-version-card-box-shadow;
}
.nav-link[data-scroll]:hover {
color: $h-color !important;
}
}
.toast {
background-color: $dark-version-card-bg-color !important;
box-shadow: $dark-version-card-box-shadow;
.toast-header {
background: transparent;
}
span {
color: $white;
}
p {
color: $white !important;
opacity: .6;
}
}
.choices {
.choices__input {
background-color: transparent !important;
border-bottom: 1px solid $dark-version-border-color;
color: $white;
}
.choices__list.choices__list--dropdown {
background: $dark-version-card-bg-color;
box-shadow: $dark-version-card-box-shadow;
}
}
// Fullcalendar changes
.fc-theme-standard td,
.fc-theme-standard th {
border-color: $fc-theme-standard-dark-border-color;
}
// Datatable changes
.dataTable-sorter::after{
border-bottom-color: $white;
}
.dataTable-sorter::before{
border-top-color: $white;
}
// Quill changes
.ql-snow .ql-stroke {
stroke: $light;
}
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill{
fill: $light;
}
.ql-toolbar.ql-snow .ql-picker-label{
color: $light;
}
.navbar-vertical {
.navbar-nav {
.nav-item {
.nav-link {
color: $white;
opacity: .8;
&[data-bs-toggle="collapse"]:after {
color: $white;
}
&.active {
box-shadow: $dark-nav-link-active-shadow;
}
}
.collapse,
.collapsing {
.nav {
.nav-item {
.nav-link {
color: $white;
opacity: .6;
&.active {
opacity: 1;
}
}
}
}
}
}
}
}
.dropdown {
.dropdown-menu {
&:before {
color: $dark-version-card-bg-color;
}
.dropdown-item {
&:hover,
&:focus {
background-color: $dark-version-bg-color !important;
}
i,
.material-icons {
color: $white;
}
}
}
}
}
body.dark-version {
color: $dark-version-body-color !important;
}