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

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

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

150 ед.

Зелёный чай

300 ед.

Кола

100 ед.

@@ Строка 1: / Строка 1: @@
 {{#css:
-.blockbtn {
+.drink-item {
-order:1;
+    background-color: #424874; /* Темный фон напитка */
-position: relative;
+    color: #ffffff; /* Белый цвет текста */
-background: #121212;
+    font-family: Arial, sans-serif; /* Стиль шрифта */
-text-align: center;
+    font-size: 14px; /* Размер шрифта */
-border: 1px solid black;
+    border: 2px solid #222233; /* Рамка вокруг элемента */
-border-radius: 8px;
+    margin: 5px; /* Отступы между элементами */
-font-size: 0.8em;
+    padding: 10px; /* Внутренние отступы */
-display: flex;
+    display: flex;
-padding: 6px 2px 6px 2px;
+    justify-content: space-between; /* Распределение контента */
-justify-content: center;
+    align-items: center;
-flex-direction: column;
+    border-radius: 4px; /* Скругленные углы */
-transition: border-bottom-left-radius 0.3s;
 }
-.blockbtn:hover,.colapsibleblockbtn:hover{
-background:hsl(220, 25%,calc(13% - 4%));
+.drink-item span {
+    font-size: 12px; /* Размер для количества единиц */
+    color: #bbbbbb; /* Бледный цвет для второстепенного текста */
 }
-.blockbtn a,.colapsibleblockbtn a{
-color:lightgray;
+.drink-item.locked {
+    opacity: 0.5; /* Заблокированный элемент становится прозрачным */
 }
-.StupidButton {
-     width: 100%;
+.drink-item .price {
-     height: 100%;
+     color: #ffcc00; /* Жёлтый для цен */
-    position: absolute;
+     font-weight: bold;
-    top: 0;
-    left: 0
 }
-.colapsibleblockbtn{
-min-width:100%;
+/* Пример цветовых акцентов для разных напитков */
-background:#121212;
+.drink-item.orange { border-left: 5px solid orange; }
-text-align:center;
+.drink-item.green { border-left: 5px solid green; }
-font-size:0.8em;
+.drink-item.blue { border-left: 5px solid blue; }
-padding:6px 2px 6px 2px;
+.drink-item.red { border-left: 5px solid red; }
-border:1px solid black;
-border-top:0;
-max-height:100px;
-transition: all 0.2s;
-position: relative;
-padding-right: 10%;
-padding-left: 10%;
-order:3;
-}
-.colapsibleblockbtn:not(.mw-collapsed) ~ .colapserbtn{
-border-bottom-right-radius:0;
-}
-.colapsibleblockbtn:not(.mw-collapsed) ~ .colapserbtn{
-width:100%;
-}
-.colapsibleblockbtn:not(.mw-collapsed) ~ .blockbtn{
-border-bottom-left-radius:0;
-}
-.colapserbtn{
-order:2;
-background: repeating-linear-gradient(-45deg, transparent 16px, #27272e 20px);
-border-radius: 6px;
-transition: all 0.2s;
-user-select: none;
-width: 100%;
-padding: 5px 15px;
-box-shadow: 0px 0px 1px 1px black;
-font-size: 1em;
-}
-.mw-collapsed{
-max-height:0;
-padding: 0;
-padding-right: 10%;
-padding-left: 10%;
-opacity:0;
-padding-right: 10%;
-display: block !important;
-}
-.extendedcontainer{display:flex;flex-wrap:wrap;flex-basis:230px;flex-grow: 1;}
 }}
-<div class="extendedcontainer">
+<div class="drink-item orange">
-  <div class="mw-collapsible mw-collapsed colapsibleblockbtn lastbtn" id="mw-customcollapsible-{{{id|myid}}}">{{{2}}}</div>
+    <div>Апельсиновый сок</div>
-  <div class="mw-customtoggle-{{{id|myid}}} colapserbtn">{{{1}}}</div>
+    <div><span>150 ед.</span></div>
+</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>