Workers P2: Seite /hustler (lazy), Menü „Hustler“ statt Leads, Stil und Schrift Pixelify Sans
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed
1 parent
a6f1b0c56d
commit
7ddd60e59b
10 files changed
+382
-7
No files matched your search
@@ -0,0 +1,190 @@
|
||||
/* Hustler (Workers P2): Hochhaus, Kennzahlen, Worker-Karte, Liste, Einstellungen. Weißes Theme: Haarlinien statt Karten, nur Tokens aus global.css. */
|
||||
|
||||
/* Schrift selbst gehostet (SIL OFL 1.1, Lizenztext liegt daneben), nur der Latin-Schnitt mit allen Gewichten */
|
||||
@font-face {
|
||||
font-family: "Pixelify Sans";
|
||||
src: url("/fonts/PixelifySans-Variable.woff2") format("woff2");
|
||||
font-weight: 400 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.wk-page .page-head h1 { font-family: "Pixelify Sans", var(--font); letter-spacing: 0; }
|
||||
|
||||
/* ---------- Kopfzeile mit Pausenschalter ---------- */
|
||||
|
||||
.wk-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.wk-status { color: var(--text-2); }
|
||||
|
||||
/* ---------- Kennzahlen ---------- */
|
||||
|
||||
.wk-kpis.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 16px 32px;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
.wk-kpis .stat { min-width: 0; font-variant-numeric: tabular-nums; }
|
||||
.wk-kpis .stat .sub { min-height: 16px; }
|
||||
|
||||
/* ---------- Hochhaus und Seitenspalte ---------- */
|
||||
|
||||
.wk-main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
gap: 32px;
|
||||
align-items: start;
|
||||
}
|
||||
.wk-side {
|
||||
min-width: 0;
|
||||
padding-left: 24px;
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.wk-stage { position: relative; min-width: 0; }
|
||||
.wk-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 5 / 4;
|
||||
image-rendering: pixelated;
|
||||
cursor: pointer;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.wk-zoom {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.wk-zoom .btn { min-width: 32px; }
|
||||
|
||||
/* ---------- Worker-Karte ---------- */
|
||||
|
||||
.wk-card { position: relative; padding-bottom: 20px; }
|
||||
.wk-card > .btn-quiet { position: absolute; top: 0; right: 0; }
|
||||
.wk-card h3 { margin: 20px 0 8px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text-2); }
|
||||
.wk-portrait {
|
||||
display: block;
|
||||
width: 72px;
|
||||
height: 96px;
|
||||
margin-bottom: 8px;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
.wk-name { font-family: "Pixelify Sans", var(--font); font-size: 20px; line-height: 26px; font-weight: 600; overflow-wrap: anywhere; }
|
||||
.wk-role { color: var(--text-2); margin-bottom: 8px; }
|
||||
.wk-hint { color: var(--text-2); font-size: 13px; }
|
||||
|
||||
.wk-chip {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
padding: 0 6px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
background: var(--grey-bg);
|
||||
color: var(--grey-fg);
|
||||
}
|
||||
.wk-chip-opus { background: var(--orange-bg); color: var(--orange-fg); }
|
||||
.wk-chip-sonnet { background: var(--blue-bg); color: var(--blue-fg); }
|
||||
.wk-chip-haiku { background: var(--green-bg); color: var(--green-fg); }
|
||||
.wk-chip-overseer { background: var(--violet-bg); color: var(--violet-fg); }
|
||||
|
||||
.wk-facts, .wk-counters dl { margin: 12px 0 0; }
|
||||
.wk-facts > div, .wk-counters dl > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 6px 0;
|
||||
border-top: 1px solid var(--line);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.wk-facts dt, .wk-counters dt { color: var(--text-2); flex: none; }
|
||||
.wk-facts dd, .wk-counters dd { text-align: right; min-width: 0; overflow-wrap: anywhere; }
|
||||
|
||||
.wk-trace { list-style: none; margin: 0; padding: 0; }
|
||||
.wk-trace li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
|
||||
.wk-trace-time { color: var(--text-3); font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* ---------- Liste aller Worker ---------- */
|
||||
|
||||
.wk-list { margin-top: 8px; border-top: 1px solid var(--line); }
|
||||
.wk-list ul { list-style: none; margin: 0; padding: 0; }
|
||||
.wk-list-floor { margin: 16px 0 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); }
|
||||
.wk-list button {
|
||||
display: grid;
|
||||
grid-template-columns: 8px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius);
|
||||
text-align: left;
|
||||
transition: background-color 0.12s;
|
||||
}
|
||||
.wk-list button:hover { background: var(--bg-hover); }
|
||||
.wk-list button[aria-pressed="true"] { background: var(--accent-soft); font-weight: 600; }
|
||||
.wk-list button > span:last-child { color: var(--text-2); font-size: 12px; font-weight: 400; }
|
||||
.wk-list button:focus-visible { outline-offset: -2px; }
|
||||
|
||||
.wk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
|
||||
.wk-dot-arbeitet { background: var(--green-fg); }
|
||||
.wk-dot-wartet { background: var(--nav-dot); }
|
||||
.wk-dot-leerlauf { background: var(--text-3); }
|
||||
.wk-dot-grau { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
|
||||
.wk-dot-fehler { background: var(--danger); }
|
||||
|
||||
/* ---------- Einstellungen (Dialog) ---------- */
|
||||
|
||||
.wk-set-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.wk-set-title { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text-2); }
|
||||
.wk-set-group .muted { font-size: 13px; }
|
||||
|
||||
.wk-halt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid var(--danger);
|
||||
border-bottom: 1px solid var(--danger);
|
||||
}
|
||||
.wk-halt .wk-set-title { color: var(--red-fg); }
|
||||
|
||||
/* ---------- Schmale Bildschirme ---------- */
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.wk-kpis.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.wk-main { grid-template-columns: minmax(0, 1fr); gap: 24px; }
|
||||
.wk-side { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--line); }
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.wk-kpis.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
|
||||
.wk-zoom { gap: 6px; }
|
||||
.wk-zoom .btn { min-width: 36px; min-height: 36px; }
|
||||
.wk-toolbar .btn { min-height: 36px; }
|
||||
}
|
||||
|
||||
/* ---------- Weniger Bewegung ---------- */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wk-list button, .wk-zoom .btn, .wk-toolbar .btn { transition: none; }
|
||||
}
|
||||
Reference in new issue
Block a user