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.
382 lines
6.6 KiB
382 lines
6.6 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"; |
|
|
|
.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; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
} |
|
|
|
details { |
|
position: absolute; |
|
height: 100%; |
|
width: 100%; |
|
|
|
div.blurhash-container { |
|
z-index: -1; |
|
position: absolute; |
|
height: 100%; |
|
width: 100%; |
|
} |
|
|
|
canvas { |
|
height: 100%; |
|
width: 100%; |
|
object-fit: cover; |
|
} |
|
|
|
&[open] summary { |
|
height: auto; |
|
width: auto; |
|
margin: 1rem; |
|
padding: 0; |
|
|
|
.show { |
|
display: none; |
|
} |
|
|
|
.eye.button .hide { |
|
display: inline-block; |
|
grid-column: 1 / span 3; |
|
grid-row: 1 / span 2; |
|
} |
|
|
|
div.blurhash-container > canvas { |
|
display: none; |
|
} |
|
|
|
/* |
|
Hide focus outline on click |
|
to avoid ugly artifacts. |
|
*/ |
|
&:focus { |
|
outline: none; |
|
} |
|
} |
|
|
|
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; |
|
} |
|
|
|
&:focus-visible { |
|
/* |
|
Can't rely on media having background with |
|
decent contrast so inset and use button-fg |
|
instead so focus is definitely visible. |
|
*/ |
|
outline: 0.25rem dashed $button-fg; |
|
outline-offset: -0.25rem; |
|
} |
|
} |
|
|
|
.show.sensitive { |
|
grid-area: sensitive; |
|
align-self: center; |
|
|
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
|
|
.button { |
|
cursor: pointer; |
|
align-self: center; |
|
} |
|
} |
|
} |
|
|
|
a.photoswipe-slide { |
|
display: inline-block; |
|
height: 100%; |
|
width: 100%; |
|
|
|
/* |
|
Inset outline to avoid outline |
|
being hidden by overflow: hidden. |
|
*/ |
|
&:focus-visible { |
|
outline: $button-focus-outline; |
|
outline-offset: -0.25rem; |
|
} |
|
} |
|
|
|
video.plyr-video, .plyr { |
|
position: absolute; |
|
height: 100%; |
|
width: 100%; |
|
object-fit: cover; |
|
background: $gray1; |
|
min-width: 100%; |
|
} |
|
|
|
.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; |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (max-width: 55rem) { |
|
/* |
|
Tablet-ish width, make "show sensitive" |
|
and "eye" buttons smaller + more compact. |
|
*/ |
|
& > details { |
|
& > summary { |
|
padding: 0.5rem; |
|
|
|
> div.show.sensitive.button { |
|
font-size: smaller; |
|
padding: 0.2rem; |
|
line-height: 1.4rem; |
|
} |
|
|
|
> span.eye.button { |
|
font-size: smaller; |
|
padding: 0 0.2rem 0 0.2rem; |
|
|
|
> .fa-fw { |
|
line-height: 1.4rem; |
|
} |
|
} |
|
} |
|
|
|
&[open] > summary { |
|
margin: 0.5rem; |
|
} |
|
} |
|
} |
|
|
|
@media screen and (max-width: 36rem) { |
|
/* |
|
Mobile-ish width, even more compact. |
|
*/ |
|
& > details { |
|
& > summary { |
|
> div.show.sensitive.button { |
|
font-size: small; |
|
padding: 0.1rem; |
|
line-height: 1.2rem; |
|
} |
|
|
|
> span.eye.button { |
|
font-size: small; |
|
padding: 0 0.1rem 0 0.1rem; |
|
|
|
> .fa-fw { |
|
line-height: 1.2rem; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (max-width: 27rem) { |
|
/* |
|
Really really tiny, make the text |
|
on show/hide sensitive even smaller. |
|
*/ |
|
& > details > summary > div.show.sensitive.button { |
|
font-size: x-small; |
|
} |
|
} |
|
} |
|
|
|
@media (scripting: none) { |
|
.media-wrapper { |
|
canvas.blurhash { |
|
display: none |
|
} |
|
|
|
& > details:not([open]) { |
|
background: linear-gradient( |
|
var(--bg-accent), |
|
var(--bg) |
|
); |
|
} |
|
} |
|
} |
|
|
|
.pswp__button--open-post-link { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
span > i { |
|
background: $status-bg; |
|
color: $fg; |
|
border-radius: 25%; |
|
} |
|
} |
|
|
|
.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; |
|
gap: 0.15rem; |
|
|
|
.plyr__controls__item { |
|
/* |
|
Override margins from plyr as |
|
we're displaying in flex with a gap. |
|
*/ |
|
margin-left: 0; |
|
margin-right: 0; |
|
&:first-child { |
|
margin-right: 0; |
|
} |
|
|
|
/* |
|
Try to split controls in at |
|
least a somewhat sensible way. |
|
*/ |
|
&.plyr__volume { |
|
margin-left: auto; |
|
} |
|
&[data-plyr="restart"] { |
|
margin-right: auto; |
|
} |
|
} |
|
|
|
/* |
|
Override the rule from plyr that |
|
hides the total duration on thinner |
|
screens, we have enough room. |
|
*/ |
|
.plyr__time + .plyr__time { |
|
display: initial; |
|
} |
|
} |
|
|
|
.plyr__control { |
|
box-shadow: none; |
|
} |
|
|
|
.plyr__poster { |
|
background-size: cover; |
|
} |
|
|
|
/* |
|
Hide plry controls when it's not inside |
|
a lightbox, but use cursor pointer to |
|
show the whole thing can be clicked. |
|
*/ |
|
&.plyr--stopped, &.plyr--paused { |
|
.plyr__controls { |
|
display: none; |
|
} |
|
|
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.pswp__content { |
|
padding: 2rem; |
|
|
|
/* |
|
Render plyr controls as normal |
|
when it's inside a lightbox. |
|
*/ |
|
.plyr__control--overlaid { |
|
top: calc(50% - 18px); |
|
} |
|
> .plyr--stopped .plyr__controls, |
|
> .plyr--paused .plyr__controls { |
|
display: flex; |
|
} |
|
}
|
|
|