thepra/decePubClient
1
0 Fork 0
Code Issues Pull Requests Actions Projects Releases 1 Wiki Activity

A ticked checkbox is filled and raised, and a file input is a thumb-sized neo field
Build / Build (push) Successful in 57s
Details
Deploy / decepub.thepra.dev (push) Successful in 1m54s
Details

Browse Source 
daisyUI fills a ticked checkbox only for a colour variant, so without one it drew a tick on nothing: a checkbox without a
colour now takes the primary colour, filled and raised like a button once ticked (an inset well while not), and a
radio's dot is the primary colour. A file input's own button (Choose File, Browse…) is raised like the app's buttons
instead of daisyUI's flat neutral block, and on a touch screen the file input is 44px tall like the other fields; it had
stayed at its small 32px. Mobile/ControlsTests opens Settings' Data import/export on the narrowest phone, which the
sweep (sections closed) never reached, and photographs it in both themes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
This commit is contained in:
thepraandClaude Opus 5.5 committed 2026-10-07 19:52:26 +02:00
1 parent 356ea7b430
commit 4da6a398d7
4 files changed
+97 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Styles/neo.css
+35 -2
View File
@@ -210,21 +210,54 @@
&:not(:where(.file-input-ghost, .file-input-neutral, .file-input-primary, .file-input-secondary, .file-input-accent, .file-input-info, .file-input-success, .file-input-warning, .file-input-error, .validator:user-invalid, [aria-invalid="true"])) {
border-color: transparent;
/* its button (Choose File, Browse…) is a raised button like every other, not daisyUI's flat neutral block; a
small gap keeps its shadow inside the well */
&::file-selector-button {
margin-block: .25rem;
margin-inline-start: .25rem;
height: calc(100% - .5rem);
border: none;
border-radius: calc(var(--radius-box) - .25rem);
background-color: var(--color-base-100);
background-image: linear-gradient(145deg, color-mix(in oklab, var(--color-base-100), white var(--neo-lift)), color-mix(in oklab, var(--color-base-100), black var(--neo-sink)));
box-shadow: -2px -2px 4px var(--neo-light), 2px 2px 4px var(--neo-dark);
color: var(--color-base-content);
font-weight: 600;
}
}
}
/* Selectors: an inset well while unchecked; once checked they keep daisyUI's filled look. */
/* Selectors: an inset well while unchecked. A checked box is filled like a button of the primary colour, raised, its
tick in the colour's content (daisyUI fills one only for a colour variant: without, a tick on nothing); a checked
radio keeps the well, its dot the primary colour. A colour variant keeps its own colour. */
@utility checkbox {
&:not(:where(.checkbox-neutral, .checkbox-primary, .checkbox-secondary, .checkbox-accent, .checkbox-info, .checkbox-success, .checkbox-warning, .checkbox-error)) {
--input-color: var(--color-primary);
color: var(--color-primary-content);
}
&:not(:where(:checked, :indeterminate, [aria-checked="true"], [aria-checked="mixed"], :disabled)) {
border-color: transparent;
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
background-origin: border-box;
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
}
&:where(:checked, :indeterminate, [aria-checked="true"], [aria-checked="mixed"]):not(:disabled) {
border-color: transparent;
background-image: linear-gradient(145deg, color-mix(in oklab, var(--input-color), white var(--neo-lift)), color-mix(in oklab, var(--input-color), black var(--neo-sink)));
background-origin: border-box;
box-shadow: -2px -2px 4px var(--neo-light), 2px 2px 4px var(--neo-dark);
}
}
@utility radio {
&:not(:where(:checked, [aria-checked="true"], :disabled)) {
&:not(:where(.radio-neutral, .radio-primary, .radio-secondary, .radio-accent, .radio-info, .radio-success, .radio-warning, .radio-error)) {
--input-color: var(--color-primary);
}
&:not(:where(:disabled)) {
border-color: transparent;
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
background-origin: border-box;