User:PenguinEncounter2/userpage-styling.css

/* Content assistance script. Because the sanitizer is way too strict. */

.penguinencounter2-main-sidebar {
	display: grid;
	grid: "main sidebar" auto / auto max-content;
	gap: 10px;
}

@media (max-width: 800px) {
	.penguinencounter2-main-sidebar {
		/* stack them on top of each other instead */
		grid: "sidebar" "main" auto/auto;
	}
}

.pe2-hue-rotate {
	animation: 60s linear infinite recolor;
}

@keyframes recolor {
	from {
		filter: hue-rotate(0deg);
	}
	to {
		filter: hue-rotate(360deg);
	}
}

.penguinencounter2-main {
	grid-area: main;
}
.penguinencounter2-sidebar {
	grid-area: sidebar;
	margin-top: 10px;
}

p.pe2-strip, .pe2-strip p, h1.pe2-strip, .pe2-strip h1, h2.pe2-strip, .pe2-strip h2, h3.pe2-strip, .pe2-strip h3, h4.pe2-strip, .pe2-strip h4 {
	padding: 0;
	margin: 0;
}

.pe2-sidebox-header {
	align-self: stretch;
	text-align: left;
	font-size: 1.2rem;
	padding: 3px 8px;
}

.pe2-mainbox {
	background-image: linear-gradient(90deg, #ffc8f0, #b0b0ff);
}
.pe2-mainbox-header.pe2-mainbox-header.pe2-mainbox-header {
	align-self: stretch;
	text-align: left;
	font-size: 1.2rem;
	padding: 3px 8px;
	background-image: linear-gradient(90deg, #ffb0e0, #8080ff);
}
.pe2-flexlist {
	display: flex;
	flex-flow: row wrap;
	gap: 5px;
	padding: 10px;
}
.pe2-flexlist > p > a, .pe2-flexlist > a {
	padding: 5px;
	font-size: .9rem;
	color: #000000;
	background: rgba(255, 255, 255, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 5px;
}

.pe2-vstack {
	display: flex;
	flex-flow: column nowrap;
	gap: 5px;
}
.pe2-vstack.pe2--nogap {
	gap: 0;
}
.pe2-vstack.pe2--center {
	align-items: center;
}

.pe2-navbox {
	position: absolute;
	bottom: 100%; /* this goes on top of the paragraph. */
	right: 10px;
	width: max-content;
	font-size: .6rem;
	font-family: monospace;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	gap: 5px;
}
.pe2-navbox .pe2--tab {
	padding: 2px 5px;
	border-radius: 5px 5px 0 0;
	width: max-content;
	border: 1px solid #b98ff7;
	background: transparent;
	color: #000000;
	font-size: .6rem;
	font-family: monospace;
}
.pe2-navbox .pe2--tab a {
	color: #000000;
}

.pe2-userboxes {
	display: grid;
	/* 'grid' syntax is cursed */
	grid: auto-flow max-content / repeat(auto-fill, minmax(240px, 1fr));
	gap: 5px;
	justify-items: center;
}

.pe2-hover-only {
	display: none;
	opacity: 0;
}
.pe2-hover-anchor:hover .pe2-hover-only {
	animation: .2s ease-out 1 normal forwards pe2-fadein;
}
@keyframes pe2-fadein {
	from {
		opacity: 0.0;
	}
	to {
		opacity: 0.5;
	}
}

.pe2-rel {
	position:relative;
	border: 1px solid #b98ff7;
	padding: 3px;
	border-radius: 3px;
}

.penguinencounter2-spoiler {
	color: transparent;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	position: relative;
	background-color: #808080;
}
.penguinencounter2-spoiler::after {
	bottom: 0;
	right: 0;
	position: absolute;
	font-size: .8rem;
	background: #b0b0b0;
	content: "SPOILER";
	padding-right: 3px;
	font-family: monospace;
	padding: 3px 4px 0 3px;
	border-radius: 5px 0 0 0;
	color: #000000;
}

.penguinencounter2-spoiler:hover {
	color: inherit;
	background-color: inherit;
}