MediaWiki:PartiesEXP.css: Difference between revisions

Revision as of 14:27, 12 December 2025

body {
  background: #0f1625;
}

html[data-theme="dark"] body {
  background: #0a0f1a;
}

/* 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: linear-gradient(135deg, rgba(91, 140, 255, .06), rgba(255, 107, 157, .06));
  border: 1px solid #dbe0ff;
  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: #1e293b;
}

#tab-overview .feature-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5b8cff, #ff6b9d);
}

#tab-overview .info-box,
#tab-overview .tip-box {
  border-radius: 12px;
  border: 1px solid #dbe0ff;
  background: rgba(255, 255, 255, .55);
  color: #1e293b;
}

html[data-theme="dark"] #tab-overview .info-box,
html[data-theme="dark"] #tab-overview .tip-box {
  background: rgba(15, 23, 42, .45);
  color: #e5f0ff;
  border-color: rgba(159, 208, 255, .22);
}

/* 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: #1e293b;
}

#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: linear-gradient(135deg, #5b8cff, #ff6b9d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(91, 140, 255, .25);
}

#tab-join .file-figure {
  border: 1px solid #dbe0ff;
  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: linear-gradient(135deg, #5b8cff, #ff6b9d);
}

#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 #dbe0ff;
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  padding: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

html[data-theme="dark"] #tab-settings .setting-card {
  background: rgba(15, 23, 42, .55);
}

#tab-settings .mode-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tab-settings .mode-detail {
  border: 1px solid #dbe0ff;
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#tab-settings .mode-detail[open] {
  border-color: #5b8cff;
  box-shadow: 0 4px 12px rgba(91, 140, 255, .15);
  background: linear-gradient(135deg, rgba(91, 140, 255, .08), rgba(255, 107, 157, .08));
}

#tab-settings .mode-detail summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 800;
  color: #1e293b;
  position: relative;
}

#tab-settings .mode-detail summary::after {
  content: '▸';
  color: #5b8cff;
  font-weight: 800;
  transition: transform .2s ease, color .2s ease;
}

#tab-settings .mode-detail[open] summary::after {
  content: '▾';
  transform: rotate(0deg);
  color: #ff6b9d;
}

#tab-settings .mode-detail summary:hover {
  background: linear-gradient(135deg, rgba(91, 140, 255, .12), rgba(255, 107, 157, .12));
}

#tab-settings .mode-detail summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 140, 255, .35);
  border-radius: 10px;
}

#tab-settings .mode-detail > *:not(summary) {
  padding: 12px 14px;
  color: #1e293b;
}

html[data-theme="dark"] #tab-settings .mode-detail {
  border-color: rgba(159, 208, 255, .22);
  background: rgba(15, 23, 42, .55);
}

html[data-theme="dark"] #tab-settings .mode-detail[open] {
  border-color: rgba(159, 208, 255, .35);
  box-shadow: 0 4px 12px rgba(159, 208, 255, .15);
  background: linear-gradient(135deg, rgba(61, 97, 146, .22), rgba(61, 97, 146, .28));
}

html[data-theme="dark"] #tab-settings .mode-detail summary {
  color: #e5f0ff;
}

html[data-theme="dark"] #tab-settings .mode-detail summary::after {
  color: #9fd0ff;
}

html[data-theme="dark"] #tab-settings .mode-detail[open] summary::after {
  color: #ff9dc0;
}

html[data-theme="dark"] #tab-settings .mode-detail > *:not(summary) {
  color: #e5f0ff;
}

/* 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 #dbe0ff;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(91, 140, 255, .06), rgba(255, 107, 157, .06));
  padding: 12px;
}

html[data-theme="dark"] #tab-overview .feature-list li {
  color: #e5f0ff;
}

html[data-theme="dark"] #tab-join .feature-list li {
  color: #e5f0ff;
}

html[data-theme="dark"] #tab-types .nested-tab {
  color: #e5f0ff;
  border-color: rgba(159, 208, 255, .22);
}

html[data-theme="dark"] #tab-overview .guide-content > div,
html[data-theme="dark"] #tab-join .file-figure,
html[data-theme="dark"] #tab-types .nested-content,
html[data-theme="dark"] #tab-types .file-figure,
html[data-theme="dark"] #tab-settings .setting-card,
html[data-theme="dark"] #tab-manage .action-card,
html[data-theme="dark"] #tab-manage .file-figure {
  border-color: rgba(159, 208, 255, .22);
}

#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;
}

html[data-theme="dark"] .badge-chip {
  background: linear-gradient(135deg, rgba(30, 38, 55, .85), rgba(30, 38, 55, .92));
  border-color: rgba(159, 208, 255, .18);
  color: #cfe6ff;
}

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

html[data-theme="dark"] .mult-card {
  background: #141c2a;
  border-color: rgba(159, 208, 255, .18);
}

html[data-theme="dark"] .mult-card::before {
  background: linear-gradient(135deg, #274c77, #1b2b41);
}

html[data-theme="dark"] .member-count {
  color: #cfe6ff;
}

html[data-theme="dark"] .chip {
  background: linear-gradient(135deg, rgba(61, 97, 146, .22), rgba(61, 97, 146, .28));
  border-color: rgba(159, 208, 255, .18);
  color: #cfe6ff;
}

html[data-theme="dark"] .chip span {
  color: #cfe6ff;
}

html[data-theme="dark"] .chip.none {
  background: rgba(140, 31, 31, .2);
  border-color: rgba(255, 127, 127, .35);
  color: #ffb0b0;
}

html[data-theme="dark"] .chip-normal {
  background: linear-gradient(135deg, #2a2f3a, #323a4a);
  border-color: rgba(180, 190, 210, .18);
  color: #e5eaff;
}

html[data-theme="dark"] .chip-beginner {
  background: linear-gradient(135deg, #143a5a, #1a4a72);
  border-color: rgba(64, 140, 200, .35);
  color: #d9efff;
}

html[data-theme="dark"] .chip-type {
  background: linear-gradient(135deg, #184a1b, #23622a);
  border-color: rgba(80, 170, 110, .35);
  color: #e6ffe9;
}

html[data-theme="dark"] .chip-royal {
  background: linear-gradient(135deg, #5a213f, #702b52);
  border-color: rgba(210, 120, 150, .35);
  color: #ffdbe6;
}

html[data-theme="dark"] .chip-special {
  background: linear-gradient(135deg, #2e255f, #3a2f7f);
  border-color: rgba(150, 120, 230, .35);
  color: #efe6ff;
}

html[data-theme="dark"] .chip-fixed {
  background: linear-gradient(135deg, #4a1f1f, #5a2b2b);
  border-color: rgba(255, 127, 127, .35);
  color: #ffb0b0;
}