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

.link-card {
	/* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-300) */
	/* --alpha из стилей шаблона; по умолчанию: 90% */
	/* --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;
	position: relative;
	min-width: 110px;
	text-align: center;
	border: var(--border-outset);
	border-radius: var(--border-radius-medium);
	box-shadow: var(--box-shadow-medium);
	background: var(--background-color);
	transition: all 0.1s ease;
	min-height: calc(32px + 4px);
}

.link-card__image {
    flex: 0 0 auto;
	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: var(--font-size);
	box-sizing: border-box;
	font-weight: bold;
}

.link-card.brightness-overlay::before {
	border-radius: var(--border-radius-medium);
}

.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 {
		padding: 4px 8px;
		font-size: var(--font-size-xs);
		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 {
	padding: 4px 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.link-card__side .link-card__image {
	padding: 4px;
}