Участник: TFMB: различия между версиями

Материал из Vanilla Station
Перейти к: навигация, поиск
Нет описания правки
Нет описания правки
 
(не показано 26 промежуточных версий этого же участника)
Строка 1: Строка 1:
{{#css:
{{#css:
.blockbtn {
.colapsibletext{
order:1;
    min-width: 100%;
position: relative;
     max-height: 10000px;
background: #121212;
     transition: max-height 0.5s;
text-align: center;
    transition-delay: 0.1s;
border: 1px solid black;
    order: 4;
border-radius: 8px;
    overflow: hidden;
font-size: 0.8em;
display: flex;
padding: 6px 2px 6px 2px;
justify-content: center;
flex-direction: column;
transition: border-bottom-left-radius 0.3s;
}
.blockbtn:hover,.colapsiblebtn:hover{
background:hsl(220, 25%,calc(13% - 4%));
}
.blockbtn a,.colapsiblebtn a{
color:lightgray;
}
.StupidButton {
    width: 100%;
     height: 100%;
     position: absolute;
    top: 0;
    left: 0
}
.colapsiblebtn{
min-width:100%;
background:#121212;
text-align:center;
font-size:0.8em;
padding:6px 2px 6px 2px;
border:1px solid black;
border-top:0;
max-height:100px;
transition: all 0.2s;
position: relative;
padding-right: 10%;
padding-left: 10%;
order:4;
}
.colapsibleblockbtn:not(.mw-collapsed) ~ .colapserbtn{
border-bottom-right-radius:0;
}
}
.colapsibleblockbtn:not(.mw-collapsed) ~ .colapserbtn{
.colapsibletext:not(.mw-collapsed) ~ .colapserbtn{
width:100%;
width:100%;
}
}
.colapsibleblockbtn:not(.mw-collapsed) ~ .blockbtn{
.mw-headline:before{order:1;}
border-bottom-left-radius:0;
.mw-headline:after{order:3;}
}
.mw-headline:before,.mw-headline:after{
.extendedcontainer:before{order:1;}
content: "";
.extendedcontainer:after{order:3;}
.extendedcontainer:before,.extendedcontainer:after{
    width: 10%;
     content: "";
     content: "";
     margin: 0 2.5%;
     height: 1px;
     flex-grow: 1;
     flex-grow: 1;
    height: 5px;
     border-radius: 12px;
     border: 1px solid black;
     background: #000000;
     background: #191b20;
}
}
.colapserbtn{
.colapserbtn{
order:2;
    order: 2;
width:70%;
    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;
padding: 5px 15px;
    user-select: none;
box-shadow: 0px 0px 1px 1px black;
    box-shadow: 0px 0px 1px 1px black;
font-size: 1em;
}
.colapserbtn:hover{
width:62%;
}
}
.mw-collapsed{
.mw-collapsed{
max-height:0;
    max-height: 0px;
padding: 0;
    display:block !important;
padding-right: 10%;
    transition: none;
padding-left: 10%;
opacity:0;
padding-right: 10%;
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;
    }
}
}}
}}
<div class="extendedcontainer">
<h2 class="extendedcontainer">
   <div class="mw-collapsible mw-collapsed colapsiblebtn" id="mw-customcollapsible-{{{id|myid}}}">{{{2}}}</div>
   <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>
</div>
</h2>

Текущая версия от 23:03, 28 сентября 2024

{{{2}}}
{{{1}}}

Источник — https://vanilla-station.ru/w/index.php?title=Участник:TFMB&oldid=1207