akkoma-fe/src/components/status_body/status_body.scss

214 lines
3.8 KiB
SCSS
Raw Normal View History

@import '../../_variables.scss';
.StatusBody {
2021-06-13 23:52:41 +00:00
display: flex;
flex-direction: column;
2022-08-29 19:02:34 +00:00
.translation {
border: 1px solid var(--accent, $fallback--link);
border-radius: var(--panelRadius, $fallback--panelRadius);
margin-top: 1em;
padding: 0.5em;
}
.emoji {
--_still_image-label-scale: 0.5;
2022-07-28 23:58:04 +00:00
--emoji-size: 38px;
}
.emoji:hover {
transform: scale(1.4);
transition: 0.05s;
}
2022-07-20 15:53:59 +00:00
._mfm_x2_ {
.emoji {
width: 100px;
height: 100px;
}
}
._mfm_x3_ {
.emoji {
width: 150px;
height: 150px;
}
}
._mfm_x4_ {
.emoji {
width: 200px;
height: 200px;
}
}
2021-06-13 23:52:41 +00:00
.attachments {
margin-top: 0.5em;
}
& .text,
& .summary {
font-family: var(--postFont, sans-serif);
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
line-height: var(--post-line-height);
}
.summary {
display: block;
font-style: italic;
padding-bottom: 0.5em;
}
.text {
& > * {
white-space: pre-wrap;
}
&.-single-line {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 1.4em;
}
}
.summary-wrapper {
margin-bottom: 0.5em;
border-style: solid;
border-width: 0 0 1px 0;
border-color: var(--border, $fallback--border);
flex-grow: 0;
&.-tall {
position: relative;
.summary {
max-height: 2em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
.text-wrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
&.-tall-status {
position: relative;
height: 220px;
overflow-x: hidden;
overflow-y: hidden;
z-index: 1;
2022-07-29 03:32:45 +00:00
.media-body-wrapper {
min-height: 0;
mask:
linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
linear-gradient(to top, white, white);
/* Autoprefixed seem to ignore this one, and also syntax is different */
-webkit-mask-composite: xor;
mask-composite: exclude;
}
}
}
& .tall-status-hider,
& .tall-subject-hider,
& .status-unhider,
& .cw-status-hider {
display: inline-block;
word-break: break-all;
width: 100%;
text-align: center;
}
.tall-status-hider {
position: absolute;
height: 70px;
margin-top: 150px;
line-height: 110px;
z-index: 2;
}
.tall-subject-hider {
// position: absolute;
padding-bottom: 0.5em;
}
& .status-unhider,
& .cw-status-hider {
word-break: break-all;
svg {
color: inherit;
}
}
.greentext {
color: $fallback--cGreen;
color: var(--postGreentext, $fallback--cGreen);
}
.cyantext {
color: var(--postCyantext, $fallback--cBlue);
}
2021-06-13 23:52:41 +00:00
&.-compact {
2021-06-18 11:12:50 +00:00
align-items: top;
2021-06-13 23:52:41 +00:00
flex-direction: row;
--emoji-size: 16px;
& .body:not(:active),
2021-06-13 23:52:41 +00:00
& .attachments {
max-height: 3.25em;
}
.body {
white-space: normal;
min-width: 5em;
flex: 5 1 auto;
}
.body:not(:active) {
overflow: hidden;
2021-06-13 23:52:41 +00:00
mask-size: auto 3.5em, auto auto;
mask-position: 0 0, 0 0;
mask-repeat: repeat-x, repeat;
2021-06-18 11:12:50 +00:00
mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
2021-06-13 23:52:41 +00:00
/* Autoprefixed seem to ignore this one, and also syntax is different */
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.attachments {
margin-top: 0;
flex: 1 1 0;
2021-06-13 23:52:41 +00:00
min-width: 5em;
height: 100%;
2021-06-18 11:12:50 +00:00
margin-left: 0.5em;
2021-06-13 23:52:41 +00:00
}
.summary-wrapper {
.summary::after {
content: ': ';
}
line-height: inherit;
margin: 0;
border: none;
display: inline-block;
}
.text-wrapper {
display: inline-block;
}
}
}