dev

"Heimu" is a black bar that hides its contents and reveals them when your cursor is hovering over it. The contents are hidden again when your cursor leaves the black bar.

It is named after the pinyin of its Chinese name "黑幕" (lit. "black screen") and often referred to as "spoiler" in English. (similar to the "spoiler" feature on Discord)

See also SpoilerBlur and SpoilerTags.

Installation

Usage

Wrap the contents with <span class="heimu">...</span> to hide them in a spoiler bar.

For example:

<span class="heimu">Heimu Contents</span>

Results in (hover to reveal the spoiler):

Heimu Contents

Customizing colors

There are eight CSS variables used for coloring. Red link colors are used on links to non-existing local pages.

Variable names
Light theme Dark theme
Background color --light-heimu-background-color --dark-heimu-background-color
Text color --light-heimu-text-color --dark-heimu-text-color
Link color --light-heimu-link-color --dark-heimu-link-color
Red link color --light-heimu-redlink-color --dark-heimu-redlink-color

Inline Styling

If you want other colors for a specific spoiler bar, you can achieve this by assigning the span's inline style. Note that directly assigning the CSS attributes (e.g. <span class="heimu" style="color:lime">Lime</span>) will result in the spoiler bar to present the same color both in light theme and dark theme. If you want to differentiate its color in different themes, please assign the predefined CSS variables instead. 

<span class="heimu" style="--light-heimu-background-color:purple;--dark-heimu-background-color:cyan">This spoiler bar has a purple background in light theme and a cyan backgroun in dark theme.</span>


Site-wide Styling

To adjust the involved colors to your wiki's theme, you may wish to change the default colors site-wide by adding this code to your site's MediaWiki:Common.css: 

:root {
    --light-heimu-background-color: /* your desired color */;
    --light-heimu-text-color: /* your desired color */;
    --light-heimu-link-color: /* your desired color */;
    --light-heimu-redlink-color: /* your desired color */;
    --dark-heimu-background-color: /* your desired color */;
    --dark-heimu-text-color: /* your desired color */;
    --dark-heimu-link-color: /* your desired color */;
    --dark-heimu-redlink-color: /* your desired color */;
}


Template

Creating a template on your wiki may be helpful: 

<span class="heimu" title="{{{title|}}}" style="{{{style|}}}">{{{1|}}}</span>

(The wikitext above doesn't handle the problems of documentation, transclusion and categorization. You need to handle them yourself when importing this template to your wiki.)

More enhancements

Text above can be found here (edit)