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

/* NOTE: The size of 'em' is set in the template via inline styles setting 'font-size' */
.recipe-item-icon {
	position: relative;
	width: fit-content;
	height: fit-content;
	overflow: hidden;
	background-color: yellow;
	border: clamp(3px, 0.05em, 8px) solid yellow;
	border-radius: clamp(4px, 0.1em, 16px);
}

.recipe-item-icon.has-count::after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
	    315deg,
	    rgba(0,0,0,0.6) 0%,
	    rgba(0,0,0,0.4) 35%,
	    rgba(0,0,0,0.15) 55%,
	    rgba(0,0,0,0) 70%
	  );
}

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

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

.recipe-item-icon__count {
	position: absolute;
	z-index: 2;
	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;
}