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

Материал из Vanilla Station
Перейти к: навигация, поиск
Нет описания правки
Нет описания правки
 
(не показано 60 промежуточных версий этого же участника)
Строка 1: Строка 1:
{{JOB
|Название=Глава Службы Безопасности
|img=[[файл:clown.png|168px]]
|Отдел=SEC
|Обязанности=Обеспечить порядок на станции
|Доступ=бриг
|Время=пока не настроено
|Руководства=Ваши срп
}}
:todo:
сделать раскрывающийся акордион в [[Шаблон:Blockbtn]]
{{#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;
}
}
.blockbtn:hover{
.colapserbtn{
background:hsl(220, 25%,calc(13% - 4%));
    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 a{
.colapserbtn:hover{
color:lightgray;
width:62%;
}
}
.StupidButton {
.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%;
     width: 100%;
     height: 100%;
     order: 2;
    position: absolute;
}
    top: 0;
.h3{
    left: 0
font-size: 1.1em !important;padding: 5px 15px;
}
}
.header:hover{
.h2{
    border-bottom: 0;
font-size: 1.4em !important;padding: 5px 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
}
.accordion .content {
.colapsibletext:has(*:target) {
  max-height: 0;
   transition:none;
  overflow: hidden;
   transition: max-height 0.3s ease;
  font-size: 0.8em;
  text-align: center;
  background: #121212;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
}
.accordion .header:hover + .content,
@media (max-width: 768px) {
.accordion .content:hover {
     .colapserbtn{
    max-height: 100px;
        width:100% !important;
     font-size: 0.8em;
     }
    text-align: center;
     .colapsibletext{
     background: #11151d;
        transition-delay: unset;
     border: 1px solid black;
     }
    border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
    display: flex;
    padding: 6px 2px 6px 2px;
    justify-content: center;
    flex-direction: column;
}
}
}}
}}
<div class="accordion">
<h2 class="extendedcontainer">
   <div class="blockbtn header">{{{текст}}}[[{{{ссылка}}}|<span class="StupidButton" style="z-index:100;"role="button"></span>]]</div>
   <div class="mw-collapsible mw-collapsed colapsibletext" id="mw-customcollapsible-{{{id|myid}}}">{{{2}}}</div>
   <div class="content"><span>Контент 3: Текст для третьего аккордеона.</span></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}}}