|
|
| (7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| <!-- Vorlage:KLAPP | | <includeonly>{| class="mw-collapsible mw-collapsed" style="width:100%; border:2px solid #000; border-radius:12px; margin:.5rem 0;" |
| Nutzung (einfachste Form):
| | |- |
| {{KLAPP|Titel=Dein Abschnitt}}
| | ! style="text-align:center; font-weight:700; padding:.6rem 0; border:0; background:#fff;" | <span class="mw-collapsible-toggle" role="button">'''Ausklappen'''</span> |
| … TEXT, BILDER, Wikitext …
| | |- |
| </details>
| | | class="mw-collapsible-content" style="border:0; padding:.8rem 1rem;" |</includeonly> |
| | | <noinclude>Start der einklappbaren Box. Ende mit {{KLAPP-ENDE}}.</noinclude> |
| Optionale Parameter:
| |
| |Titel=… -> Text in der Kopfzeile
| |
| |start=auf/zu -> initial offen (auf) oder zu (Standard: zu)
| |
| -->
| |
| | |
| <!-- Inline-Styles nur für .klapp-Namensraum; keine Einträge in Common.css nötig -->
| |
| <style>
| |
| /* Container (direkt das <details>-Element) */
| |
| details.klapp {
| |
| border: 1px solid #e2e8f0;
| |
| border-radius: 12px;
| |
| background: #fff;
| |
| box-shadow: 0 1px 2px rgba(0,0,0,.06);
| |
| margin: .75rem 0;
| |
| overflow: hidden; /* runde Ecken auch für den Inhalt */
| |
| }
| |
| | |
| /* Kopfzeile */
| |
| details.klapp > summary.klapp-summary {
| |
| list-style: none; /* verhindert Standard-Dreieck in manchen Skins/Browsern */
| |
| display: flex;
| |
| align-items: center;
| |
| gap: .5rem;
| |
| padding: .75rem 1rem;
| |
| font-weight: 700;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
| |
| border-bottom: 1px solid #e2e8f0;
| |
| }
| |
| | |
| /* eigenes Pfeil-Icon */
| |
| details.klapp > summary.klapp-summary .klapp-arrow {
| |
| display: inline-block;
| |
| transform: rotate(0deg);
| |
| transition: transform .2s ease;
| |
| font-size: 1.1em;
| |
| line-height: 1;
| |
| margin-right: .1rem;
| |
| /* typografischer Pfeil, wirkt „schlanker“ als > */
| |
| content: "›";
| |
| }
| |
| | |
| /* Pfeil drehen, wenn geöffnet */
| |
| details.klapp[open] > summary.klapp-summary .klapp-arrow {
| |
| transform: rotate(90deg);
| |
| }
| |
| | |
| /* Inhalt */
| |
| details.klapp > .klapp-content {
| |
| padding: 1rem 1.25rem;
| |
| }
| |
| | |
| /* sanftes Einblenden (nur bei unterstützten Browsern sichtbar) */
| |
| details.klapp[open] > .klapp-content {
| |
| animation: klappFade .18s ease;
| |
| }
| |
| @keyframes klappFade {
| |
| from { opacity: 0; transform: translateY(-2px); }
| |
| to { opacity: 1; transform: translateY(0); }
| |
| }
| |
| | |
| /* optionaler Dark-Mode über Systempräferenz */
| |
| @media (prefers-color-scheme: dark) {
| |
| details.klapp { background:#0b0f16; border-color:#1f2937; box-shadow: 0 1px 2px rgba(0,0,0,.45); }
| |
| details.klapp > summary.klapp-summary { background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%); border-bottom-color:#1f2937; color:#e5e7eb; }
| |
| details.klapp > .klapp-content { color:#e5e7eb; }
| |
| }
| |
| </style>
| |
| | |
| <details class="klapp" {{#ifeq:{{{start|zu}}}|auf|open}}>
| |
| <summary class="klapp-summary">
| |
| <span class="klapp-arrow">›</span>
| |
| <span class="klapp-title">'''{{{Titel|Abschnitt}}}'''</span>
| |
| </summary>
| |
| <div class="klapp-content">
| |
Start der einklappbaren Box. Ende mit |}
.