MediaWiki:Common.css: Difference between revisions

From Ragnafied Wiki
← Older editNewer edit →
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
Line 1: Line 1:
/* =========================================== */
h2, h3 {
/* Base Styles & Fixes */
 
/* =========================================== */
    overflow: hidden; /* Prevents floating [Expand] buttons from overlapping text */


/* Fix for collapsible headers */
h2, h3, h4 {
    overflow: hidden;
     padding-top: 10px;
     padding-top: 10px;
    clear: both !important;
 
    width: 100% !important;
    display: block !important;
}
}


/* =========================================== */
/* Collapsible Elements - Consolidated Fixes */
/* =========================================== */
/* =========================================== */


/* Force each collapsible to stay in its own row */
/* Ragnawiki Base Styles */
.mw-collapsible {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin-bottom: 15px !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


/* Hide the default MediaWiki [Expand] text */
/* =========================================== */
.mw-collapsible-toggle-default {
    display: none !important;
}


/* Style the custom headers to be full-width clickable */
.mw-collapsible-toggle.ragnawiki-card-header,
.mw-collapsible-toggle.ragnawiki-nav-header {
    float: none !important;
    display: block !important;
    cursor: pointer;
    user-select: none;
    width: 100%;
    padding: 15px 20px !important;
    box-sizing: border-box;
    text-align: left;
    font-weight: bold;
    font-size: 16px;
    position: relative;
    transition: all 0.3s ease;
}


/* Add indicator arrows */
.mw-collapsible-toggle.ragnawiki-card-header::after,
.mw-collapsible-toggle.ragnawiki-nav-header::after {
    content: "▼";
    float: right;
    font-size: 14px;
    transition: transform 0.3s ease;
}


/* Rotate arrow when collapsed */
.ragnawiki-hero {
.mw-collapsible-toggle-collapsed.ragnawiki-card-header::after,
.mw-collapsible-toggle-collapsed.ragnawiki-nav-header::after {
    transform: rotate(-90deg);
}


/* Fix content area */
     background: linear-gradient(135deg, #FF6A00 0%, #F4B400 30%, #D93800 100%);
.mw-collapsible-content {
    clear: both !important;
    padding: 20px !important;
     background: white !important;
    border: 1px solid #e1e8ed;
    border-top: none;
    border-radius: 0 0 8px 8px;
}


/* =========================================== */
    color: white;
/* Ragnawiki Base Styles */
/* =========================================== */


.ragnawiki-hero {
    background: linear-gradient(135deg, #FF6A00 0%, #F4B400 30%, #D93800 100%);
    color: white;
     padding: 25px;
     padding: 25px;
     border-radius: 12px;
     border-radius: 12px;
     text-align: center;
     text-align: center;
     margin: 15px 0;
     margin: 15px 0;
     box-shadow: 0 4px 15px rgba(0,0,0,0.15);
     box-shadow: 0 4px 15px rgba(0,0,0,0.15);
     position: relative;
     position: relative;
     overflow: hidden;
     overflow: hidden;
}
}


.ragnawiki-hero-title {
.ragnawiki-hero-title {
     font-size: 28px;
     font-size: 28px;
     font-weight: bold;
     font-weight: bold;
     margin-bottom: 10px;
     margin-bottom: 10px;
     text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
     text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
}


.ragnawiki-hero-subtitle {
.ragnawiki-hero-subtitle {
     font-size: 16px;
     font-size: 16px;
     opacity: 0.95;
     opacity: 0.95;
     margin-bottom: 15px;
     margin-bottom: 15px;
}
}


.ragnawiki-grid {
.ragnawiki-grid {
     display: flex;
     display: flex;
     gap: 20px;
     gap: 20px;
     margin: 25px 0;
     margin: 25px 0;
     flex-wrap: wrap;
     flex-wrap: wrap;
}
}


.ragnawiki-card {
.ragnawiki-card {
     background: white;
     background: white;
     border-radius: 10px;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     overflow: hidden;
     overflow: hidden;
     flex: 1;
     flex: 1;
     min-width: 300px;
     min-width: 300px;
     transition: all 0.3s ease;
 
     transition: all 0.3s ease; /* Added for smooth hover */
 
}
}
/* Hover effect for cards */


.ragnawiki-card:hover {
.ragnawiki-card:hover {
     transform: translateY(-5px);
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(255, 106, 0, 0.2);
     box-shadow: 0 8px 25px rgba(255, 106, 0, 0.2);
}
}


.ragnawiki-card-header {
.ragnawiki-card-header {
     color: white;
     color: white;
     padding: 15px 20px !important;
 
     padding: 12px 15px;
 
     font-weight: bold;
     font-weight: bold;
     font-size: 16px;
 
    margin: 0 !important;
     font-size: 14px;
 
}
}


.ragnawiki-card-content {
.ragnawiki-card-content {
     padding: 20px;
 
    background: white;
     padding: 15px;
 
}
}


.ragnawiki-list {
.ragnawiki-list {
     width: 100%;
     width: 100%;
     border: none;
     border: none;
    border-collapse: collapse;
 
}
}


.ragnawiki-list tr td {
.ragnawiki-list tr td {
     padding: 10px 8px;
 
     padding: 8px 5px;
 
     border-bottom: 1px solid #f0f0f0;
     border-bottom: 1px solid #f0f0f0;
     vertical-align: middle;
     vertical-align: middle;
}
}


.ragnawiki-list tr:last-child td {
.ragnawiki-list tr:last-child td {
     border-bottom: none;
     border-bottom: none;
}
}


.ragna-value {
.ragna-value {
     font-weight: 600;
     font-weight: 600;
}
}


.ragnawiki-notes {
.ragnawiki-notes {
     margin-top: 5px;
     margin-top: 5px;
}
}


.ragnawiki-tip-box {
.ragnawiki-tip-box {
     background: #fff3f3;
     background: #fff3f3;
     border-left: 4px solid #b22222;
     border-left: 4px solid #b22222;
     padding: 15px;
 
     padding: 12px;
 
     border-radius: 6px;
     border-radius: 6px;
     font-size: 14px;
 
    margin: 15px 0;
     font-size: 13px;
 
}
}


.ragnawiki-warning-box {
.ragnawiki-warning-box {
     background: #fff3cd;
     background: #fff3cd;
     border-left: 4px solid #f39c12;
     border-left: 4px solid #f39c12;
     padding: 15px;
 
     padding: 12px;
 
     border-radius: 6px;
     border-radius: 6px;
     font-size: 14px;
 
    margin: 15px 0;
     font-size: 13px;
 
}
}


/* =========================================== */
/* =========================================== */
/* Navigation Grid Styles */
/* Navigation Grid Styles */
/* =========================================== */
/* =========================================== */


.ragnawiki-nav-grid {
.ragnawiki-nav-grid {
     display: flex;
     display: flex;
     gap: 15px;
     gap: 15px;
     margin: 25px 0;
     margin: 25px 0;
     flex-wrap: wrap;
     flex-wrap: wrap;
}
}


.ragnawiki-nav-card {
.ragnawiki-nav-card {
     background: white;
     background: white;
     border-radius: 10px;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     overflow: hidden;
     overflow: hidden;
     flex: 1;
     flex: 1;
     min-width: 250px;
     min-width: 250px;
     transition: all 0.3s ease;
 
     transition: all 0.3s ease; /* Added for smooth hover */
 
}
}


.ragnawiki-nav-card:hover {
.ragnawiki-nav-card:hover {
     transform: translateY(-5px);
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(255, 106, 0, 0.2);
     box-shadow: 0 8px 25px rgba(255, 106, 0, 0.2);
}
}


.ragnawiki-nav-header {
.ragnawiki-nav-header {
     color: white;
     color: white;
     padding: 15px 20px !important;
 
     padding: 12px 15px;
 
     font-weight: bold;
     font-weight: bold;
     font-size: 15px;
 
     font-size: 14px;
 
     text-align: center;
     text-align: center;
    margin: 0 !important;
 
}
}


.ragnawiki-nav-content {
.ragnawiki-nav-content {
     padding: 0;
     padding: 0;
}
}


.ragnawiki-nav-table {
.ragnawiki-nav-table {
     width: 100%;
     width: 100%;
     border: none;
     border: none;
     border-collapse: collapse;
     border-collapse: collapse;
}
}


.ragnawiki-nav-table tr td {
.ragnawiki-nav-table tr td {
     padding: 12px 10px;
 
     padding: 15px 6px;
 
     border-bottom: 1px solid #e1e8ed;
     border-bottom: 1px solid #e1e8ed;
     vertical-align: middle;
     vertical-align: middle;
}
}


.ragnawiki-nav-table tr:nth-child(odd) td {
.ragnawiki-nav-table tr:nth-child(odd) td {
     background: rgba(240, 248, 255, 0.7);
     background: rgba(240, 248, 255, 0.7);
}
}


.ragnawiki-nav-table tr:nth-child(even) td {
.ragnawiki-nav-table tr:nth-child(even) td {
     background: white;
 
     background: rgba(255, 255, 255, 0.9);
 
}
}


.ragnawiki-nav-table tr:last-child td {
.ragnawiki-nav-table tr:last-child td {
     border-bottom: none;
     border-bottom: none;
}
}


/* =========================================== */
/* =========================================== */
/* Core Color Classes */
/* Core Color Classes */
/* =========================================== */
/* =========================================== */


.ragna-blue { background: linear-gradient(135deg, #3498db, #2980b9); color: white; }
.ragna-green { background: linear-gradient(135deg, #2ecc71, #27ae60); color: white; }
.ragna-red { background: linear-gradient(135deg, #e74c3c, #c0392b); color: white; }
.ragna-purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); color: white; }
.ragna-orange { background: linear-gradient(135deg, #e67e22, #d35400); color: white; }
.ragna-gold { background: linear-gradient(135deg, #f1c40f, #f39c12); color: #333; }
.ragna-teal { background: linear-gradient(135deg, #1abc9c, #16a085); color: white; }
.ragna-pink { background: linear-gradient(135deg, #e91e63, #c2185b); color: white; }
.ragna-yellow { background: linear-gradient(135deg, #ffeb3b, #fbc02d); color: #333; }
.ragna-brown { background: linear-gradient(135deg, #795548, #5d4037); color: white; }
.ragna-dark { background: linear-gradient(135deg, #2c3e50, #34495e); color: white; }
.ragna-gray { background: linear-gradient(135deg, #95a5a6, #7f8c8d); color: white; }
.ragna-cyan { background: linear-gradient(135deg, #00bcd4, #0097a7); color: white; }
.ragna-silver { background: linear-gradient(135deg, #bdc3c7, #95a5a6); color: #333; }


/* Solid color fallbacks */
 
.ragna-blue-solid { background-color: #3498db; color: white; }
.ragna-blue { background: linear-gradient(135deg, #3498db, #2980b9); }
.ragna-green-solid { background-color: #2ecc71; color: white; }
 
.ragna-red-solid { background-color: #e74c3c; color: white; }
.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 */
/* Table Styles */
/* =========================================== */
/* =========================================== */


.wikitable {
.wikitable {
     border-collapse: collapse;
     border-collapse: collapse;
     width: 100%;
     width: 100%;
     margin: 15px 0;
     margin: 15px 0;
     background: white;
     background: white;
     border-radius: 8px;
     border-radius: 8px;
     overflow: hidden;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
}


.wikitable th {
.wikitable th {
     background: linear-gradient(135deg, #667eea, #764ba2);
     background: linear-gradient(135deg, #667eea, #764ba2);
     color: white;
     color: white;
     padding: 12px 10px;
 
     padding: 12px 8px;
 
     font-weight: bold;
     font-weight: bold;
     font-size: 14px;
     font-size: 14px;
    text-align: left;
 
}
}


.wikitable td {
.wikitable td {
     padding: 10px 10px;
 
     padding: 10px 8px;
 
     border-bottom: 1px solid #f0f0f0;
     border-bottom: 1px solid #f0f0f0;
     font-size: 13px;
     font-size: 13px;
}
}


.wikitable tr:last-child td {
 
    border-bottom: none;
}


.wikitable tr:nth-child(even) {
.wikitable tr:nth-child(even) {
     background: rgba(240, 248, 255, 0.5);
 
     background: rgba(240, 248, 255, 0.7);
 
}
}


/* =========================================== */
/* =========================================== */
/* Scroll Progress Bar */
/* Scroll Progress Bar */
/* =========================================== */
/* =========================================== */


#scroll-progress {
#scroll-progress {
     position: fixed;
     position: fixed;
     top: 0;
     top: 0;
     left: 0;
     left: 0;
     height: 4px;
     height: 4px;
     background: linear-gradient(to right, #FF6A00, #D93800);
     background: linear-gradient(to right, #FF6A00, #D93800);
     z-index: 10001;
     z-index: 10001;
     width: 0%;
     width: 0%;
     transition: width 0.1s ease-out;
     transition: width 0.1s ease-out;
}
}


/* =========================================== */
/* =========================================== */
/* Back to Top Button */
/* Back to Top Button */
/* =========================================== */
/* =========================================== */


.back-to-top-fixed {
.back-to-top-fixed {
     position: fixed;
     position: fixed;
     bottom: 30px;
     bottom: 30px;
     right: 30px;
     right: 30px;
     z-index: 9999;
     z-index: 9999;
    opacity: 0;
 
    visibility: hidden;
    transition: all 0.3s ease;
}
}


.back-to-top-fixed.visible {
 
    opacity: 1;
    visibility: visible;
}


.back-to-top-fixed a {
.back-to-top-fixed a {
     background: linear-gradient(135deg, #FF6A00, #D93800);
     background: linear-gradient(135deg, #FF6A00, #D93800);
     color: white;
     color: white;
     width: 60px;
     width: 60px;
     height: 60px;
     height: 60px;
     border-radius: 50%;
     border-radius: 50%;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     font-weight: bold;
     font-weight: bold;
     font-size: 16px;
     font-size: 16px;
     text-decoration: none;
     text-decoration: none;
     box-shadow: 0 4px 15px rgba(0,0,0,0.3);
     box-shadow: 0 4px 15px rgba(0,0,0,0.3);
     border: 3px solid white;
     border: 3px solid white;
     transition: all 0.3s ease;
     transition: all 0.3s ease;
     cursor: pointer;
     cursor: pointer;
}
}


.back-to-top-fixed a:hover {
.back-to-top-fixed a:hover {
     background: linear-gradient(135deg, #FF7A20, #F4B400);
     background: linear-gradient(135deg, #FF7A20, #F4B400);
     transform: translateY(-5px) scale(1.1);
     transform: translateY(-5px) scale(1.1);
     box-shadow: 0 6px 20px rgba(0,0,0,0.4);
     box-shadow: 0 6px 20px rgba(0,0,0,0.4);
     color: white;
     color: white;
     text-decoration: none;
     text-decoration: none;
}
}


/* =========================================== */
/* =========================================== */
/* Floating Navigation Menu */
/* Floating Navigation Menu */
/* =========================================== */
/* =========================================== */


.floating-menu {
.floating-menu {
     position: fixed;
     position: fixed;
     right: 20px;
     right: 20px;
     top: 50%;
     top: 50%;
     transform: translateY(-50%);
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.95);
 
     background: rgba(255, 255, 255, 0.85);  
 
     backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 12px;
     border-radius: 12px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
     padding: 0;
 
     min-width: 200px;
     padding: 0 0 10px 0; /* No top padding removes the white bar */
 
     min-width: 180px;
 
     z-index: 9998;
     z-index: 9998;
     border: 1px solid rgba(255, 255, 255, 0.3);
     border: 1px solid rgba(255, 255, 255, 0.3);
     transition: all 0.3s ease;
     transition: all 0.3s ease;
     overflow: hidden;
 
     overflow: hidden; /* Clips the header to the rounded corners */
 
}
}


.floating-menu-header {
.floating-menu-header {
     background: linear-gradient(135deg, #AF011C, #D93800);
     background: linear-gradient(135deg, #AF011C, #D93800);
     color: white;
     color: white;
     padding: 15px 20px;
 
     padding: 12px 15px;
 
     font-weight: bold;
     font-weight: bold;
     font-size: 15px;
 
     font-size: 14px;
 
    text-align: center;
 
     cursor: pointer;
     cursor: pointer;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: space-between;
     justify-content: space-between;
    transition: all 0.3s ease;
 
}
}


.floating-menu-header .arrow {
.floating-menu-header .arrow {
     transition: transform 0.3s ease;
     transition: transform 0.3s ease;
    font-size: 14px;
 
}
}


.floating-menu.collapsed .floating-menu-header .arrow {
.floating-menu.collapsed .floating-menu-header .arrow {
     transform: rotate(-90deg);
     transform: rotate(-90deg);
}
}


.floating-menu-items {
.floating-menu-items {
    max-height: 500px;
 
     padding: 10px 0;
     padding: 8px 0;
 
     transition: all 0.3s ease;
     transition: all 0.3s ease;
    overflow-y: auto;
 
}
}


.floating-menu.collapsed .floating-menu-items {
.floating-menu.collapsed .floating-menu-items {
     max-height: 0;
     max-height: 0;
     padding: 0;
     padding: 0;
     opacity: 0;
     opacity: 0;
     overflow: hidden;
     overflow: hidden;
}
}


.floating-menu-items a {
.floating-menu-items a {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     padding: 12px 20px;
 
     padding: 10px 15px;
 
     color: #333;
     color: #333;
     text-decoration: none;
     text-decoration: none;
     font-size: 13px;
     font-size: 13px;
     transition: all 0.2s ease;
     transition: all 0.2s ease;
     border-left: 3px solid transparent;
     border-left: 3px solid transparent;
     position: relative;
 
}
 
 
 
/* 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 {
.floating-menu-items a:before {
     content: "•";
     content: "•";
     color: #FF6A00;
     color: #FF6A00;
     font-weight: bold;
     font-weight: bold;
     margin-right: 10px;
 
     margin-right: 8px;
 
     font-size: 16px;
     font-size: 16px;
}
}


.floating-menu-items a:hover,
 
.floating-menu-items a.reading-now {
    background: rgba(255, 106, 0, 0.1);
    border-left-color: #FF6A00;
    color: #FF6A00;
    text-decoration: none;
}


/* Menu toggle button (Mobile) */
/* Menu toggle button (Mobile) */
.floating-menu-toggle {
.floating-menu-toggle {
     position: fixed;
     position: fixed;
     right: 20px;
     right: 20px;
     top: 50%;
     top: 50%;
     transform: translateY(-50%);
     transform: translateY(-50%);
     background: linear-gradient(135deg, #2ecc71, #27ae60);
     background: linear-gradient(135deg, #2ecc71, #27ae60);
     color: white;
     color: white;
     width: 50px;
 
     height: 50px;
     width: 45px;
 
     height: 45px;
 
     border-radius: 50%;
     border-radius: 50%;
     display: none;
     display: none;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     cursor: pointer;
     cursor: pointer;
     z-index: 9999;
     z-index: 9999;
     box-shadow: 0 4px 15px rgba(0,0,0,0.3);
     box-shadow: 0 4px 15px rgba(0,0,0,0.3);
     border: 2px solid white;
 
     border: 1px solid white;
 
     font-weight: bold;
     font-weight: bold;
    font-size: 24px;
    transition: all 0.3s ease;
}
.floating-menu-toggle:hover {
    transform: translateY(-50%) scale(1.1);
}


/* =========================================== */
    font-size: 20px;
/* Ribbon Styles */
/* =========================================== */


.ragna-ribbon-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 25px 0;
    padding: 0 15px;
}
}


.ragna-ribbon {
    background: #2c3e50;
    color: #FFD700;
    padding: 12px 30px;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    min-width: 170px;
    clip-path: polygon(92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%, 8% 0);
    border-top: 2px solid #FFD700;
    border-bottom: 2px solid #FFD700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    cursor: default;
}


.ragna-ribbon:hover {
    transform: scale(1.05);
    background: #34495e;
    color: white;
    border-color: #fff;
}


/* =========================================== */
/* =========================================== */
/* Responsive Design */
/* Responsive Design */
/* =========================================== */
/* =========================================== */


@media (max-width: 1200px) {
@media (max-width: 1200px) {
     .floating-menu {
     .floating-menu {
         right: 10px;
 
         min-width: 180px;
         left: 10px;
 
         min-width: 160px;
 
     }
     }
}
}


@media (max-width: 992px) {
 
    .ragnawiki-card,
    .ragnawiki-nav-card {
        min-width: 280px;
    }
}


@media (max-width: 768px) {
@media (max-width: 768px) {
    /* Floating menu mobile styles */
 
     .floating-menu {
     .floating-menu {
        position: fixed;
 
         left: -250px;
         left: -220px; /* Hide offscreen */
        right: auto;
 
         top: 10px;
         top: 10px;
         transform: none;
         transform: none;
         width: 240px;
 
         width: 200px;
 
         max-height: 80vh;
         max-height: 80vh;
         overflow-y: auto;
         overflow-y: auto;
        transition: left 0.3s ease;
 
     }
     }
      
      
     .floating-menu.mobile-visible {
     .floating-menu.mobile-visible {
         left: 10px;
         left: 10px;
     }
     }
      
      
     .floating-menu-toggle {
     .floating-menu-toggle {
         display: flex;
         display: flex;
     }
     }
   
 
    /* Back to top button */
 
 
     .back-to-top-fixed {
     .back-to-top-fixed {
         bottom: 20px;
         bottom: 20px;
         right: 20px;
         right: 20px;
     }
     }
   
 
 
 
     .back-to-top-fixed a {
     .back-to-top-fixed a {
         width: 50px;
         width: 50px;
         height: 50px;
         height: 50px;
         font-size: 14px;
         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;
      
      
     /* Grid adjustments */
 
    .ragnawiki-grid,
     /* This creates the pointed RPG ribbon shape */
     .ragnawiki-nav-grid {
 
        gap: 10px;
     clip-path: polygon(92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%, 8% 0);
    }
 
      
      
     .ragnawiki-card,
 
     .ragnawiki-nav-card {
     /* Gold top and bottom borders */
        min-width: 100%;
 
    }
     border-top: 2px solid #FFD700;
 
    border-bottom: 2px solid #FFD700;
 
      
      
    /* Hero adjustments */
 
     .ragnawiki-hero-title {
     box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        font-size: 24px;
 
     }
     transition: transform 0.2s ease, background 0.2s ease;
   
 
     .ragnawiki-hero-subtitle {
     cursor: default;
        font-size: 14px;
 
    }
}
   
 
    /* Table responsiveness */
 
    .wikitable {
 
        display: block;
/* Subtle hover effect to make it feel "Alive" */
        overflow-x: auto;
 
        white-space: nowrap;
.ragna-ribbon:hover {
    }
 
    transform: scale(1.05);
 
    background: #34495e;
 
    color: #fff;
 
}
}
/* Mobile responsiveness */


@media (max-width: 600px) {
@media (max-width: 600px) {
     .ragna-ribbon {
     .ragna-ribbon {
         min-width: 140px;
 
         font-size: 12px;
         min-width: 130px;
        padding: 10px 20px;
 
    }
         font-size: 11px;
   
 
    .ragna-ribbon-container {
         padding: 8px 15px;
        gap: 10px;
 
    }
   
    .floating-menu {
        width: 200px;
    }
   
    .floating-menu-items a {
         padding: 10px 15px;
        font-size: 12px;
     }
     }
}
}


/* =========================================== */
/* Utility Classes */
/* =========================================== */


.clearfix::after {
 
     content: "";
/* 1. Force each collapsible to stay in its own row */
     clear: both;
 
     display: table;
.mw-collapsible {
 
    display: block !important;
 
     width: 100% !important;
 
     clear: both !important;
 
     margin-bottom: 10px !important;
 
}
}


.text-center {
 
     text-align: center;
 
/* 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;
 
}
}


.text-left {
 
     text-align: left;
 
/* 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;
 
}
}


.text-right {
 
     text-align: right;
 
/* 4. Ensure headers don't get squished */
 
h2, h3, h4 {
 
    display: block !important;
 
    width: 100% !important;
 
     overflow: hidden;
 
}
}


.hidden {
 
 
/* 1. Hide the default MediaWiki [Expand/Collapse] text entirely */
 
.mw-collapsible-toggle-default {
 
     display: none !important;
     display: none !important;
}
}


.visible {
 
 
/* 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;
     display: block !important;
    cursor: pointer;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
}


/* Print styles */
@media print {
    .floating-menu,
    .back-to-top-fixed,
    #scroll-progress,
    .floating-menu-toggle {
        display: none !important;
    }
   
    .mw-collapsible-content {
        display: block !important;
    }
}


/* Add these styles to your CSS file */


/* Reading time badge hover effect */
/* 3. Ensure the collapsible content clears properly */
.reading-time-badge:hover {
 
     transform: scale(1.05);
.mw-collapsible-content {
    box-shadow: 0 2px 8px rgba(255, 106, 0, 0.3);
 
     clear: both !important;
 
}
}


/* Section top links */
.section-top-link {
    opacity: 0.3;
    transition: opacity 0.3s;
}


.section-top-link:hover {
    opacity: 1 !important;
    text-decoration: none !important;
}


/* Copy code button animation */
/* Hide the default [Expand] text */
.copy-code {
    transition: all 0.3s ease;
}


.copy-code:hover {
.mw-collapsible-toggle-default { display: none !important; }
    background: #FF6A00 !important;
}


/* Sticky header animation */
.sticky-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: white !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.15) !important;
    animation: slideDown 0.3s ease;
}


@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}


/* TOC toggle button */
/* Make headers full-width clickable bars */
#toggle-toc {
    transition: all 0.3s ease;
}


#toggle-toc:hover {
.mw-collapsible-toggle.ragnawiki-card-header {
    background: linear-gradient(135deg, #FF7A20, #F4B400) !important;
    transform: translateY(-2px);
}


/* Mobile improvements */
     float: none !important;
@media (max-width: 768px) {
     .reading-time-badge {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
        text-align: center;
    }
   
    .section-top-link {
        opacity: 0.5;
        font-size: 10px !important;
    }
}


/* Back to Top Button - Ensures visibility */
     display: block !important;
.back-to-top-fixed {
     position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999 !important; /* Increased z-index */
    display: none;
    transition: all 0.3s ease;
}


.back-to-top-fixed a {
    background: linear-gradient(135deg, #FF6A00, #D93800);
    color: white !important;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 3px solid white;
    transition: all 0.3s ease;
     cursor: pointer;
     cursor: pointer;
     font-family: Arial, sans-serif;
 
     line-height: 1;
     text-align: center;
 
    width: 100%;
 
     box-sizing: border-box;
 
}
}


.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 !important;
    text-decoration: none !important;
}


.back-to-top-fixed a:visited,
.back-to-top-fixed a:active,
.back-to-top-fixed a:focus {
    color: white !important;
    text-decoration: none !important;
}


/* Mobile version */
/* Color Classes */
@media (max-width: 768px) {
 
    .back-to-top-fixed {
.ragna-blue  { background-color: #3498db !important; color: white !important; }
        bottom: 20px;
 
        right: 20px;
.ragna-green  { background-color: #2ecc71 !important; color: white !important; }
    }
 
   
.ragna-teal  { background-color: #1abc9c !important; color: white !important; }
    .back-to-top-fixed a {
 
        width: 50px;
.ragna-purple { background-color: #9b59b6 !important; color: white !important; }
        height: 50px;
 
        font-size: 14px;
.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; }


/* Emergency button style */
.ragna-dark  { background-color: #2c3e50 !important; color: white !important; }
#emergency-top {
    cursor: pointer;
    transition: all 0.3s ease;
}


#emergency-top:hover {
.ragna-silver { background-color: #bdc3c7 !important; color: #333 !important; }
    background: darkred !important;
    transform: scale(1.1);
}

Revision as of 11:02, 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; }
Retrieved from "https://wiki.ragnafied.net/index.php?title=MediaWiki:Common.css&oldid=1384"