ENHANCEMENT: a better dark theme
Because hot water appears to be invented already
This commit is contained in:
parent
e36414b8c2
commit
f99cbfaf3e
|
@ -1,93 +1,2 @@
|
||||||
@import "~bootstrap/dist/css/bootstrap.css";
|
@import "~bootstrap/dist/css/bootstrap.css";
|
||||||
|
@import "~bootstrap-dark-5/dist/css/bootstrap-dark.css";
|
||||||
$light-bgcolor: #ffffff;
|
|
||||||
$light-textcolor: #212529;
|
|
||||||
|
|
||||||
$dark-bgcolor: #212529;
|
|
||||||
$dark-bordercolor: #656565;
|
|
||||||
$dark-textcolor: #ffffff;
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: $light-bgcolor;
|
|
||||||
color: $light-textcolor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
body {
|
|
||||||
background-color: $dark-bgcolor;
|
|
||||||
color: $dark-textcolor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
color: $dark-textcolor
|
|
||||||
}
|
|
||||||
.modal-content {
|
|
||||||
background-color: $dark-bgcolor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
border: 1px solid $dark-bordercolor;
|
|
||||||
background-color: $dark-bgcolor;
|
|
||||||
color: $dark-textcolor;
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
border: 1px solid $dark-bordercolor;
|
|
||||||
background-color: $dark-bordercolor;
|
|
||||||
color: $dark-textcolor;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border: 1px solid $dark-bordercolor;
|
|
||||||
background-color: $dark-bgcolor;
|
|
||||||
color: $dark-textcolor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tempus-dominus-widget {
|
|
||||||
background-color: $dark-bgcolor;
|
|
||||||
|
|
||||||
.date-container-decades, .date-container-years, .date-container-months, .date-container-days,
|
|
||||||
.time-container-clock, .time-container-hour, .time-container-minute, .time-container-second {
|
|
||||||
div:not(.no-highlight) {
|
|
||||||
&:hover {
|
|
||||||
background-color: $dark-bordercolor
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
&.old,
|
|
||||||
&.new {
|
|
||||||
color: $dark-bordercolor;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-container-days .dow {
|
|
||||||
color: $dark-bordercolor
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
div:hover {
|
|
||||||
background-color: $dark-bordercolor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion-item {
|
|
||||||
background-color: $dark-bgcolor;
|
|
||||||
|
|
||||||
.accordion-button {
|
|
||||||
background-color: $dark-bordercolor;
|
|
||||||
color: $dark-textcolor;
|
|
||||||
|
|
||||||
&:not(.collapsed) {
|
|
||||||
background-color: $dark-bgcolor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
@import "../base";
|
@import "assets/scss/base";
|
||||||
@import "../icons";
|
@import "assets/scss/icons";
|
||||||
@import "~@eonasdan/tempus-dominus/dist/css/tempus-dominus.css";
|
@import "~@eonasdan/tempus-dominus/dist/css/tempus-dominus.css";
|
||||||
|
|
|
@ -1,40 +1,19 @@
|
||||||
@import "../base";
|
@import "assets/scss/base";
|
||||||
@import "../icons";
|
@import "assets/scss/icons";
|
||||||
|
|
||||||
tr.norun td {
|
tr.norun td {
|
||||||
background-color: #f8d7da;
|
background-color: #f8d7da;
|
||||||
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
background-color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
|
background-color: initial;
|
||||||
color: #f8d7da;
|
|
||||||
|
|
||||||
.btn-outline-danger {
|
|
||||||
color: #f8d7da;
|
|
||||||
border-color: #f8d7da;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #f8d7da;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.running td {
|
tr.running td {
|
||||||
background-color: #d4edda;
|
background-color: #d4edda;
|
||||||
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
background-color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
|
background-color: initial;
|
||||||
color: #d4edda;
|
|
||||||
|
|
||||||
.btn-outline-success {
|
|
||||||
color: #d4edda;
|
|
||||||
border-color: #d4edda;
|
|
||||||
&:hover {
|
|
||||||
background-color: #d4edda;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
@import "../base";
|
@import "assets/scss/base";
|
|
@ -1,2 +1 @@
|
||||||
@import "~bootstrap/dist/css/bootstrap.css";
|
|
||||||
@import "assets/scss/base";
|
@import "assets/scss/base";
|
File diff suppressed because it is too large
Load Diff
|
@ -8,7 +8,8 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eonasdan/tempus-dominus": "^6.0.0-alpha14",
|
"@eonasdan/tempus-dominus": "^6.0.0-alpha14",
|
||||||
"@popperjs/core": "^2.10.2",
|
"@popperjs/core": "^2.10.2",
|
||||||
"bootstrap": "^5.1.3"
|
"bootstrap": "^5.1.3",
|
||||||
|
"bootstrap-dark-5": "^1.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@symfony/webpack-encore": "^1.6.1",
|
"@symfony/webpack-encore": "^1.6.1",
|
||||||
|
|
Loading…
Reference in New Issue