Widget:Details: Unterschied zwischen den Versionen

Aus FürthWiki

Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Markierungen: Mobile Bearbeitung Mobile Web-Bearbeitung
 
(16 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<style>
<style>
details div {
details div {
     border-left: 2px solid #000;
     border-left: 1px solid #000;
     border-right: 2px solid #000;
     border-right: 1px solid #000;
     border-bottom: 2px solid #000;
     border-bottom: 1px solid #000;
     padding: 1.5em;
     padding: 1.5em;
}
}
Zeile 12: Zeile 12:


details + details {
details + details {
     margin-top: .5rem;
     margin-top: .5em;
}
}


Zeile 24: Zeile 24:


summary {
summary {
     border: 2px solid #000;
     border: .5px solid #000;
     padding: .75em 1em;
     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 <!--{if $open == 1}open{/if}-->
<details <!--{if $open=="1"}-->open<!--{/if}-->>
   <summary><!--{$title}--></summary>
   <summary><b><!--{$title}--></b></summary>
   <div><!--{$content}--></div>
   <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>