MediaWiki:Test.css: различия между версиями

Версия от 18:07, 3 мая 2025

/* Основной стиль для карточек рецептов */
.recipe-card {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  padding: 0.8em 1.2em;
  margin: 1em auto;
  display: inline-block;
  vertical-align: top;
  background-color: #2a2a2a;
  border: 2px solid #444;
  border-radius: 6px;
  color: #f5f5f5;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Стиль для блоков с контентом */
.collapsible-block {
  margin-bottom: 1em;
}

/* Заголовок карточки */
.collapsible-header {
  background-color: #444;
  border: none;
  font-weight: bold;
  color: #81d4fa;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding: 0.6em 1em;
  display: flex;
  align-items: center; /* Размещаем спрайт и текст в ряд */
}

/* Спрайт для заголовка */
.collapsible-header .sprite {
  width: 32px; /* Размер иконки */
  height: 32px;
  background-image: url('path_to_beaker_image.png'); /* Путь к изображению */
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.8em; /* Отступ от иконки */
}

/* Ховер-эффект для заголовка */
.collapsible-header:hover {
  background-color: #555;
  color: #b3e5fc;
}

/* Контент карточки */
.collapsible-content {
  display: none;
  margin-top: 1em;
  padding-left: 1.5em;
  border-left: 2px solid #81d4fa;
  font-size: 14px;
  max-height: 200px;
  overflow-y: auto;
  transition: max-height 0.3s ease;
}

/* Показать контент при активной карточке */
.collapsible-content.show {
  display: block;
  max-height: 500px;
}

/* Описание рецепта */
.recipe-description {
  margin-top: 1em;
  font-size: 13px;
  color: #b0bec5;
}

/* Стиль для списка рецепта */
.recipe-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Стиль для элемента инструкции */
.instruction {
  color: #808080; /* Цвет для выделения действия */
  font-weight: bold;
  font-size: 16px;  /* Увеличиваем размер шрифта */
  padding: 0 1em;
}

@@ Строка 1: / Строка 1: @@
-/* Общий контейнер, если нужно вывести несколько карточек */
+/* Основной стиль для карточек рецептов */
-.recipe-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1em;
-  justify-content: center;
-}
-/* Карточка рецепта */
 .recipe-card {
-   position: relative;
+   width: 100%;
-  flex: 1 1 300px;
+   max-width: 320px;
-  max-width: 100%;
-   min-width: 250px;
    box-sizing: border-box;
+  padding: 0.8em 1.2em;
+  margin: 1em auto;
+  display: inline-block;
+  vertical-align: top;
    background-color: #2a2a2a;
    border: 2px solid #444;
    border-radius: 6px;
-  padding: 1em;
    color: #f5f5f5;
-   font-size: 1rem;
+   font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 }
-/* Название вещества сверху */
+/* Стиль для блоков с контентом */
-.card-substance {
-  font-size: 1.1rem;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 0.5em;
-  color: inherit;
-}
-/* Цветная линия под названием */
-.card-substance::after {
-  content: "";
-  display: block;
-  height: 4px;
-  width: 50%;
-  margin: 0.3em auto 0;
-  background-color: currentColor;
-  border-radius: 2px;
-}
-/* Блоки внутри карточки */
 .collapsible-block {
    margin-bottom: 1em;
 }
-/* Заголовок (кнопка) */
+/* Заголовок карточки */
 .collapsible-header {
-  display: flex;
-  align-items: center;
    background-color: #444;
    border: none;
+  font-weight: bold;
+  color: #81d4fa;
+  text-transform: uppercase;
+  cursor: pointer;
    border-radius: 4px;
-  cursor: pointer;
+   transition: background-color 0.3s ease, color 0.3s ease;
-   transition: background-color 0.3s;
    padding: 0.6em 1em;
-   font-weight: bold;
+   display: flex;
-   text-transform: uppercase;
+   align-items: center; /* Размещаем спрайт и текст в ряд */
-  color: #81d4fa;
 }
-/* Иконка-спрайт */
+/* Спрайт для заголовка */
 .collapsible-header .sprite {
-  display: inline-block;
+   width: 32px; /* Размер иконки */
-   width: 32px;
    height: 32px;
-  margin-right: 0.6em;
+   background-image: url('path_to_beaker_image.png'); /* Путь к изображению */
-   background-image: url('path_to_beaker_image.png');
    background-size: contain;
    background-repeat: no-repeat;
+  margin-right: 0.8em; /* Отступ от иконки */
 }
-/* Мелкая иконка в списке */
+/* Ховер-эффект для заголовка */
-.instruction .sprite.small {
-  width: 20px;
-  height: 20px;
-  margin-right: 0.4em;
-}
-/* Ховер */
 .collapsible-header:hover {
    background-color: #555;
@@ Строка 87: / Строка 52: @@
 }
-/* Линия под заголовком, цвет зависит от data-border */
+/* Контент карточки */
-.collapsible-header::after {
-  content: "";
-  display: block;
-  height: 3px;
-  background-color: currentColor;
-  margin-top: 0.4em;
-  border-radius: 2px;
-}
-/* Контент */
 .collapsible-content {
    display: none;
-   margin-top: 0.8em;
+   margin-top: 1em;
-   padding-left: 1.2em;
+   padding-left: 1.5em;
-   border-left: 3px solid #81d4fa;
+   border-left: 2px solid #81d4fa;
-   max-height: 0;
+  font-size: 14px;
-   overflow: hidden;
+   max-height: 200px;
+   overflow-y: auto;
    transition: max-height 0.3s ease;
 }
-/* Активное состояние */
+/* Показать контент при активной карточке */
 .collapsible-content.show {
    display: block;
@@ Строка 114: / Строка 70: @@
 }
-/* Описание */
+/* Описание рецепта */
 .recipe-description {
-   font-size: 0.9rem;
+  margin-top: 1em;
+   font-size: 13px;
    color: #b0bec5;
-  margin-top: 0.5em;
 }
-/* Список рецепта */
+/* Стиль для списка рецепта */
 .recipe-list {
-   list-style: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+   list-style-type: none;
    padding: 0;
    margin: 0;
 }
-.recipe-list li {
+/* Стиль для элемента инструкции */
-   margin-bottom: 0.4em;
+.instruction {
+  color: #808080; /* Цвет для выделения действия */
+  font-weight: bold;
+   font-size: 16px;  /* Увеличиваем размер шрифта */
+  padding: 0 1em;
 }