diff --git a/scss/westgate/_controls.scss b/scss/westgate/_controls.scss index a06a6fc..4efec38 100644 --- a/scss/westgate/_controls.scss +++ b/scss/westgate/_controls.scss @@ -498,6 +498,36 @@ table[component="notification/table"] a[data-type]:focus { color: #f2dddd; } +.page-flags .filter-btn, +.page-flags [component="flags/filters"] .btn, +.page-flags [component="flags/bulk-actions"] .btn { + color: var(--wg-text-soft) !important; +} + +.page-flags [component="flags/filters"] .btn-warning { + --bs-btn-color: var(--wg-text-soft); + --bs-btn-bg: rgba(8, 7, 10, 0.12); + --bs-btn-border-color: rgba(216, 194, 138, 0.28); + --bs-btn-hover-color: var(--wg-text); + --bs-btn-hover-bg: rgba(194, 163, 90, 0.09); + --bs-btn-hover-border-color: rgba(216, 194, 138, 0.46); + --bs-btn-active-color: var(--wg-text); + --bs-btn-active-bg: rgba(194, 163, 90, 0.12); + --bs-btn-active-border-color: rgba(216, 194, 138, 0.5); + background-image: linear-gradient(to bottom, rgba(255, 244, 221, 0.018), rgba(0, 0, 0, 0.06)); + box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035); +} + +.page-flags [component="flags/filters"] .caret { + color: var(--wg-gold) !important; + opacity: 0.8 !important; +} + +.page-flags [component="flags/filters"] .text-bg-primary, +.page-flags [component="flags/filters"] .text-bg-primary .btn { + color: var(--wg-ledger-ink) !important; +} + :focus-visible { outline: 2px solid var(--wg-focus) !important; outline-offset: 2px; diff --git a/scss/westgate/_surfaces.scss b/scss/westgate/_surfaces.scss index 24cda57..e9be80c 100644 --- a/scss/westgate/_surfaces.scss +++ b/scss/westgate/_surfaces.scss @@ -295,3 +295,43 @@ li[component="category/topic"] .user-icon { color: var(--wg-text) !important; font-weight: 600; } + +.page-flags [component="flags/filters"] { + border-bottom-color: rgba(194, 163, 90, 0.12) !important; +} + +.page-flags [component="flags/list"] { + --bs-table-bg: transparent; + --bs-table-color: var(--wg-text-soft); + --bs-table-border-color: rgba(194, 163, 90, 0.1); + --bs-table-hover-bg: rgba(194, 163, 90, 0.04); + --bs-table-hover-color: var(--wg-text); + color: var(--wg-text-soft) !important; +} + +.page-flags [component="flags/list"] :where(th, td) { + color: var(--wg-text-soft) !important; + border-color: rgba(194, 163, 90, 0.1) !important; +} + +.page-flags [component="flags/list"] thead :where(th, td) { + color: var(--wg-ledger-ink-muted) !important; +} + +.page-flags [component="flags/list"] a.text-reset { + color: var(--wg-text-muted) !important; +} + +.page-flags [component="flags/list"] a.text-reset:hover, +.page-flags [component="flags/list"] a.text-reset:focus { + color: var(--wg-text) !important; +} + +.page-flags [component="flags/list"] input[type="checkbox"] { + accent-color: var(--wg-gold); +} + +.page-flags [component="flags/list"] .badge, +.page-flags .card.card-header { + color: var(--wg-text) !important; +}