Split large Sass modules by feature area
All checks were successful
Deploy Sokko G / deploy (push) Successful in 15s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 15s
This commit is contained in:
parent
bd6dd78e34
commit
c81f66c747
20 changed files with 3990 additions and 3948 deletions
179
website/src/styles/toolboxes/equipment-planner/_details.scss
Normal file
179
website/src/styles/toolboxes/equipment-planner/_details.scss
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
// Rôle : stylise les détails, formulaires et traits equipment planner.
|
||||
.equipment-planner-craft-tab {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-readonly-text,
|
||||
.equipment-planner-trait-readonly,
|
||||
.equipment-planner-material-readonly {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.equipment-planner-display-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.34);
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel h4 {
|
||||
margin: 0;
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel ul {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.equipment-planner-display-stat {
|
||||
grid-template-columns: 18px minmax(0, 1fr) auto !important;
|
||||
}
|
||||
|
||||
.equipment-planner-display-stat .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel p {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel b {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-display-socket {
|
||||
grid-template-columns: 24px minmax(0, 1fr) !important;
|
||||
}
|
||||
|
||||
.equipment-planner-display-socket > div {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-display-socket strong,
|
||||
.equipment-planner-display-socket small {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-display-socket small {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.equipment-planner-trait-readonly,
|
||||
.equipment-planner-material-readonly {
|
||||
display: flex;
|
||||
grid-column: 1 / -1;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-readonly .ui-icon {
|
||||
width: 15px;
|
||||
min-width: 15px;
|
||||
height: 15px;
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-trait-readonly span,
|
||||
.equipment-planner-material-readonly span,
|
||||
.equipment-planner-socket-heading strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-readonly b,
|
||||
.equipment-planner-material-readonly b {
|
||||
margin-left: auto;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-field,
|
||||
.equipment-planner-panel {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-field textarea {
|
||||
min-height: 70px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.equipment-planner-panel {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-form {
|
||||
grid-template-columns: 44px minmax(110px, 0.7fr) minmax(120px, 1fr) minmax(88px, 0.45fr) auto;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-list,
|
||||
.equipment-planner-trait-category {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-category {
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.08);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(21, 26, 48, 0.22);
|
||||
}
|
||||
|
||||
.equipment-planner-trait-category-header {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-category-header strong {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-trait {
|
||||
display: grid;
|
||||
grid-template-columns: 30px 44px minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(72px, 0.5fr) 30px;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
}
|
||||
242
website/src/styles/toolboxes/equipment-planner/_items.scss
Normal file
242
website/src/styles/toolboxes/equipment-planner/_items.scss
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
// Rôle : stylise les sections, items, onglets et modes d'édition equipment planner.
|
||||
.equipment-planner-type-section {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-list {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.equipment-planner-type-section.is-drop-target,
|
||||
.equipment-planner-item.is-drop-target,
|
||||
.equipment-planner-trait-category.is-drop-target,
|
||||
.equipment-planner-trait.is-drop-target {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
}
|
||||
|
||||
.equipment-planner-type-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-type-title h3 {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-md);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-type-icon {
|
||||
display: inline-grid;
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(246, 196, 83, 0.2);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-type-icon .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.equipment-planner-type-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.equipment-planner-type-boundary-drop-zone {
|
||||
min-height: 7px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.equipment-planner-type-boundary-drop-zone.is-drop-target {
|
||||
background: rgba(246, 196, 83, 0.5);
|
||||
}
|
||||
|
||||
.equipment-planner-equipment-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-item {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.36);
|
||||
}
|
||||
|
||||
.equipment-planner-item.is-inactive {
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.equipment-planner-line {
|
||||
display: grid;
|
||||
grid-template-columns: 30px minmax(0, 1fr) minmax(190px, auto) 34px 30px;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.equipment-planner-name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--color-text-primary);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-identity {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch > span {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 20px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.18);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch > span::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-muted);
|
||||
transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch input:checked + span {
|
||||
border-color: rgba(246, 196, 83, 0.48);
|
||||
background: rgba(246, 196, 83, 0.16);
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch input:checked + span::before {
|
||||
transform: translateX(16px);
|
||||
background: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch b {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-details {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 0 0 0 48px;
|
||||
}
|
||||
|
||||
.equipment-planner-tabs {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.36);
|
||||
}
|
||||
|
||||
.equipment-planner-tab {
|
||||
display: inline-flex;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.equipment-planner-tab + .equipment-planner-tab {
|
||||
border-left: 1px solid rgba(165, 180, 252, 0.1);
|
||||
}
|
||||
|
||||
.equipment-planner-tab.active {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)),
|
||||
rgba(21, 26, 48, 0.64);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-edit-mode-button {
|
||||
display: inline-flex;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-left: 1px solid rgba(165, 180, 252, 0.1);
|
||||
border-radius: 0;
|
||||
background: rgba(21, 26, 48, 0.42);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.equipment-planner-edit-mode-button.active {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-edit-mode-button .ui-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.equipment-planner-tab .ui-icon,
|
||||
.equipment-planner-percent-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.equipment-planner-percent-icon {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 900;
|
||||
}
|
||||
124
website/src/styles/toolboxes/equipment-planner/_pickers.scss
Normal file
124
website/src/styles/toolboxes/equipment-planner/_pickers.scss
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
// Rôle : stylise les sélecteurs et le formulaire d'ajout equipment planner.
|
||||
.equipment-planner-module {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.equipment-planner-add-form {
|
||||
grid-template-columns: 44px minmax(180px, 1fr) auto;
|
||||
}
|
||||
|
||||
.equipment-planner-picker {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger,
|
||||
.equipment-planner-picker-option,
|
||||
.equipment-planner-color-option {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(21, 26, 48, 0.58);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger {
|
||||
grid-template-columns: 1fr 10px;
|
||||
width: 44px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.equipment-planner-shape-picker .equipment-planner-picker-trigger {
|
||||
grid-template-columns: 28px 10px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.equipment-planner-add-form .equipment-planner-picker-trigger,
|
||||
.equipment-planner-add-form input,
|
||||
.equipment-planner-add-form button {
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger .ui-icon:first-child,
|
||||
.equipment-planner-picker-option .ui-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger .equipment-planner-socket-icon {
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon,
|
||||
.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon {
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon,
|
||||
.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon .ui-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger .ui-icon:last-child {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger.active,
|
||||
.equipment-planner-picker-option.active,
|
||||
.equipment-planner-color-option.active {
|
||||
border-color: rgba(246, 196, 83, 0.55);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)),
|
||||
rgba(21, 26, 48, 0.76);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-picker-menu {
|
||||
position: fixed;
|
||||
z-index: 12;
|
||||
width: max-content;
|
||||
max-width: calc(100vw - 16px);
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.14);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(9, 12, 28, 0.98);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.equipment-planner-picker-grid,
|
||||
.equipment-planner-color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--picker-columns, 5), 32px);
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-option {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.equipment-planner-color-grid {
|
||||
grid-template-columns: repeat(var(--picker-columns, 6), 28px);
|
||||
}
|
||||
|
||||
.equipment-planner-color-option {
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
335
website/src/styles/toolboxes/equipment-planner/_sockets.scss
Normal file
335
website/src/styles/toolboxes/equipment-planner/_sockets.scss
Normal file
|
|
@ -0,0 +1,335 @@
|
|||
// Rôle : stylise les sertissages, couleurs et ajustements responsive equipment planner.
|
||||
.equipment-planner-material-form {
|
||||
grid-template-columns: minmax(160px, 1fr) 82px auto;
|
||||
}
|
||||
|
||||
.equipment-planner-materials li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 82px 30px;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-form {
|
||||
grid-template-columns: minmax(160px, 1fr) 44px 44px auto;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-card {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.34);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-heading {
|
||||
grid-template-columns: 30px minmax(0, 1fr) 30px;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-heading input {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid rgba(245, 247, 255, 0.36);
|
||||
box-shadow: 0 0 18px rgba(246, 196, 83, 0.16);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon {
|
||||
display: inline-grid;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon .ui-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: var(--equipment-socket-icon-color, currentColor);
|
||||
color: var(--equipment-socket-icon-color, currentColor) !important;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-red {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-orange {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-amber {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-yellow {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-lime {
|
||||
color: #84cc16;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-green {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-teal {
|
||||
color: #14b8a6;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-cyan {
|
||||
color: var(--color-accent-cyan);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-blue {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-indigo {
|
||||
color: var(--color-accent-indigo);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-violet {
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-purple {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-pink {
|
||||
color: var(--color-accent-pink);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-rose {
|
||||
color: #f43f5e;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-white {
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-gray {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-black {
|
||||
color: #020617;
|
||||
}
|
||||
|
||||
.equipment-planner-color-swatch {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid rgba(245, 247, 255, 0.28);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-red,
|
||||
.equipment-planner-color-swatch.color-red {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-orange,
|
||||
.equipment-planner-color-swatch.color-orange {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-amber,
|
||||
.equipment-planner-color-swatch.color-amber {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-yellow,
|
||||
.equipment-planner-color-swatch.color-yellow {
|
||||
background: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-lime,
|
||||
.equipment-planner-color-swatch.color-lime {
|
||||
background: #84cc16;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-green,
|
||||
.equipment-planner-color-swatch.color-green {
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-teal,
|
||||
.equipment-planner-color-swatch.color-teal {
|
||||
background: #14b8a6;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-cyan,
|
||||
.equipment-planner-color-swatch.color-cyan {
|
||||
background: var(--color-accent-cyan);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-blue,
|
||||
.equipment-planner-color-swatch.color-blue {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-indigo,
|
||||
.equipment-planner-color-swatch.color-indigo {
|
||||
background: var(--color-accent-indigo);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-violet,
|
||||
.equipment-planner-color-swatch.color-violet {
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-purple,
|
||||
.equipment-planner-color-swatch.color-purple {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-pink,
|
||||
.equipment-planner-color-swatch.color-pink {
|
||||
background: var(--color-accent-pink);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-rose,
|
||||
.equipment-planner-color-swatch.color-rose {
|
||||
background: #f43f5e;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-white,
|
||||
.equipment-planner-color-swatch.color-white {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-gray,
|
||||
.equipment-planner-color-swatch.color-gray {
|
||||
background: #64748b;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-black,
|
||||
.equipment-planner-color-swatch.color-black {
|
||||
background: #020617;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-controls,
|
||||
.equipment-planner-socket-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-controls {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-links select {
|
||||
min-height: 32px;
|
||||
flex: 1 1 96px;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-controls select {
|
||||
width: min(150px, 100%);
|
||||
min-height: 32px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.equipment-planner-bonus-form {
|
||||
grid-template-columns: minmax(110px, 1fr) minmax(64px, 0.45fr) 44px;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-bonuses li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto 30px;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-bonuses span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-link-chip {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 28px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid rgba(34, 211, 238, 0.28);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(34, 211, 238, 0.08);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.equipment-planner-link-chip::before {
|
||||
content: "";
|
||||
width: 14px;
|
||||
height: 1px;
|
||||
background: var(--color-accent-cyan);
|
||||
}
|
||||
|
||||
.equipment-planner-link-chip span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-link-chip .ui-icon {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.task-planner-task-settings {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid,
|
||||
.equipment-planner-summary-source-grid,
|
||||
.equipment-planner-display-grid,
|
||||
.equipment-planner-add-form,
|
||||
.equipment-planner-trait-form,
|
||||
.equipment-planner-material-form,
|
||||
.equipment-planner-socket-form,
|
||||
.equipment-planner-bonus-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.equipment-planner-line {
|
||||
grid-template-columns: 30px minmax(0, 1fr) 34px 30px;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch {
|
||||
grid-column: 2 / -1;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.equipment-planner-details {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-trait,
|
||||
.equipment-planner-materials li {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
192
website/src/styles/toolboxes/equipment-planner/_summary.scss
Normal file
192
website/src/styles/toolboxes/equipment-planner/_summary.scss
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
// Rôle : stylise les résumés, listes et panneaux principaux equipment planner.
|
||||
.equipment-planner-summary,
|
||||
.equipment-planner-type-section,
|
||||
.equipment-planner-panel {
|
||||
border: 1px solid rgba(165, 180, 252, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(7, 10, 24, 0.28);
|
||||
}
|
||||
|
||||
.equipment-planner-summary {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-header,
|
||||
.equipment-planner-type-header,
|
||||
.equipment-planner-trait-category-header,
|
||||
.equipment-planner-socket-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-header h3,
|
||||
.equipment-planner-panel h4 {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-header span,
|
||||
.equipment-planner-type-actions > span,
|
||||
.equipment-planner-trait-category-header span {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.18);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-source-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-source-grid.columns-1 {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-panel {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.08);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.32);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid strong,
|
||||
.equipment-planner-field span {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid ul,
|
||||
.equipment-planner-list,
|
||||
.equipment-planner-equipment-list,
|
||||
.equipment-planner-trait-list ul,
|
||||
.equipment-planner-materials,
|
||||
.equipment-planner-socket-bonuses {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid li.equipment-planner-summary-total {
|
||||
grid-template-columns: 18px minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-total .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-total .equipment-planner-socket-icon {
|
||||
width: 18px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-total .equipment-planner-socket-icon .ui-icon {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid li span,
|
||||
.equipment-planner-summary-grid li small {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid li b {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid li .ui-tooltip {
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
min-width: 190px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip > strong {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip > span {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip-row {
|
||||
display: grid;
|
||||
grid-template-columns: 16px minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip-row .ui-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip-row span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip-row b {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid p,
|
||||
.equipment-planner-muted,
|
||||
.equipment-planner-empty {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue