You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
423 lines
6.6 KiB
423 lines
6.6 KiB
@import "photoswipe/dist/photoswipe.css"; |
|
@import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css"; |
|
@import "plyr/dist/plyr.css"; |
|
|
|
.status { |
|
background: $status-bg; |
|
box-shadow: $boxshadow; |
|
border: $boxshadow-border; |
|
border-radius: $br; |
|
position: relative; |
|
padding-top: 0.75rem; |
|
|
|
a { |
|
position: relative; |
|
z-index: 1; |
|
color: inherit; |
|
text-decoration: none; |
|
} |
|
|
|
.status-body { |
|
padding: 0.5rem 0.75rem; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
} |
|
|
|
.text-spoiler > summary, .text { |
|
position: relative; |
|
z-index: 2; |
|
} |
|
|
|
.text-spoiler > summary { |
|
display: inline-block; |
|
list-style: none; |
|
|
|
padding-bottom: 0.5rem; |
|
|
|
&::-webkit-details-marker { |
|
display: none; /* Safari */ |
|
} |
|
|
|
.button { |
|
white-space: nowrap; |
|
cursor: pointer; |
|
padding: 0.2rem 0.3rem; |
|
font-size: 1rem; |
|
} |
|
} |
|
|
|
.text { |
|
margin: 0; |
|
grid-row: span 1; |
|
grid-column: 1 / span 3; |
|
|
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
|
|
width: 100%; |
|
|
|
a { |
|
color: $link-fg; |
|
text-decoration: underline; |
|
} |
|
|
|
.content { |
|
word-break: break-word; |
|
line-height: 1.6rem; |
|
width: 100%; |
|
|
|
/* |
|
Normalize header sizes to fit better |
|
with the line-height we use for statuses. |
|
*/ |
|
h1 { |
|
margin: 0; |
|
font-size: 1.8rem; |
|
line-height: initial; |
|
} |
|
|
|
h2 { |
|
margin: 0; |
|
font-size: 1.6rem; |
|
line-height: initial; |
|
} |
|
|
|
h3 { |
|
margin: 0; |
|
font-size: 1.4rem; |
|
line-height: initial; |
|
} |
|
|
|
h4 { |
|
margin: 0; |
|
font-size: 1.2rem; |
|
line-height: initial; |
|
} |
|
|
|
h5 { |
|
margin: 0; |
|
font-size: 1rem; |
|
line-height: initial; |
|
} |
|
} |
|
|
|
.poll { |
|
background-color: $gray2; |
|
z-index: 2; |
|
|
|
display: flex; |
|
flex-direction: column; |
|
border-radius: $br; |
|
padding: 0.5rem; |
|
margin: 0; |
|
gap: 1rem; |
|
|
|
.poll-options { |
|
margin: 0; |
|
padding: 0; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
|
|
.poll-option { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.1rem; |
|
|
|
label { |
|
cursor: default; |
|
} |
|
|
|
meter { |
|
width: 100%; |
|
} |
|
|
|
.poll-vote-summary { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
white-space: nowrap; |
|
} |
|
} |
|
} |
|
|
|
.poll-info { |
|
background-color: $gray4; |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
border-radius: $br-inner; |
|
padding: 0.25rem; |
|
gap: 0.25rem; |
|
|
|
span { |
|
justify-self: center; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.media { |
|
grid-column: span 3; |
|
display: grid; |
|
grid-template-columns: 50% 50%; |
|
grid-auto-rows: 10rem; |
|
overflow: hidden; |
|
|
|
.media-wrapper { |
|
height: 100%; |
|
width: 100%; |
|
box-sizing: border-box; |
|
border: 0.15rem solid $gray1; |
|
border-radius: $br; |
|
position: relative; |
|
overflow: hidden; |
|
z-index: 2; |
|
|
|
details { |
|
position: absolute; |
|
height: 100%; |
|
width: 100%; |
|
|
|
&[open] summary { |
|
height: auto; |
|
width: auto; |
|
margin: 1rem; |
|
padding: 0; |
|
|
|
.show, video, img { |
|
display: none; |
|
} |
|
|
|
.eye.button .hide { |
|
display: inline-block; |
|
grid-column: 1 / span 3; |
|
grid-row: 1 / span 2; |
|
} |
|
} |
|
|
|
summary { |
|
position: absolute; |
|
height: 100%; |
|
width: 100%; |
|
z-index: 3; |
|
overflow: hidden; |
|
|
|
display: grid; |
|
padding: 1rem; |
|
grid-template-columns: 1fr auto 1fr; |
|
grid-template-rows: 1fr 1fr; |
|
grid-template-areas: |
|
"eye sensitive ." |
|
". sensitive ."; |
|
|
|
.eye.button { |
|
grid-area: eye; |
|
align-self: start; |
|
justify-self: start; |
|
margin: 0; |
|
padding: 0.4rem; |
|
|
|
.fa-fw { |
|
line-height: $fa-fw; |
|
} |
|
|
|
.hide { |
|
display: none; |
|
} |
|
} |
|
|
|
.show.sensitive { |
|
grid-area: sensitive; |
|
align-self: center; |
|
|
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
|
|
.button { |
|
cursor: pointer; |
|
align-self: center; |
|
} |
|
} |
|
|
|
video, img { |
|
z-index: -1; |
|
position: absolute; |
|
height: calc(100% + 1.2rem); |
|
width: calc(100% + 1.2rem); |
|
top: -0.6rem; |
|
left: -0.6rem; |
|
filter: blur(1.2rem); |
|
} |
|
} |
|
|
|
video.plyr-video, .plyr { |
|
position: absolute; |
|
height: 100%; |
|
width: 100%; |
|
object-fit: contain; |
|
background: $gray1; |
|
} |
|
|
|
.unknown-attachment { |
|
.placeholder { |
|
width: 100%; |
|
height: 100%; |
|
padding: 0.8rem; |
|
border: 0.2rem dashed $white2; |
|
|
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
gap: 0.25rem; |
|
|
|
color: $white2; |
|
|
|
.placeholder-external-link { |
|
align-self: end; |
|
font-size: 2.5rem; |
|
} |
|
|
|
.placeholder-icon { |
|
width: 100%; |
|
font-size: 3.5rem; |
|
text-align: center; |
|
margin-top: auto; |
|
} |
|
|
|
.placeholder-link-to { |
|
width: 100%; |
|
text-align: center; |
|
margin-bottom: auto; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
&.single .media-wrapper { |
|
grid-column: span 2; |
|
} |
|
|
|
&.odd .media-wrapper:first-child, |
|
&.double .media-wrapper { |
|
grid-row: span 2; |
|
} |
|
|
|
@media screen and (max-width: 42rem) { |
|
.media-wrapper { |
|
grid-column: span 2; |
|
grid-row: span 2; |
|
} |
|
} |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
} |
|
} |
|
|
|
.status-info { |
|
background: $status-info-bg; |
|
color: $fg-reduced; |
|
border-top: 0.15rem solid $status-info-border; |
|
padding: 0.5rem 0.75rem; |
|
|
|
.status-stats { |
|
display: flex; |
|
gap: 1rem; |
|
|
|
.stats-grouping { |
|
display: flex; |
|
flex-wrap: wrap; |
|
column-gap: 1rem; |
|
} |
|
|
|
.stats-item { |
|
display: flex; |
|
gap: 0.4rem; |
|
} |
|
|
|
.stats-item:not(.published-at) { |
|
z-index: 1; |
|
user-select: none; |
|
} |
|
|
|
.language { |
|
margin-left: auto; |
|
} |
|
} |
|
|
|
grid-column: span 3; |
|
} |
|
|
|
.status-link { |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
overflow: hidden; |
|
text-indent: 100%; |
|
white-space: nowrap; |
|
|
|
position: absolute; |
|
z-index: 0; |
|
} |
|
|
|
&:first-child { |
|
/* top left, top right */ |
|
border-top-left-radius: $br; |
|
border-top-right-radius: $br; |
|
} |
|
|
|
&:last-child, &:last-child .info { |
|
/* bottom left, bottom right */ |
|
border-bottom-left-radius: $br; |
|
border-bottom-right-radius: $br; |
|
} |
|
|
|
&.expanded { |
|
background: $status-focus-bg; |
|
.status-info { |
|
background: $status-focus-info-bg; |
|
} |
|
} |
|
} |
|
|
|
.plyr--video { |
|
flex-direction: column-reverse; |
|
|
|
.plyr__video-wrapper { |
|
position: relative; |
|
} |
|
|
|
.plyr__controls { |
|
align-self: stretch; |
|
position: initial; |
|
padding: 0.1rem; |
|
padding-top: 0.2rem; |
|
} |
|
|
|
.plyr__control { |
|
box-shadow: none; |
|
} |
|
|
|
.plyr__control--overlaid { |
|
top: calc(50% - 18px); |
|
} |
|
} |
|
|
|
.pswp__content { |
|
padding: 2rem; |
|
|
|
.plyr { |
|
max-height: 100%; |
|
} |
|
} |