mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
fix(ci): use biome to sort CSS properties (#1490)
This commit is contained in:
Sam Potts
@@ -62,17 +62,17 @@
|
||||
inset: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding-inline: 1.25rem 0.125rem;
|
||||
transition-property: opacity, filter;
|
||||
transition-duration: var(--media-error-dialog-transition-duration);
|
||||
color: var(--media-text-color);
|
||||
background-color: var(--media-surface-background-color);
|
||||
border-radius: calc(infinity * 1px);
|
||||
backdrop-filter: var(--media-surface-backdrop-filter);
|
||||
transition-delay: var(--media-error-dialog-transition-delay);
|
||||
transition-timing-function: ease-out;
|
||||
border-radius: calc(infinity * 1px);
|
||||
background-color: var(--media-surface-background-color);
|
||||
backdrop-filter: var(--media-surface-backdrop-filter);
|
||||
color: var(--media-text-color);
|
||||
transition-duration: var(--media-error-dialog-transition-duration);
|
||||
transition-property: opacity, filter;
|
||||
}
|
||||
|
||||
.media-default-skin .media-error[data-starting-style] .media-error__dialog,
|
||||
@@ -85,8 +85,8 @@
|
||||
}
|
||||
|
||||
.media-default-skin--audio .media-error__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
|
||||
.media-default-skin .media-button-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.075rem;
|
||||
align-items: center;
|
||||
|
||||
@container media-root (width > 42rem) {
|
||||
gap: 0.125rem;
|
||||
|
||||
@@ -5,23 +5,23 @@
|
||||
/* Base button */
|
||||
.media-default-skin .media-button {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: calc(infinity * 1px);
|
||||
text-align: center;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -2px;
|
||||
border: none;
|
||||
border-radius: calc(infinity * 1px);
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 150ms;
|
||||
transition-property: background-color, outline-offset, scale;
|
||||
/* Fix weird jumping when clicking on the buttons in Safari. */
|
||||
will-change: scale;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-out;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
touch-action: manipulation;
|
||||
|
||||
&:focus-visible {
|
||||
outline-color: currentColor;
|
||||
@@ -33,9 +33,9 @@
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
filter: grayscale(1);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&[data-availability="unavailable"],
|
||||
@@ -46,23 +46,23 @@
|
||||
|
||||
/* Primary button variant */
|
||||
.media-default-skin .media-button--primary {
|
||||
background: oklch(1 0 0);
|
||||
color: oklch(0 0 0);
|
||||
font-weight: 500;
|
||||
color: oklch(0 0 0);
|
||||
text-shadow: none;
|
||||
background: oklch(1 0 0);
|
||||
}
|
||||
|
||||
/* Subtle button variant */
|
||||
.media-default-skin .media-button--subtle {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-shadow: inherit;
|
||||
background: transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&[aria-expanded="true"] {
|
||||
background-color: oklch(from currentColor l c h / 0.1);
|
||||
text-decoration: none;
|
||||
background-color: oklch(from currentColor l c h / 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,8 +70,8 @@
|
||||
.media-default-skin .media-button--icon {
|
||||
display: grid;
|
||||
width: 2.25rem;
|
||||
padding: 0;
|
||||
aspect-ratio: 1;
|
||||
padding: 0;
|
||||
|
||||
&:active {
|
||||
scale: 0.9;
|
||||
@@ -104,8 +104,8 @@
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
content: attr(data-rate) "\00D7";
|
||||
width: 4ch;
|
||||
font-variant-numeric: tabular-nums;
|
||||
content: attr(data-rate) "\00D7";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,10 +19,10 @@
|
||||
}
|
||||
|
||||
.media-default-skin video::-webkit-media-text-track-container {
|
||||
transition: translate var(--media-caption-track-duration) ease-out;
|
||||
transition-delay: var(--media-caption-track-delay);
|
||||
translate: 0 var(--media-caption-track-y);
|
||||
scale: 0.98;
|
||||
z-index: 1;
|
||||
font-family: inherit;
|
||||
scale: 0.98;
|
||||
translate: 0 var(--media-caption-track-y);
|
||||
transition: translate var(--media-caption-track-duration) ease-out;
|
||||
transition-delay: var(--media-caption-track-delay);
|
||||
}
|
||||
|
||||
@@ -3,16 +3,16 @@
|
||||
========================================================================== */
|
||||
|
||||
.media-default-skin .media-controls {
|
||||
container: media-controls / inline-size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 0.075rem;
|
||||
padding: 0.375rem;
|
||||
border-radius: 1.5rem;
|
||||
--media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
|
||||
--media-controls-current-shadow-color-subtle: oklch(
|
||||
from var(--media-controls-current-shadow-color) l c h /
|
||||
calc(alpha * 0.4)
|
||||
);
|
||||
display: flex;
|
||||
column-gap: 0.075rem;
|
||||
align-items: center;
|
||||
padding: 0.375rem;
|
||||
container: media-controls / inline-size;
|
||||
text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
}
|
||||
|
||||
.media-default-skin .media-error__description {
|
||||
opacity: 0.7;
|
||||
overflow-wrap: anywhere;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.media-default-skin .media-error__actions {
|
||||
|
||||
@@ -5,19 +5,19 @@
|
||||
.media-default-skin .media-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
|
||||
backdrop-filter: blur(0) saturate(1);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition-property: opacity, backdrop-filter;
|
||||
transition-duration: var(--media-controls-transition-duration);
|
||||
background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
backdrop-filter: blur(0) saturate(1);
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: var(--media-controls-transition-duration);
|
||||
transition-property: opacity, backdrop-filter;
|
||||
}
|
||||
|
||||
.media-default-skin .media-error ~ .media-overlay {
|
||||
transition-duration: var(--media-error-dialog-transition-duration);
|
||||
transition-delay: var(--media-error-dialog-transition-delay);
|
||||
transition-duration: var(--media-error-dialog-transition-duration);
|
||||
}
|
||||
|
||||
.media-default-skin .media-controls[data-visible] ~ .media-overlay,
|
||||
|
||||
@@ -5,18 +5,18 @@
|
||||
.media-default-skin .media-popover,
|
||||
.media-default-skin .media-tooltip {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
overflow: visible;
|
||||
transition-property: scale, opacity, filter;
|
||||
transition-duration: var(--media-popup-transition-duration);
|
||||
color: inherit;
|
||||
border: 0;
|
||||
transition-timing-function: var(--media-popup-transition-timing-function);
|
||||
transition-duration: var(--media-popup-transition-duration);
|
||||
transition-property: scale, opacity, filter;
|
||||
|
||||
&[data-starting-style],
|
||||
&[data-ending-style] {
|
||||
opacity: 0;
|
||||
scale: 0.5;
|
||||
filter: blur(8px);
|
||||
scale: 0.5;
|
||||
}
|
||||
|
||||
&[data-instant] {
|
||||
@@ -38,15 +38,15 @@
|
||||
|
||||
/* Safe area between trigger and popup */
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
pointer-events: inherit;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&[data-side="top"]::before,
|
||||
&[data-side="bottom"]::before {
|
||||
width: 100%;
|
||||
inset-inline: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&[data-side="top"]::before {
|
||||
top: 100%;
|
||||
@@ -57,8 +57,8 @@
|
||||
|
||||
&[data-side="left"]::before,
|
||||
&[data-side="right"]::before {
|
||||
height: 100%;
|
||||
inset-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
&[data-side="left"]::before {
|
||||
left: 100%;
|
||||
@@ -89,9 +89,9 @@
|
||||
|
||||
.media-default-skin .media-tooltip {
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: calc(infinity * 1px);
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
border-radius: calc(infinity * 1px);
|
||||
|
||||
&[data-side="top"]::before,
|
||||
&[data-side="bottom"]::before {
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 0.25s;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
.media-default-skin media-poster:not([data-visible]),
|
||||
.media-default-skin > img:not([data-visible]) {
|
||||
|
||||
@@ -2,29 +2,29 @@
|
||||
Media preview
|
||||
========================================================================== */
|
||||
.media-default-skin .media-preview {
|
||||
pointer-events: none;
|
||||
background-color: oklch(0 0 0 / 0.9);
|
||||
border-radius: 0.75rem;
|
||||
pointer-events: none;
|
||||
|
||||
& .media-preview__thumbnail {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: inherit;
|
||||
display: block;
|
||||
overflow: clip;
|
||||
border-radius: inherit;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
content: "";
|
||||
background-image: linear-gradient(to top, oklch(0 0 0 / 0.8), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
& .media-preview__time {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
inset-inline: 0;
|
||||
bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
translate: -50% -50%;
|
||||
opacity: 0;
|
||||
translate: -50% -50%;
|
||||
}
|
||||
|
||||
& .media-preview__thumbnail,
|
||||
|
||||
@@ -3,29 +3,29 @@
|
||||
========================================================================== */
|
||||
|
||||
.media-default-skin {
|
||||
container: media-root / inline-size;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: var(--media-border-radius, 2rem);
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
|
||||
&:focus-visible {
|
||||
outline-color: currentColor;
|
||||
}
|
||||
height: 100%;
|
||||
container: media-root / inline-size;
|
||||
font-family:
|
||||
Inter Variable,
|
||||
Inter,
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
sans-serif;
|
||||
line-height: 1.5;
|
||||
letter-spacing: normal;
|
||||
-webkit-font-smoothing: auto;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
line-height: 1.5;
|
||||
letter-spacing: normal;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--media-border-radius, 2rem);
|
||||
isolation: isolate;
|
||||
|
||||
&:focus-visible {
|
||||
outline-color: currentColor;
|
||||
}
|
||||
|
||||
& > * {
|
||||
font-size: 0.75rem; /* 12px at 100% font size */
|
||||
|
||||
@@ -5,16 +5,16 @@
|
||||
.media-default-skin .media-slider {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
border-radius: calc(infinity * 1px);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-radius: calc(infinity * 1px);
|
||||
|
||||
&[data-orientation="horizontal"] {
|
||||
min-width: 5rem;
|
||||
width: 100%;
|
||||
min-width: 5rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
@@ -27,10 +27,10 @@
|
||||
/* Track */
|
||||
.media-default-skin .media-slider__track {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
user-select: none;
|
||||
border-radius: inherit;
|
||||
isolation: isolate;
|
||||
|
||||
&[data-orientation="horizontal"] {
|
||||
width: 100%;
|
||||
@@ -45,11 +45,13 @@
|
||||
|
||||
/* Thumb */
|
||||
.media-default-skin .media-slider__thumb {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
translate: -50% -50%;
|
||||
z-index: 10;
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
user-select: none;
|
||||
outline: 4px solid transparent;
|
||||
outline-offset: -4px;
|
||||
background-color: currentColor;
|
||||
border-radius: calc(infinity * 1px);
|
||||
box-shadow:
|
||||
@@ -57,12 +59,10 @@
|
||||
0 1px 3px 0 oklch(0 0 0 / 0.15),
|
||||
0 1px 2px -1px oklch(0 0 0 / 0.15);
|
||||
opacity: 0;
|
||||
transition-property: opacity, height, width, outline-offset;
|
||||
transition-duration: 150ms;
|
||||
translate: -50% -50%;
|
||||
transition-timing-function: ease-out;
|
||||
user-select: none;
|
||||
outline: 4px solid transparent;
|
||||
outline-offset: -4px;
|
||||
transition-duration: 150ms;
|
||||
transition-property: opacity, height, width, outline-offset;
|
||||
|
||||
&[data-orientation="horizontal"] {
|
||||
top: 50%;
|
||||
@@ -70,8 +70,8 @@
|
||||
}
|
||||
|
||||
&[data-orientation="vertical"] {
|
||||
left: 50%;
|
||||
top: calc(100% - var(--media-slider-fill));
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@@ -81,19 +81,19 @@
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
content: "";
|
||||
border-radius: inherit;
|
||||
box-shadow: 0 0 0 2px oklch(1 0 0);
|
||||
transition-property: opacity, scale;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 150ms;
|
||||
transition-property: opacity, scale;
|
||||
}
|
||||
|
||||
&:not(:focus-visible)::after {
|
||||
scale: 0.5;
|
||||
opacity: 0;
|
||||
scale: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -113,8 +113,8 @@
|
||||
.media-default-skin .media-slider__buffer,
|
||||
.media-default-skin .media-slider__fill {
|
||||
position: absolute;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.media-default-skin .media-slider__buffer[data-orientation="horizontal"],
|
||||
@@ -132,8 +132,8 @@
|
||||
/* Buffer */
|
||||
.media-default-skin .media-slider__buffer {
|
||||
background-color: oklch(from currentColor l c h / 0.2);
|
||||
transition-duration: 0.25s;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
&[data-orientation="horizontal"] {
|
||||
width: var(--media-slider-buffer);
|
||||
|
||||
@@ -4,20 +4,20 @@
|
||||
|
||||
.media-default-skin .media-surface {
|
||||
background-color: var(--media-surface-background-color);
|
||||
backdrop-filter: var(--media-surface-backdrop-filter);
|
||||
box-shadow:
|
||||
0 0 0 1px var(--media-surface-outer-border-color),
|
||||
0 1px 3px 0 var(--media-surface-shadow-color),
|
||||
0 1px 2px -1px var(--media-surface-shadow-color);
|
||||
backdrop-filter: var(--media-surface-backdrop-filter);
|
||||
|
||||
/* Inner border ring */
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
========================================================================== */
|
||||
|
||||
.media-default-skin .media-time-controls {
|
||||
container: media-time-controls / inline-size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding-inline: 0.5rem;
|
||||
container: media-time-controls / inline-size;
|
||||
}
|
||||
|
||||
.media-default-skin .media-time {
|
||||
|
||||
@@ -22,7 +22,6 @@
|
||||
========================================================================== */
|
||||
|
||||
.media-default-skin--video {
|
||||
background: oklch(0 0 0);
|
||||
--media-spring-transition: linear(
|
||||
0,
|
||||
0.034 1.5%,
|
||||
@@ -50,6 +49,7 @@
|
||||
--media-popup-transition-timing-function: ease-out;
|
||||
--media-tooltip-side-offset: 0.75rem;
|
||||
--media-popover-side-offset: 0.5rem;
|
||||
background: oklch(0 0 0);
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
--media-error-dialog-transition-duration: 50ms;
|
||||
@@ -83,13 +83,13 @@
|
||||
|
||||
/* Inner border ring */
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 0 1px var(--media-border-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:fullscreen {
|
||||
@@ -116,13 +116,13 @@
|
||||
gap: 0.75rem;
|
||||
max-width: 18rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 1.75rem;
|
||||
color: oklch(1 0 0);
|
||||
text-shadow: 0 1px 0 oklch(0 0 0 / 0.25);
|
||||
transition-property: opacity, scale;
|
||||
transition-duration: var(--media-error-dialog-transition-duration);
|
||||
border-radius: 1.75rem;
|
||||
transition-delay: var(--media-error-dialog-transition-delay);
|
||||
transition-timing-function: var(--media-error-dialog-transition-timing-function);
|
||||
transition-duration: var(--media-error-dialog-transition-duration);
|
||||
transition-property: opacity, scale;
|
||||
}
|
||||
|
||||
.media-default-skin--video .media-error[data-starting-style] .media-error__dialog,
|
||||
@@ -151,29 +151,29 @@
|
||||
========================================================================== */
|
||||
|
||||
.media-default-skin--video .media-controls {
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
inset-inline: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
z-index: 10;
|
||||
flex-wrap: wrap;
|
||||
color: var(--media-color-primary, oklch(1 0 0));
|
||||
transition-duration: var(--media-controls-transition-duration);
|
||||
transition-timing-function: var(--media-controls-transition-timing-function);
|
||||
transform-origin: bottom;
|
||||
transition-timing-function: var(--media-controls-transition-timing-function);
|
||||
transition-duration: var(--media-controls-transition-duration);
|
||||
|
||||
@media (pointer: fine) {
|
||||
will-change: scale, filter, opacity;
|
||||
transition-property: scale, filter, opacity;
|
||||
will-change: scale, filter, opacity;
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
will-change: scale, opacity;
|
||||
transition-property: scale, opacity;
|
||||
will-change: scale, opacity;
|
||||
}
|
||||
|
||||
&:not([data-visible]) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
scale: 0.9;
|
||||
|
||||
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
|
||||
@@ -186,8 +186,8 @@
|
||||
}
|
||||
|
||||
& .media-time-controls {
|
||||
order: -1;
|
||||
flex: 0 0 100%;
|
||||
order: -1;
|
||||
padding-inline: 0.625rem;
|
||||
}
|
||||
|
||||
@@ -202,15 +202,15 @@
|
||||
}
|
||||
|
||||
@container media-root (width > 42rem) {
|
||||
bottom: 0.75rem;
|
||||
inset-inline: 0.75rem;
|
||||
bottom: 0.75rem;
|
||||
flex-wrap: nowrap;
|
||||
column-gap: 0.125rem;
|
||||
padding: 0.25rem;
|
||||
|
||||
& .media-time-controls {
|
||||
order: unset;
|
||||
flex: 1;
|
||||
order: unset;
|
||||
}
|
||||
|
||||
& .media-button-group:first-child,
|
||||
@@ -248,21 +248,21 @@
|
||||
--media-preview-inset: calc((100cqi - 100%) / 2);
|
||||
|
||||
position: absolute;
|
||||
bottom: calc(100% + 1.2rem);
|
||||
left: clamp(
|
||||
calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding) - var(--media-preview-inset)),
|
||||
var(--media-slider-pointer),
|
||||
calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset))
|
||||
);
|
||||
bottom: calc(100% + 1.2rem);
|
||||
translate: -50%;
|
||||
opacity: 0;
|
||||
scale: 0.8;
|
||||
filter: blur(8px);
|
||||
transition-property: scale, opacity, filter;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-out;
|
||||
transform-origin: bottom;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
filter: blur(8px);
|
||||
transform-origin: bottom;
|
||||
scale: 0.8;
|
||||
translate: -50%;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 150ms;
|
||||
transition-property: scale, opacity, filter;
|
||||
|
||||
& .media-preview__thumbnail {
|
||||
max-width: var(--media-preview-max-width);
|
||||
@@ -274,6 +274,6 @@
|
||||
}
|
||||
.media-default-skin--video .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
filter: blur(0);
|
||||
scale: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user