전 저장소 리팩터링과 SSOT 정비
This commit is contained in:
Yun Chan
parent
14ecbd4e7d
commit
3dfddcac6f
173 changed files with 19679 additions and 6952 deletions
|
|
@ -5,44 +5,6 @@
|
|||
강조 = weight + accent 텍스트 + accent-tint 배경 + kicker(+dot).
|
||||
===================================================================== */
|
||||
|
||||
/* ── 레이아웃: 좌측 섹션 내비(sticky) + 우측 폼 ── */
|
||||
body[data-page="settings"] .vg-shell {
|
||||
background: var(--bg-app);
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar {
|
||||
background: var(--bg-surface);
|
||||
border-bottom-color: var(--hair);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar__wm,
|
||||
body[data-page="settings"] .vg-topbar__wm .v,
|
||||
body[data-page="settings"] .vg-topbar__role,
|
||||
body[data-page="settings"] .vg-topbar__uname,
|
||||
body[data-page="settings"] .vg-iconbtn,
|
||||
body[data-page="settings"] .vg-topbar__mark {
|
||||
color: var(--text-strong);
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar__brand svg {
|
||||
color: var(--accent);
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar__role {
|
||||
border-left-color: var(--hair);
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar__user {
|
||||
background: var(--bg-surface-2);
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar__avatar {
|
||||
background: var(--accent-tint);
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
body[data-page="settings"] .vg-iconbtn:hover {
|
||||
background: var(--bg-surface-2);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
body[data-page="settings"] .vg-main {
|
||||
padding: var(--sp-6) var(--sp-5) var(--sp-8);
|
||||
}
|
||||
|
||||
.vg-set {
|
||||
display: grid;
|
||||
grid-template-columns: 204px minmax(0, 780px);
|
||||
|
|
@ -1214,19 +1176,6 @@ body[data-page="settings"] .vg-main {
|
|||
}
|
||||
|
||||
/* Image-aligned workspace: generated settings concept -> production controls. */
|
||||
body[data-page="settings"] .vg-shell {
|
||||
min-height: 100dvh;
|
||||
background:
|
||||
radial-gradient(circle at 8% 0%, rgba(222, 238, 234, 0.62), transparent 34%),
|
||||
linear-gradient(135deg, rgba(252, 250, 247, 0.97), rgba(244, 242, 237, 0.94)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
}
|
||||
body[data-page="settings"] .vg-main {
|
||||
padding: 0;
|
||||
}
|
||||
body[data-page="settings"] .vg-main__inner {
|
||||
max-width: none;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__callout {
|
||||
max-width: 1120px;
|
||||
margin: var(--sp-5) auto 0;
|
||||
|
|
@ -1247,12 +1196,7 @@ body[data-page="settings"] .vg-set__rail {
|
|||
top: 24px;
|
||||
min-height: calc(100dvh - 60px);
|
||||
padding: 24px 16px 18px;
|
||||
border: 1px solid rgba(38, 101, 92, 0.14);
|
||||
border-radius: var(--radius);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(238, 248, 245, 0.92), rgba(248, 250, 248, 0.72)),
|
||||
rgba(255, 255, 255, 0.82);
|
||||
box-shadow: 0 24px 58px rgba(37, 45, 42, 0.08);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-title {
|
||||
display: flex;
|
||||
|
|
@ -1289,10 +1233,7 @@ body[data-page="settings"] .vg-set__nav {
|
|||
position: static;
|
||||
padding: 0;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-kicker {
|
||||
display: none;
|
||||
|
|
@ -1301,21 +1242,21 @@ body[data-page="settings"] .vg-set__nav-item {
|
|||
min-height: 49px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--radius);
|
||||
color: #1f5f58;
|
||||
color: var(--accent-deep);
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-item:hover {
|
||||
background: rgba(24, 121, 103, 0.09);
|
||||
color: #124d47;
|
||||
background: var(--accent-tint);
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-item.is-active {
|
||||
background: linear-gradient(135deg, #187967, #106759);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 12px 24px rgba(16, 103, 89, 0.22);
|
||||
background: var(--accent);
|
||||
color: var(--text-on-accent);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-item.is-active svg {
|
||||
color: #ffffff;
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-status {
|
||||
display: flex;
|
||||
|
|
@ -1351,10 +1292,7 @@ body[data-page="settings"] #set-notify {
|
|||
}
|
||||
body[data-page="settings"] .vg-set__group {
|
||||
padding: 18px;
|
||||
border: 1px solid rgba(37, 45, 42, 0.12);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(255, 255, 255, 0.93);
|
||||
box-shadow: 0 18px 38px rgba(38, 45, 43, 0.07);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__group-head {
|
||||
align-items: flex-start;
|
||||
|
|
@ -1371,10 +1309,9 @@ body[data-page="settings"] .vg-set__group-desc {
|
|||
body[data-page="settings"] .vg-set__profile {
|
||||
margin-bottom: 12px;
|
||||
padding: 13px;
|
||||
background: rgba(244, 241, 236, 0.78);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__avatar {
|
||||
background: linear-gradient(135deg, #1d8774, #0f6559);
|
||||
background: var(--accent);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__field-grid--account,
|
||||
body[data-page="settings"] .vg-set__field-grid--engine {
|
||||
|
|
@ -1387,8 +1324,6 @@ body[data-page="settings"] .vg-set__field,
|
|||
body[data-page="settings"] .vg-set__control-block,
|
||||
body[data-page="settings"] .vg-set__opt,
|
||||
body[data-page="settings"] .vg-set__range-row {
|
||||
border-color: rgba(37, 45, 42, 0.12);
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__engine-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -1396,11 +1331,11 @@ body[data-page="settings"] .vg-set__engine-grid {
|
|||
}
|
||||
body[data-page="settings"] .vg-set__seg {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
background: rgba(244, 241, 236, 0.82);
|
||||
background: var(--glass-surface-inset);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__seg-btn.is-active {
|
||||
background: #187967;
|
||||
color: #ffffff;
|
||||
background: var(--accent);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__ops {
|
||||
width: min(300px, 100%);
|
||||
|
|
@ -1421,9 +1356,7 @@ body[data-page="settings"] .vg-set__ticket {
|
|||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(37, 45, 42, 0.12);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__ticket-top,
|
||||
body[data-page="settings"] .vg-set__ticket-meta {
|
||||
|
|
@ -1449,7 +1382,7 @@ body[data-page="settings"] .vg-set__ticket-note {
|
|||
gap: 4px;
|
||||
padding: 9px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(244, 241, 236, 0.78);
|
||||
background: var(--glass-surface-inset);
|
||||
color: var(--text-body);
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.55;
|
||||
|
|
@ -1468,7 +1401,7 @@ body[data-page="settings"] .vg-set__foot {
|
|||
padding-top: 12px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__pill {
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
background: var(--glass-surface-inset);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
|
|
@ -1515,11 +1448,8 @@ body[data-page="settings"] .vg-set__pill {
|
|||
min-height: auto;
|
||||
margin: 0 -16px 12px;
|
||||
padding: 13px 16px 10px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(37, 45, 42, 0.1);
|
||||
border-radius: 0;
|
||||
background: rgba(252, 250, 247, 0.96);
|
||||
box-shadow: 0 12px 26px rgba(37, 45, 42, 0.08);
|
||||
border-bottom-color: var(--glass-border);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-title {
|
||||
justify-content: center;
|
||||
|
|
@ -1589,123 +1519,3 @@ body[data-page="settings"] .vg-set__pill {
|
|||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-shell {
|
||||
background: var(--bg-app);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__rail,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__group {
|
||||
border-color: var(--border-subtle);
|
||||
background: var(--bg-surface);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__rail-title h1,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__group-title,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__profile strong,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__label,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__opt-main,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__voice-title {
|
||||
color: rgba(241, 247, 245, 0.96);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__rail-title p,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__group-desc,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__profile span,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__hint,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__opt-sub,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__voice-meta,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__foot,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__callout {
|
||||
color: rgba(214, 228, 224, 0.72);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__nav-item {
|
||||
color: rgba(205, 232, 225, 0.82);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__nav-item:hover {
|
||||
background: rgba(111, 179, 164, 0.12);
|
||||
color: rgba(239, 248, 245, 0.96);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__nav-item.is-active {
|
||||
background: linear-gradient(135deg, rgba(111, 179, 164, 0.9), rgba(62, 136, 121, 0.94));
|
||||
color: #061511;
|
||||
box-shadow: 0 14px 28px rgba(7, 20, 17, 0.34);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__nav-item.is-active svg {
|
||||
color: #061511;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__profile,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__field,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__control-block,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__opt,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__range-row,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__seg,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__pill,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__callout,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__ticket,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__ticket-note,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-badge {
|
||||
border-color: rgba(203, 227, 220, 0.11);
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__voice,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__select,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-input {
|
||||
border-color: rgba(203, 227, 220, 0.12);
|
||||
background: rgba(11, 24, 21, 0.78);
|
||||
color: rgba(241, 247, 245, 0.94);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__voice.is-active,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__seg-btn.is-active {
|
||||
border-color: rgba(111, 179, 164, 0.48);
|
||||
background: rgba(111, 179, 164, 0.2);
|
||||
color: rgba(239, 248, 245, 0.98);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__seg-btn {
|
||||
color: rgba(205, 232, 225, 0.76);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__seg-btn:not(.is-active):hover,
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__voice:not(.is-active):hover {
|
||||
background: rgba(111, 179, 164, 0.11);
|
||||
color: rgba(239, 248, 245, 0.96);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__range {
|
||||
accent-color: rgba(111, 179, 164, 0.95);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__avatar {
|
||||
background: linear-gradient(135deg, rgba(111, 179, 164, 0.92), rgba(49, 116, 102, 0.95));
|
||||
color: #061511;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set .vg-btn--primary {
|
||||
border-color: rgba(111, 179, 164, 0.48);
|
||||
background: linear-gradient(135deg, rgba(111, 179, 164, 0.88), rgba(73, 145, 130, 0.9));
|
||||
color: #061511;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set .vg-btn--primary:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, rgba(129, 202, 186, 0.94), rgba(84, 160, 143, 0.96));
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
html[data-theme="dark"] body[data-page="settings"] .vg-set__rail {
|
||||
border-bottom-color: rgba(203, 227, 220, 0.12);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(22, 36, 32, 0.98), rgba(13, 26, 23, 0.96)),
|
||||
rgba(13, 26, 23, 0.96);
|
||||
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue