548 lines
10 KiB
CSS
548 lines
10 KiB
CSS
:root {
|
|
--bg: #000;
|
|
--text: #f3f3f3;
|
|
|
|
--panel: rgba(20, 20, 20, .09);
|
|
--panel-border: rgba(255, 255, 255, .12);
|
|
--panel-shadow: 0 10px 30px rgba(0, 0, 0, .16);
|
|
|
|
--track-fill: rgba(243, 245, 241, .33);
|
|
--track-empty: rgba(255, 255, 255, .06);
|
|
|
|
--thumb-bg: rgba(250, 252, 249, .92);
|
|
--thumb-border: rgba(255, 255, 255, .28);
|
|
--thumb-shadow:
|
|
0 2px 5px rgba(0, 0, 0, .05),
|
|
inset 0 1px 1px rgba(255, 255, 255, .25),
|
|
0 0 0 2px rgba(255, 255, 255, .05);
|
|
|
|
--thumb-shadow-hover:
|
|
0 3px 10px rgba(0, 0, 0, .12),
|
|
inset 0 1px 1px rgba(255, 255, 255, .65),
|
|
0 0 0 5px rgba(255, 255, 255, .14);
|
|
|
|
--thumb-shadow-active:
|
|
0 2px 8px rgba(0, 0, 0, .1),
|
|
inset 0 1px 1px rgba(255, 255, 255, .72),
|
|
0 0 0 6px rgba(255, 255, 255, .18);
|
|
|
|
--range-track-h: 6px;
|
|
--range-thumb-s: 6px;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100dvh;
|
|
background: var(--bg);
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
-webkit-text-size-adjust: 100%;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.player {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
background: var(--bg);
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.player::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -20%;
|
|
pointer-events: none;
|
|
background: radial-gradient(
|
|
60% 50% at 50% 50%,
|
|
rgba(30, 70, 90, .18),
|
|
transparent 70%
|
|
);
|
|
filter: blur(40px);
|
|
opacity: .35;
|
|
z-index: 0;
|
|
}
|
|
|
|
.player::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background: radial-gradient(
|
|
65% 45% at 50% 100%,
|
|
rgba(255, 255, 255, .04),
|
|
transparent 70%
|
|
);
|
|
z-index: 0;
|
|
}
|
|
|
|
video {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: cover;
|
|
background: var(--bg);
|
|
filter: saturate(1.01) contrast(1);
|
|
transform: translateZ(0) scale(1.01);
|
|
transform-origin: center;
|
|
backface-visibility: hidden;
|
|
will-change: transform;
|
|
transition: transform .28s ease, object-fit .22s ease;
|
|
}
|
|
|
|
.controls {
|
|
position: absolute;
|
|
left: 12px;
|
|
right: 12px;
|
|
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 14px;
|
|
background: var(--panel);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid var(--panel-border);
|
|
box-shadow: var(--panel-shadow);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity .3s ease, transform .3s ease;
|
|
transform: translateY(10px);
|
|
z-index: 5;
|
|
}
|
|
|
|
.controls.visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.controls.mobile-mode {
|
|
gap: 8px;
|
|
}
|
|
|
|
.controls.desktop-mode {
|
|
left: 50%;
|
|
right: auto;
|
|
transform: translateX(-50%) translateY(10px);
|
|
width: min(720px, calc(100vw - 24px));
|
|
}
|
|
|
|
.controls.desktop-mode.visible {
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
button {
|
|
appearance: none;
|
|
border: none;
|
|
outline: none;
|
|
color: transparent;
|
|
width: 22px;
|
|
height: 22px;
|
|
min-width: 22px;
|
|
min-height: 22px;
|
|
border-radius: 50%;
|
|
font-size: 1px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
touch-action: manipulation;
|
|
background: rgba(255, 255, 255, .07);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, .09);
|
|
box-shadow:
|
|
0 2px 6px rgba(0, 0, 0, .14),
|
|
inset 0 1px 1px rgba(255, 255, 255, .22),
|
|
inset 0 -1px 1px rgba(255, 255, 255, .06);
|
|
transition:
|
|
transform .15s ease,
|
|
background .15s ease,
|
|
box-shadow .15s ease,
|
|
border-color .15s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background: rgba(255, 255, 255, .11);
|
|
border-color: rgba(255, 255, 255, .22);
|
|
box-shadow:
|
|
0 3px 8px rgba(0, 0, 0, .16),
|
|
inset 0 1px 1px rgba(255, 255, 255, .28),
|
|
inset 0 -1px 1px rgba(255, 255, 255, .08);
|
|
}
|
|
|
|
button:active {
|
|
transform: scale(.95);
|
|
background: rgba(255, 255, 255, .2);
|
|
box-shadow:
|
|
0 1px 5px rgba(0, 0, 0, .12),
|
|
inset 0 1px 1px rgba(255, 255, 255, .18);
|
|
}
|
|
|
|
.sidebtn {
|
|
position: fixed;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 6;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, .02);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, .12);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, .14),
|
|
inset 0 1px 1px rgba(255, 255, 255, .22),
|
|
inset 0 -1px 1px rgba(255, 255, 255, .06);
|
|
color: #f2f2f2;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
touch-action: manipulation;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity .34s ease .28s,
|
|
transform .15s ease,
|
|
background .15s ease,
|
|
box-shadow .15s ease,
|
|
border-color .15s ease;
|
|
}
|
|
|
|
.player.side-visible .sidebtn {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transition-delay: 0s, 0s, 0s, 0s, 0s;
|
|
}
|
|
|
|
.sidebtn:hover {
|
|
background: rgba(255, 255, 255, .16);
|
|
border-color: rgba(255, 255, 255, .22);
|
|
}
|
|
|
|
.sidebtn:active {
|
|
transform: translateY(-50%) scale(.95);
|
|
}
|
|
|
|
#prevBtn {
|
|
left: 14px;
|
|
}
|
|
|
|
#nextBtn {
|
|
right: 14px;
|
|
}
|
|
|
|
.sidebtn svg {
|
|
width: 4px;
|
|
height: 4px;
|
|
fill: none;
|
|
stroke: #f7f7f7;
|
|
stroke-width: 2.5;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.controls {
|
|
left: 12px;
|
|
right: 12px;
|
|
width: auto;
|
|
}
|
|
|
|
.sidebtn {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
input[type="range"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
flex: 1;
|
|
min-width: 72px;
|
|
height: 28px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
touch-action: manipulation;
|
|
background: transparent;
|
|
outline: none;
|
|
background-image: linear-gradient(
|
|
to right,
|
|
var(--track-fill) 0%,
|
|
var(--track-fill) var(--range-progress, 0%),
|
|
var(--track-empty) var(--range-progress, 0%),
|
|
var(--track-empty) 100%
|
|
);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% var(--range-track-h);
|
|
background-position: center;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-runnable-track {
|
|
height: var(--range-track-h);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: var(--range-thumb-s);
|
|
height: var(--range-thumb-s);
|
|
border-radius: 50%;
|
|
background: var(--thumb-bg);
|
|
border: 1px solid var(--thumb-border);
|
|
box-shadow: var(--thumb-shadow);
|
|
margin-top: calc((var(--range-track-h) - var(--range-thumb-s)) / 2);
|
|
transition:
|
|
transform .15s ease,
|
|
box-shadow .15s ease,
|
|
background .15s ease,
|
|
border-color .15s ease;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
input[type="range"]::-moz-range-track {
|
|
height: var(--range-track-h);
|
|
border-radius: 999px;
|
|
background: var(--track-empty);
|
|
}
|
|
|
|
input[type="range"]::-moz-range-progress {
|
|
height: var(--range-track-h);
|
|
border-radius: 999px;
|
|
background: var(--track-fill);
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb {
|
|
width: var(--range-thumb-s);
|
|
height: var(--range-thumb-s);
|
|
border-radius: 50%;
|
|
background: var(--thumb-bg);
|
|
border: 1px solid var(--thumb-border);
|
|
box-shadow: var(--thumb-shadow);
|
|
transition:
|
|
transform .15s ease,
|
|
box-shadow .15s ease,
|
|
background .15s ease,
|
|
border-color .15s ease;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
input[type="range"]:hover::-webkit-slider-thumb {
|
|
transform: scale(1.06);
|
|
background: rgba(255, 255, 255, .92);
|
|
border-color: rgba(255, 255, 255, .56);
|
|
box-shadow: var(--thumb-shadow-hover);
|
|
}
|
|
|
|
input[type="range"]:hover::-moz-range-thumb {
|
|
transform: scale(1.06);
|
|
background: rgba(255, 255, 255, .92);
|
|
border-color: rgba(255, 255, 255, .56);
|
|
box-shadow: var(--thumb-shadow-hover);
|
|
}
|
|
|
|
input[type="range"]:active::-webkit-slider-thumb {
|
|
transform: scale(.96);
|
|
background: rgba(255, 255, 255, .96);
|
|
border-color: rgba(255, 255, 255, .7);
|
|
box-shadow: var(--thumb-shadow-active);
|
|
}
|
|
|
|
input[type="range"]:active::-moz-range-thumb {
|
|
transform: scale(.96);
|
|
background: rgba(255, 255, 255, .96);
|
|
border-color: rgba(255, 255, 255, .7);
|
|
box-shadow: var(--thumb-shadow-active);
|
|
}
|
|
|
|
#volume {
|
|
max-width: 99px;
|
|
min-width: 70px;
|
|
}
|
|
|
|
.tap-unmute {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(90px + env(safe-area-inset-bottom, 0px));
|
|
transform: translateX(-50%);
|
|
padding: 12px 18px;
|
|
border-radius: 14px;
|
|
background: rgba(15, 15, 15, .45);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, .08);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity .25s ease;
|
|
z-index: 6;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tap-unmute.visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.video-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 9999;
|
|
color: var(--text);
|
|
font-family:
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"SF Pro Display",
|
|
"SF Pro Text",
|
|
"Helvetica Neue",
|
|
Arial,
|
|
sans-serif;
|
|
font-size: .33rem;
|
|
font-weight: 300;
|
|
letter-spacing: -.02em;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
animation: realFlicker 5s cubic-bezier(.22, .61, .36, 1) forwards;
|
|
text-shadow:
|
|
0 0 6px rgba(255, 255, 255, .06),
|
|
0 0 14px rgba(255, 255, 255, .03);
|
|
}
|
|
|
|
@keyframes realFlicker {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
2% {
|
|
opacity: .18;
|
|
}
|
|
|
|
3% {
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
opacity: .42;
|
|
}
|
|
|
|
6% {
|
|
opacity: .68;
|
|
}
|
|
|
|
8% {
|
|
opacity: .76;
|
|
}
|
|
|
|
9% {
|
|
opacity: .62;
|
|
}
|
|
|
|
11% {
|
|
opacity: 1;
|
|
}
|
|
|
|
15% {
|
|
opacity: .72;
|
|
}
|
|
|
|
18% {
|
|
opacity: .94;
|
|
}
|
|
|
|
24% {
|
|
opacity: 1;
|
|
}
|
|
|
|
38% {
|
|
opacity: .98;
|
|
}
|
|
|
|
55% {
|
|
opacity: 1;
|
|
}
|
|
|
|
68% {
|
|
opacity: .82;
|
|
}
|
|
|
|
72% {
|
|
opacity: .96;
|
|
}
|
|
|
|
78% {
|
|
opacity: .58;
|
|
}
|
|
|
|
83% {
|
|
opacity: .88;
|
|
}
|
|
|
|
88% {
|
|
opacity: .58;
|
|
}
|
|
|
|
92% {
|
|
opacity: .58;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.player:hover .video-text {
|
|
opacity: .05;
|
|
}
|
|
|
|
@media (max-width: 430px) {
|
|
.controls {
|
|
gap: 8px;
|
|
padding: 10px;
|
|
}
|
|
|
|
button {
|
|
width: 25px;
|
|
height: 25px;
|
|
min-width: 25px;
|
|
min-height: 25px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
#volume {
|
|
max-width: 72px;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.tap-unmute {
|
|
bottom: calc(84px + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
} |