mirror of
https://gitlab.com/vyla-entertainment/TV.git
synced 2026-11-15 04:27:21 -05:00
Initial commit
This commit is contained in:
315
css/base.css
Normal file
315
css/base.css
Normal file
@@ -0,0 +1,315 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
--pad: clamp(56px, 6vw, 132px);
|
||||
--cw: clamp(120px, 9.4vw, 200px);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #07070a;
|
||||
color: #f2f2f5;
|
||||
font-family: "Inter", "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: hidden;
|
||||
cursor: default
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
|
||||
.f {
|
||||
outline: none;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.xf {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
opacity: 0;
|
||||
transition: opacity .7s ease
|
||||
}
|
||||
|
||||
.xf.in {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
#bg {
|
||||
position: fixed;
|
||||
inset: -40px;
|
||||
background: #07070a;
|
||||
filter: blur(42px) brightness(.55) saturate(1)
|
||||
}
|
||||
|
||||
#dim {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .55) 55%, #000 100%)
|
||||
}
|
||||
|
||||
#dim2 {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
#main {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
height: 60vh
|
||||
}
|
||||
|
||||
#hb {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
-webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
|
||||
mask-image: linear-gradient(180deg, #000 50%, transparent 100%)
|
||||
}
|
||||
|
||||
#hb::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .35) 40%, transparent 70%)
|
||||
}
|
||||
|
||||
.hc {
|
||||
position: absolute;
|
||||
left: var(--pad);
|
||||
bottom: 5vh;
|
||||
width: min(48vw, 680px);
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
#hlogo {
|
||||
height: 16vh;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 2vh
|
||||
}
|
||||
|
||||
#hlogo img {
|
||||
max-width: min(34vw, 440px);
|
||||
max-height: 16vh;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .6))
|
||||
}
|
||||
|
||||
#hlogo h1 {
|
||||
font-size: clamp(28px, 3.6vw, 64px);
|
||||
font-weight: 700;
|
||||
letter-spacing: -.02em;
|
||||
line-height: 1.02;
|
||||
text-shadow: 0 4px 24px rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
font-size: clamp(13px, 1.05vw, 19px);
|
||||
color: #e3e3ee;
|
||||
margin-bottom: 1.4vh;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.meta .b {
|
||||
background: rgba(255, 255, 255, .18);
|
||||
border-radius: 6px;
|
||||
padding: 2px 8px;
|
||||
font-size: .85em;
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.ov1 {
|
||||
font-size: clamp(13px, 1.1vw, 20px);
|
||||
line-height: 1.5;
|
||||
color: #d4d4e2;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: 2.4vh;
|
||||
max-width: 640px
|
||||
}
|
||||
|
||||
.hb {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.pb,
|
||||
.ib {
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
font-size: clamp(14px, 1.1vw, 20px);
|
||||
border-radius: 999px;
|
||||
height: clamp(44px, 3.6vw, 64px);
|
||||
padding: 0 clamp(28px, 2.6vw, 48px);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transition: transform .2s, background .2s
|
||||
}
|
||||
|
||||
.pb {
|
||||
background: #fff;
|
||||
color: #000
|
||||
}
|
||||
|
||||
.ib {
|
||||
background: rgba(255, 255, 255, .16);
|
||||
color: #fff;
|
||||
backdrop-filter: blur(12px);
|
||||
padding: 0 clamp(20px, 2vw, 36px)
|
||||
}
|
||||
|
||||
.pb.on,
|
||||
.ib.on {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.ib.on {
|
||||
background: rgba(255, 255, 255, .3)
|
||||
}
|
||||
|
||||
.sec {
|
||||
padding-top: 10px
|
||||
}
|
||||
|
||||
.sec h2 {
|
||||
padding: 0 var(--pad);
|
||||
font-size: clamp(16px, 1.5vw, 26px);
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 22px var(--pad) 26px;
|
||||
position: relative;
|
||||
scrollbar-width: none;
|
||||
min-height: calc(var(--cw)*1.5 + 48px)
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 0 0 var(--cw);
|
||||
height: calc(var(--cw)*1.5);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: #1b1b24;
|
||||
position: relative;
|
||||
transform: translateZ(0);
|
||||
transition: transform .38s cubic-bezier(.22, .9, .3, 1);
|
||||
will-change: transform
|
||||
}
|
||||
|
||||
.card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
filter: brightness(.86);
|
||||
transition: filter .38s
|
||||
}
|
||||
|
||||
.card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 3;
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
transition: opacity .25s;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.card.on {
|
||||
transform: scale(1.06) translateY(-4px);
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.card.on img {
|
||||
filter: none
|
||||
}
|
||||
|
||||
.card.on::after {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.kbm,
|
||||
.kbm * {
|
||||
cursor: none !important
|
||||
}
|
||||
|
||||
#sentinel {
|
||||
height: 40vh
|
||||
}
|
||||
|
||||
.none {
|
||||
color: rgba(255, 255, 255, .6);
|
||||
padding: 5vh 0;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 7vh;
|
||||
transform: translateX(-50%);
|
||||
z-index: 200;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 12px 22px;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
animation: tin .25s both, tout .3s 1.9s forwards
|
||||
}
|
||||
|
||||
@keyframes tin {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 14px)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tout {
|
||||
to {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user