Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-01 04:32:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/public/stylesheets/theme-next-dark.css
View File

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

4
src/public/stylesheets/theme-next-light.css
View File

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

8
src/public/stylesheets/theme-next/forms.css
View File

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