MediaWiki:Common.css: Difference between revisions

Revision as of 19:57, 3 August 2025

/* ========================================
   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);
  
  /* Fixed position on screen */
  position: fixed;
  
  /* Positions at bottom */
  bottom: 0;
  left: 0;
  right: 0;
  
  /* High z-index to stay above other elements */
  z-index: 10;
  
  /* 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 {
  /* Light pink background */
  background: var(--light-pink) !important;
  
  /* Internal spacing */
  padding: 20px !important;
  
  /* Rounded borders */
  border-radius: 10px !important;
  
  /* Pink left border for highlight */
  border-left: 4px solid var(--dark-pink) !important;
  
  /* Vertical margins */
  margin: 20px 0 !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;
  }
}



/* 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;
  }
  
  /* 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:Common.css: Difference between revisions

Revision as of 19:57, 3 August 2025

Navigation menu

Search
