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

fix: update all section color references to balanced colors

Browse Source 
Update all rgba and hex values for hover/active states:
- CSS: rgba(145, 99, 184), #724a95
- HTML: rgba(212, 90, 160), #b24485
- Tailwind: rgba(26, 175, 184), #0d8f96

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
Michael Czechowski
2026-01-16 04:59:01 +01:00
parent 36aaaa3d07
commit b499d53c50
1 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/main.css
View File

@@ -2918,25 +2918,25 @@ input:checked + .toggle-slider::before {
.nav-link[data-section="css"]:hover, .nav-link[data-section="css"]:hover,
.nav-link[data-section="css"].active { .nav-link[data-section="css"].active {
background: rgba(139, 107, 196, 0.1); background: rgba(145, 99, 184, 0.1);
color: #6b4fa0; color: #724a95;
} }
.nav-link[data-section="html"]:hover, .nav-link[data-section="html"]:hover,
.nav-link[data-section="html"].active { .nav-link[data-section="html"].active {
background: rgba(199, 91, 122, 0.1); background: rgba(212, 90, 160, 0.1);
color: #a84862; color: #b24485;
} }
.nav-link[data-section="tailwind"]:hover, .nav-link[data-section="tailwind"]:hover,
.nav-link[data-section="tailwind"].active { .nav-link[data-section="tailwind"].active {
background: rgba(38, 166, 154, 0.1); background: rgba(26, 175, 184, 0.1);
color: #00897b; color: #0d8f96;
} }
/* Hint section colors */ /* Hint section colors */
body[data-section="css"] .hint { body[data-section="css"] .hint {
background: rgba(139, 107, 196, 0.3); background: rgba(145, 99, 184, 0.3);
border-left-color: #a98cd6; border-left-color: #a98cd6;
} }
@@ -2945,7 +2945,7 @@ body[data-section="css"] .hint-progress {
} }
body[data-section="html"] .hint { body[data-section="html"] .hint {
background: rgba(199, 91, 122, 0.3); background: rgba(212, 90, 160, 0.3);
border-left-color: #d97a94; border-left-color: #d97a94;
} }
@@ -2954,7 +2954,7 @@ body[data-section="html"] .hint-progress {
} }
body[data-section="tailwind"] .hint { body[data-section="tailwind"] .hint {
background: rgba(38, 166, 154, 0.3); background: rgba(26, 175, 184, 0.3);
border-left-color: #4db6ac; border-left-color: #4db6ac;
} }
@@ -2991,8 +2991,8 @@ body[data-section="tailwind"] .hint-progress {
.ref-nav-link[data-ref="flexbox"].active, .ref-nav-link[data-ref="flexbox"].active,
.ref-nav-link[data-ref="grid"]:hover, .ref-nav-link[data-ref="grid"]:hover,
.ref-nav-link[data-ref="grid"].active { .ref-nav-link[data-ref="grid"].active {
background: rgba(139, 107, 196, 0.15); background: rgba(145, 99, 184, 0.15);
color: #6b4fa0; color: #724a95;
} }
.ref-nav-link[data-ref="html"] { .ref-nav-link[data-ref="html"] {
@@ -3001,8 +3001,8 @@ body[data-section="tailwind"] .hint-progress {
.ref-nav-link[data-ref="html"]:hover, .ref-nav-link[data-ref="html"]:hover,
.ref-nav-link[data-ref="html"].active { .ref-nav-link[data-ref="html"].active {
background: rgba(199, 91, 122, 0.15); background: rgba(212, 90, 160, 0.15);
color: #a84862; color: #b24485;
} }
/* CodeMirror section color overrides */ /* CodeMirror section color overrides */
@@ -3017,11 +3017,11 @@ body[data-section="css"] .cm-editor .cm-dropCursor {
body[data-section="css"] .cm-editor .cm-selectionBackground, body[data-section="css"] .cm-editor .cm-selectionBackground,
body[data-section="css"] .cm-editor .cm-content ::selection { body[data-section="css"] .cm-editor .cm-content ::selection {
background-color: rgba(139, 107, 196, 0.25) !important; background-color: rgba(145, 99, 184, 0.25) !important;
} }
body[data-section="css"] .cm-editor .cm-activeLine { body[data-section="css"] .cm-editor .cm-activeLine {
background-color: rgba(139, 107, 196, 0.08) !important; background-color: rgba(145, 99, 184, 0.08) !important;
} }
body[data-section="html"] .cm-editor .cm-content { body[data-section="html"] .cm-editor .cm-content {
@@ -3035,11 +3035,11 @@ body[data-section="html"] .cm-editor .cm-dropCursor {
body[data-section="html"] .cm-editor .cm-selectionBackground, body[data-section="html"] .cm-editor .cm-selectionBackground,
body[data-section="html"] .cm-editor .cm-content ::selection { body[data-section="html"] .cm-editor .cm-content ::selection {
background-color: rgba(199, 91, 122, 0.25) !important; background-color: rgba(212, 90, 160, 0.25) !important;
} }
body[data-section="html"] .cm-editor .cm-activeLine { body[data-section="html"] .cm-editor .cm-activeLine {
background-color: rgba(199, 91, 122, 0.08) !important; background-color: rgba(212, 90, 160, 0.08) !important;
} }
body[data-section="tailwind"] .cm-editor .cm-content { body[data-section="tailwind"] .cm-editor .cm-content {
@@ -3053,52 +3053,52 @@ body[data-section="tailwind"] .cm-editor .cm-dropCursor {
body[data-section="tailwind"] .cm-editor .cm-selectionBackground, body[data-section="tailwind"] .cm-editor .cm-selectionBackground,
body[data-section="tailwind"] .cm-editor .cm-content ::selection { body[data-section="tailwind"] .cm-editor .cm-content ::selection {
background-color: rgba(38, 166, 154, 0.25) !important; background-color: rgba(26, 175, 184, 0.25) !important;
} }
body[data-section="tailwind"] .cm-editor .cm-activeLine { body[data-section="tailwind"] .cm-editor .cm-activeLine {
background-color: rgba(38, 166, 154, 0.08) !important; background-color: rgba(26, 175, 184, 0.08) !important;
} }
/* Module pill section colors */ /* Module pill section colors */
body[data-section="css"] .module-pill { body[data-section="css"] .module-pill {
background: rgba(139, 107, 196, 0.1); background: rgba(145, 99, 184, 0.1);
color: #9163b8; color: #9163b8;
} }
body[data-section="css"] .module-pill .level-indicator { body[data-section="css"] .module-pill .level-indicator {
color: #6b4fa0; color: #724a95;
} }
body[data-section="html"] .module-pill { body[data-section="html"] .module-pill {
background: rgba(199, 91, 122, 0.1); background: rgba(212, 90, 160, 0.1);
color: #d45aa0; color: #d45aa0;
} }
body[data-section="html"] .module-pill .level-indicator { body[data-section="html"] .module-pill .level-indicator {
color: #a84862; color: #b24485;
} }
body[data-section="tailwind"] .module-pill { body[data-section="tailwind"] .module-pill {
background: rgba(38, 166, 154, 0.1); background: rgba(26, 175, 184, 0.1);
color: #1aafb8; color: #1aafb8;
} }
body[data-section="tailwind"] .module-pill .level-indicator { body[data-section="tailwind"] .module-pill .level-indicator {
color: #00897b; color: #0d8f96;
} }
/* Code block border section colors */ /* Code block border section colors */
body[data-section="css"] .code-block { body[data-section="css"] .code-block {
border-color: rgba(139, 107, 196, 0.4); border-color: rgba(145, 99, 184, 0.4);
} }
body[data-section="html"] .code-block { body[data-section="html"] .code-block {
border-color: rgba(199, 91, 122, 0.4); border-color: rgba(212, 90, 160, 0.4);
} }
body[data-section="tailwind"] .code-block { body[data-section="tailwind"] .code-block {
border-color: rgba(38, 166, 154, 0.4); border-color: rgba(26, 175, 184, 0.4);
} }
/* Section code block CodeMirror syntax highlighting overrides */ /* Section code block CodeMirror syntax highlighting overrides */
@@ -3116,15 +3116,15 @@ body[data-section="tailwind"] .code-block .cm-editor .cm-line {
/* Task instruction bubble section colors */ /* Task instruction bubble section colors */
[data-section="css"] .task-instruction { [data-section="css"] .task-instruction {
background: rgba(139, 107, 196, 0.92); background: rgba(145, 99, 184, 0.92);
} }
[data-section="html"] .task-instruction { [data-section="html"] .task-instruction {
background: rgba(199, 91, 122, 0.92); background: rgba(212, 90, 160, 0.92);
} }
[data-section="tailwind"] .task-instruction { [data-section="tailwind"] .task-instruction {
background: rgba(38, 166, 154, 0.92); background: rgba(26, 175, 184, 0.92);
} }
/* Section page progress bar colors */ /* Section page progress bar colors */