diff --git a/frontend/src/app.css b/frontend/src/app.css index 8e66dd1..757bb70 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -6548,9 +6548,110 @@ html.modal-scroll-locked .app-main { min-width: 0; } +/* Übungsformular — Register-Tabs & farbige Bereiche */ +.exercise-form-edit { + padding-top: 4px; +} +.exercise-form-edit__tabbar { + display: flex; + align-items: stretch; + margin: 0 0 16px; + padding: 0 0 12px; + border-bottom: 1px solid var(--border); + position: sticky; + top: 0; + z-index: 6; + background: var(--surface); +} +.exercise-form-edit__tabbar .admin-page-subtabs { + flex: 1; + min-width: 0; +} +.exercise-form-panel { + padding: 4px 0 8px 14px; + margin-bottom: 4px; + border-left: 3px solid var(--border); +} +.exercise-form-panel--basics { + border-left-color: var(--accent); +} +.exercise-form-panel--guide { + border-left-color: color-mix(in srgb, #2563eb 70%, var(--accent)); +} +.exercise-form-panel--classify { + border-left-color: color-mix(in srgb, #7c3aed 65%, var(--accent)); +} +.exercise-form-panel--combo { + border-left-color: color-mix(in srgb, #d97706 70%, var(--accent-dark)); +} +.exercise-form-panel--variants { + border-left-color: color-mix(in srgb, #0891b2 70%, var(--accent)); +} +.exercise-form-panel--media { + border-left-color: color-mix(in srgb, var(--text3) 55%, var(--border)); +} +.exercise-form-panel__title { + margin: 0 0 4px; + font-size: 1.05rem; + font-weight: 700; +} +.exercise-form-panel__hint { + margin: 0 0 14px; + font-size: 12px; + color: var(--text3); + line-height: 1.45; +} +.exercise-form-panel__body { + min-width: 0; +} +.exercise-form-type-box { + padding: 12px; + border-radius: 10px; + border: 1px solid var(--border); + background: var(--surface2); + margin-bottom: 12px; +} +.exercise-form-type-box__hint { + margin: 8px 0 0; + font-size: 12px; + color: var(--text2); + line-height: 1.45; +} +.exercise-form-inline-tab-link { + padding: 0; + border: none; + background: none; + color: var(--accent-dark); + font: inherit; + font-weight: 700; + text-decoration: underline; + cursor: pointer; +} +.exercise-form-subsection { + padding: 12px 0; + border-top: 1px dashed var(--border); + margin-top: 8px; +} +.exercise-form-subsection:first-child { + border-top: none; + margin-top: 0; + padding-top: 0; +} +.exercise-form-subsection__title { + margin: 0 0 6px; + font-size: 0.95rem; + font-weight: 700; +} +.exercise-form-subsection__hint { + margin: 0 0 10px; + font-size: 12px; + color: var(--text3); + line-height: 1.4; +} + /* Übungsformular — Klassifikation & Meta-Chips */ .exercise-form-meta-panel { - margin: 4px 0 16px; + margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; diff --git a/frontend/src/components/exercises/ExerciseFormLayout.jsx b/frontend/src/components/exercises/ExerciseFormLayout.jsx new file mode 100644 index 0000000..9ce6aba --- /dev/null +++ b/frontend/src/components/exercises/ExerciseFormLayout.jsx @@ -0,0 +1,32 @@ +import React from 'react' +import PageSectionNav from '../PageSectionNav' + +export function ExerciseFormTabBar({ activeTab, onChange, items }) { + return ( +
{hint}
: null} +