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

Текущая версия от 10:59, 27 ноября 2024

Апельсиновый сок

150 ед.

Зелёный чай

300 ед.

Кола

100 ед.

@@ Строка 1: / Строка 1: @@
 {{#css:
-.colapsibletext{
+.drink-item {
-     min-width: 100%;
+     background-color: #424874; /* Темный фон напитка */
-     max-height: 10000px;
+    color: #ffffff; /* Белый цвет текста */
-     transition: max-height 0.5s;
+    font-family: Arial, sans-serif; /* Стиль шрифта */
-     transition-delay: 0.1s;
+     font-size: 14px; /* Размер шрифта */
-     order: 4;
+     border: 2px solid #222233; /* Рамка вокруг элемента */
-     overflow: hidden;
+    margin: 5px; /* Отступы между элементами */
+    padding: 10px; /* Внутренние отступы */
+    display: flex;
+     justify-content: space-between; /* Распределение контента */
+     align-items: center;
+     border-radius: 4px; /* Скругленные углы */
 }
-.colapsibletext:not(.mw-collapsed) ~ .colapserbtn{
-width:100%;
+.drink-item span {
+    font-size: 12px; /* Размер для количества единиц */
+    color: #bbbbbb; /* Бледный цвет для второстепенного текста */
 }
-.mw-headline:before{order:1;}
-.mw-headline:after{order:3;}
+.drink-item.locked {
-.mw-headline:before,.mw-headline:after{
+     opacity: 0.5; /* Заблокированный элемент становится прозрачным */
-content: "";
-     content: "";
-    height: 1px;
-    flex-grow: 1;
-    border-radius: 12px;
-    background: #000000;
 }
-.colapserbtn{
-    order: 2;
+.drink-item .price {
-    width:60%;
+     color: #ffcc00; /* Жёлтый для цен */
-    margin: 3px 0;
+     font-weight: bold;
-    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;
-}
-.colapsibletext:has(*:target) {
-  transition:none;
-}
-@media (max-width: 768px) {
-    .colapserbtn{
-        width:100% !important;
-    }
-    .colapsibletext{
-        transition-delay: unset;
-    }
 }
+/* Пример цветовых акцентов для разных напитков */
+.drink-item.orange { border-left: 5px solid orange; }
+.drink-item.green { border-left: 5px solid green; }
+.drink-item.blue { border-left: 5px solid blue; }
+.drink-item.red { border-left: 5px solid red; }
 }}
-<h2 class="extendedcontainer">
+<div class="drink-item orange">
-  <div class="mw-collapsible mw-collapsed colapsibletext" id="mw-customcollapsible-{{{id|myid}}}">{{{2}}}</div>
+    <div>Апельсиновый сок</div>
-  <div class="mw-customtoggle-{{{id|myid}}} colapserbtn {{#switch:{{{3|h3}}}|h2=h2|h3=h3}}">{{{1}}}</div>
+    <div><span>150 ед.</span></div>
-</h2>
+</div>
+<div class="drink-item green">
+    <div>Зелёный чай</div>
+    <div><span>300 ед.</span></div>
+</div>
+<div class="drink-item red">
+    <div>Кола</div>
+    <div><span>100 ед.</span></div>
+</div>