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

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

← Предыдущая правка Следующая правка →

@@ Строка 1: / Строка 1: @@
+.link-card {
+	--background-color: color-mix(in srgb, var(--bg-color) var(--alpha), rgb(var(--theme-color-darkened--rgb)));
+	display: inline-block;
+	position: relative;
+	min-width: 110px;
+	text-align: center;
+	border: var(--border-outset);
+	border-radius: 0.3em;
+	box-shadow: var(--box-shadow-medium);
+	background: var(--background-color);
+	transition: all 0.15s ease;
+	min-height: calc(32px + 4px);
+}
+.link-card__image {
+	position: relative;
+	text-align: center;
+	align-content: center;
+	padding: 6px;
+	min-width: 32px;
+}
+.link-card__name {
+	position: relative;
+	width: 100%;
+	padding: 2px 4px;
+	font-size: 0.8em;
+	box-sizing: border-box;
+	background: rgba(0, 0, 0, 0.2);
+	font-weight: bold;
+}
+.link-card.brightness-overlay::before {
+	border-radius: 0.3em;
+}
+.link-card__pin {
+	top: 0;
+	right: 4px;
+}
+@media (min-width: 800px) {
+	.link-card-hover:not(.link-card__side):hover  {
+		box-shadow: var(--box-shadow-high);
+		transform: translateY(-4px);
+	}
+}
+@media (max-width: 800px) {
+	.link-card {
+		display: flex;
+		width: 100%;
+		text-align: left;
+		justify-content: center;
+		box-shadow: var(--box-shadow);
+		min-width: 0;
+	}
+	.link-card__name {
+		background: rgba(0, 0, 0, 0.15);
+		padding: 4px 8px;
+		font-size: 0.9em;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: nowrap;
+	}
+	.link-card__image {
+		padding: 4px;
+	}
+}
+.link-card__side {
+	display: flex ;
+	width: 100%;
+	text-align: left;
+	justify-content: center;
+	box-shadow: var(--box-shadow);
+}
+.link-card__side .link-card__name {
+	background: rgba(0, 0, 0, 0.15);
+	padding: 4px 8px;
+	font-size: 0.9em;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: nowrap;
+}
+.link-card__side .link-card__image {
+	padding: 4px;
+}