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

Материал из Rayten
Перейти к: навигация, поиск
Нет описания правки
Нет описания правки
 
(не показано 57 промежуточных версий этого же участника)
Строка 1: Строка 1:
{{JOB
|Название=Глава Службы Безопасности
|img=[[файл:clown.png|168px]]
|Отдел=SEC
|Обязанности=Обеспечить порядок на станции
|Доступ=бриг
|Время=пока не настроено
|Руководства=Ваши срп
}}
:todo:
сделать раскрывающийся акордион в [[Шаблон:Blockbtn]]
{{#css:
{{#css:
.accordion-content {
.drink-item {
     display: none;
    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 {
     font-size: 12px; /* Размер для количества единиц */
    color: #bbbbbb; /* Бледный цвет для второстепенного текста */
}
}


.accordion-toggle:focus + .accordion-content,
.drink-item.locked {
.accordion-content:focus-within {
     opacity: 0.5; /* Заблокированный элемент становится прозрачным */
     display: block;
}
}


.accordion-toggle {
.drink-item .price {
     cursor: pointer;
     color: #ffcc00; /* Жёлтый для цен */
     outline: none;
     font-weight: bold;
}
}
/* Пример цветовых акцентов для разных напитков */
.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><span tabindex="0" class="accordion-toggle material-symbols-outlined">Arrow_Downward_Alt</span><div class="accordion-content"><span>Это содержимое аккордеона. Оно появится при фокусировке на заголовке.</span></div>
<div class="drink-item orange">
    <div>Апельсиновый сок</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>
</div>

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

Апельсиновый сок
150 ед.
Зелёный чай
300 ед.
Кола
100 ед.