granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add picker item CSS variables for hover/selected states

Browse source
This commit is contained in:
Justin Edmund 2026-01-04 19:52:26 -08:00
parent 3f12de975a
commit 2140d58fe8
2 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/themes/_colors.scss
View file

@ -534,6 +534,13 @@ $segmented--control--background--segment--text--dark: $grey-60;
$segmented--control--background--segment--text--hover--dark: $grey-70;
$segmented--control--background--segment--text--checked--dark: $grey-90;
// Color Definitions: Picker (icon-based pickers like Element, Rarity, Proficiency)
// Uses darker backgrounds than segmented controls for better visibility
$picker--item--bg--hover--light: $grey-70;
$picker--item--bg--hover--dark: $grey-40;
$picker--item--bg--selected--light: $grey-75;
$picker--item--bg--selected--dark: $grey-45;
// Color Definitions: Element / Wind
$wind--bg--light: $wind-bg-10;
$wind--bg--dark: $wind-bg-10;

8
src/themes/themes.scss
View file

@ -229,6 +229,10 @@
--segmented-control-background-segment-text-hover: #{colors.$segmented--control--background--segment--text--hover--light};
--segmented-control-background-segment-text-checked: #{colors.$segmented--control--background--segment--text--checked--light};
// Light - Picker (icon-based pickers)
--picker-item-bg-hover: #{colors.$picker--item--bg--hover--light};
--picker-item-bg-selected: #{colors.$picker--item--bg--selected--light};
// Light - Extra Weapons
--extra-purple-bg: #{colors.$extra--purple--bg--light};
--extra-purple-card-bg: #{colors.$extra--purple--card--bg--light};
@ -607,6 +611,10 @@ html[data-theme='dark'] {
--segmented-control-background-segment-text-hover: #{colors.$segmented--control--background--segment--text--hover--dark};
--segmented-control-background-segment-text-checked: #{colors.$segmented--control--background--segment--text--checked--dark};
// Dark - Picker (icon-based pickers)
--picker-item-bg-hover: #{colors.$picker--item--bg--hover--dark};
--picker-item-bg-selected: #{colors.$picker--item--bg--selected--dark};
// Dark - Extra Weapons
--extra-purple-bg: #{colors.$extra--purple--bg--dark};
--extra-purple-card-bg: #{colors.$extra--purple--card--bg--dark};