MediaWiki:Common.css
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.
/* ========================================
MODERN PINK THEME FOR CORATO WIKI
Compatible with MediaWiki
======================================== */
/* CSS VARIABLES - Theme colors and effects */
:root {
--light-pink: #ffeef7;
--dark-pink: #e91e63;
--accent-pink: #f8bbd9;
--pink-cyber: #ff6b9d;
--pink-crystal: rgba(255, 107, 157, 0.3);
--gradient-bg: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
--card-shadow: 0 8px 32px rgba(255, 107, 157, 0.2);
--hover-shadow: 0 12px 40px rgba(255, 107, 157, 0.3);
--surface-glass: rgba(255, 255, 255, 0.1);
--surface-elevated: rgba(255, 255, 255, 0.15);
--glass-blur: blur(15px);
--shadow-kawaii: 0 8px 32px rgba(255, 107, 157, 0.25);
--shadow-neon: 0 0 20px rgba(255, 107, 157, 0.6);
--space-lg: 20px;
}
/* KEYFRAME ANIMATIONS */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes sparkleRotate {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
100% { transform: rotate(360deg) scale(1); }
}
/* ALWAYS VISIBLE SIDEBAR - MediaWiki Compatible */
body.mediawiki #mw-panel,
body.skin-vector #mw-panel,
body.skin-vector-legacy #mw-panel,
body.skin-timeless #mw-panel,
#mw-panel,
.mw-panel,
.sidebar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: fixed !important;
left: 0 !important;
top: 0 !important;
width: 180px !important;
height: 100vh !important;
overflow-y: auto !important;
z-index: 100 !important;
background: linear-gradient(135deg, rgba(255, 238, 247, 0.95) 0%, rgba(248, 187, 217, 0.95) 100%) !important;
backdrop-filter: blur(15px) !important;
box-shadow: 4px 0 20px rgba(233, 30, 99, 0.15) !important;
border-right: 2px solid rgba(233, 30, 99, 0.2) !important;
padding: 15px 0 !important;
}
/* Sidebar links styling */
#mw-panel .portal {
margin-bottom: 15px !important;
padding: 0 12px !important;
}
#mw-panel .portal h3 {
color: #e91e63 !important;
font-weight: 700 !important;
font-size: 1.0em !important;
margin-bottom: 8px !important;
padding: 6px 10px !important;
background: rgba(233, 30, 99, 0.1) !important;
border-radius: 8px !important;
border-left: 3px solid #e91e63 !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
}
#mw-panel .portal .body ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#mw-panel .portal .body ul li {
margin: 0 0 5px 0 !important;
padding: 0 !important;
}
#mw-panel .portal .body ul li a {
display: block !important;
padding: 6px 10px !important;
color: #c44569 !important;
text-decoration: none !important;
border-radius: 6px !important;
transition: all 0.3s ease !important;
font-weight: 500 !important;
border-left: 2px solid transparent !important;
font-size: 0.9em !important;
}
#mw-panel .portal .body ul li a:hover {
background: rgba(233, 30, 99, 0.15) !important;
color: #e91e63 !important;
border-left: 2px solid #e91e63 !important;
transform: translateX(3px) !important;
box-shadow: 0 2px 6px rgba(233, 30, 99, 0.2) !important;
}
/* Special style for sidebar image */
#mw-panel img {
border-radius: 15px !important;
box-shadow: 0 8px 25px rgba(233, 30, 99, 0.3) !important;
margin-bottom: 20px !important;
transition: transform 0.3s ease !important;
}
#mw-panel img:hover {
transform: scale(1.05) !important;
}
/* Custom scrollbar for sidebar */
#mw-panel::-webkit-scrollbar {
width: 6px !important;
}
#mw-panel::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 3px !important;
}
#mw-panel::-webkit-scrollbar-thumb {
background: rgba(233, 30, 99, 0.4) !important;
border-radius: 3px !important;
}
#mw-panel::-webkit-scrollbar-thumb:hover {
background: rgba(233, 30, 99, 0.6) !important;
}
/* Adjusts main content to not overlap the sidebar - RESPONSIVE */
@media screen and (min-width: 1px) {
body.mediawiki #content,
body.skin-vector #content,
body.skin-vector-legacy #content,
body.skin-timeless #content,
#content {
margin-left: 200px !important;
}
}
/* Removes the hamburger menu button */
.mw-ui-icon-menu {
display: none !important;
}
/* CLICKABLE HIGHLIGHT CARDS */
.destaque-card[data-link] {
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.destaque-card[data-link]:hover {
transform: translateY(-8px) !important;
box-shadow: var(--hover-shadow) !important;
}
.destaque-card[data-link] .destaque-text h3 {
color: var(--dark-pink) !important;
transition: color 0.3s ease !important;
}
.destaque-card[data-link]:hover .destaque-text h3 {
color: var(--pink-cyber) !important;
}
.destaque-card[data-link] * {
transition: inherit !important;
}
/* RESPONSIVE DESIGN - Mobile sidebar adjustments */
@media screen and (max-width: 768px) {
/* Hide sidebar on small screens to save space */
#mw-panel {
display: none !important;
}
/* Adjust main content margin when sidebar is hidden */
body.mediawiki #content,
body.skin-vector #content,
body.skin-vector-legacy #content,
body.skin-timeless #content,
#content {
margin-left: 0 !important;
padding: 10px !important;
}
/* Ensure navigation header is properly positioned */
#mw-head {
position: relative !important;
left: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 10px !important;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* Tablet view - smaller sidebar */
#mw-panel {
width: 150px !important;
font-size: 0.9em !important;
}
body.mediawiki #content,
body.skin-vector #content,
body.skin-vector-legacy #content,
body.skin-timeless #content,
#content {
margin-left: 170px !important;
}
}
#mw-panel .portal .body ul li a {
padding: 3px 4px !important;
font-size: 0.7em !important;
}
#content, .mw-body {
margin-left: 140px !important;
}
}
@media screen and (max-height: 500px) and (orientation: landscape) {
#mw-panel {
width: 140px !important;
font-size: 0.8em !important;
}
#content, .mw-body {
margin-left: 160px !important;
}
}
/* BASE STYLES */
/* ========================================
BASE STYLES FOR PAGE BODY
Overrides default MediaWiki styles
======================================== */
body {
/* Modern and readable font for the entire page */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
/* Pink gradient background covering the entire screen */
background: linear-gradient(135deg, #ffeef7 0%, #f8bbd9 50%, #ff6b9d 100%) !important;
/* Ensures minimum height of 100% of viewport */
min-height: 100vh;
}
/* MAIN CONTENT CONTAINER
Creates a main card with translucent background */
#content {
/* Semi-transparent white background for readability */
background: rgba(255, 255, 255, 0.95) !important;
/* Modern rounded borders */
border-radius: 20px !important;
/* Soft shadow for depth */
box-shadow: var(--card-shadow) !important;
/* Background blur effect (glass morphism) */
backdrop-filter: blur(10px) !important;
/* Margin to separate from background */
margin: 20px !important;
/* Prevents content overflow */
overflow: hidden !important;
}
/* MAIN WRAPPER
Centers and limits content width */
.main-wrapper {
/* Maximum width to avoid very long lines */
max-width: 1400px;
/* Centers horizontally */
margin: 0 auto;
/* Internal spacing */
padding: 20px;
}
/* MAIN PAGE BACKGROUND WRAPPER
Container for main content */
.mainpage-background-wrapper {
/* Transparent background to show body gradient */
background: transparent;
/* Consistent rounded borders */
border-radius: 20px;
/* Controls overflow of child elements */
overflow: hidden;
}
/* ========================================
HERO SECTION (MAIN HEADER)
Highlight area at the top of the page
======================================== */
.hero-section {
/* Semi-transparent light pink background */
background: rgba(255, 238, 247, 0.4);
/* Generous internal spacing */
padding: 40px 20px;
/* Centers all content */
text-align: center;
/* Main text color */
color: #e91e63;
/* Positioning for pseudo-elements */
position: relative;
/* Hides overflow for visual effects */
overflow: hidden;
/* Negative margin to expand beyond container */
margin: -20px -20px 20px -20px;
}
/* HERO TEXTURE EFFECT
Adds subtle dots for visual texture */
.hero-section::before {
/* Empty pseudo-element for texture */
content: '';
/* Positions over entire hero area */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Inline SVG with white dots pattern */
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
/* Low opacity for subtle effect */
opacity: 0.3;
}
/* HERO CONTENT
Ensures text stays above texture */
.hero-content {
/* Relative positioning for z-index */
position: relative;
/* Stays above background texture */
z-index: 2;
}
/* MAIN HERO TITLE
Large and impactful title */
.hero-title {
/* Large size for visual impact */
font-size: 3.5em !important;
/* Bold font weight */
font-weight: 700 !important;
/* Margin only at bottom */
margin: 0 0 20px 0 !important;
/* Subtle text shadow for readability */
text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
/* Dark pink color */
color: #e91e63 !important;
/* Removes default MediaWiki borders */
border: none !important;
}
/* HERO SUBTITLE
Secondary text below main title */
.hero-subtitle {
/* Medium size, smaller than title */
font-size: 1.3em;
/* Bottom spacing */
margin-bottom: 20px;
/* Slightly transparent for visual hierarchy */
opacity: 0.95;
}
/* CONSTRUCTION NOTICE */
.construction-notice {
background: var(--surface-glass) !important;
border: 2px solid var(--pink-crystal) !important;
border-radius: 15px !important;
padding: 15px 30px !important;
display: inline-block !important;
font-weight: bold !important;
font-size: 1.1em !important;
color: var(--dark-pink) !important;
backdrop-filter: var(--glass-blur) !important;
animation: pulse 2s infinite !important;
}
/* ========================================
MAIN PAGE CONTENT LAYOUT
Flexbox system for responsive organization
======================================== */
#mainpage-content {
/* Flexible layout for columns */
display: flex;
/* Spacing between elements */
gap: 30px;
/* Internal spacing */
padding: 40px 20px;
/* Allows line breaks on smaller screens */
flex-wrap: wrap;
/* Aligns items at the top */
align-items: flex-start;
}
/* MAIN PAGE CONTENT CELL
Flexible container for sections */
.mainpage-cell {
/* Grows to occupy available space */
flex: 1;
/* Minimum width to maintain readability */
min-width: 300px;
}
/* DOUBLE MAIN PAGE CONTENT CELL
Larger container for main content */
.mainpage-cell-double {
/* Occupies twice the space of a normal cell */
flex: 2;
/* Larger minimum width for extensive content */
min-width: 600px;
}
/* ========================================
MEDIAWIKI TITLES
Overrides default header styles
======================================== */
.mw-headline {
/* Large size for visual hierarchy */
font-size: 2.2em !important;
/* Dark pink color for emphasis */
color: var(--dark-pink) !important;
/* Margins for proper spacing */
margin: 30px 0 20px 0 !important;
/* Bottom spacing for border */
padding-bottom: 10px !important;
/* Positioning for pseudo-elements */
position: relative !important;
}
/* DECORATIVE TITLE DETAIL
Small gradient bar below the title */
.mw-headline::after {
/* Empty pseudo-element for decoration */
content: '' !important;
/* Positions absolutely relative to title */
position: absolute !important;
/* Aligns with bottom border */
bottom: -3px !important;
/* Aligns to the left */
left: 0 !important;
/* Small width for subtle emphasis */
width: 60px !important;
/* Height equal to border */
height: 3px !important;
/* Pink gradient for visual effect */
background: var(--gradient-bg) !important;
/* Rounded borders */
border-radius: 2px !important;
}
/* SPECIFIC H2 TITLES
Ensures consistency in second-level titles */
h2 .mw-headline {
/* Maintains consistent size */
font-size: 2.2em !important;
/* Dark pink color */
color: var(--dark-pink) !important;
}
/* ========================================
HIGHLIGHTS GRID
Grid layout for highlight cards
======================================== */
.destaques-grid {
/* CSS grid layout */
display: grid;
/* 6 equal columns on large screens */
grid-template-columns: repeat(6, 1fr);
/* Spacing between cards */
gap: 15px;
/* Vertical margins */
margin: 30px 0;
/* Side spacing */
padding: 0 20px;
}
/* HIGHLIGHT CARD
Individual card for each highlighted item */
.destaque-card {
/* Light pink background */
background: var(--light-pink);
/* Pink accent border */
border: 2px solid var(--accent-pink);
/* Modern rounded borders */
border-radius: 15px;
/* Internal spacing */
padding: 12px;
/* Centers content horizontally */
text-align: center;
/* Smooth transition for hover effects */
transition: all 0.3s ease;
/* Minimum height for consistency */
min-height: 250px;
/* Vertical flexible layout */
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
/* Spacing between internal elements */
gap: 12px;
/* Positioning for pseudo-elements */
position: relative;
/* Hides overflow for visual effects */
overflow: hidden;
}
/* HIGHLIGHT IMAGE CONTAINER
Area for image within the card */
.destaque-image {
/* Full available width */
width: 100%;
/* Maximum width for control */
max-width: 180px;
/* Fixed height for consistency */
height: 140px;
/* Hides parts of the image that exceed the container */
overflow: hidden;
/* Rounded borders */
border-radius: 12px;
/* Flexbox to center image */
display: flex;
align-items: center;
justify-content: center;
}
/* IMAGE WITHIN CONTAINER
Styling for the actual image */
.destaque-image img {
/* Occupies entire container */
width: 100%;
height: 100%;
/* Maintains proportion and fills container */
object-fit: cover;
/* Slightly smaller rounded borders */
border-radius: 10px;
}
/* CARD TEXT AREA
Container for title and description */
.destaque-text {
/* Occupies remaining card space */
flex: 1;
/* Vertical flexible layout */
display: flex;
flex-direction: column;
/* Centers content vertically */
justify-content: center;
/* Spacing between title and description */
gap: 10px;
}
/* HIGHLIGHT CARD TITLE
Main title of each item */
.destaque-text h3 {
/* Main pink color for emphasis */
color: var(--dark-pink);
/* Small but readable font size */
font-size: 0.75em;
/* Bold text */
font-weight: bold;
/* Removes default margin */
margin: 0;
/* Compact line height */
line-height: 1.2;
}
/* HIGHLIGHT CARD DESCRIPTION
Descriptive text for each item */
.destaque-text p {
/* Dark pink color for contrast */
color: var(--dark-pink);
/* Slightly smaller font size */
font-size: 0.9em;
/* Line height for readability */
line-height: 1.4;
/* Removes default margins */
margin: 0;
/* Slightly transparent for hierarchy */
opacity: 0.8;
}
/* CARD HOVER BACKGROUND EFFECT
Gradient that appears when hovering */
.destaque-card::before {
/* Empty pseudo-element for effect */
content: '';
/* Positions absolutely */
position: absolute;
/* Expanded position to cover entire card */
top: -50%;
left: -50%;
width: 200%;
height: 200%;
/* Pink background gradient */
background: var(--gradient-bg);
/* Initially invisible */
opacity: 0;
/* Smooth opacity transition */
transition: opacity 0.3s ease;
/* Stays behind content */
z-index: 1;
}
/* ACTIVATES BACKGROUND EFFECT ON HOVER
Makes the gradient visible when hovering */
.destaque-card:hover::before {
/* Low opacity for subtle effect */
opacity: 0.1;
}
/* HIGHLIGHT CARD HOVER EFFECT
Animation when hovering over the card */
.destaque-card:hover {
/* Moves the card upward */
transform: translateY(-5px);
/* More intense shadow */
box-shadow: var(--hover-shadow);
/* Changes border color to main pink */
border-color: var(--dark-pink);
}
/* ========================================
MEDIAWIKI TABLES
Overrides default table styles
======================================== */
.wikitable {
/* Clean white background */
background: white !important;
/* Modern rounded borders */
border-radius: 15px !important;
/* Hides overflow for rounded borders */
overflow: hidden !important;
/* Soft shadow for depth */
box-shadow: var(--card-shadow) !important;
/* Vertical margins */
margin: 20px 0 !important;
/* Removes default borders */
border: none !important;
/* Responsive maximum width */
max-width: 100% !important;
/* Remove horizontal scroll */
overflow-x: visible !important;
/* Display table for responsive layout */
display: table !important;
/* Allows line breaks */
white-space: normal !important;
/* Automatic table layout */
table-layout: auto !important;
}
/* TABLE CELLS
Styling for individual cells */
.wikitable td {
/* Generous internal spacing */
padding: 20px !important;
/* Aligns content at top */
vertical-align: top !important;
/* Pink right border for separation */
border-right: 1px solid var(--accent-pink) !important;
/* Subtle background gradient */
background: linear-gradient(135deg, #ffffff 0%, var(--light-pink) 100%) !important;
/* Removes default borders */
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
/* Display table-cell for responsive layout */
display: table-cell !important;
/* Automatic width for responsiveness */
width: auto !important;
/* Box-sizing for correct calculation */
box-sizing: border-box !important;
/* Allows line breaks within cell */
white-space: normal !important;
}
/* LAST TABLE CELL
Removes right border from last column */
.wikitable td:last-child {
/* Removes right border for clean finish */
border-right: none !important;
}
/* TABLE ROWS
Styling for table rows */
.wikitable tr {
/* Removes default borders */
border: none !important;
/* Transparent background */
background: transparent !important;
/* Display table-row for responsive layout */
display: table-row !important;
/* Full available width */
width: 100% !important;
}
/* LISTS WITHIN TABLES
Removes default list styling */
.wikitable ul {
/* Removes list markers */
list-style: none !important;
/* Removes internal spacing */
padding: 0 !important;
/* Removes margins */
margin: 0 !important;
}
/* LIST ITEMS WITHIN TABLES
Styling for individual items */
.wikitable li {
/* Vertical margins for spacing */
margin: 12px 0 !important;
/* Vertical internal spacing */
padding: 8px 0 !important;
/* Subtle separator line */
border-bottom: 1px solid rgba(255, 107, 157, 0.2) !important;
}
/* LAST LIST ITEM
Removes separator line from last item */
.wikitable li:last-child {
/* Removes bottom border for clean finish */
border-bottom: none !important;
}
/* LINKS WITHIN TABLES
Link styling */
.wikitable a {
/* Dark pink color */
color: var(--dark-pink) !important;
/* Removes default underline */
text-decoration: none !important;
/* Medium font weight */
font-weight: 500 !important;
/* Smooth transition for effects */
transition: all 0.3s ease !important;
/* Positioning for pseudo-elements */
position: relative !important;
}
/* LINK HOVER EFFECT
Animation when hovering over links */
.wikitable a:hover {
/* Changes to main pink */
color: var(--dark-pink) !important;
/* Adds left spacing for arrow */
padding-left: 10px !important;
}
/* DECORATIVE LINK ARROW
Arrow that appears before link on hover */
.wikitable a::before {
/* Unicode arrow */
content: '→' !important;
/* Positions to the left of link */
position: absolute !important;
left: -15px !important;
/* Initially invisible */
opacity: 0 !important;
/* Smooth opacity transition */
transition: opacity 0.3s ease !important;
}
/* ACTIVATES ARROW ON HOVER
Makes arrow visible when hovering */
.wikitable a:hover::before {
/* Makes arrow fully visible */
opacity: 1 !important;
}
/* ========================================
TABLE COLUMN TITLES
Special styling for headers
======================================== */
.wikitable td > strong:first-child {
/* Main pink color for emphasis */
color: var(--dark-pink) !important;
/* Larger size than normal text */
font-size: 1.2em !important;
/* Bold font weight */
font-weight: 700 !important;
/* Uppercase text for impact */
text-transform: uppercase !important;
/* Letter spacing */
letter-spacing: 0.5px !important;
/* Display block to occupy entire line */
display: block !important;
/* Bottom margin for separation */
margin-bottom: 15px !important;
/* Bottom spacing for border */
padding-bottom: 8px !important;
/* Pink bottom line */
/* Positioning for pseudo-elements */
position: relative !important;
}
/* DECORATIVE DETAIL FOR COLUMN TITLES
Small gradient bar below the title */
.wikitable td > strong:first-child::after {
/* Empty pseudo-element for decoration */
content: '' !important;
/* Positions absolutely */
position: absolute !important;
/* Aligns with bottom border */
bottom: -2px !important;
/* Aligns to the left */
left: 0 !important;
/* Small width for subtle emphasis */
width: 30px !important;
/* Height equal to border */
height: 2px !important;
/* Pink gradient for visual effect */
background: var(--gradient-bg) !important;
/* Rounded borders */
border-radius: 1px !important;
}
/* ========================================
CLASSES GRID
Grid layout for class selection
======================================== */
.classes-grid {
/* CSS grid layout */
display: grid;
/* 3 equal columns */
grid-template-columns: repeat(3, 1fr);
/* Spacing between cells */
gap: 15px;
/* Clean white background */
background: white;
/* Generous internal spacing */
padding: 25px;
/* Rounded borders */
border-radius: 15px;
/* Shadow for depth */
box-shadow: var(--card-shadow);
/* Vertical margins */
margin: 20px 0;
}
/* INDIVIDUAL CLASS CELL
Card for each game class */
.class-cell {
/* Subtle background gradient */
background: linear-gradient(135deg, var(--light-pink) 0%, #ffffff 100%);
/* Pink highlight border */
border: 2px solid var(--accent-pink);
/* Rounded borders */
border-radius: 12px;
/* Internal spacing */
padding: 20px 15px;
/* Centers content */
text-align: center;
/* Smooth transition for effects */
transition: all 0.3s ease;
/* Positioning for pseudo-elements */
position: relative;
/* Hides overflow for effects */
overflow: hidden;
}
/* CELL SLIDING EFFECT
Gradient that slides from left to right */
.class-cell::before {
/* Empty pseudo-element for effect */
content: '';
/* Positions absolutely */
position: absolute;
top: 0;
/* Starts off-screen to the left */
left: -100%;
/* Size equal to cell */
width: 100%;
height: 100%;
/* Pink background gradient */
background: var(--gradient-bg);
/* Low opacity for subtle effect */
opacity: 0.1;
/* Smooth movement transition */
transition: left 0.3s ease;
}
/* ACTIVATES SLIDING EFFECT
Moves gradient to visible position */
.class-cell:hover::before {
/* Moves to normal position */
left: 0;
}
/* CLASS CELL HOVER EFFECT
Animation when hovering */
.class-cell:hover {
/* Moves up and slightly increases */
transform: translateY(-3px) scale(1.02);
/* More intense shadow */
box-shadow: var(--hover-shadow);
/* Changes border color */
border-color: var(--dark-pink);
}
/* CLASS CELL LINKS
Styling for links within cells */
.class-cell a {
/* Dark pink color */
color: var(--dark-pink) !important;
/* Removes underline */
text-decoration: none !important;
/* Semi-bold font weight */
font-weight: 600 !important;
/* Slightly smaller font size */
font-size: 0.95em !important;
/* Relative positioning */
position: relative !important;
/* Stays above background effect */
z-index: 2 !important;
}
/* ========================================
SIDEBAR
Side navigation menu
======================================== */
.lateral-bar {
/* Clean white background */
background: white;
/* Rounded borders */
border-radius: 15px;
/* Reduced internal spacing */
padding: 12px;
/* Shadow for depth */
box-shadow: var(--card-shadow);
/* Minimum width */
min-width: 150px;
/* Height adjusted to content */
height: fit-content;
/* Stays fixed during scroll */
position: sticky;
/* Distance from top */
top: 20px;
}
/* SIDEBAR TITLES
Section headers for sidebar */
.lateral-bar h3 {
/* Dark pink color */
color: var(--dark-pink) !important;
/* Smaller size to save space */
font-size: 1.0em !important;
/* Bottom margin */
margin-bottom: 12px !important;
/* Spacing for border */
padding-bottom: 6px !important;
/* Pink separator line */
border-bottom: 2px solid var(--accent-pink) !important;
}
/* SIDEBAR LISTS
Removes default list styling */
.lateral-bar ul {
/* Removes list markers */
list-style: none !important;
/* Removes internal spacing */
padding: 0 !important;
/* Removes margins */
margin: 0 !important;
}
/* SIDEBAR ITEMS
Styling for navigation items */
.lateral-bar li {
/* Small vertical margins */
margin: 6px 0 !important;
/* Small internal spacing */
padding: 6px 0 !important;
/* Very subtle separator line */
border-bottom: 1px solid rgba(255, 107, 157, 0.1) !important;
}
/* SIDEBAR LINKS
Styling for navigation links */
.lateral-bar a {
/* Cor rosa escura */
color: var(--dark-pink) !important;
/* Removes underline */
text-decoration: none !important;
/* Medium font weight */
font-weight: 500 !important;
/* Smaller font size */
font-size: 0.9em !important;
/* Smooth transition for effects */
transition: all 0.3s ease !important;
}
/* SIDEBAR LINKS HOVER EFFECT
Animation when hovering */
.lateral-bar a:hover {
/* Changes to main pink */
color: var(--dark-pink) !important;
/* Adds indentation */
padding-left: 8px !important;
}
/* ========================================
/* MAIN PAGE BANNER
Fixed banner at bottom
======================================== */
.mainpage-banner {
/* Pink background gradient */
background: linear-gradient(135deg, var(--dark-pink), var(--accent-pink));
/* White text */
color: white;
/* Centers content */
text-align: center;
/* Minimal internal spacing */
padding: 4px 15px;
/* Shadow for depth */
box-shadow: var(--card-shadow);
/* Relative position to stay in document flow */
position: relative;
/* Normal z-index to not overlap other elements */
z-index: 1;
/* Removes margins */
margin: 0;
}
/* MAIN BANNER LINK
Stylized button within banner */
.mainpage-banner a {
/* White text */
color: white !important;
/* Removes underline */
text-decoration: none !important;
/* Bold text */
font-weight: bold !important;
/* Larger font size */
font-size: 1.2em !important;
/* Semi-transparent white background */
background: rgba(255, 255, 255, 0.2) !important;
/* Generous internal spacing */
padding: 12px 30px !important;
/* Very rounded borders (pill format) */
border-radius: 25px !important;
/* Display inline-block for dimensions */
display: inline-block !important;
/* Top margin */
margin-top: 15px !important;
/* Smooth transition for effects */
transition: all 0.3s ease !important;
/* Background blur effect */
backdrop-filter: blur(5px) !important;
}
/* BANNER LINK HOVER EFFECT
Animation when hovering over button */
.mainpage-banner a:hover {
/* More opaque background */
background: rgba(255, 255, 255, 0.3) !important;
/* Moves up */
transform: translateY(-2px) !important;
/* More intense shadow */
box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}
/* ========================================
/* CHANGELOG BOX
Container for update information
======================================== */
.changelog-box {
/* Modern gradient background with subtle pink-to-white transition */
background: linear-gradient(135deg, #ffeef7 0%, #ffffff 50%, #f8f9fa 100%) !important;
/* Generous internal spacing for better readability */
padding: 25px 30px !important;
/* Smooth rounded borders for modern look */
border-radius: 16px !important;
/* Elegant multi-layered border effect */
border: 1px solid rgba(255, 107, 157, 0.15) !important;
border-left: 5px solid #ff6b9d !important;
/* Soft shadow for depth and elevation */
box-shadow: 0 4px 20px rgba(255, 107, 157, 0.08),
0 2px 8px rgba(0, 0, 0, 0.04) !important;
/* Vertical margins with better spacing */
margin: 25px 0 !important;
/* Smooth transition for hover effects */
transition: all 0.3s ease !important;
/* Enhanced typography */
font-size: 1.05em !important;
line-height: 1.6 !important;
color: #2c3e50 !important;
/* Relative positioning for proper layout */
position: relative !important;
}
/* RESPONSIVE DESIGN SYSTEM - Advanced Breakpoint Management */
@media (max-width: 1400px) {
body.mediawiki #content,
body.skin-vector #content,
body.skin-vector-legacy #content,
body.skin-timeless #content,
#content { margin-left: 240px !important; }
#mw-panel { width: 220px !important; }
}
@media (min-width: 1201px) {
.destaques-grid { grid-template-columns: repeat(4, 1fr); }
.mainpage-cell-double { min-width: 600px; }
}
@media (max-width: 1200px) {
#mw-panel { width: 180px !important; padding: var(--space-lg) !important; }
.destaques-grid { grid-template-columns: repeat(3, 1fr); }
.destaque-card { min-height: 280px; padding: 15px; }
.destaque-image { max-width: 200px; height: 160px; }
.destaque-text h3 { font-size: 1em; }
.mainpage-cell-double { min-width: 500px; grid-column: span 1; }
}
@media (min-width: 901px) {
#mainpage-content { flex-direction: row !important; align-items: flex-start !important; }
.lateral-bar { position: sticky !important; top: 20px !important; order: 1 !important; flex-shrink: 0 !important; min-width: 150px !important; max-width: 150px !important; }
.mainpage-cell, .mainpage-cell-double { flex: 1 !important; }
}
@media (max-width: 900px) {
#mainpage-content { flex-direction: column; gap: 20px; }
.mainpage-cell, .mainpage-cell-double { min-width: auto; width: 100%; }
.lateral-bar { order: -1; margin-bottom: 20px; position: static; }
.wikitable { font-size: 0.9em !important; }
.wikitable td { padding: 15px !important; min-width: 120px !important; }
}
@media (max-width: 768px) {
body.mediawiki #content,
body.skin-vector #content,
body.skin-vector-legacy #content,
body.skin-timeless #content,
#content { margin-left: var(--space-lg) !important; margin-right: var(--space-lg) !important; }
#mw-panel { transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1000; }
#mw-panel.mobile-open { transform: translateX(0); box-shadow: var(--shadow-neon); }
.hero-section { padding: 3rem var(--space-lg) !important; }
.hero-title { font-size: 2.5em !important; }
.hero-subtitle { font-size: 1em !important; padding: 0 10px; }
#mainpage-content { grid-template-columns: 1fr; gap: var(--space-lg); padding: var(--space-lg); }
.mainpage-cell { padding: 15px; }
.classes-grid { grid-template-columns: repeat(2, 1fr); }
.destaques-grid { grid-template-columns: 1fr; gap: var(--space-lg); padding: 0 10px; }
.destaque-card { min-height: 320px; padding: 18px; }
.destaque-image { max-width: 220px; height: 180px; }
.destaque-text h3 { font-size: 1.1em; }
.destaque-text p { font-size: 0.9em; }
.wikitable { font-size: 0.85em !important; display: block !important; }
.wikitable tr { display: block !important; margin-bottom: 15px !important; border: 1px solid var(--accent-pink) !important; border-radius: 10px !important; overflow: hidden !important; }
.wikitable td { display: block !important; width: 100% !important; padding: 10px 15px !important; border-right: none !important; border-bottom: 1px solid var(--pink-crystal) !important; }
.wikitable td:last-child { border-bottom: none !important; }
}
/* ========================================
BACK TO TOP BUTTON - MEDIAWIKI COMPATIBLE
Ensures the button works in MediaWiki environment
======================================== */
#back-to-top-btn {
position: fixed !important;
bottom: 20px !important;
right: 20px !important;
z-index: 9999 !important;
display: block !important;
visibility: visible !important;
pointer-events: auto !important;
}
#back-to-top-btn a {
background: rgba(233, 30, 99, 0.9) !important;
color: white !important;
padding: 10px 15px !important;
border-radius: 25px !important;
text-decoration: none !important;
font-weight: bold !important;
box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3) !important;
backdrop-filter: blur(5px) !important;
transition: all 0.3s ease !important;
display: inline-block !important;
cursor: pointer !important;
}
#back-to-top-btn a:hover {
background: rgba(233, 30, 99, 1) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(233, 30, 99, 0.4) !important;
}
/* MediaWiki compatibility already handled above */
@media (max-width: 480px) {
.hero-section { padding: 2rem var(--space-lg) !important; }
.hero-title { font-size: 2em !important; }
.hero-subtitle { font-size: 0.9em !important; }
#mainpage-content { padding: var(--space-lg); }
.mainpage-cell { padding: var(--space-lg); }
.classes-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
.destaques-grid { grid-template-columns: 1fr; gap: var(--space-lg); padding: 0 15px; }
#back-to-top-btn { bottom: 15px !important; right: 15px !important; }
#back-to-top-btn a { padding: 8px 12px !important; font-size: 0.9em !important; }
.destaque-card { min-height: 280px; padding: 20px; gap: 15px; }
.destaque-image { max-width: 250px; height: 200px; }
.destaque-text h3 { font-size: 1em; }
.destaque-text p { font-size: 0.9em; }
.wikitable { font-size: 0.8em !important; margin: 15px 0 !important; }
.wikitable tr { margin-bottom: 10px !important; }
.wikitable td { padding: 8px 12px !important; }
.wikitable li { margin: 8px 0 !important; padding: 6px 0 !important; }
}
/* MOBILE MENU TOGGLE */
.mobile-menu-toggle {
display: none;
position: fixed;
top: var(--space-lg);
left: var(--space-lg);
z-index: 1001;
background: var(--surface-glass);
border: 1px solid var(--accent-pink);
border-radius: 15px;
padding: 10px;
color: var(--dark-pink);
cursor: pointer;
backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-kawaii);
transition: all 0.3s ease;
}
.mobile-menu-toggle:hover {
background: var(--accent-pink);
color: white;
transform: scale(1.05);
}
@media (max-width: 768px) {
.mobile-menu-toggle { display: block; }
}
/* ACCESSIBILITY ENHANCEMENTS */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.pulse, .sparkle-rotate, .hologram-scan, .particle-float {
animation: none !important;
}
}
@media (prefers-color-scheme: dark) {
:root {
--text-primary: #ff69b4;
--text-secondary: #ffb3da;
--surface-primary: #0a0a0a;
--surface-secondary: #1a1a1a;
--accent-pink: #ff1493;
--pink-cyber: #ff00ff;
}
}
/* PERFORMANCE OPTIMIZATIONS */
.hero-section, .destaque-card, .mainpage-cell {
will-change: transform, opacity;
}
.hero-section:hover, .destaque-card:hover {
will-change: auto;
}
/* UTILITY CLASSES */
.glass-effect {
background: var(--surface-glass) !important;
backdrop-filter: var(--glass-blur) !important;
border: 1px solid var(--accent-pink) !important;
border-radius: 15px !important;
}
.gradient-text {
background: var(--gradient-primary) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.neon-glow {
box-shadow: var(--shadow-neon) !important;
transition: box-shadow 0.3s ease !important;
}
.neon-glow:hover {
box-shadow: var(--shadow-neon), 0 0 30px var(--accent-pink) !important;
}
/* RESPONSIVE IMAGE UTILITIES */
.responsive-image {
max-width: 100%;
height: auto;
}
.pixelated {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
/* MOBILE/DESKTOP VISIBILITY */
@media screen and (min-width: 720px) {
.mobileonly {
display: none;
}
}
@media screen and (max-width: 720px) {
.nomobile {
display: none;
}
}
/* GALLERY UTILITIES */
.gallery.gallery.gallery.spaced {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin-left: unset;
}
.gallery.centered {
text-align: center;
}
/* PORTABLE INFOBOX RESPONSIVE */
@media only screen and (max-width: 768px) {
.portable-infobox {
width: 90%;
margin-left: -5px;
}
}
/* TABLE OF CONTENTS RESPONSIVE */
@media screen and (max-width: 1025px) {
.toc-container {
float: none !important;
clear: both !important;
margin-bottom: 0 !important;
padding: 0 !important;
background: transparent !important;
max-width: none !important;
text-align: center;
}
}
/* AMBOX RESPONSIVE MARGINS */
@media (min-width: 720px) {
.ambox {
margin-inline: 10%;
}
}
/* FLEXIBLE CONTAINER SYSTEM */
.sh-flex-container {
display: flex;
flex-wrap: wrap;
max-width: 1000px;
}
.sh-flex-item {
margin: 5px;
padding: 8px;
width: max-content;
text-align: center;
white-space: break-spaces !important;
align-content: end;
justify-content: center;
display: grid;
}
.sh-flex-item.small {
width: 100px;
}
/* FLEXIBLE CONTAINER MOBILE RESPONSIVE */
@media only screen and (max-width: 768px) {
.sh-flex-item {
width: 40%;
display: flex;
flex-direction: column;
align-content: center;
justify-content: space-evenly;
}
.sh-flex-item.small {
width: 20%;
}
.sh-flex-item > a > img {
width: 80px;
max-height: 80px;
object-fit: contain;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
.sh-flex-item > figure > a > img {
max-height: 80px;
border: none;
}
.sh-flex-item > figure {
display: flex;
}
}
/* TABS RESPONSIVE WRAPPER */
.wds-tabs__wrapper {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
margin-left: 0 !important;
}
/* MEDIAWIKI COMPATIBILITY */
#mw-page-base, #mw-head-base { background: transparent !important; }
.mw-body { border: none !important; }
#footer { background: transparent !important; border: none !important; }
/* COMPACT RESPONSIVE MEDIAWIKI TABS MENU */
/* Mobile menu toggle button - HIDDEN BY DEFAULT ON DESKTOP */
.mw-tabs-toggle {
display: none;
background: var(--dark-pink);
color: white;
border: none;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
margin: 4px 2px;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(233, 30, 99, 0.3);
position: relative;
z-index: 1001;
vertical-align: top;
}
.mw-tabs-toggle:hover {
background: var(--pink-cyber);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(233, 30, 99, 0.4);
}
/* Remove the hamburger icon */
.mw-tabs-toggle::before {
content: none;
}
/* Compact tab container - MediaWiki compatibility */
body.mediawiki .vector-menu-tabs,
body.skin-vector .vector-menu-tabs,
body.skin-vector-legacy .vector-menu-tabs,
body.skin-timeless .vector-menu-tabs,
body.mediawiki #p-views ul,
body.skin-vector #p-views ul,
body.skin-vector-legacy #p-views ul,
body.skin-timeless #p-views ul,
body.mediawiki #p-cactions ul,
body.skin-vector #p-cactions ul,
body.skin-vector-legacy #p-cactions ul,
body.skin-timeless #p-cactions ul,
body.mediawiki #p-namespaces ul,
body.skin-vector #p-namespaces ul,
body.skin-vector-legacy #p-namespaces ul,
body.skin-timeless #p-namespaces ul,
body.mediawiki #p-personal ul,
body.skin-vector #p-personal ul,
body.skin-vector-legacy #p-personal ul,
body.skin-timeless #p-personal ul,
.vector-menu-tabs,
#p-views ul,
#p-cactions ul,
#p-namespaces ul,
#p-personal ul {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 0;
padding: 0;
list-style: none;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
padding: 8px;
box-shadow: 0 4px 16px rgba(233, 30, 99, 0.15);
backdrop-filter: blur(10px);
}
/* Individual tab styling */
.vector-menu-tabs li,
#p-views li,
#p-cactions li,
#p-namespaces li,
#p-personal li {
margin: 0;
padding: 0;
border: none;
background: none;
}
/* Individual tab link styling - MediaWiki compatibility */
body.mediawiki .vector-menu-tabs li a,
body.skin-vector .vector-menu-tabs li a,
body.skin-vector-legacy .vector-menu-tabs li a,
body.skin-timeless .vector-menu-tabs li a,
body.mediawiki #p-views li a,
body.skin-vector #p-views li a,
body.skin-vector-legacy #p-views li a,
body.skin-timeless #p-views li a,
body.mediawiki #p-cactions li a,
body.skin-vector #p-cactions li a,
body.skin-vector-legacy #p-cactions li a,
body.skin-timeless #p-cactions li a,
.vector-menu-tabs li a,
#p-views li a,
#p-cactions li a {
display: block;
padding: 8px 16px;
background: rgba(255, 238, 247, 0.8);
color: var(--dark-pink);
text-decoration: none;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
transition: all 0.3s ease;
border: 1px solid transparent;
white-space: nowrap;
}
/* Tab hover effects - MediaWiki compatibility */
body.mediawiki .vector-menu-tabs li a:hover,
body.skin-vector .vector-menu-tabs li a:hover,
body.skin-vector-legacy .vector-menu-tabs li a:hover,
body.skin-timeless .vector-menu-tabs li a:hover,
body.mediawiki #p-views li a:hover,
body.skin-vector #p-views li a:hover,
body.skin-vector-legacy #p-views li a:hover,
body.skin-timeless #p-views li a:hover,
body.mediawiki #p-cactions li a:hover,
body.skin-vector #p-cactions li a:hover,
body.skin-vector-legacy #p-cactions li a:hover,
body.skin-timeless #p-cactions li a:hover,
.vector-menu-tabs li a:hover,
#p-views li a:hover,
#p-cactions li a:hover {
background: var(--accent-pink);
color: var(--dark-pink);
border-color: var(--dark-pink);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(233, 30, 99, 0.2);
}
/* Active/selected tab - MediaWiki compatibility */
body.mediawiki .vector-menu-tabs li.selected a,
body.skin-vector .vector-menu-tabs li.selected a,
body.skin-vector-legacy .vector-menu-tabs li.selected a,
body.skin-timeless .vector-menu-tabs li.selected a,
body.mediawiki #p-views li.selected a,
body.skin-vector #p-views li.selected a,
body.skin-vector-legacy #p-views li.selected a,
body.skin-timeless #p-views li.selected a,
body.mediawiki #p-cactions li.selected a,
body.skin-vector #p-cactions li.selected a,
body.skin-vector-legacy #p-cactions li.selected a,
body.skin-timeless #p-cactions li.selected a,
body.mediawiki .vector-menu-tabs li a.active,
body.skin-vector .vector-menu-tabs li a.active,
body.skin-vector-legacy .vector-menu-tabs li a.active,
body.skin-timeless .vector-menu-tabs li a.active,
body.mediawiki #p-views li a.active,
body.skin-vector #p-views li a.active,
body.skin-vector-legacy #p-views li a.active,
body.skin-timeless #p-views li a.active,
body.mediawiki #p-cactions li a.active,
body.skin-vector #p-cactions li a.active,
body.skin-vector-legacy #p-cactions li a.active,
body.skin-timeless #p-cactions li a.active,
.vector-menu-tabs li.selected a,
#p-views li.selected a,
#p-cactions li.selected a,
.vector-menu-tabs li a.active,
#p-views li a.active,
#p-cactions li a.active {
background: var(--dark-pink);
color: white;
border-color: var(--dark-pink);
box-shadow: 0 3px 8px rgba(233, 30, 99, 0.3);
}
/* Dropdown menu for overflow tabs */
.mw-tabs-dropdown {
position: relative;
display: none;
}
.mw-tabs-dropdown-content {
display: none;
position: absolute;
top: 100%;
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(233, 30, 99, 0.2);
padding: 8px;
min-width: 200px;
z-index: 1000;
backdrop-filter: blur(15px);
border: 1px solid var(--accent-pink);
}
.mw-tabs-dropdown-content a {
display: block;
padding: 10px 16px;
color: var(--dark-pink);
text-decoration: none;
border-radius: 6px;
transition: all 0.3s ease;
font-size: 13px;
}
.mw-tabs-dropdown-content a:hover {
background: var(--light-pink);
color: var(--dark-pink);
}
.mw-tabs-dropdown.active .mw-tabs-dropdown-content {
display: block;
animation: fadeInDown 0.3s ease;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Desktop styles - ensure tabs are visible and toggle buttons are hidden */
@media screen and (min-width: 769px) {
body.mediawiki .mw-tabs-toggle,
body.skin-vector .mw-tabs-toggle,
body.skin-vector-legacy .mw-tabs-toggle,
body.skin-timeless .mw-tabs-toggle,
.mw-tabs-toggle {
display: none !important;
}
body.mediawiki .vector-menu-tabs,
body.skin-vector .vector-menu-tabs,
body.skin-vector-legacy .vector-menu-tabs,
body.skin-timeless .vector-menu-tabs,
body.mediawiki #p-views ul,
body.skin-vector #p-views ul,
body.skin-vector-legacy #p-views ul,
body.skin-timeless #p-views ul,
body.mediawiki #p-cactions ul,
body.skin-vector #p-cactions ul,
body.skin-vector-legacy #p-cactions ul,
body.skin-timeless #p-cactions ul,
.vector-menu-tabs,
#p-views ul,
#p-cactions ul {
display: flex !important;
flex-direction: row !important;
position: static !important;
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 12px !important;
padding: 8px !important;
box-shadow: 0 4px 16px rgba(233, 30, 99, 0.15) !important;
backdrop-filter: blur(10px) !important;
}
}
/* Tablet responsive breakpoints */
@media screen and (min-width: 481px) and (max-width: 768px) {
body.mediawiki .mw-tabs-toggle,
body.skin-vector .mw-tabs-toggle,
body.skin-vector-legacy .mw-tabs-toggle,
body.skin-timeless .mw-tabs-toggle,
.mw-tabs-toggle {
display: none !important;
}
body.mediawiki .vector-menu-tabs,
body.skin-vector .vector-menu-tabs,
body.skin-vector-legacy .vector-menu-tabs,
body.skin-timeless .vector-menu-tabs,
body.mediawiki #p-views ul,
body.skin-vector #p-views ul,
body.skin-vector-legacy #p-views ul,
body.skin-timeless #p-views ul,
body.mediawiki #p-cactions ul,
body.skin-vector #p-cactions ul,
body.skin-vector-legacy #p-cactions ul,
body.skin-timeless #p-cactions ul,
.vector-menu-tabs,
#p-views ul,
#p-cactions ul {
display: flex !important;
flex-direction: row !important;
position: static !important;
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 12px !important;
padding: 6px !important;
box-shadow: 0 4px 16px rgba(233, 30, 99, 0.15) !important;
backdrop-filter: blur(10px) !important;
gap: 4px !important;
}
body.mediawiki .vector-menu-tabs li a,
body.skin-vector .vector-menu-tabs li a,
body.skin-vector-legacy .vector-menu-tabs li a,
body.skin-timeless .vector-menu-tabs li a,
body.mediawiki #p-views li a,
body.skin-vector #p-views li a,
body.skin-vector-legacy #p-views li a,
body.skin-timeless #p-views li a,
body.mediawiki #p-cactions li a,
body.skin-vector #p-cactions li a,
body.skin-vector-legacy #p-cactions li a,
body.skin-timeless #p-cactions li a,
.vector-menu-tabs li a,
#p-views li a,
#p-cactions li a {
padding: 8px 12px;
font-size: 13px;
}
}
/* Mobile responsive breakpoints */
@media screen and (max-width: 480px) {
body.mediawiki .mw-tabs-toggle,
body.skin-vector .mw-tabs-toggle,
body.skin-vector-legacy .mw-tabs-toggle,
body.skin-timeless .mw-tabs-toggle,
.mw-tabs-toggle {
display: inline-block !important;
}
body.mediawiki .vector-menu-tabs,
body.skin-vector .vector-menu-tabs,
body.skin-vector-legacy .vector-menu-tabs,
body.skin-timeless .vector-menu-tabs,
body.mediawiki #p-views ul,
body.skin-vector #p-views ul,
body.skin-vector-legacy #p-views ul,
body.skin-timeless #p-views ul,
body.mediawiki #p-cactions ul,
body.skin-vector #p-cactions ul,
body.skin-vector-legacy #p-cactions ul,
body.skin-timeless #p-cactions ul,
.vector-menu-tabs,
#p-views ul,
#p-cactions ul {
display: flex !important;
flex-direction: row !important;
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 8px !important;
box-shadow: 0 4px 16px rgba(233, 30, 99, 0.15) !important;
z-index: 999;
padding: 6px !important;
gap: 4px !important;
}
/* Removed .show class dependency - buttons are now always visible */
body.mediawiki .vector-menu-tabs li a,
body.skin-vector .vector-menu-tabs li a,
body.skin-vector-legacy .vector-menu-tabs li a,
body.skin-timeless .vector-menu-tabs li a,
body.mediawiki #p-views li a,
body.skin-vector #p-views li a,
body.skin-vector-legacy #p-views li a,
body.skin-timeless #p-views li a,
body.mediawiki #p-cactions li a,
body.skin-vector #p-cactions li a,
body.skin-vector-legacy #p-cactions li a,
body.skin-timeless #p-cactions li a,
.vector-menu-tabs li a,
#p-views li a,
#p-cactions li a {
padding: 12px 16px;
font-size: 14px;
text-align: center;
}
body.mediawiki .mw-tabs-dropdown,
body.skin-vector .mw-tabs-dropdown,
body.skin-vector-legacy .mw-tabs-dropdown,
body.skin-timeless .mw-tabs-dropdown,
.mw-tabs-dropdown {
display: block;
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Small screen dropdown functionality - for any small browser window */
@media screen and (max-width: 1024px) {
.mw-tabs-toggle {
display: inline-block !important;
background: rgba(233, 30, 99, 0.9) !important;
color: white !important;
border: none !important;
border-radius: 8px !important;
padding: 8px 12px !important;
font-size: 13px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
margin: 2px !important;
box-shadow: 0 2px 8px rgba(233, 30, 99, 0.3) !important;
backdrop-filter: blur(10px) !important;
position: relative !important;
z-index: 999 !important;
}
.mw-tabs-toggle:hover {
background: rgba(233, 30, 99, 1) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(233, 30, 99, 0.4) !important;
}
.mw-tabs-toggle:active {
transform: translateY(0) !important;
box-shadow: 0 2px 6px rgba(233, 30, 99, 0.3) !important;
}
.mw-tabs-toggle[aria-expanded="true"] {
background: rgba(255, 107, 157, 0.9) !important;
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.4) !important;
}
/* Force button text visibility with highest specificity */
button.mw-tabs-toggle,
.mw-tabs-toggle {
color: white !important;
-webkit-text-fill-color: white !important;
text-shadow: none !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
}
/* Fix positioning for small screen navigation */
#mw-head {
position: relative !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
display: block !important;
padding: 15px !important;
background: rgba(255, 255, 255, 0.98) !important;
border-radius: 0 0 15px 15px !important;
margin: 0 !important;
box-shadow: 0 4px 20px rgba(233, 30, 99, 0.2) !important;
backdrop-filter: blur(10px) !important;
border-bottom: 2px solid rgba(233, 30, 99, 0.3) !important;
}
#left-navigation, #right-navigation {
position: relative !important;
display: inline-block !important;
vertical-align: top !important;
margin: 5px !important;
padding: 8px !important;
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 10px !important;
box-shadow: 0 2px 12px rgba(233, 30, 99, 0.15) !important;
}
#p-namespaces,
#p-views,
#p-cactions,
#p-personal {
position: relative !important;
display: inline-block !important;
margin: 4px 2px !important;
vertical-align: top !important;
}
#p-namespaces ul,
#p-views ul,
#p-cactions ul,
#p-personal ul {
display: none !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
background: rgba(255, 255, 255, 0.98) !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(233, 30, 99, 0.3) !important;
backdrop-filter: blur(15px) !important;
border: 2px solid var(--accent-pink) !important;
z-index: 1000 !important;
min-width: 150px !important;
flex-direction: column !important;
gap: 0 !important;
padding: 8px !important;
opacity: 0 !important;
transform: translateY(-10px) !important;
transition: all 0.3s ease !important;
}
#p-namespaces ul.show,
#p-views ul.show,
#p-cactions ul.show,
#p-personal ul.show {
display: flex !important;
opacity: 1 !important;
transform: translateY(0) !important;
animation: slideDown 0.3s ease !important;
}
#p-namespaces li,
#p-views li,
#p-cactions li,
#p-personal li {
width: 100% !important;
margin: 0 !important;
}
#p-namespaces li a,
#p-views li a,
#p-cactions li a,
#p-personal li a {
display: block !important;
width: 100% !important;
padding: 10px 12px !important;
margin: 2px 0 !important;
text-align: left !important;
border-radius: 6px !important;
font-size: 13px !important;
}
}
/* Compact mode for very small screens */
@media screen and (max-width: 480px) {
/* Further optimize navigation for mobile */
#mw-head {
padding: 8px !important;
border-radius: 0 !important;
}
#left-navigation, #right-navigation {
display: block !important;
width: 100% !important;
margin: 2px 0 !important;
padding: 5px !important;
}
.mw-tabs-toggle {
background: rgba(233, 30, 99, 0.9) !important;
color: white !important;
border: none !important;
font-size: 12px !important;
padding: 6px 10px !important;
margin: 2px 1px !important;
border-radius: 6px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 6px rgba(233, 30, 99, 0.3) !important;
backdrop-filter: blur(8px) !important;
display: inline-block !important;
text-shadow: none !important;
-webkit-text-fill-color: white !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
opacity: 1 !important;
visibility: visible !important;
line-height: 1.2 !important;
text-align: center !important;
white-space: nowrap !important;
font-family: inherit !important;
text-decoration: none !important;
}
.mw-tabs-toggle:hover {
background: rgba(233, 30, 99, 1) !important;
box-shadow: 0 3px 8px rgba(233, 30, 99, 0.4) !important;
}
.mw-tabs-toggle[aria-expanded="true"] {
background: rgba(255, 107, 157, 0.9) !important;
box-shadow: 0 3px 10px rgba(255, 107, 157, 0.4) !important;
}
/* Ensure dropdown menus are hidden by default on mobile */
.vector-menu-tabs,
#p-views ul,
#p-cactions ul,
#p-namespaces ul,
#p-personal ul {
display: none !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
background: rgba(255, 255, 255, 0.98) !important;
border-radius: 8px !important;
box-shadow: 0 6px 20px rgba(233, 30, 99, 0.3) !important;
backdrop-filter: blur(12px) !important;
border: 2px solid var(--accent-pink) !important;
z-index: 1000 !important;
padding: 6px !important;
gap: 2px !important;
min-width: 120px !important;
max-width: calc(100vw - 40px) !important;
flex-direction: column !important;
opacity: 0 !important;
transform: translateY(-10px) !important;
transition: all 0.3s ease !important;
}
/* Show dropdown menus when .show class is applied on mobile */
.vector-menu-tabs.show,
#p-views ul.show,
#p-cactions ul.show,
#p-namespaces ul.show,
#p-personal ul.show {
display: flex !important;
opacity: 1 !important;
transform: translateY(0) !important;
animation: slideDown 0.3s ease !important;
}
.vector-menu-tabs li a,
#p-views li a,
#p-cactions li a,
#p-namespaces li a,
#p-personal li a {
display: block !important;
width: 100% !important;
padding: 6px 8px !important;
margin: 1px 0 !important;
text-align: left !important;
font-size: 11px !important;
border-radius: 4px !important;
color: var(--dark-pink) !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100px !important;
}
.vector-menu-tabs li a:hover,
#p-views li a:hover,
#p-cactions li a:hover,
#p-namespaces li a:hover,
#p-personal li a:hover {
background: var(--pink-crystal) !important;
color: white !important;
transform: translateX(2px) !important;
}
/* Prevent horizontal scroll */
body {
overflow-x: hidden !important;
}
#content {
padding: 5px !important;
word-wrap: break-word !important;
}
}
/* Page action buttons - standard MediaWiki positioning */
#p-views, #p-cactions {
background: transparent !important;
border: none !important;
margin: 0 0.25em 0 0 !important;
padding: 0 !important;
display: inline-block !important;
vertical-align: top !important;
white-space: nowrap !important;
position: relative !important;
}
/* Position page action buttons in left navigation */
#left-navigation #p-views,
#left-navigation #p-cactions {
display: inline-block !important;
margin-right: 0.5em !important;
}
/* Hide toggle buttons on larger screens */
@media screen and (min-width: 1025px) {
.mw-tabs-toggle {
display: none !important;
}
#p-namespaces ul,
#p-views ul,
#p-cactions ul,
#p-personal ul {
display: flex !important;
position: static !important;
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 12px !important;
padding: 8px !important;
box-shadow: 0 4px 16px rgba(233, 30, 99, 0.15) !important;
backdrop-filter: blur(10px) !important;
}
/* Ensure proper navigation layout on desktop */
#mw-head {
position: fixed !important;
top: 0 !important;
left: 200px !important;
right: 0 !important;
width: calc(100% - 200px) !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(15px) !important;
border-bottom: 2px solid rgba(233, 30, 99, 0.3) !important;
box-shadow: 0 4px 20px rgba(233, 30, 99, 0.2) !important;
z-index: 1000 !important;
padding: 10px 20px !important;
}
body.mediawiki #content,
body.skin-vector #content,
body.skin-vector-legacy #content,
body.skin-timeless #content,
#content {
margin-top: 60px !important;
margin-left: 200px !important;
padding: 20px !important;
}
}
/* Desktop and tablet screen optimizations - smaller desktop screens */
@media screen and (min-width: 481px) and (max-width: 1366px) {
/* Optimize navigation for tablet screens */
#mw-head {
padding: 12px !important;
border-radius: 0 0 12px 12px !important;
}
#left-navigation, #right-navigation {
display: inline-block !important;
vertical-align: top !important;
margin: 3px !important;
padding: 6px !important;
}
.mw-tabs-toggle {
background: rgba(233, 30, 99, 0.9) !important;
color: white !important;
border: none !important;
border-radius: 8px !important;
font-size: 13px !important;
padding: 7px 11px !important;
margin: 3px 2px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(233, 30, 99, 0.3) !important;
backdrop-filter: blur(10px) !important;
display: inline-block !important;
text-shadow: none !important;
-webkit-text-fill-color: white !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
opacity: 1 !important;
visibility: visible !important;
line-height: 1.2 !important;
text-align: center !important;
white-space: nowrap !important;
font-family: inherit !important;
text-decoration: none !important;
}
.mw-tabs-toggle:hover {
background: rgba(233, 30, 99, 1) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(233, 30, 99, 0.4) !important;
}
.mw-tabs-toggle[aria-expanded="true"] {
background: rgba(255, 107, 157, 0.9) !important;
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.4) !important;
}
/* Ensure dropdown menus are hidden by default */
#p-views ul,
#p-cactions ul,
#p-namespaces ul,
#p-personal ul {
display: none !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
background: rgba(255, 255, 255, 0.98) !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(233, 30, 99, 0.3) !important;
backdrop-filter: blur(15px) !important;
border: 2px solid var(--accent-pink) !important;
z-index: 1000 !important;
min-width: 140px !important;
max-width: 250px !important;
padding: 7px !important;
gap: 3px !important;
flex-direction: column !important;
opacity: 0 !important;
transform: translateY(-10px) !important;
transition: all 0.3s ease !important;
}
/* Show dropdown menus when .show class is applied */
#p-views ul.show,
#p-cactions ul.show,
#p-namespaces ul.show,
#p-personal ul.show {
display: flex !important;
opacity: 1 !important;
transform: translateY(0) !important;
animation: slideDown 0.3s ease !important;
}
#p-views li a,
#p-cactions li a,
#p-namespaces li a,
#p-personal li a {
display: block !important;
width: 100% !important;
padding: 8px 12px !important;
margin: 2px 0 !important;
text-align: left !important;
font-size: 12px !important;
border-radius: 6px !important;
color: var(--dark-pink) !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
}
#p-views li a:hover,
#p-cactions li a:hover,
#p-namespaces li a:hover,
#p-personal li a:hover {
background: var(--pink-crystal) !important;
color: white !important;
transform: translateX(3px) !important;
}
}
/* Desktop-like behavior for larger tablets */
@media screen and (min-width: 769px) and (max-width: 1024px) {
#p-views ul,
#p-cactions ul {
display: flex !important;
flex-direction: row !important;
position: static !important;
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 12px !important;
padding: 8px !important;
box-shadow: 0 4px 16px rgba(233, 30, 99, 0.15) !important;
backdrop-filter: blur(10px) !important;
gap: 6px !important;
}
#p-views li,
#p-cactions li {
margin: 0 !important;
border: none !important;
}
#p-views li a,
#p-cactions li a {
padding: 10px 16px !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
background: rgba(233, 30, 99, 0.1) !important;
color: var(--pink-crystal) !important;
border: 1px solid rgba(233, 30, 99, 0.2) !important;
}
#p-views li a:hover,
#p-cactions li a:hover {
background: var(--pink-crystal) !important;
color: white !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3) !important;
}
}
/* NAVIGATION AND HEADER - RESPONSIVE DESIGN */
/* Desktop styles */
@media screen and (min-width: 769px) {
#mw-head, #mw-head-base, .mw-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
position: fixed !important;
top: 0 !important;
left: 200px !important;
right: 0 !important;
width: calc(100% - 200px) !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: var(--glass-blur) !important;
border-bottom: 2px solid var(--pink-crystal) !important;
box-shadow: var(--card-shadow) !important;
height: auto !important;
padding: 0.5em 1em !important;
min-height: 3em !important;
z-index: 1000 !important;
margin-left: 0 !important;
}
#left-navigation {
display: flex !important;
align-items: center !important;
gap: 0.5em !important;
flex: 0 0 auto !important;
position: relative !important;
}
#right-navigation {
display: flex !important;
align-items: center !important;
gap: 1em !important;
flex: 0 0 auto !important;
}
/* Responsive header buttons positioning */
#left-navigation #p-namespaces {
transform: translateY(-32px) translateX(-128px) !important;
}
#left-navigation #p-views,
#left-navigation #p-cactions {
position: relative !important;
display: inline-block !important;
margin-right: 0.5em !important;
transform: translateY(80px) !important;
}
#searchform, #simpleSearch, #p-personal {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
}
body #content, body .mw-body {
margin-top: 4em !important;
padding-top: 1em !important;
margin-left: 200px !important;
}
#mw-panel {
top: 0 !important;
height: 100vh !important;
}
}
/* Tablet styles */
@media screen and (min-width: 481px) and (max-width: 768px) {
#mw-head, #mw-head-base, .mw-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
position: fixed !important;
top: 0 !important;
left: 200px !important;
right: 0 !important;
width: calc(100% - 200px) !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: var(--glass-blur) !important;
border-bottom: 2px solid var(--pink-crystal) !important;
box-shadow: var(--card-shadow) !important;
height: auto !important;
padding: 0.5em 1em !important;
min-height: 3em !important;
z-index: 1000 !important;
margin-left: 0 !important;
}
#left-navigation {
display: flex !important;
align-items: center !important;
gap: 0.5em !important;
flex: 0 0 auto !important;
position: relative !important;
}
#right-navigation {
display: flex !important;
align-items: center !important;
gap: 0.5em !important;
flex: 0 0 auto !important;
}
/* Responsive header buttons positioning */
#left-navigation #p-namespaces {
transform: translateY(-32px) translateX(-128px) !important;
}
#left-navigation #p-views,
#left-navigation #p-cactions {
position: relative !important;
display: inline-block !important;
margin-right: 0.5em !important;
transform: translateY(80px) !important;
}
#searchform, #simpleSearch, #p-personal {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
}
body #content, body .mw-body {
margin-top: 4em !important;
padding-top: 1em !important;
margin-left: 200px !important;
}
#mw-panel {
top: 0 !important;
height: 100vh !important;
}
}
/* Mobile styles */
@media screen and (max-width: 480px) {
#mw-head, #mw-head-base, .mw-header {
display: block !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: var(--glass-blur) !important;
border-bottom: 2px solid var(--pink-crystal) !important;
height: 4em !important;
z-index: 1000 !important;
box-shadow: var(--card-shadow) !important;
}
#left-navigation {
position: absolute !important;
left: 1em !important;
top: 0.5em !important;
z-index: 1002 !important;
max-width: 40% !important;
display: flex !important;
align-items: center !important;
}
/* Responsive header buttons positioning for mobile */
#left-navigation #p-namespaces {
transform: translateY(-24px) translateX(-96px) !important;
font-size: 0.8em !important;
}
#left-navigation #p-views,
#left-navigation #p-cactions {
transform: translateY(60px) !important;
font-size: 0.8em !important;
margin-right: 0.3em !important;
}
#right-navigation {
position: absolute !important;
right: 1em !important;
top: 0.5em !important;
z-index: 1002 !important;
max-width: 40% !important;
display: flex !important;
align-items: center !important;
}
#searchform, #simpleSearch, #p-personal {
position: relative !important;
z-index: 1003 !important;
margin: 0 0.5em !important;
display: inline-block !important;
vertical-align: top !important;
}
#searchInput, #searchButton, #p-personal ul li a {
position: relative !important;
z-index: 1004 !important;
pointer-events: auto !important;
}
body #content, body .mw-body {
margin-top: 4em !important;
padding-top: 1em !important;
}
#mw-panel {
top: 4em !important;
height: calc(100vh - 4em) !important;
}
}
/* ADDITIONAL RESPONSIVE BREAKPOINTS */
/* Extra small screens */
@media screen and (max-width: 320px) {
#left-navigation #p-namespaces {
transform: translateY(-20px) translateX(-80px) !important;
font-size: 0.7em !important;
}
#left-navigation #p-views,
#left-navigation #p-cactions {
transform: translateY(50px) !important;
font-size: 0.7em !important;
margin-right: 0.2em !important;
}
#left-navigation {
max-width: 35% !important;
overflow: hidden !important;
}
#right-navigation {
max-width: 35% !important;
overflow: hidden !important;
}
}
/* Large screens - enhanced positioning */
@media screen and (min-width: 1200px) {
#left-navigation {
gap: 1em !important;
}
#left-navigation #p-views,
#left-navigation #p-cactions {
margin-right: 1em !important;
}
}
/* CORATO PINK THEME PRESERVATION */
/* Personal menu and search styling */
#p-personal ul li a { color: var(--dark-pink) !important; }
#p-personal ul li a:hover { color: var(--pink-cyber) !important; background-color: var(--surface-glass) !important; }
#searchInput { border: 2px solid var(--pink-cyber) !important; }
#searchInput:focus { border-color: var(--dark-pink) !important; box-shadow: var(--shadow-kawaii) !important; }
#searchButton { background-color: var(--pink-cyber) !important; border: 1px solid var(--dark-pink) !important; color: white !important; }
#searchButton:hover { background-color: var(--dark-pink) !important; }
.mw-ui-button, .mw-ui-input, .mw-ui-checkbox, .oo-ui-widget { background: initial !important; border: initial !important; color: initial !important; font-family: initial !important; font-size: initial !important; padding: initial !important; margin: initial !important; border-radius: initial !important; box-shadow: initial !important; }