Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-18 20:56:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): use the new check box and radio button style only for the elements using the "tn-checkbox" and "tn-radio" CSS classes

Browse Source
This commit is contained in:
Adorian Doran 2025-01-24 22:35:08 +02:00
parent b43c85157b
commit ed201ff9a4
1 changed files with 26 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -186,23 +186,20 @@ optgroup {
/* Check box & radio button commons */ /* Check box & radio button commons */
/* The parent label */ /* The parent label */
label:has(>input[type="radio"]), label.tn-radio,
label:has(>input[type="checkbox"]) { label.tn-checkbox {
--box-size: 1em; --box-size: 1em;
--box-label-gap: .5em; --box-label-gap: .5em;
position: relative; position: relative;
user-select: none;
}
label:has(>input[type="radio"]),
label:has(>input[type="checkbox"]) {
padding-left: calc(var(--box-size) + var(--box-label-gap)) !important; padding-left: calc(var(--box-size) + var(--box-label-gap)) !important;
user-select: none;
} }
/* The original input */ /* The original input */
label > input[type="radio"], label.tn-radio > input[type="radio"],
label > input[type="checkbox"] { label.tn-checkbox > input[type="checkbox"] {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -211,10 +208,10 @@ label > input[type="checkbox"] {
opacity: 0 !important; opacity: 0 !important;
} }
label:has(>input[type="radio"])::before, label.tn-radio::before,
label:has(>input[type="radio"])::after, label.tn-radio::after,
label:has(>input[type="checkbox"])::before, label.tn-checkbox::before,
label:has(>input[type="checkbox"])::after { label.tn-checkbox::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -224,20 +221,20 @@ label:has(>input[type="checkbox"])::after {
height: var(--box-size); height: var(--box-size);
} }
label:has(>input[type="radio"]:focus-visible)::before, label.tn-radio:has(>input[type="radio"]:focus-visible)::before,
label:has(>input[type="checkbox"]:focus-visible)::before { label.tn-checkbox:has(>input[type="checkbox"]:focus-visible)::before {
outline: 2px solid var(--input-focus-outline-color); outline: 2px solid var(--input-focus-outline-color);
} }
/* Check boxes */ /* Check boxes */
/* The check box background */ /* The check box background */
label:has(>input[type="checkbox"])::before { label.tn-checkbox::before {
border-radius: 3px; border-radius: 3px;
background: var(--radio-checkbox-background); background: var(--radio-checkbox-background);
} }
label:has(>input[type="checkbox"]:not(:disabled)):hover:before { label.tn-checkbox:has(>input[type="checkbox"]:not(:disabled)):hover:before {
background: var(--radio-checkbox-hover-background); background: var(--radio-checkbox-hover-background);
} }
@ -250,7 +247,7 @@ label:has(>input[type="checkbox"]:not(:disabled)):hover:before {
} }
/* The tick mark */ /* The tick mark */
label:has(>input[type="checkbox"])::after { label.tn-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-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-position: center center;
mask-size: .95em; mask-size: .95em;
@ -261,7 +258,7 @@ label:has(>input[type="checkbox"])::after {
opacity 300ms linear; opacity 300ms linear;
} }
label:has(>input[type="checkbox"]:checked)::after { label.tn-checkbox:has(>input[type="checkbox"]:checked)::after {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
transition: opacity 100ms ease-in-out; transition: opacity 100ms ease-in-out;
@ -270,17 +267,17 @@ label:has(>input[type="checkbox"]:checked)::after {
/* Radio buttons */ /* Radio buttons */
label:has(>input[type="radio"])::before, label.tn-radio::before,
label:has(>input[type="radio"])::after { label.tn-radio::after {
border-radius: 50%; border-radius: 50%;
} }
/* The outer circle */ /* The outer circle */
label:has(>input[type="radio"])::before { label.tn-radio::before {
background: var(--radio-checkbox-background); background: var(--radio-checkbox-background);
} }
label:has(>input[type="radio"]:not(:disabled)):hover::before { label.tn-radio:has(>input[type="radio"]:not(:disabled)):hover::before {
background: var(--radio-checkbox-hover-background); background: var(--radio-checkbox-hover-background);
} }
@ -293,7 +290,7 @@ label:has(>input[type="radio"]:not(:disabled)):hover::before {
} }
/* The inner circle */ /* The inner circle */
label:has(>input[type="radio"])::after { label.tn-radio::after {
background: var(--radio-checkbox-indicator-color); background: var(--radio-checkbox-indicator-color);
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
@ -301,7 +298,7 @@ label:has(>input[type="radio"])::after {
transform 300ms ease-in; transform 300ms ease-in;
} }
label:has(>input[type="radio"]:checked)::after { label.tn-radio:has(>input[type="radio"]:checked)::after {
transform: scale(.5); transform: scale(.5);
opacity: 1; opacity: 1;
transition: opacity 150ms linear; transition: opacity 150ms linear;
@ -310,10 +307,10 @@ label:has(>input[type="radio"]:checked)::after {
/* Disabled check boxes and radio buttons */ /* Disabled check boxes and radio buttons */
label:has(> input[type="radio"]:disabled)::before, label.tn-radio:has(> input[type="radio"]:disabled)::before,
label:has(> input[type="radio"]:disabled)::after, label.tn-radio:has(> input[type="radio"]:disabled)::after,
label:has(> input[type="checkbox"]:disabled)::before, label.tn-checkbox:has(> input[type="checkbox"]:disabled)::before,
label:has(> input[type="checkbox"]:disabled)::after { label.tn-checkbox:has(> input[type="checkbox"]:disabled)::after {
opacity: .5; opacity: .5;
} }