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

Extend NDS patterns and migrate shared UI surfaces
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-02 15:50:04 +02:00
parent fef7735a1d
commit 9aa98c892d
41 changed files with 1035 additions and 405 deletions
Download patch file Download diff file Expand all files Collapse all files

11
website/src/styles/games/_cards.scss
View file

@ -1,4 +1,5 @@
// Rôle : regroupe les grilles, cartes, couvertures et badges des pages jeux.
@use "../design-system/controls";
.game-grid {
display: grid;
@ -53,14 +54,6 @@
}
.badge {
display: inline-flex;
min-height: 24px;
align-items: center;
gap: 6px;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: #b69cff;
font-size: var(--font-size-xs);
@include controls.badge-pattern;
font-weight: 700;
padding: 3px 9px;
}

59
website/src/styles/games/_filters.scss
View file

@ -1,6 +1,4 @@
// Rôle : regroupe le layout, les filtres et les barres de contrôle des pages jeux.
@use "../mixins";
.game-layout {
display: grid;
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
@ -14,48 +12,6 @@
top: 92px;
}
.filter-panel {
position: relative;
isolation: isolate;
overflow: hidden;
border: 1px solid transparent;
border-radius: var(--radius-xl);
background: rgba(16, 20, 38, 0.58);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(10px);
padding: var(--space-4);
}
.filter-panel::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 92% 12%, rgba(246, 196, 83, 0.009), transparent 34%),
radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.011), transparent 42%);
pointer-events: none;
}
.filter-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
padding: 1px;
border-radius: inherit;
background:
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%),
linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24));
@include mixins.border-mask;
pointer-events: none;
}
.filter-panel > * {
position: relative;
z-index: 1;
}
.filter-panel-head,
.filter-logic {
display: flex;
@ -111,22 +67,7 @@
.filter-chip {
display: grid;
grid-template-columns: 18px 22px 1fr;
min-height: 40px;
align-items: center;
column-gap: 6px;
padding: 7px 10px 7px 13px;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: rgba(5, 7, 17, 0.32);
color: var(--color-text-secondary);
cursor: pointer;
}
.filter-chip:hover,
.filter-chip.active {
border-color: var(--color-primary-border);
background: var(--color-primary-soft);
color: var(--color-text-primary);
}
.filter-chip img {