Add public/styles.css
This commit is contained in:
548
public/styles.css
Normal file
548
public/styles.css
Normal file
@@ -0,0 +1,548 @@
|
||||
: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));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user