MediaWiki:Common.css
From Ragnafied Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* * RagnaWiki Modern CSS - FINAL CLEANED VERSION * This is the complete stylesheet with all fixes and high-priority rules applied. */ /* --- GLOBAL CONTAINER & COLORS --- */ .ragnawiki-modern { max-width: 1200px; margin: 20px auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.5; } /* Color Utilities */ .text-primary { color: #3498db !important; font-weight: 700; } /* Blue */ .text-success { color: #2ecc71 !important; font-weight: 700; } /* Green */ .text-danger { color: #e74c3c !important; font-weight: 700; } /* Red */ .text-warning { color: #f39c12 !important; font-weight: 700; } /* Orange */ .text-purple { color: #9b59b6 !important; font-weight: 700; } /* Purple */ .text-muted { color: #7f8c8d !important; font-weight: 700; } /* Gray/Muted */ /* --- HERO SECTION --- */ .wiki-hero { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); /* Dark Blue Gradient */ color: white; text-align: center; padding: 30px 20px; margin-bottom: 30px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } .wiki-hero-title { font-size: 2.8em; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 5px; } .wiki-hero-subtitle { font-size: 1.3em; font-style: italic; opacity: 0.85; margin-bottom: 20px; } .hero-image img { border-radius: 50%; border: 6px solid #2ecc71; /* Green Accent Border */ box-shadow: 0 0 20px rgba(46, 204, 113, 0.6); transition: transform 0.3s ease; } .hero-image img:hover { transform: scale(1.05); } /* --- INFO & NAVIGATION GRIDS --- */ .info-grid, .nav-grid { display: flex; gap: 20px; margin-bottom: 30px; align-items: stretch; } /* Info Cards */ .info-card { flex: 1; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); overflow: hidden; background-color: white; display: flex; flex-direction: column; } .card-header { font-size: 1.3em; font-weight: 700; color: white; padding: 12px 15px; text-align: left; } .server-card .card-header { background-color: #3498db; } .rates-card .card-header { background-color: #e67e22; } .card-content { padding: 15px; flex-grow: 1; } /* ------------------------------------------------ */ /* --- COMPACT LIST STYLE (FINAL, FIXED ALIGNMENT) --- */ /* ------------------------------------------------ */ .compact-list { /* Uses vertical flex for reliable stacking and alignment */ display: flex !important; flex-direction: column !important; gap: 0 !important; margin-bottom: 15px !important; } .list-row { /* Uses Flexbox for horizontal alignment */ display: flex !important; align-items: center !important; /* Vertically center all content */ justify-content: space-between !important; /* Push the label/icon left and the value right */ padding: 8px 0 !important; border-bottom: 1px dashed #ecf0f1 !important; font-size: 1em !important; } .list-row:last-child { border-bottom: none !important; } .list-icon { /* **CRITICAL FIX**: Resetting all box model properties to prevent the white box. */ width: auto !important; height: auto !important; min-width: 1em !important; /* Ensure it's at least the size of the font */ display: inline-block !important; box-sizing: content-box !important; /* Standard box model */ /* Remove any background/border forcing a box */ padding: 0 !important; border: none !important; background: none !important; font-size: 1.1em !important; margin-right: 12px !important; /* Space between icon and label */ flex-shrink: 0 !important; } .list-label { flex-grow: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-weight: 500 !important; } .list-value { flex-shrink: 0 !important; text-align: right !important; margin-left: 15px !important; } /* --- Notes Box Style (kept consistent) --- */ .notes-box { border: 2px solid #f39c12; border-radius: 6px; background-color: #fffaf0; margin-top: 15px; overflow: hidden; } .notes-title { font-weight: 700; background-color: #f39c12; color: white; padding: 8px 10px; font-size: 1em; } .notes-content { padding: 10px; font-size: 0.95em; } .notes-content ul { list-style: disc; margin: 0; padding-left: 20px; } /* --- QUICK NAVIGATION --- */ .section-title { font-size: 1.8em; font-weight: 700; color: #2c3e50; padding: 10px 0; margin: 20px 0 15px 0; border-bottom: 3px solid #3498db; } .nav-card { flex: 1; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); overflow: hidden; background-color: white; } .nav-header { font-size: 1.2em; font-weight: 700; color: white; padding: 10px 12px; text-align: center; } .beginners-nav .nav-header { background-color: #2ecc71; } /* Green */ .features-nav .nav-header { background-color: #e74c3c; } /* Red */ .guides-nav .nav-header { background-color: #9b59b6; } /* Purple */ .nav-content { padding: 10px 15px; } .nav-item { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px dashed #f0f0f0; } .nav-item:last-child { border-bottom: none; } .nav-icon { /* Base style for navigation icons */ width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 10px; flex-shrink: 0; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* External Icon (Background Image) Styles */ .nav-icon { background-size: contain; background-repeat: no-repeat; background-position: center center; } .icon-external-ragna { background-image: url('https://ragnafied.net/themes/simple/img/logo.png'); } .icon-external-greed { background-image: url('https://irowiki.org/w/images/0/04/Greed.png'); } .icon-external-longing { background-image: url('https://irowiki.org/w/images/e/e5/Longing_for_Freedom.png'); } .icon-external-vip { background-image: url('https://irowiki.org/w/images/0/0b/I_MystAmp.png'); } .icon-external-smith { background-image: url('https://irowiki.org/w/images/2/20/Smith_Axe.png'); } .icon-external-4thjob { background-image: url('https://static.divine-pride.net/images/skill/5201.png'); } .icon-external-exceed { background-image: url('https://irowiki.org/w/images/a/ae/I_Exceed_Break.png'); } .icon-external-guard { background-image: url('https://irowiki.org/w/images/f/f3/I_Guard.png'); } .icon-external-trouble { background-image: url('https://muhro.eu/flux/data/items/icons/100381.png'); } .icon-external-illusion { background-image: url('https://static.divine-pride.net/images/items/item/25723.png'); } .icon-external-sage { background-image: url('https://irowiki.org/images/db/item/1000103.png'); } .icon-external-prayer { background-image: url('https://irowiki.org/images/db/item/1000405.png'); } .icon-external-issgard { background-image: url('https://irowiki.org/images/db/item/1000608.png'); } .icon-external-immortal { background-image: url('https://muhro.eu/flux/data/items/icons/1001217.png'); } .nav-text { flex-grow: 1; font-weight: 500; } .nav-text a { text-decoration: none; color: #34495e; transition: color 0.2s; } .nav-text a:hover { color: #3498db; text-decoration: underline; } .nav-addon { /* For the TDB tag */ font-size: 0.8em; color: #e74c3c; font-weight: 700; margin-left: 8px; padding: 2px 5px; border: 1px solid #e74c3c; border-radius: 3px; } /* --- RESPONSIVE DESIGN (FOR PHONES/SMALL TABLETS) --- */ @media screen and (max-width: 768px) { .ragnawiki-modern { margin: 10px; } .info-grid, .nav-grid { flex-direction: column; /* Stack cards vertically */ gap: 15px; } .info-card, .nav-card { flex: none; /* Disable flex growth */ width: 100%; } .wiki-hero-title { font-size: 2em; } .compact-list { /* Restore vertical flex for single column view on small screens */ display: flex; flex-direction: column; } }