Refine RNG simulator layout and simulation stats
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
This commit is contained in:
parent
055fb78d60
commit
f8231c748f
11 changed files with 825 additions and 394 deletions
|
|
@ -1,26 +1,18 @@
|
|||
// Rôle : porte les surfaces et grilles propres au simulateur de chance.
|
||||
.rng-simulator-tool {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.rng-simulator-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.4fr);
|
||||
gap: var(--space-4);
|
||||
align-items: start;
|
||||
min-width: 0;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.rng-simulator-panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(16, 20, 38, 0.48);
|
||||
background: rgba(16, 20, 38, 0.44);
|
||||
}
|
||||
|
||||
.rng-simulator-panel > header {
|
||||
|
|
@ -30,14 +22,15 @@
|
|||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border-bottom: 1px solid rgba(150, 165, 205, 0.12);
|
||||
padding-bottom: var(--space-2);
|
||||
border-bottom: 1px solid rgba(150, 165, 205, 0.1);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rng-simulator-panel > header > div:first-child {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
|
@ -50,10 +43,9 @@
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.rng-simulator-count,
|
||||
.rng-simulator-active-rate {
|
||||
.rng-simulator-count {
|
||||
flex: 0 0 auto;
|
||||
padding: 4px 8px;
|
||||
padding: 3px 7px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.28);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-accent-gold);
|
||||
|
|
@ -62,20 +54,35 @@
|
|||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.rng-simulator-rate-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.3fr);
|
||||
gap: var(--space-3);
|
||||
align-items: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-rate-form {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
|
||||
gap: var(--space-3);
|
||||
align-items: end;
|
||||
min-width: 0;
|
||||
padding: var(--space-3);
|
||||
border: 1px solid rgba(150, 165, 205, 0.12);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(5, 7, 17, 0.24);
|
||||
}
|
||||
|
||||
.rng-simulator-rates {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
max-height: 220px;
|
||||
min-height: 72px;
|
||||
max-height: 176px;
|
||||
min-height: 52px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.rng-simulator-rates-stack {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-rate-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
|
|
@ -84,7 +91,7 @@
|
|||
min-width: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(11, 14, 27, 0.56);
|
||||
background: rgba(11, 14, 27, 0.54);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -104,10 +111,10 @@
|
|||
}
|
||||
|
||||
.rng-simulator-rate-row > button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 7px 8px;
|
||||
border: 0;
|
||||
|
|
@ -144,44 +151,57 @@
|
|||
padding: 3px;
|
||||
}
|
||||
|
||||
.rng-simulator-rate-form,
|
||||
.rng-simulator-settings {
|
||||
.rng-simulator-active-summary {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.rng-simulator-settings {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.rng-simulator-three-columns {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.rng-simulator-section {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid rgba(150, 165, 205, 0.1);
|
||||
}
|
||||
|
||||
.rng-simulator-summary-panel > header + .rng-simulator-section {
|
||||
padding-top: var(--space-2);
|
||||
border-top: 0;
|
||||
.rng-simulator-active-summary > span,
|
||||
.rng-simulator-stat {
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
min-height: 90px;
|
||||
padding: 9px;
|
||||
border: 1px solid rgba(150, 165, 205, 0.1);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(5, 7, 17, 0.22);
|
||||
}
|
||||
|
||||
.rng-simulator-section-title {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.rng-simulator-subtitle {
|
||||
.rng-simulator-active-summary small,
|
||||
.rng-simulator-table > span:nth-child(-n + 3),
|
||||
.rng-simulator-history-metrics small {
|
||||
overflow: hidden;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rng-simulator-stat span {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.rng-simulator-active-summary strong,
|
||||
.rng-simulator-stat strong,
|
||||
.rng-simulator-table strong,
|
||||
.rng-simulator-history-row b,
|
||||
.rng-simulator-history-rate > span,
|
||||
.rng-simulator-history-metrics b {
|
||||
color: var(--color-accent-gold);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.rng-simulator-rate-form .rng-simulator-form-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.rng-simulator-field {
|
||||
|
|
@ -198,9 +218,85 @@
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-form-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.rng-simulator-error {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
color: #fca5a5;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.rng-simulator-tabs-panel > header {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-tabs {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.rng-simulator-tabs.tabs.nds-radio-button-group[data-size="sm"] > button {
|
||||
min-width: 96px;
|
||||
min-height: 34px;
|
||||
padding-block: 8px;
|
||||
padding-inline: var(--space-3);
|
||||
}
|
||||
|
||||
.rng-simulator-tab-content {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-section {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid rgba(150, 165, 205, 0.1);
|
||||
}
|
||||
|
||||
.rng-simulator-tab-content > .rng-simulator-section:first-child {
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-section-title {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.rng-simulator-primary-controls {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
|
||||
gap: var(--space-4);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.rng-simulator-primary-column,
|
||||
.rng-simulator-cost-column {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.rng-simulator-cost-column {
|
||||
padding-left: var(--space-4);
|
||||
border-left: 1px solid rgba(150, 165, 205, 0.12);
|
||||
}
|
||||
|
||||
.rng-simulator-percent-input {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -211,90 +307,88 @@
|
|||
font-weight: 900;
|
||||
}
|
||||
|
||||
.rng-simulator-error {
|
||||
margin: 0;
|
||||
color: #fca5a5;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.rng-simulator-form-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.rng-simulator-occurrence-control {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(160px, 1fr) minmax(130px, 0.7fr);
|
||||
gap: 8px;
|
||||
align-items: end;
|
||||
justify-content: flex-end;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.rng-simulator-stat-grid,
|
||||
.rng-simulator-targets,
|
||||
.rng-simulator-time-grid {
|
||||
.rng-simulator-time-results {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rng-simulator-stat-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.rng-simulator-targets {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.rng-simulator-targets .rng-simulator-stat strong {
|
||||
overflow-wrap: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.rng-simulator-time-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.rng-simulator-stat {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(5, 7, 17, 0.32);
|
||||
}
|
||||
|
||||
.rng-simulator-stat span {
|
||||
overflow: hidden;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rng-simulator-stat strong {
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-panel {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.rng-simulator-table {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(150, 165, 205, 0.1);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(150, 165, 205, 0.08);
|
||||
}
|
||||
|
||||
.rng-simulator-table > * {
|
||||
min-width: 0;
|
||||
padding: 8px;
|
||||
background: rgba(5, 7, 17, 0.28);
|
||||
}
|
||||
|
||||
.rng-simulator-table > span:not(:nth-child(-n + 3)) {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.rng-simulator-target-table {
|
||||
grid-template-columns: minmax(88px, 0.6fr) minmax(140px, 1fr) minmax(120px, 1fr);
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
align-items: stretch;
|
||||
padding-bottom: var(--space-3);
|
||||
border-bottom: 1px solid rgba(150, 165, 205, 0.12);
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
.rng-simulator-simulation-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-actions {
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-actions > .nds-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rng-simulator-history-toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
|
@ -312,6 +406,14 @@
|
|||
width: 150px;
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-draws {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-draws > .nds-input {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.rng-simulator-history {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
|
|
@ -320,8 +422,7 @@
|
|||
|
||||
.rng-simulator-history-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px 12px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
|
|
@ -332,26 +433,43 @@
|
|||
|
||||
.rng-simulator-history-row.is-latest {
|
||||
border-color: rgba(139, 92, 246, 0.38);
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(246, 196, 83, 0.06)),
|
||||
rgba(11, 14, 27, 0.52);
|
||||
}
|
||||
|
||||
.rng-simulator-history-row > div {
|
||||
.rng-simulator-history-row > .rng-simulator-history-heading {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-history-rate {
|
||||
justify-items: end;
|
||||
text-align: right;
|
||||
.rng-simulator-history-row .rng-simulator-history-identity {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-history-row b,
|
||||
.rng-simulator-history-rate > span,
|
||||
.rng-simulator-history-metrics b {
|
||||
color: var(--color-accent-gold);
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
.rng-simulator-history-row .rng-simulator-history-score {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-history-row .rng-simulator-history-score b {
|
||||
color: var(--color-text-primary);
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rng-simulator-history-rate {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
justify-items: end;
|
||||
min-width: 72px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rng-simulator-history-metrics {
|
||||
|
|
@ -371,44 +489,54 @@
|
|||
background: rgba(5, 7, 17, 0.24);
|
||||
}
|
||||
|
||||
.rng-simulator-history-metrics small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rng-simulator-empty {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.rng-simulator-grid,
|
||||
.rng-simulator-settings,
|
||||
.rng-simulator-three-columns,
|
||||
.rng-simulator-rate-layout,
|
||||
.rng-simulator-rate-form,
|
||||
.rng-simulator-active-summary,
|
||||
.rng-simulator-primary-controls,
|
||||
.rng-simulator-stat-grid,
|
||||
.rng-simulator-targets,
|
||||
.rng-simulator-time-grid {
|
||||
.rng-simulator-simulation-summary,
|
||||
.rng-simulator-occurrence-control,
|
||||
.rng-simulator-time-results,
|
||||
.rng-simulator-target-table {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.rng-simulator-cost-column {
|
||||
padding-top: var(--space-3);
|
||||
padding-left: 0;
|
||||
border-top: 1px solid rgba(150, 165, 205, 0.12);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-history-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.rng-simulator-history-rate {
|
||||
justify-items: start;
|
||||
text-align: left;
|
||||
.rng-simulator-history-row > .rng-simulator-history-heading {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.rng-simulator-history-metrics {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-bar {
|
||||
justify-content: flex-start;
|
||||
.rng-simulator-history-rate {
|
||||
grid-column: 1 / -1;
|
||||
justify-items: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-overview,
|
||||
.rng-simulator-simulation-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue