aodhan/character-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign gallery grid layout and update CSS across all index pages

Browse Source 
Increase card density with more columns per breakpoint (2→6 across sm/xl).
Refactor style.css for consistent card sizing, spacing, and responsive layout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Aodhan Collins
2026-03-04 21:43:40 +00:00
parent 27d2a70867
commit 9b143e65b1
10 changed files with 328 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

514
static/style.css
View File

@@ -1,42 +1,78 @@
/* ============================================================
Character Browser — Dark Theme (Indigo / Violet)
GAZE — Character Browser Design System
Space Grotesk (display) + Inter (body)
Deep dark, violet-indigo accent palette
============================================================ */
/* --- Variables ------------------------------------------------ */
:root {
--bg-base: #0f0f1a;
--bg-card: #1a1a2e;
--bg-raised: #222240;
--bg-input: #16162a;
--accent: #6c63ff;
--accent-dim: #4f46e5;
--accent-glow: rgba(108, 99, 255, 0.22);
--border: #2d2d5e;
--border-light: #3a3a6a;
--text: #e2e2f0;
--text-muted: #8888aa;
--text-dim: #5555aa;
--success: #22c55e;
--danger: #ef4444;
--warning: #f59e0b;
--info: #38bdf8;
--radius: 10px;
/* Backgrounds */
--bg-base: #07070f;
--bg-card: #0c0c1c;
--bg-raised: #111128;
--bg-input: #09091a;
/* Accent — violet */
--accent: #8b7eff;
--accent-dim: #6c5ce7;
--accent-bright:#b0a8ff;
--accent-glow: rgba(139, 126, 255, 0.14);
--accent-glow-strong: rgba(139, 126, 255, 0.32);
/* Borders */
--border: #16163a;
--border-light: #21214a;
--border-focus: #5548c8;
/* Text */
--text: #e8e8f5;
--text-muted: #6a6a9a;
--text-dim: #35356a;
/* Status */
--success: #34d399;
--danger: #f87171;
--warning: #fbbf24;
--info: #60c8ff;
/* Shape */
--radius: 12px;
--radius-sm: 8px;
/* Fonts */
--font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
}
/* --- Base ----------------------------------------------------- */
body {
background-color: var(--bg-base);
/* Subtle radial accent glow — premium depth effect */
background-image:
radial-gradient(ellipse at 18% 0%, rgba(139, 126, 255, 0.06) 0%, transparent 55%),
radial-gradient(ellipse at 82% 100%, rgba(192, 132, 252, 0.05) 0%, transparent 55%);
background-attachment: fixed;
color: var(--text);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-family: var(--font-body);
font-size: 0.9375rem;
line-height: 1.6;
min-height: 100vh;
}
a { color: var(--accent); }
a:hover { color: #9d98ff; }
a { color: var(--accent-bright); text-decoration: none; }
a:hover { color: #c4b5fd; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
color: var(--text);
letter-spacing: -0.02em;
}
h5, h6 { color: var(--text); }
/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-card); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }
@@ -44,109 +80,108 @@ a:hover { color: #9d98ff; }
Navbar
============================================================ */
.navbar {
background: rgba(15, 15, 26, 0.95) !important;
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 0.55rem 0;
background: rgba(7, 7, 15, 0.97) !important;
backdrop-filter: blur(24px) saturate(1.3);
border-bottom: 1px solid var(--border) !important;
padding: 0.5rem 0;
}
.navbar-brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.12em;
letter-spacing: 0.18em;
text-transform: uppercase;
background: linear-gradient(90deg, #a78bfa, #6c63ff, #c084fc);
background: linear-gradient(135deg, #c084fc 0%, #8b7eff 45%, #60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.navbar-brand:hover {
background: linear-gradient(90deg, #c4b5fd, #818cf8, #d8b4fe);
background: linear-gradient(135deg, #d8b4fe 0%, #b0a8ff 45%, #93c5fd 100%);
-webkit-background-clip: text;
background-clip: text;
}
.navbar-logo {
height: 28px;
height: 26px;
width: auto;
}
/* All nav outline-light buttons become understated link-style items */
/* Nav links — borderless, subtle hover */
.navbar .btn-outline-light {
border: none;
color: var(--text-muted) !important;
background: transparent;
font-size: 0.82rem;
padding: 0.28rem 0.6rem;
border-radius: 6px;
font-size: 0.79rem;
font-weight: 500;
padding: 0.28rem 0.58rem;
border-radius: var(--radius-sm);
transition: color 0.15s, background 0.15s;
letter-spacing: 0.01em;
}
.navbar .btn-outline-light:hover,
.navbar .btn-outline-light:focus {
color: var(--text) !important;
background: rgba(255, 255, 255, 0.07);
background: rgba(139, 126, 255, 0.08);
box-shadow: none;
}
/* Generator and Gallery get accent tint */
.navbar .btn-outline-light[href="/generator"],
.navbar .btn-outline-light[href="/gallery"] {
color: #9d98ff !important;
color: var(--accent-bright) !important;
}
.navbar .btn-outline-light[href="/generator"]:hover,
.navbar .btn-outline-light[href="/gallery"]:hover {
background: var(--accent-glow);
color: #b8b4ff !important;
color: #c4b5fd !important;
}
/* Create Character */
.navbar .btn-outline-success {
border: 1px solid rgba(34, 197, 94, 0.5);
border: 1px solid rgba(52, 211, 153, 0.35);
color: var(--success) !important;
font-size: 0.82rem;
font-size: 0.79rem;
font-weight: 500;
padding: 0.28rem 0.7rem;
border-radius: 6px;
border-radius: var(--radius-sm);
transition: all 0.15s;
}
.navbar .btn-outline-success:hover {
background: rgba(34, 197, 94, 0.12);
background: rgba(52, 211, 153, 0.1);
border-color: var(--success);
box-shadow: none;
color: var(--success) !important;
}
/* Vertical divider in navbar */
.navbar .vr {
background-color: var(--border);
background-color: var(--border-light);
opacity: 1;
}
/* ---- Queue button in navbar ---- */
/* Queue button */
.queue-btn {
position: relative;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1rem;
padding: 0.2rem 0.5rem;
border-radius: 6px;
font-size: 0.95rem;
padding: 0.2rem 0.48rem;
border-radius: var(--radius-sm);
transition: color 0.15s, background 0.15s;
line-height: 1;
}
.queue-btn:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.07);
}
.queue-btn-active {
color: var(--accent) !important;
background: rgba(255, 255, 255, 0.06);
}
.queue-btn-active { color: var(--accent-bright) !important; }
.queue-badge {
position: absolute;
top: -2px;
right: -4px;
background: var(--accent);
color: #fff;
font-size: 0.6rem;
font-size: 0.58rem;
font-weight: 700;
min-width: 16px;
height: 16px;
@@ -157,14 +192,12 @@ a:hover { color: #9d98ff; }
padding: 0 3px;
line-height: 1;
}
.queue-icon {
font-size: 0.95rem;
}
.queue-icon { font-size: 0.88rem; }
/* Queue status dots */
.queue-status-dot {
width: 8px;
height: 8px;
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
@@ -174,14 +207,13 @@ a:hover { color: #9d98ff; }
.queue-status-paused { background: var(--text-dim); }
.queue-status-done { background: var(--success); }
.queue-status-failed { background: var(--danger); }
.queue-status-removed { background: var(--border); }
.queue-status-removed { background: var(--border-light); }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
50% { opacity: 0.35; }
}
/* Small button variant for queue actions */
.btn-xs {
padding: 0.1rem 0.35rem;
font-size: 0.7rem;
@@ -189,6 +221,19 @@ a:hover { color: #9d98ff; }
line-height: 1.4;
}
/* ============================================================
Checkpoint Bar
============================================================ */
.default-checkpoint-bar {
background:
linear-gradient(to right,
rgba(139, 126, 255, 0.04) 0%,
transparent 25%,
transparent 75%,
rgba(139, 126, 255, 0.04) 100%);
border-bottom: 1px solid var(--border) !important;
}
/* ============================================================
Cards
============================================================ */
@@ -204,10 +249,10 @@ a:hover { color: #9d98ff; }
border-bottom: 1px solid var(--border) !important;
color: var(--text) !important;
font-weight: 600;
font-size: 0.88rem;
font-size: 0.84rem;
letter-spacing: 0.01em;
}
/* Override Bootstrap bg utility classes on card-header */
.card-header.bg-primary,
.card-header.bg-dark,
.card-header.bg-secondary,
@@ -224,19 +269,76 @@ a:hover { color: #9d98ff; }
.card-body { color: var(--text); }
/* Character / category card hover */
/* ============================================================
Gallery Cards (.character-card)
============================================================ */
.character-card {
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
display: flex !important;
flex-direction: column;
}
.character-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px var(--accent-glow);
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(4, 4, 10, 0.7), 0 0 0 1px var(--accent);
border-color: var(--accent) !important;
}
/* Gallery card image container — portrait 2:3 ratio */
.character-card .img-container {
aspect-ratio: 2 / 3;
height: auto;
min-height: unset;
flex-shrink: 0;
}
.character-card .img-container img {
transition: transform 0.4s ease;
}
.character-card:hover .img-container img {
transform: scale(1.07);
}
/* Subtle accent tint on hover via pseudo-overlay */
.character-card:hover .img-container::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 55%, rgba(108, 92, 231, 0.12) 100%);
pointer-events: none;
z-index: 1;
}
/* Compact name strip */
.character-card .card-body {
padding: 0.55rem 0.7rem 0.4rem;
flex: 1;
}
.character-card .card-title {
font-family: var(--font-display);
font-size: 0.84rem;
font-weight: 600;
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
}
.character-card .card-text {
display: none; /* Hide verbose prompt text — cleaner gallery look */
}
.character-card .card-footer {
padding: 0.28rem 0.7rem;
}
.character-card .card-footer small {
font-size: 0.66rem;
font-family: monospace;
color: var(--text-dim) !important;
}
/* ============================================================
Image container
Image container (detail pages and standalone use)
============================================================ */
.img-container {
height: 300px;
@@ -246,6 +348,7 @@ a:hover { color: #9d98ff; }
align-items: center;
justify-content: center;
border-radius: var(--radius) var(--radius) 0 0;
position: relative;
}
.img-container img {
width: 100%;
@@ -265,15 +368,16 @@ a:hover { color: #9d98ff; }
.form-control,
.form-select {
background-color: var(--bg-input) !important;
border-color: var(--border) !important;
border-color: var(--border-light) !important;
color: var(--text) !important;
border-radius: 6px;
border-radius: var(--radius-sm);
transition: border-color 0.15s, box-shadow 0.15s;
font-size: 0.875rem;
}
.form-control:focus,
.form-select:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px var(--accent-glow) !important;
border-color: var(--border-focus) !important;
box-shadow: 0 0 0 3px rgba(85, 72, 200, 0.22) !important;
background-color: var(--bg-input) !important;
color: var(--text) !important;
}
@@ -282,10 +386,11 @@ a:hover { color: #9d98ff; }
.form-select:disabled {
background-color: var(--bg-raised) !important;
color: var(--text-muted) !important;
opacity: 0.65;
}
.form-label { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; }
.form-text { color: var(--text-dim) !important; }
.form-label { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem; }
.form-text { color: var(--text-dim) !important; font-size: 0.77rem; }
.form-check-input {
background-color: var(--bg-input);
@@ -295,8 +400,11 @@ a:hover { color: #9d98ff; }
background-color: var(--accent);
border-color: var(--accent);
}
.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-glow); }
.form-check-label { color: var(--text); }
.form-check-input:focus {
box-shadow: 0 0 0 3px rgba(85, 72, 200, 0.22);
border-color: var(--border-focus);
}
.form-check-label { color: var(--text); font-size: 0.875rem; }
option { background-color: var(--bg-raised); color: var(--text); }
@@ -304,22 +412,24 @@ option { background-color: var(--bg-raised); color: var(--text); }
Buttons
============================================================ */
.btn-primary {
background-color: var(--accent);
border-color: var(--accent-dim);
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
border: 1px solid var(--accent-dim);
color: #fff;
font-weight: 500;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
background-color: var(--accent-dim);
border-color: #3730a3;
box-shadow: 0 0 0 3px var(--accent-glow);
background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(139, 126, 255, 0.22);
color: #fff;
}
.btn-outline-primary {
border-color: var(--accent);
color: var(--accent);
font-weight: 500;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
@@ -332,9 +442,10 @@ option { background-color: var(--bg-raised); color: var(--text); }
background-color: var(--bg-raised);
border-color: var(--border-light);
color: var(--text);
font-weight: 500;
}
.btn-secondary:hover {
background-color: #2a2a50;
background-color: #1c1c38;
border-color: var(--border-light);
color: var(--text);
}
@@ -342,6 +453,7 @@ option { background-color: var(--bg-raised); color: var(--text); }
.btn-outline-secondary {
border-color: var(--border-light);
color: var(--text-muted);
font-weight: 500;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active {
@@ -352,36 +464,36 @@ option { background-color: var(--bg-raised); color: var(--text); }
/* Active resolution preset */
.btn-secondary.preset-btn {
background-color: var(--accent);
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
border-color: var(--accent-dim);
color: #fff;
}
.btn-outline-success { border-color: var(--success); color: var(--success); }
.btn-outline-success:hover { background-color: rgba(34,197,94,.12); border-color: var(--success); color: var(--success); }
.btn-success { background-color: var(--success); border-color: #16a34a; color: #fff; }
.btn-success:hover { background-color: #16a34a; border-color: #15803d; color: #fff; }
.btn-outline-success { border-color: var(--success); color: var(--success); font-weight: 500; }
.btn-outline-success:hover { background-color: rgba(52,211,153,.1); border-color: var(--success); color: var(--success); }
.btn-success { background-color: #059669; border-color: #047857; color: #fff; font-weight: 500; }
.btn-success:hover { background-color: #047857; border-color: #065f46; color: #fff; }
.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
.btn-outline-danger:hover { background-color: rgba(239,68,68,.12); border-color: var(--danger); color: var(--danger); }
.btn-danger { background-color: var(--danger); border-color: #dc2626; color: #fff; }
.btn-danger:hover { background-color: #dc2626; border-color: #b91c1c; color: #fff; }
.btn-outline-danger { border-color: var(--danger); color: var(--danger); font-weight: 500; }
.btn-outline-danger:hover { background-color: rgba(248,113,113,.1); border-color: var(--danger); color: var(--danger); }
.btn-danger { background-color: #dc2626; border-color: #b91c1c; color: #fff; font-weight: 500; }
.btn-danger:hover { background-color: #b91c1c; border-color: #991b1b; color: #fff; }
.btn-outline-warning { border-color: var(--warning); color: var(--warning); }
.btn-outline-warning:hover { background-color: rgba(245,158,11,.12); border-color: var(--warning); color: var(--warning); }
.btn-outline-warning { border-color: var(--warning); color: var(--warning); font-weight: 500; }
.btn-outline-warning:hover { background-color: rgba(251,191,36,.1); border-color: var(--warning); color: var(--warning); }
.btn-light, .btn-outline-light {
background-color: rgba(255,255,255,.08);
background-color: rgba(255,255,255,.06);
border-color: var(--border-light);
color: var(--text);
font-weight: 500;
}
.btn-light:hover, .btn-outline-light:hover {
background-color: rgba(255,255,255,.14);
background-color: rgba(255,255,255,.1);
color: var(--text);
}
/* Close button override (visible on dark bg) */
.btn-close { filter: invert(1) brightness(0.8); }
.btn-close { filter: invert(1) brightness(0.7); }
/* ============================================================
Accordion
@@ -390,60 +502,57 @@ option { background-color: var(--bg-raised); color: var(--text); }
background-color: var(--bg-card) !important;
border-color: var(--border) !important;
}
.accordion-button {
background-color: var(--bg-raised) !important;
color: var(--text) !important;
font-size: 0.88rem;
font-size: 0.875rem;
font-weight: 500;
}
.accordion-button:not(.collapsed) {
background-color: #252450 !important;
color: var(--text) !important;
background-color: #181835 !important;
color: var(--accent-bright) !important;
box-shadow: inset 0 -1px 0 var(--border);
}
/* Make the chevron arrow visible on dark bg */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
filter: invert(1) brightness(0.75);
filter: invert(1) brightness(0.6);
}
.accordion-button:focus { box-shadow: none; }
.accordion-body { background-color: var(--bg-card); padding: 0.5rem; }
/* Mix & match list items */
.mix-item { user-select: none; border-radius: 6px; }
.mix-item:hover { background-color: rgba(108, 99, 255, 0.12) !important; }
/* N/A placeholder for items without images */
.mix-item { user-select: none; border-radius: var(--radius-sm); }
.mix-item:hover { background-color: rgba(139, 126, 255, 0.1) !important; }
.mix-item .bg-light {
background-color: var(--bg-raised) !important;
color: var(--text-dim) !important;
}
/* ============================================================
Progress bars
Progress Bars
============================================================ */
.progress {
background-color: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 8px;
border-radius: 999px;
}
.progress-bar {
background-color: var(--accent);
border-radius: 8px;
background: linear-gradient(90deg, var(--accent-dim), var(--accent));
border-radius: 999px;
transition: width 0.4s ease-in-out;
}
.progress-bar.bg-success { background-color: var(--success) !important; }
.progress-bar.bg-info { background-color: var(--info) !important; }
.progress-bar.bg-success { background: var(--success) !important; }
.progress-bar.bg-info { background: var(--info) !important; }
/* ============================================================
Badges
============================================================ */
.badge.bg-primary { background-color: var(--accent) !important; }
.badge.bg-secondary { background-color: #2e2e52 !important; color: var(--text-muted) !important; }
.badge.bg-info { background-color: var(--info) !important; color: #0f172a !important; }
.badge.bg-success { background-color: var(--success) !important; }
.badge.bg-secondary { background-color: #1b1b40 !important; color: var(--text-muted) !important; }
.badge.bg-info { background-color: var(--info) !important; color: #0c1a2b !important; }
.badge.bg-success { background-color: var(--success) !important; color: #012218 !important; }
.badge.bg-danger { background-color: var(--danger) !important; }
.badge.bg-warning { background-color: var(--warning) !important; color: #0f172a !important; }
.badge.bg-warning { background-color: var(--warning) !important; color: #1a0f00 !important; }
.badge.bg-light { background-color: var(--bg-raised) !important; color: var(--text-muted) !important; border-color: var(--border) !important; }
/* ============================================================
@@ -451,39 +560,50 @@ option { background-color: var(--bg-raised); color: var(--text); }
============================================================ */
.modal-content {
background-color: var(--bg-card);
border: 1px solid var(--border);
border: 1px solid var(--border-light);
border-radius: var(--radius);
color: var(--text);
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(139, 126, 255, 0.08);
}
.modal-header {
border-bottom: 1px solid var(--border);
background-color: var(--bg-raised);
border-radius: var(--radius) var(--radius) 0 0;
padding: 1rem 1.25rem;
}
.modal-footer {
border-top: 1px solid var(--border);
background-color: var(--bg-raised);
border-radius: 0 0 var(--radius) var(--radius);
padding: 0.75rem 1.25rem;
}
.modal-title {
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
}
.modal-title { color: var(--text); }
/* ============================================================
Alerts
============================================================ */
.alert-info {
background-color: rgba(56, 189, 248, 0.1);
border-color: rgba(56, 189, 248, 0.3);
background-color: rgba(96, 200, 255, 0.08);
border-color: rgba(96, 200, 255, 0.22);
color: var(--info);
border-radius: var(--radius-sm);
}
.alert-success {
background-color: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.3);
background-color: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.22);
color: var(--success);
border-radius: var(--radius-sm);
}
.alert-danger {
background-color: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
background-color: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.22);
color: var(--danger);
border-radius: var(--radius-sm);
}
/* ============================================================
@@ -493,6 +613,7 @@ option { background-color: var(--bg-raised); color: var(--text); }
background-color: var(--bg-card);
border-color: var(--border);
color: var(--text-muted);
font-size: 0.875rem;
}
.page-link:hover {
background-color: var(--bg-raised);
@@ -511,22 +632,31 @@ option { background-color: var(--bg-raised); color: var(--text); }
}
/* ============================================================
Text / utility overrides
Text / Utility overrides
============================================================ */
.text-muted { color: var(--text-muted) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--text); }
.border-bottom { border-color: var(--border) !important; }
.border-top { border-color: var(--border) !important; }
.border { border-color: var(--border) !important; }
hr { border-color: var(--border); }
small { color: var(--text-muted); }
hr { border-color: var(--border); opacity: 1; }
small { color: var(--text-muted); font-size: 0.8em; }
.font-monospace { color: var(--text); }
/* Spinner on dark bg */
.spinner-border.text-secondary { color: var(--text-muted) !important; }
/* List group */
.list-group-item {
background-color: var(--bg-card);
border-color: var(--border);
color: var(--text);
}
.list-group-item:hover { background-color: var(--bg-raised); }
.list-group-flush .list-group-item {
border-left: none;
border-right: none;
}
/* ============================================================
Gallery page
Gallery Page
============================================================ */
.gallery-card {
position: relative;
@@ -539,20 +669,20 @@ small { color: var(--text-muted); }
}
.gallery-card:hover {
border-color: var(--accent);
box-shadow: 0 0 20px var(--accent-glow);
box-shadow: 0 0 28px var(--accent-glow);
}
.gallery-card img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
transition: transform 0.2s;
transition: transform 0.25s ease;
}
.gallery-card:hover img { transform: scale(1.04); }
.gallery-card .overlay {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.88));
padding: 28px 8px 8px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
padding: 32px 10px 10px;
opacity: 0;
transition: opacity 0.2s;
}
@@ -564,16 +694,16 @@ small { color: var(--text-muted); }
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
/* Lightbox */
#lightbox {
display: none; position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.94); z-index: 9999;
background: rgba(0, 0, 0, 0.97); z-index: 9999;
align-items: center; justify-content: center; flex-direction: column;
}
#lightbox.active { display: flex; }
@@ -581,16 +711,16 @@ small { color: var(--text-muted); }
#lightbox-img {
max-width: 90vw; max-height: 80vh; object-fit: contain;
border-radius: 8px;
box-shadow: 0 0 60px rgba(108, 99, 255, 0.3);
box-shadow: 0 0 80px rgba(139, 126, 255, 0.22);
cursor: zoom-in; display: block;
}
#lightbox-meta { color: #eee; margin-top: 10px; text-align: center; font-size: .85rem; }
#lightbox-hint { color: rgba(255,255,255,.38); font-size: .75rem; margin-top: 3px; }
#lightbox-meta { color: #eee; margin-top: 12px; text-align: center; font-size: .85rem; }
#lightbox-hint { color: rgba(255,255,255,.3); font-size: .75rem; margin-top: 4px; }
#lightbox-close { position: fixed; top: 16px; right: 20px; font-size: 2rem; color: #fff; cursor: pointer; z-index: 10000; line-height: 1; }
#lightbox-actions { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; gap: 8px; }
/* Prompt modal metadata */
.meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .85rem; }
.meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .85rem; }
.meta-grid .meta-label { color: var(--text-muted); white-space: nowrap; font-weight: 600; }
.meta-grid .meta-value { font-family: monospace; word-break: break-all; color: var(--text); }
@@ -602,49 +732,10 @@ small { color: var(--text-muted); }
font-size: .8rem; font-family: monospace; margin: 2px;
color: var(--text);
}
.lora-chip .lora-strength { color: var(--accent); }
.lora-chip .lora-strength { color: var(--accent-bright); }
/* ============================================================
Misc
============================================================ */
/* Vertical rule in navbar */
.vr { opacity: 1; background-color: var(--border); }
/* Inline icons inside buttons */
.btn img { height: 1em; vertical-align: -0.125em; }
/* Icon-only square button */
.btn-icon {
width: 34px;
height: 34px;
padding: 0;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn-icon img {
width: 18px;
height: 18px;
filter: brightness(0) invert(1);
}
/* Make forms invisible to flex layout so buttons flow naturally */
.d-contents { display: contents !important; }
/* Tags display */
.badge.rounded-pill { font-weight: 400; }
/* Textarea read-only */
textarea[readonly] {
background-color: var(--bg-raised) !important;
color: var(--text) !important;
border-color: var(--border) !important;
resize: vertical;
}
/* ============================================================
Service status indicators (navbar)
Service Status Indicators (navbar)
============================================================ */
.service-status {
display: inline-flex;
@@ -652,30 +743,63 @@ textarea[readonly] {
gap: 4px;
cursor: default;
user-select: none;
opacity: 0.85;
opacity: 0.8;
}
.service-status:hover { opacity: 1; }
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
transition: background-color 0.4s ease;
}
.status-dot.status-ok { background-color: #3dd68c; box-shadow: 0 0 4px #3dd68c88; }
.status-dot.status-error { background-color: #f06080; box-shadow: 0 0 4px #f0608088; }
.status-dot.status-checking { background-color: #888; animation: status-pulse 1.2s ease-in-out infinite; }
.status-dot.status-ok { background-color: #34d399; box-shadow: 0 0 5px rgba(52, 211, 153, 0.55); }
.status-dot.status-error { background-color: #f87171; box-shadow: 0 0 5px rgba(248, 113, 113, 0.55); }
.status-dot.status-checking { background-color: var(--border-light); animation: status-pulse 1.4s ease-in-out infinite; }
.status-label {
font-size: 0.7rem;
font-weight: 500;
color: rgba(255,255,255,0.65);
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.02em;
}
@keyframes status-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
50% { opacity: 0.2; }
}
/* ============================================================
Misc
============================================================ */
.vr { opacity: 1; background-color: var(--border-light); }
.btn img { height: 1em; vertical-align: -0.125em; }
.btn-icon {
width: 32px;
height: 32px;
padding: 0;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn-icon img {
width: 16px;
height: 16px;
filter: brightness(0) invert(1);
}
.d-contents { display: contents !important; }
.badge.rounded-pill { font-weight: 400; }
textarea[readonly] {
background-color: var(--bg-raised) !important;
color: var(--text) !important;
border-color: var(--border) !important;
resize: vertical;
}

2
templates/actions/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for action in actions %}
<div class="col" id="card-{{ action.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/action/{{ action.slug }}'">

2
templates/checkpoints/index.html
View File

@@ -44,7 +44,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for ckpt in checkpoints %}
<div class="col" id="card-{{ ckpt.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/checkpoint/{{ ckpt.slug }}'">

2
templates/detailers/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for detailer in detailers %}
<div class="col" id="card-{{ detailer.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/detailer/{{ detailer.slug }}'">

2
templates/index.html
View File

@@ -39,7 +39,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for char in characters %}
<div class="col" id="card-{{ char.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/character/{{ char.slug }}'">

2
templates/layout.html
View File

@@ -6,7 +6,7 @@
<title>GAZE</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
</head>

2
templates/looks/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for look in looks %}
<div class="col" id="card-{{ look.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='{{ url_for('look_detail', slug=look.slug) }}'">

2
templates/outfits/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for outfit in outfits %}
<div class="col" id="card-{{ outfit.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/outfit/{{ outfit.slug }}'">

2
templates/scenes/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for scene in scenes %}
<div class="col" id="card-{{ scene.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/scene/{{ scene.slug }}'">

2
templates/styles/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for style in styles %}
<div class="col" id="card-{{ style.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/style/{{ style.slug }}'">