Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-11 02:42:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): restyle check boxes

Browse Source
This commit is contained in:
Adorian Doran 2025-01-17 00:51:26 +02:00
parent fe539b1647
commit 398591fb1f
1 changed files with 61 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -183,19 +183,22 @@ optgroup {
line-height: 40px; line-height: 40px;
} }
/* Radio buttons */ /* Check box & radio button commons */
/* The parent label */ /* The parent label */
label:has(input[type="radio"]) { label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
position: relative; position: relative;
} }
label:has(input[type="radio"]) { label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
padding-left: 1.5em; padding-left: 1.5em;
} }
/* The original radio input */ /* The original input */
input[type="radio"] { label > input[type="radio"],
label > input[type="checkbox"] {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -205,7 +208,9 @@ input[type="radio"] {
} }
label:has(input[type="radio"])::before, label:has(input[type="radio"])::before,
label:has(input[type="radio"])::after { label:has(input[type="radio"])::after,
label:has(input[type="checkbox"])::before,
label:has(input[type="checkbox"])::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -213,6 +218,56 @@ label:has(input[type="radio"])::after {
translate: 0 -50%; translate: 0 -50%;
width: 1em; width: 1em;
height: 1em; height: 1em;
}
label:has(input[type="radio"]:focus-visible)::before,
label:has(input[type="checkbox"]:focus-visible)::before {
outline: 2px solid var(--input-focus-outline-color);
}
/* Check boxes */
/* The check box background */
label:has(input[type="checkbox"])::before {
border-radius: 3px;
background: var(--radio-background);
}
label:has(input[type="checkbox"]):hover:before {
background: var(--radio-hover-background);
}
@keyframes checkbox-checked {
from {
transform: scale(2);
} to {
transform: scale(1);
}
}
/* The tick mark */
label:has(input[type="checkbox"])::after {
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e");
mask-position: center center;
mask-size: .95em;
background-color: var(--radio-indicator-color);
transform: scale(0);
opacity: 0;
transition: transform 300ms ease-out,
opacity 300ms linear;
}
label:has(input[type="checkbox"]:checked)::after {
opacity: 1;
transform: scale(1);
transition: opacity 100ms ease-in-out;
animation: checkbox-checked 150ms ease-out;
}
/* Radio buttons */
label:has(input[type="radio"])::before,
label:has(input[type="radio"])::after {
border-radius: 50%; border-radius: 50%;
} }
@ -225,10 +280,6 @@ label:has(input[type="radio"]:hover)::before {
background: var(--radio-hover-background); background: var(--radio-hover-background);
} }
label:has(input[type="radio"]:focus-visible)::before {
outline: 2px solid var(--input-focus-outline-color);
}
/* The inner circle */ /* The inner circle */
label:has(input[type="radio"])::after { label:has(input[type="radio"])::after {
background: transparent; background: transparent;