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

107
website/src/styles/_cards.scss
View file

@ -1,6 +1,6 @@
// Rôle : regroupe les styles de cards, panels et variantes compactes.
@use "mixins";
@use "design-system/surfaces";
@use "design-system/controls";
.section-grid,
.cards,
@ -22,33 +22,19 @@
.feature,
.info-panel,
.module,
.empty,
.card {
.module {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: rgba(16, 20, 38, 0.88);
box-shadow: var(--shadow-sm);
}
.card {
@include surfaces.card-surface;
}
@supports (corner-shape: scoop) {
.card {
corner-shape: scoop;
}
}
.feature,
.info-panel,
.empty {
.info-panel {
padding: var(--space-5);
}
.feature,
.card,
.info-panel {
transition:
transform var(--duration-fast) var(--ease-standard),
@ -57,51 +43,12 @@
}
.feature:hover,
.card:hover,
.info-panel:hover {
transform: translateY(-2px);
border-color: var(--color-border-hover);
background: rgba(21, 26, 48, 0.96);
}
.card:hover {
@include surfaces.card-surface-hover;
transform: none;
}
.compact-data-card {
overflow: hidden;
border: 1px solid transparent;
border-radius: var(--radius-md);
background:
linear-gradient(rgba(17, 20, 34, 0.93), rgba(17, 20, 34, 0.93)) padding-box,
radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.24), transparent 24%) border-box,
linear-gradient(135deg, rgba(246, 196, 83, 0.34) 0%, rgba(246, 196, 83, 0.2) 54%, rgba(34, 211, 238, 0.22) 100%) border-box;
box-shadow: var(--shadow-sm);
transition:
transform var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard);
}
@supports (corner-shape: scoop) {
.compact-data-card {
corner-shape: scoop;
}
}
.compact-data-card:hover {
transform: none;
border-color: transparent;
background:
linear-gradient(rgba(20, 23, 39, 0.96), rgba(20, 23, 39, 0.96)) padding-box,
linear-gradient(135deg, rgba(139, 92, 246, 0.62), rgba(196, 181, 253, 0.42)) border-box;
box-shadow:
var(--shadow-sm),
0 0 14px rgba(139, 92, 246, 0.12),
0 0 22px rgba(196, 181, 253, 0.07);
}
.feature {
display: grid;
gap: 8px;
@ -113,27 +60,7 @@
.page-heading,
.toolbox-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-5);
}
.card {
overflow: hidden;
}
.card-cover {
min-height: 124px;
@include surfaces.card-cover-divider;
}
.card-body {
padding: var(--space-5);
}
.card-actions {
margin-top: var(--space-5);
@include controls.section-heading-pattern;
}
.toolbox-card {
@ -406,40 +333,14 @@
font-size: var(--font-size-sm);
}
.storage-quota-track {
width: 100%;
height: 9px;
overflow: hidden;
border: 1px solid rgba(150, 165, 205, 0.14);
border-radius: var(--radius-pill);
background: rgba(5, 7, 17, 0.82);
}
.storage-quota-track span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--gradient-brand);
box-shadow: 0 0 18px rgba(99, 102, 241, 0.32);
transition: width var(--duration-normal) var(--ease-standard);
}
.storage-quota-warning {
border-color: rgba(251, 191, 36, 0.34);
}
.storage-quota-warning .storage-quota-track span {
background: linear-gradient(135deg, #fbbf24, #f97316);
}
.storage-quota-danger {
border-color: rgba(251, 113, 133, 0.42);
}
.storage-quota-danger .storage-quota-track span {
background: linear-gradient(135deg, #fb7185, #d946ef);
}
.card-icon-button {
flex: 0 0 auto;
}