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

Текущая версия от 14:16, 25 февраля 2026

.ss14-rules {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px; /* Расстояние между строками */
    background-color: transparent;
    color: #cecece;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ss14-rules th {
    background: #1a1a1e;
    color: #7daeff;
    padding: 12px;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1px;
    border-bottom: 2px solid #3a3a42;
}

.ss14-rules td:first-child, 
.ss14-rules td:nth-child(2) {
    background: #25252b;
    font-weight: bold;
    color: #ffffff;
    vertical-align: top;
    border-left: 4px solid #5a5a66; /* Акцентная полоса слева */
}

.ss14-rules td:first-child {
    white-space: nowrap;
    color: #ffca28; /* Золотистый цвет для номера */
    width: 10%;
}

/* Описание правила (третья колонка) */
.ss14-rules td:last-child {
    background: #1e1e22;
    padding: 15px;
    line-height: 1.6;
    border-right: 1px solid #3a3a42;
}

.ss14-rules td big {
    display: block;
    color: #7daeff; /* Голубой акцент */
    font-size: 1.1em;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.ss14-rules ul {
    margin-top: 10px;
    list-style-type: square;
}

.ss14-rules li {
    margin-bottom: 8px;
}

.ss14-rules tr:hover td {
    background-color: #2d2d35 !important;
    transition: background 0.2s ease;
}

@media screen and (max-width: 720px) {
    .ss14-rules, .ss14-rules tbody, .ss14-rules tr, .ss14-rules td {
        display: block;
        width: 100%;
    }
    .ss14-rules td {
        box-sizing: border-box;
    }
    .ss14-rules td:first-child {
        border-bottom: none;
        padding-bottom: 5px;
    }
}

@@ Строка 1: / Строка 1: @@
-/* Основной стиль для карточек рецептов */
+.ss14-rules {
-.recipe-card {
+    width: 100%;
-  width: 100%; /* Убрано ограничение ширины */
+    border-collapse: separate;
-  max-width: 320px; /* Добавлено ограничение для ширины */
+    border-spacing: 0 8px; /* Расстояние между строками */
-  box-sizing: border-box;
+    background-color: transparent;
-  padding: 0.8em 1.2em; /* Уменьшены отступы */
+    color: #cecece;
-  margin: 1em auto; /* Центрирование карточки */
+    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  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 10px rgba(0, 0, 0, 0.3);
-  transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
-  height: 200px; /* Уменьшена высота, чтобы сделать блоки более приплюснутыми */
 }
-.recipe-card:hover {
+.ss14-rules th {
-  transform: translateY(-5px);
+    background: #1a1a1e;
-  background-color: #333;
+    color: #7daeff;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    padding: 12px;
+    text-transform: uppercase;
+    font-size: 0.9em;
+    letter-spacing: 1px;
+    border-bottom: 2px solid #3a3a42;
 }
-/* Заголовок и эффекты нажатия */
+.ss14-rules td:first-child,
-.collapsible-header {
+.ss14-rules td:nth-child(2) {
-  background-color: #444;
+    background: #25252b;
-  border: 1px solid #666;
+    font-weight: bold;
-  border-radius: 6px; /* Уменьшен радиус */
+    color: #ffffff;
-  padding: 10px 15px; /* Уменьшены отступы */
+    vertical-align: top;
-  font-size: 16px; /* Размер шрифта */
+    border-left: 4px solid #5a5a66; /* Акцентная полоса слева */
-  font-weight: bold;
-  color: #81d4fa;
-  text-transform: uppercase;
-  cursor: pointer;
-  transition: background-color 0.3s ease, color 0.3s ease;
-  width: 100%;
 }
-.collapsible-header:hover {
+.ss14-rules td:first-child {
-  background-color: #555;
+    white-space: nowrap;
-  color: #ffffff;
+    color: #ffca28; /* Золотистый цвет для номера */
+    width: 10%;
 }
-/* Контент блоков */
+/* Описание правила (третья колонка) */
-.collapsible-content {
+.ss14-rules td:last-child {
-  display: none;
+    background: #1e1e22;
-  margin-top: 1em; /* Уменьшено расстояние */
+    padding: 15px;
-  padding-left: 1.5em; /* Уменьшен отступ слева */
+    line-height: 1.6;
-  border-left: 2px solid #81d4fa; /* Уменьшена толщина линии */
+    border-right: 1px solid #3a3a42;
-  font-size: 14px; /* Уменьшенный шрифт */
-  height: 60%; /* Уменьшена высота контента */
-  overflow-y: auto; /* Добавлено прокручивание, если контента больше */
 }
-/* Описание рецепта */
+.ss14-rules td big {
-.recipe-description {
+    display: block;
-  margin-top: 1em; /* Уменьшено расстояние между описанием и контентом */
+    color: #7daeff; /* Голубой акцент */
-  font-size: 14px; /* Размер шрифта */
+    font-size: 1.1em;
-  color: #ccc;
+    margin-bottom: 10px;
-  line-height: 1.4;
+    border-bottom: 1px solid #333;
-  height: 30%; /* Уменьшена высота */
+    padding-bottom: 5px;
-  overflow-y: auto; /* Прокрутка при необходимости */
 }
-.recipe-description strong {
+.ss14-rules ul {
-  color: #81d4fa;
+    margin-top: 10px;
+    list-style-type: square;
 }
-/* Анимации раскрытия контента */
+.ss14-rules li {
-.collapsible-content li {
+    margin-bottom: 8px;
-  opacity: 0;
-  transform: translateY(10px);
-  animation: fadeInUp 0.3s forwards;
 }
-.collapsible-content li:nth-child(1) {
+.ss14-rules tr:hover td {
-  animation-delay: 0.1s;
+    background-color: #2d2d35 !important;
+    transition: background 0.2s ease;
 }
-.collapsible-content li:nth-child(2) {
+@media screen and (max-width: 720px) {
-  animation-delay: 0.2s;
+    .ss14-rules, .ss14-rules tbody, .ss14-rules tr, .ss14-rules td {
-}
+        display: block;
+        width: 100%;
-.collapsible-content li:nth-child(3) {
+    }
-  animation-delay: 0.3s;
+    .ss14-rules td {
-}
+        box-sizing: border-box;
+    }
-@keyframes fadeInUp {
+    .ss14-rules td:first-child {
-  to {
+        border-bottom: none;
-    opacity: 1;
+        padding-bottom: 5px;
-    transform: translateY(0);
+    }
-  }
 }