It’s not a bug per-say…
Harlowe is specifically designed to be a closed system, and it doesn’t expect an Author to manually use external things like CSS or JavaScript to extend the functionality of their project or of the Harlowe runtime engine.
Case in point…
The default HTML structure of the “Story”, “Passage” and “Sidebar” areas of the page are…
<tw-story tags="" style="">
<tw-passage tags="">
<tw-sidebar collapsing="false">
<tw-icon tabindex="0" alt="Undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
<tw-icon tabindex="0" alt="Redo" title="Redo">↷</tw-icon>
<!-- Author added Contents of the Sidebare -->
testo di test
</tw-sidebar>
<tw-include type="header" name="Update Sidebar">
<!-- Contents of your header tagged Passage, removed for simplisity. -->
</tw-include>
<!-- Contents of the Passage being visited, shortened for simplisity. -->
My customary inglenook
</tw-passage>
</tw-story>
When you use the (enchant:) macro to apply styling to the ?Sidebar Named Hook, the above <tw-sidebar> element structure is wrapped in a <tw-enchantment> element which is used to apply the enchantment.
eg. the following part…
<tw-sidebar collapsing="false">
<tw-icon tabindex="0" alt="Undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
<tw-icon tabindex="0" alt="Redo" title="Redo">↷</tw-icon>
<!-- Author added Contents of the Sidebare -->
testo di test
</tw-sidebar>
…becomes…
<tw-enchantment style="background-color: rgb(197, 57, 50); display: block;">
<tw-sidebar collapsing="false">
<tw-icon tabindex="0" alt="Undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
<tw-icon tabindex="0" alt="Redo" title="Redo">↷</tw-icon>
<!-- Author added Contents of the Sidebare -->
testo di test
</tw-sidebar>
</tw-enchantment>
So the enchantment is working, however your tw-sidebar CSS Rule is overriding the inline styling being applied by the enchantment.
There are a couple of ways you could achieve the colour changing outcome you want:
1: The “Harlowe” way
This would likely look something like the following Twee Notation base example. It would make use of Harlowe styling macros, to do the colour changing part, and use CSS to resize the “Sidebar” area.
note: I have left out the other CSS Rules in your example for simplicity sake.
:: StoryStylesheet
tw-sidebar {
/* your layout property assignments */
position: fixed;
top: 0;
left: 0;
width: 15%; /* padding-right of the tw-story element. */
max-height: 100%;
margin-top: 5%; /* padding-top of the tw-story element. */
padding: 0 0.5em 0.5em 0.5em;
text-align: left;
/* following needed because Harlowe uses custom elements */
background-color: inherit;
}
:: Update Sidebar [header]
(change: ?SideBar, (bg: blue))
(append: ?SideBar)[testo di test]
:: Normal
Sidebar will be the default blue
:: Special
(change: ?Sidebar, (bg:#c53932))
Sidebar default colour is overridden.
2: The “CSS” way, using a CSS Variable
The following uses a CSS variable to store the colour to use for the background colour of the “Sidebar” area, and the Harlowe (css:) macro to temporarily alter that CSS variable’s value.
note: again for simplicity I have left out most of your own CSS Rules.
:: StoryStylesheet
:root {
--bg-color: blue;
}
tw-sidebar {
/* your layout property assignments */
position: fixed;
top: 0;
left: 0;
width: 15%; /* padding-right of the tw-story element. */
max-height: 100%;
margin-top: 5%; /* padding-top of the tw-story element. */
padding: 0 0.5em 0.5em 0.5em;
text-align: left;
/* makes use of the CSS variable defined earlier */
background-color: var(--bg-color);
}
:: Update Sidebar [header]
(append: ?SideBar)[testo di test]
:: Normal
Sidebar will be the default blue
:: Special
(change: ?Sidebar, (css: "--bg-color: #c53932;"))
Sidebar default colour is overridden.
Note: The (enchant:) macro monitors the page’s HTML structure, and the macro automatically re-applies its effect each time that structure changes. For this reason it is generally recommended to use the (change:) macro instead, unless you’re dynamically altering the structure / content of the page between Passage Transitions in reaction to the end-user’s interactions with the page.
