style(next): tweak the colors of the radio buttons

This commit is contained in:
Adorian Doran 2025-01-16 23:39:18 +02:00
parent 15dbaf441d
commit fe539b1647
3 changed files with 12 additions and 4 deletions

View File

@ -46,6 +46,10 @@
--input-action-button-color: #c6c6c6;
--input-action-button-hover: white;
--radio-background: #ffffff30;
--radio-hover-background: #ffffff61;
--radio-indicator-color: white;
--select-focus-background: #333;
--select-focus-text-color: var(--input-text-color);
--select-dropdown-text-color: var(--input-text-color);

View File

@ -46,6 +46,10 @@
--input-action-button-color: #575757;
--input-action-button-hover: black;
--radio-background: #0000002e;
--radio-hover-background: #0000004f;
--radio-indicator-color: black;
--select-focus-background: white;
--select-focus-text-color: var(--input-text-color);
--select-dropdown-text-color: var(--input-text-color);

View File

@ -218,15 +218,15 @@ label:has(input[type="radio"])::after {
/* The outer circle */
label:has(input[type="radio"])::before {
background: lightgray;
background: var(--radio-background);
}
label:has(input[type="radio"]:hover)::before {
background: lightgray;
background: var(--radio-hover-background);
}
label:has(input[type="radio"]:focus-visible)::before {
outline: 2px solid blue;
outline: 2px solid var(--input-focus-outline-color);
}
/* The inner circle */
@ -237,7 +237,7 @@ label:has(input[type="radio"])::after {
}
label:has(input[type="radio"]:checked)::after {
background: black;
background: var(--radio-indicator-color);
transform: scale(.5);
transition: transform 150ms ease-in;
}