This repository has been archived on 2026-09-17. You can view files and clone it, but you cannot make any changes to its state, such as pushing and creating new issues, pull requests or comments.
nixos-config/hosts/pinix/localServices/branding/gotosocial-accent.css
pijukka 2ac9464d28 Backport confirmed GoToSocial color fixes: role badges, settings nav, form borders, dark-mode text contrast
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
2026-08-03 23:01:48 +02:00

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;
}