Zum Hauptinhalt springen

Template C – Legacy-CSS-Checkliste

Pixel-Treue-Workflow für die öffentliche Template-C-Website (apps/center-website/components/templates/mec-template-c). Quellen sind die Live-MEC-Vorlage (mec-templates/site_templates/templates/template_c/*.tpl + mec-templates/sites/assets/css/template_c.css und template_c_teaser.css).

Ziel: Optisch identisch zum Original (Reihenfolge, Farben, Maße, Schriften, Hover/Active-States). Technisch sauber: eine Regel pro Block in apps/center-website/components/templates/mec-template-c/template-c-home.css unter [data-template="mec-template-c"], klare React-Komponenten, keine !important-Kaskaden außer wo das Original sie selbst nutzt.

Vorgehen pro Block​

  1. Original lesen: Welche Selektoren und Werte setzt template_c.css / template_c_teaser.css? Welche Stellen werden später überschrieben?
  2. Effektiver Endzustand: Eine Zeile pro Token (Farbe, Abstand, Schrift, Maß, Z-Index) – der Wert nach Zusammenführung der Layer.
  3. Eine saubere Regel: Unter [data-template="mec-template-c"] in der Template-eigenen template-c-home.css. Eigenname-Klassen mit Präfix mec-c-… für neue Bausteine (z. B. .mec-c-hero-arrow); Original-Klassen (.teaser_headline, .teaser-titel, .notice, .shop-slider.big) bleiben erhalten, damit der Stil greift.
  4. React-Markup: Original-Klassen aus dem Markup übernehmen, wenn die Stilregel sie braucht.
  5. Status nachziehen: Tabellenzeile aktualisieren oder neue Zeile ergänzen.

Status pro UI-Block​

BlockLegacy-Selektoren / DateiStatus
Hero-Carousel (#mainCarousel.carousel.slide)template_c.css .carousel, .carousel-inner, .carousel-inner > .item { transition: 0.6s ease-in-out left }, .carousel-inner > .active { display: block; left: 0 }, .carousel-indicators { position: absolute; top: 550; right: 0; z-index: 60 } (Z. 1347–1535)fertig – HeroCarousel (eigene Komponente) rendert das Original-Markup (<div id="mainCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active">…</div></div></div> + <ol class="carousel-indicators">). Auto-Advance 5 s wie Original data-interval="5000". Bewusste Abweichung: Pfeile (.mec-c-hero-arrow) sind Cockpit-Add-on – Slick-Original zeigt sie nicht.
.teaser_headline (Slide-Inhalt)template_c.css Z. 1619–1632 (width: 100%; padding-right: 250px, > div { width: 680px; z-index: 1 })fertig – Original-Klasse 1:1 übernommen. Hintergrundbild als CSS background:url(...) auf einem inneren .mec-c-hero-slide-bg-Layer (Bootstrap-Original setzte style="background:url(...)" direkt auf .teaser_headline).
.teaser-titel (großes Headline-Bild)template_c.css Z. 1602–1607, 1614 (z-index: 1; position: relative; right: 0; max-height: 365px (≤768))fertig – Original-Klasse, position: absolute; left: 0; top: 50%; max-height: 80%; max-width: 60%, mobile responsive.
.teaser-motiv (Person/Motiv rechts)template_c_teaser.css Z. 1–5 (position: absolute; top: 0; right: -20px), Mobile (Z. 25–53) – top: 10%; right: -6%; max-height: 270pxfertig – Original-Klasse, gleiche Tokens. next/image statt <img>, sonst pixelgleich.
.notice (Beschreibungs-Kasten, überlagert)template_c_teaser.css Z. 13–24 (background: gray; color: #fff; font-size: 14; font-weight: bold; line-height: 22; padding: 25 80 15 15; width: 505; position: absolute; top: 444; left: 33)fertig (Default) – Default-.notice mit Original-Tokens (Farbe #808080, Padding/Schrift identisch). Position bottom: 30px statt top: 444 (responsive auf alle Hero-Höhen). Pro-Slide noticeColor überschreibt den Hintergrund (z. B. #cc232d wie .notice.rot-zweizeilig). Bewusste Abweichung: Hunderte Per-Slide-Klassen (siehe unten) sind nicht reproduzierbar.
<ol class="carousel-indicators"> (Dots rechts unten)template_c.css Z. 1512–1535 (position: absolute; top: 550; right: 0; z-index: 60, li { width: 12; height: 12 }, .active { background-image: dot-black.png })fertig – <ol class="carousel-indicators mec-c-hero-indicators"> mit <li class="active"> für aktiven Slide. Schwarze Dots, Original-Maße 12×12 px. Position bottom: 16; right: 24 (Original top: 550 ist absolut auf einen 600 px Hero gerechnet → äquivalent).
.shop-slider.big (Logo-Streifen unter dem Hero, max 20 Logos)template_c.css Z. 2477–2628 (.shop-slider.big { height: 85px; box-shadow: 0 8 23 -2 #00000070 }, img { max-width: 120; max-height: 60 }, mobile &lt;768: filter: grayscale(0%))fertig – MecTemplateCShopStrip nutzt _mec-shared/footer-shop-logo-slider mit classPrefix="mec-c". Original-Klassen .shop-slider.big + .shop-slider-item-inner (über Präfix). 8/6/4/3 sichtbar (1280/960/480 px), Embla-Loop + Autoplay 2 s, Hover-Pause. Box-Shadow + max-Bildmaße 1:1 übernommen.
Featured-Shops-Karusselln/aCockpit-Add-on – nicht im Original. Bleibt erhalten als optionale Sektion (Tailwind-basiert, primärfarbige Akzente).
Highlights-Gridn/aCockpit-Add-on – nicht im Original. Bleibt erhalten als optionale Sektion. Steuerbar via mec-template-c.highlights.enabled.
Info-Sektionn/aCockpit-Add-on – nicht im Original. Bleibt erhalten als optionale Sektion (Tailwind, primärfarbige Akzente). Render nur wenn mec-template-c.info.text gesetzt ist.
Header (.newheader, Logo-Spalte 283 px links)template_c.css Z. 497–522, 815–823 (.newheader { z-index: 1; height: 100% }, .logo { width: 283; padding: 20 0; background: logo-new-bg.png }, .logo-shadow { width: 283; height: 22; background: logo-new-shadow.png })offen / bewusst pragmatisch – Original ist eine Bootstrap-3-Konstruktion mit .home_container_dummy { width: 428; min-width: 430 } (Spacer für die fixe Logo-Spalte links) + .home_container { position: absolute }. Wir verwenden bewusst einen modernen Header mit horizontaler Nav (./components/header.tsx); die Logo-Spalte links als Spacer wäre zu invasiv.
Footer (.column-1, .column-2, border-right: 1px #888)template_c.css Z. 921–1032 (min-height: 200px, drei Spalten .column-1, .column-2 { width: 33%; border-right }, font-size: 14; color: #7a7c7c)offen / bewusst pragmatisch – Aktueller Footer ist eigene Komponente. Original-Spaltenstruktur könnte in einer Folge-Iteration als zusätzliche CSS-Schicht abgebildet werden, falls nötig.

Bewusste Abweichungen vom Original​

ElementStatusBegründung
Per-Slide-Notice-Klassen (.notice.weihnachten, .facebook, .corona-cl2, …)nicht übernommentemplate_c_teaser.css enthält ~100 Klassen pro Kampagne mit individuellen top-/background-color-/width-Werten. In Cockpit-OS kommen Slides aus dem Dashboard – Slot-Klassen sind nicht verfügbar. Pro Slide kann noticeColor die Hintergrundfarbe steuern, der Default .notice (Z. 13–24) wird verwendet.
Slick-Slider → Emblatechnisch saubererSlick benötigt jQuery; Embla ist React-nativ und liefert dieselbe Loop/Autoplay-Funktion. Klassennamen .shop-slider.big, .shop-slider-item-inner werden weiterhin für Optik beibehalten (über _mec-shared-classPrefix="mec-c").
Bootstrap-Carousel → React-State-Carouseltechnisch saubererOriginal data-ride="carousel" braucht jQuery-Plugin. Unsere Komponente verwendet die gleichen DOM-Klassen (carousel, slide, carousel-inner, item active, carousel-indicators), sodass Style-Selektoren gleich bleiben. Auto-Advance 5 s wie Original (data-interval="5000").
Hero-Pfeile (.mec-c-hero-arrow)Cockpit-Add-onOriginal Slick zeigt keine Pfeile; nur Indicator-Dots. Wir bieten zusätzlich Pfeile für Tastatur-/Touch-Bedienung. Optisch dezent (rgba), nicht störend.
.notice top: bottom-30 statt top: 444pxbewusstOriginal-Position top: 444 setzt einen 600 px Hero voraus; mit unserer responsiven Hero-Höhe (600/540/420/380/300 px) wäre der Notice-Kasten verschoben. bottom: 30px hält ihn stabil unten.
.newheader + .home_container_dummy (Bootstrap-3-Layout)nicht übernommenWürde den ganzen Layout-Kontext (flex-Grid mit fixer Logo-Spalte 428 px links) auf eine Header-only-Konstruktion reduzieren – Refactor-Risiko zu hoch. Moderner Header ist UX-äquivalent.

Qualitätscheck vor Merge​

  • Optik der betroffenen Blöcke gegen template_c.css und Live-Site abgeglichen.
  • Kein neues !important ohne Begründung.
  • Markup verwendet die dokumentierten Klassen / IDs (keine duplizierten Inline-Styles für statische Werte).
  • Diese Datei aktualisiert (Status / neue Zeile).
  • npx tsc --noEmit im apps/center-website-Paket grün.

Siehe auch​

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /developer-guide/mec-template-c-legacy-css-checklist