Albasheer-Org/booking
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
booking/assets/scss/theme/_custom-theme-options.scss
mohanad albasheer 7ea58fc132 fix assets
2025-03-24 22:58:00 +03:00

5761 lines
118 KiB
SCSS
Raw Blame History

/**=====================
55. theme layout CSS Start
==========================**/
//Sidebar color scss
$color1 : #405365;
$color2 : #1C1D1E;
$color3 : #0c0c3c;
$color4 : #0747a6;
$color5 : #4d3096;
@each $bg-name, $bg-color in (color1, $color1),
(color2, $color2) ,
(color3, $color3),
(color4, $color4),
(color5, $color5),
(light, $light-gray),
(dark, #2f3c4e){
.bg-#{$bg-name}{
background-color:$bg-color ;
}
}
$i:1;
@while $i<=6 {
.bg-pattern#{$i}{
background-image: url(../images/sidebar-pattern/#{$i}.png);
background-color: #2f3c4e;
}
.bg-img#{$i}{
background-image: url(../images/sidebar-image/#{$i}.jpg);
}
$i:$i+1;
}
//Sidebar settings
.page-wrapper.horizontal-wrapper {
.page-body-wrapper {
.page-sidebar{
&[sidebar-layout="border-sidebar"] {
.sidebar-header {
border-bottom: 1px solid rgba(124, 124, 124, 0.15);
transition: all 0.3s ease;
}
}
&[sidebar-layout="iconcolor-sidebar"]{
.sidebar-menu{
li{
$colors: $success-color, $secondary-color, $primary-color, $danger-color, $light-font, $warning-color, $light-gray;
$repeat: 100 ;
@for $i from 1 through $repeat {
&:nth-child(#{length($colors)}n+#{$i}) {
svg{
color: lighten(nth($colors, random(length($colors))), 15%);
}
a{
&:hover{
> span{
color: lighten(nth($colors, random(length($colors))), 15%);
}
}
}
}
}
}
}
&.light-sidebar{
.sidebar-menu{
li{
$colors: $success-color, $secondary-color, $primary-color, $danger-color, $light-font, $warning-color, $dark-color;
$repeat: 100 ;
@for $i from 1 through $repeat {
&:nth-child(#{length($colors)}n+#{$i}) {
svg{
color: darken(nth($colors, random(length($colors))), 15%);
}
a{
&:hover{
span{
color: darken(nth($colors, random(length($colors))), 15%);
}
}
}
}
}
}
}
}
}
.sidebar-header {
transition: all 0.3s ease;
}
}
&.sidebar-icon {
.page-sidebar {
&.light-sidebar {
.sidebar-menu {
li {
&:hover {
.single-header {
background-color: $light-gray !important;
}
.sidebar-submenu {
background-color: $light-gray !important;
}
}
a:hover + ul {
background-color: $light-gray !important;
}
ul {
li{
&:hover {
.sidebar-submenu {
background-color: $light-gray !important;
}
}
}
}
}
}
}
&.color1-sidebar {
.sidebar-menu {
li {
&:hover {
.single-header {
background-color: $color1 !important;
}
.sidebar-submenu {
background-color: $color1 !important;
}
}
a:hover + ul {
background-color: $color1 !important;
}
ul {
li{
&:hover {
.sidebar-submenu {
background-color: $color1 !important;
}
}
}
}
}
}
}
&.color2-sidebar {
.sidebar-menu {
li {
&:hover {
.single-header {
background-color: $color2 !important;
}
.sidebar-submenu {
background-color: $color2 !important;
}
}
a:hover + ul {
background-color: $color2 !important;
}
ul {
li{
&:hover {
.sidebar-submenu {
background-color: $color2 !important;
}
}
}
}
}
}
}
&.color3-sidebar {
.sidebar-menu {
li {
&:hover {
.single-header {
background-color: $color3 !important;
}
.sidebar-submenu {
background-color: $color3 !important;
}
}
a:hover + ul {
background-color: $color3 !important;
}
ul {
li{
&:hover {
.sidebar-submenu {
background-color: $color3 !important;
}
}
}
}
}
}
}
&.color4-sidebar {
.sidebar-menu {
li {
&:hover {
.single-header {
background-color: $color4 !important;
}
.sidebar-submenu {
background-color: $color4 !important;
}
}
a:hover + ul {
background-color: $color4 !important;
}
ul {
li{
&:hover {
.sidebar-submenu {
background-color: $color4 !important;
}
}
}
}
}
}
}
&.color5-sidebar {
.sidebar-menu {
li {
&:hover {
.single-header {
background-color: $color5 !important;
}
.sidebar-submenu {
background-color: $color5 !important;
}
}
a:hover + ul {
background-color: $color5 !important;
}
ul {
li{
&:hover {
.sidebar-submenu {
background-color: $color5 !important;
}
}
}
}
}
}
}
}
}
}
}
//Dark layout
body {
&.light-only{
.page-wrapper.horizontal-wrapper{
.page-body-wrapper{
.page-body {
background-color: $light;
ul.the-icons {
li {
color: $black;
display: inline-block;
padding: 10px;
&:hover {
background: $black;
box-shadow: 0 0 3px $dark-card-background;
color: $white;
}
em{
display: none;
}
}
}
}
}
}
}
&.dark-only {
color: $dark-all-font-color;
background-color: $dark-body-background;
// display:none;
.blog-box {
h6 {
color: $white;
}
.blog-details-second {
.detail-footer {
border-top: 1px solid $dark-body-background;
ul.sociyal-list li:nth-child(n+2) {
border-left: 1px solid $dark-body-background;
}
}
}
}
a.cke_button{
filter: brightness(0) invert(1);
}
.cke_combo_text{
color: $white;
}
.job-search .job-description {
border-top: 1px solid $dark-body-background;
}
.job-sidebar{
.job-left-aside{
background-color: $dark-card-background;
border-color:$dark-card-border
}
}
.job-search .job-description .theme-form{
border-bottom: 1px solid $dark-body-background;
}
.categories ul li:hover {
background-color: $dark-body-background;
}
.blog-list .blog-details h6 {
color: $white;
}
.default-according{
.card-header{
background-color: $dark-card-background !important;
}
}
.login-form {
background-color: $dark-body-background;
.login-social-title h5 {
background-color: $dark-body-background;
}
}
.calendar-basic{
.tui-full-calendar-month-dayname{
span {
color: $white !important;
}
}
}
.tui-full-calendar-weekday-schedule.tui-full-calendar-weekday-schedule-time .tui-full-calendar-weekday-schedule-title,
.tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-date{
color: rgba($white, 0.8) !important;
}
.tui-full-calendar-dropdown-menu-item .tui-full-calendar-content {
color: $black;
}
.tui-full-calendar-weekday-border{
border-top: 1px solid $dark-small-font-color !important;
}
.tui-full-calendar-month-dayname {
border-top-color: $dark-small-font-color !important;
}
.tui-full-calendar-layout{
background-color: $dark-body-background !important;
}
.calendar-basic #menu-navi {
border-bottom: 1px solid $dark-body-background;
}
.social-app-profile .card .socialprofile span .badge {
background-color: $dark-body-background;
color: $white;
}
.social-list .media .media-body span {
color: inherit;
}
.edit-profile .profile-title {
border-bottom: 1px solid $dark-body-background;
}
.search-list{
.nav-item{
.nav-link {
color: $white;
opacity: 1;
&.active{
text-shadow: 0px 0px $white;
}
}
}
}
.datepicker--pointer {
background: $dark-card-background;
border-top: 1px solid $dark-body-background;
border-right: 1px solid $dark-body-background;
}
.form-label {
color: inherit;
}
// theme-color
.txt-success{
color: $dark-all-font-color !important;
}
.project-box .details div{
opacity: 1;
}
.project-box {
p{
color: $dark-all-font-color;
}
}
.checkout label {
color: inherit;
}
.prooduct-details-box .product-name h6{
color: $dark-all-font-color;
}
.product-box .product-img .product-hover ul li a {
color: $white;
}
.border-tab.nav-left .nav-link {
color: $white;
}
.order-history table .qty-box{
background-color: $dark-card-background;
}
.product-box {
background-color: $dark-card-background;
.product-details h4 {
color: $light-semi-gray;
}
}
.flot-chart-placeholder .legend table{
color: $white !important;
}
.compact-wrapper tbody{
background-color: $dark-body-background;
}
// Index page start
.dashboard-default-sec,.dashboard-2-main {
.card {
.card-header {
p{
color: $dark-all-font-color;
}
ul.week-date {
li{
color: $dark-all-font-color;
&:nth-child(n+2){
border-color: $dark-card-border;
}
}
}
}
&.income-card {
.card-body {
.knob-block {
input {
color: $dark-all-font-color !important;
}
}
}
}
}
.latest-update-sec{
table{
tbody{
tr{
td{
img{
filter: brightness(0) invert(1);
}
}
}
}
}
}
span,p,h5,h4,h5,h6,th,h3,a{
color: $dark-all-font-color;
}
.recent-order-sec{
table{
tr{
td{
p{
color: $dark-all-font-color;
}
}
}
}
}
}
.setting-list{
background-color:$dark-card-background;
}
.latest-update-sec {
.media {
img,svg{
fill: $dark-small-font-color;
}
}
}
.dashboard-default-sec {
.card {
.card-header {
ul.week-date {
li:nth-child(n+2){
border-color: $dark-card-border;
}
}
}
}
}
.top-dealer-sec {
.card {
.top-dealerbox{
&:hover{
background-color: $dark-body-background;
}
}
}
}
// dashboard-2 dark css start
.activity-sec{
.activity-timeline{
.media{
.activity-line{
background-color: #374558;
}
.media-body {
p{
color:$dark-all-font-color;
}
}
}
&.update-line {
.media {
.media-body {
.tomorrow-sec {
p{
color:$dark-all-font-color;
background-color: $dark-card-background;
}
&:before{
background-color: $dark-card-border;
}
}
}
}
}
}
}
.activity-dot-primary{
background-color: $dark-card-background;
}
//user profile
.user-profile {
.profile-header {
.userpro-box{
background-color: $dark-card-background;
h4{
color:$dark-all-font-color;
}
.icon-wrapper{
background-color: $dark-body-background;
}
}
}
.follow {
.follow-num{
color:$dark-all-font-color;
}
ul.follow-list{
border-color:$dark-card-border;
li{
&:nth-child(n+2){
border-color: $dark-card-border
}
}
}
}
.post-about {
ul {
li {
h5{
color: $dark-all-font-color;
}
}
}
}
.profile-post{
.post-header{
.media{
h5{
color: $dark-all-font-color;
}
}
}
.post-body {
.post-react {
h6{
color: $dark-all-font-color;
}
p{
color: $dark-small-font-color
}
}
}
}
}
.social-tab {
.input-group {
.form-control{
border-color:$dark-card-border
}
}
}
// widget //
.cal-date-widget {
.datepicker{
background-color:$dark-card-border;
border:none;
.datepicker--cell-day{
color: $white;
}
}
}
.datepicker--day-name{
color: $primary-color;
}
.product-social {
li {
a{
border-color: $dark-card-border;
}
}
}
.page-wrapper,.compact-wrapper {
.page-body-wrapper {
.page-body {
.widget-joins{
&:before,&:after{
background-color: $dark-card-border !important;
}
}
}
}
&.compact-wrapper {
.page-body-wrapper{
header{
&.main-nav {
.sidebar-main-title {
> div{
border-color: $dark-card-border;
p{
color:$dark-all-font-color;
}
}
}
.main-navbar {
.nav-menu {
> li {
.nav-link {
svg{
color: $dark-all-font-color !important;
}
}
}
}
}
}
}
}
}
.product-page-main{
thead,tbody, tfoot,tr, td, th{
border-color: transparent;
background-color: transparent;
}
p{
color: $dark-small-font-color;
}
}
thead,tbody, tfoot,tr, td, th{
border-color: $dark-card-border;
}
}
.testimonial{
i{
color:$primary-color !important;
}
}
.blockquote{
border-color: $dark-card-border;
}
.datepicker,.daterangepicker{
background-color:$dark-card-background;
border-color: $dark-card-border;
}
.daterangepicker{
&:after{
border-bottom-color:$dark-card-border;
}
.input-mini{
&.active{
border:1px solid $dark-border-color;
}
}
}
.daterangepicker {
.calendar-table{
background-color:$dark-card-background;
border:none;
}
}
.daterangepicker.dropdown-menu{
background-color:$dark-card-background;
}
.datepicker--nav{
border-color:$dark-card-border;
}
.datepicker--cell-day{
color:$dark-all-font-color
}
.datepicker--cell-day,.datepicker--cell-year{
&.-other-month-,.-other-decade-{
color: $dark-small-font-color;
}
}
.date-range-picker {
.daterange-card{
border-color:$dark-card-border;
}
}
.daterangepicker {
td{
&.off,&.in-range,&.start-date,&.end-date{
background-color:$dark-body-background;
color: $dark-all-font-color;
}
}
.input-mini{
border-color:$dark-card-border !important;
background-color: $dark-card-background;
}
&.ltr {
.calendar-time {
select{
background-color:$dark-card-background;
border-color: $dark-card-border;
}
}
}
}
.ranges {
li{
background-color: $dark-card-background;
border-color: $dark-card-border;
}
}
.f1 {
.f1-steps {
.f1-progress{
background-color: $dark-border-color;
}
.f1-step {
.f1-step-icon{
background-color:$dark-body-background;
}
&.active {
.f1-step-icon{
background-color:$primary-color;
}
}
}
}
}
//card //
.b-b-info{
border-color:$dark-card-border !important;
}
// sidebar
.main-navbar {
ul.nav-pills{
border-color:$dark-card-border;
.nav-item{
&:last-child{
border-color:$dark-card-border;
}
.nav-link{
color:$dark-all-font-color;
}
}
}
}
.messanger-chat{
.chat{
.message-main{
p{
color: $dark-card-border;
}
}
}
}
// project list
.project-list {
.border-tab{
border:none !important;
&.nav-tabs {
.nav-item {
.nav-link{
border:none;
}
}
}
}
}
.project-box{
background-color: $dark-body-background;
border-color: $dark-card-border
}
.file-content {
.form-control-plaintext{
color:$dark-all-font-color;
&:focus{
color:$dark-all-font-color;
}
}
.form-inline{
border-color: $dark-card-border;
}
.files {
.file-box{
border-color: $dark-card-border;
.file-top{
background-color: $dark-body-background;
border-color:$dark-border-color;
}
}
}
.folder {
.folder-box{
border-color:$dark-card-border;
}
}
}
.file-manager{
> h6{
color: $dark-all-font-color;
}
}
.file-sidebar {
.pricing-plan{
border-color:$dark-card-border;
h6{
color: $dark-all-font-color;
}
p{
color: $dark-small-font-color;
}
}
}
// kanban board//
.kanban-board{
background-color: $dark-body-background ;
}
.kanban-item {
.kanban-box{
border-color:$dark-card-border;
background-color: $dark-body-background;
}
}
.kanban-container {
footer{
border:none !important;
}
}
//dashboard-04 end
.apexcharts-gridline {
stroke: $dark-card-border;
}
.apexcharts-tooltip-title, .apexcharts-tooltip-series-group, .apexcharts-tooltip.light, .apexcharts-menu-item {
background-color: $dark-body-background !important;
}
.activity-sec .activity-timeline.update-line .media .media-body h5{
color: rgba($white, 0.8);
}
.page-main-header{
.main-header-right{
box-shadow: 0 0 18px 3px $dark-card-background;
.nav-right{
&.right-menu{
ul{
li{
&:nth-child(2){
border-left: 1px solid $dark-body-background;
border-right: 1px solid $dark-body-background;
}
}
}
}
.bookmark-dropdown{
ul{
li{
&:hover{
background-color: $dark-body-background;
}
}
}
}
}
.main-header-left{
border-right: 1px solid $dark-card-border;
border-color: $dark-card-border;
.logo-wrapper{
display:none;
}
.dark-logo-wrapper{
display: block;
}
}
.left-menu-header {
ul {
li {
.search-form {
input{
&::placeholder{
color:$dark-all-font-color;
}
}
}
}
}
}
}
}
.page-wrapper {
.page-body-wrapper{
background-color: $dark-card-background
}
&.horizontal-wrapper {
.page-body-wrapper{
&.horizontal-menu {
header{
&.main-nav {
background-color: $dark-card-background;
border-color:$dark-card-border ;
.main-navbar {
.nav-menu{
>li{
+li{
border-color: $dark-card-border;
}
>a{
color: $dark-all-font-color;
}
}
}
.left-arrow, .right-arrow{
background-color: $dark-card-background;
border-color: $dark-card-border
}
}
}
}
}
}
}
}
.page-wrapper.horizontal-wrapper {
.page-body-wrapper {
.sidebar {
box-shadow: 0 0 11px $dark-card-background;
}
}
$alert-name:primary,
secondary,
success,
danger,
warning,
info,
light,
dark;
$alert-color :$primary-color,
$secondary-color,
$success-color,
$danger-color,
$warning-color,
$light-font,
$light-gray,
$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;
}
}
.default-according {
.card {
.card-body {
border: 1px solid $dark-card-border;
}
}
}
.options {
> div {
border: 1px solid $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-card-border;
}
}
}
}
}
.search-form{
input{
border: 1px solid $dark-card-border;
background-color: $dark-body-background
}
}
.form-control{
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
}
.input-group-text{
color:$dark-all-font-color;
}
.input-group-text{
border: 1px solid $dark-card-border;
background-color:$dark-card-background;
}
.status-circle{
border: 2px solid $dark-card-border;
}
.browse {
.browse-articles {
h6 {
border-bottom: 1px solid $dark-card-border;
}
}
}
.job-search {
.job-description {
.theme-form {
.row {
div[class^="col-"] {
.input-group {
.datepicker-here {
border: 1px solid $dark-card-border;
}
}
}
}
}
}
}
.calendar-wrap {
.fc-unthemed {
td, th {
border-color: $dark-card-border;
}
}
}
.mega-inline, .mega-horizontal {
.card {
border: 1px solid $dark-card-border;
}
}
.setting-dot{
.setting-bg{
background-color: $secondary-color;
}
}
.bookmark.pull-right {
border: none;
}
.card{
.card-header{
h5{
background: unset;
-webkit-text-fill-color: $white;
}
}
}
.timeline-circle{
.media{
.timeline-background{
.timeline-dot-success{
background: $dark-body-background;
}
.timeline-dot-primary{
background: $dark-body-background;
}
.timeline-dot-warning{
background: $dark-body-background;
}
.timeline-dot-secondary{
background: $dark-body-background;
}
.timeline-dot-info{
background: $dark-body-background;
}
}
p,span{
color:$dark-all-font-color;
}
}
}
.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-card-border !important;
}
.contact-form {
.theme-form{
border-color: $dark-card-border !important ;
}
}
.bookmark {
ul {
li {
border: 1px solid $dark-card-border;
background-color: $dark-card-background;
.search-form {
.form-control-search {
input {
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
color: $dark-all-font-color;
}
&:before {
background: $dark-card-border;
}
}
}
}
}
}
.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-card-border;
padding: 40px;
.animate-chk {
.radio_animated {
&:after {
border: 2px solid $dark-card-background;
}
}
}
}
}
.order-box {
.title-box{
color: #bfc2c6;
border-bottom: 1px solid $dark-card-border;
}
.qty {
li{
color: #bfc2c6;
span{
color: #bfc2c6;
}
}
border-bottom: 1px solid $dark-card-border;
}
.sub-total {
li{
color: #bfc2c6;
}
.shipping-class{
border-color: $dark-card-border;
}
}
.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-card-border;
}
}
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(41, 50, 64, 0.52);
}
.product-box {
.product-img {
.product-hover {
ul {
li {
.btn {
color: $dark-small-font-color;
}
&:hover {
.btn {
color: $white;
}
}
}
}
}
}
}
.radio_animated, .checkbox_animated{
&:after {
background: $dark-body-background;
border: 2px solid $dark-body-background;
}
}
.slider-product {
border-top: 1px solid $dark-card-border;
border-bottom: 1px solid $dark-card-border;
}
.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-card-border;
}
&:last-child{
td{
border-bottom: none;
}
}
}
}
}
}
.pricing-card-design-2{
.pricing-block{
.pricing-inner{
ul {
li {
border-bottom: 1px solid $dark-card-border;
}
}
}
}
}
.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{
&.compact-wrapper{
.page-body-wrapper{
header{
&.main-nav{
background-color:$dark-card-background;
border-right:1px solid $dark-card-border;
border-color:$dark-card-border;
.nav-menu{
> li{
> a{
color: $dark-all-font-color;
}
}
.dropdown {
ul.nav-submenu {
li {
&:hover{
a{
color: $white !important;
}
}
a {
color: rgba($white, 0.8) !important;
&.active {
color: $white !important;
text-shadow: 0px 0px $white;
}
}
}
}
}
}
.sidebar-user{
border-color:$dark-card-border;
ul{
li{
+li{
&:before{
background-color: $dark-card-border;
}
}
}
}
p{
color: $dark-all-font-color;
}
}
.main-navbar{
.nav-menu{
>li{
.mega-menu-container {
.mega-box{
.link-section{
.submenu-title{
h5{
color:$dark-all-font-color;
}
}
.submenu-content{
&.opensubmegamenu{
ul{
li{
a{
color: $dark-all-font-color;
}
}
}
}
}
}
}
}
}
}
}
}
}
.according-menu{
i{
color: $dark-all-font-color;
}
}
}
.page-main-header{
border-bottom: 1px solid $dark-card-border;
}
}
&.compact-sidebar{
&.compact-wrapper {
.page-body-wrapper {
header{
&.main-nav {
.main-navbar {
.nav-menu {
.dropdown {
.menu-title{
&.active {
~ .menu-content{
background-color:$dark-card-background;
}
}
}
}
}
}
}
}
}
}
}
}
.btn-primary-light{
color: $dark-all-font-color;
}
// popover //
.popover{
border-color:$dark-card-border;
}
.popover-header{
background-color:$dark-card-background;
border-color:$dark-card-border;
}
.popover-body{
background-color:$dark-card-background;
color:$dark-all-font-color;
}
.bs-popover-end,.bs-popover-auto[data-popper-placement^="right"] {
> .popover-arrow{
&:after{
border-right-color:$dark-body-background;
}
}
}
.bs-popover-bottom,.bs-popover-auto[data-popper-placement^="bottom"] {
> .popover-arrow{
&:after{
border-right-color:$dark-body-background;
}
}
}
.bs-popover-top,.bs-popover-auto[data-popper-placement^="top"] {
> .popover-arrow{
&:after{
border-top-color:$dark-body-background;
}
}
}
.bs-popover-start,.bs-popover-auto[data-popper-placement^="left"] {
> .popover-arrow{
&:after{
border-left-color:$dark-body-background;
}
}
}
// according
.default-according {
.card {
.card-header{
border-color:$dark-card-border;
}
}
}
.border-tab{
&.nav-tabs {
.nav-item {
.nav-link{
border-bottom:2px solid $dark-card-border;
&.active,&.show,&:focus{
border-color: $primary-color;
}
}
}
}
&.nav-left{
&.nav-success {
.nav-link{
&.active{
border-left: $light-font;
}
}
.show {
> .nav-link{
border-left: $light-font;
}
}
}
}
&.nav-success {
.nav-item {
.nav-link{
&.active,&.show,&:focus,&:hover{
color: $dark-all-font-color !important;
}
}
}
}
}
// form //
.form-control, .form-select{
background-color: $dark-card-border;
border-color: $dark-card-border;
color:$dark-all-font-color;
}
.was-validated,.form-check-input {
.form-check-input{
&:invalid{
background-color:$dark-card-background;
}
}
.is-invalid{
background-color:$dark-card-background;
}
}
// step //
.u-pearl{
&.error {
.u-pearl-icon,.u-pearl-number{
background-color:$dark-card-background;
}
}
}
// img croper //
.docs-data{
.input-group-text{
color:$light-gray;
}
}
.options {
> div{
border-color:$dark-card-border;
}
}
// table //
.progress{
background-color:$dark-border-color;
}
// datatable //
.dataTables_wrapper {
table.dataTable {
tbody {
td,th{
background-color:$dark-card-background;
border-color: $dark-card-border;
}
}
}
&.no-footer {
.dataTables_scrollBody{
border-color:$dark-card-border;
}
}
}
.cd-timeline-content{
background-color:$dark-card-background;
}
// calender //
.calendar-wrap {
.fc-toolbar {
.fc-left,.fc-right {
.fc-prev-button,.fc-next-button {
.fc-icon-left-single-arrow,.fc-icon-right-single-arrow{
&:after{
color:$dark-all-font-color;
}
}
}
}
}
}
// pagintaion //
.pagination-primary {
.page-item {
.page-link{
background-color: $dark-card-background;
border-color: $dark-border-color;
color: $dark-all-font-color !important;
}
}
}
// support ticket //
.support-ticket {
.pro-gress {
ul {
li{
color: $dark-small-font-color;
}
}
}
}
//bookmark//
.bookmark-tabcontent {
.tab-content {
.card {
.card-header{
border-color:$dark-card-border;
}
}
}
}
.bookmark-wrap {
.left-bookmark {
ul {
li {
a > {
.title{
color: $dark-all-font-color;
}
}
button{
&.badge-light{
background-color: rgba($primary-color,0.2);
color: $primary-color;
}
}
}
}
}
}
// chat
.chat-box {
.chat-right-aside {
.chat {
.chat-msg-box {
.other-message{
background-color: $dark-card-background;
border-color: $dark-card-border;
}
}
}
}
.chat-menu{
background-color: $dark-card-background;
border-color: $dark-card-border;
.user-profile {
.follow{
border-color: $dark-card-border;
.follow-num{
color:$dark-all-font-color;
}
}
.image{
.icon-wrapper{
background-color:$dark-body-background;
box-shadow:none;
}
}
.digits{
border-color: $dark-border-color ;
}
}
}
}
.social-status {
form {
.form-group {
.form-control-social{
background-color: $dark-card-background;
border-color: $dark-card-border;
}
}
}
}
// search page //
.search-page {
.search-form {
.form-group {
.input-group-text{
background-color: $dark-body-background;
}
}
}
}
// ecommerce //
.product-wrapper{
&.sidebaron {
.product-sidebar {
.filter-section {
.card {
.filter-cards-view{
background-color: $dark-card-background;
border: none;
}
.left-filter{
border: none;
}
}
}
}
}
}
.product-page-main {
.pro-group{
&:nth-child(n+2){
border-color: $dark-card-border;
}
}
}
.prooduct-details-box {
.media{
border-color:$dark-card-border;
}
}
.invoice {
.invo-header{
border-color:$dark-card-border;
}
}
.order-history {
table {
.qty-box {
.input-group{
border-color: $dark-card-border;
}
}
}
}
@media only screen and (max-width: 1199px){
.sm{
background-color: $dark-card-background;
border: 1px solid $dark-card-border;
}
.pixelstrap{
.mobile-back{
border-bottom: 1px solid $dark-card-border;
}
ul{
li{
border-top: 1px solid $dark-card-border;
}
a{
background: $dark-card-background;
&:hover,
&:focus,
&:active{
background: $dark-card-background;
}
}
}
}
.chat-menu {
border-top: 1px solid $dark-card-border;
background-color: $dark-card-background;
}
.error-wrapper{
.maintenance-icons{
li{
i{
color: $dark-color;
}
}
}
}
.widget-joins {
.border-after-xs{
&:after{
background-color: $dark-card-border;
}
}
}
}
@media only screen and (max-width: 991px){
.page-wrapper{
.page-main-header{
.main-header-right{
.nav-right{
>ul{
border-top: 1px solid $dark-card-border;
}
}
}
}
}
}
.page-wrapper.horizontal-wrapper,.compact-wrapper {
/* Main Header start */
.page-main-header {
background-color: $dark-body-background;
.main-header-right {
background-color: $dark-card-background;
box-shadow: 0 0 18px 3px rgba(42, 50, 61, 1);
li {
i {
color: $light-gray;
}
}
.nav-right {
> ul{
&.click-menu{
> li{
ul{
&.submenu{
background-color: $dark-card-background;
box-shadow: none;
li{
a{
color: $white;
}
}
}
}
}
}
> li{
// border: 1px solid $dark-card-border;
&:before{
background-color: $dark-body-background;
}
svg{
stroke: $white;
}
&:last-child{
border: none;
}
&:first-child{
border: none;
}
}
}
// ul {
// li {
// .mode {
// .mode-sun{
// background-color: $dark-card-background
// }
// }
// }
// }
.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 2px 2px $dark-card-background;
border-color: $dark-card-border;
p{
color: $white !important;
}
&:before {
border-bottom: 7px solid $dark-body-background;
}
&:after {
border-bottom: 7px solid $dark-body-background;
}
}
.notification-dropdown.onhover-show-div {
li {
border-bottom: 1px solid $dark-card-border;
span {
color: $dark-small-font-color;
}
&:hover{
background-color: #282e38;
}
}
.bg-light {
background-color: #282e38 !important;
color: $dark-all-font-color !important;
}
}
.language-dropdown {
li {
a {
color: $dark-all-font-color;
}
}
}
}
}
.profile-dropdown {
li {
a {
color: $dark-all-font-color;
svg{
path, line, circle{
color: $dark-all-font-color !important;
}
}
&:hover{
color: $primary-color;
svg{
line, path, circle{
color: $primary-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-bottom: 1px solid $dark-card-border;
span {
color: $dark-small-font-color;
}
}
}
.language-dropdown {
li {
a {
color: $dark-all-font-color;
}
}
}
}
}
.chat-dropdown,.notification-dropdown{
li{
color: $white;
+li{
border-top: 1px solid $dark-card-border;
}
}
}
}
.mega-menu-header{
.vertical-menu-main{
.main-nav{
.main-menu{
li{
background-color: $dark-card-background;
}
}
}
}
}
.left-menu-header {
ul {
li {
.search-form {
input{
color: $dark-all-font-color;
}
}
}
}
}
}
.main-header-left {
background-color: $dark-card-background;
.logo-wrapper {
a {
.image-dark {
display: none;
}
.image-light{
display: block;
}
}
}
}
@media only screen and (max-width: 991px){
.main-header-right{
.nav-right {
> ul{
background-color: $dark-card-background;
box-shadow: 0 2px 2px 2px $dark-card-border;
}
}
}
}
}
/* 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;
}
&: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-card-border;
&: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-card-border;
}
}
}
.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;
}
}
.profile-details {
h4{
color: $dark-all-font-color;
}
}
}
.page-header {
.row {
h3 {
small {
color: $dark-small-font-color;
}
}
}
.breadcrumb{
li{
color: $dark-all-font-color;
}
}
.breadcrumb-item {
a{
color: $dark-all-font-color;
}
&.active {
color: $dark-small-font-color;
}
}
}
.page-body {
background-color: $dark-body-background;
.card {
background-color: $dark-card-background;
box-shadow: 1px 1px 2px 1px rgba(29, 28, 28, 0.08);
border: 1px solid $dark-card-border;
.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;
}
}
}
.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;
}
.table {
th, td {
color: $dark-all-font-color;
}
thead {
th {
border-bottom: 1px solid $dark-card-border;
border-top: none;
background-color: $dark-card-background;
}
.border-bottom-primary {
th{
border-bottom: 1px solid $primary-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;
}
}
.double, .dotted, .dashed {
border-color: $dark-card-border;
}
tbody {
.border-bottom-primary{
th, td{
border-bottom: 1px solid $primary-color;
}
}
}
}
.table > :not(:last-child) > :last-child > *{
border-color:$dark-card-border;
}
.table[class*='bg-']{
th, td{
color: $white;
}
}
.table-striped {
tbody {
tr {
&:nth-of-type(odd) {
background-color:rgba(0, 0, 0, 0.05);
&:hover {
th, td {
color: $white;
}
}
}
}
}
}
.table-bordered {
td, th {
border-color: $dark-card-border !important;
}
}
.table-inverse{
tbody {
tr{
&:nth-of-type(odd){
&:hover {
td{
color: $dark-all-font-color;
}
}
}
}
}
}
.table-border-vertical {
tr, th, td {
border-right: 1px solid $dark-card-border;
}
}
.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: $dark-body-background;
}
input {
&:checked {
+ .switch-state {
background-color: $primary-color;
}
}
}
}
.bg-white {
background-color: $white !important;
}
.b-l-light {
border-left: 1px solid $dark-card-border !important;
}
.ct-grid {
stroke: $dark-card-border;
}
.ct-label {
color: $dark-small-font-color;
}
hr {
background-color:$dark-card-border;
}
.text-muted {
color: $sidebar-submenu-font-color !important;
}
.calender-widget {
.cal-date {
background-color: $dark-card-background;
border: 1px solid $dark-card-border;
}
}
.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 {
color: $white !important;
border: 1px solid $dark-card-border;
}
.btn-outline-light {
&:hover {
color: $black !important;
}
}
.border-right {
border-right: 1px solid $dark-card-border !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-card-border;
}
}
.img-thumbnail {
background-color: $dark-card-border;
border: 1px solid $dark-card-border;
}
.dataTables_wrapper {
button {
color: $black;
}
.btn-danger, .btn-success {
color: $white;
}
.dataTables_length {
select {
background-color: $dark-body-background;
color: $dark-all-font-color;
border: 1px solid $dark-card-border;
}
}
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_processing,
.dataTables_paginate {
color: $dark-all-font-color;
}
.dataTables_paginate{
border: 1px solid $dark-card-border;
}
.dataTables_filter {
input[type="search"] {
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
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-card-border;
thead {
th, td {
border-bottom: 2px solid $dark-card-border;
}
}
input, select {
background-color: $dark-body-background;
color: $dark-all-font-color;
border: 1px solid $dark-card-border;
}
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) {
background-color: $dark-body-background;
}
}
}
}
.dataTables_paginate {
.paginate_button {
color: $dark-all-font-color !important;
&.current,
&:active{
border-color: $primary-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-card-border;
}
}
}
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-card-border;
border-right: 1px solid $dark-card-border;
&:first-child {
border-left: 1px solid $dark-card-border;
}
}
}
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-card-border;
}
}
}
.page-link {
border: 1px solid $dark-card-border;
}
.page-item.disabled {
.page-link {
background-color: $dark-card-background;
border-color: $dark-card-border;
}
}
.page-link {
color: $dark-all-font-color;
background-color: $dark-card-background;
}
.page-item {
&:hover{
.page-link{
background-color: $dark-body-background;
}
}
}
.page-item.active {
.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-card-border;
}
.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-card-border;
.nav-item {
.nav-link{
color: $dark-all-font-color;
}
}
.nav-link{
&.active,
&:focus,
&:hover{
color: $primary-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-card-border;
&.br-active,
&.br-selected{
background-color: $primary-color;
}
}
}
}
.br-theme-bars-square {
.br-widget{
a{
border: 2px solid $dark-card-border;
background-color: $dark-card-background ;
color: $dark-all-font-color;
&.br-active,
&.br-selected{
border: 2px solid $primary-color;
color: $primary-color;
}
}
}
}
.br-theme-fontawesome-stars, .br-theme-fontawesome-stars-o {
.br-widget{
a{
&:after{
color: $dark-card-border;
}
&.br-selected,
&.br-active{
&:after{
color: $primary-color;
}
}
}
}
}
.scroll-demo{
border: 1px solid $dark-card-border;
}
.search-form{
input{
border: 1px solid $dark-card-border;
color: $dark-all-font-color;
background-color: $dark-body-background;
}
.form-group{
&:before {
background:$dark-card-background;
}
}
}
.cd-timeline-content{
background-color:$dark-card-background;
border-color:$dark-card-border;
&::before{
border-left: 7px solid $dark-card-border;
}
}
.cd-timeline-block{
&:nth-child(even) {
.cd-timeline-content{
&::before {
border-right-color: $dark-card-border;
border-left: transparent;
}
}
}
}
.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-card-border;
}
}
.help-block {
color: $dark-small-font-color;
}
}
#viewhtml {
.render {
background-color: $dark-card-background;
color: $dark-all-font-color;
border-color: $dark-card-border;
}
}
.form-builder-column {
.drag-bx {
border: 1px dotted $dark-card-border;
}
}
.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-card-border;
}
}
p {
color: $dark-small-font-color;
}
}
.jsgrid-grid-header {
background-color: $dark-card-background;
border: 1px solid $dark-card-border;
}
.jsgrid-header-row, .jsgrid-filter-row {
> .jsgrid-header-cell,
> .jsgrid-cell {
background: $dark-card-background;
border: 1px solid $dark-card-border;
input {
background-color: $dark-body-background;
border-color: $dark-card-border;
color: $dark-all-font-color;
}
}
select {
background-color: $dark-body-background;
border-color: $dark-card-border;
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-card-border;
}
.jsgrid-selected-row {
> .jsgrid-cell {
background-color: $dark-datatable-sorting;
}
}
.jsgrid {
.jsgrid-pager {
[class*="jsgrid-pager"] {
border: 1px solid $dark-card-border;
}
.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: $primary-color;
}
}
}
.separator{
// border: 1px solid $dark-card-border;
border-color: $dark-card-border;
}
}
.default-according{
li{
.text-muted{
color: $dark-all-font-color!important;
}
}
}
.navs-icon.default-according.style-1 {
li{
button{
&:hover
{
color: $primary-color!important;
}
}
}
}
.nav-list{
.nav-list-disc{
li{
a{
color: $dark-all-font-color;
}
&:hover{
color: $primary-color;
a{
color: $primary-color;
}
}
}
}
}
.navs-dropdown{
.onhover-show-div{
background-color: $dark-body-background;
box-shadow: 0 0 2px 2px $dark-card-border;
.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: $primary-color !important;
}
}
}
}
}
}
}
}
.onhover-show-div{
border-color:$dark-card-border;
}
.onhover-dropdown{
&:hover {
.onhover-show-div{
&:before{
border-bottom: 7px solid $dark-card-border;
}
}
}
}
.default-according {
.card {
box-shadow: 0 0 1px 1px rgb(55, 66, 82) !important;
border: none !important;
background-color: $dark-card-background !important;
.btn-link {
color:$dark-all-font-color;
border:none;
}
.card-body {
color: $dark-small-font-color;
border: 1px solid $dark-card-border;
}
}
}
.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-card-border;
&:first-child {
border-right: 1px solid $dark-card-border;
}
&:last-child {
border-right: none;
}
}
}
p {
color: $dark-all-font-color;
}
.single-blog-content-top {
border-top: 1px solid $dark-card-border;
p {
color: $dark-small-font-color;
}
}
}
}
.blog-list {
.blog-details {
h6{
border-color:$dark-card-border;
}
}
}
.cke_wysiwyg_frame, .cke_wysiwyg_div{
background-color: $dark-card-background;
}
.add-post {
form {
.form-group {
.form-control{
border-color: $dark-card-border;
}
}
}
.cke_top{
background-color: $dark-card-background;
}
#cke_text-box{
border-color: $dark-card-border;
}
}
.comment-box {
h4{
border-color:$dark-card-border;
}
.media {
h6 {
span {
color: $dark-small-font-color;
}
}
img {
border: 1px solid $dark-card-border;
}
}
p {
color: $dark-small-font-color;
}
.comment-social {
li {
color: $dark-small-font-color;
&:first-child {
border-right: 1px solid $dark-card-border;
}
}
}
hr{
border-top: 1px solid $dark-card-border;
background-color: $dark-card-border;
}
}
.table-hover {
tbody {
tr {
&:hover {
background-color: $dark-body-background;
td, th {
color: $white;
}
}
}
}
}
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-card-border;
}
.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-card-border;
}
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-border;
}
}
}
}
.form-control,select {
background-color: $dark-card-background;
color: $dark-all-font-color;
// border: 1px solid $dark-card-border;
}
.checkbox, .radio {
label {
&::before {
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
color: $dark-all-font-color;
}
}
}
.dropdown-basic {
.dropdown {
.dropdown-content {
background-color: $dark-body-background;
border-color:$dark-card-border;
a {
color: $dark-all-font-color;
&:hover {
background-color: $dark-card-background;
}
}
.dropdown-divider {
border: 1px solid $dark-card-border;
}
}
}
}
.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 {
.cke_top{
border-color: $dark-card-border !important;
}
.cke_chrome{
border-color: $dark-card-border !important;
background-color: $dark-card-background ;
color: $dark-all-font-color;
}
.email-app-sidebar {
.media {
img {
border: 2px solid $dark-card-border;
}
}
.main-menu {
> li {
a {
color: $dark-all-font-color;
&:hover {
background-color: $dark-body-background;
}
}
}
}
}
.email-right-aside {
.email-body {
.inbox {
.media.active {
background-color: $dark-body-background;
}
.media{
&:hover{
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-card-border;
}
p {
color: $dark-small-font-color;
}
.email-content {
.email-top {
.user-emailid:after {
border: 1px solid $dark-card-border;
}
}
}
.email-wrapper {
.emailread-group{
&:nth-child(n+2){
border-color:$dark-card-border;
}
}
}
}
.dropdown-menu {
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
a {
color: $dark-all-font-color;
&: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-card-border;
}
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-card-border;
border: 1px solid $dark-card-border;
}
}
.border-style {
.card {
border: 1px solid $dark-card-border;
}
}
.offer-style {
.card {
border: 1px dashed $dark-card-border;
}
}
.page-builder {
.btn-grid{
background-color: $dark-card-background;
color: $dark-small-font-color !important;
border-right: 1px solid $dark-card-border;
}
.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-card-border;
}
.ge-canvas.ge-editing {
.row{
background-color: $dark-body-background;
}
.column{
border: 1px solid $dark-card-border;
background-color: $dark-card-background;
}
.ge-tools-drawer{
.ge-details{
input{
background-color: $dark-body-background;
border-color: $dark-card-border;
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{
+ .info-block{
border-top: 1px solid $dark-card-border;
}
}
}
.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-card-border;
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-card-border;
}
}
.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-card-border;
.nav-tabs {
border-bottom: 1px solid $dark-card-border;
.nav-item {
.nav-link {
&.active {
color: $dark-all-font-color !important;
}
}
}
}
}
.status {
color: $dark-small-font-color;
p {
color: $dark-all-font-color !important;
}
}
.chat-right-aside {
.chat {
.chat-header {
border-bottom: 1px solid $dark-card-border;
.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-card-border
}
.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-card-border;
.input-group {
.form-control {
background-color: $dark-card-background;
}
}
}
}
}
.chat-history {
.call-icons {
ul {
li {
border: 1px solid $dark-card-border;
a {
color: $dark-small-font-color;
}
}
}
}
}
.bitcoin-chat{
.chat{
.chat-msg-box{
.message{
&.my-message {
background-color: #1c222b;
.chat-user-img {
border: 2px solid $dark-card-border;
}
}
&.other-message {
.chat-user-img {
border: 2px solid $dark-card-border;
}
}
}
}
}
}
}
pre {
background-color: $dark-card-border;
color: $dark-all-font-color;
}
.scorlled {
background-color: $dark-body-background;
}
.input-group-air {
box-shadow: 0 3px 20px 0 $dark-card-border;
}
.input-group-solid {
.input-group-text, .form-control {
background: $dark-body-background;
border: 1px solid $dark-card-border;
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 $dark-card-border;
color: $dark-all-font-color;
&.active {
background-color: $primary-color !important;
border-color: $primary-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-card-border;
}
label {
color: $dark-all-font-color;
}
}
.checkbox {
label {
color: $dark-all-font-color;
&::before {
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
}
}
}
}
}
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-card-border;
color: $dark-all-font-color;
}
}
.checkbox {
label {
&::before {
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
}
}
}
}
}
}
}
.error-wrapper {
.maintenance-icons {
li {
i {
color: $dark-card-border;
}
&:nth-child(3) {
i {
color: $dark-card-border;
}
}
}
}
}
.modal-content {
background-color: $dark-card-background;
border-color: $dark-card-border;
.modal-header {
border-bottom: 1px solid $dark-card-border;
background-color: $dark-card-background;
border-color: $dark-card-border;
.close {
color: $dark-small-font-color;
}
}
.modal-footer {
background-color: $dark-card-background;
border-color: $dark-card-border;
}
}
.btn-close{
filter:invert(1);
}
.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-card-border;
border-bottom: 1px solid $dark-card-border;
.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-card-border;
&:before {
background: $dark-card-border;
color: $dark-all-font-color;
}
}
}
.authentication-main {
background-color: $dark-card-border;
.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-card-border;
}
}
.opt-box {
background-color: $dark-card-border;
}
}
}
.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-card-border;
color: $dark-all-font-color;
}
}
.checkbox {
label {
&::before {
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
}
}
}
}
}
}
}
}
.vertical-menu-main{
background-color: $dark-card-background;
}
.pixelstrap {
a{
color: $dark-all-font-color;
&:focus,
&:active,
&:hover{
color: $dark-all-font-color;
}
}
> {
li {
> a.highlighted{
&:before
{
background-color: $dark-card-background;
}
&:after
{
background-color: $dark-card-border;
}
}
}
}
}
.border-top{
border-top: 1px solid $dark-card-border !important;
}
.table{
td,th{
border-top: 1px solid $dark-card-border;
}
}
.breadcrumb{
background-color: $dark-body-background;
}
.table-bordered{
border: 1px solid $dark-card-border;
}
.table-border-horizontal{
tr,th,td{
border-top: 1px solid $dark-card-border;
}
}
thead, tbody, tfoot, tr, td, th{
border: 1px solid $dark-card-border;
}
.btn-light{
background-color: $dark-body-background !important;
border-color: $dark-card-border !important;
color:$dark-all-font-color;
}
.profile-greeting{
.btn-light{
background-color: $light-gray !important;
border-color:$light-gray !important;
color: $primary-color !important;
}
}
.note-editor{
&.note-frame{
.note-statusbar{
background-color: $dark-body-background;
border-top: 1px solid $dark-card-border;
}
.note-status-output{
border-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;
}
}
}
}
}
}
}
.blog-box{
&.blog-shadow{
.blog-details{
h4{
color: $dark-all-font-color;
}
}
}
}
@media screen and (max-width: 1366px){
.earning-card{
.card-body{
>.row{
.border-right{
border-bottom: 1px solid $dark-card-border !important;
}
}
}
}
.chart_data_left,.chart_data_right{
.card-body{
.chart-main{
.media{
border-right: 1px solid $dark-card-border;
}
}
}
}
}
@media (min-width: 1200px){
.pixelstrap{
ul {
background: $dark-body-background;
border: 1px solid $dark-card-border;
a{
&:hover,
&:focus,
&:active,
&.highlighted{
color: $primary-color;
}
&.current{
background-color: $dark-body-background;
color: $primary-color;
}
}
}
}
}
.mega-menu {
.title{
color: $dark-all-font-color;
border-bottom: 1px solid $dark-card-border;
}
.galleria-list{
.galleria{
> div {
.username{
color: $dark-all-font-color;
small{
color: $dark-small-font-color;
}
}
}
}
}
.list-unstyled{
div{
a{
&:hover{
color: $primary-color;
}
}
}
}
}
.default-according {
.card {
background-color: $dark-card-background;
.btn-link{
background-color: $dark-card-background;
border: 1px solid $dark-card-border;
color: $white;
}
.text-muted{
color: $dark-small-font-color !important;
}
}
.bg-primary{
.btn-link{
background-color: $primary-color;
border: 1px solid $primary-color;
}
}
.bg-secondary{
.btn-link{
background-color: $secondary-color;
border: 1px solid $secondary-color;
}
}
}
.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-card-border;
}
}
}
.total-time{
h2{
color: $dark-all-font-color;
}
}
}
}
.caller-img{
img{
opacity: 0.7;
}
}
.chat-box {
.chat-history {
.call-content {
>div{
background-color: $dark-card-background;
background-blend-mode: overlay;
}
}
}
}
}
.pixelstrap{
ul{
background: $dark-card-background;
}
}
@media only screen and (max-width: 575px){
.widget-joins {
.border-after-xs {
&:after {
background-color: $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-card-border;
border: 1px dotted $dark-card-border;
input {
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
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-card-border;
}
p {
color: $dark-small-font-color;
}
select {
background-color: $dark-body-background;
color: $dark-all-font-color;
border: 1px solid $dark-card-border;
}
.radio, .checkbox {
label {
&::before {
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
}
}
}
}
.select2-container--default{
.select2-selection--multiple, .select2-selection--single{
background-color: $dark-body-background;
border: 1px solid $dark-card-border !important;
}
.select2-search--inline{
.select2-search__field{
color: $dark-all-font-color;
}
}
.select2-selection--single{
.select2-selection__rendered{
color: $dark-all-font-color;
}
}
.select2-search--dropdown {
.select2-search__field{
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
color: $dark-all-font-color;
}
}
}
.form-bookmark {
.form-group {
.select2-container {
.select2-selection--single{
border-color: $dark-all-font-color
}
}
}
}
.select2-dropdown{
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
}
.select2-drpdwn {
.form-control-primary {
border-color: $primary-color !important;
color: $primary-color !important;
}
.form-control-secondary {
border-color: $secondary-color !important;
color: $secondary-color !important;
}
.form-control-success {
border-color: $success-color !important;
color: $success-color !important;
}
.form-control-info {
border-color: $light-font !important;
color: $light-font !important;
}
.form-control-warning {
border-color: $warning-color !important;
color: $warning-color !important;
}
.form-control-danger {
border-color: $danger-color !important;
color: $danger-color !important;
}
.form-control-inverse {
border-color: $white !important;
color: $white !important;
}
.form-control-primary-fill{
background-color: $primary-color !important;
color: $white !important;
}
.form-control-secondary-fill{
background-color: $secondary-color !important;
color: $white !important;
}
.form-control-success-fill{
background-color: $success-color !important;
color: $white !important;
}
.form-control-info-fill{
background-color: $light-font !important;
color: $white !important;
}
.form-control-warning-fill{
background-color: $warning-color !important;
color: $white !important;
}
.form-control-danger-fill{
background-color: $danger-color !important;
color: $white !important;
}
.form-control-inverse-fill{
background-color: $white !important;
color: $black !important;
}
}
.select2-container--default.select2-container--disabled{
.select2-selection--single{
background-color: $dark-card-border;
}
}
.theme-form {
.form-group {
select.form-control:not([size]):not([multiple]) {
background-color: $dark-body-background;
color: $dark-all-font-color;
border-color: $dark-card-border;
}
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-card-border;
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-card-border;
}
}
.form-divider{
border-top: 1px solid $dark-card-border;
&::before{
background: $dark-card-background;
color: $dark-all-font-color;
}
}
}
.CodeMirror{
background: $dark-card-background;
border: 1px solid $dark-card-border;
color: $dark-all-font-color;
.CodeMirror-code{
pre{
background: $dark-card-background;
}
}
}
.editor-statusbar{
border-color:$dark-card-border;
}
.editor-toolbar{
border-top: 1px solid $dark-card-border;
border-left: 1px solid $dark-card-border;
border-right: 1px solid $dark-card-border;
a{
color: $dark-all-font-color !important;
&:hover,
&.active{
background: $dark-card-border;
}
}
i.separator{
border-left: 1px solid $dark-small-font-color;
border-right: 1px solid $dark-small-font-color;
}
}
.editor-toolbar.disabled-for-preview {
a{
&:not(.no-disable){
background: $dark-card-border;
}
}
}
.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-card-border;
&.active,
&.current{
background: $primary-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-card-border;
}
}
.u-pearl-number, .u-pearl-icon{
background: $dark-body-background;
border: 2px solid $dark-card-border;
}
.u-pearl.disabled {
.u-pearl-icon, .u-pearl-number{
background: $dark-card-border;
border: 2px solid $dark-card-border;
}
&:after {
background-color: #334053;
}
}
.u-pearl.error{
&:after{
background-color: $dark-body-background;
}
}
.note-editor.note-frame{
border-color: $dark-card-border;
.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;
}
}
.nav-tabs{
border-bottom: 1px solid $dark-card-border;
.nav-link{
&.active{
color: $dark-all-font-color;
border-color: $dark-card-border;
}
&:hover,
&:focus{
border-color: $dark-card-border;
}
}
.nav-item.show{
.nav-link{
background-color: $dark-card-background;
color: $dark-all-font-color;
border-color: $dark-card-border;
}
}
}
.nav-tabs.nav-bottom {
.nav-item {
.nav-link{
&.active,
&.focus,
&.hover{
border-color: $dark-card-background $dark-card-border $dark-card-border;
}
}
}
}
.nav-success,.nav-pills.nav-success {
.nav-link{
color:$dark-all-font-color;
}
}
.nav-pills.nav-success .nav-link
.border-tab.nav-left, .border-tab.nav-right {
.nav-link{
color: $dark-all-font-color;
&.active{
color: $primary-color;
}
}
.show {
> .nav-link{
color: $primary-color;
}
}
}
.border-tab.nav-left.nav-secondary {
.nav-link {
&.active,
&:focus,
&:hover{
border-left-color: $secondary-color;
color: $secondary-color !important;
}
}
.show > .nav-link {
border-left-color: $secondary-color;
color: $secondary-color !important;
}
.nav-item.show{
color: $secondary-color !important;
border-left-color: $secondary-color;
}
}
.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: $light-font !important;
}
}
.show > .nav-link {
border-left-color: $light-font;
color: $light-font !important;
}
.nav-item.show{
color: $light-font !important;
border-left-color: $light-font;
}
}
.border-tab.nav-secondary {
.nav-link{
&.active,
&:focus,
&:hover{
color: $secondary-color !important;
}
}
.nav-item{
&.show{
color: $secondary-color !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-card-border;
}
.icon-hover-bottom {
background-color: $dark-card-background;
box-shadow: 0px 0px 1px 1px $dark-card-border;
.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-card-border;
}
}
.icon-first {
i {
color: $dark-small-font-color;
}
}
}
code {
background-color: $dark-body-background;
border-radius: 2px;
}
#cd-timeline{
&::before {
background: $dark-card-border;
}
}
.timeliny{
border-top: 1px solid $dark-card-border;
border-bottom: 1px solid $dark-card-border;
&::before{
background-color:$dark-card-border
}
.timeliny-dot{
background-color:$dark-card-background;
border: 1px solid $dark-card-border;
&::before {
color: $dark-all-font-color;
}
}
.timeliny-timeline{
.timeliny-timeblock{
&.active{
.timeliny-dot{
&::before{
color: $dark-all-font-color;
}
&:after{
background-color:$dark-body-background;
border-color:$dark-card-border;
color:$dark-all-font-color;
}
}
}
&:not(.inactive):not(.active){
.timeliny-dot{
&:hover {
background-color: $primary-color;
&::before{
color: $dark-all-font-color;
}
}
}
}
.timeliny-dot{
&:hover{
&::after{
background-color: $dark-card-background;
border: 1px solid $dark-card-border;
color: $dark-all-font-color;
}
}
}
}
}
}
.todo{
.todo-list-wrapper{
#todo-list{
li {
.task-container{
background: $dark-card-background;
border-bottom: 1px solid $dark-card-border;
.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-card-border;
}
}
}
}
&.completed{
.task-container{
.task-label{
color: $primary-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-card-border;
color: $dark-all-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;
}
.jstree-hovered{
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
}
}
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;
}
}
.blockquote-footer{
color: $dark-small-font-color;
}
.code-box-copy{
pre{
background-color: $dark-body-background;
code{
background-color: $dark-body-background;
}
}
pre[class*="language-"]{
border: 1px solid $dark-card-border;
}
.code-box-copy__btn{
background-color: $dark-body-background;
border: 1px solid $dark-card-border;
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;
}
.dt-button-info{
background-color: $dark-card-background;
border: 1px solid $dark-card-border;
h2{
background-color: $dark-card-background;
border-bottom: 1px solid $dark-card-border;
}
}
#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-card-border;
}
}
}
}
.error-wrapper{
background-color: rgba(54, 64, 74, 0.8);
.sub-content{
color: $dark-all-font-color;
}
}
.b-light{
border:1px solid $dark-card-border !important;
}
.modal-content{
background-color: $dark-card-background;
.modal-header{
border-bottom: 1px solid $dark-card-border;
}
.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-small-font-color;
}
}
}
.modal{
.theme-close{
background-color: $dark-card-background !important;
filter:invert(0);
}
}
.token.atrule, .token.attr-value, .token.keyword {
color: $light-font;
}
.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-card-border !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 $primary-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-card-border;
}
}
.user-footer{
h6 {
color: $dark-small-font-color;
}
svg{
path, rect {
color: $dark-small-font-color;
}
}
}
}
}
.dashboard-chat {
.chat{
.media {
.media-body{
.message-main{
p {
background-color: $dark-body-background;
}
&.smiley-bg {
background-color: $dark-body-background;
}
}
}
}
.right-side-chat{
.media-body{
p{
&:before {
border-left: 7px solid $dark-card-border;
}
}
}
}
.left-side-chat{
.media-body{
p{
&:before{
border-right: 7px solid $dark-card-border;
}
}
}
}
}
}
.selling-update {
border: 2px solid $dark-card-border;
}
.bitcoin-accordion {
.card{
.media-accordion{
.media:nth-child(2) {
background-color: #1c222b;
}
.media{
.media-body{
p {
color: $dark-small-font-color;
}
}
+ .media{
border-top: 1px solid $dark-card-border;
}
}
}
}
}
.server-card-bg{
background-color: #181f27 !important;
}
.server-widgets {
.bottom-server {
h5{
.second-color {
color: $dark-all-font-color;
}
}
}
}
.select2-drpdwn-project{
.form-control{
background-color: $dark-card-background !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
}
.tabs-project{
.nav-item{
.nav-link{
color: $dark-all-font-color;
}
}
}
.current-progress, .order-history{
table{
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, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(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, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.checkbox-#{$btn-name}{
label{
&::before{
border-color:$btn-color !important;
}
}
}
}
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(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-card-border;
}
}
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;
}
}
}
}
.main{
.langChoice {
background: $dark-body-background;
color: $white;
border: 1px solid $dark-card-border;
}
}
.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-card-border;
&: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;
}
}
}
&.rtl {
.page-main-header {
.main-header-right {
.nav-right {
> ul {
> li {
border-right: none;
&:nth-child(2) {
border-right: 1px solid $dark-card-border;
}
&:nth-child(5){
border-right: none;
border-left: 1px solid $dark-card-border;
}
&:nth-child(4) {
border-left: none;
}
}
}
}
}
}
}
.bookmark {
ul {
li {
a {
color: $dark-all-font-color;
}
}
}
}
}
&.dark-sidebar{
.page-main-header {
.main-header-right {
.main-header-left {
.dark-logo-wrapper{
display:block;
}
.logo-wrapper{
display:none;
}
}
}
}
.page-wrapper{
&.compact-wrapper{
.page-body-wrapper{
header{
&.main-nav{
background-color: $dark-card-background;
border-right: 1px solid $dark-card-border;
.nav-menu{
h6{
color: $dark-all-font-color;
}
> li{
.nav-link{
&.active{
color: $dark-all-font-color;
}
}
.nav-submenu{
li{
&:first-child{
border-top: 1px solid $dark-card-border;
}
}
}
&:last-child{
border-bottom: 1px solid $dark-card-border;
}
> a{
color: $dark-all-font-color;
}
}
.dropdown {
ul.nav-submenu {
li {
&:hover{
a{
color: $white !important;
}
}
a {
color: rgba($white, 0.8) !important;
&.active {
color: $white !important;
text-shadow: 0px 0px $white;
}
}
}
}
}
}
.sidebar-user{
border-color:$dark-card-border;
ul{
li{
span{
color: $dark-all-font-color;
}
+li{
&:before{
background-color: $dark-card-border;
}
}
}
}
h6{
color: $dark-all-font-color;
}
p{
color: $dark-all-font-color;
}
}
.main-navbar{
.nav-menu{
>li{
.mega-menu-container {
.mega-box{
.link-section{
.submenu-title{
h5{
color:$dark-all-font-color;
}
}
.submenu-content{
&.opensubmegamenu{
ul{
li{
a{
color: $dark-all-font-color;
}
}
}
}
}
}
}
}
}
}
}
.sidebar-main-title{
>div{
border-color:$dark-card-border;
h6{
color:$primary-color;
}
}
}
}
}
.according-menu{
i{
color: $dark-all-font-color;
}
}
}
.page-main-header{
border-bottom: 1px solid $dark-card-border;
.main-header-left {
background-color: $dark-card-background;
}
}
}
}
// sidebar
.main-navbar {
ul.nav-pills{
border-color:$dark-card-border;
.nav-item{
&:last-child{
border-color:$dark-card-border;
}
.nav-link{
color:$dark-all-font-color;
}
}
}
}
}
}
@media(max-width:767px){
body{
&.dark-only{
.chat-box {
.people-list {
ul {
li{
border-color: $dark-card-border;
}
}
}
}
}
}
}
/**=====================
55. theme layout CSS ends
==========================**/
Reference in New Issue View Git Blame Copy Permalink