MediaWiki:Common.css/src/template/diagram.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 / diagram.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:Diagram]] *********/

table.diagram {
	border-spacing: 0;
	background: transparent;

	tr {
		height: 1px;
		text-align: center;
	}

	td {
		&.l {
			border-style: none;
			border-width: 1px;
			border-color: var(--theme-box-border-color);
			padding: 0.5em;
		}

		&.n {
			padding: 0;
		}

		&.db {
			border-bottom-style: dashed;
		}

		&.dr {
			border-right-style: dashed;
		}

		&.sb {
			border-bottom-style: solid;
		}

		&.sr {
			border-right-style: solid;
		}

		&.nb {
			border-bottom-style: solid;
			border-bottom-color: transparent;
		}

		&.nr {
			border-right-style: solid;
			border-right-color: transparent;
		}

		// center dot fix
		&.cf {
			position: relative;

			&:after {
				content: "";
				display: block;
				position: absolute;
				width: 0.9px;
				height: 1px;
				border-bottom: 1px solid var(--theme-box-border-color);
				right: 0;
				bottom: 0;
			}
		}

		@mixin arrow {
			position: relative;

			&:before {
				content: "";
				display: block;
				position: absolute;
				width: 0;
				height: 0;
				box-sizing: content-box;
				border-style: solid;
				border-color: var(--theme-box-border-color);
				@content;
			}

		}

		&.alt {
			@include arrow {
				left: 0;
				bottom: -1px;
				border-width: 3px 8px 1px 0;
				border-top-color: transparent;
			}
		}

		&.alb {
			@include arrow {
				left: 0;
				top: 0;
				border-width: 0 8px 3px 0;
				border-bottom-color: transparent;
			}
		}

		&.art {
			@include arrow {
				right: 0;
				bottom: -1px;
				border-width: 3px 0 1px 8px;
				border-top-color: transparent;
			}
		}

		&.arb {
			@include arrow {
				right: 0;
				top: 0;
				border-width: 0 0 3px 8px;
				border-bottom-color: transparent;
			}
		}

		&.atl {
			@include arrow {
				right: -1px;
				top: 0;
				border-width: 0 1px 8px 3px;
				border-left-color: transparent;
			}
		}

		&.atr {
			@include arrow {
				left: 0;
				top: 0;
				border-width: 0 3px 8px 0;
				border-right-color: transparent;
			}
		}

		&.abl {
			@include arrow {
				right: -1px;
				bottom: 0;
				border-width: 8px 1px 0 3px;
				border-left-color: transparent;
			}
		}

		&.abr {
			@include arrow {
				left: 0;
				bottom: 0;
				border-width: 8px 3px 0 0;
				border-right-color: transparent;
			}
		}

		&.ct,
		&.cb {
			position: relative;
		}

		&.sr.cb {
			border-right-color: transparent;
		}

		@mixin unlinked-crossing {
			content: "";
			display: block;
			position: absolute;
			border-style: solid;
			border-color: var(--theme-box-border-color);
		}

		&.ct:before {
			@include unlinked-crossing;
			right: 0;
			top: 0;
			width: 100%;
			height: calc(100% - 4px);
			border-width: 0 1px 0 0;
		}

		&.cb:before {
			@include unlinked-crossing;
			right: -1px;
			bottom: 0;
			width: 100%;
			height: calc(100% - 4px);
			border-width: 0 1px 0 0;
		}

		&.ct:after {
			@include unlinked-crossing;
			right: -4px;
			bottom: -5px;
			width: 5px;
			height: 9px;
			border-width: 1px 1px 1px 0;
			border-radius: 0 10px 10px 0;
		}

		&.no-border {
			border: none;
		}

		&.craft-station {
			border: none;
			padding: 2px 0;
		}
	}
}

.diagram-box {
	border-width: 2px;
	border-style: solid;
	border-color: var(--theme-box-border-color);
	border-radius: 7px;
	padding: 0.25em 0.5em;

	.note-text {
		line-height: 1.25;
		margin-top: 0.25em;
	}

	> .note-text:first-child {
		margin-top: auto;
	}

	> img:first-child {
		margin-top: 2px;
	}
}

/****** crafting-tree ******/
.crafting-tree {
	overflow: auto;
	padding: 0.5em 0;
	font-size: 12px;
	line-height: 1.25;

	.diagram {
		white-space: nowrap;
	}
}
Retrieved from "https://terraria.wiki.gg/index.php?title=MediaWiki:Common.css/src/template/diagram.scss&oldid=869944"