|
|
| (48 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ===== MEDIAWIKI COMMON.CSS ENHANCEMENTS ===== */ | | /* Ragnawiki Styles */ |
| /* Last updated: 2024 - OPTIMIZED VERSION */
| | .ragnawiki-hero { |
| | |
| /* === 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%); | | background: linear-gradient(135deg, #2c5e9e 0%, #1e3a5f 100%); |
| color: white; | | color: white; |
| font-weight: 600; | | padding: 25px; |
| | border-radius: 12px; |
| text-align: center; | | text-align: center; |
| padding: 12px 8px; | | margin: 15px 0; |
| border-bottom: 2px solid #1e3a5f; | | box-shadow: 0 4px 15px rgba(0,0,0,0.15); |
| font-size: 14px; | | position: relative; |
| | overflow: hidden; |
| } | | } |
|
| |
|
| .wikitable td { | | .ragnawiki-hero-title { |
| padding: 10px 8px;
| | font-size: 28px; |
| 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; | | font-weight: bold; |
| | margin-bottom: 10px; |
| | text-shadow: 2px 2px 4px rgba(0,0,0,0.3); |
| } | | } |
|
| |
|
| /* === Better Links === */
| | .ragnawiki-hero-subtitle { |
| a {
| | font-size: 16px; |
| color: #0645ad; | | opacity: 0.95; |
| text-decoration: none; | | margin-bottom: 15px; |
| transition: color 0.2s ease; | |
| } | | } |
|
| |
|
| a:hover {
| | .ragnawiki-grid { |
| color: #0b0080;
| | display: flex; |
| text-decoration: underline;
| | gap: 20px; |
| }
| | margin: 25px 0; |
| | | flex-wrap: wrap; |
| 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 === */
| | .ragnawiki-card { |
| .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 (UNIFIED) === */
| |
| | |
| /* Container System */
| |
| .wiki-header-container,
| |
| .quick-nav-container,
| |
| .about-container,
| |
| .guide-container,
| |
| .accounts-container,
| |
| .autoloot-container,
| |
| .stats-container,
| |
| .vip-container,
| |
| .systems-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 {
| |
| background: white; | | background: white; |
| border-radius: 12px; | | border-radius: 10px; |
| box-shadow: 0 4px 20px rgba(0,0,0,0.08); | | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| overflow: hidden; | | overflow: hidden; |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | | flex: 1; |
| border: 1px solid #e1e8ed;
| | min-width: 300px; |
| margin-bottom: 25px;
| |
| }
| |
| | |
| /* Card Hover Effects (Unified) */
| |
| .info-card:hover,
| |
| .nav-card:hover,
| |
| .stat-card:hover,
| |
| .substat-card:hover,
| |
| .trait-card:hover,
| |
| .status-card:hover,
| |
| .vip-comparison-card:hover,
| |
| .system-card:hover,
| |
| .feature-card:hover {
| |
| transform: translateY(-5px);
| |
| box-shadow: 0 8px 30px rgba(0,0,0,0.12); | |
| } | | } |
|
| |
|
| .substat-card:hover, | | .ragnawiki-card-header { |
| .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 {
| |
| padding: 18px 25px;
| |
| color: white; | | color: white; |
| font-weight: 600; | | padding: 12px 15px; |
| font-size: 20px; | | font-weight: bold; |
| text-align: center;
| | font-size: 14px; |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
| |
| }
| |
| | |
| /* Smaller Headers */
| |
| .substat-header,
| |
| .trait-header,
| |
| .status-header,
| |
| .plan-header {
| |
| padding: 14px 18px;
| |
| font-size: 16px; | |
| }
| |
| | |
| /* Card Content System */
| |
| .card-content,
| |
| .nav-content,
| |
| .stat-content,
| |
| .substat-content,
| |
| .trait-content,
| |
| .status-content,
| |
| .comparison-content,
| |
| .system-content,
| |
| .plan-content,
| |
| .benefits-content {
| |
| padding: 25px;
| |
| line-height: 1.6;
| |
| }
| |
| | |
| .nav-content {
| |
| padding: 0;
| |
| }
| |
| | |
| .substat-content,
| |
| .trait-content,
| |
| .status-content {
| |
| padding: 18px;
| |
| }
| |
| | |
| /* === GRID SYSTEMS (UNIFIED) === */
| |
| | |
| .stats-grid,
| |
| .substats-grid,
| |
| .trait-stats-grid,
| |
| .status-breakdown-grid,
| |
| .feature-grid,
| |
| .benefits-grid,
| |
| .systems-comparison,
| |
| .comparison-grid {
| |
| display: grid;
| |
| gap: 20px;
| |
| margin: 25px 0;
| |
| }
| |
| | |
| .stats-grid {
| |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
| |
| }
| |
| | |
| .substats-grid {
| |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
| |
| }
| |
| | |
| .trait-stats-grid {
| |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
| |
| }
| |
| | |
| .status-breakdown-grid {
| |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
| |
| }
| |
| | |
| .feature-grid {
| |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
| |
| } | | } |
|
| |
|
| .benefits-grid { | | .ragna-blue { background: linear-gradient(135deg, #4682B4, #5a96d1); } |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
| | .ragna-gold { background: linear-gradient(135deg, #DAA520, #e6b800); } |
| } | | .ragna-light-blue { background: linear-gradient(135deg, #87CEFA, #6ab0f5); } |
| | .ragna-green { background: linear-gradient(135deg, #32CD32, #28a428); } |
|
| |
|
| .systems-comparison, | | .ragnawiki-card-content { |
| .comparison-grid {
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 30px;
| |
| }
| |
| | |
| /* === LIST SYSTEMS (UNIFIED) === */
| |
| | |
| .modern-list,
| |
| .stat-list,
| |
| .substat-list,
| |
| .trait-list,
| |
| .feature-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; | | padding: 15px; |
| border-radius: 8px;
| |
| transition: all 0.3s ease;
| |
| } | | } |
|
| |
|
| .list-item { | | .ragnawiki-list { |
| background: rgba(255, 255, 255, 0.7);
| | width: 100%; |
| border: 1px solid #e1e8ed;
| | border: none; |
| 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 { | | .ragnawiki-list tr td { |
| background: rgba(30, 144, 255, 0.05);
| | padding: 8px 5px; |
| 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; | | border-bottom: 1px solid #f0f0f0; |
| position: relative; | | vertical-align: middle; |
| padding-left: 20px;
| |
| } | | } |
|
| |
|
| .stat-list li:last-child, | | .ragnawiki-list tr:last-child td { |
| .substat-list li:last-child,
| |
| .trait-list li:last-child {
| |
| border-bottom: none; | | border-bottom: none; |
| } | | } |
|
| |
|
| .stat-list li:before, | | .ragna-value { |
| .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;
| |
| }
| |
| | |
| /* 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; | | font-weight: 600; |
| color: #B8860B;
| |
| font-size: 14px;
| |
| margin-bottom: 4px;
| |
| } | | } |
|
| |
|
| .map-drop { | | .ragnawiki-notes { |
| color: #666; | | margin-top: 5px; |
| line-height: 1.4;
| |
| } | | } |
|
| |
|
| /* === SPECIAL ELEMENTS === */
| | .ragnawiki-tip-box { |
| .notes-box { | | background: #fff3f3; |
| transition: transform 0.2s ease;
| | border-left: 4px solid #b22222; |
| }
| | padding: 12px; |
| | | border-radius: 6px; |
| .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;
| |
| }
| |
| | |
| .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; | | 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, | | .ragnawiki-nav-grid { |
| .map-drops-grid {
| |
| display: flex; | | display: flex; |
| flex-direction: column;
| |
| margin: 20px 0;
| |
| }
| |
|
| |
| .drops-grid {
| |
| gap: 12px;
| |
| }
| |
|
| |
| .map-drops-grid {
| |
| gap: 15px; | | gap: 15px; |
| | margin: 25px 0; |
| | flex-wrap: wrap; |
| } | | } |
|
| |
|
| /* === RESPONSIVE DESIGN (UNIFIED) === */
| | .ragnawiki-nav-card { |
| @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 {
| |
| grid-template-columns: 1fr !important;
| |
| }
| |
|
| |
| .command-grid,
| |
| .examples-grid,
| |
| .accounts-container .info-card .card-content > div {
| |
| grid-template-columns: 1fr !important;
| |
| gap: 15px !important;
| |
| }
| |
|
| |
| /* Container padding */
| |
| .wiki-header-container,
| |
| .quick-nav-container,
| |
| .about-container,
| |
| .guide-container,
| |
| .accounts-container,
| |
| .autoloot-container,
| |
| .stats-container,
| |
| .vip-container,
| |
| .systems-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;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 480px) {
| |
| .card-header,
| |
| .nav-header,
| |
| .stat-header,
| |
| .substat-header,
| |
| .trait-header,
| |
| .status-header,
| |
| .comparison-header,
| |
| .system-header,
| |
| .plan-header,
| |
| .benefits-header {
| |
| padding: 12px 15px;
| |
| font-size: 16px;
| |
| }
| |
| }
| |
| | |
| /* === Print Styles === */
| |
| @media print {
| |
| .wikitable {
| |
| box-shadow: none;
| |
| border: 1px solid #000;
| |
| }
| |
|
| |
| a {
| |
| color: #000;
| |
| text-decoration: underline;
| |
| }
| |
| }
| |
| | |
| /* Episode Overview Styling */
| |
| .episode-container {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| padding: 20px;
| |
| }
| |
| | |
| /* Tickets Grid - Single Line Layout */
| |
| .tickets-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(4, 1fr); /* Force 4 columns */
| |
| gap: 20px;
| |
| margin: 30px 0;
| |
| width: 100%;
| |
| }
| |
| | |
| .ticket-card {
| |
| background: white; | | background: white; |
| border-radius: 12px; | | border-radius: 10px; |
| box-shadow: 0 4px 20px rgba(0,0,0,0.08); | | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| overflow: hidden; | | overflow: hidden; |
| transition: transform 0.3s ease, box-shadow 0.3s ease;
| | flex: 1; |
| border: 1px solid #e1e8ed;
| | min-width: 250px; |
| display: flex;
| |
| flex-direction: column; | |
| height: 100%;
| |
| min-width: 0; /* Prevent overflow */ | |
| }
| |
| | |
| .ticket-card:hover {
| |
| transform: translateY(-5px);
| |
| box-shadow: 0 8px 30px rgba(0,0,0,0.12);
| |
| } | | } |
|
| |
|
| .ticket-header { | | .ragnawiki-nav-header { |
| padding: 15px;
| |
| color: white; | | color: white; |
| font-weight: 600;
| | padding: 12px 15px; |
| font-size: 16px;
| | font-weight: bold; |
| text-align: center;
| |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 8px;
| |
| flex-shrink: 0;
| |
| }
| |
| | |
| .ticket-content {
| |
| padding: 20px; | |
| display: flex;
| |
| flex-direction: column;
| |
| flex-grow: 1;
| |
| }
| |
| | |
| .ticket-info {
| |
| margin-bottom: 15px;
| |
| flex-grow: 1;
| |
| }
| |
| | |
| .ticket-episode {
| |
| font-weight: 600; | |
| color: #2c5e9e;
| |
| font-size: 14px; | | 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; | | text-align: center; |
| } | | } |
|
| |
|
| .ticket-link-container .plainlinks a { | | .ragnawiki-nav-content { |
| display: inline-block;
| | padding: 0; |
| 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;
| |
| } | | } |
|
| |
|
| /* Responsive for smaller screens */
| | .ragnawiki-nav-table { |
| @media (max-width: 1200px) {
| |
| .tickets-grid {
| |
| grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
| |
| }
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .tickets-grid {
| |
| grid-template-columns: 1fr; /* 1 column on mobile */
| |
| }
| |
| }
| |
| | |
| /* Episode Timeline Table */
| |
| .episode-table-container {
| |
| overflow-x: auto;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| .episode-timeline {
| |
| width: 100%; | | width: 100%; |
| | border: none; |
| border-collapse: collapse; | | border-collapse: collapse; |
| } | | } |
|
| |
|
| .episode-timeline th { | | .ragnawiki-nav-table tr td { |
| background: linear-gradient(135deg, #34495e, #2c3e50);
| | padding: 15px 6px; |
| color: white;
| | border-bottom: 1px solid #e1e8ed; |
| font-weight: 600;
| |
| padding: 15px 12px;
| |
| text-align: left;
| |
| border: none;
| |
| }
| |
| | |
| .episode-timeline td {
| |
| padding: 12px; | |
| border-bottom: 1px solid #ecf0f1; | |
| vertical-align: middle; | | vertical-align: middle; |
| } | | } |
|
| |
|
| .episode-timeline tr:hover td { | | .ragnawiki-nav-table tr:nth-child(odd) td { |
| background: rgba(52, 152, 219, 0.05); | | background: rgba(240, 248, 255, 0.7); |
| } | | } |
|
| |
|
| /* Status Badges */
| | .ragnawiki-nav-table tr:nth-child(even) td { |
| .status-completed { | | background: rgba(255, 255, 255, 0.9); |
| background: #27ae50;
| |
| color: white;
| |
| padding: 6px 12px;
| |
| border-radius: 20px;
| |
| font-size: 12px;
| |
| font-weight: 600; | |
| display: inline-block;
| |
| } | | } |
|
| |
|
| .status-skippable { | | .ragnawiki-nav-table tr:last-child td { |
| background: #9b59b6;
| | border-bottom: none; |
| color: white;
| |
| padding: 6px 12px;
| |
| border-radius: 20px;
| |
| font-size: 12px;
| |
| font-weight: 600;
| |
| display: inline-block;
| |
| }
| |
| | |
| .status-current {
| |
| background: #e67e22;
| |
| color: white;
| |
| padding: 6px 12px;
| |
| border-radius: 20px;
| |
| font-size: 12px;
| |
| font-weight: 600;
| |
| display: inline-block;
| |
| }
| |
| | |
| .status-future {
| |
| background: #95a5a6;
| |
| color: white;
| |
| padding: 6px 12px;
| |
| border-radius: 20px; | |
| font-size: 12px;
| |
| font-weight: 600;
| |
| display: inline-block;
| |
| }
| |
| | |
| /* Timeline Legend */
| |
| .timeline-legend {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
| |
| gap: 15px;
| |
| margin-top: 25px;
| |
| } | | } |
|
| |
|
| .legend-item {
| | /* Responsive design */ |
| display: flex;
| |
| align-items: center;
| |
| gap: 12px;
| |
| padding: 10px;
| |
| background: rgba(236, 240, 241, 0.5);
| |
| border-radius: 8px;
| |
| }
| |
| | |
| .legend-color {
| |
| width: 16px;
| |
| height: 16px;
| |
| 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);
| |
| }
| |
| | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | | @media (max-width: 768px) { |
| .tickets-grid { | | .ragnawiki-grid, |
| grid-template-columns: 1fr;
| | .ragnawiki-nav-grid { |
| }
| |
|
| |
| .episode-container { | |
| padding: 10px;
| |
| }
| |
|
| |
| .ticket-header {
| |
| flex-direction: column; | | flex-direction: column; |
| gap: 8px;
| |
| text-align: center;
| |
| } | | } |
| | | |
| .timeline-legend { | | .ragnawiki-card, |
| grid-template-columns: 1fr; | | .ragnawiki-nav-card { |
| | min-width: auto; |
| } | | } |
|
| |
| .episode-timeline {
| |
| font-size: 14px;
| |
| }
| |
|
| |
| .episode-timeline th,
| |
| .episode-timeline td {
| |
| padding: 8px 6px;
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 480px) {
| |
| .ticket-content {
| |
| padding: 15px;
| |
| }
| |
|
| |
| .ticket-header {
| |
| padding: 15px;
| |
| font-size: 16px;
| |
| }
| |
|
| |
| .info-card .card-content > div {
| |
| grid-template-columns: 1fr !important;
| |
| gap: 20px !important;
| |
| }
| |
| }
| |
|
| |
| /* Compact Episode Table */
| |
| .episode-timeline {
| |
| font-size: 13px;
| |
| } | | } |
|
| |
|
| .episode-timeline th { | | /* Additional color classes for Stats page */ |
| padding: 10px 8px;
| | .ragna-orange { background: linear-gradient(135deg, #ff9800, #f57c00); } |
| font-size: 12px;
| | .ragna-red { background: linear-gradient(135deg, #f44336, #d32f2f); } |
| } | | .ragna-yellow { background: linear-gradient(135deg, #ffeb3b, #fbc02d); } |
| | .ragna-purple { background: linear-gradient(135deg, #9c27b0, #7b1fa2); } |
| | .ragna-brown { background: linear-gradient(135deg, #795548, #5d4037); } |
| | .ragna-pink { background: linear-gradient(135deg, #f48fb1, #f06292); } |
|
| |
|
| .episode-timeline td { | | /* Additional color classes for VIP page */ |
| padding: 8px 6px;
| | .ragna-gold { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #8b6914; } |
| } | |
|
| |
|
| .episode-timeline .status-completed,
| | /* Additional color classes for Episode page */ |
| .episode-timeline .status-skippable, | | .ragna-dark { background: linear-gradient(135deg, #34495e, #2c3e50); } |
| .episode-timeline .status-current,
| |
| .episode-timeline .status-future {
| |
| padding: 4px 8px;
| |
| font-size: 11px;
| |
| min-width: 40px;
| |
| text-align: center;
| |
| } | |
|
| |
|
| /* Smaller legend */ | | /* Table improvements */ |
| .timeline-legend { | | .wikitable { |
| font-size: 12px; | | border-collapse: collapse; |
| }
| | width: 100%; |
| | | margin: 15px 0; |
| .legend-item {
| |
| padding: 6px 8px;
| |
| }
| |
| | |
| .legend-color {
| |
| width: 12px; | |
| height: 12px;
| |
| }
| |
| | |
| /* Compact card adjustments */
| |
| .info-card .card-content {
| |
| padding: 18px;
| |
| }
| |
| | |
| .info-card .card-header {
| |
| padding: 14px 20px;
| |
| font-size: 16px;
| |
| }
| |
| | |
| .system-description {
| |
| font-size: 13px;
| |
| margin-bottom: 12px; | |
| color: #555;
| |
| }
| |
| | |
| /* Responsive adjustments */
| |
| @media (max-width: 768px) {
| |
| .info-card .card-content > div {
| |
| grid-template-columns: 1fr !important;
| |
| text-align: center;
| |
| }
| |
|
| |
| .hero-section {
| |
| padding: 15px !important;
| |
| }
| |
|
| |
| .hero-section div {
| |
| font-size: 18px !important;
| |
| }
| |
| }
| |
| | |
| /* Quest Guide Styling */
| |
| .quest-grid, .side-quests-grid, .daily-quests-grid {
| |
| display: grid;
| |
| gap: 20px;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| .quest-grid {
| |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
| |
| }
| |
| | |
| .side-quests-grid, .daily-quests-grid {
| |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
| |
| }
| |
| | |
| .quest-card {
| |
| background: white; | | background: white; |
| border-radius: 8px; | | border-radius: 8px; |
| box-shadow: 0 2px 12px rgba(0,0,0,0.06);
| |
| border: 1px solid #e1e8ed;
| |
| overflow: hidden; | | overflow: hidden; |
| | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| } | | } |
|
| |
|
| .quest-header { | | .wikitable th { |
| padding: 12px 15px; | | background: linear-gradient(135deg, #667eea, #764ba2); |
| color: white; | | color: white; |
| font-weight: 600; | | padding: 12px 8px; |
| | font-weight: bold; |
| font-size: 14px; | | font-size: 14px; |
| text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
| |
| } | | } |
|
| |
|
| .quest-content { | | .wikitable td { |
| padding: 15px; | | padding: 10px 8px; |
| }
| | border-bottom: 1px solid #f0f0f0; |
| | |
| .quest-start {
| |
| font-size: 12px;
| |
| color: #7f8c8d;
| |
| margin-bottom: 10px;
| |
| padding: 8px;
| |
| background: #f8f9fa;
| |
| border-radius: 4px;
| |
| border-left: 3px solid #3498db; | |
| }
| |
| | |
| .compact-list {
| |
| list-style: decimal;
| |
| padding-left: 20px;
| |
| margin: 10px 0;
| |
| font-size: 12px;
| |
| }
| |
| | |
| .compact-list li {
| |
| margin-bottom: 6px;
| |
| line-height: 1.3;
| |
| }
| |
| | |
| .compact-list code {
| |
| background: #2c5e9e;
| |
| color: white;
| |
| padding: 2px 6px;
| |
| border-radius: 3px;
| |
| font-size: 11px;
| |
| font-family: 'Courier New', monospace;
| |
| }
| |
| | |
| .quest-rewards {
| |
| margin-top: 12px;
| |
| padding: 10px;
| |
| background: rgba(52, 152, 219, 0.1);
| |
| border-radius: 4px;
| |
| font-size: 11px;
| |
| line-height: 1.4;
| |
| }
| |
| | |
| .quest-rewards strong {
| |
| color: #2c5e9e;
| |
| }
| |
| | |
| /* Responsive */
| |
| @media (max-width: 768px) {
| |
| .quest-grid, .side-quests-grid, .daily-quests-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .quest-content {
| |
| padding: 12px;
| |
| }
| |
| }
| |
| | |
| /* Sage Legacy Specific Styling */
| |
| .rewards-card {
| |
| background: white;
| |
| border-radius: 8px;
| |
| box-shadow: 0 2px 12px rgba(0,0,0,0.06);
| |
| border: 1px solid #e1e8ed;
| |
| margin: 20px 0;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .rewards-grid {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 20px;
| |
| }
| |
| | |
| .reward-category {
| |
| font-size: 13px; | | font-size: 13px; |
| } | | } |
|
| |
|
| .reward-category strong { | | .wikitable tr:nth-child(even) { |
| color: #2c5e9e; | | background: rgba(240, 248, 255, 0.7); |
| display: block;
| |
| margin-bottom: 8px;
| |
| font-size: 14px;
| |
| } | | } |
|
| |
|
| .instance-card { | | .wikitable tr:nth-child(odd) { |
| background: white;
| | background: rgba(255, 255, 255, 0.9); |
| border-radius: 8px;
| |
| box-shadow: 0 2px 12px rgba(0,0,0,0.06);
| |
| border: 1px solid #e1e8ed;
| |
| margin: 20px 0;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .quest-items {
| |
| font-size: 11px;
| |
| color: #7f8c8d;
| |
| margin: 8px 0;
| |
| padding: 8px;
| |
| background: #f8f9fa; | |
| border-radius: 4px;
| |
| border-left: 3px solid #e67e22;
| |
| }
| |
| | |
| .unlocks-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
| |
| gap: 15px;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| .unlock-card {
| |
| background: white;
| |
| border-radius: 8px;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.06);
| |
| border: 1px solid #e1e8ed;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .unlock-header {
| |
| background: linear-gradient(135deg, #34495e, #2c3e50);
| |
| color: white;
| |
| padding: 12px 15px;
| |
| font-weight: 600;
| |
| font-size: 14px;
| |
| text-align: center;
| |
| }
| |
| | |
| .unlock-content {
| |
| padding: 15px;
| |
| font-size: 12px;
| |
| }
| |
| | |
| /* Responsive */
| |
| @media (max-width: 768px) {
| |
| .rewards-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .unlocks-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| | |
| /* Direction of Prayer Specific Styling */
| |
| .quest-summary-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
| |
| gap: 15px;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| .summary-card {
| |
| background: white;
| |
| border-radius: 8px;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.06);
| |
| border: 1px solid #e1e8ed;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .summary-header {
| |
| background: linear-gradient(135deg, #8e44ad, #9b59b6);
| |
| color: white;
| |
| padding: 12px 15px;
| |
| font-weight: 600;
| |
| font-size: 14px;
| |
| text-align: center;
| |
| }
| |
| | |
| .summary-content {
| |
| padding: 15px;
| |
| font-size: 12px;
| |
| }
| |
| | |
| .reputation-card {
| |
| background: white;
| |
| border-radius: 8px;
| |
| box-shadow: 0 2px 12px rgba(0,0,0,0.06);
| |
| border: 1px solid #e1e8ed;
| |
| margin: 20px 0;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .reputation-grid {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 20px;
| |
| }
| |
| | |
| .rep-category {
| |
| font-size: 12px;
| |
| } | | } |
|
| |
|
| .rep-category strong { | | /* Additional troubleshooting-specific styles */ |
| color: #2c5e9e;
| | .ragna-red { background: linear-gradient(135deg, #e74c3c, #c0392b); } |
| display: block;
| | .ragna-orange { background: linear-gradient(135deg, #e67e22, #d35400); } |
| margin-bottom: 8px;
| | .ragna-blue { background: linear-gradient(135deg, #3498db, #2980b9); } |
| font-size: 13px;
| | .ragna-green { background: linear-gradient(135deg, #2ecc71, #27ae60); } |
| } | | .ragna-purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); } |
|
| |
|
| .instance-grid {
| | /* Additional color classes for Illusion quests */ |
| display: grid;
| | .ragna-teal { background: linear-gradient(135deg, #16a085, #1abc9c); } |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
| |
| gap: 15px;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| .completion-card { | |
| background: white;
| |
| border-radius: 8px;
| |
| box-shadow: 0 2px 12px rgba(0,0,0,0.06);
| |
| border: 1px solid #e1e8ed;
| |
| margin: 20px 0;
| |
| overflow: hidden;
| |
| }
| |
| | |
| /* Responsive */
| |
| @media (max-width: 768px) {
| |
| .quest-summary-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .reputation-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .instance-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| } | |
