diff --git a/Styles/neo.css b/Styles/neo.css index 8e9eedf..194144a 100644 --- a/Styles/neo.css +++ b/Styles/neo.css @@ -119,8 +119,15 @@ } /* Text fields: a pressed well, darker while focused, with no focus ring and no border unless a colour or a failed - validation asks for one. */ + validation asks for one. + + Fields (input, select, file-input, textarea) take the boxes' radius (--radius-box, .75rem). daisyUI gives them + --radius-field (2rem), which stays the buttons': a pill on a one-line field, and on a textarea a curve that ate into + its first and last lines. daisyUI reads the variable, so a rounded-* class at the call site (the composer's) still + wins. */ @utility input { + --radius-field: var(--radius-box); + &:not(:where(.input-ghost)) { background-color: var(--color-base-100); background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light)); @@ -141,6 +148,8 @@ /* daisyUI draws the select's arrow with background-image, so the well here is the background colour alone. */ @utility select { + --radius-field: var(--radius-box); + &:not(:where(.select-ghost)) { background-color: var(--color-base-100); box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light); @@ -168,9 +177,6 @@ } } -/* A field's radius (--radius-field, 2rem) makes a pill of a one-line input, but on a box several lines tall it curves - into the first and last lines: a textarea takes the boxes' radius. daisyUI reads the variable, so a rounded-* class - at the call site (the composer's) still wins. */ @utility textarea { --radius-field: var(--radius-box); @@ -193,6 +199,8 @@ } @utility file-input { + --radius-field: var(--radius-box); + &:not(:where(.file-input-ghost)) { background-color: var(--color-base-100); background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));