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

Версия от 20:05, 3 мая 2025

/* Стили для иконок через wiki-синтаксис */
.chem-icon {
  display: inline-block;
  width: 20px; 
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  background-size: contain;
  filter: var(--chem-icon-filter);
}

/* Динамическая адаптация под тему */
.skin-vector .chem-icon {
  --chem-icon-filter: invert(0.15);
}
.skin-vector-dark .chem-icon,
.night-mode .chem-icon {
  --chem-icon-filter: invert(0.85) hue-rotate(180deg);
}

/* Метка результата с wiki-синтаксисом */
.recipe-card::after {
  content: attr(data-output);
  /* остальные стили из предыдущего решения */
}

@@ Строка 1: / Строка 1: @@
-/* Стили для иконок химии */
+/* Стили для иконок через wiki-синтаксис */
 .chem-icon {
-   width: 18px;
+  display: inline-block;
-   height: 18px;
+   width: 20px;
+   height: 20px;
    margin-right: 8px;
-  filter: invert(0.85) brightness(0.9) sepia(0.2) hue-rotate(160deg);
    vertical-align: middle;
-   transition: filter 0.2s ease;
+   background-size: contain;
+  filter: var(--chem-icon-filter);
 }
-/* Метка результата */
+/* Динамическая адаптация под тему */
+.skin-vector .chem-icon {
+  --chem-icon-filter: invert(0.15);
+}
+.skin-vector-dark .chem-icon,
+.night-mode .chem-icon {
+  --chem-icon-filter: invert(0.85) hue-rotate(180deg);
+}
+/* Метка результата с wiki-синтаксисом */
 .recipe-card::after {
    content: attr(data-output);
-   position: absolute;
+   /* остальные стили из предыдущего решения */
-  top: 12px;
-  right: 12px;
-  background: rgba(79, 195, 247, 0.15);
-  color: #4fc3f7;
-  padding: 4px 10px;
-  border-radius: 14px;
-  font-size: 12px;
-  font-weight: 600;
-  backdrop-filter: blur(2px);
-  border: 1px solid rgba(79, 195, 247, 0.3);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  z-index: 2;
-}
-/* Адаптация для мобильных */
-@media (max-width: 480px) {
-  .chem-icon {
-    width: 16px;
-    height: 16px;
-  }
-  .recipe-card::after {
-    font-size: 11px;
-    padding: 3px 8px;
-    top: 8px;
-    right: 8px;
-  }
 }