russellballestrini/russell.ballestrini.net
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Update blog post to remove !important flags and explain CSS cascade

Browse source 
Removed !important from code examples and added explanation that
standard CSS cascade rules are sufficient because our theme CSS
loads after the UncloseAI widget CSS.
This commit is contained in:
Russell Ballestrini 2025-10-11 14:20:33 -04:00
parent 47ebb84042
commit a2cc263f1a
1 changed files with 9 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

16
content/2025-10-11-pelican-theme-upgrade-right-sidebar-toc.rst
View file

@ -159,26 +159,28 @@ The toggle buttons need to show the opposite of the current theme (when in dark
**Third-Party Widget Styling**
The UncloseAI button required special handling with hardcoded colors and ``!important`` flags to override its default styling:
The UncloseAI button required special handling with hardcoded colors to override its default styling:
.. code-block:: css
/* Dark mode (default) - white background, black text */
.uncloseai-floating-button,
#floating-ai-button {
background-color: #ffffff !important;
color: #000000 !important;
border: 2px solid #000000 !important;
background-color: #ffffff;
color: #000000;
border: 2px solid #000000;
}
/* Light mode - black background, white text */
:root.light-mode .uncloseai-floating-button,
:root.light-mode #floating-ai-button {
background-color: #000000 !important;
color: #ffffff !important;
border: 2px solid #ffffff !important;
background-color: #000000;
color: #ffffff;
border: 2px solid #ffffff;
}
The UncloseAI widget dynamically sets CSS custom properties for its button colors, but our CSS naturally overrides these defaults because our theme stylesheet loads after the widget's CSS. No ``!important`` flags are needed - standard CSS cascade rules are sufficient.
**Progressive Enhancement - Hiding Buttons Without JavaScript**
The theme toggle buttons only work when JavaScript is enabled, so they should be hidden when JavaScript is disabled. This is accomplished using progressive enhancement: