|
|
| Line 1: |
Line 1: |
| /* Template:JourneyPage/styles.css | | /* Template:JourneyPage/styles.css – MediaWiki‑sanitized variant (no custom fonts, no rgba in border‑color) |
| Journey tracking system styles for Dune wiki | | Date: 2025‑05‑28 */ |
| Integrates with existing Dune theme */
| |
|
| |
|
| /* ================================================ | | /* =========== CORE LAYOUT =========== */ |
| JOURNEY SYSTEM BASE STYLES
| |
| ================================================ */
| |
| | |
| /* Main Container - Fixed height for wiki integration */
| |
| .journey-main-container { | | .journey-main-container { |
| display: flex;
| | display: flex; |
| gap: 12px;
| | gap: 12px; |
| padding: 12px 0;
| | padding: 12px 0; |
| max-width: 100%;
| | max-width: 100%; |
| margin: 0 auto;
| | margin: 0 auto; |
| font-family: 'Rajdhani', sans-serif;
| | font-family: sans-serif; |
| position: relative;
| | position: relative; |
| height: 850px; /* Fixed height for wiki pages */
| | height: 840px; |
| min-height: 600px;
| | min-height: 740px; |
| overflow: hidden;
| | overflow: hidden; |
| align-items: stretch;
| | align-items: stretch; |
| background: rgba(0,0,2,.3);
| | background: rgba(0,0,2,.3); |
| border: 2px solid rgba(252, 231, 200, 0.2);
| | border: 2px solid #c8b38f; /* #fce7c8 @ 60 % */ |
| } | | } |
|
| |
| /* Tech pattern overlay */
| |
| .journey-main-container::before { | | .journey-main-container::before { |
| content: '';
| | content: ''; |
| position: absolute;
| | position: absolute; inset: 0; |
| top: 0;
| | background-image: repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(252,231,200,.01) 35px,rgba(252,231,200,.01) 70px); |
| left: 0;
| | z-index: -1; |
| right: 0;
| |
| bottom: 0;
| |
| background-image: repeating-linear-gradient(
| |
| 45deg,
| |
| transparent,
| |
| transparent 35px,
| |
| rgba(252, 231, 200, 0.01) 35px,
| |
| rgba(252, 231, 200, 0.01) 70px
| |
| );
| |
| z-index: -1;
| |
| } | | } |
|
| |
|
| /* Journey Categories - 60% width */ | | /* =========== CATEGORIES COLUMN =========== */ |
| .journey-categories { | | .journey-categories { |
| flex: 0 0 60%;
| | flex: 0 0 60%; |
| display: flex;
| | display: flex; |
| flex-direction: column;
| | flex-direction: column; |
| gap: 15px;
| | gap: 15px; |
| overflow-y: auto;
| | overflow-y: auto; |
| overflow-x: hidden;
| | overflow-x: hidden; |
| padding-right: 10px;
| | padding-right: 10px; |
| max-height: 100%;
| | max-height: 100%; |
| } | | } |
|
| |
|
| /* Journey Section (Group) */ | | /* =========== SECTION CARD WRAPPER =========== */ |
| .journey-section { | | .journey-section { |
| background: linear-gradient(135deg, rgba(0,0,2,.9) 0%, rgba(12,10,20,.9) 100%);
| | background: linear-gradient(135deg, rgba(0,0,2,.9) 0%, rgba(12,10,20,.9) 100%); |
| border: 2px solid rgba(252, 231, 200, 0.2);
| | border: 2px solid #c8b38f; |
| box-shadow:
| | box-shadow: inset 0 0 20px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.8); |
| inset 0 0 20px rgba(0,0,0,0.5),
| | padding: 15px; |
| 0 2px 10px rgba(0,0,0,0.8);
| | position: relative; |
| padding: 15px;
| | overflow: hidden; |
| position: relative;
| | transition: all .3s ease; |
| overflow: hidden;
| | flex-shrink: 0; |
| transition: all 0.3s ease;
| |
| flex-shrink: 0;
| |
| }
| |
| | |
| .journey-section::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| height: 1px;
| |
| background: linear-gradient(90deg,
| |
| transparent 0%,
| |
| #fce7c8 50%,
| |
| transparent 100%);
| |
| opacity: 0.3;
| |
| }
| |
| | |
| .journey-section:hover {
| |
| border-color: rgba(252, 231, 200, 0.4);
| |
| box-shadow:
| |
| inset 0 0 30px rgba(252, 231, 200, 0.05),
| |
| 0 2px 20px rgba(252, 231, 200, 0.1);
| |
| } | | } |
| | .journey-section:hover { border-color: #fce7c8; } |
|
| |
|
| .journey-section-header { | | .journey-section-header { |
| display: flex;
| | display: flex; |
| align-items: center;
| | align-items: center; |
| gap: 12px;
| | gap: 12px; |
| margin-bottom: 15px;
| | margin: 8px 0 15px; |
| margin-top: 10px;
| | padding: 12px 0; |
| padding-bottom: 10px;
| | border-bottom: 1px solid #c8b38f; |
| border-bottom: 1px solid rgba(252, 231, 200, 0.2);
| |
| position: relative;
| |
| }
| |
| | |
| .section-icon {
| |
| font-size: 24px;
| |
| color: #E3BB7A;
| |
| text-shadow: 0 0 10px rgba(227, 187, 122, 0.5);
| |
| }
| |
| | |
| .section-icon img {
| |
| width: 24px;
| |
| height: 24px;
| |
| object-fit: contain;
| |
| } | | } |
|
| |
| .section-title { | | .section-title { |
| font-family: 'Orbitron', sans-serif;
| | font-size: 18px; |
| font-size: 18px;
| | font-weight: 700; |
| font-weight: 700;
| | text-transform: uppercase; |
| text-transform: uppercase;
| | letter-spacing: 2px; |
| letter-spacing: 2px;
| | color: #fce7c8; |
| color: #fce7c8;
| | font-family: sans-serif; |
| text-shadow: 0 0 15px rgba(252, 231, 200, 0.4);
| |
| } | | } |
| | .section-icon { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; color:#E3BB7A; font-size:24px; } |
| | .section-icon img { width:100%; height:100%; object-fit:contain; } |
|
| |
|
| /* Journey Grid */ | | /* =========== GRID =========== */ |
| .journey-grid { | | .journey-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); } |
| display: grid;
| | @media (min-width:1200px){ .journey-grid{ grid-template-columns:repeat(5,1fr);} } |
| grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
| |
| max-width: 100%;
| |
| gap: 12px;
| |
| } | |
| | |
| @media (min-width: 1200px) { | |
| .journey-grid {
| |
| grid-template-columns: repeat(5, 1fr);
| |
| }
| |
| } | |
|
| |
|
| /* Journey Card */ | | /* =========== JOURNEY CARD =========== */ |
| .journey-card { | | .journey-card { |
| background: linear-gradient(135deg, rgba(0,0,2,.8) 0%, rgba(12,10,20,.8) 100%);
| | background: linear-gradient(135deg, rgba(0,0,2,.8) 0%, rgba(12,10,20,.8) 100%); |
| border: 2px solid rgba(252, 231, 200, 0.2);
| | border: 2px solid #c8b38f; |
| cursor: pointer;
| | cursor: pointer; |
| transition: all 0.3s ease;
| | transition: all .3s ease; |
| position: relative;
| | position: relative; |
| overflow: hidden;
| | overflow: hidden; |
| height: 130px; /* clip-path removed for linter compliance */
| | height: 130px; |
| }
| |
| | |
| .journey-card::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: -2px;
| |
| left: -2px;
| |
| right: -2px;
| |
| bottom: -2px;
| |
| background: linear-gradient(45deg,
| |
| transparent 30%,
| |
| #fce7c8 50%,
| |
| transparent 70%);
| |
| opacity: 0;
| |
| transition: opacity 0.3s ease;
| |
| z-index: -1;
| |
| }
| |
| | |
| .journey-card:hover {
| |
| transform: translateY(-2px);
| |
| border-color: #fce7c8;
| |
| box-shadow:
| |
| 0 5px 20px rgba(252, 231, 200, 0.2),
| |
| inset 0 0 20px rgba(252, 231, 200, 0.05);
| |
| }
| |
| | |
| .journey-card:hover::before {
| |
| opacity: 0.3;
| |
| }
| |
| | |
| .journey-card.active {
| |
| border-color: #a855f7;
| |
| box-shadow:
| |
| 0 0 30px rgba(168, 85, 247, 0.4),
| |
| inset 0 0 20px rgba(168, 85, 247, 0.1);
| |
| }
| |
| | |
| .journey-card.completed {
| |
| opacity: 0.7;
| |
| }
| |
| | |
| .journey-card.completed::after {
| |
| content: '✓';
| |
| position: absolute;
| |
| top: 5px;
| |
| right: 8px;
| |
| color: #fce7c8;
| |
| font-size: 20px;
| |
| font-weight: bold;
| |
| text-shadow: 0 0 10px rgba(252, 231, 200, 0.5);
| |
| }
| |
| | |
| .journey-card-inner {
| |
| padding: 12px;
| |
| text-align: center;
| |
| height: 100%;
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
| | |
| .journey-icon {
| |
| width: 48px;
| |
| height: 48px;
| |
| margin: 0 auto 8px;
| |
| background: radial-gradient(circle, rgba(252, 231, 200, 0.1) 0%, transparent 70%);
| |
| border: 1px solid rgba(252, 231, 200, 0.2);
| |
| border-radius: 50%;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-size: 24px;
| |
| color: #E3BB7A;
| |
| position: relative;
| |
| overflow: hidden;
| |
| } | | } |
| | .journey-card:hover { border-color:#fce7c8; } |
| | .journey-card.active { border-color:#a855f7; } |
| | .journey-card.completed { opacity:.7; } |
| | .journey-card.completed::after { content:'✓'; position:absolute; top:5px; right:8px; color:#fce7c8; font-size:20px; font-weight:bold; } |
|
| |
|
| .journey-icon img { | | .journey-card-inner { padding:12px; text-align:center; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; position:relative; } |
| width: 48px;
| | .journey-card-inner::before { content:''; position:absolute; bottom:0; left:0; right:0; height:55px; background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 15%,rgba(0,0,0,.85) 50%,rgba(0,0,0,.95) 100%); } |
| height: 48px;
| |
| object-fit: contain;
| |
| } | |
|
| |
|
| .journey-icon::after { | | .journey-name { font-size:13px; font-weight:700; color:#fff; line-height:1.2; letter-spacing:.5px; text-transform:uppercase; margin-bottom:4px; } |
| content: '';
| | .journey-tier { font-size:12px; color:#fce7c8; letter-spacing:1.2px; text-transform:uppercase; } |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| width: 100%;
| |
| height: 100%;
| |
| background: radial-gradient(circle, rgba(252, 231, 200, 0.2) 0%, transparent 50%);
| |
| transform: translate(-50%, -50%) scale(0);
| |
| transition: transform 0.3s ease;
| |
| } | |
|
| |
|
| .journey-card:hover .journey-icon::after { | | /* hide icon when bg present */ |
| transform: translate(-50%, -50%) scale(1.5);
| | .journey-card.has-background .journey-icon { display:none; } |
| } | |
|
| |
|
| .journey-name {
| | /* =========== DETAILS PANEL (RIGHT) =========== */ |
| font-size: 12px;
| |
| font-weight: 600;
| |
| margin-bottom: 4px;
| |
| line-height: 1.2;
| |
| min-height: 28px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| color: #fce7c8;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.5px;
| |
| }
| |
| | |
| .journey-tier {
| |
| font-size: 11px;
| |
| color: #E3BB7A;
| |
| opacity: 0.8;
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| }
| |
| | |
| /* Journey Details Panel - 40% width */ | |
| .journey-details-panel { | | .journey-details-panel { |
| flex: 0 0 calc(40% - 20px);
| | flex: 0 0 calc(40% - 20px); |
| background: linear-gradient(135deg, rgba(0,0,2,.95) 0%, rgba(12,10,20,.95) 100%);
| | background: linear-gradient(135deg, rgba(0,0,2,.95) 0%, rgba(12,10,20,.95) 100%); |
| border: 2px solid rgba(252, 231, 200, 0.2);
| | border: 2px solid #c8b38f; |
| box-shadow:
| | box-shadow: inset 0 0 30px rgba(0,0,0,.5), 0 2px 20px rgba(0,0,0,.8); |
| inset 0 0 30px rgba(0,0,0,0.5),
| | padding:12px 12px 0; |
| 0 2px 20px rgba(0,0,0,0.8);
| | display:flex; flex-direction:column; gap:10px; |
| padding: 12px;
| | max-height:100%; overflow:hidden; |
| display: flex;
| |
| flex-direction: column;
| |
| gap: 10px;
| |
| position: relative;
| |
| height: 100%;
| |
| max-height: 100%;
| |
| overflow: hidden;
| |
| box-sizing: border-box;
| |
| } | | } |
|
| |
|
| .journey-details-panel::before { | | .journey-details-header { display:flex; align-items:center; gap:12px; border-bottom:1px solid #c8b38f; padding-bottom:10px; } |
| content: '';
| | .journey-title { flex:1; font-size:16px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#fce7c8; font-family:sans-serif; } |
| position: absolute;
| | .completion-status { font-size:12px; color:#E3BB7A; position:absolute; top:0; right:0; text-transform:uppercase; } |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| height: 2px;
| |
| background: linear-gradient(90deg,
| |
| transparent 0%,
| |
| #fce7c8 50%,
| |
| transparent 100%);
| |
| opacity: 0.5;
| |
| } | |
|
| |
|
| .journey-details-panel > * { | | /* description */ |
| flex-shrink: 0;
| | .journey-description { background:rgba(0,0,2,.6); border:1px solid #c8b38f; padding:10px; font-size:13px; line-height:1.4; color:#E0E0E0; transition:max-height .3s ease; overflow:hidden; } |
| } | | .journey-description.collapsed { max-height:42px; } |
| | .description-toggle { position:absolute; bottom:2px; right:4px; background:rgba(0,0,2,.8); border:1px solid #c8b38f; color:#E3BB7A; font-size:11px; padding:3px 10px; text-transform:uppercase; cursor:pointer; } |
| | .description-toggle:hover { border-color:#fce7c8; color:#fce7c8; } |
|
| |
|
| .journey-details-panel .journey-objectives { | | /* rewards */ |
| flex: 1 1 auto;
| | .journey-rewards { background:linear-gradient(135deg, rgba(227,187,122,.1) 0%, rgba(252,231,200,.05) 100%); border:1px solid #c8b38f; padding:13px 8px 8px; } |
| flex-shrink: 1;
| | .rewards-header { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#E3BB7A; font-family:sans-serif; margin-bottom:6px; } |
| } | | .xp-icon { background:linear-gradient(135deg,#E3BB7A 0%,#fce7c8 100%); color:#0a0a0a; padding:5px 12px; font-weight:700; text-transform:uppercase; } |
| | .xp-amount { font-size:22px; font-weight:700; color:#fce7c8; } |
|
| |
|
| .journey-description { | | /* objectives */ |
| flex-shrink: 1;
| | .journey-objectives { background:rgba(0,0,2,.6); border:1px solid #c8b38f; padding:17px 12px 12px; flex:1 1 auto; max-height:530px; display:flex; flex-direction:column; overflow:hidden; } |
| min-height: 0;
| | .objectives-header { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#E3BB7A; margin-bottom:10px; font-family:sans-serif; } |
| } | | .objectives-list { overflow-y:auto; overflow-x:hidden; padding-right:10px; flex:1 1 auto; } |
|
| |
|
| .journey-actions { | | .objective-item { margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #c8b38f; } |
| flex-shrink: 0;
| | .objective-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; } |
| margin-top: auto;
| | .objective-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; cursor:pointer; } |
| } | | .objective-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#a855f7 0%,rgba(168,85,247,.6) 100%); border:1px solid #fce7c8; color:#fff; font-size:16px; font-weight:700; } |
| | .objective-title { flex:1; font-size:15px; font-weight:600; letter-spacing:.5px; color:#fce7c8; text-transform:uppercase; padding-right:50px; } |
| | .objective-progress { font-size:13px; font-weight:600; color:#E3BB7A; } |
| | .objective-progress.completed { color:#fce7c8; } |
|
| |
|
| .journey-details-header { | | /* tasks */ |
| display: flex;
| | .task-item { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; color:#E0E0E0; } |
| align-items: center;
| | .task-checkbox { width:18px; height:18px; border:2px solid #c8b38f; display:flex; align-items:center; justify-content:center; cursor:pointer; } |
| gap: 12px;
| | .task-checkbox.completed { background:#E3BB7A; border-color:#fce7c8; } |
| position: relative;
| | .task-checkbox.completed::after { content:'✓'; color:#0a0a0a; font-size:12px; font-weight:bold; } |
| padding-bottom: 10px;
| | .task-description { flex:1; } |
| border-bottom: 1px solid rgba(252, 231, 200, 0.2);
| | .task-qty { font-size:13px; font-weight:600; color:#E3BB7A; text-transform:uppercase; } |
| flex-shrink: 0;
| |
| } | |
|
| |
|
| .journey-tier-badge {
| | /* actions */ |
| width: 40px;
| | .journey-actions { display:flex; justify-content:center; gap:1.2rem; margin:5px 0 0; } |
| height: 40px;
| | .action-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:160px; padding:12px 16px; background:linear-gradient(135deg, rgba(0,0,2,.8) 0%, rgba(12,10,20,.8) 100%); border:2px solid #c8b38f; color:#fce7c8; font-family:sans-serif; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:all .3s ease; } |
| background: linear-gradient(135deg, #a855f7 0%, rgba(168, 85, 247, 0.6) 100%);
| | .action-button:disabled { opacity:.5; cursor:not-allowed; } |
| border: 2px solid #fce7c8;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| position: relative; /* clip-path removed */
| |
| flex-shrink: 0;
| |
| }
| |
| | |
| .tier-number {
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 20px;
| |
| font-weight: 700;
| |
| color: white;
| |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
| |
| }
| |
| | |
| .journey-title { | |
| flex: 1;
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 14px;
| |
| font-weight: 700;
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| color: #fce7c8;
| |
| text-shadow: 0 0 15px rgba(252, 231, 200, 0.4);
| |
| line-height: 1.2;
| |
| }
| |
| | |
| .completion-status {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| font-size: 11px;
| |
| color: #E3BB7A;
| |
| font-weight: 600;
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| }
| |
| | |
| /* Description with accordion */
| |
| .journey-description {
| |
| padding: 9px;
| |
| background: rgba(0, 0, 2, 0.6);
| |
| border: 1px solid rgba(252, 231, 200, 0.2);
| |
| font-size: 11px;
| |
| line-height: 1.3;
| |
| color: #E0E0E0;
| |
| position: relative;
| |
| flex-shrink: 0;
| |
| max-height: none;
| |
| overflow: hidden;
| |
| transition: max-height 0.3s ease;
| |
| }
| |
| | |
| .journey-description.collapsed {
| |
| max-height: 42px;
| |
| }
| |
| | |
| .journey-description.expanded {
| |
| max-height: none;
| |
| }
| |
| | |
| .description-toggle {
| |
| position: absolute;
| |
| bottom: 2px;
| |
| right: 4px;
| |
| background: rgba(0, 0, 2, 0.9);
| |
| border: 1px solid rgba(252, 231, 200, 0.2);
| |
| color: #E3BB7A;
| |
| font-size: 10px;
| |
| padding: 2px 8px;
| |
| cursor: pointer;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.5px;
| |
| transition: all 0.3s ease;
| |
| }
| |
| | |
| .description-toggle:hover {
| |
| border-color: #fce7c8;
| |
| color: #fce7c8;
| |
| }
| |
| | |
| .journey-description::before {
| |
| content: '"';
| |
| position: absolute;
| |
| top: 5px;
| |
| left: 10px;
| |
| font-size: 30px;
| |
| color: #E3BB7A;
| |
| opacity: 0.3;
| |
| }
| |
| | |
| /* Rewards Section */
| |
| .journey-rewards {
| |
| background: linear-gradient(135deg, rgba(227, 187, 122, 0.1) 0%, rgba(252, 231, 200, 0.05) 100%);
| |
| border: 1px solid rgba(252, 231, 200, 0.2);
| |
| padding: 8px;
| |
| position: relative;
| |
| overflow: hidden;
| |
| flex-shrink: 0;
| |
| }
| |
| | |
| .journey-rewards::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 1px;
| |
| background: linear-gradient(90deg, transparent 0%, #E3BB7A 50%, transparent 100%);
| |
| }
| |
| | |
| .rewards-header {
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 11px;
| |
| text-transform: uppercase;
| |
| letter-spacing: 2px;
| |
| margin-bottom: 6px;
| |
| color: #E3BB7A;
| |
| font-weight: 700;
| |
| }
| |
| | |
| .rewards-content {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 12px;
| |
| }
| |
| | |
| .xp-icon {
| |
| background: linear-gradient(135deg, #E3BB7A 0%, #fce7c8 100%);
| |
| color: #0a0a0a;
| |
| padding: 5px 12px;
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-weight: 700;
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px; /* clip-path removed */
| |
| }
| |
| | |
| .xp-amount {
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 20px;
| |
| font-weight: 700;
| |
| color: #fce7c8;
| |
| text-shadow: 0 0 10px rgba(252, 231, 200, 0.5);
| |
| }
| |
| | |
| /* Objectives Section */
| |
| .journey-objectives {
| |
| background: rgba(0, 0, 2, 0.6);
| |
| border: 1px solid rgba(252, 231, 200, 0.2);
| |
| padding: 12px;
| |
| flex: 1 1 auto;
| |
| min-height: 100px;
| |
| overflow: hidden;
| |
| display: flex;
| |
| flex-direction: column;
| |
| }
| |
| | |
| .objectives-list { | |
| overflow-y: auto;
| |
| overflow-x: hidden;
| |
| padding-right: 10px;
| |
| padding-top: 8px;
| |
| flex: 1 1 auto;
| |
| min-height: 0;
| |
| }
| |
| | |
| .objectives-header {
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 11px;
| |
| text-transform: uppercase;
| |
| letter-spacing: 2px;
| |
| margin-bottom: 12px;
| |
| color: #E3BB7A;
| |
| font-weight: 700;
| |
| }
| |
| | |
| .objective-item {
| |
| margin-bottom: 15px;
| |
| padding-bottom: 15px;
| |
| border-bottom: 1px solid rgba(252, 231, 200, 0.1);
| |
| }
| |
| | |
| .objective-item:last-child {
| |
| margin-bottom: 0;
| |
| padding-bottom: 0;
| |
| border-bottom: none;
| |
| } | |
| | |
| .objective-header { | |
| display: flex;
| |
| align-items: center;
| |
| gap: 12px;
| |
| margin-bottom: 10px;
| |
| cursor: pointer;
| |
| transition: all 0.3s ease;
| |
| position: relative;
| |
| }
| |
| | |
| /* Accordion indicator */
| |
| .objective-header::after {
| |
| content: '▼';
| |
| position: absolute;
| |
| right: 40px;
| |
| font-size: 12px;
| |
| color: #E3BB7A;
| |
| transition: transform 0.3s ease;
| |
| }
| |
| | |
| .objective-item.collapsed .objective-header::after {
| |
| transform: rotate(-90deg);
| |
| }
| |
| | |
| .objective-header:hover {
| |
| color: #fce7c8;
| |
| }
| |
| | |
| .objective-header:hover::after {
| |
| color: #fce7c8;
| |
| }
| |
| | |
| .objective-icon {
| |
| width: 28px;
| |
| height: 28px;
| |
| background: linear-gradient(135deg, #a855f7 0%, rgba(168, 85, 247, 0.6) 100%);
| |
| border: 1px solid #fce7c8;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 14px;
| |
| font-weight: 700;
| |
| color: white; /* clip-path removed */
| |
| }
| |
| | |
| .objective-title {
| |
| flex: 1;
| |
| font-weight: 600;
| |
| color: #fce7c8;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.5px;
| |
| font-size: 14px;
| |
| padding-right: 50px;
| |
| }
| |
| | |
| .objective-progress {
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 12px;
| |
| color: #E3BB7A;
| |
| font-weight: 600;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 5px;
| |
| }
| |
| | |
| .objective-progress.completed {
| |
| color: #fce7c8;
| |
| }
| |
| | |
| .objective-progress.completed::after {
| |
| content: '✓';
| |
| font-size: 14px;
| |
| color: #fce7c8;
| |
| margin-left: 2px;
| |
| }
| |
| | |
| .objective-tasks {
| |
| margin-left: 40px;
| |
| max-height: 500px;
| |
| overflow: hidden;
| |
| transition: max-height 0.3s ease;
| |
| }
| |
| | |
| .objective-item.collapsed .objective-tasks {
| |
| max-height: 0;
| |
| }
| |
| | |
| .task-item {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 10px;
| |
| margin-bottom: 10px;
| |
| font-size: 13px;
| |
| color: #E0E0E0;
| |
| }
| |
| | |
| .task-checkbox {
| |
| width: 16px;
| |
| height: 16px;
| |
| border: 2px solid rgba(252, 231, 200, 0.2);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| transition: all 0.3s ease;
| |
| position: relative;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .task-checkbox::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: -1px;
| |
| right: -1px;
| |
| bottom: -1px;
| |
| left: -1px;
| |
| background: linear-gradient(45deg, transparent 30%, #fce7c8 50%, transparent 70%);
| |
| opacity: 0;
| |
| transition: opacity 0.3s ease;
| |
| }
| |
| | |
| .task-checkbox.completed {
| |
| background: #E3BB7A;
| |
| border-color: #fce7c8;
| |
| }
| |
| | |
| .task-checkbox.completed::after {
| |
| content: '✓';
| |
| color: #0a0a0a;
| |
| font-size: 12px;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .task-description {
| |
| flex: 1;
| |
| }
| |
| | |
| .task-qty {
| |
| color: #E3BB7A;
| |
| font-size: 12px;
| |
| font-weight: 600;
| |
| text-transform: uppercase;
| |
| }
| |
| | |
| /* Action Buttons */
| |
| .journey-actions {
| |
| display: flex;
| |
| gap: 10px;
| |
| flex-shrink: 0;
| |
| margin-top: 5px;
| |
| }
| |
| | |
| .action-button {
| |
| flex: 1;
| |
| padding: 10px 14px;
| |
| background: linear-gradient(135deg, rgba(0,0,2,.8) 0%, rgba(12,10,20,.8) 100%);
| |
| border: 2px solid rgba(252, 231, 200, 0.2);
| |
| color: #fce7c8;
| |
| font-family: 'Rajdhani', sans-serif;
| |
| font-size: 13px;
| |
| font-weight: 600;
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| cursor: pointer;
| |
| transition: all 0.3s ease;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 8px;
| |
| position: relative;
| |
| overflow: hidden;
| |
| } | |
| | |
| .action-button:disabled { | |
| opacity: 0.5;
| |
| cursor: not-allowed;
| |
| }
| |
| | |
| .action-button::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| left: -100%;
| |
| width: 100%;
| |
| height: 100%;
| |
| background: linear-gradient(90deg, transparent 0%, rgba(252, 231, 200, 0.2) 50%, transparent 100%);
| |
| transition: left 0.3s ease;
| |
| }
| |
| | |
| .action-button:not(:disabled):hover {
| |
| border-color: #fce7c8;
| |
| box-shadow:
| |
| 0 0 20px rgba(252, 231, 200, 0.2),
| |
| inset 0 0 20px rgba(252, 231, 200, 0.05);
| |
| }
| |
| | |
| .action-button:not(:disabled):hover::before {
| |
| left: 100%;
| |
| }
| |
| | |
| .button-icon {
| |
| font-size: 16px;
| |
| }
| |
| | |
| /* Popup Modal */
| |
| .journey-popup-overlay {
| |
| position: fixed;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| background: rgba(0, 0, 0, 0.8); /* backdrop-filter removed */
| |
| display: none;
| |
| align-items: center;
| |
| justify-content: center;
| |
| z-index: 10000;
| |
| }
| |
| | |
| .journey-popup-overlay.active {
| |
| display: flex;
| |
| }
| |
| | |
| .journey-popup {
| |
| background: linear-gradient(135deg, rgba(0,0,2,.98) 0%, rgba(12,10,20,.98) 100%);
| |
| border: 2px solid #fce7c8;
| |
| box-shadow: 0 10px 50px rgba(0,0,0,0.8);
| |
| padding: 0;
| |
| max-width: 90%;
| |
| max-height: 90vh;
| |
| position: relative;
| |
| display: flex;
| |
| flex-direction: column;
| |
| }
| |
| | |
| .popup-header {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| padding: 16px 20px;
| |
| background: rgba(0,0,2,.8);
| |
| border-bottom: 2px solid rgba(252, 231, 200, 0.2);
| |
| }
| |
| | |
| .popup-title {
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 18px;
| |
| font-weight: 700;
| |
| text-transform: uppercase;
| |
| letter-spacing: 2px;
| |
| color: #fce7c8;
| |
| }
| |
| | |
| .popup-close {
| |
| background: none;
| |
| border: 2px solid rgba(252, 231, 200, 0.2);
| |
| color: #fce7c8;
| |
| width: 36px;
| |
| height: 36px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| cursor: pointer;
| |
| font-size: 20px;
| |
| transition: all 0.3s ease;
| |
| }
| |
| | |
| .popup-close:hover {
| |
| border-color: #fce7c8;
| |
| background: rgba(252, 231, 200, 0.1);
| |
| }
| |
| | |
| .popup-content {
| |
| padding: 20px;
| |
| overflow-y: auto;
| |
| flex: 1;
| |
| }
| |
| | |
| /* Item list popup */
| |
| .journey-popup.items-popup {
| |
| width: 600px;
| |
| }
| |
| | |
| /* Materials progress */
| |
| .materials-progress {
| |
| background: linear-gradient(135deg, rgba(0,0,2,.8) 0%, rgba(12,10,20,.8) 100%);
| |
| border: 2px solid rgba(252, 231, 200, 0.2);
| |
| padding: 12px;
| |
| margin-bottom: 15px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| transition: all 0.3s ease;
| |
| }
| |
| | |
| .materials-progress.completed {
| |
| border-color: #fce7c8;
| |
| background: linear-gradient(135deg, rgba(227, 187, 122, 0.1) 0%, rgba(252, 231, 200, 0.05) 100%);
| |
| box-shadow: 0 0 20px rgba(252, 231, 200, 0.2);
| |
| }
| |
| | |
| .materials-progress-text {
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 13px;
| |
| font-weight: 600;
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| color: #E3BB7A;
| |
| transition: all 0.3s ease;
| |
| }
| |
| | |
| .materials-progress.completed .materials-progress-text {
| |
| color: #fce7c8;
| |
| }
| |
| | |
| .materials-progress-count {
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 16px;
| |
| font-weight: 700;
| |
| color: #fce7c8;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| }
| |
| | |
| .materials-progress.completed .materials-progress-count::after {
| |
| content: '✓';
| |
| font-size: 20px;
| |
| color: #fce7c8;
| |
| text-shadow: 0 0 10px rgba(252, 231, 200, 0.5);
| |
| animation: completionPulse 0.5s ease;
| |
| }
| |
| | |
| @keyframes completionPulse {
| |
| 0% { transform: scale(0.5); opacity: 0; }
| |
| 50% { transform: scale(1.2); }
| |
| 100% { transform: scale(1); opacity: 1; }
| |
| }
| |
| | |
| .materials-list {
| |
| display: grid;
| |
| gap: 12px;
| |
| position: relative;
| |
| }
| |
| | |
| .material-category {
| |
| background: rgba(252, 231, 200, 0.05);
| |
| border: 1px solid rgba(252, 231, 200, 0.2);
| |
| padding: 15px;
| |
| position: relative;
| |
| }
| |
| | |
| .material-category-title {
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 14px;
| |
| font-weight: 700;
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| color: #E3BB7A;
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| .material-item {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 12px;
| |
| padding: 8px 0;
| |
| border-bottom: 1px solid rgba(252, 231, 200, 0.1);
| |
| cursor: pointer;
| |
| transition: all 0.3s ease;
| |
| }
| |
| | |
| .material-item:hover {
| |
| background: rgba(252, 231, 200, 0.02);
| |
| }
| |
| | |
| .material-item:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .material-item.checked {
| |
| opacity: 0.6;
| |
| }
| |
| | |
| .material-item.checked .material-name {
| |
| text-decoration: line-through;
| |
| color: #E3BB7A;
| |
| }
| |
| | |
| .material-checkbox {
| |
| width: 18px;
| |
| height: 18px;
| |
| border: 2px solid rgba(252, 231, 200, 0.2);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| transition: all 0.3s ease;
| |
| position: relative;
| |
| flex-shrink: 0;
| |
| }
| |
| | |
| .material-checkbox::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: -1px;
| |
| right: -1px;
| |
| bottom: -1px;
| |
| left: -1px;
| |
| background: linear-gradient(45deg, transparent 30%, #fce7c8 50%, transparent 70%);
| |
| opacity: 0;
| |
| transition: opacity 0.3s ease;
| |
| }
| |
| | |
| .material-checkbox.completed {
| |
| background: #E3BB7A;
| |
| border-color: #fce7c8;
| |
| }
| |
| | |
| .material-checkbox.completed::after {
| |
| content: '✓';
| |
| color: #0a0a0a;
| |
| font-size: 12px;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .material-icon {
| |
| width: 32px;
| |
| height: 32px;
| |
| background: rgba(252, 231, 200, 0.1);
| |
| border: 1px solid rgba(252, 231, 200, 0.2);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-size: 16px;
| |
| }
| |
| | |
| .material-icon img {
| |
| width: 20px;
| |
| height: 20px;
| |
| }
| |
| | |
| .material-name {
| |
| flex: 1;
| |
| font-size: 14px;
| |
| color: #E0E0E0;
| |
| transition: all 0.3s ease;
| |
| }
| |
| | |
| .material-qty {
| |
| font-family: 'Orbitron', sans-serif;
| |
| font-size: 16px;
| |
| font-weight: 700;
| |
| color: #fce7c8;
| |
| }
| |
| | |
| /* Loading State */
| |
| .loading {
| |
| opacity: 0.5;
| |
| position: relative; /* pointer-events removed for MediaWiki */
| |
| }
| |
| | |
| | |
| .loading::after {
| |
| content: '';
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| width: 40px;
| |
| height: 40px;
| |
| border: 3px solid rgba(252, 231, 200, 0.2);
| |
| border-top-color: #fce7c8;
| |
| border-radius: 50%;
| |
| animation: loadingSpin 1s linear infinite;
| |
| }
| |
| | |
| @keyframes loadingSpin {
| |
| 0% { transform: translate(-50%, -50%) rotate(0deg); }
| |
| 100% { transform: translate(-50%, -50%) rotate(360deg); }
| |
| }
| |
| | |
| /* Responsive Design */
| |
| @media (max-width: 1200px) {
| |
| .journey-main-container {
| |
| flex-direction: column;
| |
| height: auto;
| |
| min-height: 900px;
| |
| }
| |
|
| |
| .journey-categories {
| |
| flex: 0 0 auto;
| |
| min-height: 300px;
| |
| max-height: 400px;
| |
| }
| |
|
| |
| .journey-details-panel {
| |
| flex: 1 1 auto;
| |
| min-height: 400px;
| |
| }
| |
|
| |
| .journey-grid {
| |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
| |
| }
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .journey-grid {
| |
| grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
| |
| }
| |
|
| |
| .journey-card-inner {
| |
| padding: 12px;
| |
| }
| |
|
| |
| .journey-icon {
| |
| width: 48px;
| |
| height: 48px;
| |
| font-size: 24px;
| |
| }
| |
|
| |
| .journey-name {
| |
| font-size: 12px;
| |
| }
| |
|
| |
| .journey-details-panel {
| |
| padding: 16px;
| |
| }
| |
| }
| |
| | |
| | |
| /* Updated styles for journey cards with background images */
| |
| | |
| /* Journey Card with Background Image */
| |
| .journey-card.has-background {
| |
| background-repeat: no-repeat;
| |
| background-size: cover;
| |
| background-position: center;
| |
| }
| |
| | |
| .journey-card.has-background::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| background: linear-gradient(to bottom,
| |
| rgba(0,0,0,0.3) 0%,
| |
| rgba(0,0,0,0.7) 70%,
| |
| rgba(0,0,0,0.9) 100%);
| |
| z-index: 1;
| |
| }
| |
| | |
| .journey-card.has-background .journey-card-inner {
| |
| position: relative;
| |
| z-index: 2;
| |
| }
| |
| | |
| .journey-card.has-background .journey-icon {
| |
| display: none;
| |
| }
| |
| | |
| .journey-card.has-background .journey-name {
| |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
| |
| font-weight: 700;
| |
| }
| |
| | |
| .journey-card.has-background .journey-tier {
| |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
| |
| }
| |
| | |
| /* Hide the background source helper */
| |
| .journey-bg-source {
| |
| display: none !important;
| |
| }
| |
| | |
| /* Ensure section icons display properly */
| |
| .section-icon {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
| | |
| .section-icon img {
| |
| vertical-align: middle;
| |
| width: 24px;
| |
| height: 24px;
| |
| }
| |
| | |
| /* Journey card background image support */
| |
| .journey-card.has-icon {
| |
| position: relative;
| |
| background-size: cover;
| |
| background-position: center;
| |
| background-repeat: no-repeat;
| |
| }
| |
| | |
| /* Dark overlay for better text readability on background images */
| |
| .journey-card.has-icon::after {
| |
| content: "";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| background: linear-gradient(to bottom,
| |
| rgba(0, 0, 0, 0.3) 0%,
| |
| rgba(0, 0, 0, 0.7) 50%,
| |
| rgba(0, 0, 0, 0.9) 100%);
| |
| z-index: 1;
| |
| }
| |
| | |
| /* Ensure content appears above overlay */
| |
| .journey-card.has-icon .journey-card-inner {
| |
| position: relative;
| |
| z-index: 2;
| |
| }
| |
| | |
| /* Hide the emoji icon when background image is present */
| |
| .journey-card.has-icon .journey-icon {
| |
| display: none;
| |
| }
| |
| | |
| /* Enhance text shadow for better readability */
| |
| .journey-card.has-icon .journey-name {
| |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
| |
| font-weight: 700;
| |
| }
| |
| | |
| .journey-card.has-icon .journey-tier {
| |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
| |
| }
| |
| | |
| /* Hide the MediaWiki file element */
| |
| .journey-bg-source {
| |
| display: none !important;
| |
| position: absolute;
| |
| left: -9999px;
| |
| }
| |
| | |
| /* Ensure the section icon doesn't overflow */
| |
| .section-icon {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-size: 24px;
| |
| width: 24px;
| |
| height: 24px;
| |
| }
| |
| | |
| /* Support for both .png and .jpg images */
| |
| .journey-card[data-icon$=".png"],
| |
| .journey-card[data-icon$=".jpg"],
| |
| .journey-card[data-icon$=".jpeg"] {
| |
| /* These will be handled by JavaScript */
| |
| }
| |
| | |
| /* Hover effect adjustment for cards with backgrounds */
| |
| .journey-card.has-icon:hover::after {
| |
| background: linear-gradient(to bottom,
| |
| rgba(0, 0, 0, 0.2) 0%,
| |
| rgba(0, 0, 0, 0.6) 50%,
| |
| rgba(0, 0, 0, 0.8) 100%);
| |
| }
| |
| | |
| | |
| /* Additional CSS for journey cards without icons */
| |
| | |
| /* Hide the journey-icon div completely when no background image */
| |
| .journey-card:not(.has-background) .journey-icon {
| |
| display: none;
| |
| }
| |
| | |
| /* Adjust padding when no icon */
| |
| .journey-card:not(.has-background) .journey-card-inner {
| |
| padding-top: 20px;
| |
| }
| |
| | |
| /* Center content better without icon */
| |
| .journey-card:not(.has-background) .journey-name {
| |
| margin-bottom: 8px;
| |
| }
| |
| | |
| /* Adjust section header spacing without icon */
| |
| .journey-section-header {
| |
| padding: 12px 0;
| |
| margin-top: 8px;
| |
| align-items: center;
| |
| }
| |
| | |
| /* Clean up the section title styling */
| |
| .section-title {
| |
| margin: 0;
| |
| padding-top: 8px;
| |
| line-height: 1;
| |
| | |
| }
| |
| | |
| /* 1. CONTAINER HEIGHT ADJUSTMENT */
| |
| .journey-main-container {
| |
| height: 840px; /* Increased by ~140px (one row) */
| |
| min-height: 740px;
| |
| }
| |
| | |
| /* 2. JOURNEY CARD OVERLAY EFFECT */
| |
| .journey-card .journey-card-inner {
| |
| justify-content: flex-end; /* Push content to bottom */
| |
| }
| |
| | |
| /* Dark gradient overlay at bottom of cards */
| |
| .journey-card .journey-card-inner::before {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: 0;
| |
| left: 0;
| |
| right: 0;
| |
| height: 55px; /* Fixed height overlay */
| |
| background: linear-gradient(to bottom,
| |
| rgba(0, 0, 0, 0) 0%,
| |
| rgba(0, 0, 0, 0.6) 15%,
| |
| rgba(0, 0, 0, 0.85) 50%,
| |
| rgba(0, 0, 0, 0.95) 100%);
| |
| z-index: 1;
| |
| }
| |
| | |
| /* Ensure text appears above overlay with strong contrast */
| |
| .journey-card .journey-name,
| |
| .journey-card .journey-tier {
| |
| position: relative;
| |
| z-index: 2;
| |
| }
| |
| | |
| .journey-card .journey-name {
| |
| font-size: 13px;
| |
| font-weight: 700;
| |
| color: #ffffff;
| |
| text-shadow:
| |
| 2px 2px 4px rgba(0, 0, 0, 1),
| |
| 0 0 8px rgba(0, 0, 0, 0.8);
| |
| }
| |
| | |
| .journey-card .journey-tier {
| |
| font-size: 12px;
| |
| font-weight: 600;
| |
| color: #fce7c8;
| |
| letter-spacing: 1.2px;
| |
| text-shadow:
| |
| 2px 2px 3px rgba(0, 0, 0, 1),
| |
| 0 0 6px rgba(0, 0, 0, 0.8);
| |
| }
| |
| | |
| /* 3. FIX TOP SPACING ISSUE */
| |
| #journeyDetailsPanel,
| |
| .journey-details-panel {
| |
| padding-top: 12px !important;
| |
| margin-top: 0 !important;
| |
| }
| |
| | |
| .journey-details-panel > *:first-child,
| |
| #journeyDetailsPanel > *:first-child {
| |
| margin-top: 0 !important;
| |
| padding-top: 0 !important;
| |
| }
| |
| | |
| .journey-details-header {
| |
| margin-top: 0 !important;
| |
| }
| |
| | |
| /* Remove spacing from any dynamic content wrappers */
| |
| .journey-details-panel .mw-parser-output {
| |
| margin-top: 0 !important;
| |
| padding-top: 0 !important;
| |
| }
| |
| | |
| /* 4. INCREASE FONT SIZES IN RIGHT PANEL */
| |
| .journey-title {
| |
| font-size: 16px;
| |
| letter-spacing: 1.5px;
| |
| }
| |
| | |
| .completion-status {
| |
| font-size: 12px;
| |
| }
| |
| | |
| .journey-description {
| |
| font-size: 13px;
| |
| line-height: 1.4;
| |
| padding: 10px;
| |
| }
| |
| | |
| .description-toggle {
| |
| font-size: 11px;
| |
| padding: 3px 10px;
| |
| }
| |
| | |
| .rewards-header,
| |
| .objectives-header {
| |
| font-size: 12px;
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| .xp-amount {
| |
| font-size: 22px;
| |
| }
| |
| | |
| .objective-title {
| |
| font-size: 15px;
| |
| }
| |
| | |
| .objective-progress {
| |
| font-size: 13px;
| |
| }
| |
| | |
| .objective-icon {
| |
| width: 30px;
| |
| height: 30px;
| |
| font-size: 16px;
| |
| }
| |
| | |
| .task-item {
| |
| font-size: 14px;
| |
| margin-bottom: 12px;
| |
| }
| |
| | |
| .task-checkbox {
| |
| width: 18px;
| |
| height: 18px;
| |
| }
| |
| | |
| .task-qty {
| |
| font-size: 13px;
| |
| }
| |
| | |
| .action-button {
| |
| font-size: 14px;
| |
| padding: 12px 16px;
| |
| }
| |
| | |
| .button-icon {
| |
| font-size: 18px;
| |
| }
| |
| | |
| /* 5. FIX OBJECTIVES SCROLLING */
| |
| .journey-objectives {
| |
| max-height: 530px;
| |
| flex: 1 1 auto;
| |
| display: flex;
| |
| flex-direction: column;
| |
| overflow: hidden;
| |
| }
| |
| | |
| /* Objectives list */
| |
| .objectives-list {
| |
| overflow-y: auto;
| |
| overflow-x: hidden;
| |
| padding-right: 10px;
| |
| flex: 1 1 auto;
| |
| min-height: 0;
| |
| }
| |
| | |
| | |
| | |
| /* 6. ENSURE PROPER PANEL LAYOUT */
| |
| .journey-details-panel {
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: 10px;
| |
| padding: 12px;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .journey-details-panel > * {
| |
| flex-shrink: 0;
| |
| margin: 0 0 10px 0;
| |
| }
| |
| | |
| .journey-details-panel > *:last-child {
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| .journey-details-panel .journey-objectives {
| |
| flex: 1 1 auto;
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| .journey-actions {
| |
| margin-top: auto;
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| /* 7. RESPONSIVE ADJUSTMENTS */
| |
| @media (max-width: 1200px) {
| |
| .journey-main-container {
| |
| height: auto;
| |
| min-height: 900px;
| |
| }
| |
| }
| |
| | |
| /* 8. SUBTLE IMPROVEMENTS */
| |
| /* Add animation when details load */
| |
| .journey-details-panel.active {
| |
| animation: fadeInDetails 0.3s ease;
| |
| }
| |
| | |
| @keyframes fadeInDetails {
| |
| from { opacity: 0.7; transform: translateY(5px); }
| |
| to { opacity: 1; transform: translateY(0); }
| |
| }
| |
| | |
| /* Better hover states */
| |
| .objective-header:hover {
| |
| background: rgba(252, 231, 200, 0.02);
| |
| margin-left: -8px;
| |
| margin-right: -8px;
| |
| padding-left: 8px;
| |
| padding-right: 8px;
| |
| }
| |
| | |
| | |
| | |
| | |
| .journey-actions {
| |
| display: flex; /* lay items out horizontally */
| |
| gap: 0.8rem; /* space between buttons */
| |
| }
| |
| | |
| .journey-actions .action-button {
| |
| display: inline-flex; /* keep icon + label together */
| |
| align-items: center;
| |
| }
| |
| | |
| /* ░░░ J O U R N E Y – F I N E - T U N I N G ░░░ */
| |
| | |
| /* 1 ▸ remove phantom top-gap that appears above header */
| |
| .journey-details-panel,
| |
| #journeyDetailsPanel { /* hard-stop any residual padding */
| |
| padding-top: 4px !important;
| |
| }
| |
| .journey-details-panel > p:first-child { /* MW sometimes injects a <p> */
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| }
| |
| | |
| /* 2 ▸ Reward section breathing-room */
| |
| .journey-rewards { /* was 8 px; now 13 px */
| |
| padding-top: 13px !important;
| |
| }
| |
| | |
| /* 3 ▸ Objectives section breathing-room */
| |
| .journey-objectives { /* was 12 px; now 17 px */
| |
| padding-top: 17px !important;
| |
| }
| |
| | |
| /* 4 ▸ Action buttons – align + balance */
| |
| .journey-actions {
| |
| justify-content: center; /* centre the pair */
| |
| gap: 1.2rem; /* a bit more spacing */
| |
| }
| |
| .journey-actions .action-button {
| |
| flex: 0 0 auto; /* natural width instead of 50 % */
| |
| min-width: 160px; /* gives them identical size */
| |
| } | |
|
| |
|
| /* (optional) make the icons breathe */ | | /* popup overlay */ |
| .button-icon { margin-right: .25rem; }
| |
