MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Complete template system overhaul: CSS variables, theme management, and UI improvements #74

Merged
Copilot merged 47 commits from copilot/fix-language-constants-display into main 2026-02-07 17:49:30 +00:00
Conversation 2 Commits 47 Files Changed 29 +34 -14
3 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 733bcc3496 - Show all commits

10
src/media/css/colors/dark/colors_standard.css
View File

@@ -246,6 +246,16 @@
--focus-ring-opacity: .6; --focus-ring-opacity: .6;
--focus-ring-color: #5472ff66; --focus-ring-color: #5472ff66;
/* Forms and inputs - adapted for dark mode */
--input-color: #e6ebf1;
--input-bg: #1a2332;
--input-border-color: #3a4250;
--input-focus-border-color: #5472ff;
--input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25);
--input-placeholder-color: #8894aa;
--input-disabled-bg: #0f1318;
--input-disabled-border-color: #2b323b;
--form-valid-color: #78d694; --form-valid-color: #78d694;
--form-valid-border-color: #78d694; --form-valid-border-color: #78d694;
--form-invalid-color: #ff8e86; --form-invalid-color: #ff8e86;

10
src/media/css/colors/light/colors_standard.css
View File

@@ -219,6 +219,16 @@
--focus-ring-width: .25rem; --focus-ring-width: .25rem;
--focus-ring-opacity: .25; --focus-ring-opacity: .25;
--focus-ring-color: #01015640; --focus-ring-color: #01015640;
/* Forms and inputs */
--input-color: hsl(210, 11%, 15%);
--input-bg: #ffffff;
--input-border-color: hsl(210, 14%, 83%);
--input-focus-border-color: #8894aa;
--input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
--input-placeholder-color: hsl(210, 7%, 46%);
--input-disabled-bg: hsl(210, 16%, 93%);
--input-disabled-border-color: hsl(210, 14%, 83%);
--form-valid-color: #448344; --form-valid-color: #448344;
--form-valid-border-color: #448344; --form-valid-border-color: #448344;
--form-invalid-color: #a51f18; --form-invalid-color: #a51f18;

28
src/media/css/template.css
View File

@@ -2601,10 +2601,10 @@ progress {
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
color: hsl(210, 11%, 15%); color: var(--input-color);
background-color: var(--body-color); background-color: var(--input-bg);
background-clip: padding-box; background-clip: padding-box;
border: 1px solid hsl(210, 14%, 83%); border: 1px solid var(--input-border-color);
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
@@ -2633,12 +2633,12 @@ progress {
} }
.form-control:focus { .form-control:focus {
color: hsl(210, 11%, 15%); color: var(--input-color);
background-color: var(--body-color); background-color: var(--input-bg);
border-color: #8894aa; border-color: var(--input-focus-border-color);
outline: 0; outline: 0;
-webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); -webkit-box-shadow: var(--input-focus-box-shadow);
box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); box-shadow: var(--input-focus-box-shadow);
} }
.form-control::-webkit-date-and-time-value { .form-control::-webkit-date-and-time-value {
@@ -2646,32 +2646,32 @@ progress {
} }
.form-control::-webkit-input-placeholder { .form-control::-webkit-input-placeholder {
color: hsl(210, 7%, 46%); color: var(--input-placeholder-color);
opacity: 1; opacity: 1;
} }
.form-control::-moz-placeholder { .form-control::-moz-placeholder {
color: hsl(210, 7%, 46%); color: var(--input-placeholder-color);
opacity: 1; opacity: 1;
} }
.form-control:-ms-input-placeholder { .form-control:-ms-input-placeholder {
color: hsl(210, 7%, 46%); color: var(--input-placeholder-color);
opacity: 1; opacity: 1;
} }
.form-control::-ms-input-placeholder { .form-control::-ms-input-placeholder {
color: hsl(210, 7%, 46%); color: var(--input-placeholder-color);
opacity: 1; opacity: 1;
} }
.form-control::placeholder { .form-control::placeholder {
color: hsl(210, 7%, 46%); color: var(--input-placeholder-color);
opacity: 1; opacity: 1;
} }
.form-control:disabled { .form-control:disabled {
background-color: hsl(210, 16%, 93%); background-color: var(--input-disabled-bg);
opacity: 1; opacity: 1;
} }