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

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

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

150 ед.

Зелёный чай

300 ед.

Кола

100 ед.

@@ Строка 1: / Строка 1: @@
-{{JOB
-|Название=Глава Службы Безопасности
-|img=[[файл:clown.png|168px]]
-|Отдел=SEC
-|Обязанности=Обеспечить порядок на станции
-|Доступ=бриг
-|Время=пока не настроено
-|Руководства=Ваши срп
-}}
-:todo:
-сделать раскрывающийся акордион в [[Шаблон:Blockbtn]]
 {{#css:
-.accordion {
+.drink-item {
-  width: 100%;
+    background-color: #424874; /* Темный фон напитка */
+    color: #ffffff; /* Белый цвет текста */
+    font-family: Arial, sans-serif; /* Стиль шрифта */
+    font-size: 14px; /* Размер шрифта */
+    border: 2px solid #222233; /* Рамка вокруг элемента */
+    margin: 5px; /* Отступы между элементами */
+    padding: 10px; /* Внутренние отступы */
+    display: flex;
+    justify-content: space-between; /* Распределение контента */
+    align-items: center;
+    border-radius: 4px; /* Скругленные углы */
 }
-/* Стили для заголовков аккордеона */
+.drink-item span {
-.accordion .header {
+    font-size: 12px; /* Размер для количества единиц */
-  background-color: #f1f1f1;
+    color: #bbbbbb; /* Бледный цвет для второстепенного текста */
-  padding: 10px;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  margin-top: 5px;
 }
-/* Скрытый контент по умолчанию */
+.drink-item.locked {
-.accordion .content {
+    opacity: 0.5; /* Заблокированный элемент становится прозрачным */
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease;
-  padding: 0 10px;
-  border: 1px solid #ccc;
 }
-/* При наведении на заголовок */
+.drink-item .price {
-.accordion .header:hover + .content {
+    color: #ffcc00; /* Жёлтый для цен */
-  max-height: 100px; /* Высота для раскрытого контента */
+    font-weight: bold;
-  padding: 10px;
 }
-}}
+/* Пример цветовых акцентов для разных напитков */
+.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; }
-<div class="accordion">
+}}
-  <div class="header">Заголовок 1</div>
+<div class="drink-item orange">
-  <div class="content">
+    <div>Апельсиновый сок</div>
-    <span>Контент 1: Здесь находится раскрывающийся текст.</span>
+    <div><span>150 ед.</span></div>
-  </div>
+</div>
-  <div class="header">Заголовок 2</div>
+<div class="drink-item green">
-  <div class="content">
+    <div>Зелёный чай</div>
-    <span>Контент 2: Еще один раскрывающийся текст.</span>
+    <div><span>300 ед.</span></div>
-  </div>
+</div>
-  <div class="header">Заголовок 3</div>
+<div class="drink-item red">
-  <div class="content">
+    <div>Кола</div>
-    <span>Контент 3: Текст для третьего аккордеона.</span>
+    <div><span>100 ед.</span></div>
-  </div>
 </div>