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

@@ Строка 1: / Строка 1: @@
-{{JOB
-|Название=Глава Службы Безопасности
-|img=[[файл:clown.png|168px]]
-|Отдел=SEC
-|Обязанности=Обеспечить порядок на станции
-|Доступ=бриг
-|Время=пока не настроено
-|Руководства=Ваши срп
-}}
-:todo:
-сделать раскрывающийся акордион в [[Шаблон:Blockbtn]]
 {{#css:
-.accordion {
+.colapsibletext{
-  width: 100%;
+    min-width: 100%;
+    max-height: 10000px;
+    transition: max-height 0.5s;
+    transition-delay: 0.1s;
+    order: 4;
+    overflow: hidden;
+}
+.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;
+    border-radius: 12px;
+    background: #000000;
+}
+.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;
+}
+.colapserbtn:hover{
+width:62%;
+}
+.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%;
+    order: 2;
+}
+.h3{
+font-size: 1.1em !important;padding: 5px 15px;
 }
+.h2{
-/* Стили для заголовков аккордеона */
+font-size: 1.4em !important;padding: 5px 15px;
-.accordion .header {
-  background-color: #f1f1f1;
-  padding: 10px;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  margin-top: 5px;
 }
+.colapsibletext:has(*:target) {
-/* Скрытый контент по умолчанию */
+   transition:none;
-.accordion .content {
-  max-height: 0;
-  overflow: hidden;
-   transition: max-height 0.3s ease;
-  padding: 0 10px;
-  border: 1px solid #ccc;
 }
+@media (max-width: 768px) {
-/* При наведении на заголовок */
+    .colapserbtn{
-.accordion .header:hover + .content {
+        width:100% !important;
-  max-height: 100px; /* Высота для раскрытого контента */
+    }
-  padding: 10px;
+    .colapsibletext{
+        transition-delay: unset;
+    }
 }
 }}
+<h2 class="extendedcontainer">
+   <div class="mw-collapsible mw-collapsed colapsibletext" id="mw-customcollapsible-{{{id|myid}}}">{{{2}}}</div>
-<div class="accordion">
+   <div class="mw-customtoggle-{{{id|myid}}} colapserbtn {{#switch:{{{3|h3}}}|h2=h2|h3=h3}}">{{{1}}}</div>
-   <div class="header">Заголовок 1</div>
+</h2>
-  <div class="content">
-    <span>Контент 1: Здесь находится раскрывающийся текст.</span>
-  </div>
-  <div class="header">Заголовок 2</div>
-   <div class="content">
-    <span>Контент 2: Еще один раскрывающийся текст.</span>
-  </div>
-  <div class="header">Заголовок 3</div>
-  <div class="content">
-    <span>Контент 3: Текст для третьего аккордеона.</span>
-  </div>
-</div>

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

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

{{{2}}}

{{{1}}}

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

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

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

{{{2}}}

{{{1}}}