Template:Kleio status/styles.css

/* Styles for [[Template:Kleio status]] -- a parchment scroll userbox.
 * The scroll carries .mw-no-invert: Extension:DarkMode inverts the whole page,
 * and parchment that inverts is no longer parchment.
 */
.kleio-scroll {
	float: left;
	width: 17em;
	max-width: 100%;
	margin: 0 1em 1em 0;
	font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
	color: #402d16;
	line-height: 1.45;
}

/* the wooden rods, top and bottom */
.kleio-scroll-rod {
	position: relative;
	height: 0.85em;
	margin: 0 -0.55em;
	border-radius: 0.45em;
	background: linear-gradient( to bottom, #6b4f2a 0%, #b98f52 30%, #d9b57c 45%, #8a6733 75%, #4e381c 100% );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.35 );
}

/* the knobs sticking out at each end of a rod */
.kleio-scroll-rod::before,
.kleio-scroll-rod::after {
	content: "";
	position: absolute;
	top: -0.18em;
	width: 0.6em;
	height: 1.2em;
	border-radius: 0.3em;
	background: linear-gradient( to bottom, #5c4222 0%, #c19a5e 45%, #43301a 100% );
}

.kleio-scroll-rod::before {
	left: -0.32em;
}

.kleio-scroll-rod::after {
	right: -0.32em;
}

/* the parchment itself -- edge gradients read as the sheet curling away */
.kleio-scroll-sheet {
	padding: 0.9em 1.1em;
	background-color: #f2e2bf;
	background-image:
		linear-gradient( to right, rgba( 122, 88, 40, 0.22 ) 0, rgba( 122, 88, 40, 0 ) 1.3em ),
		linear-gradient( to left, rgba( 122, 88, 40, 0.22 ) 0, rgba( 122, 88, 40, 0 ) 1.3em ),
		linear-gradient( to bottom, rgba( 122, 88, 40, 0.3 ) 0, rgba( 122, 88, 40, 0 ) 1.1em ),
		linear-gradient( to top, rgba( 122, 88, 40, 0.3 ) 0, rgba( 122, 88, 40, 0 ) 1.1em );
	box-shadow: inset 0 0 2.5em rgba( 150, 110, 55, 0.35 );
}

.kleio-scroll-title {
	margin-bottom: 0.5em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid rgba( 90, 62, 26, 0.4 );
	font-size: 1.1em;
	font-variant: small-caps;
	letter-spacing: 0.05em;
	text-align: center;
}

.kleio-scroll-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.85em;
}

.kleio-scroll-val {
	font-weight: bold;
	white-space: nowrap;
	padding-left: 0.6em;
}

.kleio-scroll-foot {
	margin-top: 0.55em;
	padding-top: 0.35em;
	border-top: 1px solid rgba( 90, 62, 26, 0.3 );
	font-size: 0.75em;
	font-style: italic;
	text-align: center;
}

/* narrow screens: stop floating, let it take the column */
@media screen and ( max-width: 550px ) {
	.kleio-scroll {
		float: none;
		margin: 0 auto 1em auto;
	}
}