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

add elemental text color on segment hover

Browse source
This commit is contained in:
Justin Edmund 2025-12-19 12:26:43 -08:00
parent 1bac7fc846
commit 5e62b2160a
1 changed files with 79 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/lib/components/ui/segmented-control/segment.module.scss
View file

@ -100,7 +100,6 @@
&[data-state='checked'] .label { &[data-state='checked'] .label {
background: var(--segmented-control-blended-segment-bg-checked); background: var(--segmented-control-blended-segment-bg-checked);
color: var(--segmented-control-blended-segment-text-checked); color: var(--segmented-control-blended-segment-text-checked);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
} }
} }
@ -123,3 +122,82 @@
box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
} }
} }
// Element-specific styles (override checked state)
.fire {
&[data-state='checked'] .label {
background: var(--fire-nav-selected-bg);
color: var(--fire-nav-selected-text);
}
&:hover:not([data-state='checked']) .label {
background: var(--fire-nav-selected-bg);
color: var(--fire-nav-selected-text);
opacity: 0.7;
}
}
.water {
&[data-state='checked'] .label {
background: var(--water-nav-selected-bg);
color: var(--water-nav-selected-text);
}
&:hover:not([data-state='checked']) .label {
background: var(--water-nav-selected-bg);
color: var(--water-nav-selected-text);
opacity: 0.7;
}
}
.earth {
&[data-state='checked'] .label {
background: var(--earth-nav-selected-bg);
color: var(--earth-nav-selected-text);
}
&:hover:not([data-state='checked']) .label {
background: var(--earth-nav-selected-bg);
color: var(--earth-nav-selected-text);
opacity: 0.7;
}
}
.wind {
&[data-state='checked'] .label {
background: var(--wind-nav-selected-bg);
color: var(--wind-nav-selected-text);
}
&:hover:not([data-state='checked']) .label {
background: var(--wind-nav-selected-bg);
color: var(--wind-nav-selected-text);
opacity: 0.7;
}
}
.light {
&[data-state='checked'] .label {
background: var(--light-nav-selected-bg);
color: var(--light-nav-selected-text);
}
&:hover:not([data-state='checked']) .label {
background: var(--light-nav-selected-bg);
color: var(--light-nav-selected-text);
opacity: 0.7;
}
}
.dark {
&[data-state='checked'] .label {
background: var(--dark-nav-selected-bg);
color: var(--dark-nav-selected-text);
}
&:hover:not([data-state='checked']) .label {
background: var(--dark-nav-selected-bg);
color: var(--dark-nav-selected-text);
opacity: 0.7;
}
}