Template:Spec.css: Difference between revisions

:root {
	--inner-width: 56rem;
}
#content {
	font-family: 'Besley', serif !important;
	counter-reset: section;
}

#firstHeading {
	font-weight: 800;
	font-size: 2.5rem;
	font-family: 'Besley', serif !important;
	color: var(--colour-grey-950);
	margin: auto;
	margin-top: 4rem;
	margin-bottom: .25em;
	border: none;
	
	max-width: var(--inner-width);
	width: 100%;
	
    &:has(+ #bodyContent .lede) {
		margin-bottom: 0.15em;
	}
	
	&::after {
		font-weight: 500;
		color: var(--colour-grey-400);
	}
}

#bodyContent {
	font-size: .95rem;
	line-height: 1.6 !important;
}

#mw-content-text {
	font-family: 'Besley', serif !important;
	max-width: var(--inner-width);
	margin: auto;
	color: var(--colour-grey-800);
	margin-bottom: 4rem;
}

span.required, .required code {
	color: var(--colour-bubblegum-700);
}

span.optional, .optional code {
	color: var(--colour-ectoplasm-700);
}

span.multiple, .multiple code {
	color: var(--colour-yellow-700);
}

span.symbol {
	font-family: 'Noto Sans Symbols 2';
}

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

.must {
	color: var(--colour-bubblegum-700); font-weight: bold;
}

.mustnt {
	color: var(--colour-aubergine-700); font-weight: bold;
}

.should {
	color: var(--colour-orange-700); font-weight: bold;
}

.shouldnt {
	color: var(--colour-weezer-700); font-weight: bold;
}

.may {
	color: var(--colour-ectoplasm-700); font-weight: bold;
}

#toc {
	display: block;
	max-width: 24rem;
	background: transparent;
	border: none;
	color: var(--colour-grey-500);
	float: right;
	margin-left: 1rem;
}

.toctitle {
	margin-bottom: .5rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.toctogglespan {
	grid-column: 3;
	color: var(--colour-grey-300);
	label {
		color: var(--colour-grey-500);
	}
	label:hover {
		color: var(--colour-grey-700);
	}
}

#content h2#mw-toc-heading {
	color: var(--colour-grey-600);
	font-family: inherit;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 7%;
	font-size: .85rem;
	margin-top: 0;
}

#content :is(h1, h2, h3, h4, h5, h6, span.mw-editsection) {
	font-family: inherit;
}

#content h2 {
	position: relative;
	border-bottom: 0;
	font-size: 1.75em;
	font-weight: 500;
}

h2 .mw-headline::before {
	position: absolute;
	right: 100%;
	top: 0.175rem;
	
	display: grid;
	align-content: center;
	justify-content: center;
	
	aspect-ratio: 1 / 1;
	width: auto;
	height: 100%;
	white-space: nowrap;
	
	counter-increment: section;
	content: counter(section);
	
	font-size: 1rem;
	color: var(--colour-grey-700);
	background-color: var(--colour-grey-100);
	font-weight: 600;
	margin-right: .5rem;
}

#content :is(pre, code) {
	font-family: "Drafting", monospace !important;
}

#content a {
	font-variant: small-caps;
	letter-spacing: 5%;
	color: var(--colour-denim-800);
}

#content a:visited {
    color: var(--colour-aubergine-800);
}

.lede {
	font-size: 1.1rem;
	color: var(--colour-grey-700);
	text-align: left !important;
	max-width: 36rem;
	margin-right: auto !important;
	margin-top: 0;
	margin-bottom: .5rem;
}

del, .todo {
	color: var(--colour-grey-500);
}

.todo::before {
	content: "❊ todo: ";
}

.mw-highlight .nt {
	color: var(--colour-ectoplasm-700);
}

.mw-highlight .na {
	color: var(--colour-olive-700);
}

.mw-highlight .s {
	color: var(--colour-red-700);
}

.mw-highlight .cm {
	color: var(--colour-weezer-700);
}

pre, code, .mw-code {
    background-color: var(--colour-grey-50);
    color: var(--colour-grey-800);
    border: 1px solid var(--colour-grey-200);
}

.wikitable {
	color: var(--colour-grey-800);
	background-color: var(--colour-grey-50);
	
	& > tr >th, > * > tr > th {
		background-color: var(--colour-grey-100);
	}
	
	& > tr > th, > tr > td, > * > tr > th, > * > tr > td, > tbody > tr > td {
			border: 1px solid var(--colour-grey-400);
			
			& > code {
				background-color: white;
			}
	}
}