Template:Demo RecipeItemIcon/styles.css - Revision history

WugWugg: Undo revision 16349 by WugWugg (talk)

2026-02-21T14:44:39Z

← Older revision		Revision as of 16:44, 21 February 2026
Line 58:		Line 58:
	.recipe-item-icon__img-container img {		.recipe-item-icon__img-container img {
	display: block;		display: block;
	~~width: 100% !important;~~
	~~height: 100% !important;~~
	}		}

2026-02-21T14:44:27Z

Undo revision 16352 by WugWugg (talk)

← Older revision		Revision as of 16:44, 21 February 2026
Line 51:		Line 51:
	}		}

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

	.recipe-item-icon__img-container img {		.recipe-item-icon__img-container img {

2026-02-21T14:08:49Z

← Older revision		Revision as of 16:08, 21 February 2026
Line 51:		Line 51:
	}		}

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

	.recipe-item-icon__img-container img {		.recipe-item-icon__img-container img {

2026-02-21T14:04:08Z

← Older revision		Revision as of 16:04, 21 February 2026
Line 58:		Line 58:
	.recipe-item-icon__img-container img {		.recipe-item-icon__img-container img {
	display: block;		display: block;
			width: 100% !important;
			height: 100% !important;
	}		}

2026-02-19T14:45:20Z

← Older revision		Revision as of 16:45, 19 February 2026
Line 39:		Line 39:
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
			/* Known Limit/Bug: When an icon has a count the icon's image link cannot be clicked*/
			/* Solution add pointer-events to this Wiki's supported CSS features*/
			/* pointer-events: none;*/
	background: linear-gradient(		background: linear-gradient(
	315deg,		315deg,

2026-02-19T14:43:54Z

← Older revision		Revision as of 16:43, 19 February 2026
Line 34:		Line 34:
	content: "";		content: "";
	position: absolute;		position: absolute;
	z-index: 2;		z-index: 1;
	bottom: 0;		bottom: 0;
	right: 0;		right: 0;
Line 51:		Line 51:
	width: 1em;		width: 1em;
	height: 1em;		height: 1em;
	}

	~~.recipe-item-icon__img-container a.mw-file-description {~~
	~~position: relative;~~
	~~z-index: 3;~~
	~~display: inline-block;~~
	}		}

	.recipe-item-icon__img-container img {		.recipe-item-icon__img-container img {
	~~position: relative;~~
	~~z-index: 1;~~
	display: block;		display: block;
	}		}
Line 67:		Line 59:
	.recipe-item-icon__count {		.recipe-item-icon__count {
	position: absolute;		position: absolute;
	z-index: 3;		z-index: 2;
	bottom: clamp(4px, 0.1em, 16px);		bottom: clamp(4px, 0.1em, 16px);
	right: clamp(4px, 0.1em, 16px);		right: clamp(4px, 0.1em, 16px);

2026-02-19T14:42:22Z

← Older revision		Revision as of 16:42, 19 February 2026
Line 34:		Line 34:
	content: "";		content: "";
	position: absolute;		position: absolute;
	z-index: 1;		z-index: 2;
	bottom: 0;		bottom: 0;
	right: 0;		right: 0;
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	background~~-repeat: no-repeat;~~		background: linear-gradient(
	~~background-position: bottom right;~~
	~~/* Using background-image over background because image won't intercept clicks (it'll let use open the image link even when there's a count)*/~~
	~~background-image~~: linear-gradient(
	315deg,		315deg,
	rgba(0,0,0,0.55) 0%,		rgba(0,0,0,0.55) 0%,
Line 54:		Line 51:
	width: 1em;		width: 1em;
	height: 1em;		height: 1em;
	z-index: 0;		}

			.recipe-item-icon__img-container a.mw-file-description {
			position: relative;
			z-index: 3;
			display: inline-block;
	}		}

	.recipe-item-icon__img-container img {		.recipe-item-icon__img-container img {
			position: relative;
			z-index: 1;
	display: block;		display: block;
	}		}
Line 63:		Line 67:
	.recipe-item-icon__count {		.recipe-item-icon__count {
	position: absolute;		position: absolute;
	z-index: 2;		z-index: 3;
	bottom: clamp(4px, 0.1em, 16px);		bottom: clamp(4px, 0.1em, 16px);
	right: clamp(4px, 0.1em, 16px);		right: clamp(4px, 0.1em, 16px);

2026-02-19T14:34:13Z

← Older revision		Revision as of 16:34, 19 February 2026
Line 39:		Line 39:
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	background: linear-gradient(		background-repeat: no-repeat;
			background-position: bottom right;
			/* Using background-image over background because image won't intercept clicks (it'll let use open the image link even when there's a count)*/
			background-image: linear-gradient(
	315deg,		315deg,
	rgba(0,0,0,0.55) 0%,		rgba(0,0,0,0.55) 0%,

2026-02-19T13:48:05Z

← Older revision		Revision as of 15:48, 19 February 2026
Line 26:		Line 26:

	.recipe-item-icon.border-green {		.recipe-item-icon.border-green {
	background-color: ~~green~~;		background-color: lime;
	border-color: ~~green~~;		border-color: lime;
	border-style: solid;		border-style: solid;
	}		}

2026-02-19T13:46:36Z

← Older revision		Revision as of 15:46, 19 February 2026
Line 18:		Line 18:
	border-style: solid;		border-style: solid;
	}		}

	.recipe-item-icon.border-yellow {		.recipe-item-icon.border-yellow {
	background-color: yellow;		background-color: yellow;
	border-color: yellow;		border-color: yellow;
			border-style: solid;
			}

			.recipe-item-icon.border-green {
			background-color: green;
			border-color: green;
	border-style: solid;		border-style: solid;
	}		}