727 lines
20 KiB
CSS
727 lines
20 KiB
CSS
/* =====================================================================
|
|
공통 앱 셸 — §6.3
|
|
톱바 56px, 좌측 네비 240px. border-bottom 1px hair, 그림자 없음.
|
|
강조선 금지. 활성 네비 = 아이콘 accent + accent-tint 알약 배경(네비 알약만 8px 관용).
|
|
===================================================================== */
|
|
|
|
.vg-shell {
|
|
width: 100%;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: var(--bg-app);
|
|
}
|
|
.vg-shell--fullscreen {
|
|
height: 100dvh;
|
|
}
|
|
|
|
/* ── 톱바 ── */
|
|
.vg-topbar {
|
|
flex: 0 0 var(--topbar-h);
|
|
min-width: 0;
|
|
height: var(--topbar-h);
|
|
background: var(--bg-surface);
|
|
border-bottom: 1px solid var(--hair);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-5);
|
|
padding: 0 var(--sp-6);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 30;
|
|
}
|
|
.vg-topbar__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 44px;
|
|
text-decoration: none;
|
|
}
|
|
.vg-topbar__brand:hover {
|
|
text-decoration: none;
|
|
}
|
|
.vg-topbar__mark {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
flex: none;
|
|
}
|
|
.vg-topbar__wm {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
color: var(--text-strong);
|
|
}
|
|
.vg-topbar__wm .v {
|
|
color: var(--accent);
|
|
}
|
|
/* 역할 컨텍스트 라벨 — mono accent, 조용한 신호. 디바이더는 강조선 아님(셸 구획). */
|
|
.vg-topbar__role {
|
|
font-family: var(--font-num);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-accent);
|
|
padding-left: var(--sp-4);
|
|
margin-left: var(--sp-2);
|
|
border-left: 1px solid var(--hair);
|
|
}
|
|
.vg-topbar__spacer {
|
|
flex: 1;
|
|
}
|
|
.vg-topbar__actions {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-2);
|
|
}
|
|
.vg-topbar__switch {
|
|
min-width: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 3px;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
background: var(--bg-surface-2);
|
|
}
|
|
.vg-topbar__switch-link {
|
|
min-width: 0;
|
|
min-height: 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 0 8px;
|
|
border-radius: calc(var(--radius) - 2px);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
|
|
}
|
|
.vg-topbar__switch-link:active {
|
|
transform: scale(0.95);
|
|
}
|
|
.vg-topbar__switch-link:hover,
|
|
.vg-topbar__switch-link.is-active {
|
|
background: var(--bg-surface);
|
|
color: var(--text-strong);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* 톱바 아이콘 버튼 (테마/로그아웃) */
|
|
.vg-iconbtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: var(--radius);
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
color: var(--text-body);
|
|
cursor: pointer;
|
|
transition:
|
|
transform var(--dur-fast) var(--ease-spring),
|
|
background var(--dur-fast) var(--ease-out),
|
|
color var(--dur-fast) var(--ease-out);
|
|
}
|
|
.vg-iconbtn:active {
|
|
transform: scale(0.92);
|
|
}
|
|
.vg-iconbtn:hover {
|
|
background: var(--bg-surface-2);
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
/* 사용자 칩 */
|
|
.vg-topbar__user {
|
|
min-width: 0;
|
|
max-width: min(320px, 34vw);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 5px 11px 5px 6px;
|
|
border-radius: 100px;
|
|
background: var(--bg-surface-2);
|
|
}
|
|
.vg-topbar__avatar {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--accent-tint);
|
|
color: var(--accent-deep);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
flex: none;
|
|
overflow: hidden;
|
|
}
|
|
.vg-topbar__avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: cover;
|
|
}
|
|
.vg-topbar__uname {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
/* ── 본문 그리드: 좌측 네비 + 메인 ── */
|
|
.vg-shell__body {
|
|
/* 현재 네비 폭(브레이크포인트별). 그리드와 구분선이 같은 값을 공유한다. */
|
|
--nav-cur: var(--nav-w);
|
|
display: grid;
|
|
grid-template-columns: var(--nav-cur) 1fr;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
align-items: start;
|
|
/* 전체 높이 사이드바 구분선: sticky 네비(뷰포트 높이)에 의존하지 않고
|
|
본문 그리드 전체 높이를 따라가는 컨테이너 배경 하어라인. */
|
|
background-image: linear-gradient(var(--hair), var(--hair));
|
|
background-repeat: no-repeat;
|
|
background-position: var(--nav-cur) 0;
|
|
background-size: 1px 100%;
|
|
}
|
|
.vg-shell__body--bare {
|
|
grid-template-columns: 1fr;
|
|
background-image: none; /* 네비 없는 레이아웃엔 구분선 없음 */
|
|
}
|
|
|
|
/* ── 좌측 네비 ── */
|
|
.vg-nav {
|
|
position: relative;
|
|
top: auto;
|
|
align-self: start;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
background: var(--bg-surface);
|
|
/* 구분선은 .vg-shell__body 컨테이너 배경(전체 높이)이 그린다. */
|
|
padding: var(--sp-5) var(--sp-3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-1);
|
|
overflow-y: auto;
|
|
}
|
|
.vg-nav__label {
|
|
font-family: var(--font-num);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
padding: var(--sp-2) var(--sp-3) 6px;
|
|
}
|
|
.vg-nav__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
padding: 9px 12px;
|
|
border-radius: var(--radius); /* 네비 알약만 8px 관용 §6.3 */
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-body);
|
|
text-decoration: none;
|
|
transition:
|
|
background var(--dur-fast) var(--ease-out),
|
|
color var(--dur-fast) var(--ease-out);
|
|
}
|
|
.vg-nav__item:hover {
|
|
background: var(--bg-surface-2);
|
|
color: var(--text-strong);
|
|
text-decoration: none;
|
|
}
|
|
/* 포커스 가시성 — 보태니컬 is-active 규칙이 box-shadow 를 점유해 전역
|
|
:focus-visible 링이 사라지므로 outline 채널로 링을 보장한다(WCAG 2.4.7). */
|
|
.vg-nav__item:focus-visible {
|
|
outline: 3px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
.vg-nav__item .vg-nav__ic {
|
|
flex: none;
|
|
color: var(--text-muted);
|
|
display: inline-flex;
|
|
}
|
|
/* 활성: 아이콘 accent + accent-tint 알약 배경. 3px 강조바 금지. */
|
|
.vg-nav__item.is-active {
|
|
background: var(--accent-tint);
|
|
color: var(--accent-deep);
|
|
font-weight: 600;
|
|
}
|
|
.vg-nav__item.is-active .vg-nav__ic {
|
|
color: var(--accent);
|
|
}
|
|
.vg-nav__spacer {
|
|
flex: 1;
|
|
}
|
|
.vg-nav__foot {
|
|
padding: var(--sp-3) var(--sp-3) 0;
|
|
border-top: 1px solid var(--hair);
|
|
margin-top: var(--sp-3);
|
|
}
|
|
.vg-nav__ethic {
|
|
font-size: 11.5px;
|
|
line-height: 1.55;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ── 메인 콘텐츠 ── */
|
|
.vg-main {
|
|
min-width: 0; /* 그리드 자식 overflow 방지 */
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior-y: contain;
|
|
scrollbar-gutter: stable;
|
|
padding: var(--sp-7) var(--sp-6) var(--sp-8);
|
|
}
|
|
.vg-main__inner {
|
|
max-width: var(--maxw);
|
|
margin: 0 auto;
|
|
}
|
|
.vg-main--wide .vg-main__inner {
|
|
max-width: min(1480px, 100%);
|
|
}
|
|
/* 풀-블리드(세션 화면 등): 패딩/최대폭 없이 셸만 */
|
|
.vg-main--bleed {
|
|
padding: 0;
|
|
}
|
|
.vg-main--bleed .vg-main__inner {
|
|
max-width: none;
|
|
}
|
|
|
|
/* ── 반응형 ── */
|
|
@media (max-width: 1024px) {
|
|
.vg-shell__body {
|
|
/* 그리드·구분선이 함께 축소 폭을 따른다 */
|
|
--nav-cur: var(--nav-w-collapsed);
|
|
}
|
|
.vg-shell__body--bare {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.vg-nav {
|
|
padding: var(--sp-4) var(--sp-2);
|
|
}
|
|
.vg-nav__label,
|
|
.vg-nav__item span:not(.vg-nav__ic),
|
|
.vg-nav__ethic {
|
|
display: none;
|
|
}
|
|
.vg-nav__item {
|
|
justify-content: center;
|
|
padding: 11px;
|
|
}
|
|
}
|
|
@media (max-width: 720px) {
|
|
html {
|
|
scroll-padding-top: calc(var(--topbar-h) + var(--sp-2));
|
|
scroll-padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom) + var(--sp-4));
|
|
}
|
|
.vg-shell {
|
|
height: 100dvh;
|
|
}
|
|
.vg-shell__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
position: relative;
|
|
background-image: none; /* 네비가 하단바로 전환 — 세로 구분선 제거 */
|
|
}
|
|
.vg-shell__body--bare {
|
|
display: flex;
|
|
}
|
|
.vg-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: auto;
|
|
z-index: 40;
|
|
height: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));
|
|
padding: 6px max(10px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
|
|
border-right: 0;
|
|
border-top: 1px solid var(--hair);
|
|
border-bottom: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
gap: 4px;
|
|
background: var(--bg-surface);
|
|
box-shadow: var(--shadow-island);
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
-webkit-backdrop-filter: var(--glass-blur);
|
|
backdrop-filter: var(--glass-blur);
|
|
}
|
|
.vg-nav__label,
|
|
.vg-nav__spacer,
|
|
.vg-nav__foot {
|
|
display: none;
|
|
}
|
|
.vg-nav__item {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
max-width: 96px;
|
|
height: 48px;
|
|
min-height: 48px;
|
|
padding: 3px 2px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 2px;
|
|
border-radius: var(--radius);
|
|
text-align: center;
|
|
transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out);
|
|
}
|
|
.vg-nav__item:active {
|
|
transform: scale(0.93);
|
|
}
|
|
.vg-nav__item .vg-nav__ic {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.vg-nav__item .vg-nav__ic svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.vg-nav__item .vg-nav__txt,
|
|
.vg-nav__item span:not(.vg-nav__ic) {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.01em;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.vg-topbar__role {
|
|
display: none;
|
|
}
|
|
.vg-topbar__uname {
|
|
display: none;
|
|
}
|
|
.vg-topbar {
|
|
height: 50px;
|
|
min-height: 50px;
|
|
padding: 0 var(--sp-3);
|
|
gap: var(--sp-2);
|
|
}
|
|
.vg-topbar__brand {
|
|
min-height: 44px;
|
|
gap: 8px;
|
|
}
|
|
.vg-topbar__mark {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.vg-topbar__wm {
|
|
font-size: 16px;
|
|
}
|
|
.vg-topbar__user {
|
|
display: none;
|
|
}
|
|
.vg-topbar__actions {
|
|
flex: 0 0 auto;
|
|
gap: 4px;
|
|
}
|
|
.vg-topbar__switch {
|
|
height: 38px;
|
|
padding: 2px;
|
|
}
|
|
.vg-topbar__switch-link {
|
|
min-height: 34px;
|
|
padding: 0 8px;
|
|
font-size: 11.5px;
|
|
}
|
|
.vg-topbar__switch-link span {
|
|
display: inline;
|
|
}
|
|
.vg-iconbtn {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.vg-main {
|
|
padding: var(--sp-4) var(--sp-4) calc(var(--bottom-bar-h) + env(safe-area-inset-bottom) + var(--sp-6));
|
|
}
|
|
.vg-main--bleed {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* ── Botanical glass canvas ── */
|
|
body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
|
|
position: relative;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav,
|
|
body[data-role] .vg-shell--botanical .vg-main {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.vg-shell--botanical .vg-main:not(.vg-main--bleed),
|
|
.vg-shell--learner-dashboard .vg-main:not(.vg-main--bleed) {
|
|
background: transparent;
|
|
}
|
|
/* 학습 대시보드 전용 규칙은 콘텐츠 패딩만 소유한다. 앱 크롬은 아래 SSOT를 그대로 쓴다. */
|
|
.vg-shell--learner-dashboard .vg-main:not(.vg-main--bleed) {
|
|
padding: 36px 32px 72px;
|
|
background: transparent;
|
|
}
|
|
/* ── App chrome authority (파일 최종 우선순위) ── */
|
|
.vg-shell--botanical {
|
|
--topbar-h: 64px;
|
|
--nav-w: 230px;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-topbar {
|
|
height: var(--topbar-h);
|
|
background: color-mix(in srgb, var(--bg-surface) 76%, transparent);
|
|
border-bottom-color: var(--botanical-hair);
|
|
color: var(--text-strong);
|
|
-webkit-backdrop-filter: var(--glass-blur);
|
|
backdrop-filter: var(--glass-blur);
|
|
}
|
|
[data-theme="dark"] body[data-role] .vg-shell--botanical .vg-topbar {
|
|
background: color-mix(in srgb, var(--bg-app) 76%, transparent);
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-topbar__wm,
|
|
body[data-role] .vg-shell--botanical .vg-topbar__role,
|
|
body[data-role] .vg-shell--botanical .vg-topbar__uname,
|
|
body[data-role] .vg-shell--botanical .vg-iconbtn {
|
|
color: var(--text-strong);
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-topbar__wm {
|
|
font-size: 19px;
|
|
font-weight: 760;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-topbar__role {
|
|
border-left-color: var(--botanical-hair);
|
|
font-size: 14px;
|
|
letter-spacing: 0;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-topbar__user {
|
|
background: var(--bg-surface-2);
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-topbar__avatar {
|
|
background: var(--accent-tint);
|
|
color: var(--accent-deep);
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
|
|
--nav-cur: var(--nav-w);
|
|
/* 흰 종이처럼 보이던 불투명 면을 낮추고, 카드가 떠 보이는 옅은 세이지 캔버스로 정리한다. */
|
|
background-color: color-mix(in srgb, var(--glass-canvas) 94%, var(--accent));
|
|
background-image:
|
|
linear-gradient(var(--botanical-hair), var(--botanical-hair)),
|
|
radial-gradient(circle at 68% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34rem),
|
|
radial-gradient(circle at 42% 72%, color-mix(in srgb, var(--botanical-gold) 13%, transparent), transparent 42rem),
|
|
var(--asset-botanical-corner),
|
|
radial-gradient(circle at 76% 10%, var(--botanical-glow), transparent 30rem);
|
|
background-repeat: no-repeat;
|
|
background-position: var(--nav-cur) 0, center top, center bottom, right top, center top;
|
|
background-size: 1px 100%, 100% 52rem, 100% 62rem, min(66vw, 980px) auto, 100% 46rem;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav {
|
|
top: auto;
|
|
padding: var(--sp-5) var(--sp-3);
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 34%, transparent), color-mix(in srgb, var(--bg-app) 54%, transparent)),
|
|
var(--asset-botanical-sidebar) center bottom / auto 72% no-repeat,
|
|
color-mix(in srgb, var(--bg-surface) 62%, transparent);
|
|
color: var(--text-strong);
|
|
-webkit-backdrop-filter: var(--glass-blur);
|
|
backdrop-filter: var(--glass-blur);
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__label,
|
|
body[data-role] .vg-shell--botanical .vg-nav__ethic {
|
|
color: var(--text-muted);
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item {
|
|
position: relative;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
min-height: 50px;
|
|
padding: 10px 12px;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
gap: 11px;
|
|
border: 1px solid transparent;
|
|
color: var(--text-body);
|
|
font-size: 15px;
|
|
text-align: left;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item:hover {
|
|
border-color: color-mix(in srgb, var(--botanical-gold) 18%, var(--border-subtle));
|
|
background: color-mix(in srgb, var(--bg-surface) 86%, var(--bg-tint));
|
|
color: var(--text-strong);
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item.is-active {
|
|
padding-right: 58px;
|
|
border-color: color-mix(in srgb, var(--botanical-gold) 34%, var(--border-subtle));
|
|
background: linear-gradient(
|
|
112deg,
|
|
color-mix(in srgb, var(--bg-surface) 94%, var(--botanical-gold)),
|
|
color-mix(in srgb, var(--bg-surface-2) 78%, transparent)
|
|
);
|
|
color: var(--text-strong);
|
|
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 84%, transparent);
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item.is-active .vg-nav__ic {
|
|
color: var(--accent);
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item.is-active::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 58px;
|
|
height: 100%;
|
|
background: var(--asset-botanical-leaf) right -20px bottom -42px / 76px 96px no-repeat;
|
|
opacity: 0.28;
|
|
pointer-events: none;
|
|
display: block;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__foot {
|
|
border-top-color: var(--botanical-hair);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
|
|
--nav-cur: var(--nav-w-collapsed);
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav {
|
|
padding: var(--sp-4) var(--sp-2);
|
|
background-image: none;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item,
|
|
body[data-role] .vg-shell--botanical .vg-nav__item.is-active {
|
|
min-height: 46px;
|
|
justify-content: center;
|
|
padding: 11px;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item.is-active::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-image:
|
|
radial-gradient(circle at 74% 12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 22rem),
|
|
radial-gradient(circle at 18% 82%, color-mix(in srgb, var(--botanical-gold) 14%, transparent), transparent 28rem),
|
|
var(--asset-botanical-corner);
|
|
background-repeat: no-repeat;
|
|
background-position: right top, left bottom, right -140px bottom -80px;
|
|
background-size: 100% 34rem, 100% 38rem, 430px auto;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: auto;
|
|
z-index: 40;
|
|
height: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));
|
|
padding: 6px max(10px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
|
|
border-top: 1px solid var(--botanical-hair);
|
|
border-bottom: 0;
|
|
border-right: 0;
|
|
border-left: 0;
|
|
background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
|
|
box-shadow: var(--shadow-island);
|
|
-webkit-backdrop-filter: var(--glass-blur);
|
|
backdrop-filter: var(--glass-blur);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
gap: 4px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item,
|
|
body[data-role] .vg-shell--botanical .vg-nav__item.is-active {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
max-width: 96px;
|
|
height: 48px;
|
|
min-height: 48px;
|
|
padding: 3px 2px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 2px;
|
|
border-radius: var(--radius);
|
|
text-align: center;
|
|
border: 1px solid transparent;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item.is-active {
|
|
padding-right: 2px;
|
|
background: linear-gradient(
|
|
112deg,
|
|
color-mix(in srgb, var(--bg-surface) 92%, var(--botanical-gold)),
|
|
color-mix(in srgb, var(--bg-surface-2) 80%, transparent)
|
|
);
|
|
border-color: color-mix(in srgb, var(--botanical-gold) 34%, var(--border-subtle));
|
|
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 84%, transparent);
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item.is-active::after {
|
|
display: none;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item .vg-nav__ic svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
body[data-role] .vg-shell--botanical .vg-nav__item .vg-nav__txt,
|
|
body[data-role] .vg-shell--botanical .vg-nav__item span:not(.vg-nav__ic) {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.01em;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
body[data-role="learner"] .vg-shell--botanical .vg-nav {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 4px;
|
|
overflow-x: visible;
|
|
}
|
|
body[data-role="learner"] .vg-shell--botanical .vg-nav__item,
|
|
body[data-role="learner"] .vg-shell--botanical .vg-nav__item.is-active {
|
|
width: 100%;
|
|
max-width: none;
|
|
min-width: 0;
|
|
height: 48px;
|
|
padding: 3px 2px;
|
|
}
|
|
}
|