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

@@ Строка 1: / Строка 1: @@
 {{#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;
-     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%;
-     height: 100%;
+     order: 2;
-     position: absolute;
+}
-     top: 0;
+.h3{
-     left: 0
+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="blockbtn">{{{текст}}}[[{{{ссылка}}}|<span class="StupidButton" style="z-index:100;"role="button"></span>]]</div>
+<h2 class="extendedcontainer">
+  <div class="mw-collapsible mw-collapsed colapsibletext" id="mw-customcollapsible-{{{id|myid}}}">{{{2}}}</div>
-<div class="mw-customtoggle-myDivision material-symbols-outlined">Arrow_Drop_Down</div>
+  <div class="mw-customtoggle-{{{id|myid}}} colapserbtn {{#switch:{{{3|h3}}}|h2=h2|h3=h3}}">{{{1}}}</div>
+</h2>
-<div>
-<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">Toggled text</div>
-</div>

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

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

{{{2}}}

{{{1}}}

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

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

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

{{{2}}}

{{{1}}}