/* ============================================================================ RELATED RECORDS -- ADD FROM THE SECTION HEADER ============================================================================ The + in each accordion header, and the two lines of the shared Add modal that need their own colours. The modal's fields carry no rules of their own: they are built with .form-label / .form-control / .form-select and inherit the same treatment as the page's existing modals, in both themes. Selector weight, not style: the platform's stylesheets are injected into ahead of the page's own bootstrap.min.css, so a single-class rule ties with Bootstrap's and loses on order. Anything here that competes with a Bootstrap rule is scoped with `html` and a second class. ============================================================================ */ /* The chevron is .accordion-button::after, so the + cannot be its sibling in the DOM; it is placed over the empty run between the badge and the chevron instead (Bootstrap gives the chevron margin-left:auto, which is what leaves that run empty). The header is the positioning context. */ html .accordion-header.vr-ra-host { position: relative; } html .accordion-header.vr-ra-host>.vr-ra-add { position: absolute; top: 50%; /* `right` is set inline by the script, measured from the button's own padding and the chevron's real width, so a theme that changes either moves the + with it. */ transform: translateY(-50%); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--gray-500, #707070); cursor: pointer; opacity: 0.6; transition: opacity .15s ease, background-color .15s ease, color .15s ease; } html .accordion-header.vr-ra-host>.vr-ra-add>i { font-size: 15px; line-height: 1; } /* Hover-revealed, the same way the sidebar's row controls and the column size chips are, so a detail page at rest looks as it did. Keyboard focus reveals it too, or it would be unreachable without a pointer. */ .accordion-item:hover>.accordion-header>.vr-ra-add, html .accordion-header.vr-ra-host>.vr-ra-add:focus-visible { opacity: .85; } html .accordion-header.vr-ra-host>.vr-ra-add:hover, html .accordion-header.vr-ra-host>.vr-ra-add:focus-visible { opacity: 1; background: var(--primary-transparent, rgba(72, 45, 193, .1)); color: var(--primary, #482dc1); } /* An expanded section's header carries the accent fill in this theme, so the + follows its text colour there rather than staying grey against it. */ html .accordion-header.vr-ra-host>.accordion-button:not(.collapsed)~.vr-ra-add { color: inherit; } /* The label is the only thing that can grow into the +'s space: the badge sits right after it, and a long enough label pushes the pair across. Cap it so the badge always stops short of the + and the chevron. */ html .accordion-header.vr-ra-host>.accordion-button>span:first-child { min-width: 0; max-width: calc(100% - 76px); overflow: hidden; white-space: nowrap; } /* ---- the shared Add modal ---------------------------------------------- */ .vr-ra-modal .vr-ra-assoc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border-color, #ececec); font-size: 12px; color: var(--gray-500, #707070); } .vr-ra-modal .vr-ra-assoc>i { font-size: 14px; color: var(--gray-400, #b3b3bd); flex-shrink: 0; } .vr-ra-modal .vr-ra-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 9px; border-radius: 20px; background: var(--primary-transparent, rgba(72, 45, 193, .1)); color: var(--primary, #482dc1); font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A row the modal just added, so it is findable in a list that was already long. One pass, then it reads like every other row. */ @keyframes vr-ra-in { from { background: var(--primary-transparent, rgba(72, 45, 193, .1)); } to { background: transparent; } } .vr-ra-added { animation: vr-ra-in 1.6s ease-out 1; border-radius: 8px; } /* ---- dark theme -------------------------------------------------------- Nothing to restate: --border-color, --primary, --primary-transparent and the --gray-* ramp are all redefined under the dark selector, so the rules above follow the theme. The ramp INVERTS there (--gray-700 is the light end in dark, --gray-300 the dark one), so a rule added here should reach for a higher number for lighter text, not a lower one. */