Kazuma
116 lines
2.7 KiB
SCSS
116 lines
2.7 KiB
SCSS
// ── Shell & Navigation ────────────────────────────────────────────────────
|
|
|
|
.shell {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2xl);
|
|
padding: 14px 32px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg-base);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.brand { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
|
|
|
|
.links {
|
|
display: flex;
|
|
gap: var(--space-xs);
|
|
|
|
a {
|
|
color: var(--text-dim);
|
|
text-decoration: none;
|
|
padding: 6px 14px;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 500;
|
|
transition: color var(--transition), background var(--transition);
|
|
|
|
// Active and hover share identical styles — one rule
|
|
&:hover,
|
|
&.active {
|
|
color: var(--text-secondary);
|
|
background: var(--bg-card);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Nav auth (sign in / user + sign out) ─────────────────────────────────
|
|
|
|
.nav-auth {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.nav-user {
|
|
font-size: var(--fs-sm);
|
|
color: var(--text-dim);
|
|
max-width: 180px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 4px 10px;
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
main { flex: 1; padding: 28px 32px; }
|
|
|
|
// ── Navigation progress bar ───────────────────────────────────────────────
|
|
|
|
.nav-progress {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
z-index: 100;
|
|
background: var(--bg-card);
|
|
overflow: hidden;
|
|
|
|
.nav-bar {
|
|
height: 100%;
|
|
background: var(--blue);
|
|
animation: nav-progress 1.5s ease-in-out infinite;
|
|
transform-origin: left;
|
|
}
|
|
}
|
|
|
|
@keyframes nav-progress {
|
|
0% { transform: translateX(-100%) scaleX(0.3); }
|
|
50% { transform: translateX(0%) scaleX(0.7); }
|
|
100% { transform: translateX(100%) scaleX(0.3); }
|
|
}
|
|
|
|
// ── Page-load overlay ─────────────────────────────────────────────────────
|
|
|
|
.nav-overlay {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
padding: 100px 0;
|
|
flex: 1;
|
|
}
|
|
|
|
|
|
// ── Shared loading area ───────────────────────────────────────────────────
|
|
|
|
.loading-area {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 80px 0;
|
|
}
|