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