dayowe/sundog-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update better, attempt visual hierarchy

Browse Source
This commit is contained in:
Dayowe 2025-06-08 22:54:52 +02:00
parent 6e28d3b273
commit 23aa723b5f
1 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
dog-food-calculator-widget.js
View File

@ -740,13 +740,6 @@
gap: 24px; gap: 24px;
} }
.dog-calc-embed-option {
border: 1px solid #e8e3ed;
border-radius: 8px;
padding: 20px;
background: #fcfafd;
}
.dog-calc-embed-option h4 { .dog-calc-embed-option h4 {
margin: 0 0 8px 0; margin: 0 0 8px 0;
color: #6f3f6d; color: #6f3f6d;
@ -759,9 +752,11 @@
font-size: 0.9rem; font-size: 0.9rem;
} }
/* Default (light theme) code containers */
.dog-calc-code-container { .dog-calc-code-container {
position: relative; position: relative;
background: #312b3b; background: #ffffff;
border: 1px solid #e8e3ed;
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
} }
@ -773,7 +768,7 @@
} }
.dog-calc-code-container code { .dog-calc-code-container code {
color: #f5f3f7; color: #312b3b;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.4; line-height: 1.4;
@ -796,14 +791,12 @@
z-index: 1; z-index: 1;
} }
/* Light theme code containers */ /* Better container backgrounds for contrast */
.dog-calc-theme-light .dog-calc-code-container { .dog-calc-embed-option {
background: #f8f5fa;
border: 1px solid #e8e3ed; border: 1px solid #e8e3ed;
} border-radius: 8px;
padding: 20px;
.dog-calc-theme-light .dog-calc-code-container code { background: #fcfafd;
color: #312b3b;
} }
.dog-calc-copy-btn:hover { background: #e87741; } .dog-calc-copy-btn:hover { background: #e87741; }
@ -855,6 +848,18 @@
color: #b8b0c2; color: #b8b0c2;
} }
/* Dark theme code containers - different from embed option background */
.dog-calc-theme-dark .dog-calc-code-container,
.dog-calc-widget.dog-calc-theme-dark .dog-calc-code-container {
background: #1a1621;
border-color: #2a2330;
}
.dog-calc-theme-dark .dog-calc-code-container code,
.dog-calc-widget.dog-calc-theme-dark .dog-calc-code-container code {
color: #f5f3f7;
}
/* System theme modal styles */ /* System theme modal styles */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.dog-calc-theme-system .dog-calc-modal-content, .dog-calc-theme-system .dog-calc-modal-content,
@ -900,6 +905,18 @@
.dog-calc-widget.dog-calc-theme-system .dog-calc-embed-option p { .dog-calc-widget.dog-calc-theme-system .dog-calc-embed-option p {
color: #b8b0c2; color: #b8b0c2;
} }
/* System theme code containers - different from embed option background */
.dog-calc-theme-system .dog-calc-code-container,
.dog-calc-widget.dog-calc-theme-system .dog-calc-code-container {
background: #1a1621;
border-color: #2a2330;
}
.dog-calc-theme-system .dog-calc-code-container code,
.dog-calc-widget.dog-calc-theme-system .dog-calc-code-container code {
color: #f5f3f7;
}
} }
`; `;