whitepaper HTML: surgical override for uncloseai button (was hidden by all:revert)

Previous commit used `all: revert` on the floating button to cancel
docutils's blanket `body > *` rule. Too aggressive — it also removed
uncloseai's own `position: fixed`, `bottom`, `right`, `width`,
`background`, `color`, `border` declarations, making the button
disappear entirely.

Replace with a tight override: only the five properties docutils's
blanket rule sets (background-color, line-height, padding, margin,
max-width) get reset with !important. Everything else falls through
to .uncloseai-floating-button's own stylesheet, so the button
re-appears in its designed 121px pill, bottom-right, black-on-white.
This commit is contained in:
russell@unturf.com 2026-04-19 18:36:08 -04:00
parent 3cb008dd9f
commit f57de49f7b
2 changed files with 22 additions and 12 deletions

View file

@ -38,16 +38,21 @@ main > h1, main > h2, section > h2 {{
h1.title .period {{
color: #227842;
}}
/* docutils's responsive.css blanket-pads every `body > *`, which
explodes the uncloseai floating button to nearly half the viewport.
Revert the cascade inside that button so its own stylesheet wins. */
/* docutils's responsive.css applies a blanket rule to every `body > *`
that sets `background-color: white; line-height: 1.6; padding: 0.5rem
calc(29% - 7.2rem); margin: auto; max-width: 100rem`. The uncloseai
floating button gets appended to <body> and inherits those rules —
exploding it to nearly half the viewport and painting its background
white (which hides the black pill). Override just the damaged
properties so uncloseai's own stylesheet still supplies position,
width, height, background, border, and color. */
body > button#floating-ai-button,
body > .uncloseai-floating-button {{
all: revert;
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
background-color: transparent !important;
max-width: calc(100vw - 20px) !important;
background-color: unset !important;
line-height: normal !important;
}}
/* Click-to-zoom lightbox for diagrams. */
main img, section img {{

View file

@ -825,16 +825,21 @@ main > h1, main > h2, section > h2 {
h1.title .period {
color: #227842;
}
/* docutils's responsive.css blanket-pads every `body > *`, which
explodes the uncloseai floating button to nearly half the viewport.
Revert the cascade inside that button so its own stylesheet wins. */
/* docutils's responsive.css applies a blanket rule to every `body > *`
that sets `background-color: white; line-height: 1.6; padding: 0.5rem
calc(29% - 7.2rem); margin: auto; max-width: 100rem`. The uncloseai
floating button gets appended to <body> and inherits those rules —
exploding it to nearly half the viewport and painting its background
white (which hides the black pill). Override just the damaged
properties so uncloseai's own stylesheet still supplies position,
width, height, background, border, and color. */
body > button#floating-ai-button,
body > .uncloseai-floating-button {
all: revert;
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
background-color: transparent !important;
max-width: calc(100vw - 20px) !important;
background-color: unset !important;
line-height: normal !important;
}
/* Click-to-zoom lightbox for diagrams. */
main img, section img {