334 lines
9.0 KiB
CSS
334 lines
9.0 KiB
CSS
/* Gruvbox Dark Theme for Uptime Kuma */
|
|
:root {
|
|
--gruvbox-bg: #282828; /* Dark background */
|
|
--gruvbox-fg: #ebdbb2; /* Light foreground */
|
|
--gruvbox-red: #cc241d; /* Status down */
|
|
--gruvbox-green: #98971a; /* Status up */
|
|
--gruvbox-yellow: #d79921; /* Warning/partial */
|
|
--gruvbox-blue: #458588; /* Accent/buttons */
|
|
--gruvbox-purple: #b16286; /* Charts */
|
|
}
|
|
|
|
/* Apply to entire app */
|
|
body {
|
|
background-color: var(--gruvbox-bg) !important;
|
|
color: var(--gruvbox-fg) !important;
|
|
}
|
|
|
|
/* Navigation bar */
|
|
.navbar {
|
|
background-color: #3c3836 !important; /* Slightly lighter than bg */
|
|
border-bottom: 1px solid #504945 !important;
|
|
}
|
|
|
|
/* Status cards */
|
|
.status-container .status {
|
|
background-color: #3c3836 !important;
|
|
border: 1px solid #504945 !important;
|
|
color: var(--gruvbox-fg) !important;
|
|
}
|
|
|
|
/* Status indicators */
|
|
.status.up { background-color: var(--gruvbox-green) !important; }
|
|
.status.down { background-color: var(--gruvbox-red) !important; }
|
|
.status.pending { background-color: var(--gruvbox-yellow) !important; }
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
background-color: var(--gruvbox-blue) !important;
|
|
border-color: var(--gruvbox-blue) !important;
|
|
color: var(--gruvbox-fg) !important;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #076678 !important; /* Darker blue */
|
|
}
|
|
|
|
/* Charts */
|
|
.chart-container {
|
|
background-color: #3c3836 !important;
|
|
border: 1px solid #504945 !important;
|
|
}
|
|
.chartjs-render-monitor {
|
|
border-color: var(--gruvbox-purple) !important;
|
|
}
|
|
|
|
/* Tables and text */
|
|
.table {
|
|
color: var(--gruvbox-fg) !important;
|
|
}
|
|
.text-muted {
|
|
color: #a89984 !important; /* Muted Gruvbox gray */
|
|
}
|
|
|
|
/* Notification badges */
|
|
.badge {
|
|
background-color: var(--gruvbox-yellow) !important;
|
|
color: var(--gruvbox-bg) !important;
|
|
}
|
|
|
|
/* Tooltips */
|
|
.tooltip-inner {
|
|
background-color: var(--gruvbox-blue) !important;
|
|
color: var(--gruvbox-fg) !important;
|
|
}
|
|
.tooltip.bs-tooltip-top .tooltip-arrow::before {
|
|
border-top-color: var(--gruvbox-blue) !important;
|
|
}/* Base Theme Settings */
|
|
:root {
|
|
/* Gruvbox Dark Colors */
|
|
--gruvbox-bg0: #282828; /* Dark background */
|
|
--gruvbox-bg0-hard: #1d2021; /* Darker background */
|
|
--gruvbox-bg1: #3c3836; /* Secondary background */
|
|
--gruvbox-bg2: #504945; /* Hover background */
|
|
--gruvbox-fg0: #fbf1c7; /* Light foreground */
|
|
--gruvbox-fg1: #ebdbb2; /* Main foreground */
|
|
--gruvbox-fg4: #a89984; /* Muted foreground */
|
|
|
|
/* Gruvbox Accent Colors */
|
|
--gruvbox-red: #fb4934; /* Red */
|
|
--gruvbox-green: #b8bb26; /* Green */
|
|
--gruvbox-yellow: #fabd2f; /* Yellow */
|
|
--gruvbox-blue: #83a598; /* Blue */
|
|
--gruvbox-purple: #d3869b; /* Purple */
|
|
--gruvbox-aqua: #8ec07c; /* Aqua/Cyan */
|
|
--gruvbox-orange: #fe8019; /* Orange */
|
|
|
|
/* Status Colors */
|
|
--status-up: var(--gruvbox-green); /* Gruvbox green for "up" status */
|
|
--status-down: var(--gruvbox-red); /* Gruvbox red for "down" status */
|
|
--status-warning: var(--gruvbox-yellow); /* Gruvbox yellow for warnings/maintenance */
|
|
--status-pending: var(--gruvbox-fg4); /* Gruvbox gray for pending/unknown */
|
|
}
|
|
|
|
/* Base Styles */
|
|
body, body.dark {
|
|
background-color: var(--gruvbox-bg0) !important;
|
|
color: var(--gruvbox-fg1) !important;
|
|
font-family: var(--bs-font-monospace) !important;
|
|
text-shadow: 0 0 2px rgba(235, 219, 178, 0.2);
|
|
margin: 0;
|
|
padding: 20px;
|
|
-webkit-text-size-adjust: 100%;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
line-height: var(--bs-body-line-height);
|
|
text-align: var(--bs-body-text-align);
|
|
}
|
|
|
|
/* Monitor Cards */
|
|
.monitor-list {
|
|
border: 1px solid var(--gruvbox-fg4);
|
|
background: var(--gruvbox-bg0-hard);
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.monitor-card, .item {
|
|
border-bottom: 1px solid rgba(168, 153, 132, 0.2);
|
|
padding: 15px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.monitor-card:hover, .item:hover {
|
|
background: var(--gruvbox-bg1);
|
|
box-shadow: inset 0 0 10px rgba(235, 219, 178, 0.1);
|
|
}
|
|
|
|
/* Status Badges */
|
|
.badge {
|
|
font-family: var(--bs-font-monospace);
|
|
background: transparent !important;
|
|
padding: 5px 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* Status Colors for Badges */
|
|
.badge-up, .bg-primary {
|
|
border: 1px solid var(--status-up) !important;
|
|
color: var(--status-up) !important;
|
|
}
|
|
|
|
.badge-down, .bg-danger {
|
|
border: 1px solid var(--status-down) !important;
|
|
color: var(--status-down) !important;
|
|
}
|
|
|
|
.badge-maintenance, .bg-warning {
|
|
border: 1px solid var(--status-warning) !important;
|
|
color: var(--status-warning) !important;
|
|
}
|
|
|
|
.badge-pending, .bg-secondary {
|
|
border: 1px solid var(--status-pending) !important;
|
|
color: var(--status-pending) !important;
|
|
}
|
|
|
|
/* Heartbeat Monitor Colors */
|
|
.beat-up {
|
|
background: var(--status-up) !important;
|
|
box-shadow: 0 0 5px var(--status-up) !important;
|
|
}
|
|
|
|
.beat-down {
|
|
background: var(--status-down) !important;
|
|
box-shadow: 0 0 5px var(--status-down) !important;
|
|
}
|
|
|
|
.beat-maintenance {
|
|
background: var(--status-warning) !important;
|
|
box-shadow: 0 0 5px var(--status-warning) !important;
|
|
}
|
|
|
|
.beat-pending {
|
|
background: var(--status-pending) !important;
|
|
box-shadow: 0 0 5px var(--status-pending) !important;
|
|
}
|
|
|
|
/* Status Check Icons */
|
|
.svg-inline--fa.fa-check-circle.ok {
|
|
color: var(--status-up) !important;
|
|
filter: drop-shadow(0 0 2px rgba(184, 187, 38, 0.3));
|
|
}
|
|
|
|
.svg-inline--fa.fa-times-circle.down {
|
|
color: var(--status-down) !important;
|
|
filter: drop-shadow(0 0 2px rgba(251, 73, 52, 0.3));
|
|
}
|
|
|
|
.svg-inline--fa.fa-exclamation-circle.maintenance {
|
|
color: var(--status-warning) !important;
|
|
filter: drop-shadow(0 0 2px rgba(250, 189, 47, 0.3));
|
|
}
|
|
|
|
/* Interactive Elements */
|
|
.btn, .btn-primary, .btn-add-group {
|
|
background: transparent !important;
|
|
border: 1px solid var(--gruvbox-aqua) !important;
|
|
color: var(--gruvbox-aqua) !important;
|
|
font-family: var(--bs-font-monospace);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn:hover, .btn-primary:hover, .btn-add-group:hover {
|
|
background: var(--gruvbox-aqua) !important;
|
|
color: var(--gruvbox-bg0) !important;
|
|
}
|
|
|
|
/* Button Icons */
|
|
.btn svg, .btn-primary svg, .btn-add-group svg {
|
|
color: var(--gruvbox-aqua) !important;
|
|
}
|
|
|
|
.btn:hover svg, .btn-primary:hover svg, .btn-add-group:hover svg {
|
|
color: var(--gruvbox-bg0) !important;
|
|
}
|
|
|
|
/* Terminal Effects - Modified for Gruvbox */
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
.monitor-card::after {
|
|
content: '_';
|
|
animation: blink 1s step-end infinite;
|
|
margin-left: 5px;
|
|
color: var(--gruvbox-orange);
|
|
}
|
|
|
|
/* Subtle Grain Effect (replacing CRT scan) */
|
|
.container::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+FhYWHh4d5eXlzcnJoaGhsbGxubm5pamqqqqq+vr6RkZGVlZVvb28LEKrQAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQAD6raadAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAQ0lEQVRIiWNgAAAAAgABT21qVQAAAABJRU5ErkJggg==");
|
|
background-repeat: repeat;
|
|
opacity: 0.05;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 10px !important;
|
|
background: var(--gruvbox-bg0) !important;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb, .dark::-webkit-scrollbar-thumb {
|
|
background: var(--gruvbox-bg2) !important;
|
|
border: 1px solid var(--gruvbox-fg4) !important;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
border-top: 1px solid rgba(168, 153, 132, 0.3);
|
|
margin-top: 30px;
|
|
padding-top: 20px;
|
|
font-size: 0.9em;
|
|
color: var(--gruvbox-fg4);
|
|
}
|
|
|
|
/* Links */
|
|
a {
|
|
color: var(--gruvbox-blue);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid rgba(131, 165, 152, 0.3);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--gruvbox-aqua);
|
|
border-bottom-color: var(--gruvbox-aqua);
|
|
}
|
|
|
|
/* Additional Gruvbox-Specific Styling */
|
|
.page-header {
|
|
color: var(--gruvbox-fg0);
|
|
border-bottom: 1px solid var(--gruvbox-bg1);
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--gruvbox-bg1) !important;
|
|
border: 1px solid var(--gruvbox-bg2) !important;
|
|
}
|
|
|
|
.card-header {
|
|
background-color: var(--gruvbox-bg2) !important;
|
|
color: var(--gruvbox-fg0) !important;
|
|
border-bottom: 1px solid var(--gruvbox-bg2) !important;
|
|
}
|
|
|
|
input, select, textarea {
|
|
background-color: var(--gruvbox-bg1) !important;
|
|
border: 1px solid var(--gruvbox-bg2) !important;
|
|
color: var(--gruvbox-fg1) !important;
|
|
}
|
|
|
|
input:focus, select:focus, textarea:focus {
|
|
border-color: var(--gruvbox-blue) !important;
|
|
box-shadow: 0 0 0 0.2rem rgba(131, 165, 152, 0.25) !important;
|
|
}
|
|
|
|
/* Table Styling */
|
|
.table {
|
|
color: var(--gruvbox-fg1) !important;
|
|
}
|
|
|
|
.table-dark {
|
|
background-color: var(--gruvbox-bg1) !important;
|
|
}
|
|
|
|
.table-dark td, .table-dark th, .table-dark thead th {
|
|
border-color: var(--gruvbox-bg2) !important;
|
|
}
|
|
|
|
.table-hover tbody tr:hover {
|
|
background-color: var(--gruvbox-bg2) !important;
|
|
color: va
|
|
r(--gruvbox-fg0) !important;
|
|
}
|
|
|
|
.shadow-box {
|
|
background-color: var(--gruvbox-bg0-hard) !important;
|
|
} |