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; }