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: @@
-var ChemRecipe = (function() {
+.ss14-rules {
-     function createBlock(data) {
+     width: 100%;
-        var container = document.createElement('div');
+    border-collapse: separate;
-        container.style.background = '#1e1e1e';
+    border-spacing: 0 8px; /* Расстояние между строками */
-        container.style.color = '#ddd';
+    background-color: transparent;
-        container.style.border = '1px solid #444';
+    color: #cecece;
-        container.style.borderRadius = '8px';
+    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-        container.style.padding = '10px';
+}
-        container.style.margin = '10px';
-        container.style.width = '300px';
-        container.style.display = 'inline-block';
-        container.style.verticalAlign = 'top';
-        var title = document.createElement('div');
+.ss14-rules th {
-        title.style.fontWeight = 'bold';
+    background: #1a1a1e;
-        title.style.fontSize = '16px';
+    color: #7daeff;
-        title.style.marginBottom = '6px';
+    padding: 12px;
-        title.textContent = data.name;
+    text-transform: uppercase;
-        container.appendChild(title);
+    font-size: 0.9em;
+    letter-spacing: 1px;
+    border-bottom: 2px solid #3a3a42;
+}
-        if (data.ingredients) {
+.ss14-rules td:first-child,
-            var ingTitle = document.createElement('div');
+.ss14-rules td:nth-child(2) {
-            ingTitle.style.fontStyle = 'italic';
+    background: #25252b;
-            ingTitle.textContent = 'Смешайте';
+    font-weight: bold;
-            container.appendChild(ingTitle);
+    color: #ffffff;
+    vertical-align: top;
+    border-left: 4px solid #5a5a66; /* Акцентная полоса слева */
+}
-            var ul = document.createElement('ul');
+.ss14-rules td:first-child {
-            ul.style.paddingLeft = '20px';
+    white-space: nowrap;
-            for (var i = 0; i < data.ingredients.length; i++) {
+    color: #ffca28; /* Золотистый цвет для номера */
-                var li = document.createElement('li');
+    width: 10%;
-                li.textContent = data.ingredients[i].name + ' [' + data.ingredients[i].amount + ']';
+}
-                ul.appendChild(li);
-            }
-            container.appendChild(ul);
-        }
-        if (data.effects) {
+/* Описание правила (третья колонка) */
-            var effTitle = document.createElement('div');
+.ss14-rules td:last-child {
-            effTitle.style.fontWeight = 'bold';
+    background: #1e1e22;
-            effTitle.style.marginTop = '6px';
+    padding: 15px;
-            effTitle.textContent = 'Эффекты';
+    line-height: 1.6;
-            container.appendChild(effTitle);
+    border-right: 1px solid #3a3a42;
+}
-            var ulEff = document.createElement('ul');
+.ss14-rules td big {
-            ulEff.style.paddingLeft = '20px';
+    display: block;
-            for (var j = 0; j < data.effects.length; j++) {
+    color: #7daeff; /* Голубой акцент */
-                var liEff = document.createElement('li');
+    font-size: 1.1em;
-                liEff.textContent = data.effects[j];
+    margin-bottom: 10px;
-                ulEff.appendChild(liEff);
+    border-bottom: 1px solid #333;
-            }
+    padding-bottom: 5px;
-            container.appendChild(ulEff);
+}
-        }
-        if (data.description) {
+.ss14-rules ul {
-            var desc = document.createElement('div');
+    margin-top: 10px;
-            desc.style.marginTop = '6px';
+    list-style-type: square;
-            desc.style.fontSize = '13px';
+}
-            desc.textContent = data.description;
-            container.appendChild(desc);
-        }
-         return container;
+.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 {
-     return {
+         box-sizing: border-box;
-         render: function(recipes, targetId) {
+    }
-            var target = document.getElementById(targetId);
+    .ss14-rules td:first-child {
-            for (var k = 0; k < recipes.length; k++) {
+        border-bottom: none;
-                target.appendChild(createBlock(recipes[k]));
+         padding-bottom: 5px;
-            }
+     }
-         }
+}
-     };
-})();