All tried live against the running instance and confirmed good before landing here (each change needs a full gotosocial.service restart to take effect, ~60-90s on pinix's hardware -- GoToSocial reads instance_settings once at startup and caches it): - Account page: --role-admin/--role-mod badges (were --orange2/--blue2) - Settings page sidebar: section headers + active item (were --orange2 / --blue3), and the resting state of sub-section tab buttons (was --blue1, now a neutral gray so the active tab still stands out) - Form field borders, both resting and focused (were --blue1/--blue3) - Dark mode: --fg-accent (plain link text) swaps to the brighter palette-1 instead of palette-2 -- the darker resting accent read as low-contrast against a near-black background for raw text specifically, unlike solid button fills where contrast is against the button's own text color instead
52 lines
2 KiB
CSS
52 lines
2 KiB
CSS
/* Palette-2/palette-1 resting/hover pair for the main interactive
|
|
accent (see hosts/globalServices/branding/README.md). --fg-accent
|
|
drives --link-fg (plain link text) too; light mode's palette-2 has
|
|
enough contrast against a light background, but on dark backgrounds
|
|
it read too dark/low-contrast for body text specifically -- swapped
|
|
to the brighter palette-1 in dark mode only, buttons/borders stay
|
|
palette-2 in both since those are solid fills (contrast is against
|
|
their own text color, not the page background) rather than raw text
|
|
sitting directly on the page. */
|
|
:root {
|
|
--fg-accent: #d91e4d !important;
|
|
--button-bg: #d91e4d !important;
|
|
--button-hover-bg: #ff0026 !important;
|
|
--border-accent: #d91e4d !important;
|
|
--input-border: #d91e4d !important;
|
|
--input-focus-border: #d91e4d !important;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--fg-accent: #ff0026 !important;
|
|
}
|
|
}
|
|
|
|
/* Account page: the "admin"/"moderator" role badges default to
|
|
--orange2/--blue2, clashing against the red accent everywhere else.
|
|
Kept distinguishable from each other and from the main accent
|
|
(palette-1 red for admin, palette-4 violet for moderator) rather than
|
|
collapsing both to the same red. */
|
|
:root {
|
|
--role-admin: #ff0026 !important;
|
|
--role-mod: #e000ff !important;
|
|
}
|
|
|
|
/* Settings page (/settings): the left sidebar's section headers and
|
|
active/selected item default to --orange2 and --blue3 respectively,
|
|
independent of the vars above. */
|
|
:root {
|
|
--settings-nav-header-fg: #d91e4d !important;
|
|
--settings-nav-bg-active: #d91e4d !important;
|
|
--settings-nav-border-active: #ff0026 !important;
|
|
}
|
|
|
|
/* Settings page: sub-section tab buttons (e.g. interaction policy
|
|
presets) default their *resting* (non-hover, non-active) state to
|
|
--blue1 -- hover/active already chain to --button-hover-bg/
|
|
--button-bg above and didn't need a rule here. Neutral gray for
|
|
resting, not another red, so the active tab still reads as visually
|
|
distinct from the others. */
|
|
.tab-button {
|
|
background: var(--bg-accent) !important;
|
|
}
|