|
|
| Zeile 1: |
Zeile 1: |
| <!-- Vorlage:KLAPP | | <!-- Vorlage:KLAPP |
| Nutzung (einfachste Form): | | Nutzung: |
| {{KLAPP|Titel=Dein Abschnitt}} | | {{KLAPP}} |
| … TEXT, BILDER, Wikitext … | | … TEXT, BILDER, Wikitext … |
| </details> | | </details> |
|
| |
|
| Optionale Parameter: | | Optionale Parameter: |
| |Titel=… -> Text in der Kopfzeile
| |
| |start=auf/zu -> initial offen (auf) oder zu (Standard: zu) | | |start=auf/zu -> initial offen (auf) oder zu (Standard: zu) |
| | |label=… -> Button-Text (Standard: Ansehen >>) |
| --> | | --> |
|
| |
|
| <!-- Inline-Styles nur für .klapp-Namensraum; keine Einträge in Common.css nötig --> | | <details {{#ifeq:{{{start|zu}}}|auf|open}}> |
| <style>
| | <summary style="text-align:center; font-weight:700; padding:.6rem 0; cursor:pointer;"> |
| /* Container (direkt das <details>-Element) */
| | {{{label|DETAILS >>}}} |
| 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> | | </summary> |
| <div class="klapp-content"> | | <div style="padding:.5rem 0;"> |
<details >
<summary style="text-align:center; font-weight:700; padding:.6rem 0; cursor:pointer;">
DETAILS >>
</summary>