73 lines
1.3 KiB
SCSS
73 lines
1.3 KiB
SCSS
@use 'sass:color';
|
|
|
|
// ------ Colors ------------
|
|
|
|
$portrait-bg: #efefef;
|
|
|
|
$postbox1-fg: white;
|
|
$postbox1-bg: #b65fcf;
|
|
$postbox2-fg: black;
|
|
$postbox2-bg: #b7e8c1;
|
|
|
|
// --------------------------
|
|
|
|
.disclaimer {
|
|
font-variant: small-caps;
|
|
font-style: italic;
|
|
text-align: justify;
|
|
}
|
|
|
|
.emph {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.talker {
|
|
position: relative;
|
|
border-radius: 5pt;
|
|
padding: 1ex;
|
|
}
|
|
|
|
.portrait {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
|
|
background: $portrait-bg url('images/avatar.svg') center/60% no-repeat scroll;
|
|
border-radius: 50%;
|
|
border: .5px solid color.scale($portrait-bg, $blackness: 30%);
|
|
|
|
top: 50%;
|
|
margin-top: -25px;
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
.talker-sx {
|
|
@extend .talker;
|
|
background-color: $postbox1-bg;
|
|
border: .5px solid color.scale($postbox1-bg, $blackness: 30%);
|
|
color: $postbox1-fg;
|
|
margin-right: 10em;
|
|
|
|
&::before {
|
|
@extend .portrait;
|
|
left: 100%;
|
|
margin-left: .5em;
|
|
}
|
|
}
|
|
|
|
.talker-dx {
|
|
@extend .talker;
|
|
|
|
background-color: $postbox2-bg;
|
|
border: .5px solid color.scale($postbox2-bg, $blackness: 30%);
|
|
color: $postbox2-fg;
|
|
margin-left: 10em;
|
|
|
|
&::before {
|
|
@extend .portrait;
|
|
right: 100%;
|
|
margin-right: .5em;
|
|
}
|
|
}
|