546 lines
35 KiB
CSS
546 lines
35 KiB
CSS
/* ===================================================================
|
|
INVION v5 — Cosmic Glassmorphism Layout System
|
|
All variables use --v5- prefix to avoid shadcn/Tailwind collision.
|
|
=================================================================== */
|
|
|
|
/* ===== V5 CSS Variables ===== */
|
|
:root {
|
|
--v5-bg:#fafaff; --v5-bg-subtle:#f3f2fa;
|
|
--v5-surface:rgba(255,255,255,0.55); --v5-surface-solid:#ffffff;
|
|
--v5-surface-hover:rgba(255,255,255,0.7);
|
|
--v5-text:#0f0e1a; --v5-text-sec:#6b6a80; --v5-text-muted:#9998ad;
|
|
--v5-primary:#6c5ce7; --v5-primary-light:#a29bfe; --v5-primary-glow:rgba(108,92,231,0.25);
|
|
--v5-cyan:#00cec9; --v5-cyan-glow:rgba(0,206,201,0.2);
|
|
--v5-pink:#fd79a8; --v5-pink-glow:rgba(253,121,168,0.15);
|
|
--v5-red:#ff4757; --v5-green:#00b894; --v5-amber:#fdcb6e;
|
|
--v5-border:rgba(108,92,231,0.12); --v5-border-subtle:rgba(0,0,0,0.05);
|
|
--v5-glass:rgba(255,255,255,0.45); --v5-glass-strong:rgba(255,255,255,0.65);
|
|
--v5-glass-border:rgba(108,92,231,0.12);
|
|
--v5-glow-sm:0 0 20px rgba(108,92,231,0.12);
|
|
--v5-glow-md:0 0 40px rgba(108,92,231,0.2);
|
|
--v5-glow-lg:0 0 80px rgba(108,92,231,0.25);
|
|
--v5-sidebar-w:220px;
|
|
}
|
|
.dark {
|
|
--v5-bg:#06050e; --v5-bg-subtle:#0c0b18;
|
|
--v5-surface:rgba(17,16,42,0.5); --v5-surface-solid:#11102a;
|
|
--v5-surface-hover:rgba(25,24,64,0.6);
|
|
--v5-text:#eae8f4; --v5-text-sec:#8d8ba8; --v5-text-muted:#5a587a;
|
|
--v5-primary:#a29bfe; --v5-primary-light:#c8c4ff; --v5-primary-glow:rgba(162,155,254,0.25);
|
|
--v5-cyan:#55efc4; --v5-cyan-glow:rgba(85,239,196,0.15);
|
|
--v5-pink:#fd79a8; --v5-red:#ff6b6b; --v5-green:#55efc4; --v5-amber:#ffeaa7;
|
|
--v5-border:rgba(162,155,254,0.1); --v5-border-subtle:rgba(255,255,255,0.04);
|
|
--v5-glass:rgba(17,16,42,0.45); --v5-glass-strong:rgba(17,16,42,0.65);
|
|
--v5-glass-border:rgba(162,155,254,0.12);
|
|
--v5-glow-sm:0 0 20px rgba(162,155,254,0.1);
|
|
--v5-glow-md:0 0 40px rgba(162,155,254,0.18);
|
|
--v5-glow-lg:0 0 80px rgba(162,155,254,0.22);
|
|
}
|
|
|
|
/* ===== COSMIC BACKGROUND ===== */
|
|
.v5-cosmos{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
|
|
.v5-cosmos .star{position:absolute;width:2px;height:2px;background:white;border-radius:50%;
|
|
animation:v5-twinkle var(--d,3s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);opacity:0;}
|
|
.v5-cosmos .star.c{width:3px;height:3px;background:var(--sc);}
|
|
@keyframes v5-twinkle{0%{opacity:0;transform:scale(.5)}100%{opacity:var(--mo,.7);transform:scale(1)}}
|
|
html:not(.dark) .v5-cosmos .star{display:none;}
|
|
html:not(.dark) .v5-cosmos .shooting-star{display:none;}
|
|
html:not(.dark) .v5-cosmos .particle{display:none;}
|
|
|
|
.v5-cosmos .neb{position:absolute;border-radius:50%;filter:blur(140px);animation:v5-drift 16s ease-in-out infinite alternate;}
|
|
.v5-cosmos .neb-1{width:700px;height:700px;top:-20%;right:-15%;background:radial-gradient(circle,var(--v5-primary-glow),transparent 70%);animation-duration:18s;}
|
|
.v5-cosmos .neb-2{width:600px;height:600px;bottom:-25%;left:-10%;background:radial-gradient(circle,var(--v5-cyan-glow),transparent 70%);animation-duration:14s;animation-delay:-4s;}
|
|
.v5-cosmos .neb-3{width:450px;height:450px;top:35%;left:40%;background:radial-gradient(circle,var(--v5-pink-glow),transparent 70%);animation-duration:12s;animation-delay:-8s;}
|
|
.v5-cosmos .neb-4{width:350px;height:350px;top:60%;right:25%;background:radial-gradient(circle,rgba(108,92,231,0.08),transparent 70%);animation-duration:20s;animation-delay:-2s;}
|
|
@keyframes v5-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,-25px) scale(1.1)}}
|
|
|
|
html:not(.dark) .v5-cosmos{background:linear-gradient(180deg,#e8e4ff 0%,#f0edff 30%,#fafaff 60%,#f5f0ff 100%);}
|
|
html:not(.dark) .v5-cosmos .neb{filter:blur(100px);}
|
|
html:not(.dark) .v5-cosmos .neb-1{width:1200px;height:500px;top:auto;bottom:-10%;right:-15%;border-radius:50%;
|
|
background:radial-gradient(ellipse,rgba(255,255,255,0.9),rgba(230,225,255,0.5),transparent 70%);animation-duration:25s;}
|
|
html:not(.dark) .v5-cosmos .neb-2{width:1000px;height:400px;top:auto;bottom:-5%;left:-10%;
|
|
background:radial-gradient(ellipse,rgba(255,255,255,0.85),rgba(200,240,255,0.4),transparent 70%);animation-duration:20s;}
|
|
html:not(.dark) .v5-cosmos .neb-3{width:800px;height:350px;top:auto;bottom:5%;left:30%;
|
|
background:radial-gradient(ellipse,rgba(255,255,255,0.8),rgba(240,220,255,0.3),transparent 70%);animation-duration:22s;}
|
|
html:not(.dark) .v5-cosmos .neb-4{width:600px;height:600px;top:-10%;right:20%;bottom:auto;
|
|
background:radial-gradient(circle,rgba(108,92,231,0.08),rgba(0,206,201,0.04),transparent 70%);}
|
|
|
|
.v5-cosmos .shooting-star{position:absolute;width:80px;height:1px;
|
|
background:linear-gradient(90deg,rgba(255,255,255,0.6),transparent);
|
|
transform:rotate(35deg);animation:v5-shoot 5s ease-in-out infinite;opacity:0;}
|
|
.v5-cosmos .shooting-star:nth-child(6){animation-delay:3s;top:25%;left:65%;width:55px;transform:rotate(40deg);}
|
|
@keyframes v5-shoot{0%{opacity:0;transform:rotate(35deg) translateX(0)}3%{opacity:0.7}12%{opacity:0;transform:rotate(35deg) translateX(-350px)}100%{opacity:0}}
|
|
|
|
.v5-cosmos .particle{position:absolute;width:var(--sz,4px);height:var(--sz,4px);background:var(--pc,var(--v5-primary));
|
|
border-radius:50%;opacity:0;animation:v5-floatup var(--fd,9s) ease-in-out infinite;animation-delay:var(--fdl,0s);}
|
|
@keyframes v5-floatup{0%{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:.4}90%{opacity:.4}100%{opacity:0;transform:translateY(-80px) scale(1)}}
|
|
|
|
/* ===== LAYOUT SHELL ===== */
|
|
.v5-shell{display:flex;flex-direction:column;height:100vh;position:relative;z-index:1;}
|
|
|
|
/* ===== GLASS HEADER ===== */
|
|
.v5-hdr{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;
|
|
background:var(--v5-glass);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
|
|
border-bottom:1px solid var(--v5-glass-border);position:relative;z-index:20;flex-shrink:0;}
|
|
.v5-hdr-l{display:flex;align-items:center;gap:1rem;}
|
|
.v5-hdr-logo{font-size:1.05rem;font-weight:900;letter-spacing:-.03em;
|
|
background:linear-gradient(135deg,var(--v5-primary),var(--v5-cyan));-webkit-background-clip:text;
|
|
-webkit-text-fill-color:transparent;background-clip:text;cursor:default;}
|
|
.v5-hdr-bc{font-size:.72rem;color:var(--v5-text-muted);}
|
|
.v5-hdr-bc b{color:var(--v5-text);font-weight:600;}
|
|
.v5-hdr-r{display:flex;align-items:center;gap:.65rem;}
|
|
|
|
/* Theme pill */
|
|
.v5-pill{display:flex;background:var(--v5-surface);backdrop-filter:blur(8px);border:1px solid var(--v5-glass-border);
|
|
border-radius:999px;padding:2px;}
|
|
.v5-pill button{padding:.22rem .65rem;border-radius:999px;border:none;background:transparent;
|
|
color:var(--v5-text-muted);cursor:pointer;font-size:.6rem;font-weight:600;font-family:inherit;
|
|
transition:all .3s cubic-bezier(.4,0,.2,1);}
|
|
.v5-pill button.on{background:var(--v5-primary);color:white;box-shadow:var(--v5-glow-sm);}
|
|
|
|
/* Bell */
|
|
.v5-bell{position:relative;width:32px;height:32px;border-radius:10px;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 .2s;}
|
|
.v5-bell:hover{border-color:var(--v5-primary);color:var(--v5-primary);box-shadow:var(--v5-glow-sm);}
|
|
.v5-bell-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--v5-red);border-radius:50%;animation:v5-pdot 2s infinite;}
|
|
@keyframes v5-pdot{0%,100%{box-shadow:0 0 0 0 rgba(255,71,87,.4)}50%{box-shadow:0 0 0 5px rgba(255,71,87,0)}}
|
|
|
|
/* Admin button */
|
|
.v5-admin-btn{position:relative;width:32px;height:32px;border-radius:10px;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;}
|
|
.v5-admin-btn:hover{border-color:var(--v5-primary);color:var(--v5-primary);box-shadow:var(--v5-glow-sm);transform:scale(1.1);}
|
|
.v5-admin-btn .v5-admin-label{position:absolute;top:110%;left:50%;transform:translateX(-50%);
|
|
font-size:.52rem;font-weight:600;color:var(--v5-primary);white-space:nowrap;
|
|
opacity:0;transition:opacity .2s,color .2s;pointer-events:none;}
|
|
.v5-admin-btn:hover .v5-admin-label{opacity:1;}
|
|
.v5-admin-btn .ic-gear{display:block;}
|
|
.v5-admin-btn .ic-home{display:none;}
|
|
.v5-admin-mode .v5-admin-btn .ic-gear{display:none;}
|
|
.v5-admin-mode .v5-admin-btn .ic-home{display:block;}
|
|
.v5-admin-mode .v5-admin-btn{border-color:var(--v5-cyan);color:var(--v5-cyan);background:rgba(0,206,201,.08);box-shadow:0 0 15px var(--v5-cyan-glow);}
|
|
.v5-admin-mode .v5-admin-btn:hover{color:var(--v5-cyan);border-color:var(--v5-cyan);}
|
|
.v5-admin-mode .v5-admin-btn .v5-admin-label{color:var(--v5-cyan);}
|
|
|
|
/* Avatar */
|
|
.v5-avatar-w{position:relative;}
|
|
.v5-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--v5-primary),var(--v5-cyan));
|
|
display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:white;
|
|
cursor:pointer;transition:transform .2s,box-shadow .3s;}
|
|
.v5-avatar:hover{transform:scale(1.1);box-shadow:var(--v5-glow-sm);}
|
|
|
|
/* Avatar dropdown */
|
|
.v5-avatar-dd{position:absolute;top:calc(100% + 10px);right:0;width:220px;
|
|
background:var(--v5-glass-strong);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
|
|
border:1px solid var(--v5-glass-border);border-radius:16px;padding:.5rem;
|
|
box-shadow:0 12px 40px rgba(0,0,0,0.12),var(--v5-glow-sm);
|
|
opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;
|
|
transition:all .25s cubic-bezier(.16,1,.3,1);z-index:100;}
|
|
.dark .v5-avatar-dd{box-shadow:0 12px 40px rgba(0,0,0,0.5),var(--v5-glow-md);}
|
|
.v5-avatar-dd.open{opacity:1;transform:none;pointer-events:auto;}
|
|
.v5-avatar-dd .av-profile{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;
|
|
border-bottom:1px solid var(--v5-border-subtle);margin-bottom:.35rem;}
|
|
.v5-avatar-dd .av-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--v5-primary),var(--v5-cyan));
|
|
display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:white;flex-shrink:0;}
|
|
.v5-avatar-dd .av-name{font-size:.78rem;font-weight:700;color:var(--v5-text);}
|
|
.v5-avatar-dd .av-email{font-size:.6rem;color:var(--v5-text-muted);margin-top:.1rem;}
|
|
.v5-avatar-dd .av-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;
|
|
border-radius:10px;font-size:.72rem;font-weight:500;color:var(--v5-text-sec);
|
|
cursor:pointer;transition:all .15s;}
|
|
.v5-avatar-dd .av-item:hover{background:var(--v5-surface-hover);color:var(--v5-text);transform:translateX(2px);}
|
|
.v5-avatar-dd .av-item .av-ic{width:16px;height:16px;display:flex;align-items:center;justify-content:center;opacity:.6;flex-shrink:0;}
|
|
.v5-avatar-dd .av-item:hover .av-ic{opacity:1;}
|
|
.v5-avatar-dd .av-divider{height:1px;background:var(--v5-border-subtle);margin:.3rem .6rem;}
|
|
.v5-avatar-dd .av-item.danger{color:var(--v5-red);}
|
|
.v5-avatar-dd .av-item.danger:hover{background:rgba(255,71,87,.08);}
|
|
|
|
/* Notification panel */
|
|
.v5-noti-panel{position:absolute;top:calc(100% + 10px);right:0;width:300px;max-height:400px;
|
|
background:var(--v5-glass-strong);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
|
|
border:1px solid var(--v5-glass-border);border-radius:16px;
|
|
box-shadow:0 12px 40px rgba(0,0,0,0.12),var(--v5-glow-sm);
|
|
opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;
|
|
transition:all .25s cubic-bezier(.16,1,.3,1);z-index:100;overflow:hidden;}
|
|
.dark .v5-noti-panel{box-shadow:0 12px 40px rgba(0,0,0,0.5),var(--v5-glow-md);}
|
|
.v5-noti-panel.open{opacity:1;transform:none;pointer-events:auto;}
|
|
.v5-noti-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem .85rem;
|
|
border-bottom:1px solid var(--v5-border-subtle);}
|
|
.v5-noti-head .noti-title{font-size:.78rem;font-weight:700;color:var(--v5-text);}
|
|
.v5-noti-head .noti-clear{font-size:.58rem;font-weight:600;color:var(--v5-primary);cursor:pointer;
|
|
border:none;background:none;font-family:inherit;transition:color .2s;}
|
|
.v5-noti-head .noti-clear:hover{color:var(--v5-cyan);}
|
|
.v5-noti-list{overflow-y:auto;max-height:330px;padding:.35rem;}
|
|
.v5-noti-item{display:flex;gap:.55rem;padding:.55rem .5rem;border-radius:10px;cursor:pointer;transition:all .15s;}
|
|
.v5-noti-item:hover{background:var(--v5-surface-hover);}
|
|
.v5-noti-item.unread{background:linear-gradient(135deg,rgba(108,92,231,.05),rgba(108,92,231,.02));}
|
|
.dark .v5-noti-item.unread{background:linear-gradient(135deg,rgba(162,155,254,.06),rgba(162,155,254,.02));}
|
|
.v5-noti-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:.3rem;}
|
|
.v5-noti-dot.info{background:var(--v5-primary);}
|
|
.v5-noti-dot.warn{background:var(--v5-amber);}
|
|
.v5-noti-dot.err{background:var(--v5-red);box-shadow:0 0 6px rgba(255,71,87,.4);}
|
|
.v5-noti-dot.ok{background:var(--v5-green);}
|
|
.v5-noti-body{flex:1;min-width:0;}
|
|
.v5-noti-msg{font-size:.7rem;font-weight:500;color:var(--v5-text);line-height:1.35;}
|
|
.v5-noti-msg b{font-weight:600;}
|
|
.v5-noti-time{font-size:.55rem;color:var(--v5-text-muted);margin-top:.15rem;}
|
|
|
|
/* Admin mode header accent */
|
|
.v5-admin-mode .v5-hdr{border-bottom-color:var(--v5-primary);}
|
|
.v5-admin-mode .v5-hdr::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;
|
|
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;
|
|
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;}
|
|
.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-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)}}
|
|
|
|
/* ===== GLASS TABS ===== */
|
|
.v5-tabs{height:36px;display:flex;align-items:stretch;padding:0 .5rem;gap:1px;overflow-x:auto;
|
|
background:var(--v5-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
|
|
border-bottom:1px solid var(--v5-glass-border);position:relative;z-index:15;flex-shrink:0;}
|
|
.v5-tab{display:flex;align-items:center;gap:.4rem;padding:0 .85rem;font-size:.7rem;font-weight:500;
|
|
color:var(--v5-text-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .25s;}
|
|
.v5-tab:hover{color:var(--v5-text-sec);background:var(--v5-surface-hover);}
|
|
.v5-tab.on{color:var(--v5-primary);font-weight:600;border-bottom-color:var(--v5-primary);background:var(--v5-surface);}
|
|
.v5-tab-x{width:14px;height:14px;border-radius:3px;border:none;background:transparent;color:var(--v5-text-muted);
|
|
font-size:.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;}
|
|
.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);}
|
|
.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;}
|
|
|
|
/* Tab mini icon */
|
|
.v5-tab-mini{position:relative;display:none;width:32px;height:32px;border-radius:10px;border:1px solid var(--v5-glass-border);
|
|
background:var(--v5-surface);backdrop-filter:blur(8px);color:var(--v5-text-muted);cursor:pointer;
|
|
align-items:center;justify-content:center;transition:all .25s;}
|
|
.v5-tab-mini:hover{border-color:var(--v5-primary);color:var(--v5-primary);box-shadow:var(--v5-glow-sm);}
|
|
.v5-tab-mini.visible{display:flex;animation:v5-miniIn .3s cubic-bezier(.16,1,.3,1) both;}
|
|
@keyframes v5-miniIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
|
|
.v5-tab-mini .tab-count{position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;
|
|
background:var(--v5-primary);color:white;font-size:.5rem;font-weight:700;
|
|
display:flex;align-items:center;justify-content:center;line-height:1;}
|
|
|
|
/* Tab dropdown */
|
|
.v5-tab-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:220px;
|
|
background:var(--v5-glass-strong);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
|
|
border:1px solid var(--v5-glass-border);border-radius:14px;padding:.4rem;
|
|
box-shadow:0 12px 40px rgba(0,0,0,0.12),var(--v5-glow-sm);
|
|
opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;
|
|
transition:all .25s cubic-bezier(.16,1,.3,1);z-index:100;}
|
|
.dark .v5-tab-dropdown{box-shadow:0 12px 40px rgba(0,0,0,0.5),var(--v5-glow-md);}
|
|
.v5-tab-dropdown.open{opacity:1;transform:none;pointer-events:auto;}
|
|
.v5-tab-dropdown .td-item{display:flex;align-items:center;justify-content:space-between;
|
|
padding:.45rem .65rem;border-radius:10px;font-size:.72rem;font-weight:500;
|
|
color:var(--v5-text-sec);cursor:pointer;transition:all .15s;gap:.4rem;}
|
|
.v5-tab-dropdown .td-item:hover{background:var(--v5-surface-hover);color:var(--v5-text);transform:translateX(2px);}
|
|
.v5-tab-dropdown .td-item.on{color:var(--v5-primary);font-weight:600;
|
|
background:linear-gradient(135deg,rgba(108,92,231,.1),rgba(108,92,231,.04));}
|
|
.v5-tab-dropdown .td-close{width:16px;height:16px;border-radius:4px;border:none;
|
|
background:transparent;color:var(--v5-text-muted);cursor:pointer;display:flex;
|
|
align-items:center;justify-content:center;font-size:.55rem;opacity:0;transition:all .15s;flex-shrink:0;}
|
|
.v5-tab-dropdown .td-item:hover .td-close{opacity:1;}
|
|
.v5-tab-dropdown .td-close:hover{background:rgba(255,71,87,.12);color:var(--v5-red);}
|
|
.v5-tab-dropdown .td-head{display:flex;align-items:center;justify-content:space-between;
|
|
padding:.3rem .65rem .5rem;border-bottom:1px solid var(--v5-border-subtle);margin-bottom:.25rem;}
|
|
.v5-tab-dropdown .td-title{font-size:.6rem;font-weight:700;color:var(--v5-text-muted);text-transform:uppercase;letter-spacing:.08em;}
|
|
.v5-tab-dropdown .td-expand{font-size:.55rem;font-weight:600;color:var(--v5-primary);cursor:pointer;
|
|
border:none;background:none;font-family:inherit;transition:color .2s;}
|
|
.v5-tab-dropdown .td-expand:hover{color:var(--v5-cyan);}
|
|
|
|
/* ===== GLASS SIDEBAR ===== */
|
|
.v5-body{display:flex;flex:1;overflow:hidden;position:relative;z-index:5;}
|
|
.v5-side{width:var(--v5-sidebar-w);background:var(--v5-glass);backdrop-filter:blur(20px) saturate(1.3);
|
|
-webkit-backdrop-filter:blur(20px) saturate(1.3);border-right:1px solid var(--v5-glass-border);
|
|
padding:.85rem .6rem;overflow-y:auto;display:flex;flex-direction:column;gap:1px;flex-shrink:0;}
|
|
|
|
.v5-side-sec{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
|
|
color:var(--v5-text-muted);padding:1rem .65rem .35rem;
|
|
transition:opacity .3s,height .3s,padding .3s;}
|
|
.v5-side-sec:first-child{padding-top:.25rem;}
|
|
|
|
.v5-si{padding:.5rem .7rem;border-radius:10px;font-size:.77rem;color:var(--v5-text-sec);cursor:pointer;
|
|
transition:all .25s cubic-bezier(.4,0,.2,1);font-weight:450;display:flex;align-items:center;gap:.6rem;
|
|
position:relative;overflow:hidden;height:auto;}
|
|
.v5-si .ic{width:16px;height:16px;display:flex;align-items:center;justify-content:center;opacity:.65;flex-shrink:0;}
|
|
.v5-si:hover{background:var(--v5-surface-hover);color:var(--v5-text);transform:translateX(2px);}
|
|
.v5-si.on{background:linear-gradient(135deg,rgba(108,92,231,.12),rgba(108,92,231,.05));
|
|
color:var(--v5-primary);font-weight:600;border:1px solid rgba(108,92,231,.15);box-shadow:var(--v5-glow-sm);}
|
|
.v5-si.on .ic{opacity:1;}
|
|
.dark .v5-si.on{background:linear-gradient(135deg,rgba(162,155,254,.14),rgba(162,155,254,.05));border-color:rgba(162,155,254,.15);}
|
|
.v5-si::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:var(--v5-primary);
|
|
border-radius:0 2px 2px 0;transform:scaleY(0);transition:transform .3s cubic-bezier(.16,1,.3,1);}
|
|
.v5-si:hover::before{transform:scaleY(.5);opacity:.4;}
|
|
.v5-si.on::before{transform:scaleY(1);opacity:1;}
|
|
|
|
/* Sidebar enter animation */
|
|
.v5-side-anim .v5-si{animation:v5-slideR .4s cubic-bezier(.16,1,.3,1) both;}
|
|
@keyframes v5-slideR{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
|
|
|
|
/* Sidebar toggle */
|
|
.v5-side-toggle{margin-top:auto;padding:.5rem .7rem;border-radius:10px;border:none;
|
|
background:var(--v5-surface);backdrop-filter:blur(8px);color:var(--v5-text-muted);cursor:pointer;
|
|
display:flex;align-items:center;gap:.6rem;font-size:.7rem;font-weight:500;font-family:inherit;
|
|
transition:all .25s;flex-shrink:0;}
|
|
.v5-side-toggle:hover{background:var(--v5-surface-hover);color:var(--v5-primary);}
|
|
.v5-side-toggle svg{transition:transform .3s cubic-bezier(.4,0,.2,1);}
|
|
|
|
/* ===== SIDEBAR COLLAPSE ===== */
|
|
/* Base transition for sidebar collapse/expand */
|
|
.v5-side{transition:width .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1),
|
|
transform .35s cubic-bezier(.16,1,.3,1),opacity .25s,
|
|
border-color .3s,box-shadow .3s;}
|
|
|
|
/* Content area stretches smoothly with sidebar */
|
|
.v5-body .v5-content{transition:all .5s cubic-bezier(.4,0,.2,1);}
|
|
|
|
.v5-side.collapsed{width:56px;padding:.85rem .4rem;overflow:visible;z-index:30;
|
|
border-right-color:var(--v5-primary);box-shadow:var(--v5-glow-sm);}
|
|
.v5-side.collapsed .v5-side-toggle{box-shadow:var(--v5-glow-sm);border-color:var(--v5-primary);color:var(--v5-primary);}
|
|
|
|
/* Collapsed menu items — center icon */
|
|
.v5-side.collapsed .v5-si{justify-content:center;padding:.55rem;border-radius:10px;gap:0;position:relative;
|
|
animation:v5-iconPop .35s cubic-bezier(.16,1,.3,1) both;}
|
|
.v5-side.collapsed .v5-si:nth-child(1){animation-delay:.08s;}
|
|
.v5-side.collapsed .v5-si:nth-child(2){animation-delay:.12s;}
|
|
.v5-side.collapsed .v5-si:nth-child(3){animation-delay:.16s;}
|
|
.v5-side.collapsed .v5-si:nth-child(4){animation-delay:.2s;}
|
|
.v5-side.collapsed .v5-si:nth-child(5){animation-delay:.24s;}
|
|
.v5-side.collapsed .v5-si:nth-child(6){animation-delay:.28s;}
|
|
.v5-side.collapsed .v5-si:nth-child(7){animation-delay:.32s;}
|
|
.v5-side.collapsed .v5-si:nth-child(8){animation-delay:.36s;}
|
|
@keyframes v5-iconPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
|
|
|
|
/* Hide text when collapsed */
|
|
.v5-side.collapsed .v5-si span:not(.ic){width:0;overflow:hidden;opacity:0;
|
|
transition:width .3s cubic-bezier(.4,0,.2,1),opacity .2s;position:absolute;}
|
|
|
|
/* Tooltip on hover */
|
|
.v5-side.collapsed .v5-si:hover::after{content:attr(title);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
|
|
background:var(--v5-surface-solid);backdrop-filter:blur(12px);border:1px solid var(--v5-glass-border);
|
|
padding:.3rem .6rem;border-radius:8px;font-size:.68rem;font-weight:500;color:var(--v5-text);
|
|
white-space:nowrap;z-index:100;box-shadow:0 4px 15px rgba(0,0,0,.1);pointer-events:none;
|
|
animation:v5-tipIn .2s cubic-bezier(.16,1,.3,1) both;}
|
|
@keyframes v5-tipIn{from{opacity:0;transform:translateX(-4px) translateY(-50%)}to{opacity:1;transform:translateX(0) translateY(-50%)}}
|
|
|
|
.v5-side.collapsed .v5-si .ic{opacity:.7;margin:0;transition:opacity .25s,transform .25s;}
|
|
.v5-side.collapsed .v5-si.on .ic{opacity:1;}
|
|
.v5-side.collapsed .v5-si:hover .ic{transform:scale(1.15);}
|
|
.v5-side.collapsed .v5-si:hover{transform:none;}
|
|
|
|
/* Section headers — collapse with animation */
|
|
.v5-side.collapsed .v5-side-sec{height:0;overflow:hidden;padding:0;margin:0;opacity:0;
|
|
transition:height .3s cubic-bezier(.4,0,.2,1),padding .3s,opacity .15s;}
|
|
|
|
/* Expand: text slides back in with stagger */
|
|
.v5-side:not(.collapsed) .v5-si span:not(.ic){opacity:1;
|
|
transition:opacity .35s .2s cubic-bezier(.16,1,.3,1),width .35s .15s;}
|
|
.v5-side:not(.collapsed) .v5-si{animation:v5-menuSlideIn .4s cubic-bezier(.16,1,.3,1) both;}
|
|
.v5-side:not(.collapsed) .v5-si:nth-child(1){animation-delay:.05s;}
|
|
.v5-side:not(.collapsed) .v5-si:nth-child(2){animation-delay:.08s;}
|
|
.v5-side:not(.collapsed) .v5-si:nth-child(3){animation-delay:.11s;}
|
|
.v5-side:not(.collapsed) .v5-si:nth-child(4){animation-delay:.14s;}
|
|
.v5-side:not(.collapsed) .v5-si:nth-child(5){animation-delay:.17s;}
|
|
.v5-side:not(.collapsed) .v5-si:nth-child(6){animation-delay:.2s;}
|
|
.v5-side:not(.collapsed) .v5-si:nth-child(7){animation-delay:.23s;}
|
|
.v5-side:not(.collapsed) .v5-si:nth-child(8){animation-delay:.26s;}
|
|
@keyframes v5-menuSlideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
|
|
.v5-side:not(.collapsed) .v5-side-sec{opacity:1;
|
|
transition:opacity .35s .1s,height .35s .05s,padding .35s .05s;}
|
|
|
|
/* Category groups */
|
|
.v5-side-group{display:contents;}
|
|
.v5-side.collapsed .v5-side-group{display:flex;flex-direction:column;gap:1px;position:relative;}
|
|
|
|
/* Category header (collapsed only) */
|
|
.v5-side-cat{height:0;overflow:hidden;opacity:0;padding:0;margin:0;pointer-events:none;
|
|
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
|
border-radius:10px;cursor:pointer;position:relative;color:var(--v5-text-muted);
|
|
transition:height .3s,opacity .2s,padding .3s,margin .3s;}
|
|
.v5-side.collapsed .v5-side-cat{height:auto;overflow:visible;opacity:1;pointer-events:auto;
|
|
padding:.55rem;margin-top:.4rem;
|
|
animation:v5-catIn .4s cubic-bezier(.16,1,.3,1) both;}
|
|
.v5-side.collapsed .v5-side-cat:first-child{margin-top:0;}
|
|
.v5-side.collapsed .v5-side-cat:hover{background:var(--v5-surface-hover);color:var(--v5-primary);transform:scale(1.05);}
|
|
.v5-side.collapsed .v5-side-cat.open{background:linear-gradient(135deg,rgba(108,92,231,.1),rgba(108,92,231,.04));color:var(--v5-primary);}
|
|
.dark .v5-side.collapsed .v5-side-cat.open{background:linear-gradient(135deg,rgba(162,155,254,.1),rgba(162,155,254,.04));}
|
|
.v5-side-cat .cat-label{font-size:.48rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
|
|
margin-top:.15rem;text-align:center;line-height:1;}
|
|
.v5-side.collapsed .v5-side-group:nth-child(1) .v5-side-cat{animation-delay:.06s;}
|
|
.v5-side.collapsed .v5-side-group:nth-child(2) .v5-side-cat{animation-delay:.12s;}
|
|
.v5-side.collapsed .v5-side-group:nth-child(3) .v5-side-cat{animation-delay:.18s;}
|
|
.v5-side.collapsed .v5-side-group:nth-child(4) .v5-side-cat{animation-delay:.24s;}
|
|
@keyframes v5-catIn{from{opacity:0;transform:scale(.6) translateY(8px)}to{opacity:1;transform:none}}
|
|
|
|
/* Hide items in collapsed (shown in flyout) */
|
|
.v5-side.collapsed .v5-side-group .v5-si{height:0;padding:0;margin:0;overflow:hidden;opacity:0;
|
|
transition:height .3s cubic-bezier(.4,0,.2,1),padding .3s,opacity .2s,margin .3s;}
|
|
.v5-side.collapsed .v5-side-group .v5-side-sec{height:0;padding:0;margin:0;overflow:hidden;opacity:0;
|
|
transition:all .3s cubic-bezier(.4,0,.2,1);}
|
|
.v5-side:not(.collapsed) .v5-side-group .v5-si{
|
|
transition:height .35s .12s cubic-bezier(.16,1,.3,1),padding .35s .12s,opacity .35s .15s,margin .35s .12s;}
|
|
|
|
/* ===== SUBMENU EXPAND/COLLAPSE =====
|
|
grid-template-rows:0fr↔1fr 트릭은 직속 child 가 단 하나일 때만 동작 (여러 개면 implicit row 가 auto 로 펼쳐짐).
|
|
그래서 .v5-submenu 안을 .v5-submenu-inner 로 감싸 항상 child 가 1개가 되도록 보장한다. */
|
|
.v5-submenu{display:grid;grid-template-rows:0fr;overflow:hidden;padding-left:1.5rem;
|
|
transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1),opacity .25s;}
|
|
.v5-submenu>*{overflow:hidden;min-height:0;}
|
|
.v5-submenu.expanded{grid-template-rows:1fr;opacity:1;}
|
|
.v5-submenu:not(.expanded){opacity:0;}
|
|
.v5-submenu-inner{display:flex;flex-direction:column;gap:1px;}
|
|
|
|
/* Sub items stagger slide in */
|
|
.v5-sub-item{transform:translateX(-10px);opacity:0;
|
|
transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s,background .2s,color .2s;}
|
|
.v5-submenu.expanded .v5-sub-item{transform:none;opacity:1;}
|
|
|
|
/* Sub items hover — indent effect */
|
|
.v5-sub-item:hover{padding-left:1rem !important;}
|
|
|
|
/* Hide child menus when sidebar collapsed */
|
|
.v5-side.collapsed .v5-si-child,
|
|
.v5-side.collapsed .v5-submenu{height:0;padding:0;margin:0;overflow:hidden;opacity:0;pointer-events:none;
|
|
grid-template-rows:0fr !important;transition:none;}
|
|
/* Hide tooltip when flyout is open */
|
|
.v5-si:has(> .v5-side-flyout.open):hover::after{display:none !important;}
|
|
|
|
/* Collapsed toggle — icon rotates, text fades */
|
|
.v5-side.collapsed .v5-side-toggle span{width:0;overflow:hidden;opacity:0;
|
|
transition:width .25s cubic-bezier(.4,0,.2,1),opacity .15s;}
|
|
.v5-side.collapsed .v5-side-toggle{justify-content:center;padding:.55rem;}
|
|
.v5-side.collapsed .v5-side-toggle svg{transform:rotate(180deg);}
|
|
.v5-side:not(.collapsed) .v5-side-toggle span{opacity:1;
|
|
transition:opacity .35s .25s cubic-bezier(.16,1,.3,1);}
|
|
.v5-side:not(.collapsed) .v5-side-toggle span{opacity:1;transition:opacity .3s .2s;}
|
|
|
|
/* Flyout panel */
|
|
.v5-side-flyout{position:absolute;left:calc(100% + 8px);top:0;width:180px;
|
|
background:var(--v5-surface-solid);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
|
|
border:1px solid var(--v5-glass-border);border-radius:14px;padding:.4rem;
|
|
box-shadow:0 8px 32px rgba(0,0,0,0.12),var(--v5-glow-sm);
|
|
opacity:0;transform:translateX(-12px) scale(.92);pointer-events:none;
|
|
transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);z-index:100;}
|
|
.dark .v5-side-flyout{box-shadow:0 8px 32px rgba(0,0,0,0.5),var(--v5-glow-md);}
|
|
.v5-side-flyout.open{opacity:1;transform:none;pointer-events:auto;}
|
|
.v5-side-flyout .fly-item{animation:v5-flyItemIn .25s cubic-bezier(.16,1,.3,1) both;}
|
|
.v5-side-flyout .fly-item:nth-child(2){animation-delay:.03s;}
|
|
.v5-side-flyout .fly-item:nth-child(3){animation-delay:.06s;}
|
|
.v5-side-flyout .fly-item:nth-child(4){animation-delay:.09s;}
|
|
.v5-side-flyout .fly-item:nth-child(5){animation-delay:.12s;}
|
|
.v5-side-flyout .fly-item:nth-child(6){animation-delay:.15s;}
|
|
.v5-side-flyout .fly-item:nth-child(7){animation-delay:.18s;}
|
|
@keyframes v5-flyItemIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
|
|
.v5-side-flyout .fly-title{font-size:.58rem;font-weight:700;color:var(--v5-text-muted);
|
|
text-transform:uppercase;letter-spacing:.08em;padding:.3rem .6rem .45rem;}
|
|
.v5-side-flyout .fly-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;
|
|
border-radius:10px;font-size:.72rem;font-weight:500;color:var(--v5-text-sec);
|
|
cursor:pointer;transition:all .15s;}
|
|
.v5-side-flyout .fly-item:hover{background:var(--v5-surface-hover);color:var(--v5-text);transform:translateX(2px);}
|
|
.v5-side-flyout .fly-item.on{color:var(--v5-primary);font-weight:600;
|
|
background:linear-gradient(135deg,rgba(108,92,231,.1),rgba(108,92,231,.04));}
|
|
.v5-side-flyout .fly-item .ic{width:14px;height:14px;display:flex;align-items:center;justify-content:center;opacity:.6;flex-shrink:0;}
|
|
.v5-side-flyout .fly-item.on .ic{opacity:1;}
|
|
|
|
/* Admin sidebar accent */
|
|
.v5-admin-side .v5-si.on{background:linear-gradient(135deg,rgba(0,206,201,.12),rgba(0,206,201,.05));
|
|
color:var(--v5-cyan);border-color:rgba(0,206,201,.2);}
|
|
.v5-admin-side .v5-si.on .ic{opacity:1;}
|
|
.v5-admin-side .v5-si::before{background:var(--v5-cyan);}
|
|
.dark .v5-admin-side .v5-si.on{background:linear-gradient(135deg,rgba(85,239,196,.12),rgba(85,239,196,.05));
|
|
border-color:rgba(85,239,196,.15);}
|
|
|
|
/* ===== MODE TRANSITION ===== */
|
|
.v5-mode-fade{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0;
|
|
background:radial-gradient(ellipse at center,var(--v5-primary-glow),transparent 70%);
|
|
transition:opacity .5s cubic-bezier(.4,0,.2,1);}
|
|
.v5-mode-fade.in{opacity:1;}
|
|
|
|
.v5-side.slide-out{transform:translateX(-20px);opacity:0;transition:transform .3s cubic-bezier(.4,0,1,1),opacity .2s;}
|
|
.v5-side.slide-in{animation:v5-sideSlideIn .35s cubic-bezier(.16,1,.3,1) both;}
|
|
@keyframes v5-sideSlideIn{from{transform:translateX(-20px);opacity:0}to{transform:none;opacity:1}}
|
|
.v5-tabs.fade-out{opacity:0;transition:opacity .2s;}
|
|
.v5-tabs.fade-in{animation:v5-tabsFadeIn .3s cubic-bezier(.16,1,.3,1) both;}
|
|
@keyframes v5-tabsFadeIn{from{opacity:0}to{opacity:1}}
|
|
|
|
/* ===== 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);}
|
|
.v5-theme-fade.in{opacity:1;}
|
|
|
|
/* ===== CONTENT PLACEHOLDER ===== */
|
|
.v5-content{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;}
|
|
.v5-placeholder{
|
|
flex:1;display:flex;align-items:center;justify-content:center;
|
|
border:2px dashed var(--v5-border);border-radius:16px;
|
|
background:var(--v5-glass);backdrop-filter:blur(12px);
|
|
color:var(--v5-text-muted);font-size:.85rem;font-weight:500;min-height:300px;}
|
|
|
|
/* ===== V5 DROPDOWN GLASS OVERRIDES ===== */
|
|
.v5-hdr-r [data-radix-popper-content-wrapper]{z-index:100 !important;}
|
|
.v5-hdr-r [role="menu"],
|
|
.v5-avatar-dd-content{
|
|
background:var(--v5-glass-strong) !important;backdrop-filter:blur(20px) saturate(1.4) !important;
|
|
-webkit-backdrop-filter:blur(20px) saturate(1.4) !important;
|
|
border:1px solid var(--v5-glass-border) !important;border-radius:14px !important;
|
|
box-shadow:0 12px 40px rgba(0,0,0,0.12),var(--v5-glow-sm) !important;
|
|
animation:v5-ddIn .25s cubic-bezier(.16,1,.3,1) both !important;
|
|
padding:.4rem !important;}
|
|
.dark .v5-hdr-r [role="menu"],
|
|
.dark .v5-avatar-dd-content{box-shadow:0 12px 40px rgba(0,0,0,0.5),var(--v5-glow-md) !important;}
|
|
@keyframes v5-ddIn{from{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:none}}
|
|
|
|
/* Avatar dropdown items glass style */
|
|
.v5-avatar-dd-content [role="menuitem"]{border-radius:8px !important;transition:all .15s !important;font-size:.75rem !important;}
|
|
.v5-avatar-dd-content [role="menuitem"]:hover{background:var(--v5-surface-hover) !important;transform:translateX(2px);}
|
|
|
|
/* ===== MOBILE RESPONSIVE ===== */
|
|
.v5-mobile-toggle{display:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--v5-glass-border);
|
|
background:var(--v5-surface);backdrop-filter:blur(8px);color:var(--v5-text-muted);cursor:pointer;
|
|
align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
|
|
.v5-mobile-toggle:hover{border-color:var(--v5-primary);color:var(--v5-primary);}
|
|
|
|
.v5-side-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:25;
|
|
opacity:0;transition:opacity .3s;pointer-events:none;}
|
|
.v5-side-overlay.open{opacity:1;pointer-events:auto;}
|
|
|
|
@media(max-width:768px){
|
|
.v5-mobile-toggle{display:flex;}
|
|
.v5-side{position:fixed;left:0;top:0;bottom:0;z-index:30;
|
|
transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
|
|
width:260px;padding-top:60px;}
|
|
.v5-side.mobile-open{transform:none;}
|
|
.v5-side-overlay{display:block;}
|
|
.v5-hdr-bc{display:none;}
|
|
.v5-admin-badge{display:none !important;}
|
|
.v5-hdr-logo{font-size:.9rem;}
|
|
.v5-tabs{padding:0 .3rem;}
|
|
.v5-tab{padding:0 .6rem;font-size:.65rem;}
|
|
.v5-tab-toggle{display:none;}
|
|
.v5-content{padding:.75rem;}
|
|
.v5-admin-label{display:none !important;}
|
|
.v5-pill{display:none;}
|
|
}
|
|
@media(min-width:769px) and (max-width:1024px){
|
|
:root{--v5-sidebar-w:180px;}
|
|
.v5-si{font-size:.72rem;padding:.45rem .6rem;}
|
|
.v5-content{padding:1rem;}
|
|
}
|