Add chance simulator toolbox and refine checklist interactions
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
This commit is contained in:
parent
35fe877d58
commit
6b85e58765
25 changed files with 1518 additions and 18 deletions
|
|
@ -145,6 +145,17 @@
|
|||
grid-template-columns: 1fr 34px 34px;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 3px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.44);
|
||||
transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.checklist-item:hover {
|
||||
border-color: rgba(196, 181, 253, 0.22);
|
||||
background: rgba(10, 13, 30, 0.54);
|
||||
}
|
||||
|
||||
.checklist-item-main {
|
||||
|
|
@ -153,15 +164,15 @@
|
|||
min-height: 42px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.44);
|
||||
padding: 0 9px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.checklist-item:hover .checklist-item-main,
|
||||
.checklist-item-main:hover {
|
||||
border-color: rgba(196, 181, 253, 0.22);
|
||||
background: rgba(10, 13, 30, 0.54);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.checklist-item-main.is-editing {
|
||||
|
|
@ -182,7 +193,7 @@
|
|||
border-color: rgba(246, 196, 83, 0.72);
|
||||
}
|
||||
|
||||
.checklist-item.is-dragging .checklist-item-main {
|
||||
.checklist-item.is-dragging {
|
||||
opacity: 0.58;
|
||||
}
|
||||
|
||||
|
|
@ -223,6 +234,14 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.checklist .checklist-item-summary:hover:not(:disabled, .active, .is-active, [aria-pressed="true"]) {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.checklist-item-summary span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
@use "combos";
|
||||
@use "counters";
|
||||
@use "randomizer";
|
||||
@use "rng-simulator";
|
||||
@use "calculator";
|
||||
@use "goal-tree";
|
||||
@use "timer";
|
||||
|
|
|
|||
|
|
@ -249,6 +249,11 @@
|
|||
-webkit-mask-image: url("/static/icons/dice.svg");
|
||||
}
|
||||
|
||||
.module-icon-clover {
|
||||
mask-image: url("/static/icons/clover.svg");
|
||||
-webkit-mask-image: url("/static/icons/clover.svg");
|
||||
}
|
||||
|
||||
.module-icon-wheel {
|
||||
mask-image: url("/static/icons/wheel.svg");
|
||||
-webkit-mask-image: url("/static/icons/wheel.svg");
|
||||
|
|
|
|||
414
website/src/styles/toolboxes/_rng-simulator.scss
Normal file
414
website/src/styles/toolboxes/_rng-simulator.scss
Normal file
|
|
@ -0,0 +1,414 @@
|
|||
// 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;
|
||||
}
|
||||
|
||||
.rng-simulator-panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(16, 20, 38, 0.48);
|
||||
}
|
||||
|
||||
.rng-simulator-panel > header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border-bottom: 1px solid rgba(150, 165, 205, 0.12);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rng-simulator-panel > header > div:first-child {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-panel h3 {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rng-simulator-count,
|
||||
.rng-simulator-active-rate {
|
||||
flex: 0 0 auto;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.28);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.rng-simulator-rates {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
max-height: 220px;
|
||||
min-height: 72px;
|
||||
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;
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(11, 14, 27, 0.56);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rng-simulator-rate-row:hover {
|
||||
border-color: rgba(196, 181, 253, 0.24);
|
||||
background: rgba(10, 13, 30, 0.68);
|
||||
}
|
||||
|
||||
.rng-simulator-rate-row.is-active {
|
||||
border-color: rgba(246, 196, 83, 0.48);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
}
|
||||
|
||||
.rng-simulator-rate-row.is-active:hover {
|
||||
border-color: rgba(246, 196, 83, 0.62);
|
||||
background: rgba(246, 196, 83, 0.12);
|
||||
}
|
||||
|
||||
.rng-simulator-rate-row > button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 7px 8px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rng-simulator-rate-row > button:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.rng-simulator-rate-row strong,
|
||||
.rng-simulator-history-row strong {
|
||||
overflow: hidden;
|
||||
color: var(--color-text-primary);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rng-simulator-rate-row span,
|
||||
.rng-simulator-history-row span,
|
||||
.rng-simulator-history-row small,
|
||||
.rng-simulator-empty {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.rng-simulator-rate-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.rng-simulator-rate-form,
|
||||
.rng-simulator-settings {
|
||||
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);
|
||||
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-section-title {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.rng-simulator-subtitle {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.rng-simulator-field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.rng-simulator-field > .nds-input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-percent-input {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rng-simulator-percent-input > span {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
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;
|
||||
gap: 8px;
|
||||
align-items: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.rng-simulator-stat-grid,
|
||||
.rng-simulator-targets,
|
||||
.rng-simulator-time-grid {
|
||||
display: grid;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
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;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-inline-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rng-simulator-inline-field > span {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.rng-simulator-inline-field > .nds-input {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.rng-simulator-history {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.rng-simulator-history-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px 12px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(11, 14, 27, 0.52);
|
||||
}
|
||||
|
||||
.rng-simulator-history-row.is-latest {
|
||||
border-color: rgba(139, 92, 246, 0.38);
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
.rng-simulator-history-row > div {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rng-simulator-history-rate {
|
||||
justify-items: end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.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-metrics {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rng-simulator-history-metrics > span {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(150, 165, 205, 0.12);
|
||||
border-radius: var(--radius-sm);
|
||||
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-stat-grid,
|
||||
.rng-simulator-targets,
|
||||
.rng-simulator-time-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.rng-simulator-history-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.rng-simulator-history-rate {
|
||||
justify-items: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rng-simulator-history-metrics {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-bar {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.rng-simulator-simulation-actions {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue