Template:Demo RecipeItemIcon/styles.css: Difference between revisions

.recipe-item-icon {
	position: relative;
	width: fit-content;
	height: fit-content;
	background-color: yellow;
	border: clamp(3px, 0.05em, 8px) solid yellow;
	border-radius: clamp(4px, 0.1em, 16px);
}

.recipe-item-icon__img-container {
	width: 1em;
	height: 1em;
}

.recipe-item-icon__img-container img {
	display: block;
}

.recipe-item-icon__count {
	position: absolute;
	bottom: clamp(4px, 0.1em, 16px);
	right: clamp(4px, 0.1em, 16px);
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.85);
	font-weight: bold;
	font-size: 0.25em;
}

/* Kill VE filler paragraph after the icon, only in the demo table */
.recipe-icon-demo td .recipe-item-icon+p {
  margin: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
}

.recipe-icon-demo td .recipe-item-icon+p > br {
  display: none;
}