styles and shit cleanup
oscar
1 month ago
parent
00aa9a9bf1
commit
6c1c2970e8
@ -0,0 +1,186 @@
|
||||
/* =========================
|
||||
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}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
{% macro pager(endpoint, page, total_pages, q=None, sort=None, dir=None, timeframe=None, start=None, end=None, username=None) -%}
|
||||
{% if total_pages > 1 %}
|
||||
<div class="pagination">
|
||||
{% if page > 1 %}
|
||||
{% if username %}
|
||||
<a href="{{ url_for(endpoint, username=username, page=page-1, q=q, sort=sort, dir=dir, timeframe=timeframe, start=start, end=end) }}">« Prev</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for(endpoint, page=page-1, q=q, sort=sort, dir=dir, timeframe=timeframe, start=start, end=end) }}">« Prev</a>
|
||||
{% endif %}
|
||||
{% else %}<span>« Prev</span>{% endif %}
|
||||
|
||||
{% for p in range(1, total_pages + 1) %}
|
||||
{% if p == page %}
|
||||
<span class="active">{{ p }}</span>
|
||||
{% else %}
|
||||
{% if username %}
|
||||
<a href="{{ url_for(endpoint, username=username, page=p, q=q, sort=sort, dir=dir, timeframe=timeframe, start=start, end=end) }}">{{ p }}</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for(endpoint, page=p, q=q, sort=sort, dir=dir, timeframe=timeframe, start=start, end=end) }}">{{ p }}</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if page < total_pages %}
|
||||
{% if username %}
|
||||
<a href="{{ url_for(endpoint, username=username, page=page+1, q=q, sort=sort, dir=dir, timeframe=timeframe, start=start, end=end) }}">Next »</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for(endpoint, page=page+1, q=q, sort=sort, dir=dir, timeframe=timeframe, start=start, end=end) }}">Next »</a>
|
||||
{% endif %}
|
||||
{% else %}<span>Next »</span>{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>{% block title %}Streamaster Finder{% endblock %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<nav class="nav">
|
||||
<a class="brand" href="{{ url_for('web.dashboard') }}">📺 Streamaster Finder</a>
|
||||
<div class="links">
|
||||
<a href="{{ url_for('web.dashboard') }}">Dashboard</a>
|
||||
<a href="{{ url_for('web.users') }}">Users</a>
|
||||
<a href="{{ url_for('web.recent') }}">Recent</a>
|
||||
<a href="{{ url_for('web.favorites_page') }}">Favorites</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div>© <span id="yr"></span> Streamaster</div>
|
||||
<script>document.getElementById('yr').textContent = new Date().getFullYear();</script>
|
||||
</footer>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue