MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: Manual revert |
No edit summary |
||
| Line 4: | Line 4: | ||
======================================== */ | ======================================== */ | ||
/* | /* CSS VARIABLES - Theme colors and effects */ | ||
:root { | |||
--light-pink: #ffeef7; | |||
--dark-pink: #e91e63; | |||
#mw-panel { | --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; | display: block !important; | ||
visibility: visible !important; | visibility: visible !important; | ||
opacity: 1 !important; | |||
position: fixed !important; | position: fixed !important; | ||
left: 0 !important; | left: 0 !important; | ||
| Line 23: | Line 57: | ||
border-right: 2px solid rgba(233, 30, 99, 0.2) !important; | border-right: 2px solid rgba(233, 30, 99, 0.2) !important; | ||
padding: 15px 0 !important; | padding: 15px 0 !important; | ||
} | } | ||
| Line 122: | Line 140: | ||
} | } | ||
/* Adjusts main content to not overlap the sidebar */ | /* Adjusts main content to not overlap the sidebar - RESPONSIVE */ | ||
#content { | @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; | |||
} | |||
} | } | ||
| Line 132: | Line 156: | ||
} | } | ||
/* | /* 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; | |||
#mw-panel | } | ||
.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, | |||
padding: | body.skin-vector #content, | ||
body.skin-vector-legacy #content, | |||
body.skin-timeless #content, | |||
#content { | |||
margin-left: 0 !important; | |||
padding: 10px !important; | |||
} | } | ||
#mw- | /* 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) { | |||
@media screen and (max-width: | /* Tablet view - smaller sidebar */ | ||
#mw-panel { | #mw-panel { | ||
width: | width: 150px !important; | ||
font-size: 0.9em !important; | |||
font-size: 0. | |||
} | } | ||
# | body.mediawiki #content, | ||
body.skin-vector #content, | |||
margin- | body.skin-vector-legacy #content, | ||
body.skin-timeless #content, | |||
#content { | |||
margin-left: 170px !important; | |||
} | } | ||
} | |||
#mw-panel .portal | #mw-panel .portal .body ul li a { | ||
padding: 3px 4px !important; | |||
padding: 4px | font-size: 0.7em !important; | ||
} | } | ||
#mw- | #content, .mw-body { | ||
margin-left: 140px !important; | |||
margin-left: | |||
} | } | ||
} | } | ||
@media screen and (max-height: 500px) and (orientation: landscape) { | |||
@media screen and (max- | |||
#mw-panel { | #mw-panel { | ||
width: 140px !important; | |||
font-size: 0.8em !important; | |||
} | } | ||
#content, .mw-body { | |||
margin-left: 160px !important; | |||
#mw- | |||
} | } | ||
} | } | ||
/* | /* BASE STYLES */ | ||
/* ======================================== | /* ======================================== | ||
BASE STYLES FOR PAGE BODY | |||
Overrides | 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; | |||
/* | |||
font- | |||
/* | /* 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: 20px | margin-bottom: 20px; | ||
/* | /* Slightly transparent for visual hierarchy */ | ||
opacity: 0.95; | |||
} | } | ||
/* MAIN | /* 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 */ | /* Internal spacing */ | ||
padding: 20px; | padding: 40px 20px; | ||
/* Allows line breaks on smaller screens */ | |||
flex-wrap: wrap; | |||
/* Aligns items at the top */ | |||
align-items: flex-start; | |||
} | } | ||
/* MAIN PAGE | /* MAIN PAGE CONTENT CELL | ||
Flexible container for sections */ | |||
.mainpage- | .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 */ | /* Positioning for pseudo-elements */ | ||
position: relative | position: relative !important; | ||
} | } | ||
/* | /* DECORATIVE TITLE DETAIL | ||
Small gradient bar below the title */ | |||
. | .mw-headline::after { | ||
/* Empty pseudo-element for | /* Empty pseudo-element for decoration */ | ||
content: ''; | content: '' !important; | ||
/* Positions | /* Positions absolutely relative to title */ | ||
position: absolute; | position: absolute !important; | ||
left: 0; | /* 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: | background: var(--gradient-bg) !important; | ||
/* | /* Rounded borders */ | ||
border-radius: 2px !important; | |||
} | } | ||
/* | /* SPECIFIC H2 TITLES | ||
Ensures | 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 */ | ||
flex | 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 */ | ||
height: | 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; | |||
} | } | ||
/* HIGHLIGHT CARD | /* ACTIVATES BACKGROUND EFFECT ON HOVER | ||
Makes the gradient visible when hovering */ | |||
.destaque-card { | .destaque-card:hover::before { | ||
/* | /* Low opacity for subtle effect */ | ||
opacity: 0.1; | |||
} | |||
/* | |||
border: | /* 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 */ | /* Modern rounded borders */ | ||
border-radius: 15px; | 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 */ | ||
border- | box-sizing: border-box !important; | ||
/* | /* Allows line breaks within cell */ | ||
white-space: normal !important; | |||
} | } | ||
/* | /* LAST TABLE CELL | ||
Styling for | 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 { | ||
/* Dark pink color | /* Removes bottom border for clean finish */ | ||
color: var(--dark-pink); | 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: - | left: -15px !important; | ||
/* Initially invisible */ | /* Initially invisible */ | ||
opacity: 0; | opacity: 0 !important; | ||
/* Smooth opacity transition */ | /* Smooth opacity transition */ | ||
transition: opacity 0.3s ease | transition: opacity 0.3s ease !important; | ||
} | } | ||
/* ACTIVATES | /* ACTIVATES ARROW ON HOVER | ||
Makes | Makes arrow visible when hovering */ | ||
. | .wikitable a:hover::before { | ||
/* | /* Makes arrow fully visible */ | ||
opacity: | 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: | 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 | /* 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: 0 | 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; | |||
text- | |||
/* Smooth transition for effects */ | /* Smooth transition for effects */ | ||
transition: all 0.3s ease | transition: all 0.3s ease; | ||
/* Positioning for pseudo-elements */ | /* Positioning for pseudo-elements */ | ||
position: relative | 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%; | |||
left: - | |||
/* | /* Size equal to cell */ | ||
width: 100%; | |||
height: 100%; | |||
/* Smooth | /* Pink background gradient */ | ||
transition: | background: var(--gradient-bg); | ||
/* Low opacity for subtle effect */ | |||
opacity: 0.1; | |||
/* Smooth movement transition */ | |||
transition: left 0.3s ease; | |||
} | } | ||
/* ACTIVATES | /* 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; | color: var(--dark-pink) !important; | ||
/* | /* Removes underline */ | ||
text-decoration: none !important; | |||
/* | /* Semi-bold font weight */ | ||
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 */ | ||
width: | min-width: 150px; | ||
/* Height | /* Height adjusted to content */ | ||
height: | 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; | |||
margin: | |||
} | } | ||
/* | /* 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- | 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 */ | /* Smooth transition for effects */ | ||
transition: all 0.3s ease; | 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; | ||
/* | |||
background: | |||
/* | /* 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 | .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; } | |||
padding: | #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; | |||
color: | 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; | |||
. | } | ||
/* | |||
background: | /* 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; | 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 { | |||
background: | 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; | ||
background: | } | ||
/* | .gallery.centered { | ||
padding: | 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; | |||
padding: | 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; | |||
padding: | |||
border | |||
} | } | ||
/* 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 */ | ||
.skin-vector-legacy .mw-body- | @media screen and (min-width: 769px) { | ||
.skin-vector . | 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 (max-width: | @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; | |||
padding: | 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 { | ||
#mw-page- | from { | ||
#mw-head- | 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 */ | ||
#p-views | @media screen and (max-width: 480px) { | ||
#p-cactions | #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 */ | ||
#p- | @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; | |||
# | } | ||
#p-views | |||
#p-cactions | |||
} | |||
} | } | ||
/* | /* CORATO PINK THEME PRESERVATION */ | ||
/* Personal menu and search styling */ | |||
#p- | #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; } | |||
} | |||
# | |||
} | |||
# | |||
} | |||
.mw-ui-button, | |||
.mw-ui-input, | |||
.mw-ui-checkbox, | |||
.oo-ui-widget { | |||
} | |||
Revision as of 09:23, 8 August 2025
/* ========================================
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; }