public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

fix: improve color coding for nav buttons, CodeMirror theme, and prev/next navigation

Browse Source
This commit is contained in:
Michael Czechowski
2026-01-16 03:51:25 +01:00
parent 34958b11b4
commit 46ce0f357d
2 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.js
View File

@@ -696,6 +696,7 @@ function nextLesson() {
if (newState.module.id !== prevModuleId) { if (newState.module.id !== prevModuleId) {
updateModuleHighlight(newState.module.id); updateModuleHighlight(newState.module.id);
updateSectionColor(getModuleSection(newState.module));
} }
loadCurrentLesson(); loadCurrentLesson();
} }
@@ -712,6 +713,7 @@ function prevLesson() {
if (newState.module.id !== prevModuleId) { if (newState.module.id !== prevModuleId) {
updateModuleHighlight(newState.module.id); updateModuleHighlight(newState.module.id);
updateSectionColor(getModuleSection(newState.module));
} }
loadCurrentLesson(); loadCurrentLesson();
} }

57
src/main.css
View File

@@ -1130,13 +1130,13 @@ button.lesson-list-item {
} }
.btn-primary { .btn-primary {
background: var(--primary-color); background: var(--section-color, var(--primary-color));
color: var(--white-text); color: var(--white-text);
border-color: var(--primary-dark); border-color: var(--section-color-dark, var(--primary-dark));
} }
.btn-primary:hover { .btn-primary:hover {
background: var(--primary-dark); background: var(--section-color-dark, var(--primary-dark));
} }
.btn-run { .btn-run {
@@ -2947,55 +2947,58 @@ input:checked + .toggle-slider::before {
} }
/* CodeMirror section color overrides */ /* CodeMirror section color overrides */
[data-section="css"] .cm-content { body[data-section="css"] .cm-editor .cm-content {
caret-color: #7c4dff; caret-color: #7c4dff !important;
} }
[data-section="css"] .cm-cursor, body[data-section="css"] .cm-editor .cm-cursor,
[data-section="css"] .cm-dropCursor { body[data-section="css"] .cm-editor .cm-dropCursor {
border-left-color: #7c4dff !important; border-left-color: #7c4dff !important;
} }
[data-section="css"] .cm-searchMatch { body[data-section="css"] .cm-editor .cm-selectionBackground,
outline-color: #7c4dff; body[data-section="css"] .cm-editor .cm-content ::selection {
background-color: rgba(124, 77, 255, 0.25) !important;
} }
[data-section="css"] .cm-searchMatch.cm-searchMatch-selected { body[data-section="css"] .cm-editor .cm-activeLine {
background-color: rgba(124, 77, 255, 0.3); background-color: rgba(124, 77, 255, 0.08) !important;
} }
[data-section="html"] .cm-content { body[data-section="html"] .cm-editor .cm-content {
caret-color: #e91e63; caret-color: #e91e63 !important;
} }
[data-section="html"] .cm-cursor, body[data-section="html"] .cm-editor .cm-cursor,
[data-section="html"] .cm-dropCursor { body[data-section="html"] .cm-editor .cm-dropCursor {
border-left-color: #e91e63 !important; border-left-color: #e91e63 !important;
} }
[data-section="html"] .cm-searchMatch { body[data-section="html"] .cm-editor .cm-selectionBackground,
outline-color: #e91e63; body[data-section="html"] .cm-editor .cm-content ::selection {
background-color: rgba(233, 30, 99, 0.25) !important;
} }
[data-section="html"] .cm-searchMatch.cm-searchMatch-selected { body[data-section="html"] .cm-editor .cm-activeLine {
background-color: rgba(233, 30, 99, 0.3); background-color: rgba(233, 30, 99, 0.08) !important;
} }
[data-section="tailwind"] .cm-content { body[data-section="tailwind"] .cm-editor .cm-content {
caret-color: #00bcd4; caret-color: #00bcd4 !important;
} }
[data-section="tailwind"] .cm-cursor, body[data-section="tailwind"] .cm-editor .cm-cursor,
[data-section="tailwind"] .cm-dropCursor { body[data-section="tailwind"] .cm-editor .cm-dropCursor {
border-left-color: #00bcd4 !important; border-left-color: #00bcd4 !important;
} }
[data-section="tailwind"] .cm-searchMatch { body[data-section="tailwind"] .cm-editor .cm-selectionBackground,
outline-color: #00bcd4; body[data-section="tailwind"] .cm-editor .cm-content ::selection {
background-color: rgba(0, 188, 212, 0.25) !important;
} }
[data-section="tailwind"] .cm-searchMatch.cm-searchMatch-selected { body[data-section="tailwind"] .cm-editor .cm-activeLine {
background-color: rgba(0, 188, 212, 0.3); background-color: rgba(0, 188, 212, 0.08) !important;
} }
/* Task instruction bubble section colors */ /* Task instruction bubble section colors */