style: improve frontend UX/UI - visual states, loading feedback, typography, and accessibility
This commit is contained in:
user
@@ -9,6 +9,16 @@
|
||||
--accent: #19764b;
|
||||
--accent-dark: #105c39;
|
||||
--danger: #a93a2f;
|
||||
--warn: #b45f1a;
|
||||
--warn-bg: #fff6eb;
|
||||
--weak: #a93a2f;
|
||||
--weak-bg: #fdf2f1;
|
||||
--good: #1a6b8f;
|
||||
--good-bg: #eef7fb;
|
||||
--strong: #19764b;
|
||||
--strong-bg: #f0faf3;
|
||||
--neutral: #6b7570;
|
||||
--neutral-bg: #f4f5f4;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -22,6 +32,8 @@ body {
|
||||
color: var(--text);
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
letter-spacing: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -57,7 +69,12 @@ select {
|
||||
color: var(--accent);
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
html[lang="ko"] .eyebrow {
|
||||
text-transform: none;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -67,8 +84,8 @@ h2 {
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 9ch;
|
||||
font-size: clamp(42px, 6vw, 74px);
|
||||
font-size: clamp(36px, 5vw, 64px);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -118,6 +135,14 @@ select {
|
||||
color: var(--text);
|
||||
padding: 12px;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b665f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@@ -141,29 +166,86 @@ button {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: 750;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background: var(--accent-dark);
|
||||
}
|
||||
|
||||
button:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.48;
|
||||
}
|
||||
|
||||
.status-line,
|
||||
.error-line {
|
||||
min-height: 20px;
|
||||
margin: 18px 0 0;
|
||||
font-size: 13px;
|
||||
.btn-spinner {
|
||||
display: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.35);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
button.is-loading .btn-text {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
button.is-loading .btn-spinner {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.status-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 20px;
|
||||
margin: 18px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.status-line.is-busy .status-icon {
|
||||
background: var(--warn);
|
||||
animation: pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
.error-line {
|
||||
min-height: 20px;
|
||||
margin: 10px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
@@ -181,15 +263,23 @@ button:disabled {
|
||||
|
||||
.question-button {
|
||||
border: 1px solid var(--line);
|
||||
border-left: 3px solid transparent;
|
||||
background: #fbfcfa;
|
||||
color: var(--text);
|
||||
padding: 16px;
|
||||
min-height: 72px;
|
||||
text-align: left;
|
||||
border-radius: 6px;
|
||||
transition: border-color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.question-button:hover:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.question-button[aria-pressed="true"] {
|
||||
border-color: var(--accent);
|
||||
border-left-color: var(--accent);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
@@ -205,7 +295,21 @@ button:disabled {
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
padding: 18px;
|
||||
padding: 22px 18px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.empty-hint::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 auto 10px;
|
||||
opacity: 0.45;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b665f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
@@ -232,10 +336,30 @@ button:disabled {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.metric-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.grade {
|
||||
color: var(--accent);
|
||||
font-size: 38px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.grade-miss {
|
||||
color: var(--weak);
|
||||
}
|
||||
|
||||
.grade-partial {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.grade-solid {
|
||||
color: var(--good);
|
||||
}
|
||||
|
||||
.grade-strong {
|
||||
color: var(--strong);
|
||||
}
|
||||
|
||||
.readiness-value {
|
||||
@@ -250,10 +374,41 @@ button:disabled {
|
||||
margin: 4px 6px 4px 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
padding: 6px 9px;
|
||||
padding: 6px 10px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.pill-neutral {
|
||||
background: var(--neutral-bg);
|
||||
border-color: #d5dad3;
|
||||
color: var(--neutral);
|
||||
}
|
||||
|
||||
.pill-weak {
|
||||
background: var(--weak-bg);
|
||||
border-color: #e8bdb9;
|
||||
color: var(--weak);
|
||||
}
|
||||
|
||||
.pill-warn {
|
||||
background: var(--warn-bg);
|
||||
border-color: #edd5b5;
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.pill-good {
|
||||
background: var(--good-bg);
|
||||
border-color: #b8d9e8;
|
||||
color: var(--good);
|
||||
}
|
||||
|
||||
.pill-strong {
|
||||
background: var(--strong-bg);
|
||||
border-color: #b8dfc6;
|
||||
color: var(--strong);
|
||||
}
|
||||
|
||||
.small-list {
|
||||
@@ -264,10 +419,11 @@ button:disabled {
|
||||
}
|
||||
|
||||
.content-workspace {
|
||||
border-top: 1px solid var(--line);
|
||||
border-top: 2px solid var(--line);
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding-top: 24px;
|
||||
padding-top: 28px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.ontology-view {
|
||||
@@ -283,11 +439,11 @@ button:disabled {
|
||||
|
||||
.summary-chip {
|
||||
background: var(--surface-muted);
|
||||
border-radius: 6px;
|
||||
border-radius: 999px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
padding: 9px 11px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
.prompt-text {
|
||||
@@ -297,6 +453,9 @@ button:disabled {
|
||||
margin: 0;
|
||||
padding: 14px;
|
||||
white-space: pre-wrap;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
@@ -305,7 +464,6 @@ button:disabled {
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 100%;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user