|
Tags: Blanking Manual revert |
| (93 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ========================================
| |
| 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;
| |
| }
| |