162 lines
3.8 KiB
CSS
162 lines
3.8 KiB
CSS
:root {
|
|
--dialogue-m1-color: transparent;
|
|
--dialogue-m2-color: transparent;
|
|
--dialogue-m3-color: transparent;
|
|
--dialogue-m4-color: transparent;
|
|
--dialogue-m1-background: none;
|
|
--dialogue-m2-background: none;
|
|
--dialogue-m3-background: none;
|
|
--dialogue-m4-background: none;
|
|
|
|
--dialogue-margin-block: 0.8em;
|
|
--dialogue-speech-bubble-sub-max-width: 80px;
|
|
}
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
:root {
|
|
--dialogue-margin-block: 1em;
|
|
--dialogue-speech-bubble-sub-max-width: 80px;
|
|
}
|
|
}
|
|
|
|
.dialogue {
|
|
/* background: color-mix(in hsl, var(--background), black 8%); */
|
|
border: none;
|
|
border-radius: 5px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
margin-inline: 0;
|
|
padding: 1.1rem;
|
|
margin-block: 1rem;
|
|
}
|
|
|
|
/*
|
|
@media (prefers-color-scheme: dark) {
|
|
.dialogue {
|
|
background: color-mix(in hsl, var(--background), white 8%);
|
|
}
|
|
}
|
|
*/
|
|
|
|
.dialogue header {
|
|
text-align: center;
|
|
width: 100%;
|
|
font-size: 1.3rem;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
/* Message bubble */
|
|
.dialogue .member {
|
|
padding: 4px 0px;
|
|
border-radius: 8px;
|
|
margin-block: var(--dialogue-margin-block);
|
|
max-width: calc(100% - var(--dialogue-speech-bubble-sub-max-width));
|
|
position: relative;
|
|
font-style: normal;
|
|
}
|
|
|
|
.dialogue .member a,
|
|
.dialogue .member em {
|
|
color: white;
|
|
}
|
|
|
|
/* Message bubble on right */
|
|
.dialogue .member.member-m1 {
|
|
align-self: flex-end;
|
|
margin-right: 60px;
|
|
color: color-mix(in hsl, var(--dialogue-m1-color), black 40%);
|
|
}
|
|
|
|
/* Message bubble on left */
|
|
.dialogue .member.member-m2 {
|
|
margin-left: 60px;
|
|
color: color-mix(in hsl, var(--dialogue-m2-color), black 40%);
|
|
}
|
|
|
|
.dialogue .member.member-m3 {
|
|
margin-left: 60px;
|
|
color: color-mix(in hsl, var(--dialogue-m3-color), black 40%);
|
|
}
|
|
|
|
.dialogue .member.member-m4 {
|
|
margin-left: 60px;
|
|
color: color-mix(in hsl, var(--dialogue-m4-color), black 40%);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.dialogue .member.member-m1 {
|
|
color: color-mix(in hsl, var(--dialogue-m1-color), white 40%);
|
|
}
|
|
.dialogue .member.member-m2 {
|
|
color: color-mix(in hsl, var(--dialogue-m2-color), white 40%);
|
|
}
|
|
.dialogue .member.member-m3 {
|
|
color: color-mix(in hsl, var(--dialogue-m3-color), white 40%);
|
|
}
|
|
.dialogue .member.member-m4 {
|
|
color: color-mix(in hsl, var(--dialogue-m4-color), white 40%);
|
|
}
|
|
}
|
|
|
|
/* Avatars */
|
|
.dialogue .member b.avatar {
|
|
font-size: 0;
|
|
text-align: center;
|
|
|
|
width: 42px;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
|
|
top: -0.4rem;
|
|
position: absolute;
|
|
z-index: 10;
|
|
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Avatar 1 is on right */
|
|
.dialogue .member.member-m1 b.avatar {
|
|
right: -60px;
|
|
border: solid 2px var(--dialogue-m1-color);
|
|
background: var(--dialogue-m1-background);
|
|
}
|
|
|
|
/* Avatar 2 is on left */
|
|
.dialogue .member.member-m2 b.avatar {
|
|
left: -60px;
|
|
border: solid 2px var(--dialogue-m2-color);
|
|
background: var(--dialogue-m2-background);
|
|
}
|
|
|
|
.dialogue .member.member-m3 b.avatar {
|
|
left: -60px;
|
|
border: solid 2px var(--dialogue-m3-color);
|
|
background: var(--dialogue-m3-background);
|
|
}
|
|
|
|
.dialogue .member.member-m4 b.avatar {
|
|
left: -60px;
|
|
border: solid 2px var(--dialogue-m4-color);
|
|
background: var(--dialogue-m4-background);
|
|
}
|
|
|
|
/* Narrow the margin between consecutive messages */
|
|
.member.member-m1 + .member.member-m1,
|
|
.member.member-m2 + .member.member-m2,
|
|
.member.member-m3 + .member.member-m3,
|
|
.member.member-m4 + .member.member-m4 {
|
|
margin-block-start: calc(var(--dialogue-margin-block) / -2);
|
|
}
|
|
|
|
/* Hide consecutive avatars */
|
|
.member.member-m1 + .member.member-m1 b.avatar,
|
|
.member.member-m2 + .member.member-m2 b.avatar,
|
|
.member.member-m3 + .member.member-m3 b.avatar,
|
|
.member.member-m4 + .member.member-m4 b.avatar {
|
|
background: none;
|
|
border: none;
|
|
} |