Djeex
d67a2569f4
Reworked static/style.css to follow the same visual language as lumeex's back office (near-black background, cyan accent, gradient pill buttons, translucent bordered panels) instead of the previous generic dark-teal theme. Dropzones now use a dashed border while empty, turning solid once a file is picked. Also fixes a stale CSS selector (.dropzone label.tag) that never matched the actual markup (a <span>), so the SDR/HDR tag labels were unstyled before. Adds Gitea and GitHub repo links in the footer, using the same icons and link pattern as lumeex.
354 lines
6.9 KiB
CSS
354 lines
6.9 KiB
CSS
:root {
|
|
--bg: #111010;
|
|
--surface: rgb(67 67 67 / 26%);
|
|
--surface-raised: #1f2223;
|
|
--surface-focus: #161616;
|
|
--border: #2f2e2e80;
|
|
--border-solid: #585858;
|
|
--text: #fbfbfb;
|
|
--text-muted: #9a9a9a;
|
|
--placeholder: #585858;
|
|
--accent: #55c3ec;
|
|
--accent-start: #26c4ff;
|
|
--accent-end: #016074;
|
|
--accent-hover-start: #72d9ff;
|
|
--accent-hover-end: #26657e;
|
|
--gold: #ffc700;
|
|
--ok: #049b3d;
|
|
--ok-bright: #28c76f;
|
|
--err: #dc3545;
|
|
--err-dim: rgb(121 26 19);
|
|
--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
|
|
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 3rem 1.5rem 5rem;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--sans);
|
|
line-height: 1.5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.wrap {
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.eyebrow {
|
|
font-family: var(--sans);
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
|
|
h1 {
|
|
font-family: var(--sans);
|
|
font-weight: 700;
|
|
font-size: 2rem;
|
|
line-height: 1.2;
|
|
margin: 0 0 0.5rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--text-muted);
|
|
font-size: 0.95rem;
|
|
margin: 0 0 2rem;
|
|
max-width: 46ch;
|
|
}
|
|
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
padding: 1.75rem;
|
|
}
|
|
|
|
.pair-card + .pair-card {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
form { display: block; }
|
|
|
|
.duo {
|
|
position: relative;
|
|
margin-bottom: 1.25rem;
|
|
padding-bottom: 1.25rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.duo:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.remove-duo {
|
|
position: absolute;
|
|
top: -0.4rem;
|
|
right: -0.4rem;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
line-height: 1;
|
|
border: 1px solid var(--border-solid);
|
|
border-radius: 50%;
|
|
background: #2d2d2d;
|
|
color: var(--text-muted);
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
transition: background 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.duo:first-child .remove-duo { display: none; }
|
|
.remove-duo:hover { background: var(--err-dim); color: var(--text); }
|
|
|
|
.add-duo {
|
|
display: block;
|
|
width: 100%;
|
|
background: transparent;
|
|
border: 1px solid var(--border-solid);
|
|
color: var(--text);
|
|
padding: 0.6rem 1rem;
|
|
border-radius: 30px;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.add-duo:hover { background: #2d2d2d; }
|
|
|
|
.checkbox-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin: 1rem 0;
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-row input { cursor: pointer; accent-color: var(--accent); }
|
|
|
|
.dropzones {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.dropzones { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
.dropzone {
|
|
position: relative;
|
|
border: 1px dashed var(--border-solid);
|
|
border-radius: 8px;
|
|
padding: 1.25rem 1rem;
|
|
text-align: center;
|
|
transition: border-color 0.15s ease, background 0.15s ease;
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.dropzone:has(input:focus-visible) {
|
|
border-color: var(--accent);
|
|
background: var(--surface-focus);
|
|
}
|
|
|
|
.dropzone.has-file {
|
|
border-style: solid;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.dropzone .tag {
|
|
display: block;
|
|
font-family: var(--sans);
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.dropzone .hint {
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.dropzone .filename {
|
|
font-family: var(--mono);
|
|
font-size: 0.8rem;
|
|
color: var(--text);
|
|
word-break: break-all;
|
|
margin-top: 0.35rem;
|
|
display: none;
|
|
}
|
|
|
|
.dropzone input[type="file"] {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
button.run {
|
|
width: 100%;
|
|
margin-top: 1.5rem;
|
|
background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
|
|
color: #fff;
|
|
border: none;
|
|
padding: 0.8rem 1rem;
|
|
border-radius: 30px;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 16px rgba(38, 196, 255, 0.15);
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
button.run:hover { background: linear-gradient(135deg, var(--accent-hover-start), var(--accent-hover-end)); }
|
|
button.run:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
|
|
|
|
.error-banner {
|
|
background: rgba(220, 53, 69, 0.12);
|
|
border: 1px solid rgba(220, 53, 69, 0.4);
|
|
color: #f28b95;
|
|
padding: 0.7rem 0.9rem;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-family: var(--sans);
|
|
font-weight: 700;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.02em;
|
|
padding: 0.35rem 0.9rem;
|
|
border-radius: 30px;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.status.ok { background: rgba(4, 155, 61, 0.16); color: var(--ok-bright); }
|
|
.status.err { background: rgba(220, 53, 69, 0.14); color: #f28b95; }
|
|
|
|
.warning-banner {
|
|
background: rgba(255, 199, 0, 0.1);
|
|
border: 1px solid rgba(255, 199, 0, 0.35);
|
|
color: var(--gold);
|
|
padding: 0.7rem 0.9rem;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
pre.log {
|
|
background: #0a0a0a;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
font-family: var(--mono);
|
|
font-size: 0.76rem;
|
|
color: #c7c7c7;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 360px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-top: 1.25rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-download,
|
|
.btn-secondary {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
padding: 0.65rem 1.3rem;
|
|
border-radius: 30px;
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn-download {
|
|
background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
|
|
color: #fff;
|
|
}
|
|
.btn-download:hover { background: linear-gradient(135deg, var(--accent-hover-start), var(--accent-hover-end)); }
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border: 1px solid var(--border-solid);
|
|
}
|
|
.btn-secondary:hover { background: #2d2d2d; }
|
|
|
|
.footnote {
|
|
margin-top: 2rem;
|
|
color: var(--text-muted);
|
|
font-size: 0.78rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.footnote code {
|
|
font-family: var(--mono);
|
|
background: var(--surface-raised);
|
|
color: var(--accent);
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.version {
|
|
margin-top: 0.75rem;
|
|
color: var(--text-muted);
|
|
font-family: var(--mono);
|
|
font-size: 0.7rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.repo-links {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 0.6rem;
|
|
}
|
|
|
|
.repo-links a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
text-decoration: none;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.repo-links a:hover { color: var(--text); }
|
|
|
|
.repo-links .icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: flex;
|
|
}
|
|
|
|
.repo-links .icon img { width: 100%; height: 100%; }
|