전 저장소 리팩터링과 SSOT 정비
This commit is contained in:
Yun Chan
parent
14ecbd4e7d
commit
3dfddcac6f
173 changed files with 19679 additions and 6952 deletions
|
|
@ -73,6 +73,40 @@
|
|||
grid-template-columns:repeat(4,minmax(0,1fr));
|
||||
gap:10px;
|
||||
}
|
||||
/* 중간 폭 이하 전용 가로 탭 — 데스크톱에서는 숨김(리뷰 화면 sr-tabs와 동일 패턴) */
|
||||
.lh-tabs{
|
||||
display:none;
|
||||
gap:6px;
|
||||
padding:4px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.lh-tabs button{
|
||||
flex:1 1 0;
|
||||
min-width:0;
|
||||
padding:9px 12px;
|
||||
border:1px solid transparent;
|
||||
border-radius:calc(var(--radius) - 2px);
|
||||
background:transparent;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-sm);
|
||||
font-weight:700;
|
||||
cursor:pointer;
|
||||
}
|
||||
.lh-tabs button:hover{
|
||||
color:var(--text-strong);
|
||||
}
|
||||
.lh-tabs button:focus-visible{
|
||||
outline:2px solid var(--focus-ring);
|
||||
outline-offset:1px;
|
||||
}
|
||||
.lh-tabs button.is-active{
|
||||
background:var(--bg-surface);
|
||||
border-color:var(--border-strong);
|
||||
color:var(--text-strong);
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.lh-dashboard-side{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
|
|
@ -1483,10 +1517,33 @@
|
|||
background:rgba(111,179,164,.13);
|
||||
}
|
||||
@keyframes lhSkel{0%{background-position:120% 0}100%{background-position:-80% 0}}
|
||||
/* 중간 폭(1181~1420px): 우측 사이드는 유지하되 리캡+코치 2열은 세로 스택으로.
|
||||
리캡 카드가 230px대로 붕괴해 세로 글자 줄바꿈이 생기는 문제 방지 (2026-07-14). */
|
||||
@media (max-width:1420px){
|
||||
.lh-work-cluster__primary{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width:1180px){
|
||||
/* 1컬럼 세로 나열 대신 가로 탭으로 영역 전환(2026-07-15 소유자 피드백) */
|
||||
.lh-tabs{
|
||||
display:flex;
|
||||
}
|
||||
.lh-dashboard-grid{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.lh-dashboard-grid:not(.lh-grid--tab-today) .lh-work-cluster{
|
||||
display:none;
|
||||
}
|
||||
.lh-grid--tab-today .lh-dashboard-side{
|
||||
display:none;
|
||||
}
|
||||
.lh-grid--tab-records .lh-panel--growth{
|
||||
display:none;
|
||||
}
|
||||
.lh-grid--tab-growth .lh-panel--records{
|
||||
display:none;
|
||||
}
|
||||
.lh-dashboard-hero,
|
||||
.lh-dashboard-columns,
|
||||
.lh-history-layout,
|
||||
|
|
@ -1695,3 +1752,565 @@
|
|||
.lh-skel__box,
|
||||
.lh-skel__line{animation:none;}
|
||||
}
|
||||
|
||||
/* ═══ 학습자 포탈 개선(2026-07-14): 보완할 부분 · 라포 누적 · 이정표 ═══ */
|
||||
.lh-weakness__list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.lh-weakness__list button {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
text-align: left;
|
||||
padding: 9px 11px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.09));
|
||||
background: var(--bg-inset, rgba(0, 0, 0, 0.12));
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lh-weakness__list button:hover {
|
||||
border-color: var(--border-focus);
|
||||
}
|
||||
.lh-weakness__list b {
|
||||
font-size: 12.5px;
|
||||
font-weight: 760;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.lh-weakness__list p {
|
||||
margin: 0;
|
||||
font-size: 11.5px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.lh-rapport-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.lh-rapport-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 88px) minmax(0, 1fr) 34px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.lh-rapport-row__name {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--text-strong);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.lh-rapport-row__name small {
|
||||
margin-left: 4px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 620;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.lh-rapport-row__bar {
|
||||
display: block;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background: var(--bg-inset, rgba(0, 0, 0, 0.16));
|
||||
overflow: hidden;
|
||||
}
|
||||
.lh-rapport-row__bar i {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: var(--accent);
|
||||
transition: width 0.9s var(--ease-out);
|
||||
}
|
||||
.lh-rapport-row b {
|
||||
font-size: 11px;
|
||||
font-weight: 740;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-body);
|
||||
text-align: right;
|
||||
}
|
||||
.lh-milestones__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.lh-milestone {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.1));
|
||||
font-size: 11.5px;
|
||||
font-weight: 680;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.lh-milestone.is-done {
|
||||
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
|
||||
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.lh-milestone.is-available {
|
||||
color: var(--text-body);
|
||||
}
|
||||
|
||||
/* ═══ 학습 대시보드 보태니컬 시안 적용 ═══
|
||||
카드 광원은 좌상단, 황금 기운은 헤어라인과 가장자리에서만 아주 옅게 사용한다. */
|
||||
.vg-shell--learner-dashboard .lh-root {
|
||||
--lh-gold: #b5975d;
|
||||
--lh-botanical-hair: color-mix(in srgb, var(--lh-gold) 34%, var(--border-subtle));
|
||||
--lh-botanical-line: color-mix(in srgb, var(--lh-gold) 17%, var(--border-subtle));
|
||||
gap: clamp(18px, 2vw, 28px);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-title {
|
||||
letter-spacing: -0.035em;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-head__status {
|
||||
border-color: var(--lh-botanical-hair);
|
||||
background: var(--glass-surface-inset);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-dashboard-status {
|
||||
gap: 12px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card {
|
||||
--lh-card-art: url("/design-elements/learner-dashboard/card-leaf-sprig-light.png");
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
min-height: 132px;
|
||||
align-content: center;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
padding: 18px 44% 18px 18px;
|
||||
transition:
|
||||
transform var(--dur-base) var(--ease-out),
|
||||
border-color var(--dur-base) var(--ease-out),
|
||||
box-shadow var(--dur-base) var(--ease-out);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card:nth-child(2) {
|
||||
--lh-card-art: url("/design-elements/learner-dashboard/card-folded-ribbon-light.png");
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card:nth-child(3) {
|
||||
--lh-card-art: url("/design-elements/learner-dashboard/card-orbital-ring-light.png");
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card:nth-child(4) {
|
||||
--lh-card-art: url("/design-elements/learner-dashboard/card-flowing-ribbon-light.png");
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 8px 0 4px 51%;
|
||||
background: var(--lh-card-art) center / contain no-repeat;
|
||||
opacity: 0.68;
|
||||
filter: saturate(0.82) contrast(0.97);
|
||||
pointer-events: none;
|
||||
transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card:hover::after {
|
||||
transform: translate3d(-3px, -2px, 0) scale(1.025);
|
||||
opacity: 0.78;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card span {
|
||||
color: color-mix(in srgb, var(--text-body) 88%, var(--lh-gold));
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card b {
|
||||
font-size: clamp(23px, 2.05vw, 30px);
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card p {
|
||||
max-width: 19ch;
|
||||
color: var(--text-body);
|
||||
}
|
||||
|
||||
.vg-shell--learner-dashboard .lh-work-cluster {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(18px, 2vw, 26px);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-work-cluster::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: radial-gradient(circle at 100% 0%, rgba(187, 156, 97, 0.06), transparent 22rem);
|
||||
pointer-events: none;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-work-cluster > * {
|
||||
position: relative;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-work-cluster__head {
|
||||
border-bottom-color: var(--lh-botanical-line);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-recap__progress i,
|
||||
.vg-shell--learner-dashboard .lh-rapport-row__bar {
|
||||
background: color-mix(in srgb, var(--lh-botanical-line) 72%, transparent);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -34px;
|
||||
right: -54px;
|
||||
width: 210px;
|
||||
height: 160px;
|
||||
background: url("/design-elements/learner-dashboard/card-paired-leaves-light.png") center / contain no-repeat;
|
||||
opacity: 0.28;
|
||||
pointer-events: none;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card > div:first-child {
|
||||
padding-right: clamp(24px, 24%, 92px);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card__cta {
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--accent) 42%, var(--glass-surface-inset)), color-mix(in srgb, var(--accent) 58%, var(--glass-surface-inset)));
|
||||
border-color: color-mix(in srgb, var(--accent) 44%, var(--lh-gold));
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-panel__head button,
|
||||
.vg-shell--learner-dashboard .lh-panel__badge,
|
||||
.vg-shell--learner-dashboard .lh-tabs {
|
||||
border-color: var(--lh-botanical-line);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-root {
|
||||
--lh-gold: #bca579;
|
||||
--lh-botanical-hair: color-mix(in srgb, var(--lh-gold) 27%, var(--border-subtle));
|
||||
--lh-botanical-line: color-mix(in srgb, var(--lh-gold) 16%, var(--border-subtle));
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-head__status {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 245, 222, 0.055);
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card {
|
||||
--lh-card-art: url("/design-elements/learner-dashboard/card-leaf-sprig.png");
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card:nth-child(2) {
|
||||
--lh-card-art: url("/design-elements/learner-dashboard/card-folded-ribbon.png");
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card:nth-child(3) {
|
||||
--lh-card-art: url("/design-elements/learner-dashboard/card-orbital-ring.png");
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card:nth-child(4) {
|
||||
--lh-card-art: url("/design-elements/learner-dashboard/card-flowing-ribbon.png");
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card::after {
|
||||
opacity: 0.56;
|
||||
filter: saturate(0.76) brightness(0.92);
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-work-cluster::before {
|
||||
background:
|
||||
linear-gradient(105deg, rgba(203, 184, 139, 0.025), transparent 38%),
|
||||
radial-gradient(circle at 100% 0%, rgba(187, 156, 97, 0.055), transparent 22rem);
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-coach-card::after {
|
||||
background-image: url("/design-elements/learner-dashboard/card-paired-leaves.png");
|
||||
opacity: 0.24;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.vg-shell--learner-dashboard .lh-metric-card {
|
||||
min-height: 118px;
|
||||
padding: 15px 38% 15px 15px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card::after {
|
||||
inset: 6px 0 4px 55%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.vg-shell--learner-dashboard .lh-root {
|
||||
gap: 16px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-dashboard-status {
|
||||
gap: 8px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card {
|
||||
min-height: 104px;
|
||||
padding: 13px 34% 13px 13px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card::after {
|
||||
inset: 12px 0 8px 56%;
|
||||
opacity: 0.48;
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card::after {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card b {
|
||||
font-size: clamp(19px, 6vw, 24px);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card p {
|
||||
font-size: 11px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-work-cluster {
|
||||
padding: 12px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card > div:first-child {
|
||||
padding-right: 18%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 보태니컬 시안 정합 2차: 1200px 기준 비율·세로 흐름·장식 크롭 ── */
|
||||
.vg-shell--learner-dashboard .lh-tabs {
|
||||
display: flex;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-dashboard-grid:not(.lh-grid--tab-today) .lh-work-cluster {
|
||||
display: none;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-grid--tab-today .lh-dashboard-side {
|
||||
display: none;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-grid--tab-records .lh-panel--growth {
|
||||
display: none;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-grid--tab-growth .lh-panel--records {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 1181px) {
|
||||
.vg-shell--learner-dashboard .lh-dashboard-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-work-cluster__primary {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-dashboard-side {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.vg-shell--learner-dashboard .lh-root {
|
||||
max-width: 100%;
|
||||
gap: 20px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-head {
|
||||
min-height: 104px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-title {
|
||||
margin-top: 6px;
|
||||
font-size: clamp(29px, 2.7vw, 36px);
|
||||
line-height: 1.14;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-sub {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-dashboard-status {
|
||||
gap: 14px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card {
|
||||
--lh-art-right: -16px;
|
||||
--lh-art-bottom: -24px;
|
||||
--lh-art-width: 52%;
|
||||
--lh-art-height: 112%;
|
||||
min-height: 160px;
|
||||
align-content: center;
|
||||
padding: 22px 43% 22px 22px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card:nth-child(2) {
|
||||
--lh-art-right: -20px;
|
||||
--lh-art-bottom: -28px;
|
||||
--lh-art-width: 57%;
|
||||
--lh-art-height: 118%;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card:nth-child(3) {
|
||||
--lh-art-right: -24px;
|
||||
--lh-art-bottom: -26px;
|
||||
--lh-art-width: 58%;
|
||||
--lh-art-height: 116%;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card:nth-child(4) {
|
||||
--lh-art-right: -26px;
|
||||
--lh-art-bottom: -30px;
|
||||
--lh-art-width: 62%;
|
||||
--lh-art-height: 122%;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card::after {
|
||||
inset: auto 0 0 auto;
|
||||
width: var(--lh-art-width);
|
||||
height: var(--lh-art-height);
|
||||
background-position: right var(--lh-art-right) bottom var(--lh-art-bottom);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card b {
|
||||
font-size: clamp(26px, 2.35vw, 32px);
|
||||
}
|
||||
|
||||
.vg-shell--learner-dashboard .lh-work-cluster {
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-work-cluster__head {
|
||||
min-height: 68px;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-work-cluster__head h2 {
|
||||
font-size: clamp(22px, 2vw, 27px);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-session-focus {
|
||||
--lh-focus-art-right: -20px;
|
||||
--lh-focus-art-bottom: -28px;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
gap: 18px;
|
||||
min-height: 466px;
|
||||
padding: 28px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-session-focus::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
right: var(--lh-focus-art-right);
|
||||
bottom: var(--lh-focus-art-bottom);
|
||||
width: clamp(190px, 29%, 270px);
|
||||
height: clamp(210px, 58%, 290px);
|
||||
background: url("/design-elements/learner-dashboard/card-leaf-sprig-light.png") right bottom / contain no-repeat;
|
||||
opacity: 0.22;
|
||||
pointer-events: none;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-session-focus > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-session-focus__head h2 {
|
||||
font-size: clamp(30px, 3vw, 38px);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-recap {
|
||||
grid-template-columns: 224px minmax(0, 1fr);
|
||||
gap: 30px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-recap__avatar {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
justify-self: center;
|
||||
width: 216px;
|
||||
min-height: 242px;
|
||||
aspect-ratio: 0.9;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-recap__avatar .vg-avatar {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-recap__body {
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-recap__facts div {
|
||||
min-height: 62px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-recap__progress i {
|
||||
height: 9px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-recap__quote {
|
||||
min-height: 82px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card {
|
||||
min-height: 300px;
|
||||
gap: 14px;
|
||||
padding: 28px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card::after {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 320px;
|
||||
height: 240px;
|
||||
background-position: right -42px bottom -28px;
|
||||
opacity: 0.24;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card > div:first-child {
|
||||
padding-right: 34%;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card h2 {
|
||||
font-size: clamp(25px, 2.45vw, 32px);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card > div:first-child p {
|
||||
max-width: 64ch;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-hints {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-hints span {
|
||||
min-height: 44px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card__cta {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 48px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-work-cluster__secondary {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-root {
|
||||
--text-strong: #eee8dc;
|
||||
--text-body: #c3beb2;
|
||||
--text-muted: #928f86;
|
||||
--lh-botanical-hair: rgba(184, 160, 110, 0.31);
|
||||
--lh-botanical-line: rgba(184, 160, 110, 0.22);
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-recap__avatar {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-session-focus::after {
|
||||
background-image: url("/design-elements/learner-dashboard/card-leaf-sprig.png");
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.vg-shell--learner-dashboard .lh-head {
|
||||
min-height: auto;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-metric-card {
|
||||
min-height: 126px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-session-focus {
|
||||
min-height: auto;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.vg-shell--learner-dashboard .lh-recap {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-recap__avatar {
|
||||
width: min(100%, 250px);
|
||||
min-height: 210px;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card > div:first-child {
|
||||
padding-right: 20%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue