MediaWiki:Common.css: Difference between revisions

Revision as of 10:53, 21 February 2026

h2, h3 {

    overflow: hidden; /* Prevents floating [Expand] buttons from overlapping text */

    padding-top: 10px;

}

/* =========================================== */

/* Ragnawiki Base Styles */

/* =========================================== */



.ragnawiki-hero {

    background: linear-gradient(135deg, #FF6A00 0%, #F4B400 30%, #D93800 100%);

    color: white;

    padding: 25px;

    border-radius: 12px;

    text-align: center;

    margin: 15px 0;

    box-shadow: 0 4px 15px rgba(0,0,0,0.15);

    position: relative;

    overflow: hidden;

}



.ragnawiki-hero-title {

    font-size: 28px;

    font-weight: bold;

    margin-bottom: 10px;

    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

}



.ragnawiki-hero-subtitle {

    font-size: 16px;

    opacity: 0.95;

    margin-bottom: 15px;

}



.ragnawiki-grid {

    display: flex;

    gap: 20px;

    margin: 25px 0;

    flex-wrap: wrap;

}



.ragnawiki-card {

    background: white;

    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    overflow: hidden;

    flex: 1;

    min-width: 300px;

    transition: all 0.3s ease; /* Added for smooth hover */

}



/* Hover effect for cards */

.ragnawiki-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(255, 106, 0, 0.2);

}



.ragnawiki-card-header {

    color: white;

    padding: 12px 15px;

    font-weight: bold;

    font-size: 14px;

}



.ragnawiki-card-content {

    padding: 15px;

}



.ragnawiki-list {

    width: 100%;

    border: none;

}



.ragnawiki-list tr td {

    padding: 8px 5px;

    border-bottom: 1px solid #f0f0f0;

    vertical-align: middle;

}



.ragnawiki-list tr:last-child td {

    border-bottom: none;

}



.ragna-value {

    font-weight: 600;

}



.ragnawiki-notes {

    margin-top: 5px;

}



.ragnawiki-tip-box {

    background: #fff3f3;

    border-left: 4px solid #b22222;

    padding: 12px;

    border-radius: 6px;

    font-size: 13px;

}



.ragnawiki-warning-box {

    background: #fff3cd;

    border-left: 4px solid #f39c12;

    padding: 12px;

    border-radius: 6px;

    font-size: 13px;

}



/* =========================================== */

/* Navigation Grid Styles */

/* =========================================== */



.ragnawiki-nav-grid {

    display: flex;

    gap: 15px;

    margin: 25px 0;

    flex-wrap: wrap;

}



.ragnawiki-nav-card {

    background: white;

    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    overflow: hidden;

    flex: 1;

    min-width: 250px;

    transition: all 0.3s ease; /* Added for smooth hover */

}



.ragnawiki-nav-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(255, 106, 0, 0.2);

}



.ragnawiki-nav-header {

    color: white;

    padding: 12px 15px;

    font-weight: bold;

    font-size: 14px;

    text-align: center;

}



.ragnawiki-nav-content {

    padding: 0;

}



.ragnawiki-nav-table {

    width: 100%;

    border: none;

    border-collapse: collapse;

}



.ragnawiki-nav-table tr td {

    padding: 15px 6px;

    border-bottom: 1px solid #e1e8ed;

    vertical-align: middle;

}



.ragnawiki-nav-table tr:nth-child(odd) td {

    background: rgba(240, 248, 255, 0.7);

}



.ragnawiki-nav-table tr:nth-child(even) td {

    background: rgba(255, 255, 255, 0.9);

}



.ragnawiki-nav-table tr:last-child td {

    border-bottom: none;

}



/* =========================================== */

/* Core Color Classes */

/* =========================================== */



.ragna-blue { background: linear-gradient(135deg, #3498db, #2980b9); }

.ragna-green { background: linear-gradient(135deg, #2ecc71, #27ae60); }

.ragna-red { background: linear-gradient(135deg, #e74c3c, #c0392b); }

.ragna-purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); }

.ragna-orange { background: linear-gradient(135deg, #e67e22, #d35400); }

.ragna-gold { background: linear-gradient(135deg, #ffd700, #f1c40f); }

.ragna-teal { background: linear-gradient(135deg, #16a085, #1abc9c); }

.ragna-pink { background: linear-gradient(135deg, #f48fb1, #f06292); }

.ragna-yellow { background: linear-gradient(135deg, #ffeb3b, #fbc02d); }

.ragna-brown { background: linear-gradient(135deg, #795548, #5d4037); }

.ragna-dark { background: linear-gradient(135deg, #2c3e50, #34495e); }

.ragna-gray { background: linear-gradient(135deg, #95a5a6, #7f8c8d); }



/* =========================================== */

/* Table Styles */

/* =========================================== */



.wikitable {

    border-collapse: collapse;

    width: 100%;

    margin: 15px 0;

    background: white;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}



.wikitable th {

    background: linear-gradient(135deg, #667eea, #764ba2);

    color: white;

    padding: 12px 8px;

    font-weight: bold;

    font-size: 14px;

}



.wikitable td {

    padding: 10px 8px;

    border-bottom: 1px solid #f0f0f0;

    font-size: 13px;

}



.wikitable tr:nth-child(even) {

    background: rgba(240, 248, 255, 0.7);

}



/* =========================================== */

/* Scroll Progress Bar */

/* =========================================== */



#scroll-progress {

    position: fixed;

    top: 0;

    left: 0;

    height: 4px;

    background: linear-gradient(to right, #FF6A00, #D93800);

    z-index: 10001;

    width: 0%;

    transition: width 0.1s ease-out;

}



/* =========================================== */

/* Back to Top Button */

/* =========================================== */



.back-to-top-fixed {

    position: fixed;

    bottom: 30px;

    right: 30px;

    z-index: 9999;

}



.back-to-top-fixed a {

    background: linear-gradient(135deg, #FF6A00, #D93800);

    color: white;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    font-size: 16px;

    text-decoration: none;

    box-shadow: 0 4px 15px rgba(0,0,0,0.3);

    border: 3px solid white;

    transition: all 0.3s ease;

    cursor: pointer;

}



.back-to-top-fixed a:hover {

    background: linear-gradient(135deg, #FF7A20, #F4B400);

    transform: translateY(-5px) scale(1.1);

    box-shadow: 0 6px 20px rgba(0,0,0,0.4);

    color: white;

    text-decoration: none;

}



/* =========================================== */

/* Floating Navigation Menu */

/* =========================================== */



.floating-menu {

    position: fixed;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(255, 255, 255, 0.85); 

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border-radius: 12px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);

    padding: 0 0 10px 0; /* No top padding removes the white bar */

    min-width: 180px;

    z-index: 9998;

    border: 1px solid rgba(255, 255, 255, 0.3);

    transition: all 0.3s ease;

    overflow: hidden; /* Clips the header to the rounded corners */

}



.floating-menu-header {

    background: linear-gradient(135deg, #AF011C, #D93800);

    color: white;

    padding: 12px 15px;

    font-weight: bold;

    font-size: 14px;

    text-align: center;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.floating-menu-header .arrow {

    transition: transform 0.3s ease;

}



.floating-menu.collapsed .floating-menu-header .arrow {

    transform: rotate(-90deg);

}



.floating-menu-items {

    padding: 8px 0;

    transition: all 0.3s ease;

}



.floating-menu.collapsed .floating-menu-items {

    max-height: 0;

    padding: 0;

    opacity: 0;

    overflow: hidden;

}



.floating-menu-items a {

    display: flex;

    align-items: center;

    padding: 10px 15px;

    color: #333;

    text-decoration: none;

    font-size: 13px;

    transition: all 0.2s ease;

    border-left: 3px solid transparent;

}



/* Active and Hover States */

.floating-menu-items a:hover, 

.floating-menu-items a.reading-now {

    background: rgba(255, 106, 0, 0.08);

    border-left-color: #FF6A00;

    color: #FF6A00;

    text-decoration: none;

}



.floating-menu-items a:before {

    content: "•";

    color: #FF6A00;

    font-weight: bold;

    margin-right: 8px;

    font-size: 16px;

}



/* Menu toggle button (Mobile) */

.floating-menu-toggle {

    position: fixed;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    background: linear-gradient(135deg, #2ecc71, #27ae60);

    color: white;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    display: none;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 9999;

    box-shadow: 0 4px 15px rgba(0,0,0,0.3);

    border: 1px solid white;

    font-weight: bold;

    font-size: 20px;

}



/* =========================================== */

/* Responsive Design */

/* =========================================== */



@media (max-width: 1200px) {

    .floating-menu {

        left: 10px;

        min-width: 160px;

    }

}



@media (max-width: 768px) {

    .floating-menu {

        left: -220px; /* Hide offscreen */

        top: 10px;

        transform: none;

        width: 200px;

        max-height: 80vh;

        overflow-y: auto;

    }

    

    .floating-menu.mobile-visible {

        left: 10px;

    }

    

    .floating-menu-toggle {

        display: flex;

    }



    .back-to-top-fixed {

        bottom: 20px;

        right: 20px;

    }



    .back-to-top-fixed a {

        width: 50px;

        height: 50px;

        font-size: 14px;

    }

}



/* Container to center and wrap the ribbons */

.ragna-ribbon-container {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin: 20px 0;

    padding: 0 10px;

}



/* The Individual Ribbon Style */

.ragna-ribbon {

    background: #2c3e50; /* Dark premium blue/slate */

    color: #FFD700;    /* Classic RO Gold text */

    padding: 10px 25px;

    font-weight: bold;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 1px;

    text-align: center;

    min-width: 160px;

    

    /* This creates the pointed RPG ribbon shape */

    clip-path: polygon(92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%, 8% 0);

    

    /* Gold top and bottom borders */

    border-top: 2px solid #FFD700;

    border-bottom: 2px solid #FFD700;

    

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    transition: transform 0.2s ease, background 0.2s ease;

    cursor: default;

}



/* Subtle hover effect to make it feel "Alive" */

.ragna-ribbon:hover {

    transform: scale(1.05);

    background: #34495e;

    color: #fff;

}



/* Mobile responsiveness */

@media (max-width: 600px) {

    .ragna-ribbon {

        min-width: 130px;

        font-size: 11px;

        padding: 8px 15px;

    }

}



/* 1. Force each collapsible to stay in its own row */

.mw-collapsible {

    display: block !important;

    width: 100% !important;

    clear: both !important;

    margin-bottom: 10px !important;

}



/* 2. Style the toggle button to be clean and clickable */

.mw-collapsible-toggle {

    float: right !important;

    font-weight: bold;

    color: #FF6A00 !important;

    background: rgba(255, 255, 255, 0.8);

    padding: 2px 10px !important;

    border-radius: 4px;

    z-index: 100;

}



/* 3. Fix the "Ugly" background overlap */

.mw-collapsible-content {

    clear: both !important; /* Forces content BELOW the header */

    padding: 15px !important;

    background: transparent !important; /* Removes those big red/yellow blocks */

    overflow: visible !important;

}



/* 4. Ensure headers don't get squished */

h2, h3, h4 {

    display: block !important;

    width: 100% !important;

    overflow: hidden;

}



/* 1. Hide the default MediaWiki [Expand/Collapse] text entirely */

.mw-collapsible-toggle-default {

    display: none !important;

}



/* 2. Style the custom headers to be full-width clickable buttons */

.mw-collapsible-toggle.ragnawiki-card-header, 

.mw-collapsible-toggle.ragnawiki-nav-header {

    float: none !important; /* Removes the "fixed on right" behavior */

    display: block !important;

    cursor: pointer;

    user-select: none;

    width: 100%;

    box-sizing: border-box;

    text-align: center;

}



/* 3. Ensure the collapsible content clears properly */

.mw-collapsible-content {

    clear: both !important;

}



/* Hide the default [Expand] text */

.mw-collapsible-toggle-default { display: none !important; }



/* Make headers full-width clickable bars */

.mw-collapsible-toggle.ragnawiki-card-header {

    float: none !important;

    display: block !important;

    cursor: pointer;

    text-align: center;

    width: 100%;

    box-sizing: border-box;

}



/* Color Classes */

.ragna-blue   { background-color: #3498db !important; color: white !important; }

.ragna-green  { background-color: #2ecc71 !important; color: white !important; }

.ragna-teal   { background-color: #1abc9c !important; color: white !important; }

.ragna-purple { background-color: #9b59b6 !important; color: white !important; }

.ragna-orange { background-color: #e67e22 !important; color: white !important; }

.ragna-red    { background-color: #e74c3c !important; color: white !important; }

.ragna-brown  { background-color: #a0522d !important; color: white !important; }

.ragna-cyan   { background-color: #00bcd4 !important; color: white !important; }

.ragna-gold   { background-color: #f1c40f !important; color: #333 !important; }

.ragna-pink   { background-color: #e91e63 !important; color: white !important; }

.ragna-dark   { background-color: #2c3e50 !important; color: white !important; }

.ragna-silver { background-color: #bdc3c7 !important; color: #333 !important; }