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