/* * Theme django-polymorphic's JS-injected stacked-inline controls to match Unfold. * * polymorphic/js/polymorphic_inlines.js builds the "Add another…" control, its type-picker menu, * and the per-row remove link at runtime with hard-coded class names, so they can't be themed in * the template override (core/templates/admin/polymorphic/edit_inline/stacked.html) — we restyle * them here. Loaded globally via UNFOLD["STYLES"] (core default); every selector is scoped to * polymorphic-only classes, so it's inert on non-polymorphic pages. * * Colors come from Unfold's CSS variables (declared in unfold/layouts/skeleton.html as * space-separated rgb channels → rgb(var(--color-…))). Dark mode is a `.dark` class on . */ /* --- "Add another …" row (injected after the last .inline-related) ------------------------- */ .polymorphic-add-choice { position: relative; clear: left; padding: 0.75rem; border-top: 1px solid rgb(var(--color-base-200)); } .dark .polymorphic-add-choice { border-top-color: rgb(var(--color-base-800)); } .polymorphic-add-choice > a { display: inline-flex; align-items: center; font-weight: 500; color: rgb(var(--color-primary-600)); } .dark .polymorphic-add-choice > a { color: rgb(var(--color-primary-500)); } .polymorphic-add-choice > a::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; margin-right: 0.5rem; border-radius: 9999px; background-color: rgb(var(--color-primary-600)); color: #fff; font-size: 1rem; line-height: 1; } .polymorphic-add-choice > a:focus, .polymorphic-add-choice > a:hover { text-decoration: none; } /* --- type picker (video / strips / …) ------------------------------------------------------ */ /* Rendered IN-FLOW (not an absolute popup) so the card + page grow to fit it. django-polymorphic's own polymorphic_inlines.css sets `.polymorphic-type-menu { position: absolute; top; left }`, which made the menu open below the "Add" button — and that button sits at the bottom of the change form, so the popup landed off the viewport with no way to scroll to it. We must OVERRIDE that absolute positioning, not merely omit it: every rule below is scoped under `.polymorphic-add-choice` (the menu's parent) so it beats polymorphic's single-class rules by specificity regardless of stylesheet load order, and `position: static` explicitly cancels the absolute popup. */ .polymorphic-add-choice .polymorphic-type-menu { position: static; top: auto; left: auto; z-index: auto; margin-top: 0.5rem; max-width: 22rem; padding: 0.25rem; border: 1px solid rgb(var(--color-base-200)); border-radius: var(--border-radius, 6px); background-color: rgb(var(--color-base-50)); } .dark .polymorphic-add-choice .polymorphic-type-menu { border-color: rgb(var(--color-base-800)); background-color: rgb(var(--color-base-900)); } .polymorphic-add-choice .polymorphic-type-menu ul { margin: 0; padding: 0; list-style: none; } .polymorphic-add-choice .polymorphic-type-menu li { padding: 0; list-style: none; } .polymorphic-add-choice .polymorphic-type-menu li a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--border-radius, 6px); font-size: 0.875rem; color: rgb(var(--color-font-default-light)); } .dark .polymorphic-add-choice .polymorphic-type-menu li a { color: rgb(var(--color-font-default-dark)); } .polymorphic-add-choice .polymorphic-type-menu li a:hover { background-color: rgb(var(--color-base-100)); text-decoration: none; } .dark .polymorphic-add-choice .polymorphic-type-menu li a:hover { background-color: rgb(var(--color-base-800)); } /* --- remove link (injected into a dynamically added row's

) ---------------------------- */ .inline-related .inline-deletelink { display: inline-flex; align-items: center; margin-left: 0.75rem; font-weight: 500; font-size: 0.875rem; color: #dc2626; } .dark .inline-related .inline-deletelink { color: #ef4444; } .inline-related .inline-deletelink:hover { text-decoration: none; }