Шаблон:Cut-Layout/styles.css: различия между версиями

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

@@ Строка 1: / Строка 1: @@
 .cut-layout {
 	display: flex;
-    flex-direction: column;
+	flex-direction: column;
-     margin: 3px;
+     justify-content: center;
-    padding: 10px 18px;
+	gap: 8px;
-    box-shadow: var(--box-shadow-high);
+	padding: 10px 18px;
-    background: var(--theme-bg-color-250);
+	box-shadow: var(--box-shadow-high);
-    border-radius: var(--border-radius-low);
+	background-color: var(--bg-color); /* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-200) */
-     width: 33%;
+	border-radius: var(--border-radius-low);
-     gap: 8px;
+     height: inherit;
+     box-sizing: border-box;
 }
 .cut-layout__header {
-	text-align: left;
+	display: flex;
+	justify-content: space-between;
+    align-items: center;
+	gap: 8px;
 }
-.cut-layout__header p {
+.cut-layout__header-arrow {
-	margin: 0;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    text-align: center;
 }
 .cut-layout__body {
-    flex-grow: 100;
+	flex-grow: 100;
-    padding: 8px;
+	padding: 8px;
-    position: relative;
+	position: relative;
-    font-size: 14px;
+	font-size: var(--font-size-s);
-    overflow: auto;
+	overflow: auto;
-    margin: 0 8px;
+	margin: 0 6px;
-    background: var(--theme-bg-color-200);
+	background: rgba(0, 0, 0, var(--alpha-s));
-    border-radius: var(--border-radius-low);
+	border-radius: var(--border-radius-low);
 }