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:
parent
3cb008dd9f
commit
f57de49f7b
2 changed files with 22 additions and 12 deletions
|
|
@ -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 {{
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue