Add site-wide components selection style

This is different from removing the overridden style for CSS
`::selection` where it affects the accessibility. This one is for
components with selection.
This commit is contained in:
Gabriel Arazas 2023-02-27 13:18:09 +08:00
parent fd2ac20444
commit e4b0cf4c4a
3 changed files with 6 additions and 2 deletions

View File

@ -129,6 +129,8 @@ table {
tbody { tbody {
tr + tr, tr:first-child { border-top: var(--border-style); } tr + tr, tr:first-child { border-top: var(--border-style); }
tr:hover { background: var(--selection-color); }
} }
th, td { padding: 0.5em; } th, td { padding: 0.5em; }

View File

@ -105,14 +105,15 @@ footer[aria-label="Site footer"] {
&[data-theme-system] { order: -2; } &[data-theme-system] { order: -2; }
.site__theme-dropdown &:hover { .site__theme-dropdown &:hover {
background: var(--accent-color); background: var(--selection-color);
color: var(--background);
cursor: pointer; cursor: pointer;
} }
&--selected { &--selected {
background: var(--base05); background: var(--base05);
color: var(--background); color: var(--background);
&:hover { color: var(--base05); }
}; };
} }

View File

@ -15,6 +15,7 @@
--background: var(--base00); --background: var(--base00);
--foreground: var(--base05); --foreground: var(--base05);
--accent-color: var(--base0C); --accent-color: var(--base0C);
--selection-color: var(--base02);
} }
$mobile-breakpoint: 600px; $mobile-breakpoint: 600px;