kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-06 07:50:13 +01:00
Code

Merge pull request #173 from LeoEricson/v3.1-dev

Browse Source 
Add dark theme
This commit is contained in:
Donald Zou 2022-04-21 22:33:40 -04:00 committed by GitHub
commit b464fa98df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 653 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

385
src/static/css/theme/dark.css
View File

@ -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);
}
.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 */

1
src/static/css/theme/dark.css.map Normal file
View File

@ -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"}

1
src/static/css/theme/dark.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

365
src/static/css/theme/dark.scss Normal file
View File

@ -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;
}
}

4
src/templates/header.html
View File

@ -15,9 +15,9 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
<!-- THEME APPLY HERE -->
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/theme/dark.css') }}">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/theme/dark.min.css') }}">
<!-- THEME APPLY HERE -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
</head>