1131 lines
23 KiB
CSS
1131 lines
23 KiB
CSS
:root {
|
|
/* Brand colors sampled from Trollgorithm_booth.jpg */
|
|
--booth-gold: #e0a040;
|
|
--booth-gold-light: #f2c46d;
|
|
--booth-amber: #805030;
|
|
--booth-amber-dark: #5a3520;
|
|
|
|
/* Surfaces */
|
|
--bg-base: #0b0f17;
|
|
--bg-page: #111827;
|
|
--bg-panel: #1f2937;
|
|
--bg-input: #111827;
|
|
--bg-hover: #2d3748;
|
|
|
|
/* Text */
|
|
--text-primary: #f3f4f6;
|
|
--text-secondary: #9ca3af;
|
|
--text-muted: #6b7280;
|
|
--text-link: #93c5fd;
|
|
--text-link-hover: #bfdbfe;
|
|
|
|
/* Accents */
|
|
--accent: var(--booth-gold);
|
|
--accent-hover: var(--booth-gold-light);
|
|
--accent-text: #0b0f17;
|
|
--accent-subtle: rgba(224, 160, 64, 0.12);
|
|
|
|
/* Semantic */
|
|
--success: #10b981;
|
|
--success-bg: rgba(16, 185, 129, 0.12);
|
|
--warning: #f59e0b;
|
|
--warning-bg: rgba(245, 158, 11, 0.12);
|
|
--danger: #ef4444;
|
|
--danger-bg: rgba(239, 68, 68, 0.12);
|
|
--info: #60a5fa;
|
|
--info-bg: rgba(96, 165, 250, 0.12);
|
|
|
|
/* Borders */
|
|
--border: #374151;
|
|
--border-subtle: rgba(55, 65, 81, 0.6);
|
|
|
|
/* Spacing */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
|
|
/* Radius */
|
|
--radius-sm: 0.375rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-full: 9999px;
|
|
|
|
/* Typography */
|
|
--font-display: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
|
|
--shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.35);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 120ms ease;
|
|
--transition-base: 200ms ease;
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Base reset (scope to booth pages)
|
|
--------------------------------------------- */
|
|
.booth-page {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: var(--font-body);
|
|
background: var(--bg-base);
|
|
color: var(--text-primary);
|
|
line-height: 1.5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.booth-page *,
|
|
.booth-page *::before,
|
|
.booth-page *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.booth-page img {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.booth-page a {
|
|
color: var(--text-link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.booth-page a:hover {
|
|
color: var(--text-link-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Typography
|
|
--------------------------------------------- */
|
|
.booth-page h1,
|
|
.booth-page h2,
|
|
.booth-page h3 {
|
|
font-family: var(--font-display);
|
|
color: var(--accent);
|
|
margin-top: 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.booth-page h1 { font-size: 1.75rem; }
|
|
.booth-page h2 { font-size: 1.35rem; }
|
|
.booth-page h3 { font-size: 1.1rem; }
|
|
|
|
.booth-page .subtitle {
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Layout containers
|
|
--------------------------------------------- */
|
|
.booth-page .container {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.booth-page .container-wide {
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.booth-page .card {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--space-6);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Banner
|
|
--------------------------------------------- */
|
|
.booth-page .banner {
|
|
width: 100%;
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-lg);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Forms
|
|
--------------------------------------------- */
|
|
.booth-page label {
|
|
display: block;
|
|
margin-top: var(--space-4);
|
|
font-weight: 600;
|
|
color: var(--text-link);
|
|
}
|
|
|
|
.booth-page input[type="text"],
|
|
.booth-page input[type="email"],
|
|
.booth-page input[type="password"],
|
|
.booth-page input[type="number"],
|
|
.booth-page input[type="url"],
|
|
.booth-page input[type="file"],
|
|
.booth-page select,
|
|
.booth-page textarea {
|
|
width: 100%;
|
|
padding: var(--space-3);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-input);
|
|
color: var(--text-primary);
|
|
font: inherit;
|
|
margin-top: var(--space-1);
|
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.booth-page input:focus,
|
|
.booth-page select:focus,
|
|
.booth-page textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--accent-subtle);
|
|
}
|
|
|
|
.booth-page textarea {
|
|
min-height: 90px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.booth-page input[type="checkbox"],
|
|
.booth-page input[type="radio"] {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.booth-page .checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-4);
|
|
cursor: pointer;
|
|
font-weight: 400;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.booth-page .checkbox-label input {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.booth-page .required {
|
|
color: var(--danger);
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Buttons
|
|
--------------------------------------------- */
|
|
.booth-page button,
|
|
.booth-page .button,
|
|
.booth-page .button-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-3) var(--space-5);
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
background: var(--accent);
|
|
color: var(--accent-text);
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.booth-page button:hover,
|
|
.booth-page .button:hover,
|
|
.booth-page .button-link:hover {
|
|
background: var(--accent-hover);
|
|
transform: translateY(-1px);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.booth-page button:disabled,
|
|
.booth-page .button:disabled {
|
|
background: var(--border);
|
|
color: var(--text-muted);
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.booth-page .button-secondary {
|
|
background: var(--border);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.booth-page .button-secondary:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.booth-page .button-success {
|
|
background: var(--success);
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
.booth-page .button-success:hover {
|
|
background: #34d399;
|
|
}
|
|
|
|
.booth-page .button-danger {
|
|
background: var(--danger);
|
|
color: #fff;
|
|
}
|
|
|
|
.booth-page .button-danger:hover {
|
|
background: #f87171;
|
|
}
|
|
|
|
.booth-page .button-block {
|
|
width: 100%;
|
|
margin-top: var(--space-6);
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Flash / status messages
|
|
--------------------------------------------- */
|
|
.booth-page .flash {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: var(--space-4);
|
|
background: var(--success-bg);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--success);
|
|
}
|
|
|
|
.booth-page .flash.error {
|
|
background: var(--danger-bg);
|
|
border-color: var(--danger);
|
|
}
|
|
|
|
.booth-page .flash.warning {
|
|
background: var(--warning-bg);
|
|
border-color: var(--warning);
|
|
}
|
|
|
|
.booth-page .flash.info {
|
|
background: var(--info-bg);
|
|
border-color: var(--info);
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Status badges
|
|
--------------------------------------------- */
|
|
.booth-page .status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
background: var(--border);
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.booth-page .status-badge.ok,
|
|
.booth-page .status-badge.delivered,
|
|
.booth-page .status-badge.paid {
|
|
background: var(--success);
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
.booth-page .status-badge.pending,
|
|
.booth-page .status-badge.prompt_ready {
|
|
background: var(--info);
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
.booth-page .status-badge.songs_uploaded {
|
|
background: #a78bfa;
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
.booth-page .status-badge.awaiting_payment {
|
|
background: var(--warning);
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
.booth-page .status-badge.revisions_requested,
|
|
.booth-page .status-badge.missing,
|
|
.booth-page .status-badge.cancelled {
|
|
background: var(--danger);
|
|
color: #fff;
|
|
}
|
|
|
|
.booth-page .status-badge.sent {
|
|
background: var(--info);
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Admin dashboard
|
|
--------------------------------------------- */
|
|
.booth-page .topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-6);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.booth-page .topbar .nav {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
align-items: center;
|
|
}
|
|
|
|
.booth-page .filters {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.booth-page .filters a,
|
|
.booth-page .filters .filter-pill {
|
|
color: var(--text-link);
|
|
text-decoration: none;
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid transparent;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.booth-page .filters a:hover {
|
|
background: var(--bg-panel);
|
|
}
|
|
|
|
.booth-page .filters a.active {
|
|
font-weight: 700;
|
|
color: var(--accent-text);
|
|
background: var(--accent);
|
|
}
|
|
|
|
.booth-page .table-wrap {
|
|
overflow-x: auto;
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.booth-page table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: var(--bg-panel);
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.booth-page th,
|
|
.booth-page td {
|
|
padding: var(--space-2) var(--space-3);
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.booth-page th {
|
|
background: var(--bg-page);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.booth-page tr:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.booth-page .table-actions {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.booth-page .table-actions a,
|
|
.booth-page .table-actions button {
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.booth-page .refresh-hint {
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Admin request detail page
|
|
--------------------------------------------- */
|
|
.booth-page .section {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-5);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.booth-page .section h2 {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.booth-page .section h3 {
|
|
color: var(--accent);
|
|
font-size: 1rem;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.booth-page .copy-hint {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.booth-page .actions {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
.booth-page .actions button,
|
|
.booth-page .actions .button,
|
|
.booth-page .actions .button-link {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.booth-page .two-col {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.booth-page .two-col {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.booth-page .revision-note {
|
|
background: var(--danger-bg);
|
|
border: 1px solid var(--danger);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-4);
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
.booth-page .revision-note h3 {
|
|
color: var(--danger);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.booth-page .song-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-3);
|
|
margin: var(--space-2) 0;
|
|
padding: var(--space-2) 0;
|
|
}
|
|
|
|
.booth-page .song-row input[type="checkbox"],
|
|
.booth-page .song-row input[type="radio"] {
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.booth-page .song-row label {
|
|
margin: 0;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
flex: 1;
|
|
}
|
|
|
|
.booth-page .file-select {
|
|
background: var(--bg-input);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-2) var(--space-3);
|
|
margin: var(--space-2) 0;
|
|
}
|
|
|
|
.booth-page .file-select input {
|
|
width: auto;
|
|
margin-right: var(--space-2);
|
|
}
|
|
|
|
.booth-page .file-select label {
|
|
display: inline;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.booth-page .old-rev {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
margin-left: 1.6rem;
|
|
}
|
|
|
|
.booth-page .approved-box {
|
|
font-size: 1.1rem;
|
|
font-weight: 800;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.booth-page .steps {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
gap: var(--space-1);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.booth-page .step-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
flex: 1;
|
|
min-width: 70px;
|
|
position: relative;
|
|
}
|
|
|
|
.booth-page .step-item:not(:last-child)::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0.875rem;
|
|
left: 50%;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: var(--border);
|
|
z-index: 0;
|
|
}
|
|
|
|
.booth-page .step-item.completed:not(:last-child)::after {
|
|
background: var(--success);
|
|
}
|
|
|
|
.booth-page .step-indicator {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: var(--radius-full);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
background: var(--border);
|
|
color: var(--text-primary);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.booth-page .step-item.completed .step-indicator {
|
|
background: var(--success);
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
.booth-page .step-item.current .step-indicator {
|
|
background: var(--accent);
|
|
color: var(--accent-text);
|
|
box-shadow: 0 0 0 3px var(--accent-subtle);
|
|
}
|
|
|
|
.booth-page .step-item.upcoming .step-indicator {
|
|
background: var(--border);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.booth-page .step-label {
|
|
font-size: 0.7rem;
|
|
margin-top: var(--space-1);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.booth-page .step-item.upcoming .step-label {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.booth-page .history-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.booth-page .history-list li {
|
|
border-bottom: 1px solid var(--border);
|
|
padding: var(--space-3) 0;
|
|
}
|
|
|
|
.booth-page .history-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.booth-page .history-list .meta {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.booth-page .history-list .note {
|
|
margin: var(--space-1) 0 0 0;
|
|
}
|
|
|
|
.booth-page .media-status {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.booth-page .cover-col {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.booth-page .cover-col img {
|
|
max-width: 160px;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.booth-page .status-col {
|
|
flex: 1;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.booth-page .cover-hint {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin: var(--space-1) 0 0 0;
|
|
max-width: 160px;
|
|
}
|
|
|
|
.booth-page .section-nav {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.booth-page .section-nav a {
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border);
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.booth-page .section-nav a:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Player page
|
|
--------------------------------------------- */
|
|
.booth-page .player {
|
|
background: var(--bg-input);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-4);
|
|
margin: var(--space-4) 0;
|
|
}
|
|
|
|
.booth-page .player audio {
|
|
width: 100%;
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.booth-page .lyrics {
|
|
background: var(--bg-input);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-5);
|
|
margin: var(--space-4) 0;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.booth-page .lyrics h2 {
|
|
margin-top: 0;
|
|
margin-bottom: var(--space-4);
|
|
color: var(--accent);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.booth-page .lyrics .verse {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.booth-page .lyrics .verse:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.booth-page .lyrics .lyric-line {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.booth-page .locked {
|
|
margin-top: var(--space-4);
|
|
padding: var(--space-5);
|
|
background: var(--bg-input);
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.booth-page .locked h2 {
|
|
margin-top: 0;
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Kiosk
|
|
--------------------------------------------- */
|
|
.booth-page.kiosk-page,
|
|
.booth-page.kiosk-page body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.booth-page.kiosk-page body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 2vh 3vw;
|
|
text-align: center;
|
|
}
|
|
|
|
.booth-page .kiosk {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.booth-page .kiosk .header {
|
|
width: 100%;
|
|
}
|
|
|
|
.booth-page .kiosk-banner {
|
|
width: 100%;
|
|
max-height: 22vh;
|
|
object-fit: contain;
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.booth-page .status-pill {
|
|
display: inline-block;
|
|
margin-top: 1.5vh;
|
|
padding: var(--space-2) var(--space-4);
|
|
border-radius: var(--radius-full);
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.booth-page .status-pill.open {
|
|
background: var(--success);
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
.booth-page .status-pill.closed {
|
|
background: var(--danger);
|
|
color: #fff;
|
|
}
|
|
|
|
.booth-page .stage {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 2vh 0;
|
|
}
|
|
|
|
.booth-page .slide {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: fadeIn 0.8s ease;
|
|
}
|
|
|
|
.booth-page .slide > * {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.booth-page .slide.hidden {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.booth-page .kiosk h1 {
|
|
margin: 0 0 1.5vh 0;
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.booth-page .qr-code {
|
|
max-height: 44vh;
|
|
max-width: 44vh;
|
|
width: auto;
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-lg);
|
|
background: #fff;
|
|
padding: var(--space-2);
|
|
}
|
|
|
|
.booth-page .qr-caption {
|
|
margin-top: 1.5vh;
|
|
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
|
|
color: var(--text-link);
|
|
}
|
|
|
|
.booth-page .price-card,
|
|
.booth-page .queue-card {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-xl);
|
|
padding: 3vh 4vw;
|
|
box-shadow: var(--shadow-lg);
|
|
width: 100%;
|
|
}
|
|
|
|
.booth-page .queue-card {
|
|
max-height: 62vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.booth-page .price-card h2,
|
|
.booth-page .queue-card h2 {
|
|
margin: 0 0 2vh 0;
|
|
font-size: clamp(1.6rem, 4vw, 2.6rem);
|
|
}
|
|
|
|
.booth-page .price-list,
|
|
.booth-page .queue-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.booth-page .price-list li,
|
|
.booth-page .queue-list li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
padding: 1.2vh 0;
|
|
font-size: clamp(1.2rem, 3vw, 1.8rem);
|
|
}
|
|
|
|
.booth-page .price-list li:last-child,
|
|
.booth-page .queue-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.booth-page .price-list .label,
|
|
.booth-page .queue-list .customer {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.booth-page .price-list .amount,
|
|
.booth-page .queue-list .status {
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.booth-page .price-empty,
|
|
.booth-page .queue-empty {
|
|
font-size: 1.3rem;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
}
|
|
|
|
.booth-page .queue-note {
|
|
font-size: 1rem;
|
|
color: var(--text-secondary);
|
|
margin-top: var(--space-3);
|
|
text-align: center;
|
|
}
|
|
|
|
.booth-page .kiosk .footer {
|
|
font-size: 1rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.booth-page .dots {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
justify-content: center;
|
|
margin-top: 1vh;
|
|
}
|
|
|
|
.booth-page .dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--border);
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.booth-page .dot.active {
|
|
background: var(--accent);
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Settings page
|
|
--------------------------------------------- */
|
|
.booth-page .grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.booth-page .grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.booth-page .danger-zone {
|
|
grid-column: 1 / -1;
|
|
background: var(--danger-bg);
|
|
border: 1px solid var(--danger);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-5);
|
|
}
|
|
|
|
.booth-page .danger-zone h2 {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.booth-page .danger-zone button {
|
|
background: var(--danger);
|
|
}
|
|
|
|
.booth-page .danger-zone button:hover {
|
|
background: #f87171;
|
|
}
|
|
|
|
.booth-page .meta-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.booth-page .meta-table td {
|
|
padding: var(--space-2);
|
|
vertical-align: top;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.booth-page .meta-table td:first-child {
|
|
width: 30%;
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
padding-left: 0;
|
|
}
|
|
|
|
.booth-page .meta-table td:last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.booth-page .meta-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.booth-page .meta-table input,
|
|
.booth-page .meta-table textarea,
|
|
.booth-page .meta-table select {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.booth-page .path {
|
|
word-break: break-all;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.booth-page .version-tag {
|
|
display: inline-block;
|
|
background: var(--accent);
|
|
color: var(--accent-text);
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-md);
|
|
margin-left: var(--space-2);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.booth-page .status-ok {
|
|
color: var(--success);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.booth-page .status-bad {
|
|
color: var(--warning);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---------------------------------------------
|
|
Utility
|
|
--------------------------------------------- */
|
|
.booth-page .text-muted { color: var(--text-muted); }
|
|
.booth-page .text-secondary { color: var(--text-secondary); }
|
|
.booth-page .text-accent { color: var(--accent); }
|
|
.booth-page .text-danger { color: var(--danger); }
|
|
.booth-page .text-success { color: var(--success); }
|
|
|
|
.booth-page .mb-0 { margin-bottom: 0; }
|
|
.booth-page .mt-0 { margin-top: 0; }
|
|
.booth-page .mb-2 { margin-bottom: var(--space-2); }
|
|
.booth-page .mt-2 { margin-top: var(--space-2); }
|
|
.booth-page .mb-4 { margin-bottom: var(--space-4); }
|
|
.booth-page .mt-4 { margin-top: var(--space-4); }
|
|
.booth-page .mb-6 { margin-bottom: var(--space-6); }
|
|
.booth-page .mt-6 { margin-top: var(--space-6); }
|
|
|
|
.booth-page .text-center { text-align: center; }
|
|
.booth-page .font-mono { font-family: var(--font-mono); }
|
|
|
|
.booth-page hr.divider {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: var(--space-4) 0;
|
|
}
|