MediaWiki:Vector.css

/* All CSS here will be loaded for users of the Vector skin */

:root {
	--page-base-height: calc(72 * var(--pixel-size));
	--panel-width: calc(3 * var(--tile-size));
	--wikigg-header-height: round(up, 35px, var(--pixel-size));

	@supports not (width: round(up, 1px, 1px)) {
		--wikigg-header-height: 35px;
	}
}

body {
	--body-tile-alignment-padding-width: calc(0.5 * mod(100cqw, var(--tile-size)));

	@supports not (width: mod(1px, 1px)) {
		--body-tile-alignment-padding-width: 0;
	}

	display: block grid;
	grid-template-areas:
		"wikigg-header wikigg-header wikigg-header wikigg-header"
		".             page-base     page-base    .             "
		".             panel         head         .             "
		".             panel         content      .             "
		".             panel         data-after   .             "
		".             panel         footer       .             "
		"wikigg-footer wikigg-footer wikigg-footer wikigg-footer";
	grid-template-columns:
		var(--body-tile-alignment-padding-width)
		var(--panel-width) /* panel */
		auto /* content */
		var(--body-tile-alignment-padding-width);
	grid-template-rows:
		var(--wikigg-header-height) /* wikigg header */
		var(--page-base-height) /* page base */
		auto /* head */
		auto /* content */
		auto /* data after content */
		auto /* footer */
		auto; /* wikigg footer */
	overflow-x: hidden;
		
	@media screen and (max-width: 64rem) {
		grid-template-areas:
			"wikigg-header wikigg-header wikigg-header"
			".             page-base     .            "
			".             head          .            "
			".             content       .            "
			".             data-after    .            "
			".             panel         .            "
			".             footer        .            "
			"wikigg-footer wikigg-footer wikigg-footer";
		grid-template-columns:
			var(--body-tile-alignment-padding-width)
			auto /* content */
			var(--body-tile-alignment-padding-width);
		grid-template-rows:
			var(--wikigg-header-height) /* wikigg header */
			var(--page-base-height) /* page base */
			auto /* head */
			auto /* content */
			auto /* data after content */
			auto /* panel */
			auto /* footer */
			auto; /* wikigg footer */
	}
	
	> .suggestions {
		font-size: unset !important;
	}
}

#mw-page-base {
	background: unset;
	contain: strict;
	container-name: page-base;
	container-type: size;
	display: block grid;
	grid-area: page-base;
	grid-template-columns:
		1fr
		[bunny-start] 0 [bunny-end]
		1fr
		[logo-start] min-content [logo-end]
		1fr
		[paquerette-start] 0 [paquerette-end]
		1fr;
	height: unset;
	margin-bottom: calc(2 * var(--pixel-size));

	.page-base-bunny-wrapper {
		display: contents;

		.title-screen-bunny {
			align-self: end;
			grid-area: bunny;
			justify-self: end;
		}
	}

	.page-base-logo-wrapper {
		display: contents;

		.bunburrows-logo {
			align-self: end;
			grid-area: logo;
			justify-self: center;
			pointer-events: none;
			
			.bunburrows-logo__paquerette,
			.bunburrows-logo__down,
			.bunburrows-logo__the,
			.bunburrows-logo__bunburrows {
				pointer-events: visiblePainted;
			}
			
			.bunburrows-logo__bunny {
				pointer-events: visiblePainted;
				cursor: default;
			}
		}
	}

	.page-base-paquerette-wrapper {
		display: contents;

		.title-screen-paquerette {
			align-self: end;
			grid-area: paquerette;
			justify-self: start;
		}
	}
}

#mw-head-base {
	grid-area: head;
	height: unset;
	margin: unset;
}

.content-wrapper {
	display: contents;

	#mw-navigation {
		display: contents;

		#mw-head {
			column-gap: var(--tile-size);
			contain: inline-size layout style paint;
			container-name: head;
			container-type: inline-size;
			display: grid;
			float: unset;
			grid-area: head;
			grid-template-columns: auto auto;
			position: unset;
			width: unset;

			#left-navigation {
				display: inline flow-root;
				float: unset;
				justify-self: left;
				margin: unset;
			}
			
			#right-navigation {
				display: inline flow-root;
				float: unset;
				justify-self: right;
				margin: unset;
			}

			.vector-menu-tabs {
				display: contents;

				.vector-menu-content {
					display: contents;

					.vector-menu-content-list {
						display: contents;

						.mw-list-item {
							background: unset;
							display: inline flow-root;
							float: unset;
							height: var(--tile-size);
							position: relative;
							vertical-align: top;
							width: var(--tile-size);

							& a {
								background: unset;
								height: var(--tile-size);
								opacity: 0;
								padding: unset;
								width: var(--tile-size);
							}

							.head-icon,
							.head-selection-marker {
								left: 0;
								pointer-events: none;
								position: absolute;
								top: 0;
							}
						}

						.mw-watchlink a::before {
							content: unset;
						}

						#ca-watch .head-icon-watch__fill {
							visibility: hidden;
						}
					}
				}
			}

			.vector-menu-dropdown {
				display: inline flow-root;
				float: unset;
				height: var(--tile-size);
				vertical-align: top;
				width: var(--tile-size);
			}

			#p-cactions {
				display: none;
			}

			.vector-search-box {
				display: inline flow-root;
				float: unset;
				height: var(--tile-size);
				margin: unset;
				min-width: calc(4 * var(--tile-size));
				vertical-align: top;
				width: round(down, 35cqw, var(--tile-size));

				@supports not (width: round(down, 35cqw, var(--tile-size))) {
					width: 30cqw;
				}

				.vector-search-box-form {
					height: calc(12 * var(--pixel-size));
					margin-bottom: calc(2 * var(--pixel-size));
					margin-left: calc(2 * var(--pixel-size));
					margin-right: calc(2 * var(--pixel-size));
					margin-top: calc(2 * var(--pixel-size));

					.vector-search-box-inner {
						max-width: unset;
						min-width: unset;
						width: 100%;
						
						.input-box-wrapper {
							display: contents;

							.input-box {
								height: 100%;
								left: 0;
								position: absolute;
								top: 0;
								width: 100%;
								z-index: -1;
							}
						}

						.vector-search-box-input {
							background: unset;
							border: unset;
							box-shadow: unset;
							color: unset;
							font-family: "Super Mario Bros. 2";
							font-size: calc(8 * var(--pixel-size));
							height: 100%;
							padding-bottom: calc(2 * var(--pixel-size));
							padding-left: calc(2 * var(--pixel-size));
							padding-right: calc(10 * var(--pixel-size));
							padding-top: calc(2 * var(--pixel-size));
							
							&::placeholder {
								opacity: 0;
							}
						}

						.searchButton {
							background: unset;
							bottom: unset;
							left: unset;
							min-width: unset;
							right: calc(2 * var(--pixel-size));
							top: calc(2 * var(--pixel-size));
							width: calc(8 * var(--pixel-size));
						}

						.search-icon-wrapper {
							display: contents;
							
							.search-button-icon {
								position: absolute;
								right: calc(2 * var(--pixel-size));
								top: calc(2 * var(--pixel-size));
							}
						}
					}
				}
			}

			.emptyPortlet {
				display: none;
			}
		}

		#mw-panel {
			column-gap: calc(4 * var(--pixel-size));
			contain: strict;
			container-name: panel;
			container-type: size;
			display: grid;
			grid-area: panel;
			grid-auto-flow: row;
			grid-auto-rows: min-content;
			height: 100%;
			padding-left: calc(2 * var(--pixel-size));
			padding-right: calc(2 * var(--pixel-size));
			row-gap: calc(4 * var(--pixel-size));
			width: unset;

			@media screen and (max-width: 64rem) {
				contain: inline-size layout style paint;
				container-type: inline-size;
				grid-template-columns: 1fr 1fr;
				padding-bottom: calc(2 * var(--pixel-size));
				padding-top: calc(2 * var(--pixel-size));
			}

			#p-logo {
				display: none;
			}

			.vector-menu-portal {
				margin: unset;
				padding: calc(3 * var(--pixel-size));
				position: relative;

				.portal-background-wrapper {
					display: contents;

					.ui-box {
						height: 100%;
						left: 0;
						position: absolute;
						top: 0;
						width: 100%;
						z-index: -1;
					}
				}

				.vector-menu-heading {
					background: unset;
					color: var(--style-colour-dark);
					font-size: calc(4 * var(--pixel-size));
					margin-left: unset;
					text-align: center;
				}

				.vector-menu-content {
					& li a {
						color: var(--style-colour-medium);

						&:hover {
							color: var(--style-colour-dark);
						}
					}
				}
			}
		}
	}

	#content {
		contain: inline-size layout style;
		container-name: content;
		container-type: inline-size;
		background-color: var(--style-colour-off-white);
		border: unset;
		grid-area: content;
		margin: unset;
		padding: calc(10 * var(--pixel-size));
		position: relative;

		.content-background-wrapper {
			display: contents;

			.dialogue-box-background {
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
				z-index: -1;
			}
		}

		.content-body {
			contain: inline-size layout style;

			& main {
				--pixel-size: calc(0.5 * var(--root-pixel-size));

				contain: inline-size layout style;
				container-type: inline-size;
				container-name: main;
				image-rendering: crisp-edges;

				@supports not (image-rendering: crisp-edges) {
					image-rendering: pixelated;
				}
			}
		}
	}
}

#mw-data-after-content {
	grid-area: data-after;
}

#footer {
	contain: inline-size layout style paint;
	container-name: footer;
	container-type: inline-size;
	grid-area: footer;
	margin: unset;
	padding: unset;
}

#wikigg-footer {
	grid-area: wikigg-footer;
}

ol {
	counter-reset: list-item -1;
}

ul {
	list-style-image: none;
	list-style-type: "• ";
}

/* Default styling for all themes */
.theme-dynamic,
.theme-pink,
.theme-aquatic,
.theme-hay,
.theme-ghostly,
.theme-purple,
.theme-temple,
.theme-hell,
.theme-void,
.theme-computer,
.theme-dynamic .style-pink,
.theme-dynamic .style-aquatic,
.theme-dynamic .style-hay,
.theme-dynamic .style-ghostly,
.theme-dynamic .style-purple,
.theme-dynamic .style-temple,
.theme-dynamic .style-hell,
.theme-dynamic .style-void,
.theme-dynamic .style-computer,
.theme-dynamic .style-opheline,
.theme-dynamic .style-robot,
.theme-dynamic .style-gold {
	& body {
		background-color: var(--style-colour-light);
	}

	#mw-head {
		background-color: var(--style-colour-dark);
	}
}