refactor: redesign web UX with progressive disclosure and cleaned layout
This commit is contained in:
user
@@ -19,619 +19,354 @@
|
||||
--strong-bg: #f0faf3;
|
||||
--neutral: #6b7570;
|
||||
--neutral-bg: #f4f5f4;
|
||||
--radius: 8px;
|
||||
--shadow-sm: 0 1px 3px rgba(24,32,27,.06);
|
||||
--shadow-md: 0 4px 16px rgba(24,32,27,.08);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *::before, *::after { box-sizing:border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--bg);
|
||||
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;
|
||||
margin:0; min-height:100vh;
|
||||
background:var(--bg); color:var(--text);
|
||||
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
button,input,textarea,select { font:inherit; }
|
||||
|
||||
.workspace {
|
||||
display: none;
|
||||
grid-template-columns: minmax(260px, 320px) minmax(360px, 1fr) minmax(280px, 360px);
|
||||
gap: 1px;
|
||||
min-height: 100vh;
|
||||
background: var(--line);
|
||||
/* ===== LOGIN ===== */
|
||||
.login-page {
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
min-height:100vh; padding:24px;
|
||||
background:linear-gradient(160deg,#f5f7f4 0%,#e3ebe0 100%);
|
||||
}
|
||||
|
||||
.setup-pane,
|
||||
.practice-pane,
|
||||
.feedback-pane {
|
||||
background: var(--surface);
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.practice-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--accent);
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
html[lang="ko"] .eyebrow {
|
||||
text-transform: none;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin: 0;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(36px, 5vw, 64px);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.lede {
|
||||
max-width: 28ch;
|
||||
margin: 18px 0 30px;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.stacked-form,
|
||||
.answer-form {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.material-form,
|
||||
.asset-form {
|
||||
align-items: end;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
|
||||
}
|
||||
|
||||
.wide-field {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
background: #fbfcfa;
|
||||
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 {
|
||||
min-height: 160px;
|
||||
resize: vertical;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(25, 118, 75, 0.12);
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 44px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: var(--accent);
|
||||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.question-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.question-id {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: var(--accent);
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
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 {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.progress-heading {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.small-button {
|
||||
min-height: 34px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.metric-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 10px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.metric-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.grade {
|
||||
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 {
|
||||
color: var(--accent);
|
||||
font-size: 48px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.concept-pill {
|
||||
display: inline-flex;
|
||||
margin: 4px 6px 4px 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
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 {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
color: var(--muted);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.content-workspace {
|
||||
border-top: 2px solid var(--line);
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding-top: 28px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.ontology-view {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.summary-chip {
|
||||
background: var(--surface-muted);
|
||||
border-radius: 999px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
.prompt-text {
|
||||
background: #fbfcfa;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
padding: 14px;
|
||||
white-space: pre-wrap;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.login-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 28px;
|
||||
background: linear-gradient(160deg, #f5f7f4 0%, #e8efe5 100%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
padding: 52px 40px 44px;
|
||||
max-width: 440px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-shadow: 0 12px 40px rgba(24, 32, 27, 0.07);
|
||||
background:var(--surface);
|
||||
border:1px solid var(--line);
|
||||
border-radius:16px; padding:48px 40px 36px;
|
||||
max-width:400px; width:100%; text-align:center;
|
||||
box-shadow:0 16px 48px rgba(24,32,27,.08);
|
||||
}
|
||||
|
||||
.login-card .eyebrow {
|
||||
display: inline-block;
|
||||
letter-spacing: 0.14em;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
font-weight: 750;
|
||||
margin-bottom: 10px;
|
||||
.login-brand {
|
||||
color:var(--accent); font-size:13px; font-weight:750;
|
||||
letter-spacing:.08em; margin-bottom:16px;
|
||||
}
|
||||
|
||||
html[lang="ko"] .login-card .eyebrow {
|
||||
text-transform: none;
|
||||
letter-spacing: 0.04em;
|
||||
.login-heading {
|
||||
margin:0; font-size:clamp(28px,6vw,40px);
|
||||
line-height:1.12; letter-spacing:-.01em;
|
||||
}
|
||||
|
||||
.login-card h1 {
|
||||
font-size: clamp(34px, 5.5vw, 56px);
|
||||
margin: 8px 0 18px;
|
||||
line-height: 1.05;
|
||||
.login-desc {
|
||||
margin:12px auto 32px; max-width:30ch;
|
||||
color:var(--muted); font-size:15px; line-height:1.55;
|
||||
}
|
||||
|
||||
.login-card .lede {
|
||||
margin: 0 auto 32px;
|
||||
max-width: 32ch;
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.login-divider {
|
||||
height: 1px;
|
||||
background: var(--line);
|
||||
margin: 28px 0 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-divider::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--surface);
|
||||
padding: 0 12px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.login-legal {
|
||||
margin-top: 18px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.login-legal a {
|
||||
color: var(--muted);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.login-lang { margin-top:28px; justify-content:center; }
|
||||
.login-error {
|
||||
margin-top: 14px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
background: var(--weak-bg);
|
||||
color: var(--weak);
|
||||
font-size: 13px;
|
||||
display: none;
|
||||
}
|
||||
.login-error.visible {
|
||||
display: block;
|
||||
margin-top:16px; padding:10px 14px; border-radius:var(--radius);
|
||||
background:var(--weak-bg); color:var(--weak);
|
||||
font-size:13px; display:none;
|
||||
}
|
||||
.login-error.visible { display:block; }
|
||||
|
||||
.login-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
/* ===== TOPBAR ===== */
|
||||
.topbar {
|
||||
display:flex; align-items:center; justify-content:space-between;
|
||||
height:52px; padding:0 20px;
|
||||
background:var(--surface); border-bottom:1px solid var(--line);
|
||||
position:sticky; top:0; z-index:10;
|
||||
}
|
||||
|
||||
.login-header .eyebrow {
|
||||
margin-bottom: 0;
|
||||
.topbar-brand {
|
||||
color:var(--accent); font-size:12px; font-weight:750;
|
||||
letter-spacing:.06em; white-space:nowrap;
|
||||
}
|
||||
|
||||
.workspace-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
.topbar-center { display:flex; align-items:center; }
|
||||
.topbar-right {
|
||||
display:flex; align-items:center; gap:12px;
|
||||
}
|
||||
.step-indicator {
|
||||
font-size:12px; font-weight:650; color:var(--muted);
|
||||
}
|
||||
.user-menu { display:flex; align-items:center; gap:8px; }
|
||||
.user-name {
|
||||
font-size:12px; font-weight:650; color:var(--muted);
|
||||
max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
|
||||
}
|
||||
.icon-btn {
|
||||
min-height:32px; width:32px; border:0; border-radius:6px;
|
||||
background:transparent; color:var(--muted);
|
||||
cursor:pointer; font-size:16px; display:inline-flex;
|
||||
align-items:center; justify-content:center;
|
||||
}
|
||||
.icon-btn:hover { background:var(--surface-muted); color:var(--text); }
|
||||
.link-btn {
|
||||
border:0; background:none; color:var(--muted);
|
||||
cursor:pointer; font-size:12px; padding:4px 8px; border-radius:4px;
|
||||
}
|
||||
.link-btn:hover { background:var(--surface-muted); color:var(--text); }
|
||||
.link-btn:disabled { opacity:.4; cursor:not-allowed; }
|
||||
|
||||
/* ===== LANG SWITCH ===== */
|
||||
.lang-switch {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
background: var(--surface-muted);
|
||||
border-radius: 6px;
|
||||
padding: 3px;
|
||||
display:inline-flex; gap:3px;
|
||||
background:var(--surface-muted); border-radius:6px; padding:2px;
|
||||
}
|
||||
|
||||
.lang-btn {
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.04em;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
min-height:26px; padding:0 8px; border:0; border-radius:4px;
|
||||
background:transparent; color:var(--muted);
|
||||
font-size:11px; font-weight:750; cursor:pointer;
|
||||
}
|
||||
|
||||
.lang-btn:hover:not(:disabled) {
|
||||
background: rgba(24, 32, 27, 0.04);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.lang-btn:hover { background:rgba(24,32,27,.04); color:var(--text); }
|
||||
.lang-btn.is-active {
|
||||
background: var(--surface);
|
||||
color: var(--accent);
|
||||
box-shadow: 0 1px 2px rgba(24, 32, 27, 0.06);
|
||||
background:var(--surface); color:var(--accent);
|
||||
box-shadow:0 1px 2px rgba(24,32,27,.06);
|
||||
}
|
||||
|
||||
.user-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
padding: 10px 12px;
|
||||
background: var(--surface-muted);
|
||||
border-radius: 6px;
|
||||
/* ===== MAIN GRID ===== */
|
||||
.main-grid {
|
||||
display:grid;
|
||||
grid-template-columns:1fr 340px;
|
||||
min-height:calc(100vh - 52px);
|
||||
}
|
||||
.main-pane {
|
||||
padding:28px 32px; display:flex; flex-direction:column; gap:20px;
|
||||
max-width:800px;
|
||||
}
|
||||
.feedback-sidebar {
|
||||
background:var(--surface);
|
||||
border-left:1px solid var(--line);
|
||||
padding:24px 20px;
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
color: var(--text);
|
||||
/* ===== SETUP CARD ===== */
|
||||
.setup-card {
|
||||
background:var(--surface); border:1px solid var(--line);
|
||||
border-radius:var(--radius); padding:24px;
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.card-header { margin-bottom:18px; }
|
||||
.card-header h2 { margin:0 0 4px; font-size:20px; }
|
||||
.card-hint { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
|
||||
|
||||
.inline-form { display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
|
||||
.field-row { display:flex; gap:12px; flex:1; min-width:0; }
|
||||
.field-row label { flex:1; min-width:0; }
|
||||
|
||||
.stacked-form { display:grid; gap:14px; }
|
||||
|
||||
label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:650; }
|
||||
|
||||
input, textarea, select {
|
||||
width:100%; border:1px solid var(--line); border-radius:var(--radius);
|
||||
background:#fbfcfa; color:var(--text); padding:10px 12px; outline:none;
|
||||
}
|
||||
select {
|
||||
appearance:none;
|
||||
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'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat:no-repeat; background-position:right 10px center;
|
||||
padding-right:32px;
|
||||
}
|
||||
textarea { min-height:120px; resize:vertical; line-height:1.5; }
|
||||
input:focus, textarea:focus, select:focus {
|
||||
border-color:var(--accent); box-shadow:0 0 0 3px rgba(25,118,75,.1);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.material-form,
|
||||
.asset-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
/* ===== BUTTONS ===== */
|
||||
button {
|
||||
min-height:40px; border:0; border-radius:var(--radius);
|
||||
background:var(--accent); color:#fff; cursor:pointer;
|
||||
font-weight:650; display:inline-flex; align-items:center;
|
||||
justify-content:center; gap:8px; padding:0 20px;
|
||||
transition:background .15s ease,transform .1s ease;
|
||||
white-space:nowrap;
|
||||
}
|
||||
button:hover:not(:disabled) { background:var(--accent-dark); }
|
||||
button:active:not(:disabled) { transform:translateY(1px); }
|
||||
button:disabled { cursor:not-allowed; opacity:.45; }
|
||||
.btn-spinner {
|
||||
display:none; width:14px; height:14px;
|
||||
border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
|
||||
border-radius:50%; animation:spin .8s linear infinite;
|
||||
}
|
||||
button.is-loading .btn-text { opacity:.85; }
|
||||
button.is-loading .btn-spinner { display:inline-block; }
|
||||
@keyframes spin { to { transform:rotate(360deg); } }
|
||||
|
||||
/* ===== STATUS / ERROR ===== */
|
||||
.status-line {
|
||||
display:flex; align-items:center; gap:8px;
|
||||
min-height:18px; margin:14px 0 0; font-size:12px; color:var(--muted);
|
||||
}
|
||||
.status-dot {
|
||||
display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent);
|
||||
}
|
||||
.status-line.is-busy .status-dot { background:var(--warn); animation:pulse 1.2s ease-in-out infinite; }
|
||||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
|
||||
.error-line {
|
||||
min-height:18px; margin:8px 0 0; font-size:12px; color:var(--danger);
|
||||
}
|
||||
|
||||
/* ===== QUESTION BAR ===== */
|
||||
.question-bar { margin-top:4px; }
|
||||
.bar-label { font-size:12px; font-weight:650; color:var(--muted); margin-bottom:10px; }
|
||||
.question-tabs {
|
||||
display:flex; flex-wrap:wrap; gap:8px;
|
||||
}
|
||||
.question-tab {
|
||||
border:1px solid var(--line); border-radius:var(--radius);
|
||||
background:#fbfcfa; color:var(--text); padding:10px 16px;
|
||||
cursor:pointer; font-size:13px; font-weight:500; text-align:left;
|
||||
transition:border-color .15s,border-left-color .15s,background .15s;
|
||||
border-left:3px solid transparent;
|
||||
}
|
||||
.question-tab:hover { border-color:var(--accent); }
|
||||
.question-tab[aria-selected="true"] {
|
||||
border-color:var(--accent); border-left-color:var(--accent);
|
||||
background:var(--surface-muted); font-weight:650;
|
||||
}
|
||||
.question-tab-id {
|
||||
display:block; font-size:11px; color:var(--accent); font-weight:750; margin-bottom:3px;
|
||||
}
|
||||
|
||||
/* ===== ANSWER AREA ===== */
|
||||
.answer-form { display:grid; gap:12px; }
|
||||
.answer-header {
|
||||
display:flex; align-items:baseline; justify-content:space-between; gap:12px;
|
||||
}
|
||||
.answer-header label {
|
||||
font-size:14px; font-weight:700; color:var(--text);
|
||||
}
|
||||
.answer-hint { font-size:12px; color:var(--muted); }
|
||||
|
||||
/* ===== TOOLS PANEL ===== */
|
||||
.tools-divider {
|
||||
height:1px; background:var(--line); margin:12px 0 8px;
|
||||
}
|
||||
.tools-panel { display:flex; flex-direction:column; gap:16px; }
|
||||
.tools-panel h2 { font-size:18px; margin:0; }
|
||||
|
||||
/* ===== FEEDBACK SIDEBAR ===== */
|
||||
.sidebar-empty {
|
||||
text-align:center; padding:40px 12px; color:var(--muted);
|
||||
}
|
||||
.sidebar-empty .empty-icon {
|
||||
width:40px; height:40px; margin:0 auto 14px; opacity:.35;
|
||||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%235b665f' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
|
||||
background-size:contain; background-repeat:no-repeat; background-position:center;
|
||||
}
|
||||
.sidebar-empty p { margin:0; font-size:13px; line-height:1.55; }
|
||||
.feedback-content { display:flex; flex-direction:column; gap:16px; }
|
||||
|
||||
/* Grade badge */
|
||||
.feedback-grade { text-align:center; padding:8px 0 4px; }
|
||||
.grade-badge {
|
||||
display:inline-block; padding:6px 20px; border-radius:999px;
|
||||
font-size:14px; font-weight:800; letter-spacing:.02em;
|
||||
}
|
||||
.grade-badge.miss { background:var(--weak-bg); color:var(--weak); }
|
||||
.grade-badge.partial{ background:var(--warn-bg); color:var(--warn); }
|
||||
.grade-badge.solid { background:var(--good-bg); color:var(--good); }
|
||||
.grade-badge.strong { background:var(--strong-bg); color:var(--strong); }
|
||||
.grade-summary {
|
||||
margin:8px 0 0; font-size:12px; color:var(--muted);
|
||||
}
|
||||
|
||||
/* Score metrics */
|
||||
.score-metrics { display:grid; gap:1px; background:var(--line); border-radius:var(--radius); overflow:hidden; }
|
||||
.metric-row {
|
||||
display:grid; grid-template-columns:1fr auto;
|
||||
gap:8px; padding:10px 14px; background:var(--surface);
|
||||
font-size:13px;
|
||||
}
|
||||
.metric-row strong { color:var(--accent); }
|
||||
|
||||
/* Feedback blocks */
|
||||
.feedback-block { display:none; }
|
||||
.feedback-block.has-content { display:block; }
|
||||
.feedback-block h4 {
|
||||
margin:0 0 6px; font-size:12px; font-weight:750; color:var(--muted);
|
||||
letter-spacing:.03em; text-transform:uppercase;
|
||||
}
|
||||
.feedback-block ul {
|
||||
margin:0; padding-left:18px; font-size:13px; color:var(--muted); line-height:1.6;
|
||||
}
|
||||
|
||||
/* ===== PROGRESS SECTION ===== */
|
||||
.sidebar-divider {
|
||||
height:1px; background:var(--line); margin:20px 0;
|
||||
}
|
||||
.progress-content { display:flex; flex-direction:column; gap:14px; }
|
||||
.progress-header {
|
||||
display:flex; align-items:center; justify-content:space-between;
|
||||
}
|
||||
.progress-header h3 { margin:0; font-size:16px; }
|
||||
.progress-bar-wrap {
|
||||
position:relative; height:28px; background:var(--surface-muted);
|
||||
border-radius:14px; overflow:hidden;
|
||||
}
|
||||
.progress-bar {
|
||||
height:100%; background:var(--accent); border-radius:14px;
|
||||
transition:width .5s ease;
|
||||
min-width:0;
|
||||
}
|
||||
.progress-bar.high { background:var(--strong); }
|
||||
.progress-bar.medium { background:var(--good); }
|
||||
.progress-bar.low { background:var(--warn); }
|
||||
.progress-pct {
|
||||
position:absolute; right:14px; top:50%; transform:translateY(-50%);
|
||||
font-size:12px; font-weight:800; color:var(--text);
|
||||
}
|
||||
|
||||
/* Concept pills */
|
||||
.concept-list { display:flex; flex-wrap:wrap; gap:6px; }
|
||||
.concept-pill {
|
||||
display:inline-flex; align-items:center; gap:6px;
|
||||
border:1px solid var(--line); border-radius:999px;
|
||||
padding:5px 12px; 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); }
|
||||
|
||||
/* Challenge */
|
||||
.challenge-block {
|
||||
border:1px solid var(--line); border-radius:var(--radius);
|
||||
padding:14px; font-size:13px; line-height:1.55; color:var(--muted);
|
||||
}
|
||||
.challenge-block strong { color:var(--text); }
|
||||
|
||||
/* ===== EMPTY STATE ===== */
|
||||
.empty-state {
|
||||
border:1px dashed var(--line); border-radius:var(--radius);
|
||||
color:var(--muted); padding:18px 16px; text-align:center;
|
||||
font-size:12px; line-height:1.5;
|
||||
}
|
||||
.empty-hint::before {
|
||||
content:""; display:block; width:20px; height:20px;
|
||||
margin:0 auto 8px; opacity:.4;
|
||||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b665f' stroke-width='1.5' stroke-linecap='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;
|
||||
}
|
||||
|
||||
/* ===== ONTOLOGY ===== */
|
||||
.ontology-view { display:grid; gap:10px; }
|
||||
.summary-strip { display:flex; flex-wrap:wrap; gap:8px; }
|
||||
.summary-chip {
|
||||
background:var(--surface-muted); border-radius:999px;
|
||||
color:var(--muted); font-size:11px; font-weight:750; padding:5px 10px;
|
||||
}
|
||||
.prompt-text {
|
||||
background:#fbfcfa; border:1px solid var(--line); border-radius:var(--radius);
|
||||
margin:0; padding:12px; white-space:pre-wrap; font-size:12px; line-height:1.5; color:var(--text);
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width:900px) {
|
||||
.main-grid { grid-template-columns:1fr; }
|
||||
.main-pane { padding:20px; }
|
||||
.feedback-sidebar { border-left:0; border-top:1px solid var(--line); padding:20px; }
|
||||
.topbar { flex-wrap:wrap; height:auto; gap:8px; padding:10px 14px; }
|
||||
.topbar-right { flex-wrap:wrap; justify-content:flex-end; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user