mregosar/Cs2-Mapveto
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Größere Map-Kacheln und Ban/Pick-Leiste

Browse Source 
Ab dem Veto bekommt das Map-Board die volle Breite (4 Spalten), die
Teamkarten rücken darunter. Die Schrittleiste zeigt pro Schritt das Team.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
SPP UserandClaude Opus 5.5 committed 2026-10-25 17:45:41 +01:00
1 parent 8a0a1309a2
commit 470b12f232
3 files changed
+31 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/styles.css
+29 -16
View File
@@ -167,8 +167,8 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
.choice-card.is-off { opacity: .45; cursor: not-allowed; }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.flow-preview { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 12px 0 0; }
.flow-step { font-size: .75rem; padding: 3px 8px; border-radius: 3px; background: var(--surface-2); display: flex; flex-direction: column; line-height: 1.2; }
.flow-step small { color: var(--muted); font-size: .6875rem; }
.flow-step { font-size: .875rem; padding: 6px 12px; border-radius: 3px; background: var(--surface-2); display: flex; flex-direction: column; line-height: 1.2; }
.flow-step small { color: var(--muted); font-size: .75rem; }
.flow-ban { box-shadow: inset 0 -2px 0 var(--error); }
.flow-pick { box-shadow: inset 0 -2px 0 var(--ok); }
.flow-decider { box-shadow: inset 0 -2px 0 var(--text); }
@@ -184,6 +184,9 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
.match-facts dd { margin: 0; font-weight: 600; }
.match-grid { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 280px); gap: 20px; align-items: start; }
/* Ab dem Veto bekommt das Map-Board die volle Breite, die Teamkarten stehen darunter nebeneinander */
.match-grid.stage-wide { grid-template-columns: 1fr 1fr; }
.match-grid.stage-wide .stage { grid-column: 1 / -1; grid-row: 1; }
.stage { min-width: 0; }
.stage-note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.stage-note .btn { margin: 8px 0 8px; }
@@ -234,11 +237,12 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
.turn.is-you .turn-hint { color: var(--text); font-weight: 600; }
.turn-done { font: 600 1.375rem var(--display); --team: var(--ok); }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.map-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.map-tile {
--by: var(--line-strong);
--chamfer: 20px;
position: relative; display: flex; flex-direction: column; justify-content: flex-end; text-align: left;
aspect-ratio: 4 / 3; padding: 12px; border: 0; color: var(--text); font: inherit; cursor: default;
aspect-ratio: 16 / 10; padding: 16px 18px; border: 0; color: var(--text); font: inherit; cursor: default;
background: var(--surface-2);
clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
transition: transform .15s, filter .25s;
@@ -259,8 +263,8 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
background: linear-gradient(180deg, rgba(var(--bg-rgb), .05) 30%, rgba(var(--bg-rgb), .88) 100%);
}
.map-name, .map-status { position: relative; z-index: 1; }
.map-name { font: 700 1.625rem/1 var(--display); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.map-status { font-size: .8125rem; color: color-mix(in srgb, var(--text) 75%, transparent); margin-top: 4px; }
.map-name { font: 700 clamp(1.625rem, 2.6vw, 2.25rem)/1 var(--display); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.map-status { font-size: .9375rem; color: color-mix(in srgb, var(--text) 75%, transparent); margin-top: 4px; }
.map-tile:not(:disabled) { cursor: pointer; }
.map-tile:not(:disabled):hover { transform: translateY(-2px); }
.map-tile:focus-visible { outline: none; }
@@ -270,13 +274,13 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
.map-tile.status-banned { filter: grayscale(.9) brightness(.6); }
.map-tile.status-banned::after {
content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(to top right, transparent calc(50% - 3px), var(--by) calc(50% - 3px), var(--by) calc(50% + 3px), transparent calc(50% + 3px));
background: linear-gradient(to top right, transparent calc(50% - 4px), var(--by) calc(50% - 4px), var(--by) calc(50% + 4px), transparent calc(50% + 4px));
}
.map-tile.status-banned .map-status { color: var(--text); }
/* Gewählt, Entscheidungsmap, Auswahl: Rahmen als Overlay über dem Map-Bild */
.map-tile.status-picked::after, .map-tile.status-decider::after, .map-tile.is-selected::after, .map-tile.is-side::after {
content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
box-shadow: inset 0 0 0 3px var(--frame, var(--by));
box-shadow: inset 0 0 0 4px var(--frame, var(--by));
}
.map-tile.status-picked .map-status { color: var(--by); font-weight: 600; }
.map-tile.status-decider { --by: var(--text); }
@@ -285,7 +289,7 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
.map-tile.is-selected.sel-ban { --frame: var(--error); }
.map-tile.is-selected.sel-pick { --frame: var(--ok); }
.map-tile.is-side::after { animation: side-pulse 1.6s ease-in-out infinite; }
@keyframes side-pulse { 50% { box-shadow: inset 0 0 0 3px var(--pending); } }
@keyframes side-pulse { 50% { box-shadow: inset 0 0 0 4px var(--pending); } }
.veto-confirm .btn { width: 100%; }
.side-choice { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
@@ -309,12 +313,14 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
.side-option:disabled { opacity: .5; cursor: not-allowed; }
.side-icon { flex: none; }
.step-track { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; }
.step-track { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.step {
--team: var(--muted);
font-size: .75rem; padding: 4px 8px; border-radius: 3px; background: var(--surface);
border-bottom: 2px solid color-mix(in srgb, var(--team) 45%, transparent); color: var(--muted);
display: flex; flex-direction: column; min-width: 92px; line-height: 1.2;
font: 600 1rem var(--display); padding: 8px 14px; border-radius: 4px; background: var(--surface);
border-bottom: 3px solid color-mix(in srgb, var(--team) 45%, transparent); color: var(--muted);
}
.step small { font: 500 .8125rem var(--body); opacity: .85; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-A { --team: var(--team-a); }
.step-B { --team: var(--team-b); }
.step.done { color: var(--text); background: var(--surface-2); border-bottom-color: var(--team); }
@@ -326,9 +332,10 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
.veto-history li.hist-A { border-left-color: var(--team-a); }
.veto-history li.hist-B { border-left-color: var(--team-b); }
.veto-history time, .event-log time { color: var(--muted); font-size: .8125rem; margin-right: 8px; font-variant-numeric: tabular-nums; }
.veto-compact .map-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.veto-compact .map-tile { aspect-ratio: 16 / 9; padding: 8px; --chamfer: 10px; }
.veto-compact .map-name { font-size: 1.125rem; }
.veto-compact .map-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.veto-compact .map-tile { aspect-ratio: 16 / 9; padding: 10px 12px; --chamfer: 14px; }
.veto-compact .map-name { font-size: 1.375rem; }
.veto-compact .map-status { font-size: .8125rem; }
/* ---------- Serie ---------- */
.series { margin-bottom: 20px; }
@@ -404,6 +411,7 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
@media (max-width: 1040px) {
.match-grid { grid-template-columns: 1fr 1fr; }
.stage { grid-column: 1 / -1; grid-row: 1; }
.map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.match-grid { grid-template-columns: 1fr; }
@@ -413,7 +421,12 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
.brand-app { font-size: 1rem; padding-left: 10px; }
.create-teams { grid-template-columns: 1fr; }
.vs.big { justify-self: center; }
.map-grid { grid-template-columns: repeat(2, 1fr); }
.map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.map-tile { --chamfer: 14px; padding: 10px 12px; }
.map-name { font-size: 1.375rem; }
.map-status { font-size: .8125rem; }
.match-grid.stage-wide { grid-template-columns: 1fr; }
.step { min-width: 0; padding: 6px 10px; font-size: .9375rem; }
.side-options { grid-template-columns: 1fr; }
.series-item { grid-template-columns: 1fr auto; }
.series-no { grid-column: 1 / -1; }