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

Материал из Vanilla Station
Перейти к: навигация, поиск
Нет описания правки
Нет описания правки
 
(не показано 50 промежуточных версий этого же участника)
Строка 1: Строка 1:
{{#css:
{{#css:
.blockbtn {
.colapsibletext{
     position: relative;
     min-width: 100%;
     background: #121212;
     max-height: 10000px;
     text-align: center;
     transition: max-height 0.5s;
     border: 1px solid black;
    transition-delay: 0.1s;
     border-radius: 8px;
     order: 4;
    flex-basis: 230px;
     overflow: hidden;
    font-size: 0.8em;
}
.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;
     flex-grow: 1;
     display: flex;
     border-radius: 12px;
     padding: 6px 2px 6px 2px;
    background: #000000;
     justify-content: center;
}
     flex-direction: column;
.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;
}
}
.blockbtn:hover{
.colapserbtn:hover{
background:hsl(220, 25%,calc(13% - 4%));
width:62%;
}
}
.blockbtn a{
.mw-collapsed{
color:lightgray;
    max-height: 0px;
    display:block !important;
    transition: none;
}
}
.StupidButton {
.extendedcontainer, .mw-headline{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;}
.mw-headline{
     width: 100%;
     width: 100%;
     height: 100%;
     order: 2;
    position: absolute;
    top: 0;
    left: 0
}
}
.colapsibleblockbtn{
.h3{
min-width:100%;
font-size: 1.1em !important;padding: 5px 15px;
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;
}
}
.colapserblockbtn{
.h2{
text-align:center;
font-size: 1.4em !important;padding: 5px 15px;
min-width:5%;
border:1px solid black;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
background:#121212
}
}
.mw-collapsed{
.colapsibletext:has(*:target) {
max-height:0;
  transition:none;
padding: 0;
}
opacity:0;
@media (max-width: 768px) {
display: block !important;
    .colapserbtn{
        width:100% !important;
    }
    .colapsibletext{
        transition-delay: unset;
    }
}
}
}}
}}
<div style="display:flex;flex-wrap:wrap;">
<h2 class="extendedcontainer">
   <div style="position: relative;background: #121212;text-align: center;border: 1px solid black;border-radius: 8px;flex-basis: 230px;font-size: 0.8em;flex-grow: 1;display: flex;padding: 6px 2px 6px 2px;justify-content: center;flex-direction: column;min-width:95%;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;">{{{текст}}}[[{{{ссылка}}}|<span class="StupidButton" style="z-index:100;"role="button"></span>]]
   <div class="mw-collapsible mw-collapsed colapsibletext" id="mw-customcollapsible-{{{id|myid}}}">{{{2}}}</div>
</div>
  <div class="mw-customtoggle-{{{id|myid}}} colapserbtn {{#switch:{{{3|h3}}}|h2=h2|h3=h3}}">{{{1}}}</div>
<div class="mw-customtoggle-myDivision material-symbols-outlined colapserblockbtn">Arrow_Drop_Down</div>
</h2>
<div class="mw-collapsible mw-collapsed colapsibleblockbtn" id="mw-customcollapsible-myDivision">Toggled text</div>
</div>
 
 
 
<div>
 
</div>

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

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

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