$dark-bg: #181c2b; $dark-bg-1: #1d2132; $dark-bg-2: #23273b; $dark-border-1: lighten($dark-bg, 5%); $dark-border-2: lighten($dark-bg, 10%); $dark-color-1: #eeeffc; $dark-color-2: #858699; $dark-color-3: #535667; $dark-icon-color: #3653d1; $dark-brand-primary: #3653d1; body.latepoint-admin.latepoint-dark { color: $dark-color-1; h1, h2, h3, h4, h5 { color: #fff; } .os-categories-ordering-w .os-category-w, .os-category-parent-w.gu-mirror .os-category-w { background-color: $dark-bg-1; box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.2); } .item-in-category-w { background-color: $dark-bg-1; border-color: darken($dark-bg, 1%); .os-category-item-meta { background-color: $dark-bg; } } .os-categories-ordering-w .os-category-w .os-category-head .os-category-items-meta, .os-category-parent-w.gu-mirror .os-category-w .os-category-head .os-category-items-meta, .os-categories-ordering-w .os-category-w .os-category-head .os-category-items-count, .os-category-parent-w.gu-mirror .os-category-w .os-category-head .os-category-items-count{ background-color: $dark-bg; } .os-form-sub-header.sub-level { h3 { background-color: $dark-bg; color: $dark-color-2; } &:after { background-color: $dark-bg-1; } } .os-services-list { .create-service-link-w { border-color: $dark-border-1; .add-service-graphic-w .add-service-plus { background-color: $dark-brand-primary; box-shadow: 0px 0px 0px 10px $dark-bg-1; } .add-service-label { color: $dark-brand-primary; } } .os-service { background-color: $dark-bg-1; box-shadow: 0 10px 30px 0 darken($dark-bg, 5%), 0 1px 2px 0 darken($dark-bg, 10%); } .os-service-header .service-name { color: $dark-color-1; } .os-service-body { .os-service-agents .agents-avatars .agent-avatar { box-shadow: 0px 0px 0px 3px $dark-bg-1; } .os-service-agents .agents-avatars .agents-more { background-color: $dark-bg; color: $dark-color-2; } .os-service-agents .value strong, .os-service-info .value strong { color: $dark-brand-primary; } } } .os-table-w.os-table-compact .os-table tr th { background-color: $dark-bg; border-color: $dark-border-2; } .os-table-w.os-table-compact .os-table tr td { border-color: $dark-border-2; } .os-scrollable-table-w .os-table-w.os-table-compact .os-table tr td:first-child, .os-scrollable-table-w .os-table-w.os-table-compact .os-table tr th:first-child { box-shadow: inset -1px 0px 0px 0px $dark-border-2; } body.latepoint-admin.latepoint-dark .os-scrollable-table-w .os-table-w.os-table-compact .os-table tr td:first-child, body.latepoint-admin.latepoint-dark .os-scrollable-table-w .os-table-w.os-table-compact .os-table tr th:first-child { box-shadow: inset -1px 0px 0px 0px $dark-border-2; } .os-scrollable-table-w { border-color: $dark-border-2; } .os-table-w.os-table-compact .os-table tbody tr:hover td { background-color: $dark-bg; } .os-table tbody tr td { background-color: $dark-bg; border-color: $dark-border-2; } .latepoint-btn { &.latepoint-btn-primary { background-color: $dark-brand-primary; } &.latepoint-btn-secondary { background-color: $dark-bg-2; color: $dark-color-1; } } .agent-day-availability-w .agent-timeslot.is-off { background-image: repeating-linear-gradient(90deg, $dark-bg, $dark-bg 2px, #873e3e 2px, #873e3e 3px) } .appointment-box-squared { border-bottom-color: $dark-border-1; .appointment-service-name { color: $dark-color-1; } .appointment-main-info .appointment-main-info-i .appointment-date-i .appointment-date { color: $dark-color-2; } .appointment-date-w .appointment-time { color: $dark-brand-primary; } .appointment-main-info .appointment-link { color: $dark-brand-primary; } } .os-widget-daily-bookings { border-right-color: $dark-border-1; } .os-widget { .stats-tab-info { background-color: $dark-bg-1; color: $dark-color-2; } .stats-tab-value { color: $dark-color-1; .stats-change .stats-change-value { color: $dark-color-3; } } .stats-tab-label { color: $dark-color-2; } .os-widget-header { border-bottom-color: $dark-border-1; &.with-actions { select { background-color: $dark-bg-1; color: $dark-color-1; border-color: $dark-border-2; } .os-widget-header-actions .os-date-range-picker { background-color: $dark-bg-1; color: $dark-color-1; border-color: $dark-border-2; span { color: $dark-color-1; } } } } } .os-table-w.os-table-compact .os-table tr td .os-with-avatar .os-clickable-popup-trigger { background-color: $dark-bg-1; } .os-table-w.os-table-compact .os-table tr th .os-form-group .os-form-control, .os-table-w.os-table-compact .os-table tr th .os-date-range-picker { background-color: $dark-bg-1; color: $dark-color-1; border-color: $dark-border-2; } .latepoint-top-bar-w .latepoint-top-iconed-link { color: $dark-icon-color; } .agent-day-bookings-timeline-compact-w .timeslot.with-tick .tick { background-color: $dark-border-2; } .timeline-type-toggle { border-color: $dark-border-2; .timeline-type-option { color: $dark-color-2; &.active { background-color: $dark-bg; border-color: $dark-brand-primary; color: $dark-brand-primary; box-shadow: 0px 0px 0px 1px $dark-brand-primary; } } } ul.os-page-tabs { li a { color: $dark-color-3; } li.os-page-tab-active a { color: $dark-color-1; } } .latepoint-side-menu-w { background-color: $dark-bg; border-right-color: $dark-border-1; &.side-menu-full .back-to-wp-link-w .back-to-wp-link { background-color: $dark-bg; border-color: $dark-brand-primary; color: $dark-brand-primary; } ul.side-menu > li.has-children:after { color: $dark-color-3; } ul.side-menu > li:hover:not(.menu-item-is-active) > a { background-color: lighten($dark-bg, 10%); } ul.side-menu > li.menu-item-is-active > a { background-color: lighten($dark-bg, 10%); } ul.side-menu > li > a { color: $dark-color-1; > i { color: $dark-icon-color; } } ul.side-menu > li.menu-spacer.with-label { &:after { background-color: $dark-border-1; } span { background-color: $dark-bg; } } } .latepoint-all-wrapper { .latepoint-content-w { background-color: $dark-bg; } .latepoint-top-bar-w { background-color: $dark-bg; border-bottom-color: $dark-border-1; .latepoint-top-iconed-link .notifications-count { border-color: $dark-bg; } .latepoint-top-search-w .latepoint-top-search { background-color: $dark-bg; } } .page-header-w { border-bottom-color: $dark-border-1; } } }