You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
4.8 KiB
CSS
187 lines
4.8 KiB
CSS
/* =========================
|
|
Theme / Base
|
|
========================= */
|
|
:root{
|
|
--bg:#111; --card:#1a1a1a; --muted:#bbb; --text:#eee; --line:#333;
|
|
--chip:#181818; --link:#4af; --link-hover:#7bb7ff;
|
|
}
|
|
|
|
*{box-sizing:border-box}
|
|
html,body{height:100%}
|
|
body{
|
|
margin:0;
|
|
font-family:Arial,Helvetica,sans-serif;
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
}
|
|
a{color:var(--link); text-decoration:none}
|
|
a:hover{color:var(--link-hover)}
|
|
|
|
/* =========================
|
|
Top Nav & Footer
|
|
========================= */
|
|
.topbar{
|
|
position:sticky; top:0; z-index:100;
|
|
background:#0d0d0d; border-bottom:1px solid var(--line);
|
|
}
|
|
.nav{
|
|
max-width:1200px; margin:0 auto;
|
|
display:flex; align-items:center; justify-content:space-between;
|
|
padding:12px 16px;
|
|
}
|
|
.nav .brand{color:#fff; font-weight:600}
|
|
.nav .links{display:flex; gap:14px; flex-wrap:wrap}
|
|
.nav .links a{color:var(--link)}
|
|
.nav .links a:hover{color:var(--link-hover)}
|
|
|
|
.footer{
|
|
margin-top:32px; border-top:1px solid var(--line);
|
|
padding:16px; text-align:center; color:var(--muted)
|
|
}
|
|
|
|
/* =========================
|
|
Layout Helpers
|
|
========================= */
|
|
.container{max-width:1200px; margin:24px auto; padding:0 16px}
|
|
|
|
/* =========================
|
|
Controls / Forms
|
|
========================= */
|
|
.controls{
|
|
margin:10px 0; display:flex; gap:10px;
|
|
flex-wrap:wrap; justify-content:center
|
|
}
|
|
input[type="text"], input[type="date"], select{
|
|
padding:8px; background:var(--chip); color:var(--text);
|
|
border:1px solid var(--line); border-radius:4px;
|
|
}
|
|
button{
|
|
padding:8px 12px; background:var(--chip); color:var(--text);
|
|
border:1px solid var(--line); border-radius:4px; cursor:pointer
|
|
}
|
|
button:hover{background:#202020}
|
|
|
|
/* =========================
|
|
Table (Dashboard)
|
|
========================= */
|
|
.table-wrap{overflow:auto}
|
|
table{
|
|
margin:auto; border-collapse:collapse; width:100%;
|
|
background:var(--card)
|
|
}
|
|
th,td{border:1px solid var(--line); padding:10px; text-align:left}
|
|
th{
|
|
background:#222; position:sticky; top:48px; /* align with .topbar height */
|
|
z-index:10
|
|
}
|
|
tr:nth-child(even){background:#181818}
|
|
|
|
/* =========================
|
|
Pagination (shared macro)
|
|
========================= */
|
|
.pagination{margin:16px 0; text-align:center}
|
|
.pagination a,.pagination span{
|
|
display:inline-block; background:var(--chip); color:var(--text);
|
|
border:1px solid var(--line); margin:0 5px; padding:6px 12px; text-decoration:none;
|
|
border-radius:4px;
|
|
}
|
|
.pagination .active{background:#333}
|
|
|
|
/* =========================
|
|
Status dots
|
|
========================= */
|
|
.status-dot{
|
|
display:inline-block; width:10px; height:10px;
|
|
border-radius:50%; margin-left:6px; vertical-align:middle
|
|
}
|
|
.dot-online{background:#22c55e}
|
|
.dot-record{background:#ef4444}
|
|
.dot-offline{background:#666}
|
|
|
|
/* =========================
|
|
Grid container (shared)
|
|
========================= */
|
|
.grid{
|
|
width:100%;
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
|
|
gap:14px;
|
|
}
|
|
|
|
/* =========================
|
|
Card base (shared)
|
|
========================= */
|
|
.card{
|
|
background:var(--card); border:1px solid var(--line);
|
|
border-radius:8px; padding:10px; min-height:120px;
|
|
}
|
|
|
|
/* =========================
|
|
Users grid (users.html)
|
|
Two-column card with tall thumbnail
|
|
========================= */
|
|
.user-card{
|
|
display:grid;
|
|
grid-template-columns:180px 1fr;
|
|
gap:12px; align-items:stretch;
|
|
}
|
|
|
|
/* =========================
|
|
Video grids (favorites, user_page)
|
|
Stacked card (thumb on top, meta below)
|
|
========================= */
|
|
.video-card{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:10px;
|
|
}
|
|
|
|
/* Thumbnails (shared) */
|
|
.thumb{
|
|
position:relative;
|
|
height:100%; min-height:120px;
|
|
background:#222; border:1px solid var(--line);
|
|
border-radius:6px; overflow:hidden;
|
|
}
|
|
.thumb img,.thumb .fallback{
|
|
position:absolute; inset:0;
|
|
width:100%; height:100%; object-fit:cover; display:block;
|
|
}
|
|
.thumb .fallback{
|
|
display:none; align-items:center; justify-content:center; font-size:28px;
|
|
}
|
|
|
|
/* Taller thumbs on video cards */
|
|
.grid.videos .thumb{ min-height:140px; }
|
|
|
|
/* Meta panel */
|
|
.meta{
|
|
display:flex; flex-direction:column; gap:6px; min-width:0;
|
|
}
|
|
.meta h3{margin:0; font-size:16px; display:flex; align-items:center; gap:6px}
|
|
.row{font-size:14px}
|
|
.muted{color:var(--muted)}
|
|
|
|
/* Favorite star overlay (works for both grids) */
|
|
.fav-btn{
|
|
position:absolute; top:8px; right:8px; z-index:2;
|
|
font-size:18px; line-height:1;
|
|
border:none; border-radius:6px; padding:.25rem .45rem; cursor:pointer;
|
|
background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(2px)
|
|
}
|
|
.fav-btn[aria-pressed="true"]{color:gold}
|
|
.fav-btn:hover{transform:scale(1.05)}
|
|
|
|
/* =========================
|
|
Responsive tweaks
|
|
========================= */
|
|
@media (max-width: 900px){
|
|
.user-card{grid-template-columns:150px 1fr}
|
|
th{top:56px}
|
|
}
|
|
@media (max-width: 640px){
|
|
.user-card{grid-template-columns:1fr}
|
|
.thumb{min-height:160px}
|
|
th{top:60px}
|
|
}
|