body { .badge-light-danger { background-color: rgba(116, 125, 198, 0.12); } .badge-light-secondary { background-color: rgba(239, 63, 62, 0.12); } &.dark-only { color: $dark-all-font-color; background-color: $dark-body-background; .col-form-label { color: $light-blue; } .dashboard-tiles { .card-tiles { h3 { color: #fff; } h6 { color: rgba(255, 255, 255, 0.6); } } } .selection-section { ul { li { button { border-color: #0b141d !important; color: #ddd !important; background-color: #0b141d !important; } } } } .right-sidebar-modal { .qty-box { .input-group { background-color: #0b141d; border-color: #1d3436; } } .price { color: rgba(221, 221, 221, 0.612); } } @media (min-width: 991px) { ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba($primary-color, 0.1); box-shadow: inset 0 0 6px rgba($primary-color, 0.1); background-color: #1d1e26 !important; border-radius: 5px; } ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #1d1e26 !important; } ::-webkit-scrollbar-thumb { background-color: rgba($primary-color, 0.5); border-radius: 5px; } } .border { border-color: $dark-border !important; } .ck-button { color: $dark-all-font-color !important; } .btn-outline { background-color: transparent !important; &:hover { background-color: var(--theme-color) !important; } } .btn-theme { &:hover { background-color: transparent !important; } } .color-box { border-color: $dark-border; } .radio-type-sec { .selection-box { border-color: $dark-border; } } .select-category-box { .category-lisitng { background-color: $dark-body-background; border-color: $dark-border; ::-webkit-scrollbar-track { background-color: #1d1e26; } li { border-color: $dark-border; } } } .radio-type-sec { &.selection-layout { label { img { border-color: $dark-border; } } } } .notification-setting { li { background-color: $dark-body-background; h4, .h4 { color: $dark-small-font-color; } } } .roles-form { >div { ul { background-color: $dark-card-background; border-color: $dark-border; li { &:first-child { color: #a3a3a3; } } } } } .page-wrapper { .page-header { .header-wrapper { .search-full { .onhover-dropdown { background-color: #1c2128; box-shadow: none; &::-webkit-scrollbar-track { background: #1c2128 !important; box-shadow: none; } &::-webkit-scrollbar-thumb { border: 3px solid #1c2128; } .main-content { background-color: #0b141d; color: #cdcdcd; } } } } } } .variant-box { &.border-top { border-color: $dark-border !important; } } .custom-select-box { .box-content { background-color: $dark-body-background !important; border-color: #1d1e26; box-shadow: 0px 6px 10px 4px #1c1c1c; .form-control { background-color: $dark-card-background !important; } ul { li { color: $dark-all-font-color !important; } } } } .shipping-accordion { &.variant-accordion { .accordion-item { .accordion-button { color: $dark-small-font-color; } } } .accordion-item { background-color: #1c2128; border-color: $dark-border; color: $dark-small-font-color; .accordion-button { background-color: #0c151e; } } } .datatable-wrapper { .table-loader { background-color: rgba(38, 41, 50, 0.87); } } .page-wrapper { .page-header { .header-wrapper { .search-full { .close-icon { color: $dark-small-font-color; } } &.skeleton-header { .header-btns { .btn { background: linear-gradient(90deg, #1e1e1e 8%, #1c1c1c 18%, #0b141d 33%); background-size: 800px 104px; } } .nav-right { &.right-header { ul { li { i { background-color: #18181e; &.middle { background-color: transparent; } } .profile-media { .media-body { p, span { background: linear-gradient(90deg, #1e1e1e 8%, #1c1c1c 18%, #0b141d 33%); background-size: 800px 104px; } } } } } } } } } } } .checkout-section-2 { .pos-detail-card { .product-details { .cart-listing { li { border-color: $dark-border; .cart-content { h4 { color: $dark-all-font-color; } } } } } } .left-sidebar-checkout { .checkout-detail-box { >ul { >li { .checkout-box { background-color: $dark-card-background; box-shadow: none; .checkout-detail { .delivery-address-box { background-color: $dark-body-background; } .custom-accordion { .accordion-item { background-color: $dark-body-background; .accordion-button { color: $dark-all-font-color; } } } .delivery-option, .payment-option { background-color: $dark-body-background; } .future-box { .future-option { .delivery-items { h4 { color: #98a6ad; } ul { li { a { background-color: #0b141d; color: #ddd; } } } } } } } } .checkout-icon { background-color: $dark-card-background; box-shadow: none; } } } } } } .layout-selection-sec { .theme-card { border-color: $dark-border; &.active { .content-sec { a { color: $white; background-color: var(--theme-color); } } } .content-sec { box-shadow: none; border-radius: 0 0 15px 15px; background-color: $dark-card-background; a { background-color: $dark-card-background; &:hover { color: $white; background-color: var(--theme-color); } } } .library-box { background: $dark-body-background; box-shadow: inset 0px 0 8px rgba(98, 98, 98, 0.66); .details-box { background-color: rgba($dark-card-background, 0.9); color: $dark-small-font-color; } } } } .blur-bg { background-color: rgba(28, 33, 40, 0.95) !important; } .skeleton { *:empty { background: linear-gradient(90deg, #1e1e1e 8%, #1c1c1c 18%, $dark-card-background 33%); background-size: 1000px 100%; } } .log-in-section { .log-in-box { background-color: $dark-body-background; } } .inside-horizontal-tabs { @media (max-width: 991px) { background-color: $dark-card-background; } .nav-pills { border-bottom: 1px solid $dark-border !important; } .nav-tabs { .nav-item { .nav-link { color: $dark-small-font-color; } } } } .tracking-wrapper { background-color: $dark-card-background; } .tracking-total { li { &:last-child { border-color: $dark-border; } } } .tracking-panel { .panel-content { .icon { img { filter: invert(0.6); } } } ul { li { background-color: $dark-card-background; &:after { border-left: 17px solid $dark-card-background; [dir="rtl"] & { border-left: unset; border-right: 17px solid $dark-card-background; } } &:before { border-left: 17px solid $dark-body-background; [dir="rtl"] & { border-left: 17px solid transparent; border-right: 17px solid $dark-body-background; } } &.active { background-color: #113838; &:after { border-left: 17px solid #113838; [dir="rtl"] & { border-right: 17px solid #113838; border-left: unset; } } } &.cancelled-box { background-color: #113838; &:after { border-left: 17px solid #113838; [dir="rtl"] & { border-right: 17px solid #113838; border-left: unset; } } } } } } .media-modal { .modal-footer { border-color: $dark-border !important; } .content-section.drop-files-sec { background-color: $dark-card-background !important; } } .media-library-sec { label { background-color: $dark-body-background; border-color: $dark-border; } } .pending-balance-sec { &:after { background-image: none; } } .withdraw-btn { .plus-icon { background-color: $dark-body-background; } } .category-breadcrumb-select { background-color: $dark-body-background !important; border-color: $dark-border; } .image-select-list { li { background-color: $dark-body-background; border-color: $dark-border; .remove-icon { background-color: #323232; } } } .theme-tree-box { .tree-main-ul { >li { &:after { filter: invert(0.4); } } li { color: $dark-small-font-color; &:after { filter: invert(0.4); } ul { &:after { filter: invert(0.4); } } } } } .border-up-class { border-color: $dark-border; } .select-category-box { background-color: $dark-body-background !important; border-color: $dark-border; box-shadow: 0px 6px 10px 4px #1c1c1c; .category-content { background-color: $dark-card-background; border-color: $dark-border; } .category-listing { background-color: $dark-body-background; border-color: $dark-border; } } .loader-wrapper, .custom-loader-wrapper { .loader { border: 5px solid $dark-card-background; border-bottom-color: var(--theme-color); } } .border-table { border: 1px solid $dark-card-border; } .page-wrapper { .page-header { .header-wrapper { .nav-right { >ul { >li { span { color: #efefef; } } } } } } &.compact-wrapper { .page-body-wrapper { div.sidebar-wrapper { .skeleton-loader { background: linear-gradient(180.02deg, rgba(36, 36, 36, 1) 0.02%, #111a22 90.86%); animation: none; .sidebar-main { .sidebar-links { li.sidebar-list { a { i { background: #292930; } .loader-cls { background: linear-gradient(90deg, #242424 8%, #303030 18%, #292930 33%); background-size: 800px 104px; } } } } } } } } } } .table-product { .table { tbody { tr { td { .user-name { span { &:first-child { color: #fff; } &:last-child { color: rgba($white, 0.6); } } } } } } } } .title-header { color: $gray-light; a.btn { &:hover { background-color: transparent; } } } .card { .card-header-2 { h5 { color: $gray-light; } } } .customizer-links { .rtl-btn { background-color: $dark-card-background; } } .table { td { a { span { color: $dark-all-font-color; } } } } .rating { li { i { color: $light-all-font-color !important; &.theme-color { color: #ffa202 !important; } } } } .user-round { background-color: $dark-body-background; } .apexcharts-tooltip.light { .apexcharts-tooltip-title { background: $dark-card-background; color: $white; } } .tracker-table { tbody { tr { &:nth-child(even) { background-color: $dark-body-background; } td { border-bottom: 1px solid rgb(51, 54, 62) !important; &:nth-child(odd) { h6 { color: $gray-light; } p { color: $dark-small-font-color; } } } } } } .status-circle { border-color: $dark-body-background; } .save-details-box { .save-details { border-color: $dark-body-background; background-color: $dark-body-background; .button { a { background-color: rgba($white, 0.06); color: $white; } } } } .order-left-image { .order-image-contain { p { span { color: $dark-all-font-color; } } } } .progtrckr { li { &.progtrckr-todo { &:before { background-color: $dark-card-background; } } h5 { color: $dark-all-font-color; } } } .title-header-block { .card-order-section { ul { li { color: $dark-all-font-color; } } } } .order-details-table { .table-details { .table { tfoot { tr { &.table-order { h5 { color: $dark-all-font-color; } } td { h4 { color: $dark-all-font-color; } } } } } } } .order-details-table { .order-success { h4 { color: $dark-all-font-color; } .delivery-sec { h3 { color: $dark-all-font-color; } } } .table-details { .table { tbody { tr { td { h5 { color: $dark-all-font-color; } } } } } } } .StepProgress { &::before { border-left-color: $dark-body-background; } } .StepProgress-item { &:nth-child(even) { &::before { background-color: $dark-card-background; } } &:nth-child(odd) { &::before { background-color: $dark-card-background; } } } .recent-activity { .recent-item { border-bottom-color: rgba(255, 255, 255, 0.06); } } .brower-states { .brower-item { border-bottom-color: rgba(255, 255, 255, 0.06); .browser-image { h5 { color: $gray; } } } } .to-do-list { .to-do-item { border-bottom-color: rgba(255, 255, 255, 0.06); .to-do-list-name { strong { color: $gray; } } } } .card { background-color: $dark-card-background; } .page-wrapper { .page-header { .header-wrapper { .search-full input { background-color: $dark-body-background; } } } } .dropzone { border-color: $dark-body-background !important; background-color: $dark-body-background; } .country-list { li { border-color: $dark-border; a { color: $dark-small-font-color; } } } .custom-dt-picker { .btn { background-color: $dark-body-background !important; border-color: $dark-border !important; } } .bootstrap-tagsinput { border-color: $dark-body-background !important; background-color: $dark-body-background !important; } .ck { &.ck-icon { color: $dark-all-font-color; } } .ck.ck-button:not(.ck-disabled), a.ck.ck-button:not(.ck-disabled) { &:hover { background: $dark-card-background; } } .ck.ck-button.ck-on, a.ck.ck-button.ck-on { background: $dark-body-background; } .cke_top { background-color: $dark-body-background !important; } .cke_1 { border-color: $dark-body-background !important; } .cke_editable { border-color: $dark-body-background !important; } .ck { &.ck-toolbar { background-color: $dark-body-background; border-color: $dark-border; .ck.ck-toolbar__separator { background-color: $dark-border; } } } .vertical-tabs { .tab-content { border-color: $dark-border; } .nav-pills { .nav-item { background-color: $dark-body-background; } } } .theme-form input[type="text"], .theme-form input[type="email"], .theme-form input[type="search"], .theme-form input[type="password"], .theme-form input[type="number"], .theme-form input[type="tel"], .theme-form input[type="date"], .theme-form input[type="datetime-local"], .theme-form input[type="time"], .theme-form input[type="datetime-local"], .theme-form input[type="month"], .theme-form input[type="week"], .theme-form input[type="url"], .theme-form input[type="file"], .theme-form select, textarea { background-color: $dark-body-background !important; } .theme-form { .select2-selection__rendered { background-color: $dark-body-background !important; color: rgba(255, 255, 255, 0.5) !important; } .ck-content { border-color: $dark-border !important; background-color: $dark-body-background !important; } .ck-toolbar { border-color: $dark-border !important; background-color: $dark-body-background !important; } } .custom-select { .select2-container { .select2-results__option { color: $dark-all-font-color !important; background-color: transparent !important; } .select2-results__option--highlighted[aria-selected] { background-color: transparent !important; } .select2-selection { border-color: $dark-border !important; background-color: $dark-body-background !important; } .select2-container-dropdown { .select2-dropdown { background-color: $dark-body-background !important; border-color: #1d1e26; box-shadow: 0px 6px 10px 4px #1c1c1c; .select2-search__field { border-color: #363636 !important; } } } } &.intl-tel-input { background: transparent !important; .select2-container { .select2-selection { background: #0d0e11 !important; .select2-selection__rendered { background: #0d0e11 !important; } } } } } .theme-form input[type="text"], .theme-form input[type="email"], .theme-form input[type="search"], .theme-form input[type="password"], .theme-form input[type="number"], .theme-form input[type="tel"], .theme-form input[type="date"], .theme-form input[type="datetime-local"], .theme-form input[type="time"], .theme-form input[type="datetime-local"], .theme-form input[type="month"], .theme-form input[type="week"], .theme-form input[type="url"], .theme-form input[type="file"], .theme-form textarea, .theme-form select { border-color: $dark-border !important; } .datepicker-dashboard { .datepicker--cells-days { color: $dark-all-font-color; } } .category-box { .content-category { background-color: $dark-body-background; .top { h3 { color: $dark-all-font-color; } } } } .theme-table { thead { tr { th { background-color: #292930 !important; } } } tbody { tr { &:nth-child(even) { background-color: #18181e !important; } } } } .single-section { .description-section { .description-details { .menu-part.about { .about-sec { h4 { color: $dark-all-font-color; } } } } } } table { border-color: $dark-card-border; } .datepicker--nav { border-color: $dark-card-border; } .btn-outline-light:hover { background-color: $dark-body-background !important; border-color: $dark-card-border !important; color: $dark-all-font-color !important; } .btn-outline-light:focus { background-color: $dark-body-background !important; border-color: $dark-card-border !important; color: $dark-all-font-color !important; } .btn-outline-light:active, .btn-outline-light { &.active { background-color: $dark-body-background !important; border-color: $dark-card-border !important; color: $dark-all-font-color !important; } } .choose { input { &[type="file"]::file-selector-button:hover { background-color: $dark-card-border; } } } input[type="file"]::file-upload-button { background-color: $dark-card-border; color: $dark-all-font-color; } input[type="file"]::file-upload-button:hover { background-color: $dark-card-border; color: $dark-all-font-color; } input[type="file"]::-webkit-file-upload-button { background-color: $dark-card-border; color: $dark-all-font-color; } input[type="file"]::-webkit-file-upload-button:hover { background-color: $dark-card-border; color: $dark-all-font-color; } .ecommerce-widget { border: 1px solid $dark-card-border !important; } .btn-light { color: $dark-all-font-color !important; } .form-select { color: $dark-all-font-color; } .add-project { .text-inherit { color: $dark-all-font-color; } } .knowledgebase-search { color: $theme-body-font-color; .form-control-plaintext { color: $theme-body-font-color; } } .theme-modal { .modal-content { .modal-header { border-color: $dark-border !important; .btn-close { filter: invert(1); } .modal-title { color: $dark-all-font-color; } } } .modal-dialog { .modal-content { .modal-header { border-color: $dark-border !important; } } } } .dashboard-category { .category-name { h6, .h6 { color: $dark-small-font-color; } } .category-image { &:before { background-color: $dark-body-background; } } } .pos-detail-card { .summary-total { background-color: $dark-body-background; &:after, &:before { border-color: $dark-border; background-color: $dark-card-background; } li { &.list-total { border-color: $dark-border; } h4 { color: $dark-small-font-color !important; } } } } .product-details { .cart-listing { li { border-color: $dark-border; .cart-content { h4, .h4 { color: $dark-small-font-color; } h5, .h5 { color: $dark-small-font-color; } } .qty-box { .input-group { background-color: $dark-body-background; border-color: $dark-border; input { background-color: $dark-body-background; } } } } } } .pos-detail-card { .payment-btn { &:hover { background-color: transparent !important; } } } .product-section { .product-box { .counter-box { .addtocart_btn { .add-button, .add_cart { background-color: $dark-card-background !important; color: #878787 !important; border-color: $dark-border !important; } } } .product-detail { h6, .h6 { color: $dark-small-font-color; } } } } .product-box { background-color: $dark-body-background; } .status-pending, .status-draft { span { color: rgba(255, 255, 255, 0.64); } } .modal-header { h3, .h3 { color: $dark-all-font-color; } } .shipping-accordion-custom { border-color: $dark-border; .rule-dropdown { background-color: $dark-body-background; color: $dark-all-font-color; } } .form-control { border-color: $dark-border; background-color: $dark-body-background; color: $dark-all-font-color; } .prooduct-details-box { .media { border: 1px solid $dark-card-border; } } .product-price { del { color: $dark-small-font-color; } } .ProfileCard { border: 1px solid $dark-card-border !important; } .form-control-plaintext { color: $dark-all-font-color; } .form-select { background-color: $dark-body-background; border: 1px solid $dark-border-color; } .box-layout { background-color: $dark-body-background; .page-wrapper, &.page-wrapper { .page-header { .header-wrapper { border: 1px solid $dark-border-color; } } } } .form-check-input { background-color: #444444; } .switch-state { &:before { background-color: $dark-card-background; } } .category-box { .img-category { .like-cls { i { background-color: $dark-card-background; } } } } .daterangepicker { &:before { border-bottom-color: $dark-card-background; } .ranges { li { background-color: $dark-body-background; border-color: $dark-card-background; color: $dark-gray; } } .daterangepicker_input { .form-control { background-color: $dark-body-background; border-color: $dark-card-background !important; } } .calendar-time { select { border-color: $dark-card-background; background-color: $dark-body-background; } } &.dropdown-menu { background-color: $dark-card-background; -webkit-box-shadow: 0 0 14px $dark-body-background; box-shadow: 0 0 14px $dark-body-background; } .calendar-table { background-color: $dark-card-background; border-color: $dark-card-background; } &.ltr { td { &.in-range, &.off { background-color: $dark-body-background; color: $white; } } } } .tooltip { &.bs-tooltip-top { .tooltip-arrow { &:before { border-top-color: $dark-card-inbox; } } } &.bs-tooltip-bottom { .tooltip-arrow { &:before { border-bottom-color: $dark-card-inbox; border-top-color: $transparent-color; } } } &.bs-tooltip-start { .tooltip-arrow { &:before { border-left-color: $dark-card-inbox; border-top-color: $transparent-color; } } } &.bs-tooltip-end { .tooltip-arrow { &:before { border-right-color: $dark-card-inbox; border-top-color: $transparent-color; } } } .tooltip-inner { background-color: $dark-card-inbox; color: $white; } .tooltip-arrow { &:before { border-top-color: $dark-card-inbox; } } } .page-wrapper { &.only-body { .page-body-wrapper { .page-title { >.row { .col-6 { &:first-child { h6 { color: rgba($dark-all-font-color, 0.5); } } } } } } .page-header { .header-wrapper { .search-full { .form-group { .Typeahead { .u-posRelative { background-color: $dark-card-background; } } } } } } } .page-header { .header-wrapper { .nav-right { .profile-dropdown { li { a { i { color: $white; } } } } .flip-card .flip-card-inner { .back { background-color: $dark-card-background !important; .flip-back-content { input { background-color: $dark-body-background; border: 1px solid $dark-card-border; color: $dark-all-font-color; } } li { &:last-child { border-top: 1px solid $dark-card-border; } } } .front { background-color: $dark-body-background !important; svg { stroke: $white; } } } .onhover-show-div:not(.profile-dropdown) { li { &:first-child { background-color: $dark-card-background; } } } } } } } .customizer-contain { color: $dark-body-background; .customizer-body { .main-layout { .box-layout { background-color: $white; } } } } .login-card { .btn-showcase .btn { background-color: $dark-card-background !important; color: #fff; border-color: $dark-card-background !important; } .login-main { box-shadow: 0 0 37px rgba($white, 0.05); .theme-form { input { background-color: $dark-card-background !important; } .or { &:before { background-color: $dark-card-background; } } .checkbox label::before { background-color: $dark-card-background !important; border-color: $dark-card-background !important; } } } } .H_ui { ~div { background-color: $dark-body-background !important; } } .swal-icon--success:after, .swal-icon--success:before { background: $dark-card-background; } .swal-icon--success__hide-corners { background-color: $dark-card-background; } .note-editor.note-frame { .note-status-output { border-top: 1px solid $dark-card-background; } .note-statusbar { border-top: 1px solid $dark-card-background; .note-resizebar { background-color: $dark-card-background; } } } .light-font { color: rgba(255, 255, 255, 70%); } .page-link { background-color: transparent; border: 1px solid $dark-card-border; } .b-r-light { border-right: 1px solid $dark-card-border !important; } .history-details { .media { border-top: 1px solid $dark-card-border; } } .modal-header { border-bottom: 1px solid $dark-card-border; } #right-history { background-color: $dark-card-background; box-shadow: 0 0 9px $dark-body-background; h6 { span { a { color: $dark-all-font-color; } } } } .ProfileCard { &:hover { color: $dark-all-font-color; background-color: $dark-card-background; } } .translate_wrapper.active .more_lang { &:before { border-bottom: 7px solid $dark-card-background; } .lang { border-bottom: 1px solid $dark-body-background; } } .toggle-sidebar { svg { stroke: var(--theme-color); } } .footer { background-color: $dark-card-background; } .page-wrapper { .page-body-wrapper { background-color: $dark-body-background; } .sidebar-main-title { p { color: $dark-all-font-color; } } &.compact-wrapper { .page-body-wrapper { div { &.sidebar-wrapper { background: linear-gradient(180.02deg, rgba(245, 245, 245, 0.05) 0.02%, rgba(245, 245, 245, 0) 90.86%); animation: none; @media (max-width: 991px) { background: linear-gradient(180.02deg, rgba(36, 36, 36, 1) 0.02%, #111a22 90.86%); } &.close_icon { &:hover { background-color: #121a23; } } .sidebar-main { .sidebar-links { .sidebar-link.active { svg { stroke: $dark-all-font-color; } } li { a { svg { stroke: $dark-all-font-color; } } } .simplebar-wrapper { .simplebar-mask { .simplebar-content-wrapper { .simplebar-content { >li { .sidebar-link { &.active { background-color: rgba($white, 0.06); svg { color: $dark-all-font-color; stroke: $dark-all-font-color; } } } .mega-menu-container { .mega-box { .link-section { .submenu-title { h5 { color: $dark-all-font-color; } } .submenu-content { &.opensubmegamenu { li { a { color: $dark-all-font-color; font-weight: 400; } } } } } } &::after { background-color: $light-all-font-color; } } .sidebar-submenu { li { &:hover { >a { color: var(--theme-color); } } a { color: $dark-all-font-color; } } } a { i { color: #efefef; } } } } } } } .sidebar-list { ul.sidebar-submenu { li { a { span { color: $dark-all-font-color; } &.active { color: var(--theme-color); } } } } } } } } } .according-menu { i { color: $dark-all-font-color !important; } } } } &.horizontal-wrapper { .page-body-wrapper { .sidebar-wrapper { background: $dark-card-background; border-top: 1px solid $dark-card-border; .sidebar-main { .sidebar-links { .simplebar-wrapper { .simplebar-mask { .simplebar-content-wrapper { .simplebar-content { >li { >a { color: $dark-all-font-color; } .sidebar-submenu { background: $dark-card-background; li { a { color: $dark-all-font-color; &.active, &:hover { color: var(--theme-color); } } .nav-sub-childmenu { background: $dark-card-background; } } } .mega-menu-container { background: $dark-card-background; .mega-box { .link-section { .submenu-content { li { a { color: $dark-all-font-color; } } } } } } } } } } } } .left-arrow, .right-arrow { background-color: $dark-card-background; color: $dark-all-font-color; } } } } } &.compact-sidebar { .page-body-wrapper { div { &.sidebar-wrapper { >div { background: $dark-card-background; } .sidebar-main { .sidebar-links { li { .sidebar-title { border-bottom: 1px solid $dark-card-border; } a { span { color: $dark-all-font-color; } svg { stroke: $dark-all-font-color; } } .sidebar-submenu, .mega-menu-container { background-color: $dark-card-background; li { a { border-bottom: 1px solid $dark-card-border; } } } } .simplebar-wrapper { .simplebar-mask { .simplebar-content-wrapper { .simplebar-content { >li { .sidebar-link { &.active { background-color: rgba($primary-color, 0.2); span { color: var(--theme-color); } svg { color: var(--theme-color); stroke: var(--theme-color); } } } .mega-menu-container { .mega-box { .link-section { .submenu-title { h5 { color: $dark-all-font-color; } } .submenu-content { &.opensubmegamenu { li { a { color: $dark-all-font-color; font-weight: 400; } } } } } } &::after { background-color: $light-all-font-color; } } .sidebar-submenu { li { a { color: $dark-all-font-color; } } } } } } } } .sidebar-list { ul.sidebar-submenu { li { a { span { color: $dark-all-font-color; } &.active { color: var(--theme-color); } } } } } } } } } .according-menu { i { color: $dark-all-font-color; } } } } &.material-type { .page-header { .header-wrapper { border-radius: 15px 15px 0 0; } } } &.material-icon { .page-header { .header-wrapper { background-color: $transparent-color; .nav-right { .language-nav { .more_lang { color: $white; } } .onhover-show-div { color: $white; } .flip-card { .flip-card-inner { .back { .flip-back-content { input { border: 1px solid $dark-border-color; background: $dark-body-background; color: $white; } } } } } } } .header-logo-wrapper { background-color: $transparent-color; } } .page-body-wrapper { .page-body { background-color: $transparent-color; } } } &.advance-layout { background-color: $dark-body-background; .page-header { .header-wrapper { background: $transparent-color; .header-logo-wrapper { background: $transparent-color; } } } .page-body-wrapper { background: $transparent-color; .page-body { background: $transparent-color; } } } .page-header { .header-wrapper { .search-full { background-color: transparent; @media (max-width: 767px) { background-color: $dark-card-background; } input { color: $dark-all-font-color; } } } } } ::-webkit-calendar-picker-indicator { filter: invert(1); } .left-header { .mega-menu-container { background-color: $dark-card-background; border-top: 1px solid $dark-card-background; .mega-box { +.mega-box { border-left: 1px solid $dark-card-border; } } } .mega-menu div>div a { color: rgba($white, 0.7); } .level-menu { .header-level-menu { background-color: $dark-card-background; >li { .header-level-sub-menu { background-color: $dark-card-background; } a { color: rgba($white, 0.7); } svg { stroke: rgba($white, 0.7); } } } } } .kanban-board-header { background-color: $dark-body-background !important; border-bottom: 1px solid $dark-card-background !important; } .kanban-board .kanban-drag { background: $dark-body-background !important; } .kanban-container { .kanban-item { .kanban-box { border: 1px solid rgba($primary-color, 0.15); background-color: $dark-body-background; } } } .project-box { border: 1px solid rgba($primary-color, 0.15); background-color: $dark-body-background; } .file-content { .form-inline { border: 1px solid $dark-body-background; } .files { .file-box { border: 1px solid rgba($primary-color, 0.15); background-color: $dark-body-background; .file-top { background-color: $dark-card-background; border: 1px solid rgba($primary-color, 0.15); } } } .folder .folder-box { border: 1px solid rgba($primary-color, 0.15); background-color: $dark-body-background; } } .file-sidebar { .pricing-plan { border: 1px solid rgba($primary-color, 0.15) !important; } .btn-light { color: $dark-all-font-color; background-color: $dark-body-background !important; border: 1px solid rgba($primary-color, 0.15) !important; } } #lnb { border-right: 1px solid $dark-card-border; } .lnb-new-schedule, .lnb-calendars>div { border-bottom: 1px solid $dark-card-border; } #menu .sidebar-list .btn-default { color: rgba($dark-all-font-color, 0.2); } .tui-full-calendar-timegrid-hour { background-color: $dark-card-background; color: $white !important; } .tui-full-calendar-timegrid-gridline { border-bottom: 1px solid $dark-card-border !important; } .tui-full-calendar-time-date, .tui-full-calendar-weekday-grid-line, .tui-full-calendar-left, .tui-full-calendar-timegrid-timezone { border-right-color: $dark-card-border !important; } .tui-full-calendar-popup { color: $theme-body-font-color; } #menu { .btn-default { color: $dark-all-font-color; &:hover { color: $theme-body-font-color; } } .dropdown-menu { color: $dark-all-font-color; } } .tui-full-calendar-dayname-container, .tui-full-calendar-splitter { border-top-color: $dark-card-border !important; border-bottom-color: $dark-card-border !important; } span.tui-full-calendar-dayname-date-area { color: $white !important; } .tui-full-calendar-layout { background-color: $dark-card-background !important; } .chat-default { .card-body { &.chat-box { .right-side-chat { .media-body { .message-main { span { background-color: var(--theme-color); color: $dark-all-font-color; &.loader-span { .dot { background: $dark-all-font-color; } } } } } } } } } .blockquote { border-left: 4px solid $dark-card-border; } .figure { &.text-end { blockquote { border-right-color: $dark-card-border; } } } .contacts-tabs { .nav-pills { border-right: 1px solid $dark-card-border; .nav-link { +.nav-link { border-top: 1px solid $dark-card-border; } } } } .list-persons { .profile-mail { .media { .media-body { ul { li { +li { border-left: 2px solid $dark-card-border; } } } } } } } .product-wrapper { &.sidebaron { .product-sidebar { .filter-section { .card { .left-filter { background-color: $dark-card-background; } } } } } } .apexcharts-gridline { stroke: $dark-border-color; } .apexcharts-tooltip-title, .apexcharts-tooltip-series-group, .apexcharts-tooltip.light, .apexcharts-menu-item { color: $black; } .apexcharts-menu { background-color: #0b141d; border-color: #1d3436; .apexcharts-menu-item { color: #fff; } } .apexcharts-tooltip { &.apexcharts-theme-light { border: 1px solid #0b141d; background: #1c2128; .apexcharts-tooltip-title { background: #1c2128; border-bottom: 1px solid transparent; color: #fff; } } } .small-donut, .donut-peity2, .pie-peity { ~svg, svg { path { &:nth-child(even) { fill: $dark-body-background; } } } } .earning-card { &.card { .card-body { .left_side_earning { p { color: $dark-all-font-color; } } .earning-content { border-right: 1px solid $dark-card-border; } .inner-top-left, .inner-top-right { ul { li { color: $dark-all-font-color; &.active { color: var(--theme-color); } } } } .media { .media-body { p { color: $dark-all-font-color; } } } .border-top { border-top: 1px solid $dark-card-border !important; } } } } .chart_data_left, .chart_data_right { .card-body { .chart-main { .media { border-right: 1px solid $dark-card-border; &.border-none { border-right: none; } } } .media { .right-chart-content { span { color: $dark-all-font-color !important; } } } } } .chart_data_right { .card-body { .knob-block { input { color: $dark-all-font-color !important; } } } } .third-news-update, .news, .appointment-sec { .news-update { span { color: $dark-all-font-color; } h6 { margin-bottom: 2px; line-height: 24px; } border-bottom: 1px solid $dark-card-border; } .appointment { .radar-chart { .apexcharts-datalabel { fill: $dark-all-font-color; } } } } .chat-default { .card-body { &.chat-box { .input-group { .form-control { background-color: $dark-card-background !important; border: none !important; border-left: 1px solid var(--theme-color) !important; &::placeholder { color: $dark-all-font-color; } } } } } } .appointment-table { table { tr { td { &.img-content-box { .font-roboto { color: $dark-all-font-color; } } } } } } .notification { .card { .media { .media-body { p { span { color: $dark-all-font-color; } } span { color: $dark-all-font-color; } } } } } .datepicker { background-color: $dark-card-inbox; .datepicker--cell.-current- { color: $primary-color; } } .cal-date-widget { .datepicker { background-color: $dark-card-inbox; .datepicker--cell-day { color: $white; } .datepicker--cell.-current- { color: $primary-color; } } } .default-datepicker { .datepicker-inline { .datepicker { background: $dark-card-background; .datepicker--nav-title { color: $dark-all-font-color; i { color: $dark-all-font-color; } } .datepicker--content { .datepicker--days { .datepicker--days-names, .datepicker--cells { .datepicker--day-name, .datepicker--cell-day { color: $dark-all-font-color; &.-selected- { color: $white; } } } } } } } } .dash-chart { .media { .media-body { p { color: $dark-all-font-color; .font-roboto { color: $dark-all-font-color; } } } } } .our-product { table { tr { td { p { color: $dark-all-font-color; } } } } } .activity-timeline { .media { .activity-line { background-color: $light-all-font-color; } .media-body { p { color: $dark-all-font-color; } } } } .total-users { .goal-status { ul { &:last-child { li { border-top-color: $dark-card-border; } } } } } .best-seller-table { table { tbody { tr { td { .label { color: $dark-all-font-color; } p { color: $light-all-font-color; } } &:hover { td { color: var(--theme-color) !important; span { color: $dark-all-font-color !important; } .label, p { color: var(--theme-color) !important; } } } } } } } [class*="activity-dot-"] { background-color: $dark-card-background; } .page-header { .header-wrapper { .nav-right { .chat-dropdown, .profile-dropdown { li { &:last-child { border-top: none !important; } } } } } } $alert-name: primary, secondary, success, danger, warning, info, light, dark; $alert-color: $primary-color, $secondary-color, $success-color, $danger-color, $warning-color, $info-color, $light-color, $dark-color; @each $var in $alert-name { $i: index($alert-name, $var); .alert-#{$var} { background-color: rgba(nth($alert-color, $i), 0.8) !important; border-color: rgba(nth($alert-color, $i), 0.9) !important; color: $white; .progress { height: 5px; background-color: darken(nth($alert-color, $i), 1%); border-radius: 0; } .progress-bar { background-color: lighten(nth($alert-color, $i), 50%); } } .alert-#{$var}.inverse { background-color: $transparent-color !important; .btn-close { filter: brightness(1) invert(1); } } .alert-#{$var}.outline, .alert-#{$var}.outline-2x { .btn-close { filter: brightness(1) invert(1); } } .dismiss-text { .alert-dismissible { .btn-close { filter: unset; .bg-light { color: $theme-body-font-color !important; } } } } } .options { >div { border: 1px solid $dark-card-border; } } .was-validated { .custom-control-input { &:invalid { ~.custom-control-label { &::before { background-color: $dark-body-background; } } } } } .pricing-simple { box-shadow: 1px 1px 2px 1px $dark-body-background !important; } .pricing-block { box-shadow: 0 0 10px 5px rgba($primary-color, 0.05) !important; } .search-page { ul { &.search-info { li { +li { border-left: 1px solid $dark-body-background; } } } } } .browse { .browse-articles { h6 { border-bottom: 1px solid $dark-border-color; } } } .job-search { .job-description { .theme-form { .row { div[class^="col-"] { .input-group { .datepicker-here { border: 1px solid $dark-body-background; } } } } } } } .calendar-wrap { .fc-unthemed { td, th { border-color: $dark-body-background; } } } .mega-inline, .mega-horizontal, .mega-vertical { .card { box-shadow: 1px 1px 7px 0 rgba($dark-card-border, 0.5) !important; } &.plain-style, &.border-style, &.offer-style { .card { box-shadow: none !important; } } &.border-style { .card { border: 1px solid $dark-card-border !important; } } &.offer-style { .card { border: 1px dashed $dark-card-border !important; } } } .setting-dot { .setting-bg { background-color: var(--theme-secondary); } } .bookmark.pull-right { border: none; } .popover { &.bs-popover-bottom { .popover-arrow { &:after { border-bottom-color: $dark-body-background; border-right-color: $transparent-color; } } } &.bs-popover-top { .popover-arrow { &:after { border-right-color: $transparent-color; border-top-color: $dark-body-background; } } } &.bs-popover-start { .popover-arrow { &:after { border-left-color: $dark-body-background; } } } background-color: $dark-body-background; .popover-header { background-color: $dark-card-background; } .popover-arrow { &:after { border-right-color: $dark-body-background; } } .popover-body { color: rgba(255, 255, 255, 0.6); } code { background-color: unset; } } .apex-chart-container { .apexcharts-legend { .apexcharts-legend-series { span { color: $dark-all-font-color !important; } } } } .apexcharts-canvas { svg { .apexcharts-title-text { fill: $white; } .apexcharts-subtitle-text { fill: $white; } .apexcharts-yaxis { .apexcharts-yaxis-texts-g { .apexcharts-yaxis-label { fill: $white; } } } .apexcharts-xaxis { .apexcharts-xaxis-texts-g { .apexcharts-xaxis-label { fill: $white; } } } .apexcharts-legend-series { span { color: $dark-all-font-color !important; } } .apexcharts-datalabels-group { .apexcharts-datalabel-label { fill: $white; } .apexcharts-datalabel-value { fill: $white; } } } } .Typeahead-menu { background-color: $dark-body-background; } .ecommerce-widget { border: 1px solid $dark-border-color; } .bookmark { ul { li { .search-form { .form-control-search { input { background-color: $dark-body-background; border: 1px solid $dark-border-color; color: $dark-all-font-color; } &:before { background: $dark-border-color; } } } } } } .cart { .qty-box { .input-group { .btn { background-color: #2e3648 !important; border-color: $dark-card-border !important; } } } } .checkout { .checkout-details { background-color: $dark-body-background; border: 1px solid $dark-border-color; padding: 40px; .animate-chk { .radio_animated { &:after { border: 2px solid $dark-card-background; } } } } } .order-box { .title-box { color: #bfc2c6; border-bottom: 1px solid $dark-border-color; } .qty { li { color: #bfc2c6; span { color: #bfc2c6; } } border-bottom: 1px solid $dark-border-color; } .sub-total { li { color: #bfc2c6; } } .total { li { color: #bfc2c6; } } } .shopping-checkout-option { .checkbox_animated { &:after { border: 2px solid $dark-card-background; } } } .animate-chk { .radio_animated { &:after { border: 2px solid $dark-border-color; } } } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(41, 50, 64, 0.52); } .card { .card-header-1 { h5 { color: $dark-all-font-color; } } } .order-details-table { .order-success { background-color: $dark-body-background; } } .nav-pills { .nav-item { .nav-link { color: $gray; } } } .page-wrapper { background-color: #1d1e26; &.compact-wrapper { .page-body-wrapper { &.sidebar-wrapper { .sidebar-main { .sidebar-links { .simplebar-wrapper { .simplebar-mask { .simplebar-content-wrapper { .simplebar-content { >li { .sidebar-link { &.active { .according-menu { i { color: $gray; } } } } } } } } } } } } } } } .all-hotel-table, .all-restaurant-table, .user-table { tbody { tr { td { &:nth-child(2) { a { span { &:first-child { color: $gray !important; } } } } } } } } .product-box { .product-img { .product-hover { ul { li { .btn { color: $dark-small-font-color; } &:hover { .btn { color: $white; } } } } } } } .radio_animated, .checkbox_animated { &:after { background-color: $dark-card-background; border-color: $dark-border; } } .slider-product { border-top: 1px solid $dark-border-color; border-bottom: 1px solid $dark-border-color; } .square-product-setting { .icon-grid { background-color: $dark-card-background; svg { color: $dark-all-font-color; } } } .active-order-table, .market-table { table { thead { tr { th { border-top: none !important; } } } tbody { tr { td { border-bottom: 1px solid $dark-border-color; } &:last-child { td { border-bottom: none; } } } } } } .pricing-card-design-2 { .pricing-block { .pricing-inner { ul { li { border-bottom: 1px solid $dark-border-color; } } } } } .flot-chart-container { .legend { .table { tbody { background-color: $dark-card-background; color: $white; .legendLabel { padding-left: 5px; } } } } } .google-visualization-tooltip { text { fill: rgba(0, 0, 0, 0.7) !important; } } .nav-dark, .nav-pills.nav-dark { .nav-link { color: $white; } } .loader-wrapper { background-color: $dark-body-background; .loader { background-color: $dark-body-background !important; } } .page-wrapper { /* Main Header start */ .page-header { .translate_wrapper { &.active { .more_lang { background-color: $dark-body-background; } .lang { background-color: $dark-card-background; } } } form { background-color: $dark-body-background; } .header-wrapper { background-color: $dark-card-background; li { i { color: $light-color; } } .nav-right { >ul { >li { svg { stroke: $white; path { color: $white; } } } } &.right-header { >ul { >li { .profile-media { .media-body { p { color: $dark-all-font-color; } } } } } } .nav-menus { li { .media { .media-body { .txt-dark { color: $dark-all-font-color !important; } } } .onhover-show-div { background-color: $dark-body-background; box-shadow: 0 0 14px $dark-body-background; li { border-color: $dark-card-background; } p { color: $dark-all-font-color; } &:before { border-bottom: 7px solid $dark-body-background; } &:after { border-bottom: 7px solid $dark-body-background; } } .notification-dropdown.onhover-show-div { li { span { color: $dark-small-font-color; } } .bg-light { background-color: #282e38 !important; color: $dark-all-font-color !important; } } } } .profile-dropdown { li { a { color: $dark-all-font-color; svg { path, line, circle { color: $dark-all-font-color !important; } } &:hover { color: var(--theme-color); svg { line, path, circle { color: var(--theme-color) !important; } } } } } } >ul { >li { .media { .media-body { .txt-dark { color: $dark-all-font-color !important; } } } .onhover-show-div { background-color: $dark-body-background; box-shadow: 0 0 2px 2px $dark-card-background; &:before { border-bottom: 7px solid $dark-body-background; } &:after { border-bottom: 7px solid $dark-body-background; } } .notification-dropdown.onhover-show-div { li { border-color: $dark-card-background; span { color: $dark-small-font-color; } } } } } .chat-dropdown { li { color: $white; border-color: $dark-card-background; } } } .left-header { ul { li { .search-form { input { &::placeholder { color: $dark-all-font-color; } } } } } } } .header-logo-wrapper { background-color: $dark-card-background; .logo-wrapper { a { .image-dark { display: none; } .image-light { display: block; } } } } } /* Main Header ends */ .page-body-wrapper { /* body start*/ .page-body { .topper-lists { table { tbody { tr { td { p { color: $dark-small-font-color; } } } } } } .header-small { color: $dark-small-font-color; } .statistics { p { color: $dark-small-font-color; } } .feather-main, .professor-table { .media-body, .professor-block { p { color: $dark-small-font-color; } } } .logs-element { span { +span { color: $dark-small-font-color; } } } .progress-block { .progress-title { span { +span { color: $dark-small-font-color; } } } } .ecommerce-icons { div { span { color: $dark-small-font-color; } } } .new-users, .recent-notification { .media { .media-body { p { color: $dark-small-font-color; } } } } .progress-media { .media { .media-body { span { color: $dark-small-font-color; } } } .progress-change { span { color: $dark-small-font-color; } } } .topper-lists { table { tbody { tr { td { border-top: none !important; border-bottom: 1px solid $dark-card-border; } &:last-child { td { border-bottom: none; } } } } } } .notifiaction-media { .media { .media-body { .circle-left { border: 5px solid #334154; } } } } .upcoming-event { .upcoming-innner { border-bottom: 1px solid $dark-border-color; &:last-child { border-bottom: none; } } } .professor-table { table { tbody { tr { td { border-top: none !important; } } } } } .number-widgets { .media { .media-body { h6 { color: $dark-all-font-color; } } } } .activity { .media { .gradient-round { &.gradient-line-1, &.small-line, &.medium-line { &:after { background-color: $dark-border-color; } } } .media-body { h6 { span { color: $dark-small-font-color; } } } } } .card.custom-card { .card-header { border-bottom: none !important; } } } .custom-card .card-header img { background-color: $black; opacity: 0.8; } .page-title { .row { h3 { small { color: $dark-small-font-color; } } } .breadcrumb { li { color: $dark-all-font-color; } .breadcrumb-item { a { svg { color: $dark-all-font-color; } } } } .breadcrumb-item { &.active { color: $dark-small-font-color; } } } .page-body { background-color: $dark-body-background; .default-according { .card:not(.email-body) { border: none; } } .card:not(.email-body) { background-color: $dark-card-background; box-shadow: 1px 1px 2px 1px rgba(29, 28, 28, 0.08); .chart-block { #bar-chart2 { svg { >rect { fill: $dark-card-background; } >g { text { fill: $dark-all-font-color; } } } } .word-tree { svg { >g { >rect { fill: $dark-card-background; } >text { fill: $dark-all-font-color; } } } } } .card-header { background-color: $transparent-color; border-bottom: 1px solid $dark-card-border; >span { color: $dark-all-font-color; } h1, h2, h3, h4, h5, h6 { color: $dark-all-font-color; } .card-header-right { background-color: $dark-card-background; i { color: $dark-all-font-color; &.fa-cog { color: var(--theme-color); } } } } .alert-dark { color: $dark-small-font-color; a { color: $dark-small-font-color; } } .alert-light.outline, .alert-light.outline-2x, .alert-light.inverse { color: $dark-all-font-color; } #animation-box { .animate-widget { p { color: $dark-small-font-color !important; } } } .grid-item { img { background-color: $dark-card-background; border: 1px solid $dark-card-border; } } .line { color: $dark-all-font-color; } thead, tbody, tfoot, tr, td, th { border-color: $dark-card-border; } .table { th, td { color: $dark-all-font-color; } td { &:last-child { &.lost { color: var(--theme-color); } &.success { color: #42ba96; } } } thead { .border-bottom-primary { th { border-bottom: 1px solid var(--theme-color); } } } .table-primary, .table-secondary, .table-success, .table-info, .table-warning, .table-light, .table-danger { th, td { color: $dark-card-background; } } .bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning, .bg-danger { color: $white; } .bg-light { color: $black; } .thead-light { th { color: $black; } } tbody { .border-bottom-primary { th, td { border-bottom: 1px solid var(--theme-color); } } } } .table[class*="bg-"] { th, td { color: $white; } } .table-striped { tbody { tr { &:nth-of-type(odd) { --bs-table-accent-bg: rgb(29, 30, 38); &:hover { th, td { color: $white; } } } } } } .table-styling { thead, tbody { th, td { color: $white; } } } .card-footer { background-color: $dark-card-background; border-top: 1px solid $dark-card-border; } .switch { .switch-state { background-color: #313138; } input { &:checked { +.switch-state { background-color: var(--theme-color); } } } } .bg-white { background-color: $white !important; } .b-l-light { border-left: 1px solid $dark-border-color !important; } .ct-grid { stroke: $dark-border-color; } .ct-label { color: $dark-small-font-color; } hr { border-top: 1px solid $dark-border-color; } .text-muted { color: $sidebar-submenu-font-color !important; } .calender-widget { .cal-date { background-color: $dark-card-background; border: 1px solid $dark-border-color; } } .contact-form { .theme-form { border: 1px solid $dark-card-border; .form-icon { background-color: $dark-card-background; border: 1px solid $dark-card-border; color: $dark-all-font-color; } } } .btn-outline-light, .btn-outline-dark, .btn-outline-light-2x { color: $white !important; border: 1px solid $dark-card-border; } .btn-outline-light { &:hover { color: $dark-all-font-color !important; } } .border-right { border-right: 1px solid $dark-border-color !important; } .flot-chart-placeholder { .flot-text { color: $dark-all-font-color !important; } svg { text { fill: $dark-all-font-color; } } } .chart-overflow { &#gantt_chart { svg { g { rect { &:first-child { fill: $dark-body-background; } } } } rect { &:nth-child(6) { fill: $dark-body-background; } } } &#line-chart, &#column-chart1, &#column-chart2 { rect { fill: $dark-card-background; } } svg { >rect { fill: $dark-card-background; } >g { >g { >g { text { fill: rgb(177, 177, 178); } } } >text { fill: $dark-all-font-color; } } } } .radial-bar { &:after { background-color: $dark-card-background; color: $dark-all-font-color; } } .bar-chart-widget { .bottom-content { .num { color: $dark-all-font-color; .color-bottom { color: $dark-all-font-color; } } } } .b-r-light { border-right: 1px solid $dark-card-border !important; } .chart-container { .live-products, .turnover, .monthly, .uses { .ct-labels { .ct-label { color: $white; } } .ct-grid { stroke: $white; } } #browser-uses-chart, #website-visiter-chart { svg { text { fill: $dark-all-font-color; } } } } .status-details { h4 { color: $dark-all-font-color; span { color: $dark-all-font-color; } } span { color: $dark-small-font-color; } } .clipboaard-container { .form-control { background-color: $dark-body-background; color: $dark-small-font-color; border: 1px solid $dark-border-color; } } .img-thumbnail { background-color: $dark-body-background; border: 1px solid $dark-card-border; } .dataTables_wrapper { button { color: $black; } &.no-footer { .dataTables_scrollBody { border-bottom: 1px solid $dark-body-background; } } .btn-danger, .btn-success, .btn-primary { color: $white; } .dataTables_length { select { background-color: $dark-body-background; color: $dark-all-font-color; border: 1px solid $dark-border-color; } } .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_processing, .dataTables_paginate { color: $dark-all-font-color; } .dataTables_paginate { border: 1px solid $dark-border-color; } .dataTables_filter { input[type="search"] { background-color: $dark-body-background; border: 1px solid $dark-border-color; color: $dark-all-font-color; } } table.dataTable.display, table.dataTable.order-column.stripe { tbody { tr { background-color: $dark-card-background; &:hover { >.sorting_1 { background-color: $dark-datatable-sorting; } } } tr.odd { background-color: $dark-datatable-odd; >.sorting_1 { background-color: $dark-datatable-sorting; } } tr.even { >.sorting_1 { background-color: $dark-datatable-sorting-even; } } } } table.dataTable { border: 1px solid $dark-border-color; thead { th, td { border-bottom: 2px solid $dark-border-color; } } input, select { background-color: $dark-body-background; color: $dark-all-font-color; border: 1px solid $dark-border-color; } tbody { tr { background-color: $dark-card-background; } td.select-checkbox, th.select-checkbox { &:before { border: 1px solid $dark-small-font-color; } } } } .table-striped { tbody { tr { &:nth-of-type(odd) { --bs-table-accent-bg: $dark-body-background; } } } } .dataTables_paginate { .paginate_button { color: $dark-all-font-color !important; &.current, &:active { border-color: var(--theme-color); } } .paginate_button.disabled { color: $dark-small-font-color !important; &:hover, :active { color: $dark-small-font-color !important; } } } table.dataTable.row-border, table.dataTable.display { tbody { th, td { border-top: 1px solid $dark-border-color; } } } table.dataTable.display, table.dataTable.order-column.hover { tbody { tr.even { &:hover { >.sorting_1 { background-color: $dark-even-hover-sorting; } } } } } table.dataTable.hover, table.dataTable.display { tbody { tr { &:hover { background-color: $dark-datatable-sorting; } } } } table.dataTable.cell-border { th, td { border-top: 1px solid $dark-border-color; border-right: 1px solid $dark-border-color; &:first-child { border-left: 1px solid $dark-border-color; } } } table.dataTable.order-column, table.dataTable.display { tbody { tr { >.sorting_1, >.sorting_2, >.sorting_3 { background-color: $dark-body-background; } } } } } #example-style-3_wrapper { #example-style-3 { tfoot { border-top: 2px solid $dark-border-color; } } } .page-item { &:hover { .page-link { background-color: $dark-body-background; } } } .ecommerce-widget { .icon { color: $dark-body-background; } .total-num { color: $dark-all-font-color; span { color: $dark-all-font-color; } } span { color: $dark-small-font-color; } } .flot-chart-container-small { background-color: $dark-card-background; border-top: 1px solid $dark-border-color; } .product-table { #API-2_wrapper { #API-2 { tbody { td { span, p { color: $dark-small-font-color; } } } } } h6 { color: $dark-small-font-color; } } .border-tab.nav-tabs { border-bottom: 1px solid $dark-border-color; .nav-item { .nav-link { color: $dark-all-font-color; } } .nav-link { &.active, &:focus, &:hover { color: var(--theme-color); } } } .br-theme-bars-1to10, .br-theme-bars-movie, .br-theme-bars-pill, .br-theme-bars-reversed, .br-theme-bars-horizontal { .br-widget { a { background-color: $dark-border-color; &.br-active, &.br-selected { background-color: var(--theme-color); } } } } .br-theme-bars-square { .br-widget { a { border: 2px solid $dark-border-color; background-color: $dark-card-background; color: $dark-all-font-color; &.br-active, &.br-selected { border: 2px solid var(--theme-color); color: var(--theme-color); } } } } .br-theme-fontawesome-stars, .br-theme-fontawesome-stars-o { .br-widget { a { &.br-selected, &.br-active { &:after { color: var(--theme-color); } } } } } .scroll-demo { border: 1px solid $dark-card-border; } .search-form { input { border: 1px solid $dark-border-color; color: $dark-all-font-color; background-color: $dark-body-background; } .form-group { &:before { background: $dark-card-background; } } } .cd-timeline-content { background-color: $dark-border-color; &::before { border-left: 7px solid $dark-border-color; } } .cd-timeline-block { &:nth-child(even) { .cd-timeline-content { &::before { border-right-color: $dark-border-color; border-left: $transparent-color; } } } } .breadcrumb { &.bg-white { background-color: $dark-card-background !important; } } .user-status { table { td, th { border-top: none !important; } } } #donut-color-chart-morris-daily, #donut-color-chart-morris, #browser-uses-chart, #website-visiter-chart { svg { opacity: 0.5; } } } .form-builder-header-1, .form-builder-2-header { background-color: $dark-body-background; } .form-builder { .nav-primary { .show { >.nav-link { color: $white; } } .nav-link { color: $dark-all-font-color; &.active { color: $white; } } .nav-pills.nav-primary { .show { >.nav-link { color: $white; } } .nav-link { color: $dark-all-font-color; &.active { color: $white; } } } } .drag-box { fieldset { border: 1px solid $dark-border-color; } } .help-block { color: $dark-small-font-color; } } #viewhtml { .render { background-color: $dark-card-background; color: $dark-all-font-color; border-color: $dark-border-color; } } .form-builder-column { .drag-bx { border: 1px dotted $dark-border-color; } } .wizard-4 { ul.anchor { li { a.disabled { color: $dark-body-background; } } } } .gallery-with-description { h4 { color: $dark-all-font-color; } a { >div { border: 1px solid $dark-border-color; } } p { color: $dark-small-font-color; } } .jsgrid-grid-header { background-color: $dark-card-background; border: 1px solid $dark-border-color; } .jsgrid-header-row, .jsgrid-filter-row { >.jsgrid-header-cell, >.jsgrid-cell { background: $dark-card-background; border: 1px solid $dark-border-color; input { background-color: $dark-body-background; border-color: $dark-border-color; color: $dark-all-font-color; &:focus { outline: none; } } } select { background-color: $dark-body-background; border-color: $dark-border-color; color: $dark-all-font-color; } } .jsgrid-row { >.jsgrid-cell { background-color: $dark-card-background; } } .jsgrid-alt-row { >.jsgrid-cell { background-color: $dark-body-background; } } .jsgrid-cell, .jsgrid-grid-body { border: 1px solid $dark-border-color; } .jsgrid-selected-row { >.jsgrid-cell { background-color: $dark-datatable-sorting; } } .jsgrid { .jsgrid-pager { [class*="jsgrid-pager"] { border: 1px solid $dark-border-color; } .jsgrid-pager-page { a { color: $dark-all-font-color; } } } } .jsgrid-pager-current-page { color: $dark-all-font-color; font-weight: 700; } .sub-title { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .navs-icon { li { a { color: $dark-all-font-color; &:hover { color: var(--theme-color); } } } .separator { border-bottom: 1px solid $dark-card-border; } } .default-according { li { .text-muted { color: $dark-all-font-color !important; } } } .navs-icon.default-according.style-1 { li { button { &:hover { color: var(--theme-color) !important; } } } } .nav-list { .nav-list-disc { li { a { color: $dark-all-font-color; } &:hover { color: var(--theme-color); a { color: var(--theme-color); } } } } } .navs-dropdown { .onhover-show-div { background-color: $dark-body-background; box-shadow: 0 0 14px 0 $dark-body-background; .navs-icon { li { p { color: $white; } a { svg { path, line, polyline, polygon, rect { color: $dark-all-font-color !important; } } &:hover { svg { path, line, polyline, polygon, rect { color: var(--theme-color) !important; } } } } } } } } .onhover-dropdown { &:hover { .onhover-show-div { &:before { border-bottom: 7px solid $dark-body-background; } } } } .default-according { .card { .btn-link { color: $dark-all-font-color; } .card-body { color: $dark-small-font-color; } .card-body { border: 1px solid $dark-card-border; border-top: none; } } } .border { border: 1px solid $dark-card-border !important; } .blog-box { .blog-date { color: $dark-all-font-color; } .blog-details, .blog-details-main { .blog-social { li { color: $dark-small-font-color; border-right: 1px solid $dark-border-color; &:first-child { border-right: 1px solid $dark-border-color; } &:last-child { border-right: none; } } } p { color: $dark-all-font-color; } .single-blog-content-top { border-top: 1px solid $dark-border-color; p { color: $dark-small-font-color; } } } } .comment-box { .media { h6 { span { color: $dark-small-font-color; } } img { border: 1px solid $dark-border-color; } } p { color: $dark-small-font-color; } .comment-social { li { color: $dark-small-font-color; &:first-child { border-right: 1px solid $dark-border-color; } } } hr { border-top: 1px solid $dark-border-color; } } ul.the-icons { li { border: 1px dotted $dark-card-border; color: $sidebar-submenu-font-color; display: inline-block; padding: 10px; &:hover { background: $black; box-shadow: 0 0 3px $dark-card-background; } em { display: none; } } } .button-builder-wrap { .box { background-color: $dark-card-background; border: 1px solid $dark-border-color; } .button-preview { h2 { color: $dark-all-font-color; } } pre.well { background-color: $dark-card-background !important; } } .crm-activity { >li { +li { border-top: 1px solid $dark-border-color; } h6 { color: $dark-all-font-color; } } ul.dates { li { color: $dark-small-font-color; } } } #donut-color-chart-morris, #donut-color-chart-morris-daily { svg { text { fill: $dark-all-font-color; } } } .custom-card { .card-profile { img { background-color: $dark-card-background; } } .profile-details { h6 { color: $dark-small-font-color; } } .card-social { li { a { color: $dark-small-font-color; } } } .card-footer { >div { h6 { color: $dark-small-font-color; } +div { border-left: 1px solid $dark-card-inbox; } } } } .form-control { background-color: $dark-body-background !important; color: rgba(255, 255, 255, 0.5); border-color: $dark-border !important; } .checkbox, .radio { label { &::before { background-color: $dark-body-background; border: 1px solid $dark-border-color; color: $dark-all-font-color; } } } .dropdown-basic { .dropdown { .dropdown-content { background-color: $dark-body-background; a { color: $dark-all-font-color; background-color: $transparent-color; border-color: $dark-card-background; &:hover { background-color: $dark-card-background; } } .dropdown-header { color: $dark-all-font-color; } .dropdown-divider { border: 1px solid $dark-border-color; } } } } .dropup-basic { .dropup { .dropup-content { background-color: $dark-body-background; a { color: $dark-all-font-color; &:hover, &.active { background-color: $dark-card-background; } } } } } .dropzone.dz-clickable { .dz-message { h6 { color: $dark-all-font-color; } span { color: $dark-small-font-color; } } } .dropzone { .dz-preview { background-color: $dark-body-background; .dz-details { background-color: $dark-card-background; } } } .browser-widget { .media-body { column-rule: 1px solid $dark-card-border; h4 { color: $dark-all-font-color; span { color: $dark-all-font-color; } } span { color: $dark-small-font-color; } } } .email-wrap { .email-app-sidebar { .media { img { border: 2px solid $dark-body-background; } } .main-menu { >li { a { color: $dark-all-font-color; &:hover { background-color: $dark-body-background; } } } } ul { li { a { >.title { color: $dark-all-font-color; } } } } } .email-right-aside { .email-body { .row { .col-xl-4 { border-right: 1px solid rgba(0, 0, 0, 0.1); } } .inbox { .media.active { background-color: $dark-body-background; } } } } .media-body { h6 { color: $dark-all-font-color; small { color: $dark-small-font-color; span { color: $dark-small-font-color; } } } p { color: $dark-small-font-color; } } .email-top { border-bottom: 1px solid $dark-border-color; } p { color: $dark-small-font-color; } .email-content { .email-top { .user-emailid:after { border: 1px solid $dark-border-color; } } } } .dropdown-menu { background-color: $dark-body-background; border: 1px solid $dark-card-background; a { color: $dark-all-font-color; background: $transparent-color; border-top-color: $dark-card-background; &:hover { background-color: $dark-card-background; } } } .icon-lists { div { i { color: $dark-small-font-color; } &:hover { background-color: $dark-body-background; } } } .widget-joins { .media { .media-body { >span { color: $dark-small-font-color; } } .details { border-left: 1px solid $dark-card-border; } } &:before, &:after { background-color: $dark-card-border; } } .redial-social-widget { i { background-color: $dark-card-background; } } .social-widget-card { h5, h4 { color: $dark-all-font-color; } span { color: $dark-small-font-color; } } .b-b-light { border-bottom: 1px solid $dark-card-border !important; } .b-r-dark { border-right: 1px solid $white !important; } .testimonial { i { color: $dark-border-color; } p { color: $dark-all-font-color; } h5 { color: $dark-all-font-color; } span { color: $dark-small-font-color; } } .grid-showcase { span { background-color: $dark-card-background; border: 1px solid $dark-card-border; } } .grid-align { .row { background-color: $dark-border-color; border: 1px solid $dark-border-color; } } .page-builder { .ge-html-output { background-color: $dark-body-background; color: $dark-small-font-color; border: 1px solid $dark-card-border; } .btn-grid { background-color: $dark-card-background; color: $dark-small-font-color !important; border-right: 1px solid $dark-border-color; } .ge-mainControls { .ge-addRowGroup { .ge-row-icon { .column { border-left: 3px solid $dark-card-background; } } } } .btn-code, .btn-screen { color: $dark-small-font-color; border-right: 1px solid $dark-border-color; } .ge-canvas.ge-editing { .row { background-color: $dark-body-background; } .column { border: 1px solid $dark-border-color; background-color: $dark-card-background; } .ge-tools-drawer { .ge-details { input { background-color: $dark-body-background; border-color: $dark-border-color; color: $dark-small-font-color; } .btn-group { a { color: $dark-small-font-color; } } } } } .ge-content-type-ckeditor { color: $dark-all-font-color; } } .search-page { .info-block { border: 1px solid $dark-border-color; } } .card-absolute { .bg-primary, .bg-secondary { h5 { color: $white; } } } .timeline-small { .media { .timeline-round { &.timeline-line-1, &.small-line, &.medium-line { &:after { background-color: $dark-card-border; } } } } } /* body end*/ } .footer { p { color: $dark-all-font-color; } border-top: 1px solid $dark-body-background; background-color: $dark-card-background; } .custom-select, .custom-file-label { background: $dark-body-background; color: $dark-all-font-color; } .footer-fix { background-color: $dark-card-background; border-top: 1px solid $dark-border-color; } } .note { textarea { color: $dark-all-font-color; } } .dt-button-info { background-color: $dark-card-background; border: 1px solid $dark-small-font-color; h2 { background-color: $dark-card-background; } } .chat-box { .about { .name { color: $dark-all-font-color; } } .chat-menu { border-left: 1px solid $dark-border-color; .nav-tabs { border-bottom: 1px solid $dark-border-color; .nav-item { .nav-link { &.active { color: $dark-all-font-color !important; } } } } .user-profile { .image { .icon-wrapper { background-color: $dark-card-background; box-shadow: 1px 1px 3px 1px $dark-body-background; } .avatar { img { border: 5px solid $dark-border-color; } } } .social-media { a { color: $dark-small-font-color; } } .follow { span { color: $dark-small-font-color; } .follow-num { color: $dark-all-font-color; } } } } .status { color: $dark-small-font-color; p { color: $dark-all-font-color !important; } } .chat-right-aside { .chat { .chat-header { border-bottom: 1px solid $dark-border-color; .chat-menu-icons { li { a { i { color: $dark-small-font-color; } } } } img { box-shadow: 1px 1px 4px 1px $dark-body-background; } } .chat-msg-box { .my-message { border: 1px solid $dark-border-color; } .message { color: $dark-all-font-color; } .other-message { background-color: $dark-body-background; } } .chat-message { background-color: $dark-card-background; border-top: 1px solid $dark-border-color; .input-group { .form-control { background-color: $dark-card-background; } } } } } .chat-history { .call-icons { ul { li { border: 1px solid $dark-border-color; a { color: $dark-small-font-color; } } } } } } pre { background-color: $dark-border-color; color: $dark-all-font-color; } .scorlled { background-color: $dark-body-background; } .input-group-air { box-shadow: 0 3px 20px 0 $dark-border-color; } .input-group-text { background-color: $dark-body-background; border: 1px solid $dark-border; color: rgba(255, 255, 255, 0.6); i { color: rgba(255, 255, 255, 0.6); } } .input-group-solid { .input-group-text, .form-control { background: $dark-body-background; border: 1px solid $dark-border-color; color: $dark-all-font-color; } } .semilight-bg-color, .header-bg-color { background-color: $white; } .list-group-item { background-color: $dark-card-background; border: 1px solid rgba(255, 255, 255, 0.3); color: $dark-all-font-color; +.list-group-item { border-top-width: 0; } &.active { background-color: var(--theme-color) !important; border-color: var(--theme-color); color: $white; } &:hover, &:focus { z-index: 1; text-decoration: none; } } .list-group-item-action { &:hover:not(.active), &:focus { background-color: $dark-body-background; } } .list-group-flush { .list-group-item { border-left: 0; border-right: 0; border-radius: 0; } } .list-group-item-primary { color: #004085; background-color: #b8daff; } .list-group-item-secondary { color: #383d41; background-color: #d6d8db; } .list-group-item-success { color: #155724; background-color: #c3e6cb; } .list-group-item-danger { color: #721c24; background-color: #f5c6cb; } .list-group-item-warning { color: #856404; background-color: #ffeeba; } .list-group-item-info { color: #0c5460; background-color: #bee5eb; } .list-group-item-light { color: #818182; background-color: #fdfdfe; } .list-group-item-dark { color: #1b1e21; background-color: #c6c8ca; } .auth-bg { background-blend-mode: overlay; background-color: rgba(54, 64, 74, 0.9); .authentication-box { .card { background-color: $dark-card-background; .theme-form { .form-group { input { color: $dark-all-font-color; background-color: $dark-body-background; border: 1px solid $dark-border-color; } label { color: $dark-all-font-color; } } .checkbox { label { color: $dark-all-font-color; &::before { background-color: $dark-body-background; border: 1px solid $dark-border-color; } } } } } h3, h4, h6 { color: $white; } } } .auth-bg-video { background-blend-mode: overlay; background-color: rgba(54, 64, 74, 0.7); .authentication-box { h4, h3 { color: $white; } h6 { color: $dark-small-font-color; } .card { background-color: $dark-card-background; .theme-form { .form-group { input[type="text"], input[type="password"] { background-color: $dark-body-background; border: 1px solid $dark-border-color; color: $dark-all-font-color; } } .checkbox { label { &::before { background-color: $dark-body-background; border: 1px solid $dark-border-color; } } } } } } } .error-wrapper { .maintenance-icons { li { i { color: $dark-border-color; } &:nth-child(3) { i { color: $dark-border-color; } } } } } .modal-content { background-color: $dark-card-background; .modal-header { border-bottom: 1px solid $dark-border-color; .close { color: $dark-small-font-color; } } .modal-footer { border-top: 1px solid $dark-border-color; } } .comingsoon { background-blend-mode: overlay; background-color: rgba(54, 64, 74, 0.9); .comingsoon-inner { h5 { color: $dark-all-font-color; } .countdown { border-top: 1px solid $dark-border-color; border-bottom: 1px solid $dark-border-color; .title { color: $dark-all-font-color; } } .coming-soon-bottom-link { a { color: $dark-all-font-color; } } } } .theme-form { .login-divider { border-top: 1px solid $dark-border-color; &:before { background: $dark-border-color; color: $dark-all-font-color; } } } .authentication-main { background-color: $dark-border-color; .auth-innerright { .reset-password-box { .card { background-color: $dark-card-background; } .reset-password-link { color: $dark-small-font-color; } .theme-form { .form-group { label { color: $dark-small-font-color; } .form-control { background-color: $dark-body-background; color: $dark-all-font-color; border-color: $dark-border-color; } } .opt-box { background-color: $dark-border-color; } } } .authentication-box { h4 { color: $dark-all-font-color; } h6 { color: $dark-small-font-color; } h3 { color: $dark-all-font-color; } .card { background-color: $dark-card-background; .theme-form { .form-group { input[type="text"], input[type="password"] { background-color: $dark-body-background; border: 1px solid $dark-border-color; color: $dark-all-font-color; } } .checkbox { label { &::before { background-color: $dark-body-background; border: 1px solid $dark-border-color; } } } } } } } } .vertical-menu-main { background-color: $dark-card-background; } .mega-menu { .title { color: $dark-all-font-color; border-bottom: 1px solid $dark-border-color; } .list-unstyled { div { a { &:hover { color: var(--theme-color); } } } } } .default-according { .card { background-color: $dark-card-background; .btn-link { background-color: $dark-card-background; border: 1px solid $dark-card-border; border-bottom: none; color: $white; } .text-muted { color: $dark-small-font-color !important; } } .bg-primary { .btn-link { background-color: var(--theme-color); border: 1px solid var(--theme-color); } } .bg-secondary { .btn-link { background-color: var(--theme-secondary); border: 1px solid var(--theme-secondary); } } } .collapse { .card-body { background-color: $dark-card-background; } } @media screen and (max-width: 1660px) { .chat-box { .chat-history { .call-icons { ul { li { border: 1px solid $dark-border-color; } } } .total-time { h2 { color: $dark-all-font-color; } } } } .caller-img { img { opacity: 0.7; } } .chat-box { .chat-history { .call-content { >div { background-color: rgba(0, 0, 0, 0.75); background-blend-mode: overlay; } } } } } @media only screen and (max-width: 1199.98px) { .left-header { .mega-menu-container { border-left: 1px solid $dark-card-border; .mega-box { +.mega-box { border-left: none; } } } } } @media only screen and (max-width: 1199px) { .mobile-title { &.d-none { border-bottom: 1px solid $dark-card-border; } } .chat-menu { border-top: 1px solid $dark-border-color; background-color: $dark-card-background; } .error-wrapper { .maintenance-icons { li { i { color: $dark-color; } } } } } @media only screen and (max-width: 575.98px) { .user-profile { .hovercard { .info { .user-designation { border-top: 1px solid $dark-border-color; border-bottom: 1px solid $dark-border-color; } } } } .widget-joins { .border-after-xs { &:after { background-color: $dark-border-color; } } } .page-header { .header-wrapper { .left-header { ul { li { .search-form { .form-control-plaintext { background-color: $dark-body-background; } } } } } } } .page-wrapper { &.compact-wrapper, &.compact-sidebar { .page-header { .header-wrapper { .toggle-sidebar { border-right: 1px solid $dark-card-border; } } } } } } } .lg-backdrop { background-color: $dark-body-background; } .lg-outer { .lg-thumb-outer { background-color: $dark-card-background; } } .drag { background-color: $dark-card-background; form { background: $dark-card-background; box-shadow: 0 0 30px $dark-border-color; border: 1px dotted $dark-border-color; input { background-color: $dark-body-background; border: 1px solid $dark-border-color; color: $dark-all-font-color; } .help-block { text-transform: capitalize; color: $dark-small-font-color; } } } .draggable { input { background-color: $dark-body-background; color: $dark-all-font-color; border: 1px solid $dark-border-color; } p { color: $dark-small-font-color; } select { background-color: $dark-body-background; color: $dark-all-font-color; border: 1px solid $dark-border-color; } .radio, .checkbox { label { &::before { background-color: $dark-body-background; border: 1px solid $dark-border-color; } } } } .theme-form { .form-group { select.form-control:not([size]):not([multiple]) { background-color: $dark-body-background; color: $dark-all-font-color; border-color: $dark-border-color; } input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="url"], input[type="file"], select { border-color: $dark-border-color; background-color: $dark-body-background; color: $dark-all-font-color; &::-webkit-input-placeholder { color: $dark-small-font-color; } } .form-control { background-color: $dark-body-background; color: $dark-all-font-color; } textarea { border-color: $dark-border-color; } } .form-divider { border-top: 1px solid $dark-border-color; &::before { background: $dark-card-background; color: $dark-all-font-color; } } } .CodeMirror { background: $dark-card-background; border: 1px solid $dark-small-font-color; color: $dark-all-font-color; .CodeMirror-code { pre { background: $dark-card-background; } } } .editor-toolbar { border-top: 1px solid $dark-small-font-color; border-left: 1px solid $dark-small-font-color; border-right: 1px solid $dark-small-font-color; a { color: $dark-all-font-color !important; &:hover, &.active { background: $dark-border-color; } } i.separator { border-left: 1px solid $dark-small-font-color; border-right: 1px solid $dark-small-font-color; } &.fullscreen { &::before { background: linear-gradient(to right, $dark-body-background 0, rgba(0, 0, 0, 0) 100%); } &::after { background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, $dark-body-background 100%); } } } .editor-toolbar.disabled-for-preview { a { &:not(.no-disable) { background: $dark-border-color; } } } .editor-preview { background-color: $dark-card-background; } .editor-toolbar.fullscreen, .editor-preview-side { background: $dark-card-background; border: 1px solid $dark-small-font-color; } .u-step { background: $dark-border-color; &.active, &.current { background: var(--theme-color); color: $white; } } .u-step-title, .u-pearl-title { color: $dark-all-font-color; } .u-step-number { background-color: $dark-card-background; } .u-pearl { &:before { background-color: $dark-border-color; } } .u-pearl-number, .u-pearl-icon { background: $dark-body-background; border: 2px solid $dark-body-background; } .u-pearl.disabled { .u-pearl-icon, .u-pearl-number { background: $dark-border-color; border: 2px solid $dark-border-color; } &:after { background-color: #334053; } } .u-pearl.error { &:after { background-color: $dark-body-background; } } .note-editor.note-frame { border-color: $dark-border-color; .note-editing-area { .note-editable { background-color: $dark-card-background; color: $dark-all-font-color; } } } .swal-modal { background-color: $dark-card-background; .swal-title { color: $dark-all-font-color; } .swal-text { color: $dark-small-font-color; } .swal-content__input { background-color: $dark-body-background; color: $dark-all-font-color; } } .theme-modal { .nav-tabs { border-bottom: 1px solid $dark-border; } } .nav-tabs { border-bottom: none; .nav-link { border-color: $dark-border; color: $dark-all-font-color; border: none; &.active { background-color: $dark-card-background; color: $dark-all-font-color; border-color: $dark-card-border $dark-card-border $dark-card-background; border-width: 1px; border-style: solid; border-bottom: none; } &:hover, &:focus { border-color: $dark-card-border $dark-card-border $dark-card-inbox; } } .nav-item.show { .nav-link { background-color: $dark-card-background; color: $dark-all-font-color; border-color: $dark-border-color $dark-border-color $dark-card-background; } } } .nav-tabs.nav-bottom { .nav-item { .nav-link { &.active, &.focus, &.hover { border-color: $dark-card-background $dark-border-color $dark-border-color; } } } } .border-tab.nav-left, .border-tab.nav-right { .nav-link { color: $dark-all-font-color; &.active { color: var(--theme-color); } } .show { >.nav-link { color: var(--theme-color); } } } .border-tab.nav-left.nav-secondary { .nav-link { &.active, &:focus, &:hover { border-left-color: var(--theme-secondary); color: var(--theme-secondary) !important; } } .show>.nav-link { border-left-color: var(--theme-secondary); color: var(--theme-secondary) !important; } .nav-item.show { color: var(--theme-secondary) !important; border-left-color: var(--theme-secondary); } } .border-tab.nav-left.nav-success { .nav-link { &.active, &:focus, &:hover { color: $success-color !important; } } .show>.nav-link { border-left-color: $success-color; color: $success-color !important; } .nav-item.show { color: $success-color !important; border-left-color: $success-color; } } .border-tab.nav-right.nav-info { .nav-link { &.active, &:focus, &:hover { color: $info-color !important; } } .show>.nav-link { border-left-color: $info-color; color: $info-color !important; } .nav-item.show { color: $info-color !important; border-left-color: $info-color; } } .border-tab.nav-secondary { .nav-link { &.active, &:focus, &:hover { color: var(--theme-secondary) !important; } } .nav-item { &.show { color: var(--theme-secondary) !important; } } } .border-tab.nav-success { .nav-link { &.active, &:focus, &:hover { color: $success-color !important; } } .nav-item { &.show { color: $success-color !important; } } } .dropdown-divider { border-top: 1px solid $dark-border-color; } .icon-hover-bottom { background-color: $dark-card-background; box-shadow: 0px 0px 1px 1px $dark-border-color; .icon-title { color: $dark-all-font-color; } span { color: $dark-small-font-color; } .form-group { input { background-color: $dark-body-background; color: $dark-all-font-color; border: 1px solid $dark-border-color; } } .icon-first { i { color: $dark-small-font-color; } } } code { background-color: $dark-body-background; border-radius: 2px; } #cd-timeline { &::before { background: $dark-border-color; } } .timeliny { border-top: 1px solid $dark-border-color; border-bottom: 1px solid $dark-border-color; &::before { background-color: $white; } .timeliny-dot { background-color: $dark-card-background; border: 1px solid $white; &::before { color: $dark-all-font-color; } } .timeliny-timeline { .timeliny-timeblock { &.active { .timeliny-dot { &::before { color: $dark-all-font-color; } &::after { background-color: $dark-border-color; color: $dark-all-font-color; border: none; } } } &:not(.inactive):not(.active) { .timeliny-dot { &:hover { background-color: $white; &::before { color: $dark-all-font-color; } } } } .timeliny-dot { &:hover { &::after { background-color: $dark-card-background; border: 1px solid $dark-border-color; color: $dark-all-font-color; } } } } } } .todo { .todo-list-wrapper { #todo-list { li { .task-container { background: $dark-card-background; border-bottom: 1px solid $dark-border-color; .task-label { color: $dark-all-font-color; } &:hover { h4 { color: $white; } } .task-action-btn { .action-box { &:hover:not(.active) { background: $dark-card-background; border: 1px solid $dark-border-color; } } } } &.completed { .task-container { .task-label { color: var(--theme-color); } .complete-btn { &:hover { border: 1px solid $success-color !important; } } } } } } .todo-list-footer { .new-task-wrapper { textarea { background-color: $dark-card-background; border: 1px solid $dark-border-color; color: $dark-all-font-color; } } } } } .user-profile { .ttl-info { h6 { color: $dark-small-font-color; } span { color: $dark-all-font-color; } } .hovercard { .info { .title { a { color: $dark-all-font-color; } } } .user-image { .avatar { img { border: 10px solid $dark-card-background; } } .icon-wrapper { background-color: $dark-card-background; } } .tabs-scoial { border-bottom: none !important; } } .follow { .follow-num { color: $dark-all-font-color; } } .profile-img-style { .user-name { color: $dark-all-font-color; } p { color: $dark-small-font-color; } } } .introjs-helperLayer { background-color: rgba(54, 64, 74, 0.9); border: rgba(255, 255, 255, 0.5); } .jstree-default { .jstree-node, .jstree-icon { color: #455869 !important; } .jstree-anchor { color: $dark-small-font-color; } .jstree-clicked { color: $white; background-color: $transparent-color; } .jstree-hovered { background-color: $dark-body-background; border: 1px solid $dark-border-color; } } span.twitter-typeahead { .tt-menu { background-color: $dark-body-background; color: $dark-all-font-color; } .tt-suggestion { color: $dark-all-font-color; &:hover, &:focus { background-color: $dark-card-background; } } } .typography { small { color: $dark-all-font-color; } } .code-box-copy { pre { background-color: $dark-body-background; code { background-color: $dark-body-background; } } pre[class*="language-"] { border: 1px solid $dark-border-color; } .code-box-copy__btn { background-color: $dark-body-background; border: 1px solid $dark-border-color; color: $white; } code[class*="language-"], pre[class*="language-"] { text-shadow: 0px 1px $black; ::selection { text-shadow: none; background: $dark-card-background; } } } table.fixedHeader-floating { background-color: $dark-body-background; } .note { textarea { color: $dark-all-font-color; } } .dt-button-info { background-color: $dark-card-background; border: 1px solid $dark-border-color; h2 { background-color: $dark-card-background; border-bottom: 1px solid $dark-border-color; } } pre { background-color: $dark-body-background; } #keytable_wrapper, #column-selector_wrapper, #auto-fill_wrapper, #custom-button_wrapper, #class-button_wrapper, #keyboard-btn_wrapper, #multilevel-btn_wrapper, #pagelength-btn_wrapper, #basic-colreorder_wrapper, #state-saving_wrapper, #real-time_wrapper, #basic-fixed-header_wrapper, #fixed-header-footer_wrapper, #export-button_wrapper, #excel-cust-bolder_wrapper, #cust-json_wrapper, #basic-key-table_wrapper, #focus-cell_wrapper, #responsive_wrapper, #new-cons_wrapper, #show-hidden-row_wrapper, #basic-row-reorder_wrapper, #full-row_wrapper, #rest-column_wrapper { .dataTables_paginate { border: none; } } #example-style-8_wrapper { table.dataTable.stripe, table.dataTable.display { tbody { tr.odd { background-color: $dark-border-color; } } } } .error-wrapper { background-color: rgba(54, 64, 74, 0.8); .sub-content { color: $dark-all-font-color; } } .b-light { border: 1px solid $dark-border-color !important; } .modal-content { background-color: $dark-card-background; .modal-header { border-bottom: 1px solid $dark-card-border; .close { color: $dark-all-font-color; font-weight: 400; } } .ui-front { .form-control { background-color: $dark-card-background; color: $dark-all-font-color; border: 1px solid $dark-card-border; } } } .stepwizard { .stepwizard-row { &:before { background-color: $dark-card-border; } } } .modal { .theme-close { background-color: $dark-card-background !important; color: $light-all-font-color; } } .token.atrule, .token.attr-value, .token.keyword { color: $info-color; } .token { &.boolean, &.constant, &.deleted, &.number, &.property, &.symbol, &.tag { color: $danger-color; } } .loader-box { &.card-loader { background-color: $dark-card-background; } } .my-gallery { &.gallery-with-description { img { border: 1px solid $dark-border-color !important; border-bottom: none !important; } } } @each $var in $alert-name { $i: index($alert-name, $var); .alert-#{$var}.inverse { color: $dark-all-font-color; } } .alert-theme { span { +span { +span { border-left: 5px solid var(--theme-color); background-color: $dark-body-background; border-radius: 4px; } } } i { color: $white; padding: 20px; margin-right: 20px !important; } } .user-card { .user-deatils { h6 { color: $dark-small-font-color; } } .card-footer { >div { &:first-child { border-right: 1px solid $dark-border-color; } } .user-footer { h6 { color: $dark-small-font-color; } svg { path, rect { color: $dark-small-font-color; } } } } } .order-history { table { .qty-box { button { background-color: $dark-body-background !important; border: none !important; } .input-group { border-color: $dark-card-border; } } thead { tr { th { background-color: $dark-body-background; } } } tr { td, th { border-top: none !important; } } } .title-orders { background-color: $dark-body-background; } } .navigation-option { ul { li { a { color: $dark-all-font-color; } &:hover { background-color: $dark-body-background; } } } } .product-box { .product-details { h6 { color: $dark-all-font-color; } span { color: $dark-small-font-color; } } .product-img { .product-hover { ul { li { background-color: $dark-card-background; &:hover { background-color: $black; color: $white; } } } } } } .browse { .browse-articles { ul { li { a { color: $dark-all-font-color; } &:hover { background-color: $dark-body-background; } } } } } @each $btn-name, $btn-color in (primary, var(--theme-color)), (secondary, $secondary-color), (success, $success-color), (danger, $danger-color), (info, $info-color), (light, $light-color), (dark, $dark-color), (warning, $warning-color) { .radio-#{$btn-name} { input[type="radio"] { &+label { &::before { border-color: $btn-color !important; } &::after { background-color: $btn-color; } } &:checked { &+label { &::before { border-color: $btn-color !important; } &::after { background-color: $btn-color; } } } } } } @each $btn-name, $btn-color in (primary, var(--theme-color)), (secondary, $secondary-color), (success, $success-color), (danger, $danger-color), (info, $info-color), (light, $light-color), (dark, $dark-color), (warning, $warning-color) { .checkbox-#{$btn-name} { label { &::before { border-color: $btn-color !important; } } } } @each $btn-name, $btn-color in (primary, var(--theme-color)), (secondary, $secondary-color), (success, $success-color), (danger, $danger-color), (info, $info-color), (light, $light-color), (dark, $dark-color), (warning, $warning-color) { .checkbox-solid-#{$btn-name} { label { &:before { background-color: $btn-color !important; border-color: $btn-color !important; color: $white !important; } } input[type="checkbox"] { &:checked { &+label { &::before { background-color: $btn-color !important; border-color: $btn-color !important; color: $white !important; } &::after { color: $white !important; } } } } } } .bootstrap-datetimepicker-widget { ul { li { color: $dark-all-font-color; border-bottom: 1px solid $dark-border-color; } } tr { th, td { &:hover { background-color: $dark-card-background; } span { &:hover { background-color: $dark-card-background; } } &.prev, &.next { &:hover { background-color: $dark-card-background; } } } &:first-child { th { &:hover { background-color: $dark-card-background; } } } } } .btn-transparent { color: $dark-all-font-color; } #cal-basic { .fc-toolbar { .fc-left, .fc-right { .fc-next-button { .fc-icon-right-single-arrow { &:after { color: $dark-small-font-color; } } } .fc-prev-button { .fc-icon-left-single-arrow { &:after { color: $dark-small-font-color; } } } } .fc-left { .fc-button-group { .fc-month-button { color: $white !important; } } } } } .fc-button-group { .fc-basicWeek-button, .fc-basicDay-button, .fc-agendaWeek-button, .fc-agendaDay-button { color: $black !important; } .fc-month-button { color: $white !important; } } #cal-agenda-view { .fc-toolbar { .fc-right { .fc-button-group { .fc-month-button, .btn-light { color: $black !important; } .fc-agendaWeek-button { color: $white !important; &:hover { color: $black !important; } } } } } } .basic-calendar, #cal-bg-events, #cal-event-colors { .fc-toolbar { .fc-right { .fc-button-group { .fc-basicWeek-button, .btn-light { color: $black !important; } .fc-month-button { color: $white !important; &:hover { color: $black !important; } } } } } } .categories { ul { li { a { color: $dark-small-font-color; } &:hover { background-color: $dark-body-background; } } } } .socialprofile { .likes-profile { h5 { span { color: $dark-all-font-color; } } } span { color: $dark-small-font-color; } } .social-status { .media { .media-body { span { +span { color: $dark-small-font-color; } } p, .light-span { color: $dark-small-font-color; } } } } .filter-cards-view, .timeline-content { p { color: $dark-small-font-color; } .comment-number { i { color: $dark-small-font-color; } } .comments-box { .input-group { .form-control { border: none !important; } .input-group-append { background-color: $dark-body-background; } } } } .social-chat { .media-body { border: 1px solid $dark-border-color; &:after { border-right: 7px solid $dark-card-background; } } span { span { color: $dark-small-font-color; } } } .details-about { .your-details { p { color: $dark-small-font-color; } } } .activity-log { .my-activity { p { color: $dark-small-font-color; } } } .bookmark { ul { li { a { color: $dark-all-font-color; } } } } @media screen and (max-width: 1366px) { .earning-card { &.card { .card-body { .earning-content { border-bottom: 1px solid $dark-card-border; } } } } } @media only screen and (max-width: 991.98px) { .page-wrapper { &.compact-wrapper, &.compact-sidebar { .left-header { .mega-menu { svg { stroke: $dark-all-font-color; } } } } } } @media only screen and (max-width: 767.98px) { .page-wrapper { &.compact-wrapper, &.compact-sidebar { .left-header { .mega-menu { svg { stroke: $white; } .nav-link { border-left: 1px solid $dark-card-border; } } } } &.material-icon { .page-header { background-color: $dark-card-background; } } } .chart_data_left { .card-body { .chart-main { >div { &:first-child { border-right: 1px solid $dark-card-border; } &:nth-child(3) { border-right: 1px solid $dark-card-border; } } } } } } .apexcharts-tooltip.light { border-color: $dark-card-border; background-color: $dark-body-background; .apexcharts-tooltip-title { border-color: $dark-card-border; } .apexcharts-tooltip-text-label, .apexcharts-tooltip-text-value { color: $white; } } /**===================== view-detail-page dark ==========================**/ .single-section { .description-section { &.tab-section { .menu-top { .nav-tabs { background-color: $dark-body-background !important; } } } } } .single-section { .description-section { .menu-top { li { a { color: $dark-all-font-color; } } } } } .btn-outline { color: $dark-all-font-color; } .single-section { .description-section { .description-details { .menu-part { background-color: $dark-card-background; } } } } .single-section { .description-section { .description-details { .menu-part { &.about { .about-sec { p { color: $dark-all-font-color; } } } } } } } .single-section { .description-section { .description-details { .menu-part { &.about { .about-sec { ul { li { color: $dark-all-font-color; } } } } } } } } .single-section { .description-section { .description-details { .menu-part.about { .about-sec { h6 { color: $dark-all-font-color; } } } } } } .dark-body { background-color: $dark-body-background !important; } .single-section { .description-section { .description-details { .menu-part { .accordion-plan { .card { .card-header { button { color: $dark-all-font-color; &::before { content: ""; color: $dark-all-font-color; } } } } } } } } } .order-menu { .search-bar { .search { input { background-color: $dark-body-background; &:focus { outline: none; border: none; } } } } } .order-menu { .search-bar { border-color: #f2f9fc1f; } } .order-menu { .nav { .nav-link { color: $dark-all-font-color; } } } .order-menu-section { border-color: #f2f9fc1f; .order-section { h4 { color: $dark-all-font-color; } .order-title { h6 { color: $dark-all-font-color; } } .order-items { .items { h5 { color: $dark-all-font-color; } p { color: $dark-all-font-color; } } } } } .cab-single-detail { background-color: $dark-card-background; .description { color: $dark-all-font-color; } .overview { h6 { color: $dark-all-font-color; } ul { li { img { filter: invert(1); } } } } .details { h6 { color: $dark-all-font-color; } } } .order-menu-section { .order-section { .order-items { .items+.items { border-color: #f2f9fc1f; } } } } .order-menu { .nav { .nav { .nav-link { &.active { color: $dark-small-font-color; } } } } } .order-menu { .nav { .nav-link.active { background-color: $dark-card-background; } } } .order-menu { .nav { background-color: $dark-body-background; } } .single-section { .description-section { .description-details { .menu-part { &.facility { h6 { img { filter: invert(1); } } } } } } } .single-section { .description-section { .description-details { .menu-part { .list-view { .list-box { .list-content { .facility-icon { .facility-box { img { filter: invert(1); } } } } } } } } } } .single-section { .description-section { .description-details { .menu-part { .accordion-plan { .card { .card-body--modifay { color: $dark-all-font-color; } } } } } } } .single-section { .description-section { .description-details { .menu-part { .list-view { .list-box { background-color: $dark-body-background; } } } } } } .single-section { .description-section { .description-details { .menu-part { .list-view { .list-box { .list-content { p { color: $dark-all-font-color; } h5 { color: $dark-all-font-color; } } } } } } } } .single-section { .description-section { .description-details { .menu-part { &.review { .review-box { h6 { color: $dark-all-font-color; } } } } } } } .single-section { .description-section { .description-details { .menu-part { &.review { .review-box+.review-box { border-top: 1px solid #f2f9fc1f; } } } } } } .single-section { .description-section { .description-details { .menu-part { &.review { .review-box { p { color: $dark-all-font-color; } } } } } } } .review-users:not(:last-of-type) { border-bottom: 1px solid #f2f9fc1f !important; } .hotel_title_section { .hotel-name { .left-part { p { color: $dark-all-font-color; } } } } .single-section { .description-section { .description-details { .menu-part { .facility { h6 { color: $dark-all-font-color; } } } } } } .single-section { .description-section { .description-details { .menu-part { .accordion-plan { .card { .card-body { .highlight { li { img { filter: invert(1); } } } } } } } } } } .single-section { .description-section { .description-details { .menu-part { &.facility { ul { li { i { color: $dark-all-font-color; } } } h6 { color: $dark-all-font-color; } } } } } } .single-section { .description-section { .description-details { .menu-part { &.policy { p { color: $dark-all-font-color; } } } } } } .single-section { .description-section { .description-details { .menu-part { &.about { p { color: $dark-all-font-color; } } } } } } .rdrCalendarWrapper { background-color: #0c161ff5; .rdrDateDisplayItem { background-color: rgb(28 33 40); border-color: #1d3436; input { color: rgba(255, 255, 255, 0.6); } &.rdrDateDisplayItemActive { border-color: var(--theme-color); } } .rdrNextPrevButton { background-color: #1c2128; i { border-color: transparent rgba(255, 255, 255, 0.6) transparent transparent; } } .rdrNextButton { i { border-color: transparent transparent transparent rgba(255, 255, 255, 0.6); } } select { background-color: #1c2128 !important; color: rgb(255 255 255 / 60%); } span { color: rgb(255 255 255 / 60%); } .rdrDayPassive { .rdrDayNumber { span { color: rgba(255, 255, 255, 0.3); } } } .rdrMonths { @media (max-width:1280px) { flex-wrap: wrap; .rdrMonth { width: 100%; } } @media (max-width:991px) and (min-width:767px) { flex-wrap: nowrap; } @media (max-width:767px) { flex-wrap: wrap; .rdrMonth { width: 100%; } } } } .jodit-react-container{ .jodit-container,.jodit-toolbar__box,.jodit-workplace,.jodit-status-bar{ background-color: $dark-body-background; border-color: $dark-card-border; color: $dark-all-font-color; } .jodit-toolbar-button__trigger{ svg{ stroke: $dark-all-font-color; fill: $dark-all-font-color; } } .jodit-ui-group_separated_true{ &::after{ border-right-color: $dark-card-border; } } .jodit-toolbar-button__button:hover:not([disabled]),.jodit-toolbar-button__trigger:hover:not([disabled]){ background-color: $dark-body-background; } .jodit-toolbar-button_with-trigger_true:hover:not([disabled]){ border-color: $dark-card-border; } .jodit-status-bar{ a{ &.jodit-status-bar-link{ color: $dark-all-font-color; } } .jodit-status-bar__item{ span{ color: $dark-all-font-color; } } .jodit-popup__content{ background-color: $dark-card-background; } } } .jodit-box{ .jodit-popup__content{ background-color: $dark-card-background; } .jodit-toolbar-button__icon{ svg{ stroke: $dark-all-font-color; fill: $dark-all-font-color; } } .jodit-toolbar-button__button:focus-visible:not([disabled]), .jodit-toolbar-button__button:hover:not([disabled]){ background-color: $dark-body-background; } .jodit-tabs { .jodit-tabs__buttons{ background-color: $dark-card-background; .jodit-ui-button[aria-pressed=true]:not([disabled]),.jodit-ui-button[aria-pressed=true]:not([disabled]) .jodit-ui-button__text{ background-color: $dark-body-background; } .jodit-ui-button{ &:hover:not([disabled]){ background-color: $dark-body-background; } } } } span{ color: $dark-all-font-color; } } } &.dark-sidebar { .toggle-sidebar { svg { stroke: var(--theme-color); } } .page-wrapper { .sidebar-main-title { p { color: $dark-all-font-color; } } &.compact-wrapper { .page-body-wrapper { div.sidebar-wrapper { background: linear-gradient(180.02deg, rgba(245, 245, 245, 0.05) 0.02%, rgba(245, 245, 245, 0) 90.86%); animation: none; .sidebar-main { .sidebar-links { li { a { span { color: $dark-all-font-color; } svg { stroke: $dark-all-font-color; } } } .simplebar-wrapper { .simplebar-mask { .simplebar-content-wrapper { .simplebar-content { >li { .sidebar-link { &.active { background-color: rgba($primary-color, 0.2); svg { color: var(--theme-color); stroke: var(--theme-color); } } } .mega-menu-container { .mega-box { .link-section { .submenu-title { h5 { color: $dark-all-font-color; } } .submenu-content { &.opensubmegamenu { li { a { color: $dark-all-font-color; font-weight: 400; } } } } } } &::after { background-color: $light-all-font-color; } } .sidebar-submenu { li { a { color: $dark-all-font-color; } } } } } } } } .sidebar-list { ul.sidebar-submenu { li { a { span { color: $dark-all-font-color; } &.active { color: var(--theme-color); } } } } } } } } .according-menu { i { color: $dark-all-font-color; } } } } &.horizontal-wrapper { .page-body-wrapper { .sidebar-wrapper { background: $dark-card-background; .sidebar-main { background-color: $dark-card-background; .sidebar-links { .simplebar-wrapper { .simplebar-mask { .simplebar-content-wrapper { .simplebar-content { >li { >a { color: $dark-all-font-color; } .sidebar-submenu { background: $dark-card-background; li { a { color: $dark-all-font-color; &.active, &:hover { color: var(--theme-color); } } .nav-sub-childmenu { background: $dark-card-background; } } } .mega-menu-container { background: $dark-card-background; .mega-box { .link-section { .submenu-content { li { a { color: $dark-all-font-color; } } } } } } } } } } } } .left-arrow, .right-arrow { background-color: $dark-card-background; color: $dark-all-font-color; } } } } } &.compact-sidebar { .page-body-wrapper { div { &.sidebar-wrapper { >div { background: $dark-card-background; } .sidebar-main { .sidebar-links { li { .sidebar-title { border-bottom: 1px solid $dark-card-border; } a { span { color: $dark-all-font-color; } svg { stroke: $dark-all-font-color; } } .sidebar-submenu, .mega-menu-container { background-color: $dark-card-background; li { a { border-bottom: 1px solid $dark-card-border; } } } } .simplebar-wrapper { .simplebar-mask { .simplebar-content-wrapper { .simplebar-content { >li { .sidebar-link { &.active { background-color: rgba($primary-color, 0.2); span { color: var(--theme-color); } svg { color: var(--theme-color); stroke: var(--theme-color); } } } .mega-menu-container { .mega-box { .link-section { .submenu-title { h5 { color: $dark-all-font-color; } } .submenu-content { &.opensubmegamenu { li { a { color: $dark-all-font-color; font-weight: 400; } } } } } } &::after { background-color: $light-all-font-color; } } .sidebar-submenu { li { a { color: $dark-all-font-color; } } } } } } } } .sidebar-list { ul.sidebar-submenu { li { a { span { color: $dark-all-font-color; } &.active { color: var(--theme-color); } } } } } } } } } .according-menu { i { color: $dark-all-font-color; } } } } } } .for-dark { display: none; } .main-dark { display: none; } &[class*="dark-"] { .for-dark { display: block; } .for-light { display: none; } .main-dark { display: block; } .main-white { display: none; } } }