css variables
This commit is contained in:
Dayowe
parent
271c8baafd
commit
3ef5908b09
377
iframe.html
377
iframe.html
@ -14,6 +14,11 @@
|
||||
--border-color: #e8e3ed;
|
||||
--text-primary: #6f3f6d;
|
||||
--text-secondary: #8f7a8e;
|
||||
--accent-color: #f19a5f;
|
||||
--text-label: #635870; /* For form labels, secondary UI text */
|
||||
--success-color: #7fa464; /* Green for success states */
|
||||
--bg-tertiary: #f8f5fa; /* Light background variant */
|
||||
--error-color: #e87159; /* Error states and messages */
|
||||
}
|
||||
|
||||
body {
|
||||
@ -23,7 +28,7 @@
|
||||
overflow-x: hidden;
|
||||
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
line-height: 1.5;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container {
|
||||
@ -46,8 +51,8 @@
|
||||
}
|
||||
|
||||
.dog-calculator-section {
|
||||
background: #fdfcfe;
|
||||
border: 1px solid #e8e3ed;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px 8px 0 0;
|
||||
padding: 24px;
|
||||
margin-bottom: 0;
|
||||
@ -65,7 +70,7 @@
|
||||
|
||||
.dog-calculator-section h2 {
|
||||
margin: 0;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -80,12 +85,12 @@
|
||||
.dog-calculator-unit-label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: #635870;
|
||||
color: var(--text-label);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.dog-calculator-unit-label.active {
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -109,7 +114,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #e8e3ed;
|
||||
background-color: var(--border-color);
|
||||
transition: 0.3s;
|
||||
border-radius: 24px;
|
||||
}
|
||||
@ -143,7 +148,7 @@
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@ -152,12 +157,12 @@
|
||||
.dog-calculator-form-group input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #e8e3ed;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
background-color: #ffffff;
|
||||
color: #6f3f6d;
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
transition: all 0.2s ease;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
@ -170,8 +175,8 @@
|
||||
}
|
||||
|
||||
.dog-calculator-form-group select option {
|
||||
background-color: #ffffff;
|
||||
color: #6f3f6d;
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-form-group input[type="number"],
|
||||
@ -185,14 +190,14 @@
|
||||
.dog-calculator-form-group input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: #f19a5f;
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-secondary);
|
||||
box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
|
||||
}
|
||||
|
||||
.dog-calculator-form-group input[readonly] {
|
||||
background-color: #f8f5fa;
|
||||
background-color: var(--bg-tertiary);
|
||||
cursor: not-allowed;
|
||||
color: #635870;
|
||||
color: var(--text-label);
|
||||
}
|
||||
|
||||
.dog-calculator-results {
|
||||
@ -216,13 +221,13 @@
|
||||
|
||||
.dog-calculator-result-label {
|
||||
font-weight: 500;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.dog-calculator-result-value {
|
||||
font-weight: 600;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.1rem;
|
||||
padding: 4px 12px;
|
||||
background: rgba(241, 154, 95, 0.15);
|
||||
@ -230,8 +235,8 @@
|
||||
}
|
||||
|
||||
.dog-calculator-collapsible {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8e3ed;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-top: none;
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
@ -239,15 +244,15 @@
|
||||
}
|
||||
|
||||
.dog-calculator-collapsible-header {
|
||||
background: #f8f5fa;
|
||||
background: var(--bg-tertiary);
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #e8e3ed;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-collapsible-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -275,7 +280,7 @@
|
||||
}
|
||||
|
||||
.dog-calculator-error {
|
||||
color: #e87159;
|
||||
color: var(--error-color);
|
||||
font-size: 0.875rem;
|
||||
margin-top: 6px;
|
||||
font-weight: 500;
|
||||
@ -291,16 +296,16 @@
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: #f8f5fa;
|
||||
border-left: 1px solid #e8e3ed;
|
||||
border-right: 1px solid #e8e3ed;
|
||||
background: var(--bg-tertiary);
|
||||
border-left: 1px solid var(--border-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
margin-top: -1px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.dog-calculator-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #e8e3ed;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
@ -311,7 +316,7 @@
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: white;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-btn:hover {
|
||||
@ -325,15 +330,15 @@
|
||||
}
|
||||
|
||||
.dog-calculator-btn-embed:hover {
|
||||
border-color: #7fa464;
|
||||
color: #7fa464;
|
||||
border-color: var(--success-color);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.dog-calculator-footer {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: #fdfcfe;
|
||||
border: 1px solid #e8e3ed;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0 0 8px 8px;
|
||||
border-top: none;
|
||||
margin-top: -1px;
|
||||
@ -449,18 +454,18 @@
|
||||
--border-color: #433c4f;
|
||||
--text-primary: #f5f3f7;
|
||||
--text-secondary: #b8b0c2;
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-section,
|
||||
.dog-calculator-container.theme-dark .dog-calculator-collapsible {
|
||||
background: #24202d;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-collapsible-header {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-collapsible-header:hover {
|
||||
@ -471,51 +476,51 @@
|
||||
.dog-calculator-container.theme-dark .dog-calculator-collapsible-header h3,
|
||||
.dog-calculator-container.theme-dark .dog-calculator-form-group label,
|
||||
.dog-calculator-container.theme-dark .dog-calculator-result-label {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-unit-label {
|
||||
color: #b8b0c2;
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-unit-label.active {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-slider {
|
||||
background-color: #433c4f;
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-form-group select,
|
||||
.dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"],
|
||||
.dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"] {
|
||||
background-color: #312b3b;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-form-group select option {
|
||||
background-color: #312b3b;
|
||||
color: #f5f3f7;
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-form-group select:focus,
|
||||
.dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"]:focus,
|
||||
.dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"]:focus {
|
||||
background-color: #312b3b;
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-form-group input[readonly] {
|
||||
background-color: #433c4f;
|
||||
color: #b8b0c2;
|
||||
background-color: var(--border-color);
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-inline-unit {
|
||||
background-color: #312b3b;
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: rgba(241, 154, 95, 0.5);
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
}
|
||||
@ -531,14 +536,14 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-inline-unit option {
|
||||
background-color: #312b3b;
|
||||
color: #f5f3f7;
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-unit-btn {
|
||||
background-color: #312b3b;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-unit-btn:hover {
|
||||
@ -558,24 +563,24 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-result-value {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
background: rgba(241, 154, 95, 0.2);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-footer {
|
||||
background: #24202d;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-action-buttons {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-btn {
|
||||
background: #433c4f;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
background: var(--border-color);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-btn:hover {
|
||||
@ -589,8 +594,8 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-btn-embed:hover {
|
||||
border-color: #7fa464;
|
||||
color: #7fa464;
|
||||
border-color: var(--success-color);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
/* System theme - follows user's OS preference */
|
||||
@ -601,18 +606,18 @@
|
||||
--border-color: #433c4f;
|
||||
--text-primary: #f5f3f7;
|
||||
--text-secondary: #b8b0c2;
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-section,
|
||||
.dog-calculator-container.theme-system .dog-calculator-collapsible {
|
||||
background: #24202d;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-collapsible-header {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-collapsible-header:hover {
|
||||
@ -623,51 +628,51 @@
|
||||
.dog-calculator-container.theme-system .dog-calculator-collapsible-header h3,
|
||||
.dog-calculator-container.theme-system .dog-calculator-form-group label,
|
||||
.dog-calculator-container.theme-system .dog-calculator-result-label {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-unit-label {
|
||||
color: #b8b0c2;
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-unit-label.active {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-slider {
|
||||
background-color: #433c4f;
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-form-group select,
|
||||
.dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"],
|
||||
.dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"] {
|
||||
background-color: #312b3b;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-form-group select option {
|
||||
background-color: #312b3b;
|
||||
color: #f5f3f7;
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-form-group select:focus,
|
||||
.dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"]:focus,
|
||||
.dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"]:focus {
|
||||
background-color: #312b3b;
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-form-group input[readonly] {
|
||||
background-color: #433c4f;
|
||||
color: #b8b0c2;
|
||||
background-color: var(--border-color);
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-inline-unit {
|
||||
background-color: #312b3b;
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: rgba(241, 154, 95, 0.5);
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
}
|
||||
@ -683,14 +688,14 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-inline-unit option {
|
||||
background-color: #312b3b;
|
||||
color: #f5f3f7;
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-unit-btn {
|
||||
background-color: #312b3b;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-unit-btn:hover {
|
||||
@ -710,24 +715,24 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-result-value {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
background: rgba(241, 154, 95, 0.2);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-footer {
|
||||
background: #24202d;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-action-buttons {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-btn {
|
||||
background: #433c4f;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
background: var(--border-color);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-btn:hover {
|
||||
@ -741,8 +746,8 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-btn-embed:hover {
|
||||
border-color: #7fa464;
|
||||
color: #7fa464;
|
||||
border-color: var(--success-color);
|
||||
color: var(--success-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -766,10 +771,10 @@
|
||||
|
||||
.dog-calculator-modal-content {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-secondary);
|
||||
margin: 5% auto;
|
||||
padding: 30px;
|
||||
border: 1px solid #e8e3ed;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
@ -798,7 +803,7 @@
|
||||
top: 20px;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
@ -809,7 +814,7 @@
|
||||
|
||||
.dog-calculator-modal h3 {
|
||||
margin: 0 0 24px 0;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
@ -843,7 +848,7 @@
|
||||
.dog-calculator-share-twitter:hover { background: #1991da; transform: translateY(-1px); }
|
||||
.dog-calculator-share-linkedin { background: #0a66c2; }
|
||||
.dog-calculator-share-linkedin:hover { background: #084d95; transform: translateY(-1px); }
|
||||
.dog-calculator-share-email { background: #6f3f6d; }
|
||||
.dog-calculator-share-email { background: var(--text-primary); }
|
||||
.dog-calculator-share-email:hover { background: #5a3357; transform: translateY(-1px); }
|
||||
.dog-calculator-share-copy { background: #f19a5f; }
|
||||
.dog-calculator-share-copy:hover { background: #e87741; transform: translateY(-1px); }
|
||||
@ -857,12 +862,12 @@
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid #e8e3ed;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-family: monospace;
|
||||
background: #f8f5fa;
|
||||
color: #6f3f6d;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Embed Modal */
|
||||
@ -873,7 +878,7 @@
|
||||
}
|
||||
|
||||
.dog-calculator-embed-option {
|
||||
border: 1px solid #e8e3ed;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #fcfafd;
|
||||
@ -881,21 +886,21 @@
|
||||
|
||||
.dog-calculator-embed-option h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.dog-calculator-embed-option p {
|
||||
margin: 0 0 16px 0;
|
||||
color: #635870;
|
||||
color: var(--text-label);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Default (light theme) code containers */
|
||||
.dog-calculator-code-container {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8e3ed;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -907,7 +912,7 @@
|
||||
}
|
||||
|
||||
.dog-calculator-code-container code {
|
||||
color: #312b3b;
|
||||
color: var(--bg-secondary);
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
@ -931,21 +936,21 @@
|
||||
}
|
||||
|
||||
.dog-calculator-copy-btn:hover { background: #e87741; }
|
||||
.dog-calculator-copy-btn.copied { background: #7fa464; }
|
||||
.dog-calculator-copy-btn.copied:hover { background: #7fa464; }
|
||||
.dog-calculator-copy-btn.copied { background: var(--success-color); }
|
||||
.dog-calculator-copy-btn.copied:hover { background: var(--success-color); }
|
||||
|
||||
/* Dark theme modal styles */
|
||||
.dog-calculator-container.theme-dark .dog-calculator-modal-content {
|
||||
background-color: #24202d;
|
||||
border-color: #433c4f;
|
||||
background-color: var(--bg-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-modal h3 {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-modal-close {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-modal-close:hover {
|
||||
@ -953,22 +958,22 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-share-url input {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-embed-option {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-embed-option h4 {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-embed-option p {
|
||||
color: #b8b0c2;
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
/* Dark theme code containers - different from embed option background */
|
||||
@ -978,22 +983,22 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-code-container code {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* System theme modal styles */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dog-calculator-container.theme-system .dog-calculator-modal-content {
|
||||
background-color: #24202d;
|
||||
border-color: #433c4f;
|
||||
background-color: var(--bg-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-modal h3 {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-modal-close {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-modal-close:hover {
|
||||
@ -1001,22 +1006,22 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-share-url input {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-embed-option {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-embed-option h4 {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-embed-option p {
|
||||
color: #b8b0c2;
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
/* System theme code containers - different from embed option background */
|
||||
@ -1026,7 +1031,7 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-code-container code {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1038,8 +1043,8 @@
|
||||
}
|
||||
|
||||
.dog-calculator-food-source-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8e3ed;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
@ -1059,13 +1064,13 @@
|
||||
|
||||
.dog-calculator-food-source-title {
|
||||
font-weight: 600;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dog-calculator-remove-food-btn {
|
||||
background: #e87159;
|
||||
background: var(--error-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
@ -1089,14 +1094,14 @@
|
||||
.dog-calculator-percentage-group {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e8e3ed;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-percentage-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@ -1110,7 +1115,7 @@
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: #e8e3ed;
|
||||
background: var(--border-color);
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
-webkit-appearance: none;
|
||||
@ -1149,12 +1154,12 @@
|
||||
.dog-calculator-percentage-input {
|
||||
width: 70px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #e8e3ed;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
color: #6f3f6d;
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-percentage-input:focus {
|
||||
@ -1170,10 +1175,10 @@
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 2px dashed #e8e3ed;
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #635870;
|
||||
color: var(--text-label);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
@ -1191,14 +1196,14 @@
|
||||
.dog-calculator-add-food-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
border-color: #e8e3ed;
|
||||
color: #635870;
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-label);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dog-calculator-add-food-btn:disabled:hover {
|
||||
border-color: #e8e3ed;
|
||||
color: #635870;
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-label);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@ -1224,12 +1229,12 @@
|
||||
|
||||
.dog-calculator-food-result-label {
|
||||
font-weight: 500;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-food-result-value {
|
||||
font-weight: 600;
|
||||
color: #6f3f6d;
|
||||
color: var(--text-primary);
|
||||
padding: 2px 8px;
|
||||
background: rgba(241, 154, 95, 0.15);
|
||||
border-radius: 3px;
|
||||
@ -1238,35 +1243,35 @@
|
||||
|
||||
/* Dark theme support for food sources */
|
||||
.dog-calculator-container.theme-dark .dog-calculator-food-source-card {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-food-source-title {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-percentage-label {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-percentage-slider {
|
||||
background: #433c4f;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-percentage-input {
|
||||
background: #433c4f;
|
||||
background: var(--border-color);
|
||||
border-color: #524a5f;
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-percentage-group {
|
||||
border-color: #433c4f;
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-add-food-btn {
|
||||
border-color: #433c4f;
|
||||
color: #b8b0c2;
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-add-food-btn:hover {
|
||||
@ -1281,46 +1286,46 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-food-result-label {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-food-result-value {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
background: rgba(241, 154, 95, 0.2);
|
||||
}
|
||||
|
||||
/* System theme support for food sources */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dog-calculator-container.theme-system .dog-calculator-food-source-card {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-food-source-title {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-percentage-label {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-percentage-slider {
|
||||
background: #433c4f;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-percentage-input {
|
||||
background: #433c4f;
|
||||
background: var(--border-color);
|
||||
border-color: #524a5f;
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-percentage-group {
|
||||
border-color: #433c4f;
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-add-food-btn {
|
||||
border-color: #433c4f;
|
||||
color: #b8b0c2;
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-add-food-btn:hover {
|
||||
@ -1335,11 +1340,11 @@
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-food-result-label {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-food-result-value {
|
||||
color: #f5f3f7;
|
||||
color: var(--text-primary);
|
||||
background: rgba(241, 154, 95, 0.2);
|
||||
}
|
||||
}
|
||||
@ -1415,7 +1420,7 @@
|
||||
}
|
||||
|
||||
.dog-calculator-lock-icon.unlocked {
|
||||
color: #635870;
|
||||
color: var(--text-label);
|
||||
}
|
||||
|
||||
.dog-calculator-lock-icon.disabled {
|
||||
@ -1430,7 +1435,7 @@
|
||||
|
||||
/* Dark theme support for lock icons */
|
||||
.dog-calculator-container.theme-dark .dog-calculator-lock-icon.unlocked {
|
||||
color: #b8b0c2;
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-lock-icon.locked {
|
||||
@ -1440,7 +1445,7 @@
|
||||
/* System theme support for lock icons */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dog-calculator-container.theme-system .dog-calculator-lock-icon.unlocked {
|
||||
color: #b8b0c2;
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-lock-icon.locked {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user