MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ========================================
MODERN PINK THEME FOR CORATO WIKI
Compatible with MediaWiki
======================================== */
/* ========================================
ALWAYS VISIBLE SIDEBAR
Forces the sidebar to remain visible
======================================== */
#mw-panel {
display: block !important;
visibility: visible !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;
}
/* Forces the sidebar to appear even when MediaWiki tries to hide it */
.mw-panel, #mw-panel, .sidebar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensures the sidebar is always rendered */
body.mediawiki #mw-panel,
body #mw-panel,
.mw-body #mw-panel {
display: block !important;
visibility: visible !important;
position: fixed !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 */
#content {
margin-left: 200px !important;
}
/* Removes the hamburger menu button */
.mw-ui-icon-menu {
display: none !important;
}
/* ========================================
RESPONSIVENESS FOR VECTOR LEGACY 2010
Specific rules for different resolutions
======================================== */
/* Desktop - Large screens (above 1200px) */
@media screen and (min-width: 1200px) {
#mw-panel {
width: 180px !important;
}
#content {
margin-left: 200px !important;
}
}
/* Tablets - Medium screens (768px - 1199px) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
#mw-panel {
width: 160px !important;
padding: 10px 0 !important;
}
#mw-panel .portal {
padding: 0 8px !important;
margin-bottom: 12px !important;
}
#mw-panel .portal h3 {
font-size: 0.9em !important;
padding: 5px 8px !important;
}
#mw-panel .portal .body ul li a {
padding: 5px 8px !important;
font-size: 0.85em !important;
}
#content {
margin-left: 180px !important;
}
}
/* Mobile - Small screens (up to 767px) */
@media screen and (max-width: 767px) {
#mw-panel {
width: 140px !important;
padding: 8px 0 !important;
font-size: 0.8em !important;
}
#mw-panel .portal {
padding: 0 6px !important;
margin-bottom: 10px !important;
}
#mw-panel .portal h3 {
font-size: 0.8em !important;
padding: 4px 6px !important;
margin-bottom: 6px !important;
}
#mw-panel .portal .body ul li a {
padding: 4px 6px !important;
font-size: 0.75em !important;
}
#content {
margin-left: 160px !important;
}
}
/* Forces visibility at all resolutions */
@media screen and (max-width: 982px) {
#mw-panel {
display: block !important;
visibility: visible !important;
}
}
/* Additional rules to ensure the sidebar never disappears */
@media screen {
#mw-panel {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* Forces the sidebar to be visible during page loading */
html.client-js #mw-panel,
html #mw-panel,
.mw-page-container #mw-panel {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Prevents JavaScript from hiding the sidebar */
#mw-panel[style*="display: none"],
#mw-panel[style*="visibility: hidden"] {
display: block !important;
visibility: visible !important;
}
/* ========================================
SPECIFIC RULES FOR VECTOR LEGACY 2010
Overrides skin behaviors
======================================== */
/* Forces sidebar visible in Vector Legacy skin */
body.skin-vector-legacy #mw-panel,
body.mediawiki.ltr.sitedir-ltr.ns-0.ns-subject.page-Main_Page.rootpage-Main_Page.skin-vector.action-view #mw-panel {
display: block !important;
visibility: visible !important;
position: fixed !important;
left: 0 !important;
top: 0 !important;
}
/* Adjusts content for Vector Legacy */
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
margin-left: 200px !important;
}
/* Specific responsiveness for Vector Legacy */
@media screen and (max-width: 767px) {
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
margin-left: 160px !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
margin-left: 180px !important;
}
}
/* ========================================
CLICKABLE HIGHLIGHT CARDS
Styling for cards with JavaScript
======================================== */
/* Pointer cursor to indicate it's clickable */
.destaque-card[data-link] {
cursor: pointer !important;
transition: all 0.3s ease !important;
}
/* Hover effect for clickable cards */
.destaque-card[data-link]:hover {
transform: translateY(-8px) !important;
box-shadow: var(--hover-shadow) !important;
}
/* Specific style for clickable cards text */
.destaque-card[data-link] .destaque-text h3 {
color: #e91e63 !important;
transition: color 0.3s ease !important;
}
.destaque-card[data-link]:hover .destaque-text h3 {
color: #c44569 !important;
}
/* Ensures smooth transition */
.destaque-card[data-link] * {
transition: inherit !important;
}
/* ========================================
ADVANCED RESPONSIVENESS
Support for very small devices
======================================== */
/* Very small devices (up to 480px) */
@media screen and (max-width: 480px) {
#mw-panel {
width: 120px !important;
padding: 6px 0 !important;
font-size: 0.75em !important;
}
#mw-panel .portal {
padding: 0 4px !important;
margin-bottom: 8px !important;
}
#mw-panel .portal h3 {
font-size: 0.7em !important;
padding: 3px 4px !important;
margin-bottom: 4px !important;
}
#mw-panel .portal .body ul li a {
padding: 3px 4px !important;
font-size: 0.7em !important;
}
#content,
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
margin-left: 140px !important;
}
}
/* Landscape orientation on mobile devices */
@media screen and (max-height: 500px) and (orientation: landscape) {
#mw-panel {
width: 140px !important;
font-size: 0.8em !important;
}
#mw-panel .portal {
margin-bottom: 8px !important;
}
#mw-panel .portal h3 {
font-size: 0.8em !important;
padding: 4px 6px !important;
}
#content,
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
margin-left: 160px !important;
}
}
/* Forces visibility at all breakpoints */
@media screen and (max-width: 480px),
screen and (max-height: 500px) and (orientation: landscape) {
#mw-panel,
body.skin-vector-legacy #mw-panel {
display: block !important;
visibility: visible !important;
position: fixed !important;
}
}
/* GLOBAL CSS VARIABLES
Defines all theme colors and visual effects
Facilitates maintenance and future changes */
:root {
/* Main colors of the pink theme */
--light-pink: #ffeef7; /* Light pink - soft backgrounds */
--dark-pink: #e91e63; /* Dark pink - important texts */
--accent-pink: #f8bbd9; /* Accent pink - borders and details */
/* Gradients and visual effects */
--gradient-bg: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%); /* Main gradient */
--card-shadow: 0 8px 32px rgba(255, 107, 157, 0.2); /* Default card shadow */
--hover-shadow: 0 12px 40px rgba(255, 107, 157, 0.3); /* Hover shadow */
}
/* ========================================
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
Animated banner to indicate site under development */
.construction-notice {
/* Very light and transparent pink background */
background: rgba(233, 30, 99, 0.1) !important;
/* Semi-transparent pink border */
border: 2px solid rgba(233, 30, 99, 0.3) !important;
/* Soft rounded borders */
border-radius: 15px !important;
/* Comfortable internal spacing */
padding: 15px 30px !important;
/* Displays as inline block for centering */
display: inline-block !important;
/* Bold text for emphasis */
font-weight: bold !important;
/* Slightly larger font size */
font-size: 1.1em !important;
/* Dark pink color for contrast */
color: #e91e63 !important;
/* Background blur effect */
backdrop-filter: blur(5px) !important;
/* Continuous pulsing animation */
animation: pulse 2s infinite !important;
}
/* PULSING ANIMATION
Subtle growth and shrinking effect */
@keyframes pulse {
/* Initial and final state - normal size */
0%, 100% { transform: scale(1); }
/* Intermediate state - slightly larger */
50% { transform: scale(1.05); }
}
/* ========================================
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;
/* Low z-index to stay below other elements */
position: relative !important;
z-index: -1 !important;
}
/* ========================================
RESPONSIVE DESIGN
Adaptations for different screen sizes
======================================== */
/* MEDIUM SCREENS (up to 1200px) */
@media (max-width: 1200px) {
/* Forces horizontal scroll to maintain layout */
html, body {
overflow-x: auto !important;
min-width: 1200px !important;
}
/* Reduces highlights grid to 3 columns */
.destaques-grid {
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
/* Adjusts card height and spacing */
.destaque-card {
min-height: 280px;
padding: 15px;
}
/* Increases image size */
.destaque-image {
max-width: 200px;
height: 160px;
}
/* Increases title font size */
.destaque-text h3 {
font-size: 1em;
}
/* Reduces minimum width of double cells */
.mainpage-cell-double {
min-width: 500px;
}
}
/* LARGE SCREENS (above 900px) - Ensures sidebar stays on the side */
@media (min-width: 901px) {
/* Forces horizontal flexible layout */
#mainpage-content {
flex-direction: row !important;
align-items: flex-start !important;
}
/* Ensures sidebar stays on the side */
.lateral-bar {
position: sticky !important;
top: 20px !important;
order: 1 !important;
flex-shrink: 0 !important;
min-width: 150px !important;
max-width: 150px !important;
}
/* Ensures main content occupies remaining space */
.mainpage-cell,
.mainpage-cell-double {
flex: 1 !important;
}
}
/* TABLETS AND SMALL SCREENS (up to 900px) */
@media (max-width: 900px) {
/* Changes main layout to single column */
#mainpage-content {
flex-direction: column;
gap: 20px;
}
/* Removes minimum widths and forces full width */
.mainpage-cell,
.mainpage-cell-double {
min-width: auto;
width: 100%;
}
/* Moves sidebar to top */
.lateral-bar {
order: -1; /* Appears first */
margin-bottom: 20px; /* Bottom spacing */
position: static; /* Removes sticky position */
}
/* Responsive wikitable for tablets */
.wikitable {
font-size: 0.9em !important;
}
.wikitable td {
padding: 15px !important;
min-width: 120px !important;
}
}
/* MOBILE DEVICES (up to 768px) */
@media (max-width: 768px) {
/* Reduces main title size */
.hero-title {
font-size: 2.5em !important;
}
/* Adjusts subtitle with side padding */
.hero-subtitle {
font-size: 1em !important;
padding: 0 10px;
}
/* Reduces main content padding */
#mainpage-content {
padding: 20px;
}
/* Reduces cell padding */
.mainpage-cell {
padding: 15px;
}
/* Classes grid in 2 columns */
.classes-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Highlights grid in 2 columns */
.destaques-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding: 0 10px;
}
/* Adjusts card height and padding */
.destaque-card {
min-height: 320px;
padding: 18px;
}
/* Increases image size for mobile */
.destaque-image {
max-width: 220px;
height: 180px;
}
/* Increases title font */
.destaque-text h3 {
font-size: 1.1em;
}
/* Maintains description size */
.destaque-text p {
font-size: 0.9em;
}
/* Responsive wikitable for mobile */
.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 rgba(255, 107, 157, 0.2) !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;
}
/* Ensure button works on all MediaWiki skins */
body.mediawiki #back-to-top-btn,
body #back-to-top-btn,
.mw-body #back-to-top-btn {
position: fixed !important;
bottom: 20px !important;
right: 20px !important;
z-index: 9999 !important;
display: block !important;
visibility: visible !important;
}
/* SPECIFIC RULES FOR VECTOR LEGACY 2010 SKIN */
body.skin-vector-legacy #back-to-top-btn,
body.mediawiki.ltr.sitedir-ltr.skin-vector #back-to-top-btn,
body.skin-vector.action-view #back-to-top-btn {
position: fixed !important;
bottom: 20px !important;
right: 20px !important;
z-index: 99999 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
}
body.skin-vector-legacy #back-to-top-btn a,
body.mediawiki.ltr.sitedir-ltr.skin-vector #back-to-top-btn a,
body.skin-vector.action-view #back-to-top-btn a {
position: relative !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
z-index: 1 !important;
}
/* Override any Vector Legacy CSS that might hide fixed elements */
.skin-vector-legacy .mw-body-content #back-to-top-btn,
.skin-vector .mw-body-content #back-to-top-btn {
position: fixed !important;
bottom: 20px !important;
right: 20px !important;
z-index: 99999 !important;
}
/* SMALL MOBILE DEVICES (up to 480px) */
@media (max-width: 480px) {
/* Classes grid in single column */
.classes-grid {
grid-template-columns: 1fr;
}
/* Highlights grid in single column */
.destaques-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 15px;
}
/* Adjust back to top button for mobile */
#back-to-top-btn {
bottom: 15px !important;
right: 15px !important;
}
#back-to-top-btn a {
padding: 8px 12px !important;
font-size: 0.9em !important;
}
/* Adjusts cards for small screen */
.destaque-card {
min-height: 280px; /* Smaller height */
padding: 20px; /* Larger padding */
gap: 15px; /* Larger gap between elements */
}
/* Adjusts images for small screen */
.destaque-image {
max-width: 250px;
height: 200px;
}
.destaque-text h3 {
font-size: 1em;
}
.destaque-text p {
font-size: 0.9em;
}
/* Wikitable for very small screens */
.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;
}
}
/* Hide MediaWiki default elements that interfere with design */
#mw-page-base,
#mw-head-base {
background: transparent !important;
}
.mw-body {
border: none !important;
}
#footer {
background: transparent !important;
border: none !important;
}
/* ========================================
MEDIAWIKI PAGE ACTION BUTTONS FIX
Prevents styling interference with page buttons
======================================== */
/* Reset MediaWiki page action tabs to default styling */
#p-views ul,
#p-cactions ul,
.vector-menu-tabs ul,
.vector-menu-dropdown ul {
display: flex !important;
flex-direction: row !important;
background: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Reset individual page action buttons */
#p-views li,
#p-cactions li,
.vector-menu-tabs li,
.vector-menu-dropdown li,
#ca-nstab-main,
#ca-talk,
#ca-edit,
#ca-history,
#ca-viewsource {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
vertical-align: top !important;
height: auto !important;
width: auto !important;
min-height: auto !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Reset page action button links */
#p-views a,
#p-cactions a,
.vector-menu-tabs a,
.vector-menu-dropdown a,
#ca-nstab-main a,
#ca-talk a,
#ca-edit a,
#ca-history a,
#ca-viewsource a {
display: inline-block !important;
padding: 0.5em 0.8em !important;
margin: 0 !important;
background: transparent !important;
border: 1px solid #a2a9b1 !important;
border-bottom: none !important;
color: #0645ad !important;
text-decoration: none !important;
font-size: 0.875em !important;
font-weight: normal !important;
line-height: 1.125em !important;
white-space: nowrap !important;
cursor: pointer !important;
box-shadow: none !important;
border-radius: 0 !important;
transform: none !important;
transition: none !important;
}
/* Reset hover effects for page action buttons */
#p-views a:hover,
#p-cactions a:hover,
.vector-menu-tabs a:hover,
.vector-menu-dropdown a:hover,
#ca-nstab-main a:hover,
#ca-talk a:hover,
#ca-edit a:hover,
#ca-history a:hover,
#ca-viewsource a:hover {
background: #f8f9fa !important;
color: #0645ad !important;
text-decoration: none !important;
transform: none !important;
box-shadow: none !important;
}
/* Reset selected/active page action buttons */
#p-views .selected a,
#p-cactions .selected a,
.vector-menu-tabs .selected a,
.vector-menu-dropdown .selected a {
background: #fff !important;
color: #000 !important;
border-bottom: 1px solid #fff !important;
}
/* Reset page action containers */
#p-views,
#p-cactions,
.vector-menu-tabs,
.vector-menu-dropdown {
background: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
display: inline-block !important;
vertical-align: top !important;
height: auto !important;
width: auto !important;
}
/* Ensure page actions are horizontally aligned */
#left-navigation,
#right-navigation,
.vector-menu-tabs-legacy,
.vector-menu-dropdown {
display: inline-block !important;
vertical-align: top !important;
margin: 0 !important;
padding: 0 !important;
}
/* Reset any flex or grid layouts that might affect page actions */
#mw-head,
#mw-head-base,
.mw-header {
display: block !important;
flex-direction: row !important;
align-items: flex-start !important;
}
/* Prevent pink theme from affecting MediaWiki UI elements */
.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;
}