Участник: TFMB: различия между версиями
Материал из Vanilla Station
TFMB (обсуждение | вклад) Нет описания правки |
TFMB (обсуждение | вклад) Нет описания правки |
||
| (не показано 14 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
{{h3 | {{#css: | ||
.colapsibletext{ | |||
|2={{h3}} | min-width: 100%; | ||
| | max-height: 10000px; | ||
transition: max-height 0.5s; | |||
transition-delay: 0.1s; | |||
order: 4; | |||
overflow: hidden; | |||
} | |||
.colapsibletext:not(.mw-collapsed) ~ .colapserbtn{ | |||
width:100%; | |||
} | |||
.mw-headline:before{order:1;} | |||
.mw-headline:after{order:3;} | |||
.mw-headline:before,.mw-headline:after{ | |||
content: ""; | |||
content: ""; | |||
height: 1px; | |||
flex-grow: 1; | |||
border-radius: 12px; | |||
background: #000000; | |||
} | |||
.colapserbtn{ | |||
order: 2; | |||
width:60%; | |||
margin: 3px 0; | |||
background: repeating-linear-gradient(-45deg, transparent 16px, #27272e 20px); | |||
border-radius: 6px; | |||
transition: all 0.2s; | |||
user-select: none; | |||
box-shadow: 0px 0px 1px 1px black; | |||
} | |||
.colapserbtn:hover{ | |||
width:62%; | |||
} | |||
.mw-collapsed{ | |||
max-height: 0px; | |||
display:block !important; | |||
transition: none; | |||
} | |||
.extendedcontainer, .mw-headline{ | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
justify-content: center;} | |||
.mw-headline{ | |||
width: 100%; | |||
order: 2; | |||
} | |||
.h3{ | |||
font-size: 1.1em !important;padding: 5px 15px; | |||
} | |||
.h2{ | |||
font-size: 1.4em !important;padding: 5px 15px; | |||
} | |||
.colapsibletext:has(*:target) { | |||
transition:none; | |||
} | |||
@media (max-width: 768px) { | |||
.colapserbtn{ | |||
width:100% !important; | |||
} | |||
.colapsibletext{ | |||
transition-delay: unset; | |||
} | |||
} | |||
}} | |||
<h2 class="extendedcontainer"> | |||
<div class="mw-collapsible mw-collapsed colapsibletext" id="mw-customcollapsible-{{{id|myid}}}">{{{2}}}</div> | |||
<div class="mw-customtoggle-{{{id|myid}}} colapserbtn {{#switch:{{{3|h3}}}|h2=h2|h3=h3}}">{{{1}}}</div> | |||
</h2> | |||