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.
/* ===== CONSOLIDATED MEDIAWIKI COMMON.CSS ENHANCEMENTS ===== */
/* Last updated: 2024 - CONSOLIDATED VERSION */
/* === Improved Tables === */
.wikitable {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin: 1em 0;
background: white;
border: 1px solid #a2a9b1;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.wikitable th {
background: linear-gradient(135deg, #2c5e9e 0%, #1e3a5f 100%);
color: white;
font-weight: 600;
text-align: center;
padding: 12px 8px;
border-bottom: 2px solid #1e3a5f;
font-size: 14px;
}
.wikitable td {
padding: 10px 8px;
border: 1px solid #ddd;
vertical-align: top;
}
.wikitable tr:nth-child(even) {
background-color: #f8f9fa;
}
.wikitable tr:nth-child(odd) {
background-color: #ffffff;
}
.wikitable tr:hover {
background-color: #e3f2fd;
transition: background-color 0.2s ease;
}
/* === Enhanced Navigation === */
#toc {
background: #f8f9fa;
border: 1px solid #a2a9b1;
border-radius: 6px;
padding: 15px;
margin: 1em 0;
}
.tocnumber {
color: #2c5e9e;
font-weight: bold;
}
/* === Better Links === */
a {
color: #0645ad;
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: #0b0080;
text-decoration: underline;
}
a:visited {
color: #0b0080;
}
a.new {
color: #c20;
}
/* === Content Improvements === */
#content {
line-height: 1.6;
color: #202122;
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
color: #2c5e9e;
border-bottom: 1px solid #a2a9b1;
padding-bottom: 0.3em;
margin-top: 1.5em;
}
#content h1 {
border-bottom: 2px solid #2c5e9e;
}
/* === Code Blocks === */
pre, code {
background: #f8f9fa;
border: 1px solid #eaecf0;
border-radius: 4px;
padding: 2px 4px;
font-family: monospace;
}
pre {
padding: 12px;
overflow-x: auto;
}
/* === Infoboxes and Special Elements === */
.infobox {
background: #f8f9fa;
border: 1px solid #a2a9b1;
border-radius: 6px;
padding: 15px;
margin: 1em 0;
}
.navbox {
background: #f8f9fa;
border: 1px solid #a2a9b1;
border-radius: 4px;
padding: 5px;
}
/* === Custom Header Colors === */
.mw-headline {
color: #2c5e9e;
}
/* === Button Improvements === */
.mw-ui-button {
background: #2c5e9e;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.mw-ui-button:hover {
background: #1e3a5f;
}
/* === Form Elements === */
.mw-input,
textarea {
border: 1px solid #a2a9b1;
border-radius: 4px;
padding: 8px;
font-size: 14px;
}
.mw-input:focus,
textarea:focus {
border-color: #2c5e9e;
outline: none;
box-shadow: 0 0 0 2px rgba(44, 94, 158, 0.2);
}
/* === Logo Replacement === */
#p-logo a {
background-image: url('https://wiki.ragnafied.net/images/e/ee/Ragnawikilogo.png') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-color: transparent !important;
display: block !important;
min-width: 135px !important;
min-height: 135px !important;
transition: all 0.3s ease !important;
}
#p-logo a:hover {
opacity: 0.8 !important;
transform: scale(1.05) !important;
}
#p-logo a img {
opacity: 0 !important;
width: 135px !important;
height: 135px !important;
}
/* === MODERN CARD SYSTEM (CONSOLIDATED) === */
/* Container System */
.wiki-header-container,
.quick-nav-container,
.about-container,
.guide-container,
.accounts-container,
.autoloot-container,
.stats-container,
.vip-container,
.systems-container,
.episode-container,
.quest-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Card Base Styles */
.info-card,
.nav-card,
.stat-card,
.substat-card,
.trait-card,
.status-card,
.vip-comparison-card,
.system-card,
.plan-card,
.feature-card,
.benefits-section,
.ticket-card,
.quest-card,
.rewards-card,
.instance-card,
.unlock-card,
.summary-card,
.reputation-card,
.completion-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #e1e8ed;
margin-bottom: 25px;
}
/* Card Hover Effects */
.info-card:hover,
.nav-card:hover,
.stat-card:hover,
.system-card:hover,
.feature-card:hover,
.ticket-card:hover,
.quest-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.substat-card:hover,
.trait-card:hover,
.status-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 25px rgba(0,0,0,0.1);
}
/* Card Header System */
.card-header,
.nav-header,
.stat-header,
.substat-header,
.trait-header,
.status-header,
.comparison-header,
.system-header,
.plan-header,
.benefits-header,
.ticket-header,
.quest-header,
.unlock-header,
.summary-header,
.quest-header-box {
padding: 18px 25px;
color: white;
font-weight: 600;
font-size: 20px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.quest-header-box {
background: linear-gradient(135deg, #2c5e9e 0%, #1e3a5f 100%);
border-radius: 12px;
margin-bottom: 25px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
font-size: 28px;
margin: 0;
padding: 20px;
}
.quest-header-box h1 {
color: white;
border-bottom: none;
margin: 0;
padding: 0;
font-size: 28px;
text-align: center;
}
/* Smaller Headers */
.substat-header,
.trait-header,
.status-header,
.plan-header,
.ticket-header,
.quest-header,
.unlock-header,
.summary-header {
padding: 14px 18px;
font-size: 16px;
margin: 0;
}
/* Card Content System */
.card-content,
.nav-content,
.stat-content,
.substat-content,
.trait-content,
.status-content,
.comparison-content,
.system-content,
.plan-content,
.benefits-content,
.ticket-content,
.quest-content,
.unlock-content,
.summary-content {
padding: 25px;
line-height: 1.6;
}
.nav-content {
padding: 0;
}
.substat-content,
.trait-content,
.status-content,
.quest-content,
.unlock-content,
.summary-content {
padding: 18px;
}
/* === GRID SYSTEMS (CONSOLIDATED) === */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
margin: 25px 0;
}
.substats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
margin: 25px 0;
}
.trait-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 25px 0;
}
.status-breakdown-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
margin: 25px 0;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 25px 0;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 25px 0;
}
.systems-comparison,
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin: 25px 0;
}
.tickets-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 30px 0;
width: 100%;
}
.quest-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.side-quests-grid,
.daily-quests-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin: 30px 0;
}
.rewards-grid,
.reputation-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.unlocks-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin: 20px 0;
}
.quest-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin: 20px 0;
}
.instance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
margin: 20px 0;
}
/* === LIST SYSTEMS (CONSOLIDATED) === */
.modern-list,
.stat-list,
.substat-list,
.trait-list,
.feature-list,
.compact-quest-list {
list-style: none;
padding: 0;
margin: 0;
}
.list-item,
.feature-item,
.benefit-item,
.drop-item,
.map-drop-item {
display: flex;
align-items: flex-start;
padding: 15px;
border-radius: 8px;
transition: all 0.3s ease;
}
.list-item {
background: rgba(255, 255, 255, 0.7);
border: 1px solid #e1e8ed;
margin-bottom: 15px;
}
.list-item:hover {
background: rgba(240, 247, 255, 0.9);
transform: translateX(5px);
}
.feature-item {
background: rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.benefit-item {
background: rgba(39, 174, 96, 0.1);
border-left: 4px solid #27ae60;
align-items: center;
}
.drop-item {
background: rgba(30, 144, 255, 0.05);
border: 1px solid rgba(30, 144, 255, 0.1);
align-items: center;
margin-bottom: 12px;
}
.drop-item:hover {
background: rgba(30, 144, 255, 0.1);
transform: translateX(3px);
}
.map-drop-item {
background: rgba(255, 215, 0, 0.05);
border: 1px solid rgba(255, 215, 0, 0.1);
margin-bottom: 15px;
}
.map-drop-item:hover {
background: rgba(255, 215, 0, 0.1);
transform: translateX(3px);
}
/* List Items */
.stat-list li,
.substat-list li,
.trait-list li {
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
position: relative;
padding-left: 20px;
}
.stat-list li:last-child,
.substat-list li:last-child,
.trait-list li:last-child {
border-bottom: none;
}
.stat-list li:before,
.substat-list li:before,
.trait-list li:before {
content: "•";
color: #2c5e9e;
font-weight: bold;
position: absolute;
left: 0;
}
.stat-list li.negative:before {
content: "⛔";
color: #e74c3c;
}
.compact-quest-list {
counter-reset: quest-step;
}
.compact-quest-list > li {
counter-increment: quest-step;
margin-bottom: 25px;
padding: 20px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid #e1e8ed;
border-radius: 8px;
position: relative;
transition: all 0.3s ease;
}
.compact-quest-list > li:hover {
background: rgba(240, 247, 255, 0.9);
transform: translateX(5px);
}
.compact-quest-list > li:before {
content: counter(quest-step);
background: linear-gradient(135deg, #2c5e9e, #1e3a5f);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
}
.compact-quest-list > li strong {
color: #2c5e9e;
font-weight: 600;
display: block;
margin-bottom: 8px;
font-size: 15px;
}
.compact-quest-list code {
background: #2c5e9e;
color: white;
padding: 3px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 12px;
margin: 0 2px;
}
/* Nested Lists */
.compact-quest-list ul {
list-style: none;
padding: 0;
margin: 10px 0 0 0;
}
.compact-quest-list ul li {
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
position: relative;
padding-left: 20px;
font-size: 14px;
line-height: 1.4;
}
.compact-quest-list ul li:last-child {
border-bottom: none;
}
.compact-quest-list ul li:before {
content: "•";
color: #3498db;
font-weight: bold;
position: absolute;
left: 0;
}
/* Navigation Lists */
.navi-list {
list-style: none;
padding: 0;
margin: 10px 0;
}
.navi-list li {
padding: 4px 0;
font-size: 12px;
font-family: 'Courier New', monospace;
color: #666;
}
/* List Icons */
.list-icon {
background: linear-gradient(135deg, #2c5e9e, #1e3a5f);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 15px;
flex-shrink: 0;
}
.feature-icon {
font-size: 20px;
margin-right: 12px;
flex-shrink: 0;
}
.benefit-icon {
font-size: 24px;
margin-right: 15px;
flex-shrink: 0;
}
.feature-icon-large {
font-size: 40px;
margin-bottom: 15px;
}
.drop-icon,
.map-icon {
width: 32px;
height: 32px;
margin-right: 12px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.drop-icon img,
.map-icon img {
max-width: 100%;
max-height: 100%;
border-radius: 4px;
}
.map-icon {
margin-right: 15px;
}
/* Content Areas */
.list-content,
.feature-text,
.benefit-text,
.drop-text,
.map-text {
flex: 1;
font-size: 14px;
line-height: 1.4;
}
.map-text {
font-size: 13px;
}
.map-name {
font-weight: 600;
color: #B8860B;
font-size: 14px;
margin-bottom: 4px;
}
.map-drop {
color: #666;
line-height: 1.4;
}
/* === SPECIAL ELEMENTS === */
.notes-box {
transition: transform 0.2s ease;
}
.notes-box:hover {
transform: scale(1.02);
}
.tip-box {
border-left: 4px solid;
}
.note-box {
font-size: 12px;
}
/* === CODE & EXAMPLES === */
code {
background: #2c5e9e;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 14px;
}
.compact-list code {
background: #2c5e9e;
color: white;
padding: 2px 6px;
border-radius: 3px;
font-size: 11px;
font-family: 'Courier New', monospace;
}
.command-examples code,
.command-grid code,
.examples-grid code {
font-family: 'Courier New', monospace;
font-size: 14px;
}
.example-box {
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.4;
}
/* === HOVER EFFECTS === */
.quick-overview > div {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.quick-overview > div:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.command-examples > div,
.examples-grid > div {
transition: transform 0.2s ease;
}
.command-examples > div:hover,
.examples-grid > div:hover {
transform: scale(1.02);
}
.discord-cta,
.exploration-tip,
.vip-cta {
transition: transform 0.2s ease;
}
.discord-cta:hover,
.exploration-tip:hover {
transform: scale(1.02);
}
.vip-cta:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(155, 89, 182, 0.3);
}
.vip-cta a {
transition: all 0.3s ease;
}
.vip-cta a:hover {
background: #8e44ad !important;
color: white !important;
transform: scale(1.05);
}
/* === SPECIAL LAYOUTS === */
.free-plan {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-right: 2px dashed #dee2e6;
}
.vip-plan {
background: linear-gradient(135deg, #fffaf0, #fff5e6);
}
.plan-content {
height: calc(100% - 70px);
}
.feature-title {
font-weight: 600;
font-size: 18px;
color: #2c5e9e;
margin-bottom: 10px;
}
.feature-description {
font-size: 14px;
color: #666;
line-height: 1.5;
}
.status-content {
font-size: 14px;
line-height: 1.5;
}
.system-description {
font-size: 15px;
line-height: 1.5;
margin-bottom: 20px;
color: #555;
}
.rate-info {
text-align: center;
margin: 20px 0;
}
.rate-badge {
box-shadow: 0 2px 8px rgba(255, 165, 0, 0.3);
}
.drops-grid,
.map-drops-grid {
display: flex;
flex-direction: column;
margin: 20px 0;
}
.drops-grid {
gap: 12px;
}
.map-drops-grid {
gap: 15px;
}
/* === TICKET CARD SPECIFIC === */
.ticket-card {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
}
.ticket-info {
margin-bottom: 15px;
flex-grow: 1;
}
.ticket-episode {
font-weight: 600;
color: #2c5e9e;
font-size: 14px;
margin-bottom: 8px;
line-height: 1.3;
}
.ticket-description {
font-size: 13px;
color: #666;
margin-bottom: 12px;
line-height: 1.4;
}
.ticket-requirements {
font-size: 12px;
color: #7f8c8d;
margin-bottom: 10px;
line-height: 1.3;
}
.ticket-price {
font-size: 13px;
color: #27ae60;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.ticket-link-container {
margin-top: auto;
text-align: center;
}
.ticket-link-container .plainlinks a {
display: inline-block;
background: #3498db;
color: white;
padding: 6px 12px;
border-radius: 4px;
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: all 0.2s ease;
white-space: nowrap;
}
.ticket-link-container .plainlinks a:hover {
background: #2980b9;
transform: translateY(-1px);
text-decoration: none;
color: white;
}
/* === EPISODE TIMELINE === */
.episode-table-container {
overflow-x: auto;
margin: 20px 0;
}
.episode-timeline {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.episode-timeline th {
background: linear-gradient(135deg, #34495e, #2c3e50);
color: white;
font-weight: 600;
padding: 10px 8px;
text-align: left;
border: none;
font-size: 12px;
}
.episode-timeline td {
padding: 8px 6px;
border-bottom: 1px solid #ecf0f1;
vertical-align: middle;
}
.episode-timeline tr:hover td {
background: rgba(52, 152, 219, 0.05);
}
/* Status Badges */
.status-completed,
.status-skippable,
.status-current,
.status-future {
padding: 4px 8px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
display: inline-block;
min-width: 40px;
text-align: center;
}
.status-completed {
background: #27ae50;
color: white;
}
.status-skippable {
background: #9b59b6;
color: white;
}
.status-current {
background: #e67e22;
color: white;
}
.status-future {
background: #95a5a6;
color: white;
}
/* Timeline Legend */
.timeline-legend {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 25px;
font-size: 12px;
}
.legend-item {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 8px;
background: rgba(236, 240, 241, 0.5);
border-radius: 8px;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 4px;
flex-shrink: 0;
}
.legend-text {
font-size: 13px;
color: #2c3e50;
font-weight: 500;
}
/* NPC Info Section */
.npc-info {
background: rgba(155, 89, 182, 0.1);
padding: 20px;
border-radius: 8px;
margin-top: 15px;
border-left: 4px solid #9b59b6;
}
/* Progression Tip */
.progression-tip {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.progression-tip:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(230, 126, 34, 0.3);
}
/* === QUEST GUIDE STYLING === */
.quest-start,
.quest-start-box {
background: rgba(52, 152, 219, 0.1);
border: 1px solid rgba(52, 152, 219, 0.2);
border-left: 4px solid #3498db;
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 25px;
font-size: 14px;
}
.quest-start strong,
.quest-start-box strong {
color: #2c5e9e;
font-weight: 600;
}
.quest-start-box code {
background: #2c5e9e;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 13px;
}
.compact-list {
list-style: decimal;
padding-left: 20px;
margin: 10px 0;
font-size: 12px;
}
.compact-list li {
margin-bottom: 6px;
line-height: 1.3;
}
.quest-rewards {
background: rgba(39, 174, 96, 0.1);
border: 1px solid rgba(39, 174, 96, 0.2);
border-left: 4px solid #27ae60;
padding: 12px 15px;
border-radius: 6px;
margin: 15px 0;
font-size: 13px;
}
.quest-rewards strong {
color: #27ae60;
font-weight: 600;
}
.quest-rewards em {
color: #7f8c8d;
font-style: italic;
}
.quest-unlocks {
background: rgba(155, 89, 182, 0.1);
border: 1px solid rgba(155, 89, 182, 0.2);
border-left: 4px solid #9b59b6;
padding: 12px 15px;
border-radius: 6px;
margin: 15px 0;
font-size: 13px;
}
.quest-unlocks strong {
color: #9b59b6;
font-weight: 600;
}
.quest-items {
background: rgba(230, 126, 34, 0.1);
border: 1px solid rgba(230, 126, 34, 0.2);
border-left: 4px solid #e67e22;
padding: 10px 15px;
border-radius: 6px;
margin: 10px 0;
font-size: 13px;
color: #7f8c8d;
}
.quest-items em {
font-style: italic;
}
/* === Progress Box === */
.quest-progress-box {
background: linear-gradient(135deg, #34495e, #2c3e50);
color: white;
padding: 20px;
border-radius: 8px;
margin: 30px 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.quest-progress-box strong {
color: white;
font-weight: 600;
display: block;
margin-bottom: 15px;
font-size: 16px;
}
.quest-progress-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.quest-progress-box li {
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
position: relative;
padding-left: 25px;
font-size: 14px;
}
.quest-progress-box li:last-child {
border-bottom: none;
}
.quest-progress-box li:before {
content: "→";
color: #3498db;
font-weight: bold;
position: absolute;
left: 0;
}
.quest-progress-box li:first-child:before {
content: "✓";
color: #27ae60;
}
.quest-progress-box li:nth-child(2):before {
content: "✓";
color: #27ae60;
}
.quest-progress-box li:nth-child(3):before {
content: "✓";
color: #27ae60;
}
/* === Daily Quests Box === */
.daily-quests-box {
background: rgba(52, 152, 219, 0.1);
border: 1px solid rgba(52, 152, 219, 0.2);
border-radius: 8px;
padding: 20px;
margin: 25px 0;
}
.daily-quests-box strong {
color: #2c5e9e;
font-weight: 600;
display: block;
margin-bottom: 15px;
font-size: 16px;
}
.daily-quests-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 8px;
}
.daily-quests-list li {
padding: 8px 12px;
background: rgba(255, 255, 255, 0.7);
border-radius: 4px;
font-size: 13px;
border: 1px solid rgba(0,0,0,0.05);
transition: all 0.2s ease;
}
.daily-quests-list li:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateX(3px);
}
/* Sage Legacy Specific */
.reward-category,
.rep-category {
font-size: 12px;
}
.reward-category strong,
.rep-category strong {
color: #2c5e9e;
display: block;
margin-bottom: 8px;
font-size: 13px;
}
/* === RESPONSIVE DESIGN (CONSOLIDATED) === */
@media (max-width: 1200px) {
.tickets-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 968px) {
.systems-comparison {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 768px) {
.wikitable {
font-size: 14px;
display: block;
overflow-x: auto;
white-space: nowrap;
}
#content {
padding: 10px;
}
.wikitable th,
.wikitable td {
padding: 8px 6px;
}
/* Grid layouts */
.stats-grid,
.substats-grid,
.trait-stats-grid,
.status-breakdown-grid,
.feature-grid,
.benefits-grid,
.drops-grid,
.quick-overview,
.item-types-grid,
.comparison-grid,
.tickets-grid,
.quest-grid,
.side-quests-grid,
.daily-quests-grid,
.rewards-grid,
.reputation-grid,
.unlocks-grid,
.quest-summary-grid,
.instance-grid {
grid-template-columns: 1fr;
}
.command-grid,
.examples-grid,
.accounts-container .info-card .card-content > div {
grid-template-columns: 1fr;
gap: 15px;
}
/* Container padding */
.wiki-header-container,
.quick-nav-container,
.about-container,
.guide-container,
.accounts-container,
.autoloot-container,
.stats-container,
.vip-container,
.systems-container,
.episode-container,
.quest-container {
padding: 10px;
}
/* Flex layouts */
.list-item,
.feature-item,
.benefit-item,
.drop-item,
.map-drop-item {
flex-direction: column;
text-align: center;
}
.list-icon,
.feature-icon,
.benefit-icon,
.drop-icon,
.map-icon {
margin-right: 0;
margin-bottom: 10px;
}
.free-plan {
border-right: none;
border-bottom: 2px dashed #dee2e6;
}
.system-content {
padding: 15px;
}
.system-header {
padding: 15px;
font-size: 18px;
}
.ticket-header {
flex-direction: column;
gap: 8px;
text-align: center;
}
.timeline-legend {
grid-template-columns: 1fr;
}
.episode-timeline {
font-size: 14px;
}
.episode-timeline th,
.episode-timeline td {
padding: 8px 6px;
}
.info-card .card-content > div {
grid-template-columns: 1fr;
text-align: center;
}
.hero-section {
padding: 15px;
}
.hero-section div {
font-size: 18px;
}
.quest-header {
padding: 15px 20px;
font-size: 16px;
}
.quest-content {
padding: 20px;
}
.compact-quest-list > li {
padding: 15px;
margin-bottom: 20px;
}
.compact-quest-list > li:before {
position: static;
transform: none;
margin-bottom: 10px;
display: inline-flex;
}
.daily-quests-list {
grid-template-columns: 1fr;
}
.quest-progress-box,
.daily-quests-box {
padding: 15px;
}
}
@media (max-width: 480px) {
.card-header,
.nav-header,
.stat-header,
.substat-header,
.trait-header,
.status-header,
.comparison-header,
.system-header,
.plan-header,
.benefits-header,
.ticket-header {
padding: 12px 15px;
font-size: 16px;
}
.ticket-content,
.quest-content {
padding: 15px;
}
.ticket-header {
padding: 15px;
font-size: 16px;
}
.info-card .card-content > div {
grid-template-columns: 1fr;
gap: 20px;
}
.quest-header {
padding: 12px 15px;
font-size: 14px;
}
.quest-content {
padding: 15px;
}
.compact-quest-list > li {
padding: 12px;
}
.compact-quest-list > li strong {
font-size: 14px;
}
.compact-quest-list ul li {
font-size: 13px;
}
}
/* === Print Styles === */
@media print {
.wikitable {
box-shadow: none;
border: 1px solid #000;
}
a {
color: #000;
text-decoration: underline;
}
.quest-card {
box-shadow: none;
border: 1px solid #000;
}
.quest-header {
background: #f0f0f0 !important;
color: #000 !important;
text-shadow: none !important;
}
.quest-rewards,
.quest-unlocks,
.quest-items {
background: #f8f8f8 !important;
border-color: #ccc !important;
}
}
.quick-nav-container {
display: flex;
flex-wrap: wrap;
gap: 1em;
justify-content: center;
}
.nav-card {
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 100%;
max-width: 400px;
}
.nav-header {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
padding: 15px;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
.nav-content {
padding: 15px;
}
.nav-table {
width: 100%;
border-collapse: collapse;
}
.nav-table td {
padding: 8px;
border: 1px solid #ddd;
font-size: 0.9em;
}
.nav-table tr:nth-child(even) td {
background-color: #f8f9fa;
}
/* ===== QUEST GUIDE SPECIFIC STYLES ===== */
.wiki-header-container {
max-width: 700px;
margin: 0 auto;
padding: 10px;
}
.quest-header-box {
background: linear-gradient(135deg, #2c5e9e 0%, #1e3a5f 100%);
border-radius: 12px;
margin-bottom: 25px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
font-size: 28px;
margin: 0;
padding: 20px;
}
.quest-header-box h1 {
color: white;
border-bottom: none;
margin: 0;
padding: 0;
font-size: 28px;
text-align: center;
}
.quest-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.summary-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #e1e8ed;
}
.summary-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.summary-header {
padding: 18px 25px;
color: white;
font-weight: 600;
font-size: 18px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
background: linear-gradient(135deg, #2c5e9e 0%, #1e3a5f 100%);
}
.summary-content {
padding: 20px;
line-height: 1.6;
}
.info-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #e1e8ed;
margin-bottom: 25px;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.card-header {
padding: 18px 25px;
color: white;
font-weight: 600;
font-size: 20px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
background: linear-gradient(135deg, #2c5e9e 0%, #1e3a5f 100%);
}
.card-content {
padding: 25px;
line-height: 1.6;
}
.quest-start-box {
background: rgba(52, 152, 219, 0.1);
border: 1px solid rgba(52, 152, 219, 0.2);
border-left: 4px solid #3498db;
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 25px;
font-size: 14px;
}
.quest-start-box strong {
color: #2c5e9e;
font-weight: 600;
}
.quest-start-box code {
background: #2c5e9e;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 13px;
}
/* Quest List Styling */
.compact-quest-list {
counter-reset: quest-step;
list-style: none;
padding: 0;
margin: 0;
}
.compact-quest-list > li {
counter-increment: quest-step;
margin-bottom: 25px;
padding: 20px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid #e1e8ed;
border-radius: 8px;
position: relative;
transition: all 0.3s ease;
}
.compact-quest-list > li:hover {
background: rgba(240, 247, 255, 0.9);
transform: translateX(5px);
}
.compact-quest-list > li:before {
content: counter(quest-step);
background: linear-gradient(135deg, #2c5e9e, #1e3a5f);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
}
.compact-quest-list > li strong {
color: #2c5e9e;
font-weight: 600;
display: block;
margin-bottom: 8px;
font-size: 15px;
}
.compact-quest-list code {
background: #2c5e9e;
color: white;
padding: 3px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 12px;
margin: 0 2px;
}
/* Nested Lists */
.compact-quest-list ul {
list-style: none;
padding: 0;
margin: 10px 0 0 0;
}
.compact-quest-list ul li {
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
position: relative;
padding-left: 20px;
font-size: 14px;
line-height: 1.4;
}
.compact-quest-list ul li:last-child {
border-bottom: none;
}
.compact-quest-list ul li:before {
content: "•";
color: #3498db;
font-weight: bold;
position: absolute;
left: 0;
}
/* Reward Boxes */
.quest-rewards {
background: rgba(39, 174, 96, 0.1);
border: 1px solid rgba(39, 174, 96, 0.2);
border-left: 4px solid #27ae60;
padding: 12px 15px;
border-radius: 6px;
margin: 15px 0;
font-size: 13px;
}
.quest-rewards strong {
color: #27ae60;
font-weight: 600;
}
.quest-rewards ul {
margin-top: 5px;
list-style: none;
padding: 0;
}
.quest-rewards li {
padding: 4px 0;
display: flex;
align-items: center;
gap: 8px;
}
.quest-unlocks {
background: rgba(155, 89, 182, 0.1);
border: 1px solid rgba(155, 89, 182, 0.2);
border-left: 4px solid #9b59b6;
padding: 12px 15px;
border-radius: 6px;
margin: 15px 0;
font-size: 13px;
}
.quest-unlocks strong {
color: #9b59b6;
font-weight: 600;
}
.quest-unlocks ul {
margin-top: 5px;
list-style: none;
padding: 0;
}
.quest-unlocks li {
padding: 4px 0;
}
/* Progress Overview */
.quest-progress-box {
background: linear-gradient(135deg, #34495e, #2c3e50);
color: white;
padding: 20px;
border-radius: 8px;
margin: 30px 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.quest-progress-box strong {
color: white;
font-weight: 600;
display: block;
margin-bottom: 15px;
font-size: 16px;
}
.quest-progress-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.quest-progress-box li {
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
position: relative;
padding-left: 25px;
font-size: 14px;
}
.quest-progress-box li:last-child {
border-bottom: none;
}
.quest-progress-box li:before {
content: "→";
color: #3498db;
font-weight: bold;
position: absolute;
left: 0;
}
.quest-progress-box li:first-child:before {
content: "✓";
color: #27ae60;
}
.quest-progress-box li:nth-child(2):before {
content: "✓";
color: #27ae60;
}
.quest-progress-box li:nth-child(3):before {
content: "✓";
color: #27ae60;
}
/* Table Styling */
.wikitable {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin: 1em 0;
background: white;
border: 1px solid #a2a9b1;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.wikitable th {
background: linear-gradient(135deg, #2c5e9e 0%, #1e3a5f 100%);
color: white;
font-weight: 600;
text-align: center;
padding: 12px 8px;
border-bottom: 2px solid #1e3a5f;
font-size: 14px;
}
.wikitable td {
padding: 10px 8px;
border: 1px solid #ddd;
vertical-align: top;
}
.wikitable tr:nth-child(even) {
background-color: #f8f9fa;
}
.wikitable tr:nth-child(odd) {
background-color: #ffffff;
}
.wikitable tr:hover {
background-color: #e3f2fd;
transition: background-color 0.2s ease;
}
/* Responsive Design */
@media (max-width: 768px) {
.wiki-header-container {
padding: 10px;
}
.quest-summary-grid {
grid-template-columns: 1fr;
}
.card-content {
padding: 15px;
}
.compact-quest-list > li {
padding: 15px;
margin-bottom: 20px;
}
.compact-quest-list > li:before {
position: static;
transform: none;
margin-bottom: 10px;
display: inline-flex;
}
.quest-progress-box {
padding: 15px;
}
}
@media (max-width: 480px) {
.quest-header-box h1 {
font-size: 22px;
}
.card-header {
padding: 12px 15px;
font-size: 16px;
}
.summary-header {
padding: 12px 15px;
font-size: 16px;
}
.compact-quest-list > li {
padding: 12px;
}
.compact-quest-list > li strong {
font-size: 14px;
}
.compact-quest-list ul li {
font-size: 13px;
}
}
