MediaWiki:PartyQuest.css: Difference between revisions

From CoraTO Wiki - Official Wiki
Jump to navigation Jump to search
Created page with "→PartyQuest styles: specific and scoped for Party Quest cards: .token-card .partyquest-tabs { display: flex; gap: 8px; margin: 12px 0 16px; list-style: none; padding: 0; } .token-card .partyquest-tabs .nested-tab { appearance: none; border: 1px solid #d0d7de; background: #f6f8fa; color: #24292f; font-weight: 600; padding: 6px 10px; border-radius: 6px; cursor: pointer; } .token-card .partyquest-tabs .nested-tab.active { background: #eaee..."
 
No edit summary
 
Line 9: Line 9:
}
}


.token-card .partyquest-tabs .nested-tab {
  appearance: none;
  border: 1px solid #d0d7de;
  background: #f6f8fa;
  color: #24292f;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.token-card .partyquest-tabs .nested-tab.active {
  background: #eaeef2;
  border-color: #afb8c1;
}


.token-card .partyquest-info-grid {
.token-card .partyquest-info-grid {
Line 32: Line 17:


.token-card .partyquest-info-card {
.token-card .partyquest-info-card {
   background: linear-gradient(135deg, #fff5f8, #ffeef3);
   background: var(--bg-1);
   border: 1px solid rgba(255, 107, 157, 0.2);
   border: 1px solid var(--border);
   border-radius: 12px;
   border-radius: 12px;
   box-shadow: 0 6px 24px rgba(255, 79, 145, 0.14);
   box-shadow: 0 6px 24px var(--shadow-soft);
   padding: 12px;
   padding: 12px;
}
}
Line 56: Line 41:


.token-card .partyquest-card-header h4 a {
.token-card .partyquest-card-header h4 a {
   color: #0f172a;
   color: var(--link);
   text-decoration: none;
   text-decoration: none;
}
}
Line 70: Line 55:
   font-size: 12px;
   font-size: 12px;
   font-weight: 700;
   font-weight: 700;
   background: linear-gradient(135deg, #fff5f8, #ffeef3);
   background: var(--bg-1);
   color: #2d2d2d;
   color: var(--heading);
   border: 1px solid rgba(255, 107, 157, 0.2);
   border: 1px solid var(--border);
   padding: 3px 8px;
   padding: 3px 8px;
   border-radius: 999px;
   border-radius: 999px;
Line 89: Line 74:
   gap: 8px;
   gap: 8px;
   padding: 10px 12px;
   padding: 10px 12px;
   border: 1px solid rgba(255, 107, 157, 0.2);
   border: 1px solid var(--border);
   border-radius: 12px;
   border-radius: 12px;
   background: linear-gradient(135deg, #fff5f8, #ffeef3);
   background: var(--bg-1);
}
}


.token-card .partyquest-stat-label {
.token-card .partyquest-stat-label {
   font-weight: 700;
   font-weight: 700;
   color: #2d2d2d;
   color: var(--heading);
}
}


.token-card .partyquest-stat-value {
.token-card .partyquest-stat-value {
   color: #666666;
   color: var(--text-muted);
}
}


/* Light theme accents for special rows */
/* Light theme accents for special rows */
.token-card .partyquest-stat-info.partyquest-reward {
.token-card .partyquest-stat-info.partyquest-reward {
   background: linear-gradient(135deg, #eff6ff, #dbeafe);
   background: var(--bg-1);
   border: 1px solid #0ea5e9;
   border: 1px solid var(--border);
}
}
.token-card .partyquest-stat-info.partyquest-condition {
.token-card .partyquest-stat-info.partyquest-condition {
   background: linear-gradient(135deg, #fff1f2, #fee2e2);
   background: var(--negative-bg);
   border: 1px solid #ef4444;
   border: 1px solid var(--danger);
}
}


Line 133: Line 118:
   }
   }
}
}
/* Dark theme variant (follow ChaosTokens.css pattern) */
html[data-theme="dark"] .token-card .partyquest-info-card {
  background: rgba(8, 13, 22, 0.85);
  border-color: #1f2937;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
html[data-theme="dark"] .token-card .partyquest-card-header h4 a { color: #f1f5f9 }
html[data-theme="dark"] .token-card .partyquest-level-badge { background: #0b1220; color: #e2e8f0; border-color: #1f2937 }
html[data-theme="dark"] .token-card .partyquest-stat-info { border-color: #1f2937; background: rgba(14, 22, 37, 0.7) }
html[data-theme="dark"] .token-card .partyquest-stat-label { color: #94a3b8 }
html[data-theme="dark"] .token-card .partyquest-stat-value { color: #e5e7eb; font-weight: 700 }
html[data-theme="dark"] .token-card .partyquest-stat-info.partyquest-reward { background: linear-gradient(180deg, rgba(19, 28, 45, 0.9), rgba(16, 24, 39, 0.9)); border: 1px solid #0ea5e9 }
html[data-theme="dark"] .token-card .partyquest-stat-info.partyquest-condition { background: linear-gradient(180deg, rgba(36, 5, 5, 0.9), rgba(27, 3, 3, 0.9)); border: 1px solid #ef4444 }


/* Nested content visibility (leverages existing JS) */
/* Nested content visibility (leverages existing JS) */

Latest revision as of 08:33, 2 January 2026

/* PartyQuest styles: specific and scoped for Party Quest cards */

.token-card .partyquest-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
  list-style: none;
  padding: 0;
}


.token-card .partyquest-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.token-card .partyquest-info-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 24px var(--shadow-soft);
  padding: 12px;
}

.token-card .partyquest-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.token-card .partyquest-card-header h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  margin: 0;
}

.token-card .partyquest-card-header h4 a {
  color: var(--link);
  text-decoration: none;
}

.token-card .partyquest-monster-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.token-card .partyquest-level-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-1);
  color: var(--heading);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 999px;
}

.token-card .partyquest-stats-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.token-card .partyquest-stat-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-1);
}

.token-card .partyquest-stat-label {
  font-weight: 700;
  color: var(--heading);
}

.token-card .partyquest-stat-value {
  color: var(--text-muted);
}

/* Light theme accents for special rows */
.token-card .partyquest-stat-info.partyquest-reward {
  background: var(--bg-1);
  border: 1px solid var(--border);
}
.token-card .partyquest-stat-info.partyquest-condition {
  background: var(--negative-bg);
  border: 1px solid var(--danger);
}

/* Header image sizing to prevent overflow */
#tab-party .token-card .token-card-header .image-container {
  flex: 0 0 auto;
}
#tab-party .token-card .token-card-header .image-container img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  max-width: 100%;
}

@media (max-width: 480px) {
  #tab-party .token-card .token-card-header {
    flex-wrap: wrap;
  }
  #tab-party .token-card .token-card-header .image-container img {
    width: 56px;
    height: 56px;
  }
}

/* Nested content visibility (leverages existing JS) */
.token-card .nested-content {
  display: none;
}
.token-card .nested-content.active {
  display: block;
}
Retrieved from "https://mewsie.world/CoraTOWiki/index.php?title=MediaWiki:PartyQuest.css&oldid=6670"