snxraven/peardock
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Polish dark UI buttons, tabs, and control colors
CI / test (push) Has been cancelled
Details

Browse Source 
Override Bootstrap outline/solid button variants and nav-tabs/pills
for dark surfaces, align settings subtabs with brand green, and
improve list-group, kbd, and dashboard danger actions contrast.
This commit is contained in:
snxraven
2026-07-10 23:53:21 -04:00
parent 2b6cfc644f
commit 10bd4738ce
2 changed files with 362 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/ops.css
+70 -12
View File
@@ -387,33 +387,91 @@
color: var(--text-secondary, #c8d1df);
}
.settings-subtabs {
gap: 0.35rem !important;
border: none;
}
.settings-subtabs .nav-link {
color: var(--text-secondary, #c8d1df);
background: transparent;
border: 1px solid #334155;
border-radius: 999px;
padding: 0.35rem 0.85rem;
color: var(--text-secondary, #c8d1df) !important;
background: rgba(15, 19, 26, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 999px !important;
padding: 0.4rem 0.95rem !important;
font-size: 0.85rem;
font-weight: 600;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.settings-subtabs .nav-link:hover {
color: #f4f7fb;
border-color: #64748b;
background: rgba(148, 163, 184, 0.08);
.settings-subtabs .nav-link:hover,
.settings-subtabs .nav-link:focus {
color: #f4f7fb !important;
border-color: rgba(52, 211, 153, 0.4) !important;
background: rgba(52, 211, 153, 0.1) !important;
}
.settings-subtabs .nav-link.active {
color: #0b1220;
background: linear-gradient(135deg, #7dd3fc, #38bdf8);
border-color: transparent;
color: #042f1a !important;
background: linear-gradient(135deg, #34d399, #2dd4bf) !important;
border-color: transparent !important;
box-shadow: 0 4px 14px rgba(52, 211, 153, 0.3);
}
/* Swarm / content tabs under dark panels */
#swarm-tabs.nav-tabs .nav-link,
.view .nav-tabs .nav-link {
color: var(--text-secondary, #c8d1df) !important;
}
#swarm-tabs.nav-tabs .nav-link.active,
.view .nav-tabs .nav-link.active {
color: var(--text-primary, #f4f7fb) !important;
background: #1a222e !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}
.settings-panel.hidden {
display: none !important;
}
.settings-section .form-text {
color: #8b9bb0;
font-size: 0.78rem;
}
/* Network card disconnect control alignment */
.network-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
/* Volume / hub list groups inside dark views */
.list-group-flush > .list-group-item {
background: transparent;
color: var(--text-primary, #f4f7fb);
border-color: rgba(255, 255, 255, 0.08);
}
.hub-result,
.access-hub-hit,
.volume-browse-entry {
text-align: left;
}
/* kbd chips in about/settings */
kbd {
background: #1a222e;
color: #e2e8f0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-bottom-width: 2px;
border-radius: 6px;
padding: 0.1rem 0.4rem;
font-size: 0.8em;
font-family: var(--font-mono, ui-monospace, monospace);
}
.form-hint-suggested {
font-size: 0.75rem;
color: #7dd3fc;