shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve chance simulator forecasts and tracking UI
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-07 16:03:35 +02:00
parent 1d278ff551
commit 6e64cfacd5
10 changed files with 534 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

87
website/src/styles/toolboxes/_rng-simulator.scss
View file

@ -179,11 +179,29 @@
text-align: center;
}
.rng-simulator-history-score small,
.rng-simulator-history-rate small {
overflow: hidden;
color: var(--color-text-primary);
font-size: var(--font-size-xs);
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.rng-simulator-active-summary small,
.rng-simulator-table > span:nth-child(-n + 3),
.rng-simulator-table-heading {
overflow: hidden;
color: var(--color-text-primary);
font-size: var(--font-size-xs);
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.rng-simulator-history-metrics small {
overflow: hidden;
color: var(--color-text-secondary);
color: var(--color-accent-gold);
font-size: var(--font-size-xs);
font-weight: 800;
text-overflow: ellipsis;
@ -191,7 +209,7 @@
}
.rng-simulator-stat span {
color: var(--color-text-secondary);
color: var(--color-accent-gold);
font-size: var(--font-size-xs);
font-weight: 800;
line-height: 1.25;
@ -203,11 +221,19 @@
.rng-simulator-history-row b,
.rng-simulator-history-rate > span,
.rng-simulator-history-metrics b {
color: var(--color-accent-gold);
color: var(--color-text-primary);
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.rng-simulator-history-rate > span {
color: var(--color-accent-gold);
}
.rng-simulator-table .rng-simulator-chance-value {
color: var(--color-accent-gold);
}
.rng-simulator-active-summary strong {
color: var(--color-accent-gold);
font-size: 24px;
@ -222,7 +248,7 @@
display: grid;
gap: 6px;
min-width: 0;
color: var(--color-text-secondary);
color: var(--color-accent-gold);
font-size: var(--font-size-xs);
font-weight: 800;
}
@ -316,7 +342,7 @@
}
.rng-simulator-percent-input > span {
color: var(--color-text-secondary);
color: var(--color-accent-gold);
font-size: var(--font-size-xs);
font-weight: 900;
}
@ -331,14 +357,28 @@
.rng-simulator-time-results {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.rng-simulator-stat-grid,
.rng-simulator-duration-grid,
.rng-simulator-tracking-grid {
display: grid;
gap: 8px;
}
.rng-simulator-stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.rng-simulator-duration-grid,
.rng-simulator-tracking-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rng-simulator-tracking-control {
max-width: 360px;
}
.rng-simulator-stat strong {
@ -347,6 +387,14 @@
font-size: var(--font-size-sm);
}
.rng-simulator-stat[data-tone="positive"] strong {
color: var(--color-accent-cyan);
}
.rng-simulator-stat[data-tone="negative"] strong {
color: #fca5a5;
}
.rng-simulator-table {
display: grid;
align-items: center;
@ -374,6 +422,10 @@
grid-template-columns: minmax(88px, 0.6fr) minmax(140px, 1fr) minmax(120px, 1fr);
}
.rng-simulator-tracking-target-table {
grid-template-columns: minmax(88px, 0.55fr) minmax(120px, 0.8fr) minmax(140px, 1fr) minmax(120px, 1fr);
}
.rng-simulator-simulation-overview {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@ -478,6 +530,18 @@
line-height: 1;
}
.rng-simulator-history-identity[data-tone="positive"] small,
.rng-simulator-history-metrics > span[data-tone="positive"] b,
.rng-simulator-history-score[data-tone="positive"] b {
color: var(--color-accent-cyan);
}
.rng-simulator-history-identity[data-tone="negative"] small,
.rng-simulator-history-metrics > span[data-tone="negative"] b,
.rng-simulator-history-score[data-tone="negative"] b {
color: #fca5a5;
}
.rng-simulator-history-rate {
display: grid;
gap: 2px;
@ -513,10 +577,13 @@
.rng-simulator-active-summary,
.rng-simulator-primary-controls,
.rng-simulator-stat-grid,
.rng-simulator-duration-grid,
.rng-simulator-tracking-grid,
.rng-simulator-simulation-summary,
.rng-simulator-occurrence-control,
.rng-simulator-time-results,
.rng-simulator-target-table {
.rng-simulator-target-table,
.rng-simulator-tracking-target-table {
grid-template-columns: 1fr;
}