MediaWiki:PartySimulator.css: Difference between revisions

From CoraTO Wiki - Official Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 6: Line 6:


.sim-controls {
.sim-controls {
   background:#fff;
   background: var(--bg-1);
   border:1px solid #e6e6f0;
   border:1px solid var(--border);
   border-radius:12px;
   border-radius:12px;
   padding:12px;
   padding:12px;
Line 32: Line 32:


.sim-card {
.sim-card {
   background:#f7f9ff;
   background: var(--bg-1);
   border:1px solid #e1e8ff;
   border:1px solid var(--border);
   border-radius:12px;
   border-radius:12px;
   padding:10px;
   padding:10px;
Line 49: Line 49:
.sim-card-title {
.sim-card-title {
   font-weight:800;
   font-weight:800;
   color:#223;
   color: var(--heading);
}
}


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


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


.sim-summary {
.sim-summary {
   background:#fff;
   background: var(--bg-1);
   border:1px solid #e6e6f0;
   border:1px solid var(--border);
   border-radius:12px;
   border-radius:12px;
   padding:12px;
   padding:12px;
Line 86: Line 86:


.sim-chip {
.sim-chip {
   background:#fff7fb;
   background: var(--bg-1);
   border:1px solid #ffd3e3;
   border:1px solid var(--border);
   color:#9b2b5c;
   color: var(--text);
   border-radius:999px;
   border-radius:999px;
   padding:8px 12px;
   padding:8px 12px;
Line 101: Line 101:


.sim-rule {
.sim-rule {
   background:#f6f9ff;
   background: var(--bg-1);
   border:1px solid #dbe0ff;
   border:1px solid var(--border);
   border-radius:10px;
   border-radius:10px;
   padding:8px 10px;
   padding:8px 10px;
   color:#334;
   color: var(--text);
}
 
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;
}
}


Line 165: Line 122:


.sim-button {
.sim-button {
   background:#f6f9ff;
   background: var(--bg-1);
   border:1px solid #dbe0ff;
   border:1px solid var(--border);
   color:#223;
   color: var(--text);
   border-radius:8px;
   border-radius:8px;
   padding:8px 12px;
   padding:8px 12px;
   font-weight:800;
   font-weight:800;
   cursor:pointer;
   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;
  }
}
}

Latest revision as of 08:33, 2 January 2026

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

.sim-controls {
  background: var(--bg-1);
  border:1px solid var(--border);
  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: var(--bg-1);
  border:1px solid var(--border);
  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: var(--heading);
}

.sim-select {
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px;
  background: var(--surface);
}

.sim-input {
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px;
  background: var(--surface);
}

.sim-summary {
  background: var(--bg-1);
  border:1px solid var(--border);
  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: var(--bg-1);
  border:1px solid var(--border);
  color: var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
}

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

.sim-rule {
  background: var(--bg-1);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  color: var(--text);
}

.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: var(--bg-1);
  border:1px solid var(--border);
  color: var(--text);
  border-radius:8px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
}