v3
This commit is contained in:
Ty Clifford
@@ -0,0 +1,627 @@
|
||||
<style>
|
||||
/* ════════════════════════════════════════════════════════════════════════════
|
||||
STATUS PAGES — design tokens, layout and components
|
||||
Exact match to gate.php / index.php design system.
|
||||
Included by: status/index.php and status/post.php
|
||||
════════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Reset & tokens ─────────────────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #09090f;
|
||||
--surface: #0f0f1a;
|
||||
--surface-2: #141425;
|
||||
--border: #1e1e38;
|
||||
--border-2: #2a2a48;
|
||||
--text: #e8e8f8;
|
||||
--text-2: #9898c0;
|
||||
--text-3: #58587a;
|
||||
|
||||
--green: #00e87a;
|
||||
--blue: #00c8ff;
|
||||
--purple: #b060ff;
|
||||
--red: #ff3355;
|
||||
--orange: #ff8800;
|
||||
--pink: #ff50a0;
|
||||
|
||||
--pat: #ff424d;
|
||||
--pat-glow: rgba(255,66,77,.18);
|
||||
|
||||
--r: 6px;
|
||||
--pp: 1.25rem;
|
||||
--max-w: 680px;
|
||||
}
|
||||
@media (min-width: 600px) { :root { --pp: 1.75rem; } }
|
||||
@media (min-width: 900px) { :root { --pp: 2.5rem; } }
|
||||
|
||||
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
min-height: 100dvh;
|
||||
background: var(--bg);
|
||||
background-image:
|
||||
radial-gradient(ellipse 70% 50% at 15% 10%, rgba(176,96,255,.06) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 60% 40% at 85% 80%, rgba(0,200,255,.05) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 50% 60% at 50% 50%, rgba(255,66,77,.03) 0%, transparent 70%);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--pp) var(--pp) 3rem;
|
||||
}
|
||||
|
||||
/* scanline overlay */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed; inset: 0; pointer-events: none; z-index: 9999;
|
||||
background: repeating-linear-gradient(
|
||||
0deg, transparent 0px, transparent 3px,
|
||||
rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 4px
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Animations ─────────────────────────────────────────────────────────────── */
|
||||
@keyframes rise {
|
||||
from { opacity: 0; transform: translateY(14px) scale(.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
from { background-position: 0% 50%; }
|
||||
to { background-position: 200% 50%; }
|
||||
}
|
||||
|
||||
/* ── Page wrapper ───────────────────────────────────────────────────────────── */
|
||||
.page {
|
||||
width: 100%;
|
||||
max-width: var(--max-w);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
animation: rise .45s cubic-bezier(.22,.68,0,1.2) both;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
|
||||
/* ── Top bar ────────────────────────────────────────────────────────────────── */
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: .75rem;
|
||||
padding: .75rem 0 .25rem;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex; align-items: center; gap: .4rem;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
|
||||
color: var(--text-3); text-decoration: none;
|
||||
transition: color .15s;
|
||||
}
|
||||
.back-link:hover { color: var(--green); }
|
||||
.back-link svg { flex-shrink: 0; }
|
||||
|
||||
.topbar-badge {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
|
||||
color: var(--text-3);
|
||||
background: rgba(255,255,255,.04);
|
||||
border: 1px solid var(--border-2);
|
||||
border-radius: 99px;
|
||||
padding: .2rem .65rem;
|
||||
}
|
||||
|
||||
/* ── Page heading ───────────────────────────────────────────────────────────── */
|
||||
.page-heading { display: flex; flex-direction: column; gap: .35rem; }
|
||||
|
||||
.eyebrow {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
|
||||
color: var(--green); text-shadow: 0 0 10px rgba(0,232,122,.45);
|
||||
}
|
||||
.eyebrow::before { content: '> '; opacity: .5; }
|
||||
|
||||
.page-heading h1 {
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
|
||||
background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 60%, var(--pink) 100%);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
||||
}
|
||||
.page-subtitle {
|
||||
font-size: .88rem; color: var(--text-2); line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ── Card shell ─────────────────────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: rgba(15,15,26,.88);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--r) + 4px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255,255,255,.03),
|
||||
0 6px 40px rgba(0,0,0,.55);
|
||||
}
|
||||
/* shimmer top rule */
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
|
||||
background: linear-gradient(90deg,
|
||||
var(--pat), var(--purple), var(--blue), var(--green),
|
||||
var(--blue), var(--purple), var(--pat));
|
||||
background-size: 300% 100%;
|
||||
animation: shimmer 5s linear infinite;
|
||||
}
|
||||
/* purple corner accent */
|
||||
.card::after {
|
||||
content: '';
|
||||
position: absolute; bottom: -1px; right: -1px;
|
||||
width: 14px; height: 14px;
|
||||
border-bottom: 2px solid var(--purple);
|
||||
border-right: 2px solid var(--purple);
|
||||
border-radius: 0 0 calc(var(--r) + 4px) 0;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* ── Post item (list view) ──────────────────────────────────────────────────── */
|
||||
.post-item {
|
||||
padding: 1.2rem 1.4rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
transition: background .15s;
|
||||
}
|
||||
.post-item:first-child { padding-top: 1.4rem; }
|
||||
.post-item-last { border-bottom: none; }
|
||||
.post-item:hover { background: rgba(255,255,255,.015); }
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: .45rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.post-uid {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .62rem; letter-spacing: .08em;
|
||||
color: var(--green); text-decoration: none;
|
||||
background: rgba(0,232,122,.07);
|
||||
border: 1px solid rgba(0,232,122,.2);
|
||||
border-radius: 3px;
|
||||
padding: .1em .5em;
|
||||
transition: background .15s, border-color .15s;
|
||||
}
|
||||
.post-uid:hover { background: rgba(0,232,122,.14); border-color: rgba(0,232,122,.4); }
|
||||
|
||||
.post-time {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .62rem; letter-spacing: .05em; color: var(--text-3);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.post-abs-date {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .58rem; letter-spacing: .04em; color: var(--text-3);
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
/* hide abs-date on mobile — visible at wider widths */
|
||||
@media (max-width: 520px) { .post-abs-date { display: none; } }
|
||||
|
||||
.post-tag {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .57rem; letter-spacing: .1em; text-transform: uppercase;
|
||||
padding: .1em .45em;
|
||||
border: 1px solid var(--border-2);
|
||||
border-radius: 3px;
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
transition: border-color .15s, color .15s;
|
||||
}
|
||||
.post-tag:hover { border-color: var(--blue); color: var(--blue); }
|
||||
|
||||
.post-text {
|
||||
font-size: .92rem; color: var(--text); line-height: 1.7;
|
||||
margin-bottom: .6rem;
|
||||
}
|
||||
|
||||
.post-link {
|
||||
display: inline-flex; align-items: center; gap: .3rem;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .65rem; letter-spacing: .05em;
|
||||
color: var(--blue); text-decoration: none; opacity: .85;
|
||||
transition: opacity .15s;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.post-link:hover { opacity: 1; }
|
||||
.post-link::after { content: ' →'; }
|
||||
|
||||
.post-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
padding-top: .5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: .3rem;
|
||||
}
|
||||
|
||||
.post-permalink {
|
||||
display: inline-flex; align-items: center; gap: .35rem;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
|
||||
color: var(--text-3); text-decoration: none;
|
||||
transition: color .15s;
|
||||
}
|
||||
.post-permalink:hover { color: var(--green); }
|
||||
|
||||
/* ── Single post extras ─────────────────────────────────────────────────────── */
|
||||
.post-single-title {
|
||||
font-size: clamp(1.4rem, 4vw, 1.9rem);
|
||||
font-weight: 700; letter-spacing: -.02em;
|
||||
background: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
||||
}
|
||||
|
||||
.card-single { padding: 1.75rem; }
|
||||
.card-single article { display: flex; flex-direction: column; gap: .9rem; }
|
||||
|
||||
.post-body {
|
||||
font-size: 1rem; color: var(--text); line-height: 1.75;
|
||||
}
|
||||
|
||||
.post-link-large {
|
||||
display: inline-flex; align-items: center; gap: .5rem;
|
||||
padding: .65rem 1.1rem;
|
||||
border: 1px solid rgba(0,200,255,.25);
|
||||
border-radius: var(--r);
|
||||
background: rgba(0,200,255,.05);
|
||||
font-size: .88rem; font-weight: 600;
|
||||
color: var(--blue); text-decoration: none;
|
||||
transition: background .2s, border-color .2s, transform .15s;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.post-link-large:hover {
|
||||
background: rgba(0,200,255,.1);
|
||||
border-color: rgba(0,200,255,.5);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.post-link-large svg { flex-shrink: 0; }
|
||||
|
||||
.single-meta-row {
|
||||
display: flex; flex-wrap: wrap; gap: .75rem;
|
||||
padding-top: .85rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.single-uid-block { display: flex; flex-direction: column; gap: .2rem; }
|
||||
.single-uid-label {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .55rem; letter-spacing: .16em; text-transform: uppercase;
|
||||
color: var(--text-3);
|
||||
}
|
||||
.single-uid {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .75rem; letter-spacing: .04em; color: var(--text-2);
|
||||
background: rgba(255,255,255,.04);
|
||||
border: 1px solid var(--border-2);
|
||||
border-radius: 3px;
|
||||
padding: .15em .5em;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
/* ── Prev / next post navigation ────────────────────────────────────────────── */
|
||||
.post-nav { width: 100%; }
|
||||
.post-nav-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: .75rem;
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
.post-nav-inner { grid-template-columns: 1fr; }
|
||||
.post-nav-empty { display: none; }
|
||||
}
|
||||
|
||||
.post-nav-btn {
|
||||
display: flex; flex-direction: column; gap: .3rem;
|
||||
padding: .9rem 1.1rem;
|
||||
background: rgba(15,15,26,.8);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--r) + 2px);
|
||||
text-decoration: none;
|
||||
transition: background .2s, border-color .2s, transform .15s;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.post-nav-btn::before {
|
||||
content: '';
|
||||
position: absolute; top: 0; left: 0; right: 0; height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
var(--pat), var(--purple), var(--blue), var(--green),
|
||||
var(--blue), var(--purple), var(--pat));
|
||||
background-size: 300% 100%;
|
||||
animation: shimmer 5s linear infinite;
|
||||
opacity: .5;
|
||||
}
|
||||
.post-nav-btn:hover {
|
||||
background: rgba(255,255,255,.05);
|
||||
border-color: var(--border-2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.post-nav-next { text-align: right; align-items: flex-end; }
|
||||
|
||||
.post-nav-dir {
|
||||
display: inline-flex; align-items: center; gap: .3rem;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
|
||||
color: var(--green); text-shadow: 0 0 8px rgba(0,232,122,.4);
|
||||
}
|
||||
.post-nav-uid {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .72rem; letter-spacing: .05em; color: var(--text-2);
|
||||
}
|
||||
.post-nav-snippet {
|
||||
font-size: .78rem; color: var(--text-3); line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── Pagination (list view) ─────────────────────────────────────────────────── */
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
}
|
||||
.pagination-info {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .62rem; letter-spacing: .06em; color: var(--text-3);
|
||||
}
|
||||
.pagination-btns {
|
||||
display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
min-width: 30px; height: 30px; padding: 0 .5rem;
|
||||
border: 1px solid var(--border-2);
|
||||
border-radius: 4px;
|
||||
background: rgba(255,255,255,.03);
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .68rem; letter-spacing: .04em;
|
||||
color: var(--text-3); text-decoration: none;
|
||||
transition: border-color .15s, color .15s, background .15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
a.page-btn:hover { border-color: var(--green); color: var(--green); background: rgba(0,232,122,.05); }
|
||||
.page-btn.active { border-color: var(--green); color: var(--green); background: rgba(0,232,122,.08); }
|
||||
.page-btn[aria-disabled] { opacity: .3; cursor: not-allowed; pointer-events: none; }
|
||||
.page-ellipsis { border-color: transparent; background: transparent; cursor: default; }
|
||||
|
||||
/* ── Empty state ────────────────────────────────────────────────────────────── */
|
||||
.empty-state {
|
||||
padding: 2.5rem 1.5rem;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .75rem; color: var(--text-3); text-align: center; letter-spacing: .06em;
|
||||
}
|
||||
.empty-state::before { content: '// '; opacity: .4; }
|
||||
|
||||
/* ── 404 / error card ───────────────────────────────────────────────────────── */
|
||||
.card-error {
|
||||
padding: 2.5rem 2rem;
|
||||
display: flex; flex-direction: column; gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.error-icon {
|
||||
width: 48px; height: 48px; border-radius: 50%;
|
||||
background: rgba(255,51,85,.1);
|
||||
border: 1px solid rgba(255,51,85,.3);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--red);
|
||||
box-shadow: 0 0 20px rgba(255,51,85,.15);
|
||||
}
|
||||
.error-title {
|
||||
font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em;
|
||||
background: linear-gradient(120deg, var(--red), var(--pink));
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
||||
}
|
||||
.error-body {
|
||||
font-size: .9rem; color: var(--text-2); line-height: 1.65;
|
||||
}
|
||||
.error-body code {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px solid var(--border-2);
|
||||
border-radius: 3px; padding: .1em .4em;
|
||||
color: var(--orange);
|
||||
}
|
||||
.btn-back {
|
||||
display: inline-flex; align-items: center; gap: .4rem;
|
||||
padding: .6rem 1.1rem;
|
||||
border: 1px solid var(--border-2);
|
||||
border-radius: var(--r);
|
||||
background: rgba(255,255,255,.04);
|
||||
font-size: .85rem; font-weight: 600;
|
||||
color: var(--text-2); text-decoration: none;
|
||||
transition: background .2s, border-color .2s, color .2s;
|
||||
}
|
||||
.btn-back:hover { background: rgba(255,255,255,.08); color: var(--text); border-color: var(--green); }
|
||||
|
||||
/* ── Page footer ────────────────────────────────────────────────────────────── */
|
||||
.page-foot {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
flex-wrap: wrap; gap: .5rem;
|
||||
padding-top: .5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.foot-note {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .6rem; letter-spacing: .08em; color: var(--text-3);
|
||||
}
|
||||
.foot-note::before { content: '// '; opacity: .4; }
|
||||
.foot-link {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .6rem; letter-spacing: .08em;
|
||||
color: var(--text-3); text-decoration: none;
|
||||
transition: color .15s;
|
||||
}
|
||||
.foot-link:hover { color: var(--green); }
|
||||
|
||||
/* ════════════════════════════════════════════════════════════════════════════
|
||||
MEDIA — full-width display on status/post.php
|
||||
════════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Media block wrapper ─────────────────────────────────────────────────── */
|
||||
.post-media {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .75rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
/* ── Image ───────────────────────────────────────────────────────────────── */
|
||||
.post-media-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--r);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface-2);
|
||||
object-fit: contain;
|
||||
}
|
||||
.post-media-img-wrap {
|
||||
position: relative;
|
||||
border-radius: var(--r);
|
||||
overflow: hidden;
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
line-height: 0; /* kill inline gap */
|
||||
}
|
||||
.post-media-img-wrap a {
|
||||
display: block; line-height: 0;
|
||||
}
|
||||
|
||||
/* ── Video.js player ─────────────────────────────────────────────────────── */
|
||||
|
||||
/* Container — keeps 16:9 aspect */
|
||||
.post-media-video-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 56.25%;
|
||||
background: #000;
|
||||
border-radius: var(--r);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.post-media-video-wrap .video-js {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* ── Video.js skin override — gate.php tokens ───────────────────────────── */
|
||||
|
||||
/* Base container */
|
||||
.video-js {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
color: var(--text);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* Big play button — centred, green glow */
|
||||
.video-js .vjs-big-play-button {
|
||||
width: 64px; height: 64px;
|
||||
border-radius: 50%;
|
||||
line-height: 64px;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 0;
|
||||
background: rgba(0,232,122,.15);
|
||||
border: 2px solid var(--green);
|
||||
color: var(--green);
|
||||
transition: background .2s, box-shadow .2s;
|
||||
}
|
||||
.video-js:hover .vjs-big-play-button,
|
||||
.video-js .vjs-big-play-button:focus {
|
||||
background: rgba(0,232,122,.28);
|
||||
box-shadow: 0 0 24px rgba(0,232,122,.45);
|
||||
}
|
||||
.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
|
||||
font-size: 28px;
|
||||
line-height: 60px;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
/* Control bar */
|
||||
.video-js .vjs-control-bar {
|
||||
background: rgba(9,9,15,.88);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border-top: 1px solid var(--border);
|
||||
height: 36px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* All control icons */
|
||||
.video-js .vjs-button > .vjs-icon-placeholder::before,
|
||||
.video-js .vjs-time-control { color: var(--text-2); font-size: .72rem; }
|
||||
.video-js .vjs-button:hover > .vjs-icon-placeholder::before { color: var(--green); }
|
||||
|
||||
/* Progress / seek bar */
|
||||
.video-js .vjs-progress-control { height: 100%; align-items: center; }
|
||||
.video-js .vjs-progress-holder { height: 3px; background: var(--border-2); }
|
||||
.video-js .vjs-play-progress,
|
||||
.video-js .vjs-play-progress::before { background: var(--green); color: var(--green); }
|
||||
.video-js .vjs-load-progress { background: rgba(0,232,122,.22); }
|
||||
.video-js .vjs-seek-handle .vjs-slider-handle::before { background: var(--green); }
|
||||
|
||||
/* Slider thumb */
|
||||
.video-js .vjs-progress-holder .vjs-play-progress::before {
|
||||
color: var(--green);
|
||||
top: -0.3em;
|
||||
}
|
||||
|
||||
/* Volume */
|
||||
.video-js .vjs-volume-bar { background: var(--border-2); }
|
||||
.video-js .vjs-volume-level{ background: var(--green); }
|
||||
|
||||
/* Current time / duration */
|
||||
.video-js .vjs-current-time-display,
|
||||
.video-js .vjs-duration-display,
|
||||
.video-js .vjs-time-divider { color: var(--text-2); }
|
||||
|
||||
/* Fullscreen / pip buttons */
|
||||
.video-js .vjs-fullscreen-control .vjs-icon-placeholder::before { color: var(--text-2); }
|
||||
.video-js .vjs-fullscreen-control:hover .vjs-icon-placeholder::before { color: var(--green); }
|
||||
|
||||
/* Poster */
|
||||
.video-js .vjs-poster { background-size: cover; }
|
||||
|
||||
/* Captions menu */
|
||||
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
|
||||
background: rgba(9,9,15,.95);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r);
|
||||
}
|
||||
.video-js .vjs-menu li { color: var(--text-2); }
|
||||
.video-js .vjs-menu li.vjs-selected { color: var(--green); }
|
||||
|
||||
/* Loading spinner — replace default with our animation */
|
||||
.video-js .vjs-loading-spinner {
|
||||
border-color: var(--border-2);
|
||||
border-top-color: var(--green);
|
||||
border-width: 3px;
|
||||
}
|
||||
.video-js .vjs-loading-spinner::before,
|
||||
.video-js .vjs-loading-spinner::after { display: none; }
|
||||
|
||||
/* ── Media caption / filename ────────────────────────────────────────────── */
|
||||
.post-media-caption {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .6rem; letter-spacing: .05em; color: var(--text-3);
|
||||
padding: .2rem 0 0 .1rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user