diff options
Diffstat (limited to 'src/components/MessageBubble.module.css')
| -rw-r--r-- | src/components/MessageBubble.module.css | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/src/components/MessageBubble.module.css b/src/components/MessageBubble.module.css new file mode 100644 index 00000000..57d842b9 --- /dev/null +++ b/src/components/MessageBubble.module.css @@ -0,0 +1,130 @@ +:root { + --left-bg: var(--ifm-color-success-contrast-background); + --left-fg: var(--ifm-color-success-contrast-foreground); + --right-bg: var(--ifm-color-warning-contrast-background); + --right-fg: var(--ifm-color-warning-contrast-foreground); +} + +.bln { + border-radius: 10px; + position: relative; + padding: 1rem; + max-width: 90%; + } + .bln.bleft { + background-color: var(--left-bg); + color: var(--left-fg); + margin: 1rem auto 1rem 4%; + } + .bln.bleft.gityo { + background-color: #ecedff; + } + .bln.bright { + background-color: var(--right-bg); + color: var(--right-fg); + margin: 1rem 4% 1rem auto; + } + + /* 吹き出し三角部分 */ + .bln::before{ + border-style: solid; + content: ''; + display: block; + position: absolute; + width: 0; + height: 0; + bottom: 3px; + } + .bln.bleft::before { + border-color: transparent var(--left-bg) transparent transparent; + border-width: 8px 22px 6px 0; + left: -15px; + rotate: -40deg; + } + .bln.bleft.gityo::before { + border-color: transparent #ecedff transparent transparent; + } + .bln.bright::before { + border-color: transparent transparent transparent var(--right-bg); + border-width: 8px 0 6px 22px; + right: -15px; + rotate: 40deg; + } + + /* 吹き出し話者部分 */ + .bln::after { + color: var(--ifm-color-content-secondary); + content: attr(data-speaker); + position: absolute; + font-size: 0.8rem; + top: -1.2rem; + white-space:nowrap; + } + + .bln.bleft::after { + left: 0.5rem; + } + .bln.bright::after { + right: 0.5rem; + text-align:right; + } + + /* 吹き出し内部 */ + .bln>p:not(:last-child) { + margin-top: 0; + } + .bln>p:last-child { + margin: 0; + } + + /* 吹き出しthougt, smile */ + .bln.bleft.thought, + .bln.bleft.smile, + .bln.bleft.weary, + .bln.bleft.anger, + .bln.bleft.sorry, + .bln.bleft.search { + border: 6px dotted var(--left-bg-dark); + background-color:unset; + } + .bln.bleft.thought::before, + .bln.bleft.smile::before, + .bln.bleft.weary::before, + .bln.bleft.anger::before, + .bln.bleft.sorry::before, + .bln.bleft.search::before { + border-width: 0; + content: "🤔"; + left: -2.5rem; + top:0; + } + .bln.bleft.smile::before { + content: "🙂"; + } + .bln.bleft.weary::before { + content: "😩"; + } + .bln.bleft.anger::before { + content: "💢"; + } + .bln.bleft.sorry::before { + content: "🙏"; + } + .bln.bleft.search::before { + content: "🔍"; + } + + @media only screen and (min-width: 800px) { + .bln { + max-width: 66%; + } + .bln.bleft.thought::before, + .bln.bleft.smile::before, + .bln.bleft.weary::before, + .bln.bleft.anger::before, + .bln.bleft.sorry::before, + .bln.bleft.search::before { + left: -3rem; + } + } +
\ No newline at end of file |