diff options
Diffstat (limited to 'web/source/css/_media-wrapper.css')
| -rw-r--r-- | web/source/css/_media-wrapper.css | 207 |
1 files changed, 207 insertions, 0 deletions
diff --git a/web/source/css/_media-wrapper.css b/web/source/css/_media-wrapper.css new file mode 100644 index 000000000..1c2ae1503 --- /dev/null +++ b/web/source/css/_media-wrapper.css @@ -0,0 +1,207 @@ +/* + 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%; + + &[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; + } + } + } + } +} + +.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; + } + + .plyr__control { + box-shadow: none; + } + + .plyr__control--overlaid { + top: calc(50% - 18px); + } +} + +.pswp__content { + padding: 2rem; + + .plyr { + max-height: 100%; + } +} |