Шаблон:LinkCard/Сollapsible/styles.css: различия между версиями

Интерактивная навигация по истории

@@ Строка 1: / Строка 1: @@
 .link-card--сollapsible {
+	/* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-300) */
+	/* --alpha из стилей шаблона; по умолчанию: 90% */
+	--background-color: color-mix(in srgb, var(--bg-color) var(--alpha), var(--theme-bg-color-100));
      display: flex;
      width: 100%;
      background: var(--background-color);
-     border: 1px outset rgba(0, 0, 0, 0.3);
+     border: var(--border-outset);
-     border-radius: 0.3em;
+     border-radius: var(--border-radius-medium);
-     box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
+     box-shadow: var(--box-shadow);
      text-align: left;
 }
@@ Строка 11: / Строка 15: @@
 /* Название карточки */
 .link-card--сollapsible .link-card--сollapsible__name {
-     background: #00000020;
+     background: rgba(var(--color-darkened--rgb), 0.13);
      padding: 4px 8px;
-     font-size: 0.9em;
+     font-size: var(--font-size-xs);
      font-weight: bold;
      display: flex;
@@ Строка 44: / Строка 48: @@
 .link-card--сollapsible__header > .mw-collapsible-toggle {
      position: relative !important;
-     font-size: 14px;
+     font-size: var(--font-size-xs);
-     background: #00000020;
+     background: rgba(var(--color-darkened--rgb), 0.13);
      display: flex;
      align-items: center;
@@ Строка 59: / Строка 63: @@
 /* Контент, который появляется при разворачивании карточки */
 .link-card--сollapsible__content {
-    grid-column: 1 / -1;
-    background: #00000020;
      position: absolute !important;
      top: 100%;
@@ Строка 68: / Строка 70: @@
      gap: 4px;
      padding: 6px;
-     border-radius: 0 0 0.2em 0.2em;
+     border-radius: 0 0 var(--border-radius-low) var(--border-radius-low);
-     border: 2px solid #31313b;
+    flex-direction: column;
+     border: 2px solid var(--theme-bg-color-250);
+    background-color: var(--theme-bg-color-150);
+    box-shadow: var(--box-shadow-inset);
      border-top: 0;
-     background-color: #24242a;
-     box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);
+     grid-column: 1 / -1;
-    flex-direction: column;
 }