From 23491f1e8c8ea103e19bc6af98607d7b3d6b1504 Mon Sep 17 00:00:00 2001 From: LeoEricson Date: Thu, 21 Apr 2022 21:30:55 +0000 Subject: [PATCH] Add dark theme --- src/static/css/theme/dark.css | 385 ++++++++++++++++++++++-------- src/static/css/theme/dark.css.map | 1 + src/static/css/theme/dark.min.css | 1 + src/static/css/theme/dark.scss | 365 ++++++++++++++++++++++++++++ src/templates/header.html | 4 +- 5 files changed, 653 insertions(+), 103 deletions(-) create mode 100644 src/static/css/theme/dark.css.map create mode 100644 src/static/css/theme/dark.min.css create mode 100644 src/static/css/theme/dark.scss diff --git a/src/static/css/theme/dark.css b/src/static/css/theme/dark.css index c47e957..296a89e 100644 --- a/src/static/css/theme/dark.css +++ b/src/static/css/theme/dark.css @@ -1,123 +1,306 @@ -:root{ - --blue: #3f9eff; - --dark1: #1C1C1E; - --dark2: #232323; - --dark3: #3f3f3f; +:root { + --green: hsl(120deg, 30%, 50%) !important; + --blue: hsl(235deg, 60%, 60%) !important; + --red: hsl(0deg, 60%, 60%) !important; + --magenta: hsl(315deg, 60%, 60%) !important; } -a{ - color: var(--blue); +body { + background: #222222; + color: hsl(0deg, 0%, 80%); } -body{ - background-color: var(--dark1); - color: #ffffff; +.btn-primary { + color: hsl(0deg, 0%, 90%) !important; + border-color: hsl(235deg, 60%, 60%) !important; + background: hsl(235deg, 60%, 60%) !important; +} +.btn-primary:hover { + background-color: hsl(235deg, 60%, 50%) !important; + border-color: hsl(235deg, 60%, 50%) !important; } -hr{ - border-top: 1px solid rgb(255 255 255 / 10%); +.btn-outline-primary { + color: hsl(235deg, 60%, 60%) !important; + border-color: hsl(235deg, 60%, 60%) !important; + background: transparent !important; } - -/* Color */ - -.bg-dark{ - background-color: #232323!important; +.btn-outline-primary:hover, .btn-outline-primary.active { + color: hsl(0deg, 0%, 90%) !important; } - -.text-primary{ - color: var(--blue) !important; +.btn-outline-primary.active { + background-color: hsl(235deg, 60%, 60%) !important; + border-color: hsl(235deg, 60%, 60%) !important; } - -/* Form Related */ - -.form-control{ - color: #ffffff; - background-color: #232323; - border: 1px solid #686868; -} - -.form-control:focus { - color: #ffffff; - background-color: #232323; - border-color: #686868; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.50); -} - -.form-control:disabled, .form-control[readonly]{ - background-color: #525252; - opacity: 1; - color: #a5a5a5; -} - -.custom-control-label::before{ - background-color: transparent; -} - -/* Side Bar */ - -.sidebar{ - background-color: #232323 !important; -} - -.sidebar .nav-link, .bottomNavContainer .nav-link{ - color: #dddddd; -} - -.sidebar .nav-link.active, .bottomNavContainer .nav-link.active{ - color: var(--blue) !important; -} - -.nav-link:hover{ - background-color: #3f3f3f; -} - -.card{ - background-color: #232323; -} - - -/* Button Related */ - -.btn-outline-primary{ - color: var(--blue); - border-color: var(--blue); -} - .btn-outline-primary:hover { - color: #fff; - background-color: var(--blue); - border-color: var(--blue); + background-color: hsl(235deg, 60%, 50%) !important; + border-color: hsl(235deg, 60%, 50%) !important; } -.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle{ - background-color: var(--blue); - border-color: var(--blue); +.btn-success { + color: hsl(0deg, 0%, 90%) !important; + border-color: hsl(120deg, 30%, 50%) !important; + background: hsl(120deg, 30%, 50%) !important; +} +.btn-success:hover { + background-color: hsl(120deg, 30%, 40%) !important; + border-color: hsl(120deg, 30%, 40%) !important; } - -/* Configuration Card (index.html) */ -.conf_card:hover{ - border-color: var(--blue); +.btn-outline-success { + color: hsl(120deg, 30%, 50%) !important; + border-color: hsl(120deg, 30%, 50%) !important; + background: transparent !important; +} +.btn-outline-success:hover, .btn-outline-success.active { + color: hsl(0deg, 0%, 90%) !important; +} +.btn-outline-success.active { + background-color: hsl(120deg, 30%, 50%) !important; + border-color: hsl(120deg, 30%, 50%) !important; +} +.btn-outline-success:hover { + background-color: hsl(120deg, 30%, 40%) !important; + border-color: hsl(120deg, 30%, 40%) !important; } -/* Modal */ -.modal-content{ - background-color: var(--dark1); +.btn-danger { + color: hsl(0deg, 0%, 90%) !important; + border-color: hsl(0deg, 60%, 60%) !important; + background: hsl(0deg, 60%, 60%) !important; +} +.btn-danger:hover { + background-color: hsl(0deg, 60%, 50%) !important; + border-color: hsl(0deg, 60%, 50%) !important; } -.modal-header, .modal-footer{ - border-color:rgb(255 255 255 / 10%);; +.btn-outline-danger { + color: hsl(0deg, 60%, 60%) !important; + border-color: hsl(0deg, 60%, 60%) !important; + background: transparent !important; +} +.btn-outline-danger:hover, .btn-outline-danger.active { + color: hsl(0deg, 0%, 90%) !important; +} +.btn-outline-danger.active { + background-color: hsl(0deg, 60%, 60%) !important; + border-color: hsl(0deg, 60%, 60%) !important; +} +.btn-outline-danger:hover { + background-color: hsl(0deg, 60%, 50%) !important; + border-color: hsl(0deg, 60%, 50%) !important; } -/* List Group Item */ -.list-group-item{ - background-color: var(--dark2); - color: white; +.btn-secondary { + color: hsl(0deg, 0%, 90%) !important; + border-color: #424242 !important; + background: #424242 !important; +} +.btn-secondary:hover { + background-color: #383838 !important; + border-color: #383838 !important; } -.list-group-item:hover{ - color: white; - background-color: var(--dark3); - border-color: var(--dark3); -} \ No newline at end of file +.btn-outline-secondary { + color: #424242 !important; + border-color: #424242 !important; + background: transparent !important; +} +.btn-outline-secondary:hover, .btn-outline-secondary.active { + color: hsl(0deg, 0%, 90%) !important; +} +.btn-outline-secondary.active { + background-color: #424242 !important; + border-color: #424242 !important; +} +.btn-outline-secondary:hover { + background-color: #383838 !important; + border-color: #383838 !important; +} + +.btn-control.btn-lock-peer.lock { + color: hsl(0deg, 60%, 60%) !important; +} +.btn-control.btn-lock-peer.lock:hover { + color: hsl(0deg, 60%, 50%) !important; +} +.btn-control:hover { + background-color: transparent !important; +} +.btn-control:hover.btn-outline-primary { + color: hsl(235deg, 60%, 50%) !important; +} +.btn-control:hover.btn-outline-success { + color: hsl(120deg, 30%, 40%) !important; +} +.btn-control:hover.btn-outline-danger { + color: hsl(0deg, 60%, 50%) !important; +} +.btn-control:hover.btn-outline-secondary { + color: #383838 !important; +} + +.form-control { + background: #272727 !important; + border-color: transparent !important; + color: hsl(0deg, 0%, 80%) !important; +} + +.card .form-control { + background: #2c2c2c !important; +} + +.sidebar .nav-link, +.bottomNavContainer .nav-link { + color: hsl(0deg, 0%, 80%); +} +.sidebar .nav-link:hover, +.bottomNavContainer .nav-link:hover { + background: #222222; +} + +nav#sidebarMenu.col-md-3.col-lg-2.d-md-block.bg-light.sidebar.collapse, +.navbar-brand, +.bg-dark { + background-color: #1e1e1e !important; + background: #1e1e1e !important; +} + +.card { + background: #272727; +} + +.text-muted { + color: hsl(0deg, 0%, 50%) !important; +} + +.text-danger { + color: hsl(0deg, 60%, 60%) !important; +} + +.text-success { + color: hsl(120deg, 30%, 50%) !important; +} + +.text-primary { + color: hsl(235deg, 60%, 60%) !important; +} + +.text-info { + color: hsl(190deg, 60%, 60%) !important; +} + +a.text-success:focus, +a.text-success:hover { + color: hsl(120deg, 30%, 40%) !important; +} + +a.text-danger:focus, +a.text-danger:hover { + color: hsl(0deg, 60%, 50%) !important; +} + +a.text-info:focus, +a.text-info:hover { + color: hsl(190deg, 60%, 50%) !important; +} + +.dot-running { + background-color: hsl(120deg, 30%, 50%) !important; +} + +.card-running { + border-color: hsl(120deg, 30%, 50%); +} + +.toggle--switch:checked + .toggleLabel::before { + background-color: hsl(235deg, 60%, 60%) !important; +} + +.toggle--switch:checked + .toggleLabel { + background-color: #2e336b !important; + border-color: hsl(235deg, 60%, 60%) !important; +} + +.sidebar .nav-link.active, +.bottomNavContainer .nav-link.active { + color: hsl(235deg, 60%, 60%) !important; +} + +hr { + border-color: #2e2e2e; +} + +.modal-content { + background-color: #222222; +} + +.modal-header, +.modal-footer { + background-color: #1e1e1e; + border-color: #2e2e2e; +} + +code { + color: hsl(315deg, 60%, 60%); +} + +.close { + color: hsl(0deg, 0%, 80%); + text-shadow: none; +} +.close:hover { + color: hsl(0deg, 0%, 70%); +} + +.chartContainer.fullScreen { + background-color: #222222 !important; +} + +.popover { + background-color: #333333 !important; + border: none !important; +} + +.popover-body { + color: hsl(0deg, 0%, 80%) !important; +} + +div.toast { + background-color: #424242 !important; +} +div.toast div.toast-header { + background-color: #333333 !important; + color: hsl(0deg, 0%, 80%) !important; + border-bottom-color: #424242 !important; +} +div.toast div.toast-body { + background-color: #383838 !important; + color: hsl(0deg, 0%, 80%) !important; +} +div.toast div.toast-progressbar { + background-color: hsl(235deg, 60%, 60%) !important; +} + +.bs-popover-auto[x-placement^=right] > .arrow::after, +.bs-popover-right > .arrow::after { + border-right-color: #333333 !important; +} + +.btn-manage-group .setting_btn_menu { + background-color: #2c2c2c !important; +} + +.setting_btn_menu a:hover { + background-color: #333333 !important; +} + +.table { + color: hsl(0deg, 0%, 80%) !important; +} +.table th, +.table td { + border-color: #333333 !important; +} + +/*# sourceMappingURL=dark.css.map */ diff --git a/src/static/css/theme/dark.css.map b/src/static/css/theme/dark.css.map new file mode 100644 index 0000000..d074bca --- /dev/null +++ b/src/static/css/theme/dark.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AA8BA;EACE;EACA;EACA;EACA;;;AAGF;EACE,YArCS;EAsCT,OAdS;;;AAiBX;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKF;EACE;;AACA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE,OA1LS;;AA4LT;AAAA;EACE,YArNO;;;AAyNX;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,YA/NS;;;AAkOX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE,cAlQU;;;AAqQZ;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,cAzRS;;;AA4RX;EACE,kBAjSS;;;AAoSX;AAAA;EAEE,kBAvSS;EAwST,cAnSS;;;AAsSX;EACE,OAtRY;;;AAyRd;EACE,OAvRS;EAwRT;;AAEA;EACE,OA1RO;;;AA8RX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE","file":"dark.css"} \ No newline at end of file diff --git a/src/static/css/theme/dark.min.css b/src/static/css/theme/dark.min.css new file mode 100644 index 0000000..c0ffb17 --- /dev/null +++ b/src/static/css/theme/dark.min.css @@ -0,0 +1 @@ +:root{--green:hsl(120deg,30%,50%)!important;--blue:hsl(235deg,60%,60%)!important;--red:hsl(0deg,60%,60%)!important;--magenta:hsl(315deg,60%,60%)!important}body{background:#222;color:hsl(0deg,0%,80%)}.btn-primary{color:hsl(0deg,0%,90%)!important;border-color:hsl(235deg,60%,60%)!important;background:hsl(235deg,60%,60%)!important}.btn-primary:hover{background-color:hsl(235deg,60%,50%)!important;border-color:hsl(235deg,60%,50%)!important}.btn-outline-primary{color:hsl(235deg,60%,60%)!important;border-color:hsl(235deg,60%,60%)!important;background:transparent!important}.btn-outline-primary:hover,.btn-outline-primary.active{color:hsl(0deg,0%,90%)!important}.btn-outline-primary.active{background-color:hsl(235deg,60%,60%)!important;border-color:hsl(235deg,60%,60%)!important}.btn-outline-primary:hover{background-color:hsl(235deg,60%,50%)!important;border-color:hsl(235deg,60%,50%)!important}.btn-success{color:hsl(0deg,0%,90%)!important;border-color:hsl(120deg,30%,50%)!important;background:hsl(120deg,30%,50%)!important}.btn-success:hover{background-color:hsl(120deg,30%,40%)!important;border-color:hsl(120deg,30%,40%)!important}.btn-outline-success{color:hsl(120deg,30%,50%)!important;border-color:hsl(120deg,30%,50%)!important;background:transparent!important}.btn-outline-success:hover,.btn-outline-success.active{color:hsl(0deg,0%,90%)!important}.btn-outline-success.active{background-color:hsl(120deg,30%,50%)!important;border-color:hsl(120deg,30%,50%)!important}.btn-outline-success:hover{background-color:hsl(120deg,30%,40%)!important;border-color:hsl(120deg,30%,40%)!important}.btn-danger{color:hsl(0deg,0%,90%)!important;border-color:hsl(0deg,60%,60%)!important;background:hsl(0deg,60%,60%)!important}.btn-danger:hover{background-color:hsl(0deg,60%,50%)!important;border-color:hsl(0deg,60%,50%)!important}.btn-outline-danger{color:hsl(0deg,60%,60%)!important;border-color:hsl(0deg,60%,60%)!important;background:transparent!important}.btn-outline-danger:hover,.btn-outline-danger.active{color:hsl(0deg,0%,90%)!important}.btn-outline-danger.active{background-color:hsl(0deg,60%,60%)!important;border-color:hsl(0deg,60%,60%)!important}.btn-outline-danger:hover{background-color:hsl(0deg,60%,50%)!important;border-color:hsl(0deg,60%,50%)!important}.btn-secondary{color:hsl(0deg,0%,90%)!important;border-color:#424242!important;background:#424242!important}.btn-secondary:hover{background-color:#383838!important;border-color:#383838!important}.btn-outline-secondary{color:#424242!important;border-color:#424242!important;background:transparent!important}.btn-outline-secondary:hover,.btn-outline-secondary.active{color:hsl(0deg,0%,90%)!important}.btn-outline-secondary.active{background-color:#424242!important;border-color:#424242!important}.btn-outline-secondary:hover{background-color:#383838!important;border-color:#383838!important}.btn-control.btn-lock-peer.lock{color:hsl(0deg,60%,60%)!important}.btn-control.btn-lock-peer.lock:hover{color:hsl(0deg,60%,50%)!important}.btn-control:hover{background-color:transparent!important}.btn-control:hover.btn-outline-primary{color:hsl(235deg,60%,50%)!important}.btn-control:hover.btn-outline-success{color:hsl(120deg,30%,40%)!important}.btn-control:hover.btn-outline-danger{color:hsl(0deg,60%,50%)!important}.btn-control:hover.btn-outline-secondary{color:#383838!important}.form-control{background:#272727!important;border-color:transparent!important;color:hsl(0deg,0%,80%)!important}.card .form-control{background:#2c2c2c!important}.sidebar .nav-link,.bottomNavContainer .nav-link{color:hsl(0deg,0%,80%)}.sidebar .nav-link:hover,.bottomNavContainer .nav-link:hover{background:#222}nav#sidebarMenu.col-md-3.col-lg-2.d-md-block.bg-light.sidebar.collapse,.navbar-brand,.bg-dark{background-color:#1e1e1e!important;background:#1e1e1e!important}.card{background:#272727}.text-muted{color:hsl(0deg,0%,50%)!important}.text-danger{color:hsl(0deg,60%,60%)!important}.text-success{color:hsl(120deg,30%,50%)!important}.text-primary{color:hsl(235deg,60%,60%)!important}.text-info{color:hsl(190deg,60%,60%)!important}a.text-success:focus,a.text-success:hover{color:hsl(120deg,30%,40%)!important}a.text-danger:focus,a.text-danger:hover{color:hsl(0deg,60%,50%)!important}a.text-info:focus,a.text-info:hover{color:hsl(190deg,60%,50%)!important}.dot-running{background-color:hsl(120deg,30%,50%)!important}.card-running{border-color:hsl(120deg,30%,50%)}.toggle--switch:checked + .toggleLabel::before{background-color:hsl(235deg,60%,60%)!important}.toggle--switch:checked + .toggleLabel{background-color:#2e336b!important;border-color:hsl(235deg,60%,60%)!important}.sidebar .nav-link.active,.bottomNavContainer .nav-link.active{color:hsl(235deg,60%,60%)!important}hr{border-color:#2e2e2e}.modal-content{background-color:#222}.modal-header,.modal-footer{background-color:#1e1e1e;border-color:#2e2e2e}code{color:hsl(315deg,60%,60%)}.close{color:hsl(0deg,0%,80%);text-shadow:none}.close:hover{color:hsl(0deg,0%,70%)}.chartContainer.fullScreen{background-color:#222!important}.popover{background-color:#333!important;border:none!important}.popover-body{color:hsl(0deg,0%,80%)!important}div.toast{background-color:#424242!important}div.toast div.toast-header{background-color:#333!important;color:hsl(0deg,0%,80%)!important;border-bottom-color:#424242!important}div.toast div.toast-body{background-color:#383838!important;color:hsl(0deg,0%,80%)!important}div.toast div.toast-progressbar{background-color:hsl(235deg,60%,60%)!important}.bs-popover-auto[x-placement^=right] > .arrow::after,.bs-popover-right > .arrow::after{border-right-color:#333!important}.btn-manage-group .setting_btn_menu{background-color:#2c2c2c!important}.setting_btn_menu a:hover{background-color:#333!important}.table{color:hsl(0deg,0%,80%)!important}.table th,.table td{border-color:#333!important} \ No newline at end of file diff --git a/src/static/css/theme/dark.scss b/src/static/css/theme/dark.scss new file mode 100644 index 0000000..c7a27b0 --- /dev/null +++ b/src/static/css/theme/dark.scss @@ -0,0 +1,365 @@ +$grey-100: #1e1e1e; +$grey-200: #222222; +$grey-300: #242424; +$grey-400: #272727; +$grey-500: #2c2c2c; +$grey-600: #2e2e2e; +$grey-700: #333333; +$grey-800: #383838; +$grey-900: #424242; + +$green-400: hsl(120deg, 30%, 40%); +$green-500: hsl(120deg, 30%, 50%); + +$red-400: hsl(0deg, 60%, 50%); +$red-500: hsl(0deg, 60%, 60%); + +$blue-400: hsl(235deg, 60%, 50%); +$blue-500: hsl(235deg, 60%, 60%); + +$cyan-400: hsl(190deg, 60%, 50%); +$cyan-500: hsl(190deg, 60%, 60%); + +$magenta-500: hsl(315deg, 60%, 60%); + +$text-100: hsl(0deg, 0%, 90%); +$text-200: hsl(0deg, 0%, 80%); +$text-300: hsl(0deg, 0%, 70%); +$text-400: hsl(0deg, 0%, 60%); +$text-500: hsl(0deg, 0%, 50%); + +:root { + --green: #{$green-500} !important; + --blue: #{$blue-500} !important; + --red: #{$red-500} !important; + --magenta: #{$magenta-500} !important; +} + +body { + background: $grey-200; + color: $text-200; +} + +.btn-primary { + color: $text-100 !important; + border-color: $blue-500 !important; + background: $blue-500 !important; + + &:hover { + background-color: $blue-400 !important; + border-color: $blue-400 !important; + } +} + +.btn-outline-primary { + color: $blue-500 !important; + border-color: $blue-500 !important; + background: transparent !important; + + &:hover, + &.active { + color: $text-100 !important; + } + + &.active { + background-color: $blue-500 !important; + border-color: $blue-500 !important; + } + + &:hover { + background-color: $blue-400 !important; + border-color: $blue-400 !important; + } +} + +.btn-success { + color: $text-100 !important; + border-color: $green-500 !important; + background: $green-500 !important; + + &:hover { + background-color: $green-400 !important; + border-color: $green-400 !important; + } +} + +.btn-outline-success { + color: $green-500 !important; + border-color: $green-500 !important; + background: transparent !important; + + &:hover, + &.active { + color: $text-100 !important; + } + + &.active { + background-color: $green-500 !important; + border-color: $green-500 !important; + } + + &:hover { + background-color: $green-400 !important; + border-color: $green-400 !important; + } +} + +.btn-danger { + color: $text-100 !important; + border-color: $red-500 !important; + background: $red-500 !important; + + &:hover { + background-color: $red-400 !important; + border-color: $red-400 !important; + } +} + +.btn-outline-danger { + color: $red-500 !important; + border-color: $red-500 !important; + background: transparent !important; + + &:hover, + &.active { + color: $text-100 !important; + } + + &.active { + background-color: $red-500 !important; + border-color: $red-500 !important; + } + + &:hover { + background-color: $red-400 !important; + border-color: $red-400 !important; + } +} + +.btn-secondary { + color: $text-100 !important; + border-color: $grey-900 !important; + background: $grey-900 !important; + + &:hover { + background-color: $grey-800 !important; + border-color: $grey-800 !important; + } +} + +.btn-outline-secondary { + color: $grey-900 !important; + border-color: $grey-900 !important; + background: transparent !important; + + &:hover, + &.active { + color: $text-100 !important; + } + + &.active { + background-color: $grey-900 !important; + border-color: $grey-900 !important; + } + + &:hover { + background-color: $grey-800 !important; + border-color: $grey-800 !important; + } +} + +.btn-control { + &.btn-lock-peer.lock { + color: $red-500 !important; + &:hover { + color: $red-400 !important; + } + } + + &:hover { + background-color: transparent !important; + + &.btn-outline-primary { + color: $blue-400 !important; + } + + &.btn-outline-success { + color: $green-400 !important; + } + + &.btn-outline-danger { + color: $red-400 !important; + } + + &.btn-outline-secondary { + color: $grey-800 !important; + } + } +} + +.form-control { + background: $grey-400 !important; + border-color: transparent !important; + color: $text-200 !important; +} + +.card .form-control { + background: $grey-500 !important; +} + +.sidebar .nav-link, +.bottomNavContainer .nav-link { + color: $text-200; + + &:hover { + background: $grey-200; + } +} + +nav#sidebarMenu.col-md-3.col-lg-2.d-md-block.bg-light.sidebar.collapse, +.navbar-brand, +.bg-dark { + background-color: $grey-100 !important; + background: $grey-100 !important; +} + +.card { + background: $grey-400; +} + +.text-muted { + color: $text-500 !important; +} + +.text-danger { + color: $red-500 !important; +} + +.text-success { + color: $green-500 !important; +} + +.text-primary { + color: $blue-500 !important; +} + +.text-info { + color: $cyan-500 !important; +} + +a.text-success:focus, +a.text-success:hover { + color: $green-400 !important; +} + +a.text-danger:focus, +a.text-danger:hover { + color: $red-400 !important; +} + +a.text-info:focus, +a.text-info:hover { + color: $cyan-400 !important; +} + +.dot-running { + background-color: $green-500 !important; +} + +.card-running { + border-color: $green-500; +} + +.toggle--switch:checked + .toggleLabel::before { + background-color: $blue-500 !important; +} +.toggle--switch:checked + .toggleLabel { + background-color: mix($blue-500, #000f) !important; + border-color: $blue-500 !important; +} + +.sidebar .nav-link.active, +.bottomNavContainer .nav-link.active { + color: $blue-500 !important; +} + +hr { + border-color: $grey-600; +} + +.modal-content { + background-color: $grey-200; +} + +.modal-header, +.modal-footer { + background-color: $grey-100; + border-color: $grey-600; +} + +code { + color: $magenta-500; +} + +.close { + color: $text-200; + text-shadow: none; + + &:hover { + color: $text-300; + } +} + +.chartContainer.fullScreen { + background-color: $grey-200 !important; +} + +.popover { + background-color: $grey-700 !important; + border: none !important; +} + +.popover-body { + color: $text-200 !important; +} + +div.toast { + background-color: $grey-900 !important; + + div.toast-header { + background-color: $grey-700 !important; + color: $text-200 !important; + border-bottom-color: $grey-900 !important; + } + + div.toast-body { + background-color: $grey-800 !important; + color: $text-200 !important; + } + + div.toast-progressbar { + background-color: $blue-500 !important; + } +} + +.bs-popover-auto[x-placement^="right"] > .arrow::after, +.bs-popover-right > .arrow::after { + border-right-color: $grey-700 !important; +} + +.btn-manage-group .setting_btn_menu { + background-color: $grey-500 !important; +} + +.setting_btn_menu a:hover { + background-color: $grey-700 !important; +} + +.table { + color: $text-200 !important; + + th, + td { + border-color: $grey-700 !important; + } +} diff --git a/src/templates/header.html b/src/templates/header.html index 52684ac..bfb8e4f 100644 --- a/src/templates/header.html +++ b/src/templates/header.html @@ -15,9 +15,9 @@ - + - \ No newline at end of file +