136 lines
3.3 KiB
CSS
136 lines
3.3 KiB
CSS
/* Dark Mode Styles */
|
|
body, select, textarea {
|
|
--body-background-color: 51, 51, 51;
|
|
--base-font-color: 255, 255, 255;
|
|
background-color: rgb(var(--body-background-color)) !important;
|
|
color: rgb(var(--base-font-color)) !important;
|
|
}
|
|
.card {
|
|
background-color: rgb(var(--body-background-color)) !important;
|
|
border: 1px solid #999;
|
|
color: rgb(var(--base-font-color)) !important;
|
|
}
|
|
|
|
a {
|
|
color: #add8e6;
|
|
}
|
|
a:hover {
|
|
color: #87ceeb; /* Slightly brighter blue on hover for accessibility */
|
|
}
|
|
|
|
.dark-card {
|
|
background-color: rgb(var(--body-background-color)) !important;
|
|
color: rgb(var(--base-font-color)) !important;
|
|
}
|
|
.jumbotron {
|
|
background-color: #222; /* or any other dark color */
|
|
color: rgb(var(--base-font-color)) !important; /* or any other light color */
|
|
}
|
|
|
|
.list-group {
|
|
background-color: #222 !important;
|
|
color: rgb(var(--base-font-color)) !important;
|
|
}
|
|
.list-group-item {
|
|
background-color: #222 !important;
|
|
color: rgb(var(--base-font-color)) !important;
|
|
}
|
|
#support-section {
|
|
background-color: #444 !important;
|
|
}
|
|
|
|
#pages-container-wrapper {
|
|
--background-color: rgba(255, 255, 255, 0.046) !important;
|
|
--scroll-bar-color: #4c4c4c !important;
|
|
--scroll-bar-thumb: #d3d3d3 !important;
|
|
--scroll-bar-thumb-hover: rgb(var(--base-font-color)) !important;
|
|
}
|
|
|
|
.favorite-icon img {
|
|
filter: brightness(0) invert(1) !important;
|
|
}
|
|
table thead {
|
|
background-color: #333 !important;
|
|
border: 1px solid #444;
|
|
}
|
|
table th, table td {
|
|
border: 1px solid #444 !important;
|
|
color: white;
|
|
}
|
|
.btn {
|
|
background-color: #444 !important;
|
|
border: none;
|
|
color: #fff !important;
|
|
}
|
|
.btn-primary {
|
|
background-color: #007bff !important;
|
|
border: none;
|
|
color: #fff !important;
|
|
}
|
|
.btn-secondary {
|
|
background-color: #6c757d !important;
|
|
border: none;
|
|
color: #fff !important;
|
|
}
|
|
.btn-info {
|
|
background-color: #17a2b8 !important;
|
|
border: none;
|
|
color: #fff !important;
|
|
}
|
|
.btn-danger {
|
|
background-color: #dc3545 !important;
|
|
border: none;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.btn-warning {
|
|
background-color: #ffc107 !important;
|
|
border: none;
|
|
color: #000 !important;
|
|
}
|
|
|
|
.btn-outline-secondary {
|
|
color: #fff !important;
|
|
border-color: #fff;
|
|
}
|
|
.btn-outline-secondary:hover {
|
|
background-color: #444 !important;
|
|
color: #007bff !important;
|
|
border-color: #007bff;
|
|
}
|
|
.blackwhite-icon {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
hr {
|
|
border-color: rgba(255, 255, 255, 0.6); /* semi-transparent white */
|
|
background-color: rgba(255, 255, 255, 0.6); /* for some browsers that might use background instead of border for <hr> */
|
|
}
|
|
|
|
.modal-content {
|
|
color: #fff !important;
|
|
border-color: #fff;
|
|
}
|
|
|
|
#global-buttons-container input {
|
|
background-color: #323948;
|
|
caret-color: #ffffff;
|
|
color: #ffffff;
|
|
}
|
|
#global-buttons-container input::placeholder {
|
|
color: #ffffff;
|
|
}
|
|
|
|
#global-buttons-container input:disabled::-webkit-input-placeholder { /* WebKit browsers */
|
|
color: #6E6865;
|
|
}
|
|
#global-buttons-container input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
color: #6E6865;
|
|
}
|
|
#global-buttons-container input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
color: #6E6865;
|
|
}
|
|
#global-buttons-container input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
|
|
color: #6E6865;
|
|
}
|
|
|