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

97
website/src/styles/_shell.scss
View file

@ -1,4 +1,6 @@
.app-shell {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 248px minmax(0, 1fr);
min-height: 100vh;
@ -14,7 +16,7 @@
padding: var(--space-5);
border-right: 1px solid var(--color-border);
background: rgba(11, 14, 27, 0.82);
backdrop-filter: blur(18px);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-md);
}
@ -26,6 +28,38 @@
font-weight: 800;
}
.brand-name {
color: var(--color-text-primary);
}
.brand-name-main {
background: linear-gradient(
90deg,
var(--color-text-primary) 0%,
var(--color-text-primary) 46%,
var(--color-accent-gold) 58%,
var(--color-accent-gold) 100%
);
background-clip: text;
-webkit-background-clip: text;
background-position: 0 0;
background-size: 220% 100%;
color: transparent;
transition: background-position 620ms var(--ease-standard);
}
.brand-name-accent {
color: var(--color-accent-gold);
}
.brand:hover .brand-name-main {
background-position: 100% 0;
}
.brand-name-accent {
background: none;
}
.brand-mark {
display: block;
width: 34px;
@ -65,7 +99,7 @@
width: 24px;
height: 24px;
flex: 0 0 auto;
background: var(--color-accent-cyan);
background: var(--color-accent-gold);
mask-position: center;
mask-repeat: no-repeat;
mask-size: 20px 20px;
@ -108,16 +142,66 @@
}
.sidebar-note {
position: relative;
isolation: isolate;
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(16, 20, 38, 0.62);
background: rgba(16, 20, 38, 0.58);
box-shadow: var(--shadow-sm);
}
.sidebar-note::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;
}
.sidebar-note::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;
}
.sidebar-note > * {
position: relative;
z-index: 1;
}
.sidebar-note .badge {
border: 1px solid rgba(246, 196, 83, 0.24);
background:
linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.16));
color: var(--color-accent-gold);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sidebar-note p {
margin: 10px 0 0;
margin: 12px 0 0;
font-size: var(--font-size-sm);
line-height: 1.45;
}
.sidebar-storage-actions {
@ -128,6 +212,7 @@
.sidebar-action-button {
display: inline-flex;
background: rgba(7, 10, 24, 0.36);
}
.content-shell {
@ -149,7 +234,7 @@
padding: 0 var(--space-8);
border-bottom: 1px solid var(--color-border);
background: rgba(7, 9, 19, 0.78);
backdrop-filter: blur(18px);
backdrop-filter: blur(10px);
}
.topbar strong {