MediaWiki:ProfessionalWikiStuff.css
From Cake Popz
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Staff thing */
.container {
max-width: 100%;
width: 790px;
max-height: 700px;
background-color: black;
border: 4px solid white;
display: flex;
position: relative;
box-sizing: border-box;
overflow-y: auto;
padding: 10px;
color: white;
}
.left-side {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.tabber {
width: 100%;
margin-bottom: 10px;
}
.image-row {
display: grid;
grid-template-columns: repeat(2, 204px);
gap: 10px;
justify-content: start;
width: 100%;
max-width: 770px;
margin-bottom: 10px;
}
.image-wrapper {
position: relative;
display: block;
width: 204px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.image-wrapper:hover {
transform: scale(1.05);
z-index:1;
}
.image-box {
width: 204px;
height: 305px;
border: 2px solid white;
border-radius: 6px;
overflow: hidden;
transition: opacity 0.25s ease, box-shadow 0.25s ease;
}
.image-row:has(.image-box:hover) .image-box:not(:hover) {
opacity: 0.3;
}
.image-row:has(.image-box:hover) .image-wrapper:not(:hover) .image-title {
opacity: 0;
}
.image-box:hover {
opacity: 1 !important;
box-shadow: 0 0 20px white;
}
.image-wrapper:hover .image-title {
opacity: 1 !important;
}
.image-box::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("https://static.wikia.nocookie.net/forsaken2024/images/0/0f/Bordertemlate.png/revision/latest?cb=20251124065208");
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 0;
}
.image-title {
position: absolute;
bottom: 250px;
left: 50%;
transform: translateX(-50%);
color: white;
text-align: center;
padding: 2px 6px;
border-radius: 4px;
font-size: clamp(10px, 2vw, 20px);
max-width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 1;
text-shadow:
2px 2px 4px black,
-2px 2px 4px black,
2px -2px 4px black,
-2px -2px 4px black;
transition: opacity 0.25s ease, font-size 0.25s ease;
}
.image-text {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
color: white;
font-weight: bold;
text-align: center;
background: rgba(0, 0, 0, 0);
padding: 2px 6px;
border-radius: 4px;
font-size: 25px;
z-index: 1;
}
.slide-box {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%) skewX(-10deg);
width: 300px;
max-width: 1000px;
min-width: 200px;
height: auto;
max-height: 350px;
background: black;
border: 3px solid white;
color: white;
font-size: 15px;
display: block;
padding: 10px;
border-radius: 6px;
margin-left: -260px;
opacity: 0;
transition: margin-left 0.35s ease, opacity 0.25s ease;
pointer-events: none;
z-index: 10;
white-space: normal;
overflow-wrap: break-word;
overflow-y: auto;
}
.image-wrapper:hover .slide-box {
margin-left: 15px;
opacity: 1;
}
/* ===Main page=== */
/* Sidebar pt2 but better */
.page-wrapper {
display: flex;
justify-content: flex-end;
align-items: flex-start;
gap: 20px;
}
.main-content {
flex: 1;
margin-right: 0px;
}
.sidebar {
width: 250px;
color: white;
font-family: Arial, sans-serif;
box-sizing: border-box;
}
/* One big ol box */
.sidebar-box {
background: rgba(0, 0, 0, 0.85);
border: 2px solid white;
border-radius: 10px;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.sidebar-box h2 {
font-size: 14px;
margin: 10px 0;
border-bottom: 1px solid white;
text-align: center;
}
.sidebar-box .divider {
border: none;
border-top: 1px solid white;
margin: 10px 0;
}
/* Social buttons */
.social {
text-align: center;
padding: 4px 0;
margin: 2px 0;
border-radius: 10px;
font-weight: bold;
}
.social.discord {
background: linear-gradient(135deg, #7289da, #99aab5);
}
.social.twitter {
background: black;
border: 2px solid white;
}
.social.youtube {
background: #FF0000;
}
/* Stats */
.sidebar-box p {
font-size: 16px;
margin: 5px 0;
text-align: center;
}
/* Upcoming character */
.sidebar-box img {
width: 60%;
border-radius: 10px;
transition: all 0.3s ease;
}
.sidebar-box img:hover {
box-shadow: 0 0 20px 5px #d413c7;
transform: scale(1.05);
}
.char-name {
margin-top: 5px;
text-align: center;
font-weight: bold;
}
/* Side box */
.page-section {
position: relative;
}
.main-content {
flex: 1; /* take remaining space */
min-width: 0; /* prevent overflow */
}
.socials-sidebox {
position: absolute;
top: 0;
right: 0;
width: 200px;
max-height: 400px;
overflow-y: auto;
background: rgba(0,0,0,0.85);
border: 2px solid white;
border-radius: 10px;
color: white;
font-family: Arial, sans-serif;
}
.socials-sidebox h2 {
font-size: 13px;
margin-top: 10px;
margin-bottom: 8px;
border-bottom: 1px solid white;
text-align: center;
}
.social {
text-align: center;
padding: 1px 0;
margin: 1px 0;
border-radius: 10px;
font-weight: bold;
cursor: default;
}
.social.discord {
background: linear-gradient(135deg, #7289da, #99aab5);
color: white;
}
.social.twitter {
background: black;
border: 2px solid white;
color: white;
}
.social.youtube {
background: #FF0000;
color: white;
}
.additional-content {
margin-top: 0px;
}
.logo-box {
width: 100%;
height: 400px;
background-color: #000;
border: 2px solid #fff;
position: relative;
overflow: hidden;
}
.logo-box .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.logo-box .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
z-index: 1; /* Behind logo container */
filter: brightness(60%);
}
.logo-box .slide:nth-child(1) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/d/dd/Brandoncastle.png/revision/latest/scale-to-width-down/1000?cb=20250316220951'); animation: fadeSlide 160s infinite 0s; }
.logo-box .slide:nth-child(2) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/f/f8/Yoricks_house_front_entrance.png/revision/latest/scale-to-width-down/1000?cb=20250824002403'); animation: fadeSlide 160s infinite 10s; }
.logo-box .slide:nth-child(3) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/4/47/Yrp_halloween_haunted_mansion_entrance_left.png/revision/latest/scale-to-width-down/1000?cb=20251104195439'); animation: fadeSlide 160s infinite 20s; }
.logo-box .slide:nth-child(4) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/3/3e/Bigmountianinteriorghv2.PNG/revision/latest/scale-to-width-down/1000?cb=20250919213707'); animation: fadeSlide 160s infinite 30s; }
.logo-box .slide:nth-child(5) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/e/ef/Screenshot_2025-02-06_042956.png/revision/latest/scale-to-width-down/1000?cb=20250206124454'); animation: fadeSlide 160s infinite 40s; }
.logo-box .slide:nth-child(6) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/5/5d/Centerpv2.PNG/revision/latest/scale-to-width-down/1000?cb=20250801163007'); animation: fadeSlide 160s infinite 50s; }
.logo-box .slide:nth-child(7) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/e/ef/Bighouseintereir_USG.png/revision/latest/scale-to-width-down/1000?cb=20250527145306'); animation: fadeSlide 160s infinite 60s; }
.logo-box .slide:nth-child(8) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/c/c3/PirateBay1.png/revision/latest/scale-to-width-down/1000?cb=20250326141533'); animation: fadeSlide 160s infinite 70s; }
.logo-box .slide:nth-child(9) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/8/82/UGW_Bloxy_UnderBlueStair.png/revision/latest/scale-to-width-down/1000?cb=20250907121318'); animation: fadeSlide 160s infinite 80s; }
.logo-box .slide:nth-child(10) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/2/20/Carnivalentrancev4.png/revision/latest/scale-to-width-down/1000?cb=20250810030325'); animation: fadeSlide 160s infinite 90s; }
.logo-box .slide:nth-child(11) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/3/39/Blueup.PNG/revision/latest/scale-to-width-down/1000?cb=20250915195915'); animation: fadeSlide 160s infinite 100s; }
.logo-box .slide:nth-child(12) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/9/99/BW_Entrance.png/revision/latest/scale-to-width-down/1000?cb=20250906184235'); animation: fadeSlide 160s infinite 110s; }
.logo-box .slide:nth-child(13) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/c/c8/Bigtempleoutsidett.png/revision/latest/scale-to-width-down/1000?cb=20250731041849'); animation: fadeSlide 160s infinite 120s; }
.logo-box .slide:nth-child(14) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/7/76/C00lkidds_play_diner.png/revision/latest?cb=20250712035502'); animation: fadeSlide 160s infinite 130s; }
.logo-box .slide:nth-child(15) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/7/79/CatalogHeavenBackground.png/revision/latest/scale-to-width-down/1000?cb=20251017200634'); animation: fadeSlide 160s infinite 140s; }
.logo-box .slide:nth-child(16) { background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/c/c4/MakeACake.png/revision/latest/scale-to-width-down/1000?cb=20250820193928'); animation: fadeSlide 160s infinite 150s; }
@keyframes fadeSlide {
0%, 6.25%, 100% { opacity: 0; }
3.125%, 9.375% { opacity: 1; }
}
.logo-box .logo-container {
position: relative;
z-index: 5; /* Above slides */
display: flex;
flex-direction: column;
align-items: center;
}
.logo-box .logo {
max-width: 370px;
height: auto;
}
.logo-box .logo-text {
color: white;
text-align: center;
text-shadow: 1px 1px 3px black;
}
.slideshow-box {
width: 100%;
height: 500px;
max-height:600px;
max-width: auto;
position: relative;
overflow: hidden;
border: 2px solid #000;
box-sizing: border-box;
aspect-ratio: 16 / 9;
}
/* Slide layers */
.slideshow-box {
width: 100%;
height: 400px;
border: 2px solid #000;
background: url('https://static.wikia.nocookie.net/forsaken2024/images/7/71/1x1x1x1reworkbanner.png/revision/latest?cb=20260131024416') center/cover no-repeat;
position: relative;
overflow: hidden;
}
/* Slide layers */
.slideshow-box .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
}
.slideshow-box .slide.second {
background-image: url('');
animation: fadeSlide 30s infinite;
}
.slideshow-box .slide.third {
background-image: url('');
animation: fadeSlide 30s infinite 10s;
}
@keyframes fadeSlide {
0%, 30%, 100% { opacity: 0; }
5%, 25% { opacity: 1; }
}
/* Overlay */
.slideshow-box .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
/* Top-left text */
.slideshow-box .title {
position: absolute;
top: 15px;
left: 15px;
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 2px 2px 4px black;
pointer-events: none;
z-index: 4;
}
.slideshow-box .play-button {
position: absolute;
bottom: 15px;
right: 15px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #28a745;
color: white;
font-size: 28px;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
z-index: 5;
text-align: center;
transition: all 0.3s ease;
overflow: hidden;
box-shadow: 0 0 5px #000;
}
.slideshow-box .play-button:hover {
background-color: #1f7a30;
animation: flickerRed 1s infinite alternate;
}
.slideshow-box .play-button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/9/90/Spectre.png/revision/latest/scale-to-width-down/1000?cb=20250709151018');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
pointer-events: none;
z-index: 6;
}
.slideshow-box .play-button:hover::before {
animation: ghostFlicker 0.6s infinite;
}
@keyframes ghostFlicker {
0% { opacity: 0; transform: translate(0,0); }
10% { opacity: 0.25; transform: translate(0.5px, -0.5px); }
30% { opacity: 0.1; transform: translate(-0.5px, 0.5px); }
50% { opacity: 0.3; transform: translate(0.2px, -0.2px); }
70% { opacity: 0.05; transform: translate(-0.2px, 0.2px); }
90% { opacity: 0.2; transform: translate(0,0); }
100% { opacity: 0; transform: translate(0,0); }
}
@keyframes flickerRed {
0% { box-shadow: 0 0 5px #800000; }
25% { box-shadow: 0 0 12px #ff0000; }
50% { box-shadow: 0 0 7px #a00000; }
75% { box-shadow: 0 0 10px #ff1111; }
100% { box-shadow: 0 0 5px #800000; }
}
.slideshow-box .easter-egg-text {
position: absolute;
top: 30%;
left: 20%;
transform: translate(-50%, -50%);
font-size: 42px;
font-weight: bold;
color: white;
text-shadow: 2px 2px 6px black;
opacity: 0;
pointer-events: none;
z-index: 11;
text-align: center;
white-space: pre-wrap;
transition: opacity 0.2s;
}
/* Glitch flicker */
@keyframes glitchFlicker {
0% { opacity: 0.1; transform: translate(0,0); }
10% { opacity: 0.9; transform: translate(-2px,1px); }
20% { opacity: 0.2; transform: translate(2px,-1px); }
30% { opacity: 0.7; transform: translate(-1px,0); }
40% { opacity: 0.3; transform: translate(1px,1px); }
50% { opacity: 0.8; transform: translate(0,-1px); }
60% { opacity: 0.3; transform: translate(-1px,1px); }
70% { opacity: 0.8; transform: translate(2px,0); }
80% { opacity: 0.2; transform: translate(0,1px); }
90% { opacity: 0.7; transform: translate(-1px,-1px); }
100% { opacity: 0.1; transform: translate(0,0); }
}
/* Darken slides only, not text */
.slideshow-box.darkened .slide {
filter: brightness(0.3);
transition: filter 1s ease;
}
.play-wrapper {
position: absolute;
bottom: 15px;
right: 15px;
display: flex;
align-items: center;
gap: 10px;
z-index: 5;
}
.arrow-text {
display: flex;
align-items: center;
font-size: 20px;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px black;
cursor: pointer;
}
.arrow-text .arrow {
margin-right: 5px;
}
/* Play button */
.play-button {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #28a745;
color: white;
font-size: 28px;
font-weight: bold;
border-radius: 6px;
text-decoration: none;
transition: all 0.3s ease;
overflow: hidden;
box-shadow: 0 0 5px #000;
}
.play-button:hover {
background-color: #1f7a30;
animation: flickerRed 1s infinite alternate;
}
.play-button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://static.wikia.nocookie.net/forsaken2024/images/9/90/Spectre.png/revision/latest/scale-to-width-down/1000?cb=20250709151018');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
pointer-events: none;
z-index: 6;
}
.play-button:hover::before {
animation: ghostFlicker 0.6s infinite;
}
@keyframes ghostFlicker {
0% { opacity: 0; transform: translate(0,0); }
10% { opacity: 0.25; transform: translate(0.5px, -0.5px); }
30% { opacity: 0.1; transform: translate(-0.5px, 0.5px); }
50% { opacity: 0.3; transform: translate(0.2px, -0.2px); }
70% { opacity: 0.05; transform: translate(-0.2px, 0.2px); }
90% { opacity: 0.2; transform: translate(0,0); }
100% { opacity: 0; transform: translate(0,0); }
}
.arrow-text {
position: absolute;
bottom: 40px;
right: 85px;
font-size: 20px;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px black;
display: flex;
align-items: center;
gap: 5px;
z-index: 6;
}
.slideshow-box .play-button {
color: white !important;
}
.see-more-button {
position: absolute;
bottom: 80px;
right: 15px;
padding: 6px 30px;
background-color: black;
color: white;
font-weight: bold;
border: 2px solid white;
border-radius: 0;
cursor: pointer;
text-align: center;
z-index: 6;
white-space: nowrap;
transition: all 0.3s ease;
box-shadow: 0 0 3px #000;
}
.see-more-button:hover {
background-color: white;
color: black;
border: 2px solid black;
}
/*Popout boxes */
.container, .container2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 600px) {
.square, .square2 {
flex: 1 1 100%;
max-width: 100%;
}
.slideshow-box {
aspect-ratio: auto;
}
}
.square {
flex: 1;
max-width: 250px;
height: 320px;
background-color: #000;
border: 2px solid #fff;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
transition: flex 0.3s, filter 0.3s;
cursor: pointer;
color: #fff;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.square img {
width: 100%;
height: 119%;
object-fit: cover;
}
.square hr {
width: 80%;
border: 1px solid #fff;
margin: 30px 0 10px 0;
}
.square p {
text-align: center;
font-size: 16px;
margin: 0;
}
/* Hide description initially */
.square .placeholder {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.3s ease, max-height 0.3s ease;
}
/* Hover effects */
.container:hover .square {
filter: brightness(50%);
}
.container .square:hover {
flex: 10;
filter: brightness(100%);
}
.container .square:hover .placeholder {
opacity: 1;
max-height: 500px; /* make large enough to fit text */
margin-top: 10px;
}
/* Squares v2 */
.square2 {
flex: 1;
max-width: 250px;
height: 320px;
background-color: #000;
border: 2px solid #fff;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
transition: flex 0.3s, filter 0.3s;
cursor: pointer;
color: #fff;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.square2 img {
width: 100%;
height: 119%;
object-fit: cover;
}
.square2 hr {
width: 80%;
border: 1px solid #fff;
margin: 30px 0 10px 0;
}
.square2 p {
text-align: center;
font-size: 16px;
margin: 0;
}
/* Hidden text for v2 */
.square2 .placeholder2 {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.3s ease, max-height 0.3s ease;
}
/* Hover dim effect */
.container2:hover .square2 {
filter: brightness(50%);
}
/* Hover expand effect */
.container2 .square2:hover {
flex: 10;
filter: brightness(100%);
}
/* Reveal description */
.container2 .square2:hover .placeholder2 {
opacity: 1;
max-height: 500px;
margin-top: 10px;
}
/* w1k1kidd trivia */
.scroll-sideways {
position: relative;
padding: 40px 60px;
padding-left: 220px;
background: #f5e6c5;
background-image:
repeating-linear-gradient(90deg,
rgba(255,255,255,0.1) 0px,
rgba(255,255,255,0.1) 2px,
rgba(0,0,0,0.05) 3px,
rgba(0,0,0,0.05) 5px),
radial-gradient(circle at center, #fff7dd 0%, #e8cf9a 80%);
border-top: 3px solid #c6a06a;
border-bottom: 3px solid #c6a06a;
color: #3c2a15;
font-family: "Georgia", serif;
box-shadow:
inset 0 0 35px rgba(0,0,0,0.35),
0 8px 25px rgba(0,0,0,0.4);
border-radius: 6px;
text-align: right;
}
.scroll-sideways::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -25px;
width: 50px;
background: linear-gradient(
90deg,
#cfae77 0%,
#f7eacc 40%,
#e0c28a 60%,
#cfae77 100%
);
border: 3px solid #b8945d;
border-radius: 50px;
box-shadow:
inset 0 0 25px rgba(0,0,0,0.4),
-10px 0 20px rgba(0,0,0,0.5);
z-index: 3;
}
.scroll-sideways::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -25px;
width: 50px;
background: linear-gradient(
90deg,
#cfae77 0%,
#e0c28a 40%,
#f7eacc 60%,
#cfae77 100%
);
border: 3px solid #b8945d;
border-radius: 50px;
box-shadow:
inset 0 0 25px rgba(0,0,0,0.4),
10px 0 20px rgba(0,0,0,0.5);
z-index: 3;
}
.scroll-sideways .scroll-image {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
width: 180px;
height: 180px;
background: url("https://static.wikia.nocookie.net/forsaken2024/images/4/47/Placeholder.png/revision/latest?cb=20251201191646") no-repeat center/cover;
border-radius: 8px;
z-index: 2;
}
