217 lines
4.9 KiB
CSS
217 lines
4.9 KiB
CSS
/* LIGHT MODE (default) */
|
|
:root {
|
|
--bs-body-bg: #f8f9fa; /* Light background */
|
|
--bs-body-color: #212529; /* Dark text */
|
|
|
|
--bs-primary: #007bff;
|
|
--bs-primary-bg-subtle: #cce5ff;
|
|
--bs-primary-border-subtle: #80bdff;
|
|
--bs-primary-text-emphasis: #004085;
|
|
|
|
--bs-secondary: #6c757d;
|
|
--bs-secondary-bg-subtle: #e2e3e5;
|
|
--bs-secondary-border-subtle: #c8cbcf;
|
|
--bs-secondary-text-emphasis: #383d41;
|
|
|
|
--bs-success: #198754;
|
|
--bs-success-bg-subtle: #d4edda;
|
|
--bs-success-border-subtle: #a3cfbb;
|
|
--bs-success-text-emphasis: #155724;
|
|
|
|
--bs-danger: #dc3545;
|
|
--bs-danger-bg-subtle: #f8d7da;
|
|
--bs-danger-border-subtle: #f1aeb5;
|
|
--bs-danger-text-emphasis: #721c24;
|
|
|
|
--bs-warning: #ffc107;
|
|
--bs-warning-bg-subtle: #fff3cd;
|
|
--bs-warning-border-subtle: #ffeeba;
|
|
--bs-warning-text-emphasis: #856404;
|
|
|
|
--bs-info: #17a2b8;
|
|
--bs-info-bg-subtle: #d1ecf1;
|
|
--bs-info-border-subtle: #bee5eb;
|
|
--bs-info-text-emphasis: #0c5460;
|
|
|
|
--bs-light: #f8f9fa;
|
|
--bs-light-bg-subtle: #ffffff;
|
|
--bs-light-border-subtle: #d6d8db;
|
|
--bs-light-text-emphasis: #6c757d;
|
|
|
|
--bs-dark: #343a40;
|
|
--bs-dark-bg-subtle: #212529;
|
|
--bs-dark-border-subtle: #1d2124;
|
|
--bs-dark-text-emphasis: #ffffff;
|
|
|
|
--bs-border-color: #dee2e6; /* Default border color */
|
|
}
|
|
|
|
/* DARK MODE */
|
|
[data-bs-theme="dark"] {
|
|
--bs-body-bg: #121212;
|
|
--bs-body-color: #e9ecef;
|
|
|
|
--bs-primary: #1e90ff;
|
|
--bs-primary-bg-subtle: #1c2b36;
|
|
--bs-primary-border-subtle: #374b58;
|
|
--bs-primary-text-emphasis: #a0c4ff;
|
|
|
|
--bs-secondary: #adb5bd;
|
|
--bs-secondary-bg-subtle: #2d3238;
|
|
--bs-secondary-border-subtle: #3e444a;
|
|
--bs-secondary-text-emphasis: #ced4da;
|
|
|
|
--bs-success: #00c851;
|
|
--bs-success-bg-subtle: #1b3425;
|
|
--bs-success-border-subtle: #3b6147;
|
|
--bs-success-text-emphasis: #b9f6ca;
|
|
|
|
--bs-danger: #ff4444;
|
|
--bs-danger-bg-subtle: #381717;
|
|
--bs-danger-border-subtle: #633030;
|
|
--bs-danger-text-emphasis: #ffcccb;
|
|
|
|
--bs-warning: #ffbb33;
|
|
--bs-warning-bg-subtle: #3a2b19;
|
|
--bs-warning-border-subtle: #67512e;
|
|
--bs-warning-text-emphasis: #ffd700;
|
|
|
|
--bs-info: #33b5e5;
|
|
--bs-info-bg-subtle: #182e38;
|
|
--bs-info-border-subtle: #305564;
|
|
--bs-info-text-emphasis: #66d1ff;
|
|
|
|
--bs-light: #343a40;
|
|
--bs-light-bg-subtle: #2c3137;
|
|
--bs-light-border-subtle: #464b50;
|
|
--bs-light-text-emphasis: #e9ecef;
|
|
|
|
--bs-dark: #ffffff;
|
|
--bs-dark-bg-subtle: #f8f9fa;
|
|
--bs-dark-border-subtle: #e9ecef;
|
|
--bs-dark-text-emphasis: #121212;
|
|
|
|
--bs-border-color: #495057;
|
|
}
|
|
|
|
|
|
[data-bs-theme="dark"] .shadow {
|
|
box-shadow: var(--bs-box-shadow) !important;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .shadow-sm {
|
|
box-shadow: var(--bs-box-shadow-sm) !important;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .shadow-lg {
|
|
box-shadow: var(--bs-box-shadow-lg) !important;
|
|
}
|
|
|
|
:root {
|
|
--bs-primary: var(--primary);
|
|
--bs-secondary: var(--secondary);
|
|
--bs-body-bg: var(--background);
|
|
--bs-body-color: var(--text-color);
|
|
}
|
|
|
|
[data-bs-theme="dark"] {
|
|
--bs-primary: var(--primary);
|
|
--bs-secondary: var(--secondary);
|
|
--bs-body-bg: var(--background);
|
|
--bs-body-color: var(--text-color);
|
|
}
|
|
|
|
|
|
/* Dark Mode Toggle Button */
|
|
/* Hide the default checkbox */
|
|
#color-mode-toggle input[type=checkbox] {
|
|
height: 0;
|
|
width: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
/* Style the switch */
|
|
#color-mode-toggle label {
|
|
cursor: pointer;
|
|
width: 70px;
|
|
height: 30px;
|
|
background: grey;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-radius: 30px;
|
|
position: relative;
|
|
padding: 5px 15px;
|
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* The moving toggle circle */
|
|
#color-mode-toggle label:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* Sun and Moon Icons */
|
|
.icon {
|
|
font-size: 15px;
|
|
position: absolute;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* Position Sun on the left */
|
|
.sun {
|
|
left: 10px;
|
|
/* color: var(--bs-dark) */
|
|
color: var(--sun-color);
|
|
}
|
|
|
|
/* Position Moon on the right */
|
|
.moon {
|
|
right: 10px;
|
|
/* color: var(--bs-light); */
|
|
color: var(--sun-color);
|
|
}
|
|
|
|
/* Move the toggle circle when checked */
|
|
#color-mode-toggle input:checked + label {
|
|
background: var(--bs-light);
|
|
}
|
|
|
|
#color-mode-toggle input:checked + label:after {
|
|
left: calc(100% - 25px);
|
|
background: var(--bs-dark);
|
|
}
|
|
|
|
/* Hide moon when in dark mode */
|
|
#color-mode-toggle input:checked + label .sun {
|
|
opacity: 100;
|
|
}
|
|
|
|
#color-mode-toggle input:checked + label .moon {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Hide sun when in light mode */
|
|
#color-mode-toggle input:not(:checked) + label .moon {
|
|
opacity: 100;
|
|
}
|
|
|
|
#color-mode-toggle input:not(:checked) + label .sun {
|
|
opacity: 0;
|
|
}
|
|
|
|
.line-number {
|
|
display: inline-block;
|
|
width: 30px;
|
|
text-align: right;
|
|
margin-right: 10px;
|
|
color: #888;
|
|
} |