gbpark/invyone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

진행중

Browse Source
This commit is contained in:
gbpark
2026-04-08 04:55:12 +09:00
parent 4603ac7fd6
commit 06ab990dbd
23 changed files with 3679 additions and 1098 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/styles/v5-layout.css
+76 -11
View File
@@ -191,15 +191,24 @@ html:not(.dark) .v5-cosmos .neb-4{width:600px;height:600px;top:-10%;right:20%;bo
background:linear-gradient(90deg,var(--v5-primary),var(--v5-cyan));animation:v5-glowLine .6s ease-out both;}
@keyframes v5-glowLine{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
/* Admin badge */
.v5-admin-badge{display:none;align-items:center;gap:.4rem;padding:.2rem .6rem;border-radius:999px;
/* Admin badge — display:none 대신 opacity/transform 으로 hidden 해서 zoom-in/out 애니메이션 가능 */
.v5-admin-badge{display:flex;align-items:center;gap:.4rem;padding:.2rem .6rem;border-radius:999px;
background:linear-gradient(135deg,rgba(108,92,231,.12),rgba(0,206,201,.08));
border:1px solid rgba(108,92,231,.2);font-size:.58rem;font-weight:700;color:var(--v5-primary);
animation:v5-badgeIn .4s cubic-bezier(.16,1,.3,1) both;}
opacity:0;transform:scale(0) rotate(-30deg);pointer-events:none;}
.dark .v5-admin-badge{background:linear-gradient(135deg,rgba(162,155,254,.12),rgba(85,239,196,.08));
border-color:rgba(162,155,254,.2);color:var(--v5-primary-light);}
.v5-admin-mode .v5-admin-badge{display:flex;}
@keyframes v5-badgeIn{from{opacity:0;transform:scale(.8) translateX(-10px)}to{opacity:1;transform:none}}
.v5-admin-mode .v5-admin-badge{opacity:1;transform:scale(1) rotate(0);pointer-events:auto;}
/* badge zoom — 모드 진입 시 bouncy in, 이탈 시 quick out */
.v5-admin-badge.mode-zoom-in{animation:v5-badge-zoom-in .55s cubic-bezier(.34,1.56,.64,1) both;}
.v5-admin-badge.mode-zoom-out{animation:v5-badge-zoom-out .35s cubic-bezier(.4,0,1,1) both;}
@keyframes v5-badge-zoom-in{
0%{opacity:0;transform:scale(0) rotate(-30deg)}
60%{opacity:1;transform:scale(1.15) rotate(5deg)}
100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes v5-badge-zoom-out{
0%{opacity:1;transform:scale(1) rotate(0)}
100%{opacity:0;transform:scale(0) rotate(30deg)}}
.v5-admin-badge .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--v5-cyan);
box-shadow:0 0 8px var(--v5-cyan-glow);animation:v5-bdPulse 2s infinite;}
@keyframes v5-bdPulse{0%,100%{box-shadow:0 0 4px var(--v5-cyan-glow)}50%{box-shadow:0 0 12px var(--v5-cyan-glow)}}
@@ -217,12 +226,16 @@ html:not(.dark) .v5-cosmos .neb-4{width:600px;height:600px;top:-10%;right:20%;bo
.v5-tab:hover .v5-tab-x{opacity:1;}
.v5-tab-x:hover{background:rgba(255,71,87,.15);color:var(--v5-red);}
/* Tab collapse */
.v5-tab-toggle{width:28px;height:28px;border-radius:8px;border:1px solid var(--v5-glass-border);
background:var(--v5-surface);backdrop-filter:blur(8px);color:var(--v5-text-muted);cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:all .25s;flex-shrink:0;margin-right:.35rem;}
.v5-tab-toggle:hover{border-color:var(--v5-primary);color:var(--v5-primary);box-shadow:var(--v5-glow-sm);}
.v5-tab-toggle svg{transition:transform .3s cubic-bezier(.4,0,.2,1);}
/* Tab collapse — 탭 바에 통합된 좌측 핸들 (떠있는 박스 느낌 제거) */
.v5-tab-toggle{width:32px;height:36px;border:none;background:transparent;color:var(--v5-text-muted);cursor:pointer;
display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;font-family:inherit;
border-right:1px solid var(--v5-glass-border);margin-right:.4rem;position:relative;
transition:color .2s,background .2s;}
.v5-tab-toggle::after{content:'';position:absolute;left:4px;right:5px;top:6px;bottom:6px;border-radius:8px;
background:transparent;transition:background .2s;pointer-events:none;}
.v5-tab-toggle:hover{color:var(--v5-primary);}
.v5-tab-toggle:hover::after{background:var(--v5-surface-hover);}
.v5-tab-toggle svg{position:relative;z-index:1;transition:transform .3s cubic-bezier(.4,0,.2,1);}
.v5-tabs.collapsed .v5-tab-toggle svg{transform:rotate(180deg);}
.v5-tabs.collapsed{height:0;padding:0;border:none;overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1),padding .3s,border-width .3s;}
.v5-tabs:not(.collapsed){transition:height .3s cubic-bezier(.16,1,.3,1),padding .3s;}
@@ -480,6 +493,58 @@ html:not(.dark) .v5-cosmos .neb-4{width:600px;height:600px;top:-10%;right:20%;bo
.v5-tabs.fade-in{animation:v5-tabsFadeIn .3s cubic-bezier(.16,1,.3,1) both;}
@keyframes v5-tabsFadeIn{from{opacity:0}to{opacity:1}}
/* ===== MODE TRANSITION — sidebar items morph (option b) ===== */
/* 각 .v5-si 가 stagger delay 로 사라졌다가 새 메뉴가 stagger 로 들어옴 */
.v5-si.mode-morph-out{animation:v5-mode-si-out .35s cubic-bezier(.4,0,1,1) forwards;}
.v5-si.mode-morph-in{animation:v5-mode-si-in .45s cubic-bezier(.16,1,.3,1) backwards;}
@keyframes v5-mode-si-out{
0%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}
100%{opacity:0;transform:translateX(-30px) scale(.92);filter:blur(4px)}}
@keyframes v5-mode-si-in{
0%{opacity:0;transform:translateX(30px) scale(.92);filter:blur(4px)}
100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}}
/* ===== MODE TRANSITION — header glow line flash (option c) ===== */
/* 헤더 아래 1px 라인이 mode change 시 굵게/번쩍 → 1px 로 settle */
.v5-hdr-glow{position:absolute;bottom:-1px;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--v5-primary),transparent);
opacity:0;pointer-events:none;}
.v5-admin-mode .v5-hdr-glow{background:linear-gradient(90deg,transparent,var(--v5-cyan),transparent);}
.v5-hdr-glow.mode-flash{animation:v5-mode-hdr-flash 1.4s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes v5-mode-hdr-flash{
0%{opacity:0;height:1px;filter:blur(0)}
20%{opacity:1;height:6px;filter:blur(8px)}
40%{opacity:1;height:4px;filter:blur(6px)}
100%{opacity:.6;height:1px;filter:blur(0)}}
/* ===== MODE TRANSITION — breadcrumb text swap (option e) ===== */
.v5-hdr-bc{display:inline-block;}
.v5-hdr-bc.mode-swap-out{animation:v5-mode-bc-out .25s ease-in forwards;}
.v5-hdr-bc.mode-swap-in{animation:v5-mode-bc-in .35s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes v5-mode-bc-out{
to{opacity:0;transform:translateY(-8px) scale(.9);filter:blur(4px)}}
@keyframes v5-mode-bc-in{
from{opacity:0;transform:translateY(8px) scale(.9);filter:blur(4px)}
to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
/* ===== MODE TRANSITION — toggle button burst (option d, 절제된 버전) ===== */
/* JS 가 .v5-mode-burst 컨테이너를 body 에 append. ring 1개 + particle 6개 정도로 미니멀. */
.v5-mode-burst{position:fixed;pointer-events:none;z-index:1000;}
.v5-mode-burst .burst-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:0;height:0;border-radius:50%;border:1.5px solid var(--v5-primary);opacity:.6;
animation:v5-mode-burst-ring .65s cubic-bezier(.16,1,.3,1) forwards;}
.v5-mode-burst.admin .burst-ring{border-color:var(--v5-cyan);}
@keyframes v5-mode-burst-ring{
0%{width:0;height:0;opacity:.8;border-width:1.5px}
100%{width:140px;height:140px;opacity:0;border-width:.5px}}
.v5-mode-burst .burst-particle{position:absolute;left:50%;top:50%;width:3px;height:3px;
border-radius:50%;background:var(--v5-primary);box-shadow:0 0 4px var(--v5-primary);opacity:.7;
animation:v5-mode-burst-particle .55s cubic-bezier(.16,1,.3,1) forwards;}
.v5-mode-burst.admin .burst-particle{background:var(--v5-cyan);box-shadow:0 0 4px var(--v5-cyan);}
@keyframes v5-mode-burst-particle{
0%{transform:translate(-50%,-50%) scale(1);opacity:.8}
100%{transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(0);opacity:0}}
/* ===== THEME TRANSITION ===== */
.v5-theme-fade{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;
transition:opacity .4s cubic-bezier(.4,0,.2,1);}