Darkmode
This commit is contained in:
Tim Zöller
parent
0e092e670b
commit
c8b37f4720
1 changed files with 455 additions and 0 deletions
|
|
@ -528,3 +528,458 @@ h1 {
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
DARK MODE (CSS-Only, OS Preference)
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
/* Dark mode color overrides */
|
||||||
|
:root {
|
||||||
|
--dark-bg: #0f0520;
|
||||||
|
--dark-bg-alt: #1a0a30;
|
||||||
|
--dark-surface: #251040;
|
||||||
|
--dark-surface-hover: #301550;
|
||||||
|
--dark-text: #e8e8f0;
|
||||||
|
--dark-text-muted: #a8a8c0;
|
||||||
|
--dark-border: #3d2060;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base */
|
||||||
|
body {
|
||||||
|
background: var(--dark-bg);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override Bootstrap utility classes */
|
||||||
|
.bg-light {
|
||||||
|
background-color: var(--dark-surface) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-dark {
|
||||||
|
color: var(--dark-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards */
|
||||||
|
.card {
|
||||||
|
background: var(--dark-surface);
|
||||||
|
border-color: var(--neon-pink);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
box-shadow: 0 8px 20px rgba(255, 20, 147, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
background: var(--dark-surface);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-card {
|
||||||
|
background: var(--dark-surface);
|
||||||
|
border-color: var(--neon-cyan);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-card:hover {
|
||||||
|
box-shadow: 0 8px 20px rgba(0, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Timeline */
|
||||||
|
.timeline-card {
|
||||||
|
background: var(--dark-surface) !important;
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-card .text-dark {
|
||||||
|
color: var(--dark-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-card .card-title a {
|
||||||
|
color: var(--dark-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-card .fw-bold {
|
||||||
|
color: var(--dark-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
border-left-color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item::before {
|
||||||
|
border-color: var(--dark-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-date {
|
||||||
|
color: var(--dark-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Metrics */
|
||||||
|
.metric-card {
|
||||||
|
background: linear-gradient(135deg, var(--dark-surface) 0%, var(--dark-bg-alt) 100%);
|
||||||
|
border-color: var(--neon-pink);
|
||||||
|
box-shadow: 0 4px 8px rgba(255, 20, 147, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card:hover {
|
||||||
|
box-shadow: 0 6px 16px rgba(255, 20, 147, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-label {
|
||||||
|
color: var(--dark-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* File upload */
|
||||||
|
.file-upload-area {
|
||||||
|
background: linear-gradient(135deg, var(--dark-surface) 0%, var(--dark-bg-alt) 100%);
|
||||||
|
border-color: var(--neon-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-upload-area:hover,
|
||||||
|
.file-upload-area.drag-over {
|
||||||
|
background: linear-gradient(135deg, var(--dark-surface-hover) 0%, var(--dark-bg-alt) 100%);
|
||||||
|
box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headings */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text utilities */
|
||||||
|
.text-muted {
|
||||||
|
color: var(--dark-text-muted) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Avatar placeholders */
|
||||||
|
.avatar-placeholder,
|
||||||
|
.avatar-placeholder-large {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
color: var(--dark-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats */
|
||||||
|
.stat-label {
|
||||||
|
color: var(--dark-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card-hover:hover {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item:hover {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Empty states */
|
||||||
|
.empty-state {
|
||||||
|
color: var(--dark-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-icon {
|
||||||
|
color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-title {
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-message {
|
||||||
|
color: var(--dark-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Activity preview map */
|
||||||
|
.activity-preview-map {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading spinner */
|
||||||
|
.loading-spinner {
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
border-top-color: var(--neon-pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms */
|
||||||
|
.form-control,
|
||||||
|
.form-select {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control:focus,
|
||||||
|
.form-select:focus {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
border-color: var(--neon-cyan);
|
||||||
|
color: var(--dark-text);
|
||||||
|
box-shadow: 0 0 0 0.25rem rgba(0, 255, 255, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control::placeholder {
|
||||||
|
color: var(--dark-text-muted);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input groups */
|
||||||
|
.input-group-text {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal */
|
||||||
|
.modal-content {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
border-color: var(--neon-pink);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
border-bottom-color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
border-top-color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Close button */
|
||||||
|
.btn-close {
|
||||||
|
filter: invert(1) grayscale(100%) brightness(200%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dropdowns */
|
||||||
|
.dropdown-menu {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item:hover,
|
||||||
|
.dropdown-item:focus {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-divider {
|
||||||
|
border-top-color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Alerts */
|
||||||
|
.alert-success {
|
||||||
|
background-color: rgba(57, 255, 20, 0.15);
|
||||||
|
border-color: var(--neon-green);
|
||||||
|
color: var(--neon-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-danger {
|
||||||
|
background-color: rgba(220, 53, 69, 0.15);
|
||||||
|
border-color: #dc3545;
|
||||||
|
color: #ff6b7a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-info {
|
||||||
|
background-color: rgba(0, 255, 255, 0.15);
|
||||||
|
border-color: var(--neon-cyan);
|
||||||
|
color: var(--neon-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-warning {
|
||||||
|
background-color: rgba(255, 193, 7, 0.15);
|
||||||
|
border-color: var(--warning-color);
|
||||||
|
color: var(--warning-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tables */
|
||||||
|
.table {
|
||||||
|
color: var(--dark-text);
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-striped > tbody > tr:nth-of-type(odd) > * {
|
||||||
|
background-color: rgba(255, 255, 255, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-hover > tbody > tr:hover > * {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* List groups */
|
||||||
|
.list-group-item {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item:hover {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pagination */
|
||||||
|
.pagination .page-link {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination .page-link:hover {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
border-color: var(--neon-cyan);
|
||||||
|
color: var(--neon-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination .page-item.active .page-link {
|
||||||
|
background-color: var(--neon-pink);
|
||||||
|
border-color: var(--neon-pink);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination .page-item.disabled .page-link {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
color: var(--dark-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badges */
|
||||||
|
.badge {
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
a {
|
||||||
|
color: var(--neon-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--neon-pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HR */
|
||||||
|
hr {
|
||||||
|
border-top-color: var(--dark-border);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Breadcrumb */
|
||||||
|
.breadcrumb {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-item + .breadcrumb-item::before {
|
||||||
|
color: var(--dark-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-item.active {
|
||||||
|
color: var(--dark-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toast */
|
||||||
|
.toast {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-header {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
border-bottom-color: var(--dark-border);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Progress bars */
|
||||||
|
.progress {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accordion */
|
||||||
|
.accordion-item {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button:not(.collapsed) {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button:focus {
|
||||||
|
border-color: var(--neon-cyan);
|
||||||
|
box-shadow: 0 0 0 0.25rem rgba(0, 255, 255, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-body {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
code {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
color: var(--neon-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background-color: var(--dark-surface-hover);
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Offcanvas */
|
||||||
|
.offcanvas {
|
||||||
|
background-color: var(--dark-surface);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.offcanvas-header {
|
||||||
|
border-bottom-color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.offcanvas-title {
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer,
|
||||||
|
footer.bg-light {
|
||||||
|
background-color: var(--dark-surface) !important;
|
||||||
|
border-top: 3px solid var(--neon-pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer h5,
|
||||||
|
footer.bg-light h5 {
|
||||||
|
color: var(--dark-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .text-muted,
|
||||||
|
footer.bg-light .text-muted {
|
||||||
|
color: var(--dark-text-muted) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a,
|
||||||
|
footer.bg-light a {
|
||||||
|
color: var(--neon-cyan) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:hover,
|
||||||
|
footer.bg-light a:hover {
|
||||||
|
color: var(--neon-pink) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p,
|
||||||
|
footer.bg-light p {
|
||||||
|
color: var(--dark-text) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue