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

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

← Предыдущая правка

@@ Строка 1: / Строка 1: @@
 .link-card {
-	/* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-400) */
+	/* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-300) */
 	/* --alpha из стилей шаблона; по умолчанию: 90% */
-	--background-color: color-mix(in srgb, var(--bg-color) var(--alpha), rgb(var(--theme-color-darkened--rgb)));
+	/* --font-size из стилей шаблона; по умолчанию: var(--font-size-xxs) */
+	--background-color: color-mix(in srgb, var(--bg-color) var(--alpha), var(--theme-bg-color-100));
-	display: inline-block;
+	display: inline-flex;
+	flex-direction: column;
 	position: relative;
 	min-width: 110px;
@@ Строка 12: / Строка 14: @@
 	box-shadow: var(--box-shadow-medium);
 	background: var(--background-color);
-	transition: all 0.15s ease;
+	transition: all 0.1s ease;
 	min-height: calc(32px + 4px);
 }
 .link-card__image {
+    flex: 0 0 auto;
 	position: relative;
 	text-align: center;
@@ Строка 28: / Строка 31: @@
 	width: 100%;
 	padding: 2px 4px;
-	font-size: 0.8em;
+	font-size: var(--font-size);
 	box-sizing: border-box;
 	background: rgba(var(--color-darkened--rgb), 0.2);
 	font-weight: bold;
+	flex-grow: 2;
 }
@@ Строка 52: / Строка 56: @@
 @media (max-width: 800px) {
 	.link-card {
-		display: flex;
+		flex-direction: row;
 		width: 100%;
 		text-align: left;
-		justify-content: center;
 		box-shadow: var(--box-shadow);
 		min-width: 0;
@@ Строка 63: / Строка 66: @@
 		background: rgba(var(--color-darkened--rgb), 0.13);
 		padding: 4px 8px;
-		font-size: 0.9em;
+		font-size: var(--font-size-xs);
 		display: flex;
 		align-items: center;
@@ Строка 76: / Строка 79: @@
 .link-card__side {
-	display: flex ;
+	flex-direction: row;
 	width: 100%;
 	text-align: left;
@@ Строка 86: / Строка 89: @@
 	background: rgba(var(--color-darkened--rgb), 0.13);
 	padding: 4px 8px;
-	font-size: 0.9em;
+	font-size: var(--font-size-xs);
 	display: flex;
 	align-items: center;