diff --git a/src/styles.css b/src/styles.css index c5f90c1..6794194 100644 --- a/src/styles.css +++ b/src/styles.css @@ -320,10 +320,10 @@ button.subtle-button.active:hover { line-height: 1.25; } -.display-scenes { margin-bottom: 12px; } +.display-scenes { margin-bottom: var(--section-space-relaxed); } .display-scenes select { min-height: 34px; } .toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } -.toggle-column { display: grid; align-content: start; gap: 8px; } +.toggle-column { display: grid; align-content: start; gap: var(--section-space); } .toggles label { margin: 0; display: flex; align-items: center; gap: 7px; font-weight: 500; color: #c5ccd8; } .toggles input { width: 14px; min-height: 14px; margin: 0; accent-color: var(--accent); } @@ -357,6 +357,9 @@ button.subtle-button.active:hover { --advanced-title-size: 10.5px; --disclosure-chevron-size: .54em; --disclosure-chevron-stroke: .115em; + --section-space: 8px; + --section-space-relaxed: calc(var(--section-space) * 1.5); + --section-space-compact: calc(var(--section-space) * .5); margin: 0; padding: 0; @@ -476,11 +479,15 @@ button.subtle-button.active:hover { } .panel-content { - padding: 14px 18px 6px; + padding: var(--section-space-relaxed) 18px var(--section-space); +} + +.panel-content:has(> .panel-actions:first-child) { + padding-top: var(--section-space); } .advanced-panel { - margin-top: 12px; + margin-top: var(--section-space-relaxed); margin-left: 0; padding: 0; border: 0; @@ -495,7 +502,7 @@ button.subtle-button.active:hover { align-items: center; gap: .55em; min-height: 30px; - padding: 6px 0 5px; + padding: var(--section-space-compact) 0; border: 0; color: #7f899b; background: transparent; @@ -568,13 +575,17 @@ button.subtle-button.active:hover { .advanced-content { display: grid; - gap: 8px; - padding: 3px 0 0 14px; + gap: var(--section-space); + padding: var(--section-space-compact) 0 0 14px; +} + +.advanced-panel:last-child[open] > .advanced-content { + padding-bottom: var(--section-space-compact); } .advanced-grid { display: grid; - gap: 8px; + gap: var(--section-space); } .connection-advanced-grid { @@ -631,7 +642,7 @@ button.subtle-button.active:hover { .panel-actions { display: flex; justify-content: flex-end; - margin: 0 0 9px; + margin: 0 0 var(--section-space); } .text-action {