/* Minimal layout glue only. Look-and-feel (colours, spacing, components, content padding) comes from deccster's theme + components. These rules only arrange the page shell. */ /* Give the login dialog-window a comfortable width (deccster default min is narrow). */ #auth-view { min-width: 360px; } /* Confirmation dialog: comfortable width; no close (×) so the choice is explicit. */ #confirm-dialog { min-width: 360px; max-width: 460px; } #confirm-dialog [is=dialog-window-close] { display: none; } #confirm-dialog #confirm-message { margin: 0; } /* Form editor: stack the setting groups (cards) with breathing room. */ #form-editor { display: flex; flex-direction: column; gap: var(--space-m, 1rem); } #form-editor [is=card] { display: flex; flex-direction: column; gap: var(--space-xs, .5rem); } /* Form overview tab: stack the cards with the same breathing room as the settings cards. */ #form-content { display: flex; flex-direction: column; gap: var(--space-m, 1rem); } #form-content > [is=card] { display: flex; flex-direction: column; gap: var(--space-xs, .5rem); } /* Card headings (h3) replace the old kicker label — keep them flush with the card stack. */ [is=card] > h3 { margin: 0; } /* Access Key: read-only field takes the row width, copy icon-button sits at its end. */ #access-key-row { display: flex; align-items: center; gap: var(--space-xs, .5rem); } #access-key-field { flex: 1; min-width: 0; text-align: left; } /* Dashboard toolbar: the deccster dashboard renders its import/export/add/edit actions as ghost icon-buttons. Make them identical to the filled (primary-background) icon-buttons used throughout the form views, so the whole app-navigation reads as one consistent style. We replicate exactly what `has="primary-background"` produces on a base icon-button — background + the --background custom prop set to the call-to-action colour, no border, and the standard control glyph colour — thereby neutralising all three of ghost-style's declarations (background/border/color). app.css is unlayered, so it wins over deccster's @layer rules. */ [is=dashboard] [is=app-navigation-actions] [is=icon-button][has~=ghost-style] { background: var(--call-to-action-color); --background: var(--call-to-action-color); border: none; /* Glyph in the light on-primary colour, matching the handwritten primary-background icon-buttons (konsistentet-icon-button-style). */ color: var(--inverted-text-color); --control-color: var(--inverted-text-color); } /* Usage-chart dashboard tile: the deccster line-chart fills the tile's content box. The tile content is a definite-height flex item, so the 100% height chain resolves. --chart-width/--chart-height must be set too, not just the CSS box: the chart derives its SVG viewBox from those custom properties and defaults to 320x220px, which letterboxes the drawing inside a wider box. A percentage makes deccster fall back to the element's real clientWidth/clientHeight (see resolveDimension in core/services/chart-service.js), so the viewBox follows the tile. */ [is=dashboard] [is=usage-chart-tile] { display: block; width: 100%; height: 100%; } [is=dashboard] [is=usage-chart-tile] [is=line-chart] { display: block; width: 100%; height: 100%; --chart-width: 100%; --chart-height: 100%; } [is=dashboard] [is=usage-chart-tile] > p { margin: 0; color: var(--foreground-medium-soft-color); } /* Intro-text token chips, stacked above the textarea inside the control column. */ #intro-control { display: flex; flex-direction: column; gap: var(--space-xs, .5rem); } #intro-control textarea { width: 100%; box-sizing: border-box; } #intro-tokens { display: flex; flex-wrap: wrap; gap: var(--space-xxs, .25rem); } #intro-tokens [is=chip] { cursor: pointer; } /* Integrations tab: plugin tiles row + configured-integration list. */ #plugin-tiles { flex-wrap: wrap; gap: var(--space-xs, .5rem); margin-bottom: var(--space-s, .75rem); } #integrations-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs, .5rem); } #integrations-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s, .75rem); } #plugin-config-host :is(h4, [is=icon]), #integrations-list [is=icon], #plugin-tiles [is=icon] { margin-right: var(--space-xxs, .25rem); } #integration-form-title { margin: 0; } /* Submissions-over-time line chart + the month navigation that sits below it. */ #subs-chart { --chart-width: 100%; --chart-height: 240px; display: block; width: 100%; } [is=chart-month-nav] { display: flex; align-items: center; justify-content: center; gap: var(--space-s, .75rem); } [is=chart-month-nav] strong { min-width: 11rem; text-align: center; text-transform: capitalize; } /* Settings page: stack the cards with breathing room. */ #settings-host { display: flex; flex-direction: column; gap: var(--space-m, 1rem); } #settings-host [is=card] { display: flex; flex-direction: column; gap: var(--space-xs, .5rem); } #linked-list, #passkey-list { list-style: none; margin: 0 0 var(--space-s, .75rem); padding: 0; display: flex; flex-direction: column; gap: var(--space-xs, .5rem); } #linked-list li, #passkey-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s, .75rem); } #passkey-login [is=icon] { margin-right: var(--space-xs, .5rem); } /* Login dialog: the two mode links sit side by side below the action row, pushed to the opposite edges so they read as two separate offers (button-row alone right-aligns). */ #auth-links { justify-content: space-between; align-items: baseline; } #auth-links p { margin: 0; } /* App shell: sticky side-navigation (100dvh via independent-scrolling) + content column. */ [is=app-shell] { display: flex; align-items: stretch; min-height: 100vh; } /* An explicit display: flex overrides the [hidden] attribute's UA display:none, so restore it — otherwise the dashboard shows behind the login dialog. */ [is=app-shell][hidden] { display: none; } [is=app-shell] > [is=content] { flex: 1; min-width: 0; } /* Brand sits outside the scrolling