MediaWiki:PartyQuest.css

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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* 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: #eaeef2;
  border-color: #afb8c1;
}

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

.token-card .partyquest-info-card {
  background: linear-gradient(135deg, #fff5f8, #ffeef3);
  border: 1px solid rgba(255, 107, 157, 0.2);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(255, 79, 145, 0.14);
  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: #0f172a;
  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: linear-gradient(135deg, #fff5f8, #ffeef3);
  color: #2d2d2d;
  border: 1px solid rgba(255, 107, 157, 0.2);
  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 rgba(255, 107, 157, 0.2);
  border-radius: 12px;
  background: linear-gradient(135deg, #fff5f8, #ffeef3);
}

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

.token-card .partyquest-stat-value {
  color: #666666;
}

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

/* 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;
  }
}

/* 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) */
.token-card .nested-content {
  display: none;
}
.token-card .nested-content.active {
  display: block;
}