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

design refacto
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-22 16:07:10 +02:00
parent b8d1829bc7
commit d359fd0a35
25 changed files with 1340 additions and 1023 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,6 +27,21 @@
box-shadow: var(--shadow-sm);
}
.card {
border-color: transparent;
border-radius: var(--radius-md);
background:
linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box,
radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
}
@supports (corner-shape: scoop) {
.card {
corner-shape: scoop;
}
}
.feature,
.info-panel,
.empty {
@ -35,7 +50,6 @@
.feature,
.card,
.module,
.info-panel {
transition:
transform var(--duration-fast) var(--ease-standard),
@ -45,13 +59,24 @@
.feature:hover,
.card:hover,
.module:hover,
.info-panel:hover {
transform: translateY(-2px);
border-color: var(--color-border-hover);
background: rgba(21, 26, 48, 0.96);
}
.card:hover {
transform: none;
border-color: transparent;
background:
linear-gradient(rgba(21, 26, 48, 0.96), rgba(21, 26, 48, 0.96)) padding-box,
linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(196, 181, 253, 0.72)) border-box;
box-shadow:
var(--shadow-sm),
0 0 18px rgba(139, 92, 246, 0.22),
0 0 34px rgba(196, 181, 253, 0.12);
}
.feature {
display: grid;
gap: 8px;
@ -75,7 +100,7 @@
.card-cover {
min-height: 124px;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid rgba(246, 196, 83, 0.42);
}
.card-body {
@ -148,9 +173,9 @@
position: relative;
min-height: 292px;
overflow: hidden;
border-color: rgba(34, 211, 238, 0.22);
border-color: rgba(246, 196, 83, 0.22);
background:
linear-gradient(135deg, rgba(34, 211, 238, 0.1), transparent 38%),
linear-gradient(135deg, rgba(246, 196, 83, 0.1), transparent 38%),
rgba(10, 13, 29, 0.84);
}
@ -182,11 +207,11 @@
width: 36px;
height: 36px;
place-items: center;
border: 1px solid rgba(34, 211, 238, 0.32);
border: 1px solid rgba(246, 196, 83, 0.32);
border-radius: var(--radius-md);
background: rgba(34, 211, 238, 0.1);
color: var(--color-accent-cyan);
box-shadow: 0 0 22px rgba(34, 211, 238, 0.12);
background: rgba(246, 196, 83, 0.1);
color: var(--color-accent-gold);
box-shadow: 0 0 22px rgba(246, 196, 83, 0.12);
}
.storage-help-mark::before {
@ -205,7 +230,7 @@
}
.storage-help-card .eyebrow {
color: var(--color-accent-cyan);
color: var(--color-accent-gold);
}
.storage-help-intro {
@ -258,16 +283,56 @@
}
.storage-quota {
position: relative;
isolation: isolate;
display: grid;
gap: var(--space-3);
margin-top: auto;
padding: var(--space-4);
border: 1px solid var(--color-border);
overflow: hidden;
border: 1px solid transparent;
border-radius: var(--radius-lg);
background: rgba(10, 13, 29, 0.78);
background: rgba(16, 20, 38, 0.58);
box-shadow: var(--shadow-sm);
}
.storage-quota::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;
}
.storage-quota::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));
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
pointer-events: none;
}
.storage-quota > * {
position: relative;
z-index: 1;
}
.toolbox-page > .storage-quota,
.drawer-content > .storage-quota {
margin-top: auto;