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

102
website/src/styles/toolboxes/_module-shell.scss
View file

@ -1,4 +1,5 @@
// Rôle : gère le shell des modules toolbox, titres, icônes, onglets et boutons de module.
@use "../design-system/controls";
@use "../mixins";
.module header {
@ -41,58 +42,21 @@
}
.layout-switch {
display: inline-grid;
grid-template-columns: repeat(2, 38px);
gap: 4px;
padding: 4px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: rgba(5, 7, 17, 0.48);
}
.layout-switch button {
min-height: 34px;
align-items: center;
justify-content: center;
padding: 0;
border-color: transparent;
background: transparent;
color: var(--color-text-muted);
font-weight: 900;
}
.layout-switch button:hover {
border-color: rgba(196, 181, 253, 0.22);
background: rgba(21, 26, 48, 0.5);
color: var(--color-text-primary);
box-shadow: none;
}
.layout-switch button.active {
@include mixins.temporary-toggle-active;
}
.module-drag-handle {
display: inline-grid;
width: 34px;
height: 34px;
flex: 0 0 34px;
place-items: center;
padding: 0;
border-color: transparent;
background: transparent;
color: var(--color-text-muted);
flex: 0 0 40px;
cursor: grab;
opacity: 0.62;
touch-action: none;
user-select: none;
}
.module-drag-handle .ui-icon {
width: 18px;
height: 18px;
}
.module:hover .module-drag-handle,
.module:focus-within .module-drag-handle {
opacity: 1;
@ -128,49 +92,20 @@
}
.module-scroll-button {
display: inline-grid;
grid-template-columns: 16px 30px;
width: fit-content;
min-height: 40px;
@include controls.switch-control(lg);
flex: 0 0 auto;
align-items: center;
gap: 7px;
padding: 0 7px 0 10px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-pill);
background: rgba(5, 7, 17, 0.24);
color: var(--color-text-secondary);
}
.module-scroll-button .ui-icon {
width: 16px;
height: 16px;
@include controls.switch-icon;
}
.module-scroll-button i {
position: relative;
display: block;
width: 30px;
height: 16px;
border: 1px solid rgba(165, 180, 252, 0.18);
border-radius: var(--radius-pill);
background: rgba(7, 10, 24, 0.72);
@include controls.switch-track;
}
.module-scroll-button i::before {
content: "";
position: absolute;
top: 50%;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-text-muted);
transform: translateY(-50%);
transition:
left var(--duration-fast) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
@include controls.switch-thumb;
}
.module-edit-button.active,
@ -318,39 +253,22 @@
}
.tabs {
@include controls.radio-button-group-surface;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 6px;
padding: 5px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background: rgba(5, 7, 17, 0.34);
}
.tabs button {
display: inline-flex;
min-width: 0;
min-height: 36px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: calc(var(--radius-md) - 2px);
background: transparent;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: 900;
@include controls.radio-button-group-option;
}
.tabs button:hover {
border-color: rgba(246, 196, 83, 0.28);
background: rgba(246, 196, 83, 0.08);
color: var(--color-text-primary);
@include controls.radio-button-group-option-hover;
}
.tabs button.active {
@include mixins.temporary-toggle-active;
@include controls.radio-button-group-option-active;
}
.tabs .module-icon-svg {