mregosar
dc601a32fe
Ein Match pro Folie, groß und aus der Ferne lesbar: Teams, Serienstand, aktuelle Map mit Rundenstand und Seiten, Maps der Serie, im Veto wer dran ist. Zum Schluss eine Folie mit Lobbys und Ergebnissen. Schaltet automatisch weiter (?sekunden=), Vollbild per Klick oder F, Pfeiltasten und Leertaste. In der Kopfzeile verlinkt.
80 lines
5.2 KiB
CSS
80 lines
5.2 KiB
CSS
/* ---------- Beamer-Diashow (1920×1080, skaliert): ein Match pro Folie, groß und aus der Ferne lesbar ---------- */
|
||
.bm-root {
|
||
position: relative; width: 100%; height: 100%; overflow: hidden; cursor: pointer;
|
||
display: grid; grid-template-rows: 104px 1fr 56px; padding: 0 72px;
|
||
color: var(--text); font-family: var(--body);
|
||
background:
|
||
radial-gradient(900px 600px at 0% 40%, rgba(52, 74, 153, .3), transparent 70%),
|
||
radial-gradient(900px 600px at 100% 40%, rgba(167, 42, 28, .28), transparent 70%),
|
||
#000;
|
||
}
|
||
.bm-root > :not(.bm-art) { position: relative; z-index: 1; }
|
||
.bm-art { position: absolute; inset: 0; opacity: .32; }
|
||
.bm-art::after { background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .92) 70%); }
|
||
|
||
.bm-main { display: grid; min-height: 0; animation: bm-in .6s ease both; }
|
||
@keyframes bm-in { from { opacity: 0; transform: translateY(18px); } }
|
||
|
||
.bm-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; min-height: 0; padding: 20px 0; }
|
||
.bm-meta { display: flex; align-items: center; gap: 22px; font: 600 32px var(--display); color: var(--muted); }
|
||
.bm-meta .so-badge { font-size: 30px; padding: 6px 18px; }
|
||
|
||
.bm-hero { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 56px; width: 100%; }
|
||
.bm-team { margin: 0; font: 700 128px/1 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
|
||
.bm-team.a { color: var(--team-a); text-align: right; }
|
||
.bm-team.b { color: var(--team-b); }
|
||
.bm-series { display: flex; flex-direction: column; align-items: center; font: 700 130px/1 var(--display); font-variant-numeric: tabular-nums; }
|
||
.bm-series span { display: flex; align-items: center; }
|
||
.bm-series i { font-style: normal; color: var(--muted); padding: 0 14px; }
|
||
.bm-series small { font: 600 26px var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
|
||
.bm-vs { font-size: 90px; }
|
||
|
||
.bm-map { display: flex; align-items: baseline; gap: 26px; }
|
||
.bm-map strong { font: 700 64px var(--display); }
|
||
.bm-map span { font: 600 38px var(--display); color: var(--muted); }
|
||
|
||
.bm-score { display: flex; align-items: center; gap: 34px; font: 700 200px/1 var(--display); font-variant-numeric: tabular-nums; }
|
||
.bm-score i { font-style: normal; color: var(--muted); }
|
||
.bm-score b.a { color: var(--team-a); }
|
||
.bm-score b.b { color: var(--team-b); }
|
||
.bm-score b.won { text-shadow: 0 0 40px currentColor; }
|
||
|
||
.bm-maps { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; justify-content: center; }
|
||
.bm-maps li {
|
||
position: relative; overflow: hidden; width: 250px; height: 104px; border-radius: 8px; padding: 12px 16px;
|
||
display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; border: 2px solid var(--line-strong);
|
||
}
|
||
.bm-maps li .map-art::after { background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .85)); }
|
||
.bm-maps li > span:not(.map-art), .bm-maps li b { position: relative; z-index: 1; font: 700 28px var(--display); text-shadow: 0 2px 8px #000; }
|
||
.bm-maps li.is-pending { filter: grayscale(.8) brightness(.6); }
|
||
.bm-maps li.is-current { border-color: var(--brand-red); box-shadow: 0 0 0 3px var(--brand-red); }
|
||
|
||
.bm-note { font: 600 44px var(--display); color: var(--muted); margin: 0; }
|
||
.bm-turn { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; font: 600 52px var(--display); }
|
||
.bm-turn .a { color: var(--team-a); }
|
||
.bm-turn .b { color: var(--team-b); }
|
||
.bm-turn small { font-size: 28px; color: var(--muted); }
|
||
.bm-vmaps { width: 100%; height: 330px; }
|
||
.bm-vmaps .so-vmap-name { font-size: 34px; }
|
||
|
||
.bm-summary { display: flex; flex-direction: column; justify-content: center; gap: 40px; min-height: 0; }
|
||
.bm-idle { margin: 0; text-align: center; font: 700 80px var(--display); }
|
||
.bm-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
|
||
.bm-columns h3 { margin: 0 0 18px; font: 700 40px var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; border-bottom: 3px solid var(--brand-red); padding-bottom: 10px; }
|
||
.bm-columns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
|
||
.bm-columns li { display: flex; align-items: baseline; gap: 18px; font: 700 44px var(--display); }
|
||
.bm-columns li .a { color: var(--team-a); }
|
||
.bm-columns li .b { color: var(--team-b); }
|
||
.bm-columns li i { font-style: normal; color: var(--muted); font-size: 32px; }
|
||
.bm-columns li b { font-variant-numeric: tabular-nums; }
|
||
.bm-columns li .won { text-decoration: underline; text-underline-offset: 8px; }
|
||
.bm-columns li small { margin-left: auto; font: 600 28px var(--display); color: var(--muted); }
|
||
.bm-columns .so-none { font-size: 32px; }
|
||
|
||
.bm-bottom { position: relative; display: flex; align-items: center; justify-content: center; }
|
||
.bm-dots { display: flex; gap: 12px; }
|
||
.bm-dots span { width: 14px; height: 14px; border-radius: 50%; background: var(--line-strong); }
|
||
.bm-dots span.on { background: var(--brand-red); }
|
||
.bm-progress { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: var(--brand-red); transform-origin: left; animation: bm-progress linear both; }
|
||
@keyframes bm-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
|