MediaWiki:Common.css/src/template/item.scss

From Terraria Wiki
Jump to navigation Jump to search

This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.

Ancestors: / src / template / item.scss

Siblings: achievement.scss animation.scss archive_header.scss archive-box.scss chance.scss coin.scss color_box.scss crafts.scss diagram.scss doc.scss dotlist.scss dpl3.scss editcopy_notice.scss error.scss etext.scss exclusive_icon_link.scss exclusive_icons.scss expert,master,journey.scss flavor_text.scss float_file_box.scss gameText.scss getDropInfo.scss hardmode.scss hatnote.scss history.scss hp.scss info_request.scss infobox.scss infocard.scss item.scss itemlist.scss key.scss l10n_subtemplate.scss licensebox.scss living_preferences.scss loot.scss mctoc.scss msgbox.scss multi-column_list.scss na.scss navbox.scss project.scss protected.scss quotation.scss recipes.scss reflist.scss shortcut.scss sound.scss spoiler.scss summoned.scss templatedata.scss toc_limit.scss toggleBox.scss transclude.scss translation_projects.scss use_time,knockback.scss yes,no.scss

Children: (none)

/********* [[Template:Item]] *********/

.i {
	white-space: nowrap;
	display: inline-block;

	.note2, .id{
		display: block;
	}

	> a.new {
		/* CSS trick for non-existent item images: a orange "?" image */
		display: inline-block;
		width: 16px;
		height: 24px;
		text-indent: -9999px;
		direction: ltr;
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAB3SURBVDhP5ZDdCoAgFIPPI/aY3fSMRrBJTOcRkW76YKDuhyiU64gyEmKeXuktxFoYKOdYdmh5QIu8OzVDznCaHsAHVmzOGoLN8aBCr8L3/QMZDFLfDWhhukiWB7TIO4WYh8HtA7Bztg2oYOf0yo9g57Dwm38QcQN+/9SIQx7WTAAAAABJRU5ErkJggg==');
		background-repeat: no-repeat;
		background-position: center center;
	}

	> img,
	> span.img,
	> a{
		/* item image block */
		display: inline-block;
		line-height: 0;
		vertical-align: middle;
		+ span{
			/* "main" text block after item image */
			margin-left: 2px;
		}
	}
	> img,
	> span.img img,
	> a img {
		/* item image */
		margin: 1px;
	}

	> span {
		display: inline-block;
		text-align: left;
	}

	> span + span {
		/* "bignote" after text block */
		margin-left: 3px;
	}

	&.multi-line,&.-w,&.break {
		> span {
			line-height: 18px;
			vertical-align: middle;
		}
	}

	&.break > span {
		white-space: normal;
	}

	.note {
		color: var(--theme-text-color-note);
		font-size: var(--font-size-s);
	}

	> span:first-of-type > .eico {
		font-size: var(--font-size-xs);
		vertical-align: middle;
	}



	> span:first-of-type > .note2 {
		/*note2*/
		font-size: 100%;
		line-height: 1;
	}

	> span:first-of-type > .eico,
	> span:first-of-type > span.note {
		margin-left: 3px;
	}

	&.-w > span:first-of-type > .eico:last-child,
	&.-w > span:first-of-type > span.note:last-child,
	&.-w > span.img + span > .eico:last-child,
	&.-w > span.img + span > span.note:last-child {
		display: block;
		margin-left: 1px; /* visually left align */
	}

	&.-w > span:first-of-type > span.note:last-child,
	&.-w > span.img + span > span.note:last-child {
		line-height: 1;
	}

	.id {
		font-size: var(--font-size-xs);
		background-color: var(--theme-accent-color);
		font-weight: bold;
		margin-top: 1px;
		padding: 0 2px;
	}

	&.boldname > span:first-of-type span:first-child {
		font-weight: bold;
	}

	&.notecolor span.note {
		color: inherit;
	}

	&.note2color .note2 {
		color: inherit;
	}

	&.block,
	&.block > span:first-child,
	&.allblock,
	&.allblock > * {
		display: block;
	}

	&.allblock > * {
		text-align: inherit;
	}

	&.notesize span.note {
		font-size: 100%;
	}

	&.note2size span .note2 {
		font-size: var(--font-size-s);
	}

	&.alignleft {
		text-align: left;
	}

	&.aligncenter {
		text-align: center;
	}

	&.alignright {
		text-align: right;
	}

	&.textleft > span {
		text-align: left;
	}

	&.textcenter > span {
		text-align: center;
	}

	&.textright > span {
		text-align: right;
	}

	@mixin transform-image {
		// apply the transformations to these two selectors:
		> a:first-child img,
		> img:first-child {
			@content;
		}
	}

	&.flip {
		@include transform-image {
		    transform: scaleY(-1);
		}
	}

	&.mirror {
		@include transform-image {
		    transform: scaleX(-1);
		}
	}

	&.rotate90 {
		@include transform-image {
		    transform: rotate(90deg);
		}
	}

	&.rotate180 {
		@include transform-image {
		    transform: rotate(180deg);
		}
	}

	&.rotate270 {
		@include transform-image {
		    transform: rotate(270deg);
		}
	}

	td.il1c & {
		display: block;
		text-align: center;

		&.alignleft {
			text-align: left;
		}

		&.alignright {
			text-align: right;
		}
	}

	td.il2c & {
		display: block;
		text-align: left;
	}
}

table.item-noborder {
	td.il1c {
		border-right: 0 !important;
		padding-right: 1px;
	}

	td.il2c {
		border-left: 0 !important;
		padding-left: 1px;
	}
}
Retrieved from "https://terraria.wiki.gg/index.php?title=MediaWiki:Common.css/src/template/item.scss&oldid=886768"