Bubble

Syntax

<div class="msr-unit" character="Character" attribute>
    <div class="msr-icon">
        <div class="msr-icon__wrapper">
            <div class="msr-icon__base"></div>
        </div>
    </div>
    <div class="msr-name"></div>
    <div class="msr-line">
        <p>text</p>
    </div>
</div>

Or using Hexo Bubble...

{% bubble [Character] [attribute] %}
    You can use *Markdown* in the text.

    Create a new bubble by leaving an empty line between text.
{% endbubble %}

Options

Character must be capitalized. All 49 EnStars characters and Anzu have styles, but you can place any name in there. (Stylesheet)

Available attributes

• unknown: Blacks out the icon and uses a gray background
• hidden: Blacks out the icon but leaves a colored background

Custom elements (If using Hexo Bubble)

• <thought></thought>, <th></th>: To wrap around thoughts. It's in a blue color.
• <hold></hold>, <ho></ho>: Prevents special characters being cut-off by word wrap.

Customization

Make your own variables by following the format below. Note that all are optional except for [character="NAME"].

[character="NAME"][attribute] {
    --color: #HEX;
    --hue: HUE;
    --name: "NAME";
    --icon: url("URL");
}

Toolbar

Mashiro also has a toolbar that accompanies its chat layout.

<div class="toolbar-wrapper">
    <div class="slider-container">
        <input type="range" min="1" max="5" value="3" class="slider">
    </div>
    <div class="toolbar">
        <div class="toolbar__section">
            <a href="PREVIOUS-CHAPTER-URL">
                <span data-tippy-content="Previous Chapter" class="material-icons-round msr-fn-toolbar">arrow_back</span>
            </a>
        </div>
        <div class="toolbar__section">
            <a id="colorFill" class="msr-fn-toolbar" data-tippy-content="Mode Toggle">
                <span class="material-icons-round"><span id="dark-toggle">dark_mode</span><span id="light-toggle" style="display:none">light_mode</span></span>
            </a>
        </div>
        <div class="toolbar__section">
            <a href="INDEX-PAGE-URL">
                <span class="material-icons-round msr-fn-toolbar" data-tippy-content="Index">star</span>
            </a>
        </div>
        <div class="toolbar__section">
            <a id="sliderDrop">
                <span class="material-icons-round msr-fn-toolbar" data-tippy-content="Text Size">format_size</span>
            </a>
        </div>
        <div class="toolbar__section">
            <a href="NEXT-CHAPTER-URL">
                <span class="material-icons-round msr-fn-toolbar" data-tippy-content="Next Chapter">arrow_forward</span>
            </a>
        </div>
    </div>
</div>

Tools can be added and removed whenever needed. You can also change the tooltip text in data-tippy-content.