| Current Path : /home/users/unlimited/www/whatsjet-saas/Source/resources/css/ |
| Current File : /home/users/unlimited/www/whatsjet-saas/Source/resources/css/dark-theme.scss |
// @media (prefers-color-scheme: dark) {
:root {
// app background color use
--lw-app-bg-color: #1E1E25;
// text color and button color use
--lw-white-color: #fff;
// all side cards, table, nav menu ,sidebar ,fieldset and modals color use
--lw-dark-blue-color: #15151a;
// some primary color use
--lw-primary-color: #2bac32;
// button color use
--lw-black-color: #000;
// border top , bottom and color default button color use
--lw-border-color:#282c31;
// dropdown-menu ,form control, sidebar hover / active tab color and whatsapp chat background color use
--lw-dark-brown-color: #1E1E25;
// alert-warning ,alert-danger and alert default color use
--lw-blue-color:#3F51B5;
}
html>body {
background: var(--lw-app-bg-color) url("../../imgs/wa-message-bg-dark.png") repeat!important;
color: #d1d1d1;
color-scheme: dark;
}
.btn.btn-primary ,.bg-primary ,.bg-success ,.conversation-compose .send .circle ,.page-item.active .page-link ,.btn-success ,.btn.btn-light.lw-save-language{
color: var(--lw-white-color) !important;
border-color: var(--lw-primary-color) !important;
background-color: var(--lw-primary-color) !important;
}
.text-success ,.text-primary ,.text-green{
color: var(--lw-primary-color) !important;
}
a{
color: var(--lw-primary-color);
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before{
background-color: var(--lw-primary-color) !important;
}
.input-group-append .btn.btn-outline-success{
color: var(--lw-white-color) !important;
border: 1px solid var(--lw-primary-color) !important;
background: var(--lw-primary-color) !important;
}
.card.lw-whatsapp-chat-block-container .nav-tabs{
border-color: 1px solid var(--lw-primary-color) !important;
}
.card,.main-content .navbar-top,.bg-gradient-default,.card-header,fieldset {
background: var(--lw-dark-blue-color) !important;
border: 0;
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, .1) !important;
.text-muted.text-sm span{
font-size: 16px !important;
font-weight: 600;
}
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
color: var(--lw-white-color) !important;
}
.text-muted {
color: #c3c3c3 !important;
text-transform: capitalize !important;
}
.bg-white,
.navbar-collapse {
background-color: var(--lw-dark-blue-color) !important;
}
::-webkit-scrollbar-thumb {
background: var(--lw-dark-blue-color)!important;
}
.navbar-light .navbar-nav .nav-link,.nav-link .text-dark {
color: #c3c3c3 !important;
&:hover {
color: var(--lw-white-color) !important;
}
}
.table td,.table th {
border-color: var(--lw-border-color) !important;
}
.thead-light {
th {
background: var(--lw-dark-blue-color) !important;
border-color: var(--lw-border-color) !important;
color: var(--lw-white-color) !important;
}
}
div.dataTables_wrapper table.dataTable>tbody>tr:hover {
background-color: var(--lw-app-bg-color) !important;
}
.btn.btn-light,.swal2-cancel.swal2-styled {
background-color: #4f4f4f !important;
border-color: #4f4f4f !important;
color: #fff !important;
}
.text-dark,.text-blue,.lw-details-item,.swal2-html-container {
color: var(--lw-white-color) !important;
}
fieldset,.card-body.card-deck .card {
border: 1px solid var(--lw-border-color) !important;
}
fieldset legend ,.btn-group .btn.btn-black.dropdown-toggle ,.btn.btn-secondary{
color: var(--lw-white-color) !important;
background-color: var(--lw-dark-brown-color) !important;
border: 1px solid var(--lw-border-color) !important;
.text-muted {
color: #aba1a1 !important;
}
}
legend{
cursor: pointer;
& img{
background-color: var(--lw-white-color);
}
}
label h3{
& img{
background-color: var(--lw-white-color);
margin-left: 10px;
}
}
.modal-content,.modal .modal-body,.modal-open .modal.lw-has-form .modal-footer ,.selectize-dropdown{
background-color: #050506 !important;
& .selectize-dropdown-content{
color: var(--lw-white-color);
cursor: pointer;
}
}
.modal-content .modal-header {
border-bottom: 1px solid var(--lw-border-color);
}
.modal-open .modal.lw-has-form .modal-footer,hr,.modal-footer {
border-top: 1px solid var(--lw-border-color) !important;
}
.card-header:first-child {
cursor: pointer;
}
.form-control,.selectize-input.full,.selectize-input, .selectize-control.single .selectize-input.input-active {
color: #aeaeae !important;
background-color: var(--lw-dark-brown-color) !important;
border: 1px solid var(--lw-border-color) !important;
}
.card.lw-whatsapp-chat-block-container {
.lw-whatsapp-chat-window {
.conversation-compose {
> div,
.emojionearea .emojionearea-editor {
background-color: #2a3942 !important;
color: #cfcfcf;
}
.photo:after {
border-color: transparent transparent transparent #2a3942;
}
.emoji {
background-color: #2a3942 !important;
}
}
}
}
.input-group-text {
background-color: var(--lw-dark-blue-color) !important;
border: 1px solid var(--lw-border-color) !important;
margin-left: 1px;
}
.card-body.card-deck .card {
border: 1px solid var(--lw-border-color) !important;
padding: 0;
.card-footer {
background-color: var(--lw-dark-blue-color);
}
}
.form-control-label {
color: #cfcfcf !important;
}
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .nav-link.active,
.active>.navbar-light .navbar-nav .nav-link {
color: var(--lw-white-color) !important;
background: #00000063;
border-left: 2px solid var(--lw-white-color)
}
.navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active:before {
border: none !important;
}
.navbar-nav .nav-item .nav-link {
border-left: 2px solid transparent;
}
.lw-form-card-box {
.input-group.input-group-alternative {
border: none;
}
.form-control {
border-radius: 0 !important;
}
.card-footer {
background-color: var(--lw-dark-blue-color);
}
}
.lw-guest-page {
.navbar-horizontal .navbar-nav .nav-link {
color: var(--lw-white-color) !important;
}
.lw-page-dropdown button {
background: transparent;
}
}
div:where(.swal2-container) div:where(.swal2-popup) {
background: var(--lw-dark-blue-color) !important;
}
.nav-tabs {
.nav-link {
background-color: #373636;
color: var(--lw-white-color);
&.active {
background-color: var(--lw-primary-color) !important;
color: var(--lw-white-color);
}
}
}
.nav-link:hover{
color: var(--lw-white-color);
}
.selectize-dropdown .active,.selectize-dropdown .optgroup-header {
background-color: #000000 !important;
color: var(--lw-white-color);
}
.btn-default {
background-color: #3f4045 !important;
border-color: #3f4045 !important;
color: var(--lw-white-color) !important;
}
.flowchart-operator{
background: #131318 !important;
color: var(--lw-black-color);
border-color: var(--lw-border-color) !important;
border-radius: 6px;
.flowchart-operator-title {
font-weight: 400 !important;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom: 1px solid var(--lw-border-color) !important;
color: var(--lw-white-color);
background: var(--lw-black-color) !important;
}
.flowchart-operator-inputs-outputs {
color: #cfcfcf;
font-weight: 500;
}
}
dd .lw-btn.btn.btn-sm.btn-outline-default {
background-color: var(--lw-border-color);
border-color: var(--lw-border-color);
color: var(--lw-white-color);
}
.badge-success {
background-color: var(--lw-primary-color);
color: var(--lw-white-color);
}
fieldset pre {
color: var(--lw-white-color);
}
.list-group-item {
background-color: var(--lw-dark-blue-color) !important;
border: 0;
border-bottom: 1px solid var(--lw-border-color) !important;
border-radius: 0;
&:hover,
&:focus {
background-color: var(--lw-black-color) !important;
}
}
// whatsapp chat
.card.lw-whatsapp-chat-block-container {
.selectize-control.multi .selectize-input > div{
border: 0;
}
.lw-whatsapp-chat-window {
.lw-contact-list {
.lw-contact {
border-radius: 0;
border-top: 1px solid var(--lw-border-color) !important;
border-bottom: none !important;
}
}
.conversation {
background: var(--lw-black-color) url("../../imgs/wa-message-bg-dark.png") repeat !important;
}
.message {
color: var(--lw-white-color);
&.sent {
background-color: #1f4f3a;
&:after {
border-color: transparent transparent transparent #1f4f3a;
}
}
&.received {
background: #222c32;
&:after {
border-color: transparent #222c32 transparent transparent;
}
}
}
.metadata {
.time {
color: #b3b3b3;
}
}
.user-bar {
background: #0b1014;
border-bottom: 1px solid #4b4b4b;
}
}
.nav-tabs {
.nav-link {
background-color: var(--lw-dark-blue-color);
color: var(--lw-white-color);
@media (max-width: 768px) {
background-color: transparent;
}
}
}
.shadow-lg{
box-shadow: none !important;
}
}
.lw-whatsapp-preview-message-container {
.lw-whatsapp-preview {
.card {
background-color: #1e77508f !important;
color: #bfbfbf;
box-shadow: none !important;
border-radius: 5px;
.card-footer {
border-top: 0;
.lw-whatsapp-buttons {
.list-group-item {
background-color: #1f6646 !important;
}
}
.list-group-item {
border-top: 1px solid #4c7a65;
border-bottom: none !important;
a{
color: #00a5f4;
}
}
}
}
}
}
.lw-whatsapp-preview > .card::after{
border-color :transparent var(--lw-dark-blue-color) transparent transparent;
}
.btn.btn-danger{
color: var(--lw-white-color) !important;
background-color: #c11616 !important;
border: 1px solid #c11616 !important;
}
.btn.btn-info{
color: var(--lw-white-color) !important;
}
.dropdown-menu{
background-color: var(--lw-dark-brown-color) !important;
color: var(--lw-white-color) !important;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22) !important;
}
.dropdown-item{
color: var(--lw-white-color) !important;
&:hover,&::before{
background-color: var(--lw-primary-color) !important;
}
}
.dropdown-header:hover{
background-color: var(--lw-dark-brown-color) !important;
}
.navbar .dropdown-menu-arrow:before{
background-color: var(--lw-dark-brown-color) !important;
}
.alert-light{
background-color: var(--lw-black-color) !important;
border: 1px solid var(--lw-border-color);
}
.alert-warning ,.alert-danger ,.alert-default{
border-color: var(--lw-blue-color) !important;
background-color: var(--lw-blue-color) !important;
}
.page-link ,.page-item.disabled .page-link{
background-color: var(--lw-dark-brown-color) !important;
border: 1px solid var(--lw-border-color) !important;
}
.form-group .input-group.input-group-alternative{
border: none !important;
}
.btn-warning, .badge.badge-warning{
border-color: #bb9018 !important;
background-color: #bb9018 !important;
color: var(--lw-white-color) !important;
}
.badge.bg-yellow{
background-color: var(--lw-white-color) !important;
color: var(--lw-black-color) !important;
}
.lw-breadcrumb-container{
background-color: var(--lw-dark-blue-color) !important;
}
.close>span:not(.sr-only){
color: var(--lw-white-color) !important;
}
.input-group-append .btn.btn-outline-light{
background: var(--lw-dark-brown-color) !important;
color: var(--lw-white-color) !important;
border: 1px solid var(--lw-border-color) !important;
}
.dataTables_wrapper .dataTables_length select{
background-color: var(--lw-dark-blue-color) !important;
color: var(--lw-white-color);
}
.badge.badge-danger{
background-color: #f5365c !important;
color: var(--lw-white-color);
}
.selectize-control.lw-form-field ,.selectize-control.form-control{
background-color: transparent !important;
border: none !important;
.selectize-input.full, .selectize-input{
border: 1px solid var(--lw-border-color) !important;
}
}
.fa-stripe,.fa-paypal{
color: #5872ff;
font-size: 20px;
}
.lw-has-form fieldset .input-group{
border: 1px solid var(--lw-border-color);
background-color: var(--lw-dark-brown-color);
.lw-form-field.form-control{
border: none !important;
}
}
.lw-whatsapp-preview-container{
background: var(--lw-app-bg-color) url("../../imgs/wa-message-bg-dark.png") repeat!important;
}
.navbar-toggler-icon{
display: none;
}
.fa.fa-bars{
color: var(--lw-white-color);
font-size: 21px;display: inline-block !important;
}
.nav-link{
color: var(--lw-white-color);
}
.dropdown-menu .active a {
background-color: #b1b3ad; /* or any color you prefer */
font-weight: bold;
}
.card-footer{
background-color: var(--lw-dark-blue-color);
}
@media (max-width: 768px) {
.lw-language-block .form-control,.lw-language-block .input-group-text{
border: 1px solid var(--lw-border-color) !important;
}
.navbar-collapse .navbar-toggler span{
background: white;
}
}
.selectize-control.single .selectize-input:after{
border-color: #ffffff transparent transparent transparent;
}
@media (max-width: 768px) {
.card.lw-whatsapp-chat-block-container .lw-contact-list-block, .card.lw-whatsapp-chat-block-container .lw-contact-crm-block{
background-color: var(--lw-black-color);
}
}
.lw-error-page-block{
background-color: var(--lw-dark-blue-color) !important;z
h2 ,h1{
color: var(--lw-white-color) !important;
}
p{
color: #ddd !important;
}
}
.custom-control-label::before{
background-color: var(--lw-dark-blue-color);
border: 1px solid var(--lw-border-color);
}
.selectize-input > input {
color: #aeaeae ;
}
.ElementsApp, .ElementsApp .InputElement {
color: var(--lw-white-color);
}
.lw-list-group-border{
border: 1px solid var(--lw-border-color) !important;
}
.emojionearea{
background-color: transparent;
}
.chat-container {
background-color: #202c33;
}
.emojionearea .emojionearea-button>div, .emojionearea .emojionearea-picker .emojionearea-wrapper:after {
filter: brightness(0.6) invert(1);
}
.emojionearea .emojionearea-picker .emojionearea-filter ,.emojionearea-picker ,.emojionearea .emojionearea-search,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title ,.emojionearea .emojionearea-picker .emojionearea-filters{
background-color: var(--lw-dark-blue-color) !important;
}
.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose input{
background-color: var(--lw-dark-brown-color);
}