Files
TechOdyssey_Designs_Dashboard/assets/sass/dark-theme.scss
2025-01-03 23:10:59 +00:00

959 lines
17 KiB
SCSS

/*
Template Name: Syndron Admin
Author: codervent
Email: codervent@gmail.com
File: app.css
*/
[data-bs-theme=dark] body {
color-scheme: dark;
--bs-body-color: #dee2e6;
--bs-body-color-rgb: 222, 226, 230;
--bs-body-bg: #212529;
--bs-body-bg-2: #181c1f;
--bs-body-bg-rgb: 33, 37, 41;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255, 255, 255;
--bs-secondary-color: rgba(222, 226, 230, 0.75);
--bs-secondary-color-rgb: 222, 226, 230;
--bs-secondary-bg: #343a40;
--bs-secondary-bg-rgb: 52, 58, 64;
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
--bs-tertiary-color-rgb: 222, 226, 230;
--bs-tertiary-bg: #2b3035;
--bs-tertiary-bg-rgb: 43, 48, 53;
--bs-primary-text-emphasis: #6ea8fe;
--bs-secondary-text-emphasis: #a7acb1;
--bs-success-text-emphasis: #75b798;
--bs-info-text-emphasis: #6edff6;
--bs-warning-text-emphasis: #ffda6a;
--bs-danger-text-emphasis: #ea868f;
--bs-light-text-emphasis: #f8f9fa;
--bs-dark-text-emphasis: #dee2e6;
--bs-primary-bg-subtle: #031633;
--bs-secondary-bg-subtle: #161719;
--bs-success-bg-subtle: #051b11;
--bs-info-bg-subtle: #032830;
--bs-warning-bg-subtle: #332701;
--bs-danger-bg-subtle: #2c0b0e;
--bs-light-bg-subtle: #343a40;
--bs-dark-bg-subtle: #1a1d20;
--bs-primary-border-subtle: #084298;
--bs-secondary-border-subtle: #41464b;
--bs-success-border-subtle: #0f5132;
--bs-info-border-subtle: #087990;
--bs-warning-border-subtle: #997404;
--bs-danger-border-subtle: #842029;
--bs-light-border-subtle: #495057;
--bs-dark-border-subtle: #343a40;
--bs-heading-color: inherit;
--bs-link-color: #6ea8fe;
--bs-link-hover-color: #8bb9fe;
--bs-link-color-rgb: 110, 168, 254;
--bs-link-hover-color-rgb: 139, 185, 254;
--bs-code-color: #e685b5;
--bs-highlight-color: #dee2e6;
--bs-highlight-bg: #664d03;
--bs-border-color: #495057;
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
--bs-form-valid-color: #75b798;
--bs-form-valid-border-color: #75b798;
--bs-form-invalid-color: #ea868f;
--bs-form-invalid-border-color: #ea868f;
color: var(--bs-body-color);
background-color: var(--bs-body-bg-2);
.bg-light {
background-color: var(--bs-light-bg-subtle) !important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
color: var(--bs-body-color);
}
.card {
box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%), 0 2px 6px 0 rgb(24 28 31 / 54%);
}
.text-secondary {
color: #a8aeb3 !important;
}
.wrapper {
width: 100%;
position: relative;
}
/* sidebar wrapper */
.sidebar-wrapper {
background-color: var(--bs-body-bg);
border-right: 1px solid var(--bs-border-color-translucent);
.sidebar-header {
background-color: var(--bs-body-bg);
border-right: 1px solid var(--bs-border-color-translucent);
.logo-text {
color: var(--bs-body-color);
}
.mobile-toggle-icon {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
&:hover,
&:focus {
background-color: var(--bs-light-bg-subtle);
color: var(--bs-emphasis-color);
}
}
}
.metismenu {
a {
color: var(--bs-body-color);
}
ul {
background: var(--bs-body-bg);
}
}
.metismenu .mm-active>a,
.metismenu a:active,
.metismenu a:focus,
.metismenu a:hover {
color: var(--bs-emphasis-color);
background-color: rgba(255, 255, 255, 0.1);
}
}
/* top header */
.topbar {
background-color: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color-translucent);
.navbar {
.navbar-nav {
.nav-link {
color: var(--bs-body-color);
&:hover,
&:focus {
background-color: var(--bs-light-bg-subtle);
color: var(--bs-emphasis-color);
}
}
}
.dropdown-app {
.dropdown-menu {
border: 1px solid var(--bs-border-color-translucent);
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
.app-box {
&:hover {
background-color: var(--bs-light-bg-subtle);
}
}
.app-name {
color: var(--bs-body-color);
}
}
}
.dropdown-large {
.dropdown-menu {
&::after {
content: '';
background: var(--bs-body-bg);
border-top: 1px solid var(--bs-border-color-translucent);
border-left: 1px solid var(--bs-border-color-translucent);
}
}
}
.dropdown-menu {
&::after {
content: '';
background: var(--bs-body-bg);
border-top: 1px solid var(--bs-border-color-translucent);
border-left: 1px solid var(--bs-border-color-translucent);;
}
}
}
}
.user-info {
.user-name {
color: var(--bs-body-color);
}
.designattion {
color: var(--bs-secondary-text-emphasis);
}
}
.user-box {
border-left: 1px solid var(--bs-border-color-translucent);
border-right: 1px solid var(--bs-border-color-translucent);
}
.dropdown-large {
.dropdown-menu {
border: 1px solid var(--bs-border-color-translucent);
.dropdown-item {
border-bottom: 1px solid var(--bs-border-color-translucent);
}
}
.msg-header {
border-bottom: 1px solid var(--bs-border-color-translucent);
background-color: var(--bs-body-bg);
.msg-header-title {
color: var(--bs-body-color);
}
.msg-header-clear {
color: var(--bs-secondary-text-emphasis);
}
}
.msg-footer {
color: var(--bs-body-color);
border-top: 1px solid var(--bs-border-color-translucent);
}
.user-online {
&:after {
background: #16e15e;
}
}
.msg-name {
color: var(--bs-body-color);
}
.msg-info {
color: var(--bs-secondary-text-emphasis);
}
.msg-time {
color: var(--bs-secondary-text-emphasis);
}
.notify {
background-color: var(--bs-secondary-bg-subtle);
}
.cart-product-title {
color: var(--bs-body-color);
}
.cart-product-price {
color: var(--bs-body-color);
}
.cart-product-cancel {
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color-translucent);
}
.cart-product {
border: 1px solid var(--bs-border-color-translucent);
background-color: var(--bs-body-bg);
}
}
.dropdown-menu {
-webkit-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
border: 1px solid var(--bs-border-color-translucent);
}
.dropdown-item:hover{
background-color: var(--bs-light-bg-subtle);
color: var(--bs-body-color);
}
/* search */
.search-bar a.btn,
.search-bar a.btn:focus {
color: var(--bs-light-text-emphasis);
background-color: var(--bs-body-bg);
}
.mobile-toggle-menu {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
&:hover,
&:focus {
background-color: var(--bs-light-bg-subtle);
color: var(--bs-emphasis-color);
}
}
/* switcher */
.switcher-wrapper {
background: var(--bs-body-bg-2);
border-left: 1px solid var(--bs-border-color-translucent);
}
.switcher-btn {
background: #008cff;
box-shadow: 0 .3rem .6rem rgba(0, 0, 0, .13);
color: #fff;
}
.header-colors-indigators {
.indigator {
background-color: var(--bs-light-bg-subtle);
}
}
.highcharts-background {
fill: var(--bs-body-bg);
}
.highcharts-title {
fill: var(--bs-body-color);
}
.highcharts-axis-labels {
fill: var(--bs-secondary-text-emphasis);
}
.highcharts-legend-item > text,
.highcharts-data-label text,
text.highcharts-data-label {
fill: var(--bs-secondary-text-emphasis);
}
/* footer */
.page-footer {
background-color: var(--bs-body-bg);
border-top: 1px solid var(--bs-border-color-translucent);
}
/* back to top button */
.back-to-top {
color: #fff;
background-color: #008cff;
&:hover {
color: #fff;
background-color: #000;
}
}
/* breadcrumb */
.breadcrumb-title {
border-right: 1.5px solid var(--bs-border-color-translucent);
}
.page-breadcrumb {
.breadcrumb-item {
&+.breadcrumb-item {
&::before {
color: var(--bs-secondary-text-emphasis);
}
}
}
}
/* theme components */
.product-discount {
background-color: var(--bs-light-bg-subtle);
}
.imageuploadify {
background-color: var(--bs-light-bg-subtle);
}
.bootstrap-tagsinput {
background-color: var(--bs-body-bg);
border-color: var(--bs-border-color);
}
.input-group-text {
background-color: var(--bs-body-bg);
}
.bs-stepper-line, .bs-stepper .line {
background-color: var(--bs-light-bg-subtle);
}
.bs-stepper-circle {
color: var(--bs-body-color);
background-color: var(--bs-light-bg-subtle);
}
.bs-stepper.vertical .bs-stepper-header {
background-color: var(--bs-body-bg-2);
border-right: 1px solid var(--bs-border-color);
}
/* select2 */
.select2-container--bootstrap-5 .select2-selection {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.select2-container--bootstrap-5 .select2-dropdown {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
color: var(--bs-body-color);
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
color: var(--bs-body-color);
border: 1px solid var(--bs-border-color);
}
.alert {
background-color: #292f34;
}
.color-indigator-item {
background-color: var(--bs-body-bg);
}
.icon-badge {
background-color: var(--bs-body-bg);
}
.widgets-icons {
background-color: var(--bs-body-bg);
}
.widgets-icons-2 {
background-color: var(--bs-body-bg);
}
.more-options {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
&:hover {
background-color: var(--bs-light-border-subtle);
color: var(--bs-emphasis-color);
}
}
.apexcharts-datalabel,
.apexcharts-datalabel-label,
.apexcharts-datalabel-value,
.apexcharts-datalabels,
.apexcharts-pie-label {
fill: #fff
}
.product-img-2 {
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color-translucent);
}
.product-list {
.row {
background-color: var(--bs-body-bg);
}
}
@media (min-width:992px) {
.product-list {
.row {
&:hover {
background-color: var(--bs-body-bg);
}
}
}
}
.recent-product-img {
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color-translucent);
}
.theme-icons {
background-color: var(--bs-body-bg)
}
.fm-menu {
.list-group {
a {
color: var(--bs-secondary-text-emphasis);
&:hover {
background-color: #008cff;
color: #fff;
}
}
}
}
.fm-file-box {
background-color: var(--bs-light-bg-subtle);
}
.fm-icon-box {
background-color: var(--bs-body-bg);
}
.user-plus {
background-color: var(--bs-body-bg);
border: 1px dotted var(--bs-border-color-translucent);
color: var(--bs-secondary-text-emphasis);
}
.user-groups {
img {
border: 1px solid var(--bs-border-color-translucent);
}
}
.contacts-social {
a {
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color-translucent);
color: var(--bs-body-color);
}
}
.customers-contacts {
a {
background-color: var(--bs-light-bg-subtle);
border: 1px solid var(--bs-border-color-translucent);
color: var(--bs-body-color);
}
}
.order-actions {
a {
background-color: var(--bs-light-bg-subtle);
border: 1px solid var(--bs-border-color-translucent);
color: var(--bs-body-color);
}
}
.auth-cover-left {
background-color: var(--bs-body-bg-2);
}
.auth-cover-right {
background-color: var(--bs-body-bg);
}
@media (min-width:992px) {
.customers-list {
.customers-list-item {
&:hover {
background-color: var(--bs-light-bg-subtle);
}
}
}
}
.w_chart {
color: var(--bs-body-color);
}
.chip {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color-translucent);
}
.invoice {
background-color: var(--bs-body-bg);
main {
.notices {
background-color: var(--bs-body-bg);
}
}
table {
.no {
color: var(--bs-body-color);
}
.unit {
background-color: var(--bs-light-bg-subtle);
}
tfoot {
td {
border-top: 1px solid var(--bs-border-color-translucent);
}
}
}
footer {
color: var(--bs-body-color);
}
}
.invoice table td,
.invoice table th {
background-color: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color-translucent);
}
/* chat process */
.chat-wrapper {
background-color: var(--bs-body-bg);
}
.chat-sidebar {
background-color: var(--bs-body-bg);
border-right: 1px solid var(--bs-border-color-translucent);
}
.chat-sidebar-header {
background-color: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color-translucent);
border-right: 0 solid var(--bs-border-color-translucent);
.chat-user-online {
&:before {
box-shadow: 0 0 0 2px var(--bs-body-bg);
}
}
}
.chat-list {
.chat-user-online {
&:before {
box-shadow: 0 0 0 2px var(--bs-border-color-translucent);
}
}
.list-group-item {
border: 1px solid rgb(0 0 0 / 0%);
&:hover {
border: 1px solid rgb(0 0 0 / 0%);
background-color: rgb(13 110 253 / .12);
}
&.active {
background-color: rgb(13 110 253 / .12);
}
}
}
.chat-header {
background: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color-translucent);
}
.chat-footer {
background-color: var(--bs-body-bg);
border-top: 1px solid var(--bs-border-color-translucent);
}
.chat-footer-menu {
a {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color-translucent);
}
}
.chat-tab-menu {
li {
a {
&.nav-link {
color: var(--bs-body-color);
}
}
}
}
.chat-title {
color: var(--bs-body-color);
}
.chat-msg {
color: var(--bs-secondary-text-emphasis);
}
.chat-time {
color: var(--bs-secondary-text-emphasis);
}
.chat-top-header-menu {
a {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color-translucent);
}
}
.chat-content-leftside {
.chat-left-msg {
background-color: var(--bs-light-bg-subtle);
}
}
.chat-content-rightside {
.chat-right-msg {
background-color: var(--bs-secondary-bg-subtle);
}
}
.chat-toggle-btn {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color-translucent);
}
/* email */
.email-wrapper {
background-color: var(--bs-body-bg);
}
.email-sidebar {
background-color: var(--bs-body-bg);
border-right: 1px solid var(--bs-border-color-translucent);
}
.email-sidebar-header {
background-color: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color-translucent);
border-right: 0 solid var(--bs-border-color-translucent);
}
.email-navigation {
border-bottom: 1px solid var(--bs-border-color-translucent);
a {
&.list-group-item {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
}
&:hover {
color: var(--bs-emphasis-color);
background-color: var(--bs-light-bg-subtle);
}
}
}
.email-header {
background-color: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color-translucent);
}
.email-content {
background-color: var(--bs-border-color-translucent);
}
.email-meeting {
a {
&.list-group-item {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
}
}
}
.email-hangout {
.chat-user-online {
&:before {
box-shadow: 0 0 0 2px var(--bs-body-bg);
}
}
}
.email-toggle-btn {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border: 0 solid var(--bs-border-color-translucent);
}
.email-time {
color: var(--bs-secondary-text-emphasis);
}
.email-list {
div {
&.email-message {
background-color: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color-translucent);
color: var(--bs-body-color);
&:hover {
transition: all .2s ease-out;
background-color: var(--bs-light-bg-subtle);
}
}
}
}
.email-star {
color: var(--bs-secondary-text-emphasis);
}
.email-read-box {
background-color: var(--bs-body-bg);
}
.compose-mail-close {
background-color: rgb(255 255 255 / 0%);
&:hover {
background-color: var(--bs-light-bg-subtle)
}
}
.fc-theme-standard td,
.fc-theme-standard th {
border: 1px solid var(--bs-border-color);
border: 1px solid var(--fc-border-color, var(--bs-border-color));
}
.fc-non-business {
background-color: var(--bs-light-bg-subtle);
}
.nav-search {
input {
&.form-control {
background-color: var(--bs-light-bg-subtle);
border: 1px solid var(--bs-border-color-translucent);
color: var(--bs-body-color);
&::placeholder {
opacity: .5 !important;
color: #fff !important;
}
&::-ms-input-placeholder {
color: #fff !important;
}
}
}
button[type=submit] {
background-color: var(--bs-light-bg-subtle);
border: 1px solid var(--bs-border-color-translucent);
color: #fff;
}
}
.error-social {
a {
color: var(--bs-body-color);
}
}
.login-separater {
span {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
}
}
.btn-light {
color: var(--bs-body-color);
background-color: var(--bs-light-bg-subtle);
border-color: var(--bs-border-color);
}
.btn-white {
background-color: var(--bs-body-bg);
border-color: var(--bs-border-color);
}
.gmaps,
.gmaps-panaroma {
background-color: var(--bs-light-bg-subtle);
}
.pricing-table {
.card {
ul {
li {
&.list-group-item {
color: var(--bs-body-color);
}
}
}
}
}
input {
&::placeholder {
color: #fff !important;
}
}
@media screen and (max-width:1024px) {
.wrapper {
&.toggled {
.overlay {
background: #fff;
}
}
}
.chat-toggled {
.overlay {
background: #fff;
}
}
.email-toggled {
.overlay {
background-color: #fff;
}
}
}
}