Split randomizer views and align NDS toolbox vocabulary
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
6b85e58765
commit
fef7735a1d
57 changed files with 4932 additions and 4815 deletions
|
|
@ -1,4 +1,4 @@
|
|||
// Rôle : stylise l'outil Memos, ses post-it et sa bande déroulante.
|
||||
// Rôle : stylise l'outil Mémos, ses post-it et sa bande déroulante.
|
||||
.memos-module {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -80,7 +80,7 @@
|
|||
}
|
||||
|
||||
.goal-tree-node-hover-actions button {
|
||||
@include controls.icon-button(tiny);
|
||||
@include controls.icon-button(xxs);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
}
|
||||
|
||||
.goal-tree-node-hover-actions .ui-icon {
|
||||
@include controls.icon-button-icon(tiny);
|
||||
@include controls.icon-button-icon(xxs);
|
||||
}
|
||||
|
||||
.goal-tree-node.is-text,
|
||||
|
|
|
|||
161
website/src/styles/toolboxes/randomizer/_base.scss
Normal file
161
website/src/styles/toolboxes/randomizer/_base.scss
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
// Rôle : définit la structure commune de l'outil Randomizer.
|
||||
.randomizer-tool {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.randomizer-tabs {
|
||||
justify-self: stretch;
|
||||
width: min(100%, 560px);
|
||||
}
|
||||
|
||||
.randomizer-tabs.tabs {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.randomizer-tabs button {
|
||||
min-height: 42px;
|
||||
padding-inline: 14px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.randomizer-tabs .module-icon-svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.randomizer-panel {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.randomizer-dice-panel,
|
||||
.randomizer-wheel-panel {
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.randomizer-wheel-panel {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.randomizer-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: end;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.randomizer-controls label,
|
||||
.randomizer-field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.randomizer-controls label {
|
||||
min-width: 96px;
|
||||
}
|
||||
|
||||
.randomizer-field > .nds-input,
|
||||
.randomizer-field > .nds-select,
|
||||
.randomizer-field > .nds-textarea {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-wheel-stage {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-dice-stage,
|
||||
.randomizer-wheel-stage {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-live-results {
|
||||
display: grid;
|
||||
align-items: start;
|
||||
justify-items: center;
|
||||
width: min(100%, 560px);
|
||||
min-height: 46px;
|
||||
padding-block: 4px;
|
||||
}
|
||||
|
||||
.randomizer-live-results .randomizer-results {
|
||||
justify-content: center;
|
||||
max-height: 84px;
|
||||
}
|
||||
|
||||
.randomizer-wheel-results {
|
||||
width: 100%;
|
||||
min-height: 38px;
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.randomizer-dice-stage .randomizer-live-results .randomizer-chip {
|
||||
width: 44px;
|
||||
justify-content: center;
|
||||
padding-inline: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.randomizer-wheel-results .randomizer-chip {
|
||||
width: 112px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.randomizer-dice-grid,
|
||||
.randomizer-wheel-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
|
||||
width: 100%;
|
||||
gap: var(--space-4);
|
||||
align-items: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-dice-grid > .randomizer-dice-form,
|
||||
.randomizer-dice-grid > .randomizer-history,
|
||||
.randomizer-wheel-grid > .randomizer-wheel-form,
|
||||
.randomizer-wheel-grid > .randomizer-wheel-values-section,
|
||||
.randomizer-wheel-grid > .randomizer-history {
|
||||
width: 100%;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.randomizer-wheel-grid > .randomizer-history {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.randomizer-dice-form,
|
||||
.randomizer-wheel-form,
|
||||
.randomizer-wheel-values-section {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
align-content: start;
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.randomizer-dice-form .randomizer-controls,
|
||||
.randomizer-wheel-form .randomizer-controls {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.randomizer-dice-form .randomizer-controls label,
|
||||
.randomizer-dice-form .randomizer-controls .nds-button,
|
||||
.randomizer-wheel-form .randomizer-controls label,
|
||||
.randomizer-wheel-form .randomizer-controls .nds-button {
|
||||
width: 100%;
|
||||
}
|
||||
82
website/src/styles/toolboxes/randomizer/_dice.scss
Normal file
82
website/src/styles/toolboxes/randomizer/_dice.scss
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
// Rôle : porte la visualisation du dé du Randomizer.
|
||||
.randomizer-die {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 116px;
|
||||
aspect-ratio: 1;
|
||||
place-items: center;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 42px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.randomizer-die::before {
|
||||
position: absolute;
|
||||
inset: 12px;
|
||||
border-radius: 999px;
|
||||
background: radial-gradient(circle, rgba(246, 196, 83, 0.22), transparent 62%);
|
||||
content: "";
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
.randomizer-die-shape {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
.randomizer-die-shape circle,
|
||||
.randomizer-die-shape path,
|
||||
.randomizer-die-shape rect {
|
||||
fill: rgba(16, 20, 38, 0.92);
|
||||
stroke: rgba(246, 196, 83, 0.42);
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
|
||||
.randomizer-die-value {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 3ch;
|
||||
height: 52px;
|
||||
min-width: 2ch;
|
||||
overflow: hidden;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.randomizer-die-value-track {
|
||||
display: grid;
|
||||
transform: translateY(calc(var(--randomizer-die-index, 0) * -52px));
|
||||
transition: transform var(--randomizer-die-duration, 120ms) cubic-bezier(0.2, 0.82, 0.25, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.randomizer-die-value-track span {
|
||||
display: block;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
}
|
||||
|
||||
.randomizer-die.is-rolling {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.randomizer-die.is-rolling .randomizer-die-shape {
|
||||
filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 18px rgba(246, 196, 83, 0.18));
|
||||
}
|
||||
|
||||
.randomizer-die.is-rolling .randomizer-die-shape circle,
|
||||
.randomizer-die.is-rolling .randomizer-die-shape path,
|
||||
.randomizer-die.is-rolling .randomizer-die-shape rect {
|
||||
stroke: rgba(246, 196, 83, 0.68);
|
||||
}
|
||||
|
||||
.randomizer-die.is-rolling .randomizer-die-value {
|
||||
color: var(--color-accent-gold);
|
||||
text-shadow: 0 0 18px rgba(246, 196, 83, 0.28);
|
||||
}
|
||||
209
website/src/styles/toolboxes/randomizer/_history.scss
Normal file
209
website/src/styles/toolboxes/randomizer/_history.scss
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
// Rôle : porte l'historique détaillé du Randomizer.
|
||||
.randomizer-history {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
align-content: start;
|
||||
min-width: 0;
|
||||
min-height: 132px;
|
||||
max-height: 420px;
|
||||
overflow: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.randomizer-history.nds-scrollbox {
|
||||
max-height: 420px;
|
||||
}
|
||||
|
||||
.randomizer-history > header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.randomizer-history > header .randomizer-history-clear {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
justify-content: center;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
.randomizer-history h3 {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.randomizer-history .randomizer-list {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.randomizer-history-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
align-items: start;
|
||||
min-height: 38px;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.randomizer-history-row.has-action {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.randomizer-history-main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) max-content;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
min-height: 40px;
|
||||
padding: 7px 12px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(12, 15, 30, 0.72);
|
||||
}
|
||||
|
||||
.randomizer-history-value {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.randomizer-history-row.is-latest .randomizer-history-main {
|
||||
border-color: rgba(246, 196, 83, 0.68);
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 36%),
|
||||
rgba(12, 15, 30, 0.78);
|
||||
}
|
||||
|
||||
.randomizer-history-row.is-latest .randomizer-history-value {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.randomizer-history-row time {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.22;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.randomizer-history-accordion {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.randomizer-history-accordion > summary {
|
||||
display: grid;
|
||||
grid-template-columns: 18px minmax(0, 1fr) max-content;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
min-height: 40px;
|
||||
padding: 7px 12px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.randomizer-history-accordion > summary .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: currentColor;
|
||||
color: var(--color-text-muted);
|
||||
transition: transform 160ms var(--ease-standard);
|
||||
}
|
||||
|
||||
.randomizer-history-accordion[open] > summary .ui-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.randomizer-history-accordion > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.randomizer-history-teams {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
padding: 0 12px 12px;
|
||||
}
|
||||
|
||||
.randomizer-history-team {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) max-content;
|
||||
gap: 4px 8px;
|
||||
min-width: 0;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid rgba(165, 180, 252, 0.18);
|
||||
}
|
||||
|
||||
.randomizer-history-team:nth-child(4n + 1) {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.randomizer-history-teams.has-team-rows .randomizer-history-team:nth-child(4n + 5)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
width: calc(400% + 24px);
|
||||
border-top: 1px solid rgba(165, 180, 252, 0.14);
|
||||
}
|
||||
|
||||
.randomizer-history-team strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.randomizer-history-team span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.randomizer-history-team ul {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.randomizer-history-team li {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes randomizer-player-drop {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-34px) scale(1.04);
|
||||
}
|
||||
|
||||
65% {
|
||||
opacity: 1;
|
||||
transform: translateY(4px) scale(1);
|
||||
}
|
||||
}
|
||||
122
website/src/styles/toolboxes/randomizer/_responsive.scss
Normal file
122
website/src/styles/toolboxes/randomizer/_responsive.scss
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
// Rôle : regroupe les adaptations responsive et mouvement du Randomizer.
|
||||
@media (max-width: 920px) {
|
||||
.randomizer-wheel-stage {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.randomizer-wheel-spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.randomizer-wheel-legend {
|
||||
width: min(100%, 320px);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-history-teams {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.randomizer-history-team:nth-child(4n + 1) {
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid rgba(165, 180, 252, 0.18);
|
||||
}
|
||||
|
||||
.randomizer-history-team:nth-child(2n + 1) {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.randomizer-history-teams.has-team-rows .randomizer-history-team:nth-child(4n + 5)::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.randomizer-history-teams.has-team-rows .randomizer-history-team:nth-child(2n + 3)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
width: calc(200% + 8px);
|
||||
border-top: 1px solid rgba(165, 180, 252, 0.14);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.randomizer-dice-grid,
|
||||
.randomizer-wheel-grid,
|
||||
.randomizer-team-settings-grid,
|
||||
.randomizer-entry-form,
|
||||
.randomizer-exclusion-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.randomizer-player-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.randomizer-teams.is-single-team {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.randomizer-history-row.has-action {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.randomizer-history-main {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.randomizer-history-accordion > summary {
|
||||
grid-template-columns: 18px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.randomizer-history-row time {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.randomizer-history-teams {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.randomizer-history-team,
|
||||
.randomizer-history-team:nth-child(4n + 1),
|
||||
.randomizer-history-team:nth-child(2n + 1) {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.randomizer-history-teams.has-team-rows .randomizer-history-team:nth-child(2n + 3)::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.randomizer-history-teams.has-team-rows .randomizer-history-team:nth-child(n + 2)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid rgba(165, 180, 252, 0.14);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.randomizer-teams.is-animating .randomizer-team b {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.randomizer-wheel {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.randomizer-die-value,
|
||||
.randomizer-team b.is-arriving {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.randomizer-die-value-track,
|
||||
.randomizer-team-reel-track {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
100
website/src/styles/toolboxes/randomizer/_shared.scss
Normal file
100
website/src/styles/toolboxes/randomizer/_shared.scss
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
// Rôle : regroupe les cartes et listes partagées du Randomizer.
|
||||
.randomizer-dice-form,
|
||||
.randomizer-wheel-form,
|
||||
.randomizer-wheel-values-section,
|
||||
.randomizer-team-basic,
|
||||
.randomizer-team-advanced-section,
|
||||
.randomizer-history {
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(7, 10, 24, 0.3);
|
||||
}
|
||||
|
||||
.randomizer-results,
|
||||
.randomizer-exclusions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
max-height: 168px;
|
||||
overflow: auto;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.randomizer-history > .randomizer-empty {
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
padding: 8px 2px;
|
||||
}
|
||||
|
||||
.randomizer-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 30px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.16);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(16, 20, 38, 0.72);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.randomizer-chip-label {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.randomizer-value-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
max-height: 210px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.randomizer-value-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-list-header {
|
||||
min-height: auto;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.randomizer-section-label {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.randomizer-player-row {
|
||||
grid-template-columns: auto minmax(0, 1fr) minmax(68px, 82px) auto;
|
||||
}
|
||||
|
||||
.randomizer-wheel-value-row {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(68px, 82px) auto;
|
||||
}
|
||||
|
||||
.randomizer-value-row > .nds-input,
|
||||
.randomizer-value-row > .nds-select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-value-row > .nds-checkbox {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
250
website/src/styles/toolboxes/randomizer/_teams.scss
Normal file
250
website/src/styles/toolboxes/randomizer/_teams.scss
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
// Rôle : porte la création d'équipes et les exclusions du Randomizer.
|
||||
.randomizer-player-import-form > .randomizer-field,
|
||||
.randomizer-exclusion-form > .randomizer-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.randomizer-player-import-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.randomizer-player-import-form > .nds-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.randomizer-exclusion-form {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-exclusion-mode-field {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.randomizer-exclusion-form.is-group-mode > .randomizer-field:not(.randomizer-exclusion-mode-field) {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.randomizer-multi-trigger.nds-select-trigger,
|
||||
.randomizer-multi-trigger.nds-select-trigger[data-size="sm"] {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
width: 100%;
|
||||
color: var(--color-text-primary);
|
||||
font: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.randomizer-multi-trigger.nds-select-trigger > .randomizer-multi-trigger-label {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.randomizer-checkbox-dropdown {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.randomizer-checkbox-dropdown > .randomizer-checkbox-menu.nds-scrollbox {
|
||||
position: absolute;
|
||||
z-index: 80;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
max-height: 156px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgb(7, 10, 24);
|
||||
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
|
||||
color: var(--color-text-secondary);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.randomizer-checkbox-option {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.randomizer-checkbox-option span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.randomizer-team-advanced .randomizer-exclusion-form {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.randomizer-exclusion-block {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
align-content: start;
|
||||
grid-auto-rows: minmax(44px, auto);
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
min-width: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.randomizer-teams-panel {
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.randomizer-team-stage {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-teams {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-teams.is-single-team {
|
||||
grid-template-columns: minmax(0, min(50%, 420px));
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.randomizer-team {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
min-height: 118px;
|
||||
min-width: 0;
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
padding: var(--space-3);
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(7, 10, 24, 0.3);
|
||||
}
|
||||
|
||||
.randomizer-team h3 {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.randomizer-team span,
|
||||
.randomizer-history-row time,
|
||||
.randomizer-empty {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.randomizer-team b {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.randomizer-team b.is-arriving {
|
||||
animation: randomizer-player-drop 420ms var(--ease-standard);
|
||||
}
|
||||
|
||||
.randomizer-team-reel {
|
||||
display: grid;
|
||||
height: 34px;
|
||||
width: min(100%, 340px);
|
||||
justify-self: center;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(246, 196, 83, 0.28);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(7, 10, 24, 0.3);
|
||||
}
|
||||
|
||||
.randomizer-team-reel-track {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
transform: translateY(calc(var(--randomizer-reel-index, 0) * -34px));
|
||||
transition: transform var(--randomizer-reel-duration, 96ms) cubic-bezier(0.2, 0.82, 0.25, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.randomizer-team-reel-track span,
|
||||
.randomizer-team-reel-placeholder {
|
||||
display: block;
|
||||
max-width: min(100%, 260px);
|
||||
height: 34px;
|
||||
margin-inline: auto;
|
||||
overflow: hidden;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 900;
|
||||
line-height: 34px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.randomizer-team-reel.is-spinning .randomizer-team-reel-track {
|
||||
filter: drop-shadow(0 0 10px rgba(246, 196, 83, 0.16));
|
||||
}
|
||||
|
||||
.randomizer-team-settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-team-basic,
|
||||
.randomizer-team-advanced-section {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.randomizer-team-advanced {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-team-basic .randomizer-controls {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.randomizer-team-basic .randomizer-controls label,
|
||||
.randomizer-team-basic .randomizer-controls .nds-button {
|
||||
width: 100%;
|
||||
}
|
||||
130
website/src/styles/toolboxes/randomizer/_wheel.scss
Normal file
130
website/src/styles/toolboxes/randomizer/_wheel.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
// Rôle : porte la roue pondérée du Randomizer.
|
||||
.randomizer-wheel-stage {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
||||
gap: var(--space-4);
|
||||
align-items: center;
|
||||
justify-items: stretch;
|
||||
min-height: 228px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.randomizer-wheel-spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.randomizer-wheel-center {
|
||||
position: relative;
|
||||
display: grid;
|
||||
justify-self: center;
|
||||
justify-items: center;
|
||||
gap: var(--space-3);
|
||||
min-width: 210px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.randomizer-wheel-pointer {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 10px solid transparent;
|
||||
border-left: 10px solid transparent;
|
||||
border-top: 18px solid var(--color-accent-gold);
|
||||
transform: translateX(-50%);
|
||||
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.42));
|
||||
}
|
||||
|
||||
.randomizer-wheel {
|
||||
width: min(100%, 190px);
|
||||
aspect-ratio: 1;
|
||||
margin-top: 16px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
|
||||
transform: rotate(var(--randomizer-wheel-rotation, 0deg));
|
||||
transition: transform 1120ms cubic-bezier(0.15, 0.78, 0.18, 1);
|
||||
}
|
||||
|
||||
.randomizer-wheel-legend {
|
||||
align-self: center;
|
||||
justify-self: stretch;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
align-content: start;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-height: 238px;
|
||||
overflow: auto;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(7, 10, 24, 0.3);
|
||||
}
|
||||
|
||||
.randomizer-wheel-legend.nds-scrollbox {
|
||||
max-height: 238px;
|
||||
}
|
||||
|
||||
.randomizer-wheel-legend-row {
|
||||
display: grid;
|
||||
grid-template-columns: 14px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.randomizer-wheel-swatch {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--randomizer-swatch);
|
||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.randomizer-wheel-label {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 800;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.randomizer-wheel-legend .randomizer-empty {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.randomizer-wheel.is-spinning {
|
||||
filter: drop-shadow(0 0 18px rgba(246, 196, 83, 0.18));
|
||||
}
|
||||
|
||||
.randomizer-wheel path {
|
||||
stroke: rgba(7, 10, 24, 0.74);
|
||||
stroke-width: 0.8;
|
||||
}
|
||||
|
||||
.randomizer-wheel-form .randomizer-entry-form {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.randomizer-wheel-form .randomizer-entry-form .nds-button {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.randomizer-wheel-form .randomizer-entry-form > .randomizer-field,
|
||||
.randomizer-wheel-form .randomizer-entry-form > .nds-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.randomizer-entry-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue