Styles cleanup, I guess
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
@@ -1,3 +0,0 @@
|
||||
.aliases__accounts.empty-column-indicator {
|
||||
min-height: unset;
|
||||
}
|
||||
@@ -1,14 +1,17 @@
|
||||
.audio-player {
|
||||
@apply relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
|
||||
direction: ltr;
|
||||
@apply [direction:ltr] relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
|
||||
|
||||
&.editable {
|
||||
@apply rounded-none h-full;
|
||||
}
|
||||
|
||||
.video-player__volume::before,
|
||||
.video-player__seek::before {
|
||||
@apply bg-white/10;
|
||||
.video-player__seek {
|
||||
@apply before:top-0;
|
||||
}
|
||||
|
||||
.video-player__volume,
|
||||
.video-player__seek {
|
||||
@apply before:bg-white/10;
|
||||
}
|
||||
|
||||
.video-player__seek__buffer {
|
||||
@@ -25,13 +28,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.video-player__time-sep,
|
||||
.video-player__time-total,
|
||||
.video-player__time-current {
|
||||
@apply text-current;
|
||||
}
|
||||
|
||||
.video-player__seek::before,
|
||||
.video-player__seek__buffer,
|
||||
.video-player__seek__progress {
|
||||
@apply top-0;
|
||||
@@ -45,7 +41,3 @@
|
||||
@apply pt-2.5 bg-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler-audio {
|
||||
@apply relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
.empty-column-indicator,
|
||||
.error-column {
|
||||
.empty-column-indicator {
|
||||
@apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;
|
||||
|
||||
@supports (display: grid) { // hack to fix Chrome <57
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
& > span {
|
||||
@apply max-w-[400px];
|
||||
}
|
||||
@@ -14,13 +9,3 @@
|
||||
@apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
|
||||
}
|
||||
}
|
||||
|
||||
.error-column {
|
||||
flex-direction: column;
|
||||
|
||||
.svg-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
// Language codes that uses CJK fonts
|
||||
/* stylelint-disable-next-line value-keyword-case -- locale filenames */
|
||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||
|
||||
.compose-form {
|
||||
&__warning {
|
||||
@apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
.crypto-address {
|
||||
@apply flex flex-col p-5;
|
||||
|
||||
&__head {
|
||||
@apply flex items-center mb-1.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@apply font-bold;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
@apply flex items-start justify-center w-6 mr-2.5;
|
||||
|
||||
img {
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
@apply flex ml-auto;
|
||||
|
||||
a {
|
||||
@apply text-gray-400 ml-2;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
@apply h-4.5 w-4.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__note {
|
||||
@apply mb-2.5;
|
||||
}
|
||||
|
||||
&__qrcode {
|
||||
@apply flex items-center justify-center mb-3 p-2.5;
|
||||
}
|
||||
|
||||
&__address {
|
||||
@apply mt-auto;
|
||||
}
|
||||
}
|
||||
|
||||
.crypto-donate-modal .crypto-address {
|
||||
@apply p-0;
|
||||
}
|
||||
@@ -34,7 +34,7 @@
|
||||
}
|
||||
|
||||
.react-datepicker__current-month {
|
||||
margin-top: 2px;
|
||||
@apply mt-0.5;
|
||||
}
|
||||
|
||||
.react-datepicker__navigation {
|
||||
@@ -58,7 +58,7 @@
|
||||
}
|
||||
|
||||
.react-datepicker__navigation--next {
|
||||
right: 16px;
|
||||
@apply right-4;
|
||||
|
||||
&--with-time:not(.react-datepicker__navigation--next--with-today-button) {
|
||||
right: 100px;
|
||||
|
||||
@@ -1,15 +1,9 @@
|
||||
.thread {
|
||||
@apply bg-white black:bg-black dark:bg-primary-900;
|
||||
|
||||
&__status {
|
||||
@apply relative pb-4;
|
||||
|
||||
.status__wrapper {
|
||||
@apply shadow-none p-0;
|
||||
}
|
||||
.thread__status {
|
||||
.status__wrapper {
|
||||
@apply shadow-none p-0;
|
||||
}
|
||||
|
||||
.status__content-wrapper {
|
||||
@apply pl-[calc(42px+12px)] rtl:pl-0 rtl:pr-[calc(42px+12px)];
|
||||
@apply pl-[54px] rtl:pl-0 rtl:pr-[calc(54px)];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,12 @@
|
||||
.svg-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.2s;
|
||||
@apply h-4 w-4 flex items-center justify-center transition duration-200;
|
||||
|
||||
svg {
|
||||
// Apparently this won't skew the image as long as it has a viewbox
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: 0.2s;
|
||||
@apply h-full w-full transition duration-200;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
|
||||
@@ -1,143 +1,76 @@
|
||||
$media-compact-size: 50px;
|
||||
|
||||
.media-gallery {
|
||||
@apply rounded-lg;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@apply rounded-lg box-border overflow-hidden isolate relative w-full h-auto;
|
||||
|
||||
&__item {
|
||||
@apply rounded-sm;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@apply rounded-sm border-0 box-border block float-left relative overflow-hidden;
|
||||
|
||||
&__icons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
|
||||
|
||||
.svg-icon {
|
||||
@apply h-24 w-24;
|
||||
@apply size-24;
|
||||
}
|
||||
}
|
||||
|
||||
&-overflow {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
z-index: 2;
|
||||
@apply absolute w-full h-full inset-0 bg-white/75 z-[2] text-center font-bold text-5xl flex items-center justify-center pointer-events-none;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-thumbnail {
|
||||
@apply text-gray-400;
|
||||
cursor: zoom-in;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@apply text-gray-400 cursor-zoom-in block no-underline leading-[0] relative z-[1] h-full w-full;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
@apply w-full h-full object-cover
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
@apply bg-gray-200 dark:bg-gray-900 rounded-lg;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
@apply bg-gray-200 dark:bg-gray-900 rounded-lg w-full h-full object-cover absolute top-0 left-0 z-0;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__gifv {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@apply h-full overflow-hidden relative w-full;
|
||||
}
|
||||
|
||||
&__item-gifv-thumbnail {
|
||||
@apply rounded-md;
|
||||
cursor: zoom-in;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
transform: none;
|
||||
top: 0;
|
||||
@apply rounded-md cursor-zoom-in h-full object-cover relative w-full z-[1] transform-none top-0;
|
||||
}
|
||||
|
||||
&__gifv__label,
|
||||
&__filename__label,
|
||||
&__file-extension__label {
|
||||
@apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90;
|
||||
font-size: 11px;
|
||||
@apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90 text-xs leading-[18px];
|
||||
transition: opacity 0.1s ease;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&__gifv {
|
||||
&.autoplay {
|
||||
.media-gallery__gifv__label {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.media-gallery__gifv__label {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--compact {
|
||||
height: $media-compact-size !important;
|
||||
background: transparent;
|
||||
@apply bg-transparent h-12;
|
||||
|
||||
.media-gallery__item {
|
||||
width: $media-compact-size !important;
|
||||
height: $media-compact-size !important;
|
||||
inset: auto !important;
|
||||
float: left !important;
|
||||
margin-right: 5px;
|
||||
@apply h-12 w-12 inset-auto float-left mr-[5px] #{!important};
|
||||
|
||||
&-overflow {
|
||||
font-size: 20px;
|
||||
@apply text-xl;
|
||||
}
|
||||
|
||||
&__icons .svg-icon {
|
||||
@@ -146,7 +79,7 @@ $media-compact-size: 50px;
|
||||
}
|
||||
|
||||
.media-gallery__file-extension__label {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,3 @@
|
||||
.modal-root__modal {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
z-index: 9999;
|
||||
max-height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.media-modal {
|
||||
.audio-player.detailed,
|
||||
.extended-video-player {
|
||||
@@ -29,101 +21,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.actions-modal {
|
||||
@apply flex-col relative text-gray-400 overflow-hidden w-full max-w-lg m-auto bg-white black:bg-black dark:bg-gray-900 shadow-xl rounded-2xl;
|
||||
max-height: calc(100vh - 3rem);
|
||||
|
||||
&__item-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dropdown-menu__separator {
|
||||
@apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600 black:bg-gray-800;
|
||||
}
|
||||
|
||||
&__status {
|
||||
@apply overflow-y-auto max-h-[300px];
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply my-2 flex-shrink-0 overflow-y-auto;
|
||||
max-height: calc(100vh - 147px);
|
||||
|
||||
&.with-status { max-height: calc(80vh - 75px); }
|
||||
|
||||
li:not(:empty) {
|
||||
a,
|
||||
button {
|
||||
@apply flex items-center px-4 py-3 text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 no-underline text-left;
|
||||
|
||||
&.destructive {
|
||||
@apply text-danger-600 dark:text-danger-400;
|
||||
}
|
||||
|
||||
.svg-icon:first-child {
|
||||
@apply min-w-[1.25rem] w-5 h-5;
|
||||
|
||||
svg {
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button[type='button'] {
|
||||
@apply w-full justify-center text-center;
|
||||
}
|
||||
.actions-modal ul li {
|
||||
a,
|
||||
button {
|
||||
.svg-icon svg {
|
||||
@apply stroke-[1.5];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply-mentions-modal__accounts {
|
||||
display: block;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.remote-interaction-modal {
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
&__fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 0 -10px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@apply border-b border-gray-300 dark:border-gray-600;
|
||||
content: '';
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 895px) {
|
||||
margin: 0;
|
||||
border-radius: 6px;
|
||||
height: unset !important;
|
||||
width: 440px !important;
|
||||
}
|
||||
|
||||
@media screen and (width <= 480px) {
|
||||
width: 330px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.notification .status__wrapper {
|
||||
@apply p-0 shadow-none rounded-none;
|
||||
@apply p-0;
|
||||
}
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
.reply-mentions {
|
||||
@apply text-gray-700 dark:text-gray-600 mb-1 text-sm;
|
||||
|
||||
&__account {
|
||||
@apply text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue no-underline hover:underline inline-block;
|
||||
direction: ltr;
|
||||
}
|
||||
}
|
||||
|
||||
.status__wrapper {
|
||||
.reply-mentions {
|
||||
display: block;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,40 +1,23 @@
|
||||
.search__icon {
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
@apply focus:outline-0 #{!important};
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus {
|
||||
outline: 0 !important;
|
||||
&::-moz-focus-inner {
|
||||
@apply border-0 outline-0 #{!important};
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
@apply right-4 rtl:left-4 rtl:right-auto text-gray-400;
|
||||
@include font-size(16);
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@apply right-4 rtl:left-4 rtl:right-auto text-gray-400 cursor-default inline-block absolute top-1/2 -translate-y-1/2 z-[2] w-4.5 h-4.5 opacity-0 pointer-events-none text-lg;
|
||||
|
||||
&.active {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
@apply pointer-events-auto opacity-100;
|
||||
}
|
||||
|
||||
&--search.active {
|
||||
pointer-events: none;
|
||||
@apply pointer-events-none;
|
||||
}
|
||||
|
||||
&--backspace {
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@apply cursor-pointer w-[22px] h-[22px];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,10 @@
|
||||
.status {
|
||||
@apply min-h-[54px] cursor-default;
|
||||
|
||||
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
|
||||
// Add margin to avoid Edge auto-hiding scrollbar appearing over content.
|
||||
// On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
|
||||
padding-right: 26px; // 10px + 16px
|
||||
}
|
||||
@apply min-h-[54px] cursor-default opacity-100;
|
||||
|
||||
@keyframes fade {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
opacity: 1;
|
||||
animation: fade 150ms linear;
|
||||
}
|
||||
|
||||
@@ -27,7 +20,7 @@
|
||||
@apply py-2;
|
||||
|
||||
.media-gallery {
|
||||
max-width: 250px;
|
||||
@apply max-w-[250px];
|
||||
}
|
||||
|
||||
.status__content {
|
||||
@@ -36,28 +29,23 @@
|
||||
|
||||
.video-player,
|
||||
.audio-player {
|
||||
margin-top: 8px;
|
||||
max-width: 250px;
|
||||
@apply mt-2 max-w-[250px];
|
||||
}
|
||||
|
||||
.media-gallery__item-thumbnail {
|
||||
cursor: default;
|
||||
@apply cursor-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-check-box-toggle {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@apply items-center flex justify-center p-2.5;
|
||||
flex: 0 0 auto;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.focusable:focus,
|
||||
.focusable-within:focus-within {
|
||||
outline: 0; /* Required b/c HotKeys lib sets this outline */
|
||||
@apply ring-2 ring-primary-300;
|
||||
@apply outline-0 ring-2 ring-primary-300;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
@@ -68,36 +56,22 @@ a.status-card {
|
||||
@apply cursor-pointer hover:bg-gray-100 dark:hover:bg-primary-800/30 hover:no-underline;
|
||||
}
|
||||
|
||||
.status-card-video,
|
||||
.status-card-audio {
|
||||
iframe {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.status-card__image {
|
||||
@apply relative overflow-hidden;
|
||||
flex: 0 0 40%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
& > .svg-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
@apply h-10 w-10 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
|
||||
transform-origin: 50% 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
svg {
|
||||
stroke-width: 1px;
|
||||
@apply stroke-[1px];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-card.horizontal {
|
||||
display: block;
|
||||
@apply block;
|
||||
}
|
||||
|
||||
.status-card.compact {
|
||||
@@ -113,34 +87,18 @@ a.status-card {
|
||||
}
|
||||
|
||||
.material-status {
|
||||
padding-bottom: 10px;
|
||||
@apply pb-2.5;
|
||||
|
||||
&__status {
|
||||
padding: 15px 0 10px;
|
||||
@apply pt-4 pb-0 px-2.5 rounded-[10px];
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 8px 10px;
|
||||
@apply px-2.5 py-2;
|
||||
|
||||
&__content {
|
||||
padding-top: 10px;
|
||||
@apply pt-2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-thumbs {
|
||||
position: relative;
|
||||
|
||||
&__clickable-region {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.detailed,
|
||||
.fullscreen {
|
||||
.video-player__volume__current,
|
||||
.video-player__volume__currnt,
|
||||
.video-player__volume::before {
|
||||
bottom: 27px;
|
||||
}
|
||||
@@ -11,151 +11,41 @@
|
||||
}
|
||||
|
||||
.video-player {
|
||||
@apply relative box-border max-w-full overflow-hidden rounded-[10px] bg-black text-white;
|
||||
direction: ltr;
|
||||
|
||||
&.editable {
|
||||
@apply rounded-none;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
video {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0;
|
||||
|
||||
video {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--inline {
|
||||
video {
|
||||
object-fit: contain;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(0deg, #000000d9 0, #00000073 60%, transparent);
|
||||
padding: 0 15px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
margin: 0 -5px;
|
||||
|
||||
.video-player__download__icon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
@apply flex min-w-[30px] items-center text-base whitespace-nowrap overflow-hidden text-ellipsis flex-initial;
|
||||
flex: 0 1 auto;
|
||||
min-width: 30px;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.player-button {
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
@apply inline-block outline-0 bg-transparent text-base border-0 text-white/75;
|
||||
flex: 0 0 auto;
|
||||
background: transparent;
|
||||
padding: 5px 6px;
|
||||
font-size: 16px;
|
||||
border: 0;
|
||||
color: rgba(#fff, 0.75);
|
||||
|
||||
.svg-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@apply w-5 h-5;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
@apply text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__time {
|
||||
display: inline;
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
&__time-sep,
|
||||
&__time-total,
|
||||
&__time-current {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__time-current {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__time-sep {
|
||||
display: inline-block;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
&__time-sep,
|
||||
&__time-total {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__volume {
|
||||
@apply inline-flex cursor-pointer h-6 relative overflow-hidden;
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.no-reduce-motion & {
|
||||
transition: all 100ms linear;
|
||||
}
|
||||
|
||||
&.active {
|
||||
overflow: visible;
|
||||
width: 50px;
|
||||
margin-right: 16px;
|
||||
@apply overflow-visible w-12 mr-4;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@@ -172,29 +62,14 @@
|
||||
}
|
||||
|
||||
&__current {
|
||||
@apply bg-accent-500;
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
@apply bg-accent-500 block absolute h-1 rounded left-0 top-1/2;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
&__handle {
|
||||
@apply bg-accent-500;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-left: -6px;
|
||||
@apply bg-accent-500 absolute z-[3] rounded-[50%] size-3 top-1/2 left-0 -ml-1.5 opacity-0;
|
||||
transform: translate(0, -50%);
|
||||
box-shadow: 1px 2px 6px #0003;
|
||||
opacity: 0;
|
||||
|
||||
.no-reduce-motion & {
|
||||
transition: opacity 100ms linear;
|
||||
@@ -202,24 +77,15 @@
|
||||
}
|
||||
|
||||
&.active &__handle {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
padding: 2px 10px;
|
||||
@apply py-0.5 px-2.5;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@apply no-underline text-sm font-medium text-white hover:underline active:underline focus:underline;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -239,33 +105,16 @@
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
&__progress,
|
||||
&__buffer {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
&__progress {
|
||||
@apply bg-accent-500;
|
||||
@apply block absolute h-1 rounded top-3.5 bg-accent-500;
|
||||
}
|
||||
|
||||
&__buffer {
|
||||
background: rgba(#fff, 0.2);
|
||||
@apply block absolute h-1 rounded top-3.5 bg-white/20;
|
||||
}
|
||||
|
||||
&__handle {
|
||||
@apply bg-accent-500;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 10px;
|
||||
margin-left: -6px;
|
||||
@apply bg-accent-500 absolute z-[3] opacity-0 rounded-[50%] size-3 top-2.5 -ml-1.5;
|
||||
box-shadow: 1px 2px 6px #0003;
|
||||
|
||||
.no-reduce-motion & {
|
||||
@@ -273,35 +122,14 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.video-player__seek__handle {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.detailed,
|
||||
&.fullscreen {
|
||||
.video-player__buttons {
|
||||
.player-button {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler-video {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
border: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user