/** * @file * Shared off-canvas theme styles. * * Reusable token-driven theme for Drupal off-canvas dialogs; follows site * light/dark mode via --ks-* tokens (.dark on ). * Any module can include music_agency/ks-off-canvas-light library. * * Selectors use the cross-version pair * `#drupal-off-canvas:not(.drupal-off-canvas-reset), #drupal-off-canvas-wrapper` * so they work on both the legacy and the refactored core off-canvas markup. */ /* ========================================================================== OFF-CANVAS WRAPPER ========================================================================== */ #drupal-off-canvas-wrapper { --off-canvas-background-color: var(--ks-color-surface-page); --off-canvas-text-color: var(--ks-color-text-default); --off-canvas-padding: 1.5rem; } #drupal-off-canvas:not(.drupal-off-canvas-reset), #drupal-off-canvas-wrapper { background: var(--ks-color-surface-page); color: var(--ks-color-text-default); } /* ========================================================================== TITLE BAR ========================================================================== */ #drupal-off-canvas:not(.drupal-off-canvas-reset) .ui-dialog-titlebar, #drupal-off-canvas-wrapper .ui-dialog-titlebar { background: var(--ks-color-surface-section); border-bottom: var(--ks-border-width) solid var(--ks-color-border-subtle); padding: 1rem 1.25rem; } /* Hide core's decorative pencil icon that overlaps the title text. */ #drupal-off-canvas:not(.drupal-off-canvas-reset) .ui-dialog-titlebar::before, #drupal-off-canvas-wrapper .ui-dialog-titlebar::before { display: none; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ui-dialog-title, #drupal-off-canvas-wrapper .ui-dialog-title { color: var(--ks-color-text-strong); font-size: 1.1rem; font-weight: 700; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ui-dialog-titlebar-close, #drupal-off-canvas-wrapper .ui-dialog-titlebar-close { background: var(--ks-color-surface-section); border: 0; border-radius: var(--ks-radius-md); color: var(--ks-color-text-muted); cursor: pointer; height: 2rem; padding: 0.25rem; right: 1rem; top: 50%; transform: translateY(-50%); transition: background-color 0.15s var(--ks-ease-standard); width: 2rem; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ui-dialog-titlebar-close:hover, #drupal-off-canvas-wrapper .ui-dialog-titlebar-close:hover { background: var(--ks-color-border-subtle); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ui-dialog-titlebar-close .ui-icon, #drupal-off-canvas-wrapper .ui-dialog-titlebar-close .ui-icon { background-image: none; filter: none; text-indent: 0; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ui-dialog-titlebar-close .ui-icon::before, #drupal-off-canvas-wrapper .ui-dialog-titlebar-close .ui-icon::before { content: "x"; display: block; font-size: 1rem; font-weight: 700; line-height: 1rem; text-align: center; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ui-dialog-content, #drupal-off-canvas-wrapper .ui-dialog-content { background: var(--ks-color-surface-page); padding: 1.5rem; } /* ========================================================================== FORM ELEMENTS ========================================================================== */ #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-item, #drupal-off-canvas-wrapper .form-item { margin-bottom: 1.25rem; } #drupal-off-canvas:not(.drupal-off-canvas-reset) label, #drupal-off-canvas-wrapper label { color: var(--ks-color-text-default); display: block; font-size: 0.9rem; font-weight: var(--ks-font-weight-strong); margin-bottom: 0.4rem; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-text, #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-select, #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-textarea, #drupal-off-canvas-wrapper .form-text, #drupal-off-canvas-wrapper .form-select, #drupal-off-canvas-wrapper .form-textarea { background: var(--ks-color-surface-page); border: var(--ks-border-width) solid var(--ks-color-border-default); border-radius: var(--ks-radius-md); color: var(--ks-color-text-default); font-size: 0.95rem; min-height: 2.75rem; padding: 0.65rem 0.9rem; transition: border-color 0.15s var(--ks-ease-standard), box-shadow 0.15s var(--ks-ease-standard); width: 100%; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-textarea, #drupal-off-canvas-wrapper .form-textarea { min-height: 100px; resize: vertical; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-text:focus, #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-select:focus, #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-textarea:focus, #drupal-off-canvas-wrapper .form-text:focus, #drupal-off-canvas-wrapper .form-select:focus, #drupal-off-canvas-wrapper .form-textarea:focus { border-color: var(--ks-color-primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-color-primary-500) 10%, transparent); outline: none; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .description, #drupal-off-canvas-wrapper .description { color: var(--ks-color-text-muted); font-size: 0.85rem; line-height: 1.5; margin-top: 0.35rem; } /* Checkboxes */ #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-checkboxes, #drupal-off-canvas-wrapper .form-checkboxes { display: flex; flex-direction: column; gap: 0.75rem; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-type-checkbox, #drupal-off-canvas-wrapper .form-type-checkbox { align-items: center; display: flex; gap: 0.5rem; margin: 0; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-type-checkbox label, #drupal-off-canvas-wrapper .form-type-checkbox label { cursor: pointer; margin: 0; font-weight: 400; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-type-checkbox input[type="checkbox"], #drupal-off-canvas-wrapper .form-type-checkbox input[type="checkbox"] { accent-color: var(--ks-color-primary-600); cursor: pointer; height: 1.1rem; width: 1.1rem; } /* Form actions */ #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-actions, #drupal-off-canvas-wrapper .form-actions { border-top: var(--ks-border-width) solid var(--ks-color-border-subtle); display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1.25rem; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .button, #drupal-off-canvas:not(.drupal-off-canvas-reset) .form-submit, #drupal-off-canvas-wrapper .button, #drupal-off-canvas-wrapper .form-submit { border: 0; border-radius: var(--ks-radius-md); cursor: pointer; font-size: 0.9rem; font-weight: var(--ks-font-weight-strong); min-height: 2.5rem; padding: 0.6rem 1.25rem; transition: background-color 0.15s var(--ks-ease-standard); } /* ========================================================================== KS PRIMITIVES ========================================================================== */ #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-heading-sm, #drupal-off-canvas-wrapper .ks-heading-sm { color: var(--ks-color-text-strong); font-size: 1.125rem; font-weight: var(--ks-font-weight-strong); line-height: 1.4; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-caption, #drupal-off-canvas-wrapper .ks-caption { color: var(--ks-color-text-muted); font-size: 0.875rem; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-stack-1 > * + *, #drupal-off-canvas-wrapper .ks-stack-1 > * + * { margin-top: var(--ks-space-1); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-stack-2 > * + *, #drupal-off-canvas-wrapper .ks-stack-2 > * + * { margin-top: var(--ks-space-2); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-stack-3 > * + *, #drupal-off-canvas-wrapper .ks-stack-3 > * + * { margin-top: var(--ks-space-3); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-stack-4 > * + *, #drupal-off-canvas-wrapper .ks-stack-4 > * + * { margin-top: var(--ks-space-4); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-stack-6 > * + *, #drupal-off-canvas-wrapper .ks-stack-6 > * + * { margin-top: var(--ks-space-6); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-select, #drupal-off-canvas-wrapper .ks-select { appearance: auto; background-color: var(--ks-color-surface-page); border: var(--ks-border-width) solid var(--ks-color-border-default); border-radius: var(--ks-radius-sm); color: var(--ks-color-text-default); font-size: 0.875rem; padding: 0.5rem 2rem 0.5rem 0.75rem; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-select:focus, #drupal-off-canvas-wrapper .ks-select:focus { border-color: var(--ks-color-primary-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ks-color-primary-500) 20%, transparent); outline: none; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-select:disabled, #drupal-off-canvas-wrapper .ks-select:disabled { background-color: var(--ks-color-surface-section); color: var(--ks-color-text-muted); cursor: not-allowed; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-button, #drupal-off-canvas-wrapper .ks-button { align-items: center; border-radius: var(--ks-radius-md); cursor: pointer; display: inline-flex; font-size: 1rem; font-weight: var(--ks-font-weight-strong); justify-content: center; padding: 0.75rem 1.5rem; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-button-primary, #drupal-off-canvas-wrapper .ks-button-primary { background-color: var(--ks-color-primary-600); border: var(--ks-border-width) solid var(--ks-color-primary-600); color: var(--ks-color-text-inverse); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-button-primary:hover:not(:disabled), #drupal-off-canvas-wrapper .ks-button-primary:hover:not(:disabled) { background-color: var(--ks-color-primary-700); border-color: var(--ks-color-primary-700); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-button-primary:disabled, #drupal-off-canvas-wrapper .ks-button-primary:disabled { background-color: var(--ks-color-border-subtle); border-color: var(--ks-color-border-subtle); color: var(--ks-color-text-muted); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-button--full, #drupal-off-canvas-wrapper .ks-button--full { width: 100%; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-button:disabled, #drupal-off-canvas-wrapper .ks-button:disabled { background-color: var(--ks-color-border-subtle); border-color: var(--ks-color-border-subtle); color: var(--ks-color-text-muted); cursor: not-allowed; } /* Small quantity select; placed after .form-select so its fixed width wins. */ #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-select-sm, #drupal-off-canvas-wrapper .ks-select-sm { width: 5rem; } /* Card classes stay unstyled in drawers: content sits flat on the white drawer background. */ /* Layout objects */ #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-max-w-md, #drupal-off-canvas-wrapper .ks-max-w-md { max-width: 32rem; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-mx-auto, #drupal-off-canvas-wrapper .ks-mx-auto { margin-inline: auto; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-stack-xs, #drupal-off-canvas-wrapper .ks-stack-xs, #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-stack-sm, #drupal-off-canvas-wrapper .ks-stack-sm, #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-stack-md, #drupal-off-canvas-wrapper .ks-stack-md { display: flex; flex-direction: column; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-stack-xs > * + *, #drupal-off-canvas-wrapper .ks-stack-xs > * + * { margin-block-start: var(--ks-space-2); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-stack-sm > * + *, #drupal-off-canvas-wrapper .ks-stack-sm > * + * { margin-block-start: var(--ks-space-3); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-stack-md > * + *, #drupal-off-canvas-wrapper .ks-stack-md > * + * { margin-block-start: var(--ks-space-6); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-cluster-sm, #drupal-off-canvas-wrapper .ks-cluster-sm, #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-cluster-between, #drupal-off-canvas-wrapper .ks-cluster-between { align-items: center; display: flex; flex-wrap: wrap; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-cluster-sm, #drupal-off-canvas-wrapper .ks-cluster-sm { gap: var(--ks-space-2); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-cluster-between, #drupal-off-canvas-wrapper .ks-cluster-between { gap: var(--ks-space-4); justify-content: space-between; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-flex-1, #drupal-off-canvas-wrapper .ks-flex-1 { flex: 1; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-flex-shrink-0, #drupal-off-canvas-wrapper .ks-flex-shrink-0 { flex-shrink: 0; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-min-w-0, #drupal-off-canvas-wrapper .ks-min-w-0 { min-width: 0; } /* Boxes */ #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-border, #drupal-off-canvas-wrapper .ks-border { border: var(--ks-border-width) solid var(--ks-color-border-subtle); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-border-t, #drupal-off-canvas-wrapper .ks-border-t { border-top: var(--ks-border-width) solid var(--ks-color-border-subtle); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-rounded-lg, #drupal-off-canvas-wrapper .ks-rounded-lg { border-radius: var(--ks-radius-md); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-bg-surface, #drupal-off-canvas-wrapper .ks-bg-surface { background-color: var(--ks-color-surface-page); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-bg-muted, #drupal-off-canvas-wrapper .ks-bg-muted { background-color: var(--ks-color-surface-section); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-opacity-60, #drupal-off-canvas-wrapper .ks-opacity-60 { opacity: 0.6; } /* Spacing */ #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-p-md, #drupal-off-canvas-wrapper .ks-p-md { padding: var(--ks-space-4); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-pt-md, #drupal-off-canvas-wrapper .ks-pt-md { padding-block-start: var(--ks-space-4); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-py-lg, #drupal-off-canvas-wrapper .ks-py-lg { padding-block: var(--ks-space-6); } /* Typography */ #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-heading-md, #drupal-off-canvas-wrapper .ks-heading-md { color: var(--ks-color-text-strong); font-size: 1.125rem; font-weight: 700; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-text-bold, #drupal-off-canvas-wrapper .ks-text-bold { font-weight: var(--ks-font-weight-strong); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-text-primary, #drupal-off-canvas-wrapper .ks-text-primary { color: var(--ks-color-primary-600); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-text-muted, #drupal-off-canvas-wrapper .ks-text-muted { color: var(--ks-color-text-muted); } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-text-center, #drupal-off-canvas-wrapper .ks-text-center { text-align: center; } #drupal-off-canvas:not(.drupal-off-canvas-reset) .ks-truncate, #drupal-off-canvas-wrapper .ks-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }