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.
526 lines
8.9 KiB
526 lines
8.9 KiB
/* |
|
GoToSocial |
|
Copyright (C) GoToSocial Authors admin@gotosocial.org |
|
SPDX-License-Identifier: AGPL-3.0-or-later |
|
|
|
This program is free software: you can redistribute it and/or modify |
|
it under the terms of the GNU Affero General Public License as published by |
|
the Free Software Foundation, either version 3 of the License, or |
|
(at your option) any later version. |
|
|
|
This program is distributed in the hope that it will be useful, |
|
but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
GNU Affero General Public License for more details. |
|
|
|
You should have received a copy of the GNU Affero General Public License |
|
along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
*/ |
|
|
|
@import "photoswipe/dist/photoswipe.css"; |
|
@import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css"; |
|
@import "plyr/dist/plyr.css"; |
|
|
|
main { |
|
background: transparent; |
|
grid-auto-rows: auto; |
|
} |
|
|
|
.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-header > address { |
|
/* |
|
Avoid stretching so wide that user |
|
can't click on open thread link that's |
|
behind the status header link. |
|
*/ |
|
width: fit-content; |
|
|
|
> a { |
|
padding: 0 0.75rem; |
|
display: grid; |
|
grid-template-columns: 3.5rem 1fr auto; |
|
grid-template-rows: auto auto; |
|
grid-template-areas: |
|
"avatar author-strap author-strap" |
|
"avatar author-strap author-strap"; |
|
gap: 0 0.5rem; |
|
font-style: normal; |
|
|
|
.avatar { |
|
grid-area: avatar; |
|
height: 3.5rem; |
|
width: 3.5rem; |
|
object-fit: cover; |
|
|
|
border: 0.15rem solid $avatar-border; |
|
border-radius: $br; |
|
overflow: hidden; /* hides corners from img overflowing */ |
|
|
|
img { |
|
height: 100%; |
|
width: 100%; |
|
object-fit: cover; |
|
background: $bg; |
|
} |
|
} |
|
|
|
.author-strap { |
|
grid-area: author-strap; |
|
display: grid; |
|
grid-template-columns: 1fr auto; |
|
grid-template-rows: auto; |
|
grid-template-areas: |
|
"display display" |
|
"user user"; |
|
gap: 0 0.5rem; |
|
|
|
.displayname, .username { |
|
justify-self: start; |
|
align-self: start; |
|
max-width: 100%; |
|
font-size: 1rem; |
|
line-height: 1.3rem; |
|
} |
|
|
|
.displayname { |
|
grid-area: display; |
|
font-weight: bold; |
|
} |
|
|
|
.username { |
|
grid-area: user; |
|
color: $link-fg; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.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 { |
|
list-style: none; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
padding-bottom: 0.5rem; |
|
|
|
&::-webkit-details-marker { |
|
display: none; /* Safari */ |
|
} |
|
|
|
.button { |
|
width: fit-content; |
|
white-space: nowrap; |
|
cursor: pointer; |
|
padding: 0.2rem 0.3rem; |
|
font-size: 1rem; |
|
} |
|
} |
|
|
|
.text > .content, |
|
.text-spoiler > summary > .spoiler-content { |
|
word-break: break-word; |
|
line-height: 1.6rem; |
|
width: 100%; |
|
|
|
a { |
|
color: $link-fg; |
|
text-decoration: underline; |
|
} |
|
|
|
/* |
|
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; |
|
} |
|
} |
|
|
|
.text { |
|
margin: 0; |
|
grid-row: span 1; |
|
grid-column: 1 / span 3; |
|
|
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
|
|
width: 100%; |
|
|
|
.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 ."; |
|
|
|
&::-webkit-details-marker { |
|
display: none; /* Safari */ |
|
} |
|
|
|
.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; |
|
|
|
.edited-at { |
|
font-size: smaller; |
|
} |
|
} |
|
|
|
.stats-item { |
|
display: flex; |
|
gap: 0.4rem; |
|
} |
|
|
|
.stats-item:not(.published-at):not(.edited-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%; |
|
} |
|
} |