/* ==================================================================== Tabellarischer Saalplan (.sm-grid) -------------------------------------------------------------------- Gemeinsames Aussehen fuer alle Seiten, die den tabellarischen Plan zeigen: Shop (Basket/event-fe.html), Verkauf im Backend (Basket/event.html), Kasse (Boxoffice/event.html) und die mobile Fassung (Basket/event-mobile.html). Herkunft: aus dem Zweig redesign (shop.css, .sm-grid) uebernommen. Dort stehen die Werte als Variablen --accent, --line und so fort; die gibt es hier nicht, sie sind deshalb aufgeloest. Vorher zeichneten checkbox.png, checkbox-checked.png, checkbox-booked.png und transparentpixel.gif den Plan. Jetzt macht das CSS das: der Haken ist ein gedrehter Rahmen aus zwei Kanten. Zwei Variablen steuern alles: --s Kantenlaenge eines Platzes. Eckenradius, Schriftgroesse und Abstaende rechnen sich daraus. --accent Farbe des gewaehlten Platzes. Kommt aus der Bestuhlung (seating.color_active) und wird von der jeweiligen Seite am Behaelter gesetzt:
Der Wert hier ist nur die Rueckfallebene. Die Farbe des einzelnen Platzes kommt als --c am Platz selbst, weil sie je Platzkategorie verschieden ist. ==================================================================== */ .seatmap { --s: 30px; --accent: #a00000; margin-top: 0 } /* ---------- Rahmen zum Schieben ---------- Nur dort gesetzt, wo der Plan gescrollt oder gezoomt werden kann. box-sizing ausdruecklich: im Shop setzt w3.css global border-box, im Backend ist w3.css auskommentiert und es gilt content-box. Dort kamen Polster und Rahmen zu den 100 % hinzu, der Kasten war 26px breiter als sein Elternelement und ragte rechts heraus. Diese Datei soll nicht davon abhaengen, was die Seite sonst noch laedt. */ .sm-scroll { box-sizing: border-box; overflow: auto; width: 100%; max-width: 100%; max-height: 75vh; border: 1px solid #e6e6e6; border-radius: 6px; background: #fff; padding: 12px; -webkit-overflow-scrolling: touch; } .sm-scroll.sm-pan { cursor: grab } .sm-scroll.sm-panning { cursor: grabbing; user-select: none; -webkit-user-select: none } /* ---------- Gitter ---------- */ .sm-grid { box-sizing: border-box; border-collapse: separate; border-spacing: calc(var(--s) * .14); margin: 0 auto } .sm-grid th, .sm-grid td { box-sizing: border-box } .sm-grid th { font-size: 11px; font-weight: 600; line-height: 1; color: #555; text-align: center; padding: 0; white-space: nowrap; -webkit-hyphens: none; hyphens: none; } /* Die Reihenbeschriftung bleibt beim Schieben stehen. Sie klebt buendig an der Innenkante des Rahmens - in redesign steht dort -12px, um das Polster auszugleichen; hier ragte sie damit aus dem Rahmen heraus. */ .sm-grid .sm-row { padding: 0 4px; position: sticky; z-index: 2; background: #fff } .sm-grid tr > .sm-row:first-child { left: 0 } .sm-grid tr > .sm-row:last-child { right: 0 } .sm-grid td { width: var(--s); height: var(--s); padding: 0; text-align: center; vertical-align: middle } /* Leere Zellen halten nur den Platz. Eine Spalte, die durchgehend leer ist - ein Gang - schrumpft dadurch; Luecken mitten in einer Reihe nicht, dort bestimmt der breiteste Platz der Spalte die Breite. */ .sm-grid td.sm-gap { width: calc(var(--s) * .45) } .sm-grid .sm-stage { height: calc(var(--s) * 1.1); background: #f7f7f7; border: 1.5px solid #e6e6e6; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: #555; } /* ---------- Der einzelne Platz ---------- */ .sm-seat { box-sizing: border-box; position: relative; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .28) calc(var(--s) * .28) calc(var(--s) * .12) calc(var(--s) * .12); background: var(--c, #ccc); border: 1.5px solid rgba(0,0,0,.18); font-size: calc(var(--s) * .38); font-weight: 600; line-height: 1; color: rgba(0,0,0,.55); margin: 0; } .sm-pick { cursor: pointer; transition: transform .08s } .sm-pick:hover { transform: scale(1.1); z-index: 1 } /* Das Kaestchen liegt unsichtbar ueber dem Platz. Das Umschalten macht damit der Browser, kein Skript. */ .sm-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer } /* Der Haken als Rahmen zweier Kanten, gedreht - kein Bild mehr. is-on setzt das Skript; :has() koennen aeltere Browser noch nicht. */ .sm-pick:has(input:checked), .sm-pick.is-on { background: #fff; border: 3px solid var(--accent) } .sm-pick:has(input:checked)::after, .sm-pick.is-on::after { content: ""; width: 34%; height: 58%; border: solid var(--accent); border-width: 0 3px 3px 0; transform: translateY(-12%) rotate(45deg); } /* ---------- Zustaende ---------- */ .sm-taken { background: repeating-linear-gradient(135deg,#cfd3cf 0 3px,#e7e9e6 3px 6px); border-color: #c4c8c4 } .sm-na { opacity: .45 } .sm-disabled { background: #e7e9e6 } .sm-area { cursor: help } /* Ein belegter Platz, der zur eigenen Buchung gehoert, traegt ein Zeichen - im Backend und an der Kasse ein x. */ .sm-seat.sm-mine { background: #fff; border: 3px solid var(--accent); color: var(--accent); font-weight: 700 } /* Eine Kategorie hervorheben: der Rest tritt zurueck. */ .seatmap.filtering .sm-pick:not(.hit) { opacity: .18 } @media screen and (max-width: 560px) { .seatmap { --s: 26px } } /* ---------- Zoomleiste ---------- */ .sm-tools { text-align: right; margin-top: 8px } .sm-zoom { display: inline-flex; border: 1px solid #e6e6e6; border-radius: 7px; overflow: hidden; background: #f7f7f7; } .sm-zoom button { box-sizing: border-box; min-width: 38px; height: 30px; padding: 0 10px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .sm-zoom button + button { border-left: 1px solid #e6e6e6 } .sm-zoom button:hover { background: #ededed } .sm-zoom button[disabled] { opacity: .4; cursor: default; background: none }