전 저장소 리팩터링과 SSOT 정비
This commit is contained in:
Yun Chan
parent
14ecbd4e7d
commit
3dfddcac6f
173 changed files with 19679 additions and 6952 deletions
|
|
@ -5,15 +5,22 @@
|
|||
===================================================================== */
|
||||
|
||||
.vg-shell {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--bg-app);
|
||||
}
|
||||
.vg-shell--fullscreen {
|
||||
min-height: 100dvh;
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
/* ── 톱바 ── */
|
||||
.vg-topbar {
|
||||
flex: 0 0 var(--topbar-h);
|
||||
min-width: 0;
|
||||
height: var(--topbar-h);
|
||||
background: var(--bg-surface);
|
||||
|
|
@ -104,50 +111,6 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 운영 콘솔은 생성 시안처럼 어두운 크롬을 쓴다. 본문 컴포넌트 토큰은 그대로 유지한다. */
|
||||
body[data-role="admin"] .vg-topbar {
|
||||
background: #17211f;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.08);
|
||||
color: #eef4f2;
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__wm,
|
||||
body[data-role="admin"] .vg-topbar__role,
|
||||
body[data-role="admin"] .vg-topbar__uname {
|
||||
color: #eef4f2;
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__brand svg {
|
||||
color: #7eb8ad;
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__user {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__switch {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__switch-link {
|
||||
color: rgba(238, 244, 242, 0.72);
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__switch-link:hover,
|
||||
body[data-role="admin"] .vg-topbar__switch-link.is-active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__avatar {
|
||||
background: rgba(126, 184, 173, 0.18);
|
||||
color: #bfe0d9;
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__role {
|
||||
border-left-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
body[data-role="admin"] .vg-iconbtn {
|
||||
color: rgba(238, 244, 242, 0.78);
|
||||
}
|
||||
body[data-role="admin"] .vg-iconbtn:hover {
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 톱바 아이콘 버튼 (테마/로그아웃) */
|
||||
.vg-iconbtn {
|
||||
display: inline-flex;
|
||||
|
|
@ -216,6 +179,9 @@ body[data-role="admin"] .vg-iconbtn:hover {
|
|||
--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 네비(뷰포트 높이)에 의존하지 않고
|
||||
본문 그리드 전체 높이를 따라가는 컨테이너 배경 하어라인. */
|
||||
|
|
@ -231,10 +197,12 @@ body[data-role="admin"] .vg-iconbtn:hover {
|
|||
|
||||
/* ── 좌측 네비 ── */
|
||||
.vg-nav {
|
||||
position: sticky;
|
||||
top: var(--topbar-h);
|
||||
position: relative;
|
||||
top: auto;
|
||||
align-self: start;
|
||||
height: calc(100vh - var(--topbar-h));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
background: var(--bg-surface);
|
||||
/* 구분선은 .vg-shell__body 컨테이너 배경(전체 높이)이 그린다. */
|
||||
padding: var(--sp-5) var(--sp-3);
|
||||
|
|
@ -299,86 +267,15 @@ body[data-role="admin"] .vg-iconbtn:hover {
|
|||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
body[data-role="admin"] .vg-shell__body {
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
|
||||
}
|
||||
body[data-role="admin"] .vg-nav {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(23, 33, 31, 0.98), rgba(26, 38, 42, 0.98)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
color: #eef4f2;
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__label,
|
||||
body[data-role="admin"] .vg-nav__ethic {
|
||||
color: rgba(238, 244, 242, 0.54);
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__item {
|
||||
color: rgba(238, 244, 242, 0.76);
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__item .vg-nav__ic {
|
||||
color: rgba(191, 224, 217, 0.72);
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__item.is-active {
|
||||
background: rgba(126, 184, 173, 0.22);
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__item.is-active .vg-nav__ic {
|
||||
color: #91c8bd;
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__foot {
|
||||
border-top-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
body[data-role="instructor"] .vg-shell__body {
|
||||
--nav-cur: 108px;
|
||||
background-image: linear-gradient(rgba(38, 88, 83, 0.16), rgba(38, 88, 83, 0.16));
|
||||
}
|
||||
body[data-role="instructor"] .vg-nav {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(32, 107, 99, 0.98), rgba(22, 83, 79, 0.98)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
color: #eef4f2;
|
||||
padding: var(--sp-5) 10px;
|
||||
}
|
||||
body[data-role="instructor"] .vg-nav__label,
|
||||
body[data-role="instructor"] .vg-nav__ethic {
|
||||
color: rgba(238, 244, 242, 0.62);
|
||||
}
|
||||
body[data-role="instructor"] .vg-nav__item {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
min-height: 64px;
|
||||
padding: 9px 8px;
|
||||
color: rgba(238, 244, 242, 0.82);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
body[data-role="instructor"] .vg-nav__item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-role="instructor"] .vg-nav__item .vg-nav__ic {
|
||||
color: rgba(218, 242, 238, 0.78);
|
||||
}
|
||||
body[data-role="instructor"] .vg-nav__item.is-active {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-role="instructor"] .vg-nav__item.is-active .vg-nav__ic {
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-role="instructor"] .vg-nav__foot {
|
||||
border-top-color: rgba(255, 255, 255, 0.13);
|
||||
}
|
||||
|
||||
/* ── 메인 콘텐츠 ── */
|
||||
.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 {
|
||||
|
|
@ -402,9 +299,6 @@ body[data-role="instructor"] .vg-nav__foot {
|
|||
/* 그리드·구분선이 함께 축소 폭을 따른다 */
|
||||
--nav-cur: var(--nav-w-collapsed);
|
||||
}
|
||||
body[data-role="instructor"] .vg-shell__body {
|
||||
--nav-cur: var(--nav-w-collapsed);
|
||||
}
|
||||
.vg-shell__body--bare {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
@ -427,15 +321,17 @@ body[data-role="instructor"] .vg-nav__foot {
|
|||
scroll-padding-bottom: var(--sp-6);
|
||||
}
|
||||
.vg-shell__body {
|
||||
display: block;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: 58px minmax(0, 1fr);
|
||||
background-image: none; /* 네비가 상단 가로바로 전환 — 세로 구분선 제거 */
|
||||
}
|
||||
.vg-shell__body--bare {
|
||||
display: block;
|
||||
}
|
||||
.vg-nav {
|
||||
position: sticky;
|
||||
top: var(--topbar-h);
|
||||
position: relative;
|
||||
top: auto;
|
||||
z-index: 29;
|
||||
height: 58px;
|
||||
padding: 7px max(12px, env(safe-area-inset-left)) 7px max(12px, env(safe-area-inset-right));
|
||||
|
|
@ -490,186 +386,196 @@ body[data-role="instructor"] .vg-nav__foot {
|
|||
.vg-main {
|
||||
padding: var(--sp-5) var(--sp-4) var(--sp-7);
|
||||
}
|
||||
body[data-role="instructor"] .vg-topbar {
|
||||
background: #1d7169;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
body[data-role="instructor"] .vg-topbar__wm,
|
||||
body[data-role="instructor"] .vg-topbar__role,
|
||||
body[data-role="instructor"] .vg-topbar__uname,
|
||||
body[data-role="instructor"] .vg-iconbtn {
|
||||
color: #eef4f2;
|
||||
}
|
||||
body[data-role="instructor"] .vg-topbar__wm .v,
|
||||
body[data-role="instructor"] .vg-topbar__mark {
|
||||
color: #eef4f2;
|
||||
}
|
||||
body[data-role="instructor"] .vg-topbar__brand svg {
|
||||
color: #eef4f2;
|
||||
}
|
||||
body[data-role="instructor"] .vg-topbar__role {
|
||||
border-left-color: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
body[data-role="instructor"] .vg-topbar__user {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
body[data-role="instructor"] .vg-topbar__avatar {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-role="instructor"] .vg-nav {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
.vg-main--bleed {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Unified role chrome
|
||||
역할별 제품처럼 보이던 톱바/사이드바 변형을 하나의 앱 크롬으로 통합한다.
|
||||
역할 차이는 tokens.css의 accent만 사용하고, 형태·밀도·배경 체계는 동일하게 유지한다. */
|
||||
body[data-role="admin"] .vg-topbar,
|
||||
body[data-role="instructor"] .vg-topbar {
|
||||
background: var(--bg-surface);
|
||||
border-bottom-color: var(--hair);
|
||||
/* ── 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="admin"] .vg-topbar__wm,
|
||||
body[data-role="admin"] .vg-topbar__role,
|
||||
body[data-role="admin"] .vg-topbar__uname,
|
||||
body[data-role="admin"] .vg-iconbtn,
|
||||
body[data-role="instructor"] .vg-topbar__wm,
|
||||
body[data-role="instructor"] .vg-topbar__role,
|
||||
body[data-role="instructor"] .vg-topbar__uname,
|
||||
body[data-role="instructor"] .vg-iconbtn {
|
||||
color: var(--text-strong);
|
||||
body[data-role] .vg-shell--botanical .vg-topbar__wm {
|
||||
font-size: 19px;
|
||||
font-weight: 760;
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__wm .v,
|
||||
body[data-role="instructor"] .vg-topbar__wm .v,
|
||||
body[data-role="admin"] .vg-topbar__mark,
|
||||
body[data-role="instructor"] .vg-topbar__mark,
|
||||
body[data-role="admin"] .vg-topbar__brand svg,
|
||||
body[data-role="instructor"] .vg-topbar__brand svg {
|
||||
color: var(--accent);
|
||||
body[data-role] .vg-shell--botanical .vg-topbar__role {
|
||||
border-left-color: var(--botanical-hair);
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__role,
|
||||
body[data-role="instructor"] .vg-topbar__role {
|
||||
border-left-color: var(--hair);
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__user,
|
||||
body[data-role="instructor"] .vg-topbar__user {
|
||||
body[data-role] .vg-shell--botanical .vg-topbar__user {
|
||||
background: var(--bg-surface-2);
|
||||
}
|
||||
body[data-role="admin"] .vg-topbar__avatar,
|
||||
body[data-role="instructor"] .vg-topbar__avatar {
|
||||
body[data-role] .vg-shell--botanical .vg-topbar__avatar {
|
||||
background: var(--accent-tint);
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
body[data-role="admin"] .vg-iconbtn:hover,
|
||||
body[data-role="instructor"] .vg-iconbtn:hover {
|
||||
background: var(--bg-surface-2);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
body[data-role="admin"] .vg-shell__body,
|
||||
body[data-role="instructor"] .vg-shell__body {
|
||||
body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
|
||||
--nav-cur: var(--nav-w);
|
||||
background-image: linear-gradient(var(--hair), var(--hair));
|
||||
background-color: var(--glass-canvas);
|
||||
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),
|
||||
linear-gradient(135deg, color-mix(in srgb, var(--bg-app) 28%, transparent), color-mix(in srgb, var(--bg-app) 62%, transparent)),
|
||||
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, center top, right top, center top;
|
||||
background-size: 1px 100%, 100% 52rem, 100% 62rem, 100% 46rem, min(66vw, 980px) auto, 100% 46rem;
|
||||
}
|
||||
body[data-role="admin"] .vg-nav,
|
||||
body[data-role="instructor"] .vg-nav {
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-strong);
|
||||
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="admin"] .vg-nav__label,
|
||||
body[data-role="admin"] .vg-nav__ethic,
|
||||
body[data-role="instructor"] .vg-nav__label,
|
||||
body[data-role="instructor"] .vg-nav__ethic {
|
||||
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="admin"] .vg-nav__item,
|
||||
body[data-role="instructor"] .vg-nav__item {
|
||||
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;
|
||||
min-height: 0;
|
||||
padding: 9px 12px;
|
||||
border: 1px solid transparent;
|
||||
color: var(--text-body);
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__item:hover,
|
||||
body[data-role="instructor"] .vg-nav__item:hover {
|
||||
background: var(--bg-surface-2);
|
||||
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="admin"] .vg-nav__item .vg-nav__ic,
|
||||
body[data-role="instructor"] .vg-nav__item .vg-nav__ic {
|
||||
color: var(--text-muted);
|
||||
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="admin"] .vg-nav__item.is-active,
|
||||
body[data-role="instructor"] .vg-nav__item.is-active {
|
||||
background: var(--accent-tint);
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__item.is-active .vg-nav__ic,
|
||||
body[data-role="instructor"] .vg-nav__item.is-active .vg-nav__ic {
|
||||
body[data-role] .vg-shell--botanical .vg-nav__item.is-active .vg-nav__ic {
|
||||
color: var(--accent);
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__foot,
|
||||
body[data-role="instructor"] .vg-nav__foot {
|
||||
border-top-color: var(--hair);
|
||||
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="admin"] .vg-shell__body,
|
||||
body[data-role="instructor"] .vg-shell__body {
|
||||
body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
|
||||
--nav-cur: var(--nav-w-collapsed);
|
||||
}
|
||||
body[data-role="admin"] .vg-nav,
|
||||
body[data-role="instructor"] .vg-nav {
|
||||
body[data-role] .vg-shell--botanical .vg-nav {
|
||||
padding: var(--sp-4) var(--sp-2);
|
||||
background-image: none;
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__item,
|
||||
body[data-role="instructor"] .vg-nav__item {
|
||||
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="admin"] .vg-shell__body,
|
||||
body[data-role="instructor"] .vg-shell__body {
|
||||
display: block;
|
||||
background-image: none;
|
||||
body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: 58px minmax(0, 1fr);
|
||||
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="admin"] .vg-nav,
|
||||
body[data-role="instructor"] .vg-nav {
|
||||
position: sticky;
|
||||
top: var(--topbar-h);
|
||||
body[data-role] .vg-shell--botanical .vg-nav {
|
||||
position: relative;
|
||||
top: auto;
|
||||
z-index: 29;
|
||||
height: 58px;
|
||||
padding: 7px max(12px, env(safe-area-inset-left)) 7px max(12px, env(safe-area-inset-right));
|
||||
border-bottom: 1px solid var(--hair);
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
border-bottom: 1px solid var(--botanical-hair);
|
||||
background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__item,
|
||||
body[data-role="instructor"] .vg-nav__item {
|
||||
body[data-role] .vg-shell--botanical .vg-nav__item,
|
||||
body[data-role] .vg-shell--botanical .vg-nav__item.is-active {
|
||||
min-width: 112px;
|
||||
height: 44px;
|
||||
justify-content: center;
|
||||
padding: 0 14px;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
body[data-role="admin"] .vg-nav__item span:not(.vg-nav__ic),
|
||||
body[data-role="instructor"] .vg-nav__item span:not(.vg-nav__ic) {
|
||||
display: inline;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue