UserCSS:吹き出し記法

変数定義

code:style.css

:root {

--balloon-text-color: white; /* 吹き出しの文字色 */

--balloon-color-left: darkblue; /* 左吹き出しの背景色 */

--balloon-color-right: darkgreen; /* 右吹き出しの背景色 */

}

左フキダシ

code:style.css

.deco-\{ {

font-size: 0.8em;

color: var(--balloon-text-color);

background-color: var(--balloon-color-left);

padding: 0.1em 0.2em 0.1em 0.2em;

border-radius: 0.5em;

margin: auto 0.4em;

display: inline-block;

max-width: calc(100% - 90px);

vertical-align: top;

}

.deco-\{:before {

position: absolute;

margin: 0;

padding: 0;

transform: translateX(-100%) translateY(calc(0.8em - 80%));

width: 0;

content: "";

border-width: 0 0 0.6em 0.6em;

border-style: solid;

border-color: var(--balloon-color-left) transparent;

}

右フキダシ

code:style.css

.deco-\} {

font-size: 0.8em;

color: var(--balloon-text-color);

background-color: var(--balloon-color-right);

padding: 0.1em 0.2em 0.1em 0.2em;

border-radius: 0.5em;

margin: auto 0.4em;

display: inline-block;

max-width: calc(100% - 90px);

vertical-align: top;

}

.deco-\}:after {

position: absolute;

margin: 0;

padding: 0;

transform: translateY(calc(0.8em - 80%));

width: 0;

content: "";

border-width: 0 0.6em 0.6em 0;

border-style: solid;

border-color: var(--balloon-color-right) transparent;

}

UserCSS.icon