Widget:Details: Unterschied zwischen den Versionen
Aus FürthWiki
(Die Seite wurde neu angelegt: „<style> details div { border-left: 2px solid #000; border-right: 2px solid #000; border-bottom: 2px solid #000; padding: 1.5em; } details div…“) |
Keine Bearbeitungszusammenfassung Markierungen: Mobile Bearbeitung Mobile Web-Bearbeitung |
||
| (19 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
<style> | <style> | ||
details div { | details div { | ||
border-left: | border-left: 1px solid #000; | ||
border-right: | border-right: 1px solid #000; | ||
border-bottom: | border-bottom: 1px solid #000; | ||
padding: 1.5em; | padding: 1.5em; | ||
} | } | ||
| Zeile 12: | Zeile 12: | ||
details + details { | details + details { | ||
margin-top: . | margin-top: .5em; | ||
} | } | ||
| Zeile 24: | Zeile 24: | ||
summary { | summary { | ||
border: | border: .5px solid #000; | ||
padding: . | padding: .75rem 1em; | ||
cursor: pointer; | cursor: pointer; | ||
position: relative; | position: relative; | ||
| Zeile 36: | Zeile 36: | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
left: .75rem; | left: .75rem; | ||
content: " | content: "+"; | ||
width: 1.75rem; | width: 1.75rem; | ||
height: 1.75rem; | height: 1.75rem; | ||
| Zeile 52: | Zeile 52: | ||
details[open] summary:before { | details[open] summary:before { | ||
content: " | content: "-"; | ||
} | } | ||
| Zeile 59: | Zeile 59: | ||
} | } | ||
</style> | </style> | ||
<details open> | <details <!--{if $open=="1"}-->open<!--{/if}-->> | ||
<summary><!--{$title}--></summary> | <summary><b><!--{$title}--></b></summary> | ||
<!--{$content}--> | <div><!--{$content}--></div> | ||
</details> | </details> | ||
Aktuelle Version vom 3. Januar 2024, 14:26 Uhr
<style> details div {
border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; padding: 1.5em;
}
details div > * + * {
margin-top: 1.5em;
}
details + details {
margin-top: .5em;
}
summary {
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
summary {
border: .5px solid #000; padding: .75rem 1em; cursor: pointer; position: relative; padding-left: calc(1.75rem + .75rem + .75rem);
}
summary:before {
position: absolute; top: 50%; transform: translateY(-50%); left: .75rem; content: "+"; width: 1.75rem; height: 1.75rem; background-color: #000; color: #FFF; display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0;
}
details[open] summary {
background-color: #eee;
}
details[open] summary:before {
content: "-";
}
summary:hover {
background-color: #eee;
} </style> <details open>
<summary></summary>
</details>
