MediaWiki:PartiesEXP.css: Difference between revisions

Latest revision as of 08:32, 2 January 2026

body { background: var(--bg); }

/* Overview left column only (preserva Quick Access) */
#tab-overview .guide-content {
  display: grid;
  grid-template-columns: minmax(300px, 1.25fr) minmax(260px, .75fr);
  gap: 16px;
}

#tab-overview .guide-content > div { background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }

#tab-overview .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#tab-overview .feature-list li { position: relative; padding-left: 26px; margin: 8px 0; color: var(--text); }

#tab-overview .feature-list li::before { content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 8px; border-radius: 999px; background: var(--primary); }

#tab-overview .info-box,
#tab-overview .tip-box { border-radius: 12px; border: 1px solid var(--border); background: var(--bg-1); color: var(--text); }

/* Join: timeline cards com números grandes */
#tab-join .guide-content {
  display: grid;
  grid-template-columns: minmax(300px, 1.2fr) minmax(280px, .8fr);
  gap: 16px;
}

#tab-join .feature-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

#tab-join .feature-list li { position: relative; padding-left: 56px; margin: 14px 0; color: var(--text); }

#tab-join .feature-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 12px; background: var(--primary); color: var(--text-strong); display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 3px 8px var(--shadow-soft); }

#tab-join .file-figure { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

#tab-join .file-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Types: chips roláveis e cartões de tipo */
#tab-types .guide-content {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(240px, .8fr);
  gap: 14px;
}

#tab-types .point-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#tab-types .point-list li {
  position: relative;
  padding-left: 24px;
  margin: 8px 0;
}

#tab-types .point-list li::before { content: ""; position: absolute; left: 6px; top: 8px; width: 10px; height: 10px; border-radius: 2px; background: var(--primary); }

#tab-types .boost-row {
  margin-top: 8px;
}

#tab-types .file-figure {
  border: 1px solid #dbe0ff;
  border-radius: 12px;
  overflow: hidden;
}

/* Settings: preserva colapsáveis, estiliza cartões */
#tab-settings .settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
  align-items: start;
}

#tab-settings .setting-card { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-1); padding: 12px; display: flex; flex-direction: column; height: 100%; }

/* Manage: mosaico de ações */
#tab-manage .action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

#tab-manage .action-card { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-1); padding: 12px; }


#tab-manage .file-figure {
  border: 1px solid #dbe0ff;
  border-radius: 12px;
  overflow: hidden;
}

/* Elementos genéricos */
.info-inline {
  margin: 10px 0;
}

.file-figure img {
  display: block;
  width: 100%;
  height: auto;
}





/* Badges (copiado de PartiesEXP.css) */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.badge-chip {
  background: linear-gradient(135deg, #f6f9ff, #eef4ff);
  border: 1px solid #ccd8ff;
  color: #2048b0;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

#type-normal .badge-chip {
  background: linear-gradient(135deg, #f7f7f7, #ededed);
  border-color: #eaeaea;
  color: #333;
}

#type-beginner .badge-chip {
  background: linear-gradient(135deg, #eaf6ff, #d6ecff);
  border-color: #cfe8ff;
  color: #1e5d8f;
}

#type-type .badge-chip {
  background: linear-gradient(135deg, #f2ffe8, #dff6c7);
  border-color: #d9f1c7;
  color: #2e5a12;
}

#type-royal .badge-chip {
  background: linear-gradient(135deg, #fff0f7, #ffd3e3);
  border-color: #ffd3e3;
  color: #7a224a;
}

#type-special .badge-chip {
  background: linear-gradient(135deg, #f5f0ff, #e4d7ff);
  border-color: #dcd0ff;
  color: #4a2f8a;
}

#type-fixed .badge-chip {
  background: linear-gradient(135deg, #ffe9e9, #ffd5d5);
  border-color: #f3caca;
  color: #7c1f1f;
}

#type-normal .badge-chip::before {
  content: "•";
  margin-right: 6px;
}

#type-beginner .badge-chip::before {
  content: "🌱";
  margin-right: 6px;
}

#type-type .badge-chip::before {
  content: "🧩";
  margin-right: 6px;
}

#type-royal .badge-chip::before {
  content: "👑";
  margin-right: 6px;
}

#type-special 
.badge-chip::before {
  content: "✨";
  margin-right: 6px;
}

#type-fixed .badge-chip::before {
  content: "🔒";
  margin-right: 6px;
}


/* Multipliers (copiado de PartiesEXP.css) */
.mult-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.mult-card {
  background: #fff;
  border: 1px solid #e6e6f0;
  border-radius: 12px;
  padding: 12px;
}

.mult-card::before {
  content: "";
  display: block;
  height: 4px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, #ff6b9d, #ffc3e0);
}

.mult-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.member-count {
  font-weight: 700;
  color: #333;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.chip {
  background: #f7f9ff;
  border: 1px solid #e1e8ff;
  color: #2d3d70;
  border-radius: 14px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.chip span {
  font-weight: 500;
  color: #445;
}

.chip.none {
  background: #fff3f3;
  border-color: #ffd3d3;
  color: #a33;
}

.chip-normal {
  background: linear-gradient(135deg, #f7f7f7, #ededed);
  border-color: #eaeaea;
  color: #444;
}

.chip-beginner {
  background: linear-gradient(135deg, #eaf6ff, #d6ecff);
  border-color: #cfe8ff;
  color: #1e5d8f;
}

.chip-type {
  background: linear-gradient(135deg, #f2ffe8, #dff6c7);
  border-color: #d9f1c7;
  color: #3f6b16;
}

.chip-royal {
  background: linear-gradient(135deg, #fff0f7, #ffd3e3);
  border-color: #ffd3e3;
  color: #9b2b5c;
}

.chip-special {
  background: linear-gradient(135deg, #f5f0ff, #e4d7ff);
  border-color: #e4d7ff;
  color: #5b3aa8;
}

.chip-fixed {
  background: linear-gradient(135deg, #ffe9e9, #ffd5d5);
  border-color: #f3caca;
  color: #a13838;
}

.chip-normal::before {
  content: "•";
  margin-right: 6px;
}

.chip-beginner::before {
  content: "🌱";
  margin-right: 6px;
}

.chip-type::before {
  content: "🧩";
  margin-right: 6px;
}

.chip-royal::before {
  content: "👑";
  margin-right: 6px;
}

.chip-special::before {
  content: "✨";
  margin-right: 6px;
}

.chip-fixed::before {
  content: "🔒";
  margin-right: 6px;
}


.mode-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin-top:8px}
.mode-detail{background:#fafbff;border:1px solid #e6eaf7;border-radius:12px;overflow:hidden}
.mode-detail>summary{cursor:pointer;padding:8px 12px;font-weight:800;color:#2048b0;background:linear-gradient(135deg,#f6f9ff,#eef4ff)}
.mode-detail>p{padding:8px 12px;margin:0;color:#444}