MediaWiki:PartySimulator.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.

.sim-layout {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:18px;
}

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

.sim-row {
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}

.sim-row label {
  font-weight:800;
  color:#334;
}

.sim-card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}

.sim-card {
  background:#f7f9ff;
  border:1px solid #e1e8ff;
  border-radius:12px;
  padding:10px;
  display:grid;
  gap:8px;
}

.sim-card-header {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}

.sim-card-title {
  font-weight:800;
  color:#223;
}

.sim-select {
  width:100%;
  border:1px solid #e1e8ff;
  border-radius:8px;
  padding:8px;
  background:#fff;
}

.sim-input {
  width:100%;
  border:1px solid #e1e8ff;
  border-radius:8px;
  padding:8px;
  background:#fff;
}

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

.sim-type-box h3 {
  margin:0 0 8px 0;
}

.sim-chip-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.sim-chip {
  background:#fff7fb;
  border:1px solid #ffd3e3;
  color:#9b2b5c;
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
}

.sim-rules {
  margin-top:12px;
  display:grid;
  gap:6px;
}

.sim-rule {
  background:#f6f9ff;
  border:1px solid #dbe0ff;
  border-radius:10px;
  padding:8px 10px;
  color:#334;
}

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

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

html[data-theme="dark"] .sim-select,
html[data-theme="dark"] .sim-input {
  background:#0f1625;
  border-color:rgba(159,208,255,.25);
  color:#cfe6ff;
}

html[data-theme="dark"] .sim-row label {
  color:#cfe6ff;
}

html[data-theme="dark"] .sim-card-title {
  color:#cfe6ff;
}

html[data-theme="dark"] .sim-summary h3 {
  color:#cfe6ff;
}

html[data-theme="dark"] .sim-chip {
  background:linear-gradient(135deg,#274c77,#1b2b41);
  border-color:rgba(159,208,255,.35);
  color:#fff;
}

html[data-theme="dark"] .sim-rule {
  background:linear-gradient(135deg,#172235,#101827);
  border-color:rgba(159,208,255,.25);
  color:#cfe6ff;
}

.sim-card .image-container {
  max-width:64px !important;
}

.sim-type-box .image-container {
  max-width:160px !important;
}

.sim-actions {
  display:flex;
  gap:8px;
}

.sim-button {
  background:#f6f9ff;
  border:1px solid #dbe0ff;
  color:#223;
  border-radius:8px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
}

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

/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 768px) {
  .sim-layout {
    grid-template-columns: 1fr;
  }
  
  .sim-row {
    grid-template-columns: 1fr; /* Stack label, input, value */
    gap: 4px;
  }
  
  .sim-row label {
    margin-bottom: 2px;
  }
  
  .sim-card-grid {
    grid-template-columns: 1fr;
  }
  
  .sim-actions {
    flex-direction: column;
  }
  
  .sim-button {
    width: 100%;
    text-align: center;
  }
}