P1NK AN1MAL C00K13 G1RAFF3 PLUSH13 - User contributions [en]

MediaWiki:Common.js

2026-04-10T00:19:02Z

Buildababe:

// Adds a search box that filters category members in real time
if (document.querySelector('.mw-category')) {
const input = document.createElement('input');
input.placeholder = 'Filter pages...';
input.style.cssText = `
display: block; margin: 12px 0; padding: 8px 16px;
border: 2px solid #b3e5fc; border-radius: 20px;
font-family: Nunito, sans-serif; font-size: 1em; width: 300px;
`;
document.querySelector('.mw-category').before(input);
input.addEventListener('input', () => {
document.querySelectorAll('.mw-category li').forEach(li => {
li.style.display = li.textContent.toLowerCase()
.includes(input.value.toLowerCase()) ? '' : 'none';
});
});
}

/* ============================================================
WIKI COMMON.JS — Bundled Scripts
Paste into Special:EditPage/MediaWiki:Common.js
============================================================ */

( function () {
'use strict';

/* ----------------------------------------------------------
1. RANDOM WELCOME MESSAGE on the main page
---------------------------------------------------------- */
var greetings = [
"Welcome to the show! 🎪",
"Step right up! 🎠",
"The circus is in town! 🎡",
"Tonight's performance begins now! 🎭",
];
var subtitleEl = document.querySelector('.circus-subtitle');
if (subtitleEl) {
subtitleEl.textContent = greetings[Math.floor(Math.random() * greetings.length)];
}

/* ----------------------------------------------------------
2. CARDS CYCLE THROUGH COLORS on hover
---------------------------------------------------------- */
var cardColors = ['#29b6f6','#f06292','#ab47bc','#66bb6a','#ffa726'];
document.querySelectorAll('.circus-card').forEach(function (card) {
card.addEventListener('mouseenter', function () {
var c = cardColors[Math.floor(Math.random() * cardColors.length)];
card.style.borderColor = c;
var icon = card.querySelector('.circus-card-icon');
if (icon) icon.style.color = c;
});
card.addEventListener('mouseleave', function () {
card.style.borderColor = '';
var icon = card.querySelector('.circus-card-icon');
if (icon) icon.style.color = '';
});
});

/* ----------------------------------------------------------
3. LOGO SPIN on click
---------------------------------------------------------- */
var logo = document.querySelector('.circus-logo-inner');
if (logo) {
logo.style.transition = 'transform 0.6s cubic-bezier(0.34,1.56,0.64,1)';
logo.style.cursor = 'pointer';
logo.addEventListener('click', function () {
logo.style.transform = 'rotate(360deg) scale(1.2)';
setTimeout(function () { logo.style.transform = ''; }, 600);
});
}

/* ----------------------------------------------------------
4. TYPEWRITER EFFECT on wiki subtitle
---------------------------------------------------------- */
var typeEl = document.querySelector('.circus-subtitle');
if (typeEl) {
var fullText = typeEl.textContent;
typeEl.textContent = '';
var i = 0;
var type = function () {
if (i < fullText.length) {
typeEl.textContent += fullText[i++];
setTimeout(type, 40);
}
};
type();
}

/* ----------------------------------------------------------
5. DARK MODE TOGGLE button (bottom-right)
---------------------------------------------------------- */
var darkBtn = document.createElement('button');
darkBtn.title = 'Toggle dark mode';
darkBtn.style.cssText = [
'position:fixed','top:90px','right:16px',
'width:40px','height:40px','border-radius:50%',
'border:2px solid #b3e5fc','background:#f0f8ff',
'font-size:18px','cursor:pointer','z-index:9999',
'display:flex','align-items:center','justify-content:center'
].join(';');
document.body.appendChild(darkBtn);

var darkCSS = [
'html,body,#content,.mw-body,.mw-page-container,',
'#mw-panel,.vector-menu-portal,#mw-head{',
'background-color:#0d1b2a!important;color:#cde8f6!important}',
'.circus-card{background:#122336!important;border-color:#1e4060!important}',
'.circus-title{color:#4fc3f7!important}',
'a{color:#4fc3f7!important}'
].join('');
var darkStyle = document.createElement('style');
document.head.appendChild(darkStyle);

function applyDark(on) {
darkStyle.textContent = on ? darkCSS : '';
darkBtn.textContent = on ? '☀️' : '🌙';
}

darkBtn.addEventListener('click', function () {
var isDark = localStorage.getItem('wikiDarkMode') === '1';
localStorage.setItem('wikiDarkMode', isDark ? '0' : '1');
applyDark(!isDark);
});

applyDark(localStorage.getItem('wikiDarkMode') === '1');

/* ----------------------------------------------------------
6. WORD COUNT on article pages
---------------------------------------------------------- */
var contentArea = document.querySelector('#mw-content-text');
var isEditing = document.querySelector('.action-edit, .action-submit');
if (contentArea && !isEditing) {
var words = contentArea.innerText.trim().split(/\s+/).length;
var wordBar = document.createElement('div');
wordBar.style.cssText = 'font-family:Nunito,sans-serif;font-size:0.85em;color:#4a7a9e;margin-bottom:12px;';
wordBar.textContent = '📄 ' + words.toLocaleString() + ' words';
contentArea.prepend(wordBar);
}

/* ----------------------------------------------------------
7. "LAST EDITED X AGO" in the footer
---------------------------------------------------------- */
var lastMod = document.querySelector('#footer-info-lastmod');
if (lastMod) {
var match = lastMod.textContent.match(/(\d{1,2} \w+ \d{4})/);
if (match) {
var edited = new Date(match[1]);
var mins = Math.floor((Date.now() - edited) / 60000);
var ago = mins < 60
? mins + ' minutes ago'
: mins < 1440
? Math.floor(mins / 60) + ' hours ago'
: Math.floor(mins / 1440) + ' days ago';
lastMod.textContent += ' (' + ago + ')';
}
}

/* ----------------------------------------------------------
8. HIGHLIGHT RED LINKS with a tooltip
---------------------------------------------------------- */
document.querySelectorAll('a.new').forEach(function (link) {
link.title = '⚠️ This page does not exist yet — click to create it!';
link.style.cssText = 'background:#fff0f3;border-radius:4px;padding:1px 4px;text-decoration:none!important;';
});

/* ----------------------------------------------------------
9. COPY BUTTON on code blocks
---------------------------------------------------------- */
document.querySelectorAll('pre').forEach(function (pre) {
var copyBtn = document.createElement('button');
copyBtn.textContent = 'Copy';
copyBtn.style.cssText = [
'float:right','padding:2px 10px','font-size:0.8em',
'border:2px solid #b3e5fc','border-radius:10px',
'background:#f0f8ff','cursor:pointer',
'font-family:Nunito,sans-serif'
].join(';');
copyBtn.addEventListener('click', function () {
navigator.clipboard.writeText(pre.innerText).then(function () {
copyBtn.textContent = 'Copied!';
setTimeout(function () { copyBtn.textContent = 'Copy'; }, 2000);
});
});
pre.prepend(copyBtn);
});

/* ----------------------------------------------------------
10. PRESS "/" TO FOCUS SEARCH
---------------------------------------------------------- */
document.addEventListener('keydown', function (e) {
var tag = document.activeElement.tagName;
if (e.key === '/' && tag !== 'INPUT' && tag !== 'TEXTAREA') {
e.preventDefault();
var searchBox = document.querySelector('#searchInput, .vector-search-box input');
if (searchBox) searchBox.focus();
}
});

/* ----------------------------------------------------------
11. STICKY TOC — highlights current section while scrolling
---------------------------------------------------------- */
var toc = document.querySelector('#toc');
var headings = document.querySelectorAll('h2, h3');
if (toc && headings.length) {
window.addEventListener('scroll', function () {
var current = '';
headings.forEach(function (h) {
if (window.scrollY >= h.offsetTop - 100) current = h.id;
});
toc.querySelectorAll('a').forEach(function (a) {
var active = a.href.includes(current) && current !== '';
a.style.color = active ? '#0288d1' : '';
a.style.fontWeight = active ? '900' : '';
});
});
}

/* ----------------------------------------------------------
12. RANDOM ARTICLE BUTTON on main page
---------------------------------------------------------- */
var heroEl = document.querySelector('.circus-hero');
var isMainPage = document.title.toLowerCase().includes('main');
if (heroEl && isMainPage) {
var randBtn = document.createElement('a');
randBtn.href = '/wiki/Special:Random';
randBtn.textContent = '🎲 Take me somewhere random!';
randBtn.style.cssText = [
'display:inline-block','margin-top:10px',
'padding:10px 24px','border-radius:24px',
'background:#29b6f6','color:white!important',
'font-family:Nunito,sans-serif','font-weight:700',
'font-size:1em','text-decoration:none!important',
'transition:transform 0.2s'
].join(';');
randBtn.addEventListener('mouseenter', function () { randBtn.style.transform = 'scale(1.05)'; });
randBtn.addEventListener('mouseleave', function () { randBtn.style.transform = ''; });
heroEl.appendChild(randBtn);
}

/* ----------------------------------------------------------
13. COLOR-CODED CATEGORY TAGS
---------------------------------------------------------- */
var catPalette = [
'#29b6f6','#f06292','#ab47bc','#66bb6a',
'#ffa726','#ef5350','#26c6da','#d4e157'
];
document.querySelectorAll('#catlinks a').forEach(function (a) {
var idx = a.textContent.charCodeAt(0) % catPalette.length;
var c = catPalette[idx];
a.style.cssText = [
'background:' + c + '22',
'color:' + c,
'border:1.5px solid ' + c + '66',
'border-radius:12px',
'padding:2px 10px',
'margin:2px',
'display:inline-block',
'font-weight:700',
'text-decoration:none!important'
].join(';');
});

/* ----------------------------------------------------------
14. LIVE SEARCH FILTER on category pages
---------------------------------------------------------- */
var catSection = document.querySelector('.mw-category');
if (catSection) {
var filterInput = document.createElement('input');
filterInput.placeholder = '🔍 Filter pages...';
filterInput.style.cssText = [
'display:block','margin:12px 0','padding:8px 16px',
'border:2px solid #b3e5fc','border-radius:20px',
'font-family:Nunito,sans-serif','font-size:1em','width:300px'
].join(';');
catSection.before(filterInput);
filterInput.addEventListener('input', function () {
var val = filterInput.value.toLowerCase();
document.querySelectorAll('.mw-category li').forEach(function (li) {
li.style.display = li.textContent.toLowerCase().includes(val) ? '' : 'none';
});
});
}

}() );

/* ----------------------------------------------------------
LOADING SCREEN
---------------------------------------------------------- */
( function () {

// Create the overlay
var overlay = document.createElement('div');
overlay.id = 'wiki-loader';
overlay.style.cssText = [
'position:fixed','top:0','left:0',
'width:100vw','height:100vh',
'background:#f0f8ff',
'display:flex','flex-direction:column',
'align-items:center','justify-content:center',
'z-index:99999','transition:opacity 0.6s ease'
].join(';');

// Logo
var logo = document.createElement('div');
logo.textContent = '📖';
logo.style.cssText = [
'width:100px','height:100px','border-radius:50%',
'background:linear-gradient(145deg,#4fc3f7,#0288d1)',
'display:flex','align-items:center','justify-content:center',
'font-size:48px','margin-bottom:24px',
'animation:pulse 1s infinite alternate'
].join(';');

// Wiki name
var title = document.createElement('div');
title.textContent = document.title.split(' - ')[0] || 'Wiki';
title.style.cssText = [
'font-family:Nunito,sans-serif','font-weight:900',
'font-size:2em','color:#0288d1','margin-bottom:20px'
].join(';');

// Stripe bar (decorative)
var stripes = document.createElement('div');
stripes.style.cssText = [
'width:200px','height:8px','border-radius:4px',
'background:repeating-linear-gradient(',
'90deg,#29b6f6 0px,#29b6f6 20px,#ffffff 20px,#ffffff 40px)',
'margin-bottom:20px'
].join('');

// Progress bar track
var track = document.createElement('div');
track.style.cssText = [
'width:200px','height:6px','border-radius:4px',
'background:#b3e5fc','overflow:hidden'
].join(';');

// Progress bar fill
var bar = document.createElement('div');
bar.style.cssText = [
'height:100%','width:0%','border-radius:4px',
'background:#0288d1','transition:width 0.3s ease'
].join(';');

// Loading text
var loadText = document.createElement('div');
loadText.textContent = 'Loading...';
loadText.style.cssText = [
'font-family:Nunito,sans-serif','font-size:0.9em',
'color:#4a7a9e','margin-top:12px'
].join(';');

// Pulse animation
var style = document.createElement('style');
style.textContent = [
'@keyframes pulse{',
'from{transform:scale(1)}',
'to{transform:scale(1.08)}',
'}'
].join('');
document.head.appendChild(style);

// Assemble
track.appendChild(bar);
overlay.appendChild(logo);
overlay.appendChild(title);
overlay.appendChild(stripes);
overlay.appendChild(track);
overlay.appendChild(loadText);
document.body.prepend(overlay);

// Animate the progress bar
var messages = [
'Raising the tent...',
'Warming up the performers...',
'Polishing the wiki...',
'Almost ready...',
'Welcome!'
];
var progress = 0;
var msgIndex = 0;

var ticker = setInterval(function () {
progress += Math.random() * 18 + 8;
if (progress > 100) progress = 100;
bar.style.width = progress + '%';
if (msgIndex < messages.length) {
loadText.textContent = messages[msgIndex++];
}
if (progress >= 100) clearInterval(ticker);
}, 300);

// Hide when page is fully loaded
window.addEventListener('load', function () {
bar.style.width = '100%';
loadText.textContent = 'Welcome!';
setTimeout(function () {
overlay.style.opacity = '0';
setTimeout(function () { overlay.remove(); }, 600);
}, 400);
});

}() );

MediaWiki:Common.js

2026-04-10T00:12:19Z

Buildababe:

MediaWiki:Common.js

2026-04-10T00:07:04Z

Buildababe: Created page with "// Adds a search box that filters category members in real time if (document.querySelector('.mw-category')) { const input = document.createElement('input'); input.placeholder = 'Filter pages...'; input.style.cssText = ` display: block; margin: 12px 0; padding: 8px 16px; border: 2px solid #b3e5fc; border-radius: 20px; font-family: Nunito, sans-serif; font-size: 1em; width: 300px; `; document.querySelector('.mw-category').before(input); input.addEve..."

MediaWiki:Pink Theme.css

2026-04-10T00:05:54Z

Buildababe: Created page with "/* ============================================================ CIRCUS WIKI — MediaWiki:Common.css Paste this entire file into Special:EditPage/MediaWiki:Common.css ============================================================ */ /* --- Google Font Import --- */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap'); /* --- Global Reset --- */ body, #content, #mw-content-text #mw-page-container { background-color: #fdf5..."

/* ============================================================
CIRCUS WIKI — MediaWiki:Common.css
Paste this entire file into Special:EditPage/MediaWiki:Common.css
============================================================ */

/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

/* --- Global Reset --- */
body,
#content,
#mw-content-text #mw-page-container {
background-color: #fdf5f0 !important;
font-family: 'Nunito', sans-serif !important;
color: #5a3a4a !important;
}

/* Hide default MediaWiki chrome for a cleaner look */
#mw-page-base,
#mw-head-base {
background: transparent !important;
}

/* ============================================================
CIRCUS STRIPE BANNER
============================================================ */
.circus-banner {
width: 100%;
height: 80px;
background-image: repeating-linear-gradient(
90deg,
#f06292 0px,
#f06292 44px,
#ffffff 44px,
#ffffff 88px
);
margin-bottom: 0;
}

/* ============================================================
HERO SECTION
============================================================ */
.circus-hero {
text-align: center;
padding: 40px 20px 20px;
position: relative;
}

/* Decorative floating dots */
.circus-hero::before {
content: '';
position: absolute;
top: 60px;
left: 60px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #f9c74f;
}

.circus-hero::after {
content: '';
position: absolute;
top: 120px;
left: 100px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #90dbf4;
}

/* Book icon circle */
.circus-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 130px;
height: 130px;
border-radius: 50%;
background: linear-gradient(145deg, #f48fb1, #e91e8c);
box-shadow: 0 6px 24px rgba(233, 30, 140, 0.25);
margin-bottom: 24px;
font-size: 58px;
line-height: 1;
}

/* Inner ring on logo */
.circus-logo-ring {
display: inline-flex;
align-items: center;
justify-content: center;
width: 130px;
height: 130px;
border-radius: 50%;
background: #f8bbd0;
padding: 8px;
margin-bottom: 24px;
}

.circus-logo-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(145deg, #f48fb1, #e91e8c);
font-size: 52px;
line-height: 1;
}

/* Main title */
.circus-title {
font-family: 'Nunito', sans-serif !important;
font-size: 3.6em !important;
font-weight: 900 !important;
color: #e91e8c !important;
margin: 0 0 8px !important;
line-height: 1.1 !important;
border: none !important;
}

/* Subtitle */
.circus-subtitle {
font-size: 1.35em;
color: #9e6b7a;
font-weight: 400;
margin: 0 0 40px;
}

/* ============================================================
FEATURE CARDS
============================================================ */
.circus-cards {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
padding: 10px 20px 50px;
max-width: 900px;
margin: 0 auto;
}

.circus-card {
flex: 1;
min-width: 200px;
max-width: 260px;
border: 2px solid #f8bbd0;
border-radius: 20px;
background: #fff8fb;
padding: 32px 20px 28px;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
text-decoration: none !important;
color: inherit !important;
display: block;
}

.circus-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(233, 30, 140, 0.12);
text-decoration: none !important;
}

.circus-card-icon {
font-size: 38px;
margin-bottom: 14px;
color: #e91e8c;
display: block;
}

/* SVG-style icon using CSS (pen icon) */
.circus-card-icon-edit::before {
content: '';
display: inline-block;
width: 36px;
height: 36px;
background-color: #e91e8c;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

.circus-card-title {
font-size: 1.15em;
font-weight: 700;
color: #5a3a4a;
margin: 0 0 8px;
}

.circus-card-desc {
font-size: 0.95em;
color: #9e7a88;
margin: 0;
line-height: 1.5;
}

/* ============================================================
EXTRA DECORATIVE DOTS (add via spans in wikitext)
============================================================ */
.dot-green {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: #90dbf4;
right: 120px;
top: 180px;
}

.dot-red {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #f4845f;
right: 200px;
top: 300px;
}

/* ============================================================
ARTICLE CONTENT STYLES (for inner wiki pages)
============================================================ */
#mw-content-text h1,
#mw-content-text h2,
#mw-content-text h3 {
font-family: 'Nunito', sans-serif !important;
color: #e91e8c !important;
}

#mw-content-text h2 {
border-bottom: 2px solid #f8bbd0 !important;
}

/* Infobox styles */
.infobox {
border: 2px solid #f8bbd0 !important;
border-radius: 12px !important;
background: #fff8fb !important;
font-family: 'Nunito', sans-serif !important;
}

.infobox th {
background: #f8bbd0 !important;
color: #9e3a6a !important;
font-weight: 700 !important;
}

/* Category links */
#catlinks {
border: 2px solid #f8bbd0 !important;
border-radius: 10px !important;
background: #fff8fb !important;
font-family: 'Nunito', sans-serif !important;
}

/* Vector 2022 sidebar */
.vector-menu-portal,
.mw-sidebar,
#vector-toc-collapsed-button {
background-color: #fdf5f0 !important;
}

.vector-menu-portal .vector-menu-heading {
color: #e91e8c !important;
font-family: 'Nunito', sans-serif !important;
font-weight: 900 !important;
}

.vector-menu-portal .vector-menu-content a {
color: #9e6b7a !important;
font-family: 'Nunito', sans-serif !important;
}

.vector-menu-portal .vector-menu-content a:hover {
color: #e91e8c !important;
}

/* ============================================================
FULL PAGE BACKGROUND — Circus Wiki theme
============================================================ */

/* The very outermost page background */
html, body {
background-color: #fdf5f0 !important;
}

/* The content area wrapper */
#content,
#mw-content-container,
.mw-body,
.mw-body-content {
background-color: #fdf5f0 !important;
border: none !important;
box-shadow: none !important;
}

/* Vector 2022 specific wrappers */
.mw-page-container,
.mw-page-container-inner,
#mw-content-block {
background-color: #fdf5f0 !important;
}

/* The header/top bar */
#mw-head,
.mw-header,
#vector-page-toolbar {
background-color: #fdf5f0 !important;
border-bottom: 2px solid #f8bbd0 !important;
box-shadow: none !important;
}

/* Search bar to match */
#searchInput,
.vector-search-box input {
background-color: #fff8fb !important;
border: 2px solid #f8bbd0 !important;
border-radius: 20px !important;
font-family: 'Nunito', sans-serif !important;
color: #5a3a4a !important;
}

/* Footer */
#footer,
.mw-footer {
background-color: #fdf5f0 !important;
border-top: 2px solid #f8bbd0 !important;
color: #9e6b7a !important;
}

#footer a,
.mw-footer a {
color: #e91e8c !important;
}

#firstHeading,
.mw-first-heading {
background-image: repeating-linear-gradient(
90deg,
#f06292 0px,
#f06292 44px,
#ffffff 44px,
#ffffff 88px
) !important;
padding: 16px 20px !important;
border-bottom: none !important;
color: #e91e8c !important;
font-family: 'Nunito', sans-serif !important;
font-weight: 900 !important;
text-shadow: 0 0 8px #fff, 0 0 8px #fff !important; /* white glow so text is readable */
}

2026-04-09T23:40:45Z

Buildababe: 1 revision imported

#REDIRECT [[Template:Template link general]]

{{Redirect category shell|
{{R from move}}
}}