From 4175d31b9da3c6b5f510dca627de3a41ab08af08 Mon Sep 17 00:00:00 2001 From: cryptogopher Date: Tue, 3 Mar 2026 01:31:44 +0100 Subject: [PATCH] Update and format comments --- app/assets/stylesheets/application.css | 66 +++++++++++++++----------- 1 file changed, 39 insertions(+), 27 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 00bfbe0..e73338b 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -18,10 +18,14 @@ /* Strive for simplicity: * * style elements/tags only - if possible, * * replace element/tag name with class name - if element has to be styled - * differently depending on context (e.g. form) + * differently depending on context (e.g.
; as link/button), + * * styles with multiple selectors should have all selectors with same + * specificity, to allow proper rule specificity vs order management. * - * NOTE: Style in a modular way, similar to how CSS @scope would be used, - * to make transition easier once @scope is widely available */ + * NOTE: style in a modular way, similar to how CSS @scope would be used, + * to make transition easier once @scope is widely available. */ +/* TODO: review styles with multiple selectors and try to convert them to the same + * specificity. */ :root { --color-focus-gray: #f3f3f3; --color-border-gray: #dddddd; @@ -58,7 +62,7 @@ border-color: var(--color-border-gray) !important; color: var(--color-border-gray) !important; /* NOTE: cannot set cursor with `pointer-events: none`; can be fixed by setting - * cursor on wrapping element. + * `cursor` on wrapping element. cursor: not-allowed; */ fill: var(--color-border-gray) !important; pointer-events: none !important; @@ -70,9 +74,9 @@ /* Color coding of input controls' background: - * blue - target for interaction with pointer - * gray - target for interaction with keyboard - * red - destructive, non-undoable action + * blue - target for interaction with pointer, + * gray - target for interaction with keyboard, + * red - destructive, non-undoable action. */ button, details, @@ -149,8 +153,8 @@ input[type=checkbox]:checked { appearance: checkbox; -webkit-appearance: checkbox; } -/* Hide spin buttons in input number fields */ -/* TODO: add spin buttons inside input[number]: before (-) and after (+) input */ +/* Hide spin buttons of . */ +/* TODO: add spin buttons inside : before (-) and after (+) input. */ input[type=number] { appearance: textfield; -moz-appearance: textfield; @@ -173,9 +177,9 @@ button > svg { button > svg:not(:last-child) { margin-right: 0.2em; } -/* TODO: move normal non-button links (:hover/:focus) styling here (i.e. - * page-wide, top-level) and remove from table.items - as the style should be - * same everywhere */ +/* TODO: move normal, non-button links (:hover/:focus) styling here (i.e. + * page-wide, top-level) and remove from `table.items` - as the style should be + * same everywhere. */ .button:focus-visible, button:focus-visible, input[type=submit]:focus-visible { @@ -184,7 +188,7 @@ input[type=submit]:focus-visible { input:focus-visible, select:focus-visible, select:focus-within, -/* TODO: how to achieve summary:focus-within for ::details-content? */ +/* TODO: how to achieve `summary:focus-within` for `::details-content`? */ summary:focus-visible, textarea:focus-visible { accent-color: var(--color-dark-blue); @@ -226,8 +230,8 @@ textarea:read-only { } -/* NOTE: collapse gaps around empty rows (`topside`) once possible - * with grid-collapse property and remove alternative grid-template +/* NOTE: collapse gaps around empty rows (`topside`) once possible with + * `grid-collapse` property and remove alternative `grid-template-areas`. * https://github.com/w3c/csswg-drafts/issues/5813 */ body { display: grid; @@ -344,8 +348,8 @@ header { .flash > div { grid-column: 2; } -/* NOTE: currently flash button inherits some unnecessary styles from generic - * button. */ +/* NOTE: currently flash