Update better, attempt visual hierarchy

This commit is contained in:
Dayowe 2025-06-08 22:54:52 +02:00
parent 6e28d3b273
commit 23aa723b5f

View File

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