950 lines
51 KiB
CSS
950 lines
51 KiB
CSS
|
|
|||
|
|
@charset "UTF-8";
|
|||
|
|
/*
|
|||
|
|
GoToSocial
|
|||
|
|
Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
|
|||
|
|
|
|||
|
|
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/>.
|
|||
|
|
*/
|
|||
|
|
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
|
|||
|
|
.pswp {
|
|||
|
|
--pswp-bg: #000;
|
|||
|
|
--pswp-placeholder-bg: #222;
|
|||
|
|
|
|||
|
|
|
|||
|
|
--pswp-root-z-index: 100000;
|
|||
|
|
|
|||
|
|
--pswp-preloader-color: rgba(79, 79, 79, 0.4);
|
|||
|
|
--pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
|
|||
|
|
|
|||
|
|
/* defined via js:
|
|||
|
|
--pswp-transition-duration: 333ms; */
|
|||
|
|
|
|||
|
|
--pswp-icon-color: #fff;
|
|||
|
|
--pswp-icon-color-secondary: #4f4f4f;
|
|||
|
|
--pswp-icon-stroke-color: #4f4f4f;
|
|||
|
|
--pswp-icon-stroke-width: 2px;
|
|||
|
|
|
|||
|
|
--pswp-error-text-color: var(--pswp-icon-color);
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
|
|||
|
|
*/
|
|||
|
|
.pswp {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
z-index: var(--pswp-root-z-index);
|
|||
|
|
display: none;
|
|||
|
|
touch-action: none;
|
|||
|
|
outline: 0;
|
|||
|
|
opacity: 0.003;
|
|||
|
|
contain: layout style size;
|
|||
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|||
|
|
}
|
|||
|
|
/* Prevents focus outline on the root element,
|
|||
|
|
(it may be focused initially) */
|
|||
|
|
.pswp:focus {
|
|||
|
|
outline: 0;
|
|||
|
|
}
|
|||
|
|
.pswp * {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.pswp img {
|
|||
|
|
max-width: none;
|
|||
|
|
}
|
|||
|
|
.pswp--open {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.pswp,
|
|||
|
|
.pswp__bg {
|
|||
|
|
-webkit-transform: translateZ(0);
|
|||
|
|
transform: translateZ(0);
|
|||
|
|
will-change: opacity;
|
|||
|
|
}
|
|||
|
|
.pswp__bg {
|
|||
|
|
opacity: 0.005;
|
|||
|
|
background: var(--pswp-bg);
|
|||
|
|
}
|
|||
|
|
.pswp,
|
|||
|
|
.pswp__scroll-wrap {
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.pswp__scroll-wrap,
|
|||
|
|
.pswp__bg,
|
|||
|
|
.pswp__container,
|
|||
|
|
.pswp__item,
|
|||
|
|
.pswp__content,
|
|||
|
|
.pswp__img,
|
|||
|
|
.pswp__zoom-wrap {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.pswp__img,
|
|||
|
|
.pswp__zoom-wrap {
|
|||
|
|
width: auto;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
|
|||
|
|
cursor: zoom-in;
|
|||
|
|
}
|
|||
|
|
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
|
|||
|
|
cursor: move;
|
|||
|
|
cursor: grab;
|
|||
|
|
}
|
|||
|
|
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
|
|||
|
|
cursor: grabbing;
|
|||
|
|
}
|
|||
|
|
/* :active to override grabbing cursor */
|
|||
|
|
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
|
|||
|
|
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
|
|||
|
|
.pswp__img {
|
|||
|
|
cursor: zoom-out;
|
|||
|
|
}
|
|||
|
|
/* Prevent selection and tap highlights */
|
|||
|
|
.pswp__container,
|
|||
|
|
.pswp__img,
|
|||
|
|
.pswp__button,
|
|||
|
|
.pswp__counter {
|
|||
|
|
-webkit-user-select: none;
|
|||
|
|
user-select: none;
|
|||
|
|
}
|
|||
|
|
.pswp__item {
|
|||
|
|
/* z-index for fade transition */
|
|||
|
|
z-index: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.pswp__hidden {
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
/* Allow to click through pswp__content element, but not its children */
|
|||
|
|
.pswp__content {
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.pswp__content > * {
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
|
|||
|
|
PhotoSwipe UI
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
/*
|
|||
|
|
Error message appears when image is not loaded
|
|||
|
|
(JS option errorMsg controls markup)
|
|||
|
|
*/
|
|||
|
|
.pswp__error-msg-container {
|
|||
|
|
display: grid;
|
|||
|
|
}
|
|||
|
|
.pswp__error-msg {
|
|||
|
|
margin: auto;
|
|||
|
|
font-size: 1em;
|
|||
|
|
line-height: 1;
|
|||
|
|
color: var(--pswp-error-text-color);
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
class pswp__hide-on-close is applied to elements that
|
|||
|
|
should hide (for example fade out) when PhotoSwipe is closed
|
|||
|
|
and show (for example fade in) when PhotoSwipe is opened
|
|||
|
|
*/
|
|||
|
|
.pswp .pswp__hide-on-close {
|
|||
|
|
opacity: 0.005;
|
|||
|
|
will-change: opacity;
|
|||
|
|
transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
|
|||
|
|
z-index: 10; /* always overlap slide content */
|
|||
|
|
pointer-events: none; /* hidden elements should not be clickable */
|
|||
|
|
}
|
|||
|
|
/* class pswp--ui-visible is added when opening or closing transition starts */
|
|||
|
|
.pswp--ui-visible .pswp__hide-on-close {
|
|||
|
|
opacity: 1;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
/* <button> styles, including css reset */
|
|||
|
|
.pswp__button {
|
|||
|
|
position: relative;
|
|||
|
|
display: block;
|
|||
|
|
width: 50px;
|
|||
|
|
height: 60px;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background: none;
|
|||
|
|
border: 0;
|
|||
|
|
box-shadow: none;
|
|||
|
|
opacity: 0.85;
|
|||
|
|
-webkit-appearance: none;
|
|||
|
|
-webkit-touch-callout: none;
|
|||
|
|
}
|
|||
|
|
.pswp__button:hover,
|
|||
|
|
.pswp__button:active,
|
|||
|
|
.pswp__button:focus {
|
|||
|
|
transition: none;
|
|||
|
|
padding: 0;
|
|||
|
|
background: none;
|
|||
|
|
border: 0;
|
|||
|
|
box-shadow: none;
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
.pswp__button:disabled {
|
|||
|
|
opacity: 0.3;
|
|||
|
|
cursor: auto;
|
|||
|
|
}
|
|||
|
|
.pswp__icn {
|
|||
|
|
fill: var(--pswp-icon-color);
|
|||
|
|
color: var(--pswp-icon-color-secondary);
|
|||
|
|
}
|
|||
|
|
.pswp__icn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 14px;
|
|||
|
|
left: 9px;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.pswp__icn-shadow {
|
|||
|
|
stroke: var(--pswp-icon-stroke-color);
|
|||
|
|
stroke-width: var(--pswp-icon-stroke-width);
|
|||
|
|
fill: none;
|
|||
|
|
}
|
|||
|
|
.pswp__icn:focus {
|
|||
|
|
outline: 0;
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
div element that matches size of large image,
|
|||
|
|
large image loads on top of it,
|
|||
|
|
used when msrc is not provided
|
|||
|
|
*/
|
|||
|
|
div.pswp__img--placeholder,
|
|||
|
|
.pswp__img--with-bg {
|
|||
|
|
background: var(--pswp-placeholder-bg);
|
|||
|
|
}
|
|||
|
|
.pswp__top-bar {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 60px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
z-index: 10;
|
|||
|
|
|
|||
|
|
/* allow events to pass through top bar itself */
|
|||
|
|
pointer-events: none !important;
|
|||
|
|
}
|
|||
|
|
.pswp__top-bar > * {
|
|||
|
|
pointer-events: auto;
|
|||
|
|
/* this makes transition significantly more smooth,
|
|||
|
|
even though inner elements are not animated */
|
|||
|
|
will-change: opacity;
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
|
|||
|
|
Close button
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
.pswp__button--close {
|
|||
|
|
margin-right: 6px;
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
|
|||
|
|
Arrow buttons
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
.pswp__button--arrow {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
width: 75px;
|
|||
|
|
height: 100px;
|
|||
|
|
top: 50%;
|
|||
|
|
margin-top: -50px;
|
|||
|
|
}
|
|||
|
|
.pswp__button--arrow:disabled {
|
|||
|
|
display: none;
|
|||
|
|
cursor: default;
|
|||
|
|
}
|
|||
|
|
.pswp__button--arrow .pswp__icn {
|
|||
|
|
top: 50%;
|
|||
|
|
margin-top: -30px;
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
background: none;
|
|||
|
|
border-radius: 0;
|
|||
|
|
}
|
|||
|
|
.pswp--one-slide .pswp__button--arrow {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
/* hide arrows on touch screens */
|
|||
|
|
.pswp--touch .pswp__button--arrow {
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
/* show arrows only after mouse was used */
|
|||
|
|
.pswp--has_mouse .pswp__button--arrow {
|
|||
|
|
visibility: visible;
|
|||
|
|
}
|
|||
|
|
.pswp__button--arrow--prev {
|
|||
|
|
right: auto;
|
|||
|
|
left: 0px;
|
|||
|
|
}
|
|||
|
|
.pswp__button--arrow--next {
|
|||
|
|
right: 0px;
|
|||
|
|
}
|
|||
|
|
.pswp__button--arrow--next .pswp__icn {
|
|||
|
|
left: auto;
|
|||
|
|
right: 14px;
|
|||
|
|
/* flip horizontally */
|
|||
|
|
-webkit-transform: scale(-1, 1);
|
|||
|
|
transform: scale(-1, 1);
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
|
|||
|
|
Zoom button
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
.pswp__button--zoom {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.pswp--zoom-allowed .pswp__button--zoom {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
/* "+" => "-" */
|
|||
|
|
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
|
|||
|
|
Loading indicator
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
.pswp__preloader {
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
width: 50px;
|
|||
|
|
height: 60px;
|
|||
|
|
margin-right: auto;
|
|||
|
|
}
|
|||
|
|
.pswp__preloader .pswp__icn {
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.2s linear;
|
|||
|
|
-webkit-animation: pswp-clockwise 600ms linear infinite;
|
|||
|
|
animation: pswp-clockwise 600ms linear infinite;
|
|||
|
|
}
|
|||
|
|
.pswp__preloader--active .pswp__icn {
|
|||
|
|
opacity: 0.85;
|
|||
|
|
}
|
|||
|
|
@-webkit-keyframes pswp-clockwise {
|
|||
|
|
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
|||
|
|
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
@keyframes pswp-clockwise {
|
|||
|
|
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
|||
|
|
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
|
|||
|
|
"1 of 10" counter
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
.pswp__counter {
|
|||
|
|
height: 30px;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
-webkit-margin-start: 20px;
|
|||
|
|
margin-inline-start: 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
color: var(--pswp-icon-color);
|
|||
|
|
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
|
|||
|
|
opacity: 0.85;
|
|||
|
|
}
|
|||
|
|
.pswp--one-slide .pswp__counter {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.pswp__dynamic-caption {
|
|||
|
|
color: #fff;
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
transition: opacity 120ms linear !important; /* override default */
|
|||
|
|
}
|
|||
|
|
.pswp-caption-content {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.pswp__dynamic-caption a {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.pswp__dynamic-caption--faded {
|
|||
|
|
opacity: 0 !important;
|
|||
|
|
}
|
|||
|
|
.pswp__dynamic-caption--aside {
|
|||
|
|
width: auto;
|
|||
|
|
max-width: 300px;
|
|||
|
|
padding: 20px 15px 20px 20px;
|
|||
|
|
margin-top: 70px;
|
|||
|
|
}
|
|||
|
|
.pswp__dynamic-caption--below {
|
|||
|
|
width: auto;
|
|||
|
|
max-width: 700px;
|
|||
|
|
padding: 15px 0 0;
|
|||
|
|
}
|
|||
|
|
.pswp__dynamic-caption--on-hor-edge {
|
|||
|
|
padding-left: 15px;
|
|||
|
|
padding-right: 15px;
|
|||
|
|
}
|
|||
|
|
.pswp__dynamic-caption--mobile {
|
|||
|
|
width: 100%;
|
|||
|
|
background: rgba(0,0,0,0.5);
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
|
|||
|
|
/* override styles that were set via JS.
|
|||
|
|
as they interfere with size measurement */
|
|||
|
|
top: auto !important;
|
|||
|
|
left: 0 !important;
|
|||
|
|
}
|
|||
|
|
@-webkit-keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}
|
|||
|
|
@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}
|
|||
|
|
@-webkit-keyframes plyr-popup{0%{opacity:.5;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|||
|
|
@keyframes plyr-popup{0%{opacity:.5;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|||
|
|
@-webkit-keyframes plyr-fade-in{0%{opacity:0}to{opacity:1}}
|
|||
|
|
@keyframes plyr-fade-in{0%{opacity:0}to{opacity:1}}
|
|||
|
|
.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;align-items:center;direction:ltr;display:flex;flex-direction:column;font-family:inherit;font-family:var(--plyr-font-family,inherit);font-variant-numeric:tabular-nums;font-weight:400;font-weight:var(--plyr-font-weight-regular,400);line-height:1.7;line-height:var(--plyr-line-height,1.7);max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease;z-index:0}
|
|||
|
|
.plyr audio,.plyr iframe,.plyr video{display:block;height:100%;width:100%}
|
|||
|
|
.plyr button{font:inherit;line-height:inherit;width:auto}
|
|||
|
|
.plyr:focus{outline:0}
|
|||
|
|
.plyr--full-ui{box-sizing:border-box}
|
|||
|
|
.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before{box-sizing:inherit}
|
|||
|
|
.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}
|
|||
|
|
.plyr__badge{background:#4a5464;background:var(--plyr-badge-background,#4a5464);border-radius:2px;border-radius:var(--plyr-badge-border-radius,2px);color:#fff;color:var(--plyr-badge-text-color,#fff);font-size:9px;font-size:var(--plyr-font-size-badge,9px);line-height:1;padding:3px 4px}
|
|||
|
|
.plyr--full-ui ::-webkit-media-text-track-container{display:none}
|
|||
|
|
.plyr__captions{-webkit-animation:plyr-fade-in .3s ease;animation:plyr-fade-in .3s ease;bottom:0;display:none;font-size:13px;font-size:var(--plyr-font-size-small,13px);left:0;padding:10px;padding:var(--plyr-control-spacing,10px);position:absolute;text-align:center;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out, -webkit-transform .4s ease-in-out;width:100%}
|
|||
|
|
.plyr__captions span:empty{display:none}
|
|||
|
|
@media (min-width:480px){.plyr__captions{font-size:15px;font-size:var(--plyr-font-size-base,15px);padding:20px;padding:calc(var(--plyr-control-spacing, 10px)*2)}}
|
|||
|
|
@media (min-width:768px){.plyr__captions{font-size:18px;font-size:var(--plyr-font-size-large,18px)}}
|
|||
|
|
.plyr--captions-active .plyr__captions{display:block}
|
|||
|
|
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{-webkit-transform:translateY(-40px);transform:translateY(-40px);-webkit-transform:translateY(calc(var(--plyr-control-spacing, 10px)*-4));transform:translateY(calc(var(--plyr-control-spacing, 10px)*-4))}
|
|||
|
|
.plyr__caption{background:#000c;background:var(--plyr-captions-background,#000c);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;color:var(--plyr-captions-text-color,#fff);line-height:185%;padding:.2em .5em;white-space:pre-wrap}
|
|||
|
|
.plyr__caption div{display:inline}
|
|||
|
|
.plyr__control{background:#0000;border:0;border-radius:4px;border-radius:var(--plyr-control-radius,4px);color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7);position:relative;transition:all .3s ease}
|
|||
|
|
.plyr__control svg{fill:currentColor;display:block;height:18px;height:var(--plyr-control-icon-size,18px);pointer-events:none;width:18px;width:var(--plyr-control-icon-size,18px)}
|
|||
|
|
.plyr__control:focus{outline:0}
|
|||
|
|
.plyr__control:focus-visible{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
|
|||
|
|
a.plyr__control{text-decoration:none}
|
|||
|
|
.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before{display:none}
|
|||
|
|
.plyr--full-ui ::-webkit-media-controls{display:none}
|
|||
|
|
.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}
|
|||
|
|
.plyr__controls .plyr__progress__container{flex:1;min-width:0}
|
|||
|
|
.plyr__controls .plyr__controls__item{margin-left:2.5px;margin-left:calc(var(--plyr-control-spacing, 10px)/4)}
|
|||
|
|
.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}
|
|||
|
|
.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px;padding-left:calc(var(--plyr-control-spacing, 10px)/4)}
|
|||
|
|
.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px;padding:0 calc(var(--plyr-control-spacing, 10px)/2)}
|
|||
|
|
.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}
|
|||
|
|
.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty{display:none}
|
|||
|
|
.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}
|
|||
|
|
.plyr__menu{display:flex;position:relative}
|
|||
|
|
.plyr__menu .plyr__control svg{transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease}
|
|||
|
|
.plyr__menu .plyr__control[aria-expanded=true] svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
|
|||
|
|
.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}
|
|||
|
|
.plyr__menu__container{-webkit-animation:plyr-popup .2s ease;animation:plyr-popup .2s ease;background:#ffffffe6;background:var(--plyr-menu-background,#ffffffe6);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-menu-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-menu-color,#4a5464);font-size:15px;font-size:var(--plyr-font-size-base,15px);margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}
|
|||
|
|
.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}
|
|||
|
|
.plyr__menu__container:after{border:4px solid #0000;border-top-color:#ffffffe6;border:var(--plyr-menu-arrow-size,4px) solid #0000;border-top-color:var(--plyr-menu-background,#ffffffe6);content:"";height:0;position:absolute;right:14px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7 - var(--plyr-menu-arrow-size, 4px)/2);top:100%;width:0}
|
|||
|
|
.plyr__menu__container [role=menu]{padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7)}
|
|||
|
|
.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}
|
|||
|
|
.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}
|
|||
|
|
.plyr__menu__container .plyr__control{align-items:center;color:#4a5464;color:var(--plyr-menu-color,#4a5464);display:flex;font-size:13px;font-size:var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));padding:4.66667px 10.5px;padding:calc(var(--plyr-control-spacing, 10px)*.7/1.5) calc(var(--plyr-control-spacing, 10px)*.7*1.5);-webkit-user-select:none;user-select:none;width:100%}
|
|||
|
|
.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}
|
|||
|
|
.plyr__menu__container .plyr__control:after{border:4px solid #0000;border:var(--plyr-menu-item-arrow-size,4px) solid #0000;content:"";position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
|
|||
|
|
.plyr__menu__container .plyr__control--forward{padding-right:28px;padding-right:calc(var(--plyr-control-spacing, 10px)*.7*4)}
|
|||
|
|
.plyr__menu__container .plyr__control--forward:after{border-left-color:#728197;border-left-color:var(--plyr-menu-arrow-color,#728197);right:6.5px;right:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}
|
|||
|
|
.plyr__menu__container .plyr__control--forward:focus-visible:after,.plyr__menu__container .plyr__control--forward:hover:after{border-left-color:initial}
|
|||
|
|
.plyr__menu__container .plyr__control--back{font-weight:400;font-weight:var(--plyr-font-weight-regular,400);margin:7px;margin:calc(var(--plyr-control-spacing, 10px)*.7);margin-bottom:3.5px;margin-bottom:calc(var(--plyr-control-spacing, 10px)*.7/2);padding-left:28px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*4);position:relative;width:calc(100% - 14px);width:calc(100% - var(--plyr-control-spacing, 10px)*.7*2)}
|
|||
|
|
.plyr__menu__container .plyr__control--back:after{border-right-color:#728197;border-right-color:var(--plyr-menu-arrow-color,#728197);left:6.5px;left:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}
|
|||
|
|
.plyr__menu__container .plyr__control--back:before{background:#dcdfe5;background:var(--plyr-menu-back-border-color,#dcdfe5);box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);content:"";height:1px;left:0;margin-top:3.5px;margin-top:calc(var(--plyr-control-spacing, 10px)*.7/2);overflow:hidden;position:absolute;right:0;top:100%}
|
|||
|
|
.plyr__menu__container .plyr__control--back:focus-visible:after,.plyr__menu__container .plyr__control--back:hover:after{border-right-color:initial}
|
|||
|
|
.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:7px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7)}
|
|||
|
|
.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before{border-radius:100%}
|
|||
|
|
.plyr__menu__container .plyr__control[role=menuitemradio]:before{background:#0000001a;content:"";display:block;flex-shrink:0;height:16px;margin-right:10px;margin-right:var(--plyr-control-spacing,10px);transition:all .3s ease;width:16px}
|
|||
|
|
.plyr__menu__container .plyr__control[role=menuitemradio]:after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;-webkit-transform:translateY(-50%) scale(0);transform:translateY(-50%) scale(0);transition:opacity .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;width:6px}
|
|||
|
|
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:#00b2ff;background:var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)))}
|
|||
|
|
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after{opacity:1;-webkit-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1)}
|
|||
|
|
.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before{background:#23282f1a}
|
|||
|
|
.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-5px;margin-right:calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2px);overflow:hidden;padding-left:24.5px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*3.5);pointer-events:none}
|
|||
|
|
.plyr--full-ui input[type=range]{-webkit-appearance:none;appearance:none;background:#0000;border:0;border-radius:26px;border-radius:calc(var(--plyr-range-thumb-height, 13px)*2);color:#00b2ff;color:var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));display:block;height:19px;height:calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));margin:0;min-width:0;padding:0;transition:box-shadow .3s ease;width:100%}
|
|||
|
|
.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:#0000;background-image:linear-gradient(90deg,currentColor 0,#0000 0);background-image:linear-gradient(to right,currentColor var(--value,0),#0000 var(--value,0));border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none}
|
|||
|
|
.plyr--full-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:-4px;margin-top:calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px))/2*-1);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
|
|||
|
|
.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
|
|||
|
|
.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
|
|||
|
|
.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}
|
|||
|
|
.plyr--full-ui input[type=range]::-ms-track{color:#0000}
|
|||
|
|
.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
|
|||
|
|
.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
|
|||
|
|
.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
|
|||
|
|
.plyr--full-ui input[type=range]::-ms-tooltip{display:none}
|
|||
|
|
.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}
|
|||
|
|
.plyr--full-ui input[type=range]:focus{outline:0}
|
|||
|
|
.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
|
|||
|
|
.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
|
|||
|
|
.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
|
|||
|
|
.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}
|
|||
|
|
.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}
|
|||
|
|
.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}
|
|||
|
|
.plyr__time{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}
|
|||
|
|
.plyr__time+.plyr__time:before{content:"⁄";margin-right:10px;margin-right:var(--plyr-control-spacing,10px)}
|
|||
|
|
@media (max-width:767px){.plyr__time+.plyr__time{display:none}}
|
|||
|
|
.plyr__tooltip{background:#fff;background:var(--plyr-tooltip-background,#fff);border-radius:5px;border-radius:var(--plyr-tooltip-radius,5px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-tooltip-color,#4a5464);font-size:13px;font-size:var(--plyr-font-size-small,13px);font-weight:400;font-weight:var(--plyr-font-weight-regular,400);left:50%;line-height:1.3;margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:5px 7.5px;padding:calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);pointer-events:none;position:absolute;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s ease .1s,-webkit-transform .2s ease .1s;transition:transform .2s ease .1s,opacity .2s ease .1s;transition:transform .2s ease .1s,opacity .2s ease .1s,-webkit-transform .2s ease .1s;white-space:nowrap;z-index:2}
|
|||
|
|
.plyr__tooltip:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;z-index:2}
|
|||
|
|
.plyr .plyr__control:focus-visible .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;-webkit-transform:translate(-50%) scale(1);transform:translate(-50%) scale(1)}
|
|||
|
|
.plyr .plyr__control:hover .plyr__tooltip{z-index:3}
|
|||
|
|
.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;-webkit-transform:translateY(10px) scale(.8);transform:translateY(10px) scale(.8);-webkit-transform-origin:0 100%;transform-origin:0 100%}
|
|||
|
|
.plyr__controls>.plyr__control:first-child .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before{left:16px;left:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7)}
|
|||
|
|
.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;-webkit-transform:translateY(10px) scale(.8);transform:translateY(10px) scale(.8);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
|
|||
|
|
.plyr__controls>.plyr__control:last-child .plyr__tooltip:before{left:auto;right:16px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);-webkit-transform:translateX(50%);transform:translateX(50%)}
|
|||
|
|
.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}
|
|||
|
|
.plyr__progress{left:6.5px;left:calc(var(--plyr-range-thumb-height, 13px)*.5);margin-right:13px;margin-right:var(--plyr-range-thumb-height,13px);position:relative}
|
|||
|
|
.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-6.5px;margin-left:calc(var(--plyr-range-thumb-height, 13px)*-.5);margin-right:-6.5px;margin-right:calc(var(--plyr-range-thumb-height, 13px)*-.5);width:calc(100% + 13px);width:calc(100% + var(--plyr-range-thumb-height, 13px))}
|
|||
|
|
.plyr__progress input[type=range]{position:relative;z-index:2}
|
|||
|
|
.plyr__progress .plyr__tooltip{left:0;max-width:120px;overflow-wrap:break-word}
|
|||
|
|
.plyr__progress__buffer{-webkit-appearance:none;background:#0000;border:0;border-radius:100px;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin-top:-2.5px;margin-top:calc((var(--plyr-range-track-height, 5px)/2)*-1);padding:0;position:absolute;top:50%}
|
|||
|
|
.plyr__progress__buffer::-webkit-progress-bar{background:#0000}
|
|||
|
|
.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}
|
|||
|
|
.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}
|
|||
|
|
.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}
|
|||
|
|
.plyr--loading .plyr__progress__buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}
|
|||
|
|
.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}
|
|||
|
|
.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
|
|||
|
|
.plyr__progress__marker{background-color:#fff;background-color:var(--plyr-progress-marker-background,#fff);border-radius:1px;height:5px;height:var(--plyr-range-track-height,5px);position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:3px;width:var(--plyr-progress-marker-width,3px);z-index:3}
|
|||
|
|
.plyr__volume{align-items:center;display:flex;position:relative}
|
|||
|
|
.plyr__volume input[type=range]{margin-left:5px;margin-left:calc(var(--plyr-control-spacing, 10px)/2);margin-right:5px;margin-right:calc(var(--plyr-control-spacing, 10px)/2);max-width:90px;min-width:60px;position:relative;z-index:2}
|
|||
|
|
.plyr--audio{display:block}
|
|||
|
|
.plyr--audio .plyr__controls{background:#fff;background:var(--plyr-audio-controls-background,#fff);border-radius:inherit;color:#4a5464;color:var(--plyr-audio-control-color,#4a5464);padding:10px;padding:var(--plyr-control-spacing,10px)}
|
|||
|
|
.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}
|
|||
|
|
.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
|
|||
|
|
.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
|
|||
|
|
.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
|
|||
|
|
.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
|
|||
|
|
.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
|
|||
|
|
.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
|
|||
|
|
.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
|
|||
|
|
.plyr--video{overflow:hidden}
|
|||
|
|
.plyr--video.plyr--menu-open{overflow:visible}
|
|||
|
|
.plyr__video-wrapper{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));border-radius:inherit;height:100%;margin:auto;overflow:hidden;position:relative;width:100%}
|
|||
|
|
.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{aspect-ratio:16/9}
|
|||
|
|
@supports not (aspect-ratio:16/9){.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{height:0;padding-bottom:56.25%;position:relative}}
|
|||
|
|
.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}
|
|||
|
|
.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;-webkit-transform:translateY(-38.28125%);transform:translateY(-38.28125%)}
|
|||
|
|
.plyr--video .plyr__controls{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;color:var(--plyr-video-control-color,#fff);left:0;padding:5px;padding:calc(var(--plyr-control-spacing, 10px)/2);padding-top:20px;padding-top:calc(var(--plyr-control-spacing, 10px)*2);position:absolute;right:0;transition:opacity .4s ease-in-out,-webkit-transform .4s ease-in-out;transition:opacity .4s ease-in-out,transform .4s ease-in-out;transition:opacity .4s ease-in-out,transform .4s ease-in-out,-webkit-transform .4s ease-in-out;z-index:3}
|
|||
|
|
@media (min-width:480px){.plyr--video .plyr__controls{padding:10px;padding:var(--plyr-control-spacing,10px);padding-top:35px;padding-top:calc(var(--plyr-control-spacing, 10px)*3.5)}}
|
|||
|
|
.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;-webkit-transform:translateY(100%);transform:translateY(100%)}
|
|||
|
|
.plyr--video .plyr__control:focus-visible,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-video-control-color-hover,#fff)}
|
|||
|
|
.plyr__control--overlaid{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));border:0;border-radius:100%;color:#fff;color:var(--plyr-video-control-color,#fff);display:none;left:50%;opacity:.9;padding:15px;padding:calc(var(--plyr-control-spacing, 10px)*1.5);position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:.3s;z-index:2}
|
|||
|
|
.plyr__control--overlaid svg{left:2px;position:relative}
|
|||
|
|
.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{opacity:1}
|
|||
|
|
.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}
|
|||
|
|
.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}
|
|||
|
|
.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
|
|||
|
|
.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
|
|||
|
|
.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
|
|||
|
|
.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
|
|||
|
|
.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
|
|||
|
|
.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
|
|||
|
|
.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}
|
|||
|
|
.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
|
|||
|
|
.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
|
|||
|
|
.plyr:-webkit-full-screen video{height:100%}
|
|||
|
|
.plyr:fullscreen video{height:100%}
|
|||
|
|
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}
|
|||
|
|
.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}
|
|||
|
|
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}
|
|||
|
|
.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}
|
|||
|
|
.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}
|
|||
|
|
.plyr:fullscreen.plyr--hide-controls{cursor:none}
|
|||
|
|
@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}.plyr:fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}
|
|||
|
|
.plyr--fullscreen-fallback{background:#000;border-radius:0!important;bottom:0;height:100%;left:0;margin:0;position:fixed;right:0;top:0;width:100%;z-index:10000000}
|
|||
|
|
.plyr--fullscreen-fallback video{height:100%}
|
|||
|
|
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}
|
|||
|
|
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}
|
|||
|
|
.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}
|
|||
|
|
@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}
|
|||
|
|
.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}
|
|||
|
|
.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}
|
|||
|
|
.plyr__ads:after{background:#23282f;border-radius:2px;bottom:10px;bottom:var(--plyr-control-spacing,10px);color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;right:var(--plyr-control-spacing,10px);z-index:3}
|
|||
|
|
.plyr__ads:empty:after{display:none}
|
|||
|
|
.plyr__cues{background:currentColor;display:block;height:5px;height:var(--plyr-range-track-height,5px);left:0;opacity:.8;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:3px;z-index:3}
|
|||
|
|
.plyr__preview-thumb{background-color:#fff;background-color:var(--plyr-tooltip-background,#fff);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:3px;pointer-events:none;position:absolute;-webkit-transform:translateY(10px) scale(.8);transform:translateY(10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s ease .1s,-webkit-transform .2s ease .1s;transition:transform .2s ease .1s,opacity .2s ease .1s;transition:transform .2s ease .1s,opacity .2s ease .1s,-webkit-transform .2s ease .1s;z-index:2}
|
|||
|
|
.plyr__preview-thumb--is-shown{opacity:1;-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}
|
|||
|
|
.plyr__preview-thumb:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:calc(50% + var(--preview-arrow-offset));position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;z-index:2}
|
|||
|
|
.plyr__preview-thumb__image-container{background:#c1c8d1;border-radius:7px;border-radius:calc(var(--plyr-menu-radius, 8px) - 1px);overflow:hidden;position:relative;z-index:0}
|
|||
|
|
.plyr__preview-thumb__image-container img,.plyr__preview-thumb__image-container:after{height:100%;left:0;position:absolute;top:0;width:100%}
|
|||
|
|
.plyr__preview-thumb__image-container:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #00000026;content:"";pointer-events:none}
|
|||
|
|
.plyr__preview-thumb__image-container img{max-height:none;max-width:none}
|
|||
|
|
.plyr__preview-thumb__time-container{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:7px;border-bottom-left-radius:calc(var(--plyr-menu-radius, 8px) - 1px);border-bottom-right-radius:7px;border-bottom-right-radius:calc(var(--plyr-menu-radius, 8px) - 1px);bottom:0;left:0;line-height:1.1;padding:20px 6px 6px;position:absolute;right:0;z-index:3}
|
|||
|
|
.plyr__preview-thumb__time-container span{color:#fff;font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}
|
|||
|
|
.plyr__preview-scrubbing{bottom:0;-webkit-filter:blur(1px);filter:blur(1px);height:100%;left:0;margin:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease;width:100%;z-index:1}
|
|||
|
|
.plyr__preview-scrubbing--is-shown{opacity:1}
|
|||
|
|
.plyr__preview-scrubbing img{height:100%;left:0;max-height:none;max-width:none;-o-object-fit:contain;object-fit:contain;position:absolute;top:0;width:100%}
|
|||
|
|
.plyr--no-transition{transition:none!important}
|
|||
|
|
.plyr__sr-only{clip:rect(1px,1px,1px,1px);border:0!important;height:1px!important;overflow:hidden;padding:0!important;position:absolute!important;width:1px!important}
|
|||
|
|
.plyr [hidden]{display:none!important}
|
|||
|
|
main {
|
|||
|
|
background: transparent;
|
|||
|
|
grid-auto-rows: auto;
|
|||
|
|
}
|
|||
|
|
.thread {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
border-radius: var(--br);
|
|||
|
|
}
|
|||
|
|
.toot {
|
|||
|
|
background: var(--toot-bg);
|
|||
|
|
box-shadow: var(--boxshadow);
|
|||
|
|
border: var(--boxshadow-border);
|
|||
|
|
border-radius: var(--br);
|
|||
|
|
position: relative;
|
|||
|
|
margin-bottom: var(--br);
|
|||
|
|
padding-top: 0.75rem;
|
|||
|
|
}
|
|||
|
|
.toot a {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
color: inherit;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
.toot .author > a {
|
|||
|
|
padding: 0 0.75rem;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 3.5rem 1fr auto;
|
|||
|
|
grid-template-rows: auto auto;
|
|||
|
|
grid-template-areas:
|
|||
|
|
"avatar display date"
|
|||
|
|
"avatar user .";
|
|||
|
|
gap: 0 0.5rem;
|
|||
|
|
}
|
|||
|
|
.toot .author > a .avatar {
|
|||
|
|
grid-area: avatar;
|
|||
|
|
height: 3.5rem;
|
|||
|
|
width: 3.5rem;
|
|||
|
|
-o-object-fit: cover;
|
|||
|
|
object-fit: cover;
|
|||
|
|
|
|||
|
|
border: 0.15rem solid var(--avatar-border);
|
|||
|
|
border-radius: var(--br);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
/* hides corners from img overflowing */
|
|||
|
|
.toot .author > a .avatar img {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
-o-object-fit: cover;
|
|||
|
|
object-fit: cover;
|
|||
|
|
background: var(--bg);
|
|||
|
|
}
|
|||
|
|
.toot .author > a .displayname, .toot .author > a .username {
|
|||
|
|
justify-self: start;
|
|||
|
|
align-self: start;
|
|||
|
|
|
|||
|
|
max-width: 100%;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
.toot .author > a .displayname {
|
|||
|
|
grid-area: display;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
line-height: 1.3rem;
|
|||
|
|
/* margin-top: -0.5rem; */
|
|||
|
|
}
|
|||
|
|
.toot .author > a .username {
|
|||
|
|
grid-area: user;
|
|||
|
|
color: var(--link-fg);
|
|||
|
|
font-size: 1rem;
|
|||
|
|
line-height: 1.3rem;
|
|||
|
|
}
|
|||
|
|
.toot .author > a .timestamp {
|
|||
|
|
grid-area: date;
|
|||
|
|
color: var(--fg-reduced);
|
|||
|
|
}
|
|||
|
|
.toot .body {
|
|||
|
|
padding: 0.5rem 0.75rem;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
.toot details > summary {
|
|||
|
|
display: inline-block;
|
|||
|
|
list-style: none;
|
|||
|
|
}
|
|||
|
|
.toot details > summary::-webkit-details-marker {
|
|||
|
|
display: none; /* Safari */
|
|||
|
|
}
|
|||
|
|
.toot details > summary .button {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.toot .text {
|
|||
|
|
margin: 0;
|
|||
|
|
grid-row: span 1;
|
|||
|
|
grid-column: 1 / span 3;
|
|||
|
|
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.toot .text details > summary {
|
|||
|
|
padding-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
.toot .text details > summary .button {
|
|||
|
|
padding: 0.2rem 0.3rem;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
}
|
|||
|
|
.toot .text a {
|
|||
|
|
color: var(--link-fg);
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
.toot .text .content {
|
|||
|
|
word-break: break-word;
|
|||
|
|
}
|
|||
|
|
.toot .text .content blockquote {
|
|||
|
|
padding: 0.5rem 0 0.5rem 0.5rem;
|
|||
|
|
border-left: 0.2rem solid var(--border-accent);
|
|||
|
|
margin: 0;
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
.toot .text .content hr {
|
|||
|
|
border: 1px dashed var(--border-accent);
|
|||
|
|
}
|
|||
|
|
.toot .text .content pre, .toot .text .content code {
|
|||
|
|
background-color: var(--gray2);
|
|||
|
|
}
|
|||
|
|
.toot .text .content code {
|
|||
|
|
padding: 0.25rem;
|
|||
|
|
border-radius: var(--br-inner);
|
|||
|
|
}
|
|||
|
|
.toot .text .content pre {
|
|||
|
|
display: flex;
|
|||
|
|
border-radius: var(--br);
|
|||
|
|
padding: 0.5rem;
|
|||
|
|
}
|
|||
|
|
.toot .text .content pre code {
|
|||
|
|
padding: 0.5rem;
|
|||
|
|
white-space: pre;
|
|||
|
|
border-radius: 0;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
}
|
|||
|
|
.toot .text .content img {
|
|||
|
|
max-width: 100%;
|
|||
|
|
margin: 5px auto;
|
|||
|
|
}
|
|||
|
|
.toot .text .content img[alt~="!center"] {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.toot .text .emoji {
|
|||
|
|
transition: 0.1s;
|
|||
|
|
}
|
|||
|
|
.toot .text .emoji:hover, .toot .text .emoji:active {
|
|||
|
|
-webkit-transform: scale(2);
|
|||
|
|
transform: scale(2);
|
|||
|
|
background-color: var(--bg);
|
|||
|
|
box-shadow: var(--boxshadow);
|
|||
|
|
border: var(--boxshadow-border);
|
|||
|
|
border-radius: var(--br-inner);
|
|||
|
|
}
|
|||
|
|
.toot .media {
|
|||
|
|
grid-column: span 3;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 50% 50%;
|
|||
|
|
grid-auto-rows: 10rem;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 0.15rem solid var(--gray1);
|
|||
|
|
border-radius: var(--br);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details {
|
|||
|
|
position: absolute;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details[open] summary {
|
|||
|
|
height: auto;
|
|||
|
|
width: auto;
|
|||
|
|
margin: 1rem;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details[open] summary .show, .toot .media .media-wrapper details[open] summary video, .toot .media .media-wrapper details[open] summary img {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details[open] summary .eye.button .hide {
|
|||
|
|
display: inline-block;
|
|||
|
|
grid-column: 1 / span 3;
|
|||
|
|
grid-row: 1 / span 2;
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details 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 .";
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details summary .eye.button {
|
|||
|
|
grid-area: eye;
|
|||
|
|
align-self: start;
|
|||
|
|
justify-self: start;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0.4rem;
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details summary .eye.button .fa-fw {
|
|||
|
|
line-height: var(--fa-fw);
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details summary .eye.button .hide {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details summary .show.sensitive {
|
|||
|
|
grid-area: sensitive;
|
|||
|
|
align-self: center;
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details summary .show.sensitive .button {
|
|||
|
|
cursor: pointer;
|
|||
|
|
align-self: center;
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details summary video, .toot .media .media-wrapper details summary img {
|
|||
|
|
z-index: -1;
|
|||
|
|
position: absolute;
|
|||
|
|
height: calc(100% + 1.2rem);
|
|||
|
|
width: calc(100% + 1.2rem);
|
|||
|
|
top: -0.6rem;
|
|||
|
|
left: -0.6rem;
|
|||
|
|
-webkit-filter: blur(1.2rem);
|
|||
|
|
filter: blur(1.2rem);
|
|||
|
|
}
|
|||
|
|
.toot .media .media-wrapper details video.plyr-video, .toot .media .media-wrapper details .plyr {
|
|||
|
|
position: absolute;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
-o-object-fit: contain;
|
|||
|
|
object-fit: contain;
|
|||
|
|
background: var(--gray1);
|
|||
|
|
}
|
|||
|
|
.toot .media.single .media-wrapper {
|
|||
|
|
grid-column: span 2;
|
|||
|
|
}
|
|||
|
|
.toot .media.odd .media-wrapper:first-child, .toot .media.double .media-wrapper {
|
|||
|
|
grid-row: span 2;
|
|||
|
|
}
|
|||
|
|
.toot .media img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
-o-object-fit: cover;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
.toot .info {
|
|||
|
|
display: flex;
|
|||
|
|
background: var(--toot-info-bg);
|
|||
|
|
color: var(--fg-reduced);
|
|||
|
|
border-top: 0.15rem solid var(--toot-info-border);
|
|||
|
|
padding: 0.5rem 0.75rem;
|
|||
|
|
}
|
|||
|
|
.toot .info div, .toot .info time {
|
|||
|
|
padding-right: 1rem;
|
|||
|
|
}
|
|||
|
|
.toot .info .stats {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.toot .info{
|
|||
|
|
|
|||
|
|
grid-column: span 3;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.toot .toot-link {
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-indent: 100%;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
.toot:first-child {
|
|||
|
|
/* top left, top right */
|
|||
|
|
border-top-left-radius: var(--br);
|
|||
|
|
border-top-right-radius: var(--br);
|
|||
|
|
}
|
|||
|
|
.toot:last-child, .toot:last-child .info {
|
|||
|
|
/* bottom left, bottom right */
|
|||
|
|
border-bottom-left-radius: var(--br);
|
|||
|
|
border-bottom-right-radius: var(--br);
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
.toot.expanded {
|
|||
|
|
background: var(--toot-focus-bg);
|
|||
|
|
padding-bottom: 0;
|
|||
|
|
}
|
|||
|
|
.toot.expanded .info {
|
|||
|
|
background: var(--toot-focus-info-bg);
|
|||
|
|
}
|
|||
|
|
.plyr--video {
|
|||
|
|
flex-direction: column-reverse;
|
|||
|
|
}
|
|||
|
|
.plyr--video .plyr__video-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.plyr--video .plyr__controls {
|
|||
|
|
align-self: stretch;
|
|||
|
|
position: initial;
|
|||
|
|
padding: 0.1rem;
|
|||
|
|
padding-top: 0.2rem;
|
|||
|
|
}
|
|||
|
|
.plyr--video .plyr__control {
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
.plyr--video .plyr__control--overlaid {
|
|||
|
|
top: calc(50% - 18px);
|
|||
|
|
}
|
|||
|
|
.pswp__content {
|
|||
|
|
padding: 2rem;
|
|||
|
|
}
|
|||
|
|
.pswp__content .plyr {
|
|||
|
|
max-height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|