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

Migrate site controls to Nebula design system
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-29 09:16:58 +02:00
parent e3d0925eb1
commit 817e21567b
127 changed files with 5380 additions and 2363 deletions
Download patch file Download diff file Expand all files Collapse all files

20
website/src/styles/toolboxes/layout/_add-tools.scss
View file

@ -1,4 +1,5 @@
// Rôle : regroupe les contrôles d'ajout d'outil et de quick add.
@use "../../design-system/controls";
.tool-add-controls {
position: relative;
@ -9,19 +10,12 @@
.tool-add-modal-button {
min-height: 40px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.tool-add-quick-toggle {
width: 42px;
min-width: 42px;
min-height: 40px;
justify-content: center;
padding: 0;
border-left: 1px solid rgba(255, 255, 255, 0.18);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.tool-add-quick-toggle .ui-icon {
@ -39,17 +33,11 @@
top: calc(100% + 8px);
right: 0;
z-index: 300;
display: grid;
grid-template-columns: repeat(5, 40px);
justify-content: flex-end;
width: max-content;
max-width: calc(100vw - 48px);
gap: 6px;
padding: 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: rgba(10, 13, 28, 0.99);
box-shadow: var(--shadow-lg);
@include controls.floating-control-menu;
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
@ -87,7 +75,3 @@
.tool-add-card {
color: var(--color-text-primary);
}
.tool-quick-add-button {
background: rgba(21, 26, 48, 0.72);
}

39
website/src/styles/toolboxes/layout/_icon-picker.scss
View file

@ -1,5 +1,5 @@
// Rôle : regroupe le picker d'icône des toolboxes.
@use "../../mixins";
@use "../../design-system/controls";
.toolbox-icon-picker {
position: relative;
@ -9,25 +9,21 @@
.toolbox-icon-picker-button,
.toolbox-game-icon {
width: 100px;
min-width: 100px;
min-height: 100px;
border-color: var(--color-primary-border);
background:
radial-gradient(circle at 50% 35%, rgba(246, 196, 83, 0.18), transparent 44%),
rgba(21, 26, 48, 0.86);
@include controls.large-icon-picker-trigger;
}
.toolbox-icon-picker-button {
padding: 0;
}
.toolbox-icon-picker-button:hover {
@include controls.large-icon-picker-trigger-hover;
}
.toolbox-game-icon {
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid var(--color-primary-border);
border-radius: var(--radius-md);
}
.toolbox-icon-picker-button img,
@ -50,7 +46,9 @@
z-index: 300;
display: grid;
grid-template-columns: repeat(5, 42px);
gap: 7px;
grid-auto-rows: 42px;
place-items: center;
gap: 8px;
width: max-content;
max-width: min(260px, calc(100vw - 48px));
padding: 9px;
@ -61,31 +59,18 @@
}
.toolbox-icon-picker-menu button {
width: 42px;
min-width: 42px;
min-height: 42px;
padding: 0;
border-color: var(--color-border);
background: rgba(21, 26, 48, 0.88);
@include controls.compact-menu-button;
}
.toolbox-icon-picker-menu button:hover {
border-color: rgba(196, 181, 253, 0.32);
background:
linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box,
linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(196, 181, 253, 0.2)) border-box;
box-shadow:
0 0 12px rgba(139, 92, 246, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
@include controls.compact-menu-button-hover;
}
.toolbox-icon-picker-menu button.active {
@include mixins.temporary-toggle-active;
@include controls.icon-button-active;
}
.toolbox-icon-picker-menu img {
width: 26px;
height: 26px;
object-fit: contain;
}

56
website/src/styles/toolboxes/layout/_preferences.scss
View file

@ -78,59 +78,5 @@
}
.toast-position-switch {
position: relative;
display: inline-grid;
grid-template-columns: repeat(2, 32px);
width: 74px;
min-height: 38px;
align-items: center;
justify-items: center;
gap: 0;
padding: 3px 4px;
border-color: rgba(165, 180, 252, 0.12);
border-radius: var(--radius-pill);
background: rgba(7, 10, 24, 0.32);
color: var(--color-text-secondary);
}
.toast-position-switch::before {
content: "";
position: absolute;
top: 3px;
bottom: 3px;
left: 4px;
width: 30px;
border: 1px solid rgba(246, 196, 83, 0.3);
border-radius: 50%;
background:
linear-gradient(135deg, rgba(246, 196, 83, 0.1), rgba(139, 92, 246, 0.08)),
rgba(21, 26, 48, 0.58);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: transform var(--duration-fast) var(--ease-standard);
}
.toast-position-switch[data-position="right"]::before {
transform: translateX(32px);
}
.toast-position-switch span {
position: relative;
z-index: 1;
display: inline-grid;
width: 30px;
height: 30px;
place-items: center;
justify-self: center;
align-self: center;
border-radius: 50%;
}
.toast-position-switch .ui-icon {
width: 16px;
height: 16px;
}
.toast-position-switch:hover {
border-color: rgba(196, 181, 253, 0.24);
color: var(--color-text-primary);
grid-template-columns: repeat(2, 30px);
}