Files
PyRIGS/pipeline/source_assets/scss/dark_screen.scss
Arona Jones 56bbf4c17c FIX #426: Override autofill styles in dark mode
Not super pretty, but you can at least read it!
2021-04-19 16:09:55 +01:00

137 lines
3.5 KiB
SCSS

[data-theme='dark'] {
$theme-colors: (
"success": #3AB54A,
"warning": #FFE89B,
"danger": #BF1E2E,
"info": #25AAE2,
"primary": #3A52A2
);
@import "custom-variables";
@import 'node_modules/@forevolve/bootstrap-dark/scss/bootstrap-dark.scss';
background: #222;
color: $gray-100;
$darktheme: #121416;
.navbar {
background-color: #111111 !important;
}
.dropdown-menu {
box-shadow: 0 0.5rem 1rem black;
color: $gray-100;
background: $darktheme;
}
.form-control:not(.btn) {
background-color: $darktheme;
color: $gray-100;
}
.btn-light, .popover, .popover-header, .popover-body, .status {
background-color: $darktheme !important;
color: $gray-100 !important;
border-color: $darktheme;
}
.bs-popover-right > .arrow::after {
border-right-color: $darktheme;
}
.bs-popover-left > .arrow::after {
border-left-color: $darktheme;
}
.bs-popover-top > .arrow::after {
border-top-color: $darktheme;
}
.bs-popover-bottom > .arrow::after {
border-bottom-color: $darktheme;
}
a {
color: $blue;
}
.badge, .btn-success, .bg-warning {
color: black;
}
.badge-dark, .badge-secondary, .btn-primary {
color: $gray-100;
}
.input-group-text {
border-color: $darktheme;
}
.btn-secondary, .btn-info {
color: white;
}
.page-item.disabled {
opacity: 0.5;
}
.bg-light {
color: black;
background-color: $gray-200 !important;
border-radius: 0.2em;
}
.fc-day-today {
background-color: transparent !important;
border: 0.2em solid $info !important;
}
.fc-daygrid-dot-event {
color: white !important;
}
.table {
border-collapse: separate !important;
border-spacing: 0;
}
.table tr th {
border-right: 0 !important;
}
.table tr td {
border-left: 0 !important;
}
.table tr td:not(:last-child) {
border-right: 0 !important;
}
@each $color, $value in $theme-colors {
.table-#{$color} {
> td,th {
border: 0.3em solid theme-color-level($color, -6) !important;
}
> * {
color: white !important;
background-color: #222 !important;
}
}
}
del {
color: black;
background-color: $danger;
border-radius: 3px;
}
ins {
color: black;
background-color: $success;
border-radius: 3px;
}
pre {
background: $gray-600;
color: white;
}
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 $input-focus-width rgba($primary, 0.7) !important;
}
.source {
color: white !important;
}
.embed_container {
border-color: #3853a4 !important;
background: #222;
color: $gray-100;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid $info;
-webkit-text-fill-color: white;
-webkit-box-shadow: 0 0 0px 1000px rgba($info, .3) inset;
transition: background-color 5000s ease-in-out 0s;
}
}