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

Версия от 12:26, 18 октября 2025

.chem-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

.chem-card {
  flex: 1 1 calc(25% - 12px);
  background-color: var(--card-bg, #111);
  border: 2px solid var(--card-border, #555);
  border-radius: 8px;
  padding: 8px;
  color: #eee;
  box-sizing: border-box;
  min-width: 180px;
}

.chem-card h3 {
  margin: 0 0 4px 0;
  color: var(--card-accent, #8cf);
  font-size: 16px;
}

.chem-card .chem-recipe {
  margin-top: 6px;
}

.chem-card .recipe-item {
  margin-left: 4px;
  font-size: 14px;
}

@@ Строка 1: / Строка 1: @@
-.chem-grid {
+.chem-cards-container {
-   display: grid;
+   display: flex;
-   grid-template-columns: repeat(4, 1fr);
+   flex-wrap: wrap;
    gap: 12px;
-   align-items: start;
+   justify-content: flex-start;
-  margin: 8px 0;
-}
-@media (max-width: 1200px) {
-  .chem-grid { grid-template-columns: repeat(3, 1fr); }
-}
-@media (max-width: 900px) {
-  .chem-grid { grid-template-columns: repeat(2, 1fr); }
-}
-@media (max-width: 520px) {
-  .chem-grid { grid-template-columns: 1fr; }
 }
 .chem-card {
-   --card-bg: #0f1113;          /* по умолчанию фон карточки (тёмный) */
+   flex: 1 1 calc(25% - 12px);
-  --card-accent: #2a9d8f;      /* акцент/градиент (можно задавать) */
+   background-color: var(--card-bg, #111);
-  --card-border: #203030;      /* цвет рамки по умолчанию */
+   border: 2px solid var(--card-border, #555);
-   --section-bg: rgba(255,255,255,0.02);
+   border-radius: 8px;
-  color: #e6eef1;
+   padding: 8px;
-  background: linear-gradient(90deg, var(--card-bg) 0%, rgba(255,255,255,0.02) 100%);
+   color: #eee;
-   border: 1px solid var(--card-border);
+   box-sizing: border-box;
-   border-radius: 10px;
+   min-width: 180px;
-   padding: 10px;
-   box-shadow: 0 4px 10px rgba(0,0,0,0.5);
-   display: flex;
-  flex-direction: column;
-   min-height: 120px;
-  transition: transform .08s ease, box-shadow .08s ease;
 }
-.chem-card:hover {
+.chem-card h3 {
-   transform: translateY(-4px);
+  margin: 0 0 4px 0;
-   box-shadow: 0 8px 20px rgba(0,0,0,0.65);
+   color: var(--card-accent, #8cf);
+   font-size: 16px;
 }
-.chem-header {
+.chem-card .chem-recipe {
-  display: flex;
+   margin-top: 6px;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-.chem-header h3 {
-   margin: 0;
-  font-size: 1.05rem;
-  line-height: 1;
-}
-.chem-header .formula {
-  opacity: 0.9;
-  font-size: 0.95rem;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02));
-  padding: 4px 8px;
-  border-radius: 6px;
-  border: 1px solid rgba(255,255,255,0.03);
 }
-.chem-section {
+.chem-card .recipe-item {
-   margin: 6px 0;
+   margin-left: 4px;
-  padding: 6px;
+   font-size: 14px;
-  background: var(--section-bg);
-  border-radius: 6px;
-   font-size: 0.95rem;
 }
-.chem-recipe {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  align-items: flex-start;
-}
-.chem-recipe .recipe-group {
-  flex: 1 1 48%;
-  min-width: 160px;
-  background: rgba(0,0,0,0.12);
-  padding: 6px;
-  border-radius: 6px;
-  border: 1px solid rgba(255,255,255,0.03);
-}
-.chem-recipe .recipe-group b { display:block; margin-bottom:6px; }
-.chem-recipe .recipe-item {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 3px 0;
-  font-size: 0.9rem;
-}
-.chem-recipe .recipe-item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.chem-recipe .recipe-item .qty { opacity: 0.85; }
-.chem-effects { margin: 0; padding-left: 18px; }
-.chem-effects li { margin: 4px 0; font-size: 0.92rem; }
-.chem-desc { font-size: 0.9rem; opacity: 0.95; }