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

Материал из Vanilla Station
Перейти к: навигация, поиск
Нет описания правки
Нет описания правки
 
(не показано 29 промежуточных версий этого же участника)
Строка 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{
.colapsibletext:not(.mw-collapsed) ~ .colapserbtn{
background:hsl(220, 25%,calc(13% - 4%));
width:100%;
}
}
.blockbtn a,.colapsiblebtn a{
.mw-headline:before{order:1;}
color:lightgray;
.mw-headline:after{order:3;}
.mw-headline:before,.mw-headline:after{
content: "";
    content: "";
    height: 1px;
    flex-grow: 1;
    border-radius: 12px;
    background: #000000;
}
}
.StupidButton {
.colapserbtn{
     width: 100%;
    order: 2;
     height: 100%;
     width:60%;
     position: absolute;
     margin: 3px 0;
     top: 0;
    background: repeating-linear-gradient(-45deg, transparent 16px, #27272e 20px);
     left: 0
     border-radius: 6px;
     transition: all 0.2s;
    user-select: none;
     box-shadow: 0px 0px 1px 1px black;
}
}
.colapsiblebtn{
.colapserbtn:hover{
min-width:100%;
width:62%;
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{
.mw-collapsed{
border-bottom-right-radius:0;
    max-height: 0px;
    display:block !important;
    transition: none;
}
}
.colapsibleblockbtn:not(.mw-collapsed) ~ .colapserbtn{
.extendedcontainer, .mw-headline{
width:100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;}
.mw-headline{
    width: 100%;
    order: 2;
}
}
.colapsibleblockbtn:not(.mw-collapsed) ~ .blockbtn{
.h3{
border-bottom-left-radius:0;
font-size: 1.1em !important;padding: 5px 15px;
}
}
.colapserbtn:before{order:1;}
.h2{
.colapserbtn:after{order:3;}
font-size: 1.4em !important;padding: 5px 15px;
.colapserbtn:before,.colapserbtn:after{
width:10%;
content: "";
flex-grow: 1;
height: 1px;
background: #1b1b20;
}
}
.colapserbtn{
.colapsibletext:has(*:target) {
order:2;
  transition:none;
width:70%;
background: repeating-linear-gradient(-45deg, transparent 16px, #27272e 20px);
border-radius: 6px;
transition: all 0.2s;
user-select: none;
padding: 5px 15px;
box-shadow: 0px 0px 1px 1px black;
font-size: 1em;
}
}
.mw-collapsed{
@media (max-width: 768px) {
max-height:0;
    .colapserbtn{
padding: 0;
        width:100% !important;
padding-right: 10%;
    }
padding-left: 10%;
    .colapsibletext{
opacity:0;
        transition-delay: unset;
padding-right: 10%;
    }
display: block !important;
}
}
.extendedcontainer{display:flex;flex-wrap:wrap;flex-basis:230px;flex-grow: 1;}
}}
}}
<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}}}