Harmonize filter and toolbar button colors with dark teal UI
Release rolling / release (push) Has been cancelled
Release rolling / release (push) Has been cancelled
Replace solid green/yellow image filter fills with a segmented control, move Prune to secondary outline, and soften warning/secondary button styles.
This commit is contained in:
Raven Scott
+63
-53
@@ -443,75 +443,81 @@
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Image Filter Buttons */
|
||||
/* Image Filter Buttons — segmented control (matches dark teal UI) */
|
||||
.view-toolbar .btn-group[aria-label="Image filters"] {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 3px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.view-toolbar .btn-group[aria-label="Image filters"] > .image-filter-btn {
|
||||
border-radius: 6px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.image-filter-btn {
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--accent-primary);
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
color: var(--text-secondary) !important;
|
||||
transition: all var(--transition-fast);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.image-filter-btn:hover {
|
||||
background: rgba(45, 212, 191, 0.1);
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--accent-primary);
|
||||
background: var(--bg-hover) !important;
|
||||
border-color: rgba(45, 212, 191, 0.35) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.image-filter-btn.active {
|
||||
background: var(--accent-primary);
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--bg-primary);
|
||||
background: rgba(45, 212, 191, 0.14) !important;
|
||||
border-color: var(--accent-primary) !important;
|
||||
color: var(--accent-primary) !important;
|
||||
box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.18);
|
||||
}
|
||||
|
||||
/* Used filter button - green with black text (default) */
|
||||
.image-filter-btn[data-filter="used"] {
|
||||
background: #28a745;
|
||||
border-color: #28a745;
|
||||
color: #000;
|
||||
.image-filter-btn.active:hover {
|
||||
background: rgba(45, 212, 191, 0.2) !important;
|
||||
border-color: var(--accent-primary) !important;
|
||||
color: var(--accent-primary) !important;
|
||||
}
|
||||
|
||||
.image-filter-btn[data-filter="used"]:hover {
|
||||
background: #218838;
|
||||
border-color: #218838;
|
||||
color: #000;
|
||||
/* Semantic accent on icons only — not whole-button fills */
|
||||
.image-filter-btn[data-filter="used"] > i {
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
/* Used filter button - darker green when active */
|
||||
.image-filter-btn[data-filter="used"].active {
|
||||
background: #1e7e34;
|
||||
border-color: #1e7e34;
|
||||
color: #000;
|
||||
.image-filter-btn[data-filter="unused"] > i {
|
||||
color: var(--accent-warning);
|
||||
}
|
||||
|
||||
.image-filter-btn[data-filter="used"].active:hover {
|
||||
background: #1c7430;
|
||||
border-color: #1c7430;
|
||||
color: #000;
|
||||
.image-filter-btn[data-filter="all"] > i {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Unused filter button - yellow with black text (default) */
|
||||
.image-filter-btn[data-filter="unused"] {
|
||||
background: #ffc107;
|
||||
border-color: #ffc107;
|
||||
color: #000;
|
||||
.image-filter-btn.active > i {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.image-filter-btn[data-filter="unused"]:hover {
|
||||
background: #e0a800;
|
||||
border-color: #e0a800;
|
||||
color: #000;
|
||||
/* Count pills inside filters stay muted; active inherits teal */
|
||||
.image-filter-btn .badge {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: var(--text-secondary) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2em 0.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Unused filter button - darker yellow when active */
|
||||
.image-filter-btn[data-filter="unused"].active {
|
||||
background: #d39e00;
|
||||
border-color: #d39e00;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.image-filter-btn[data-filter="unused"].active:hover {
|
||||
background: #c69500;
|
||||
border-color: #c69500;
|
||||
color: #000;
|
||||
.image-filter-btn.active .badge {
|
||||
background: rgba(45, 212, 191, 0.18) !important;
|
||||
color: var(--accent-primary) !important;
|
||||
border-color: rgba(45, 212, 191, 0.25);
|
||||
}
|
||||
|
||||
#sidebar.collapsed .nav-label,
|
||||
@@ -2799,13 +2805,14 @@
|
||||
}
|
||||
|
||||
.btn-outline-warning {
|
||||
border-color: var(--accent-warning);
|
||||
color: var(--accent-warning);
|
||||
border-color: rgba(251, 191, 36, 0.32);
|
||||
color: #e8c878;
|
||||
}
|
||||
|
||||
.btn-outline-warning:hover {
|
||||
background: var(--accent-warning);
|
||||
color: var(--text-primary);
|
||||
background: rgba(251, 191, 36, 0.1);
|
||||
border-color: rgba(251, 191, 36, 0.5);
|
||||
color: #fef3c7;
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
@@ -2818,13 +2825,16 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Secondary outline — page-level utility actions (Prune, cache, etc.) */
|
||||
.btn-outline-secondary {
|
||||
border-color: var(--text-muted);
|
||||
border-color: rgba(255, 255, 255, 0.14);
|
||||
color: var(--text-secondary);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-secondary:hover {
|
||||
background: var(--text-muted);
|
||||
background: var(--bg-hover);
|
||||
border-color: rgba(255, 255, 255, 0.22);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user