/** * @file * Bridges Gin's admin-theme accent variables into DevPortal's brand-token * namespace. * * WHY: gin sets --gin-color-primary-rgb on via [data-gin-accent]. * DevPortal components use --color-brand-primary (and relatives) which are * defined in tokens/colors.css and overridden by tokens/accent.css only when * data-devportal-accent is on . On admin pages (gin is the active * theme) data-devportal-accent is never set on , so DevPortal tokens * stay at their static navy default even when gin's accent changes. * * HOW: the selector `html:not([data-devportal-accent]) > body[data-gin-accent]` * fires ONLY on admin pages (gin active, no devportal accent on html). * On portal frontend pages an authenticated user with the gin toolbar sees * both data-gin-accent AND data-devportal-accent on , so the :not() * guard prevents this rule from firing and DevPortal's own accent wins. * * RESULT: clicking any gin colour swatch on the admin settings page causes * DevPortal buttons, links, and other brand-coloured components on the same * page to update in real time — no JS required. */ html:not([data-devportal-accent]) > body[data-gin-accent] { /* ── Primitives ─────────────────────────────────────────────────────────── */ --color-brand-primary-rgb: var(--gin-color-primary-rgb); --color-brand-primary-hover-val: var(--gin-color-primary-hover); --color-brand-primary-active-val: var(--gin-color-primary-active); /* ── Derived brand tokens ───────────────────────────────────────────────── */ --color-brand-primary: rgb(var(--gin-color-primary-rgb)); --color-brand-primary-hover: var(--gin-color-primary-hover); --color-brand-secondary: rgb(var(--gin-color-primary-rgb)); --color-brand-accent: rgb(var(--gin-color-primary-rgb)); --color-brand-accent-hover: var(--gin-color-primary-hover); --color-brand-primary-light: rgba(var(--gin-color-primary-rgb), 0.12); /* ── Interactive / focus ────────────────────────────────────────────────── */ --color-text-link: rgb(var(--gin-color-primary-rgb)); --color-text-link-hover: var(--gin-color-primary-hover); --color-border-focus: rgb(var(--gin-color-primary-rgb)); --color-interactive-primary: rgb(var(--gin-color-primary-rgb)); --color-interactive-primary-hover: var(--gin-color-primary-hover); /* ── Subtle backgrounds (badges, alerts, cards) ─────────────────────────── */ --color-brand-primary-subtle: rgba(var(--gin-color-primary-rgb), 0.08); --color-brand-primary-subtle-border: rgba(var(--gin-color-primary-rgb), 0.20); --color-brand-primary-subtle-hover: rgba(var(--gin-color-primary-rgb), 0.14); /* ── Toggle switch "on" state ────────────────────────────────────────────── */ /* Gin hardcodes --gin-switch: #26a769 (green) in light mode regardless of */ /* the selected accent. Override it here so the pill toggle active colour */ /* always matches the chosen accent on every admin page. */ --gin-switch: rgb(var(--gin-color-primary-rgb)); } /** * Suppress Gin's "Back to site" back-arrow glyph on the first breadcrumb * item. The Home crumb is removed in devportal_admin_preprocess_breadcrumb * for admin routes, so the back-arrow (added by gin's :first-of-type CSS) * would otherwise visually decorate whatever clickable parent crumb takes * its place. The Portal sidebar link now owns "leave admin" navigation. * * Selectors mirror gin's compiled CSS (which uses * `:is(#extra-specificity-hack, [data-drupal-admin-styles]) …` to raise * specificity) so this override matches gin's specificity. !important also * applied as belt-and-braces; gin's rules do not use !important. * * Also overrides gin's first/second pipe separator so adjacent admin crumbs * use the standard "/" separator defined by gin's general * .gin-breadcrumb__item + .gin-breadcrumb__item::before rule. */ :where(*) .gin-breadcrumb .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link, :is(#extra-specificity-hack, [data-drupal-admin-styles]) .gin-breadcrumb .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link { padding-inline-start: 0 !important; } :where(*) .gin-breadcrumb .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link::before, :where(*) .gin-breadcrumb .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link:hover::before, :is(#extra-specificity-hack, [data-drupal-admin-styles]) .gin-breadcrumb .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link::before, :is(#extra-specificity-hack, [data-drupal-admin-styles]) .gin-breadcrumb .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link:hover::before { content: none !important; display: none !important; background: none !important; background-color: transparent !important; mask-image: none !important; -webkit-mask-image: none !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; position: static !important; inset: auto !important; } :where(*) .gin-breadcrumb .gin-breadcrumb__item:first-of-type + .gin-breadcrumb__item::before, :is(#extra-specificity-hack, [data-drupal-admin-styles]) .gin-breadcrumb .gin-breadcrumb__item:first-of-type + .gin-breadcrumb__item::before { content: "/" !important; opacity: .3 !important; font-size: var(--gin-font-size-xs) !important; vertical-align: middle !important; display: inline-block !important; padding: 0 .5em !important; margin: 0 !important; border: 0 !important; width: auto !important; height: auto !important; background: none !important; } /* ------ APIM import pages ------ */ /* Header row: page title + connection info */ .apim-import-header { display: flex; align-items: center; justify-content: start; gap: 16px; margin: 0 0 12px; } .apim-import-header__title { font-size: 2.125rem; font-weight: 575; line-height: 1.2; letter-spacing: -0.05em; margin: 0; } .apim-import-header__connection { display: flex; align-items: center; gap: 8px; border: 0.063rem solid #b1b1b1; background: #ffffff; padding: 0.5rem 1rem; border-radius: 1.5rem; margin-left: 0.5rem; } .apim-import-header__gateway-icon { height: 20px; width: auto; vertical-align: middle; } /* When the chip sits inside the page-title

(sync-users pages), keep it inline and reset the inherited h1 font sizing so it doesn't render huge. / h1 .apim-import-headerconnection { display: inline-flex; vertical-align: middle; font-size: 1rem; font-weight: 400; letter-spacing: normal; } h1 .apim-import-headerconnection-name { font-size: 1rem; font-weight: 400; letter-spacing: normal; } / Refresh button row / .apim-import-refresh { display: flex; justify-content: flex-end; margin-bottom: 8px; } / Filters bar / .apim-import-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .apim-import-filter-group { display: flex; align-items: center; gap: 8px; } .apim-import-filter-group label { font-size: 13px; font-weight: 600; color: #475569; } .apim-import-filter-group select, .apim-import-filter-group input[type="search"] { padding: 4px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; } / Products table / #products-datatable { width: 100%; } / Product action buttons row / .apim-product-actions { margin-top: 1rem; } .apim-product-actions .button + .button { margin-left: 0.5rem; } / ------ Media view toolbar: exposed filters + icon switcher in one row ------ / .media-view-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .media-view-toolbarfilters { width: 100%; } / Remove the default bottom margin that views adds to the exposed form since the toolbar wrapper now handles spacing. / .media-view-toolbar .views-exposed-form { margin-bottom: 0; } / ------ Icon switcher buttons ------ / .media-view-switcher { display: flex; align-items: center; gap: 4px; justify-content: flex-end; } .media-view-switcherbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; color: #6b7280; cursor: pointer; text-decoration: none; transition: color 0.15s, border-color 0.15s, background 0.15s; } .media-view-switcherbtn:hover { color: var(--gin-color-primary, #0073e6); border-color: var(--gin-color-primary, #0073e6); background: rgba(var(--gin-color-primary-rgb, 0, 115, 230), 0.06); } .media-view-switcherbtn--active { color: var(--gin-color-primary, #0073e6); border-color: var(--gin-color-primary, #0073e6); background: rgba(var(--gin-color-primary-rgb, 0, 115, 230), 0.1); cursor: default; pointer-events: none; } / ------ Tooltips ------ / .media-view-switcherbtn[data-tooltip] { position: relative; } .media-view-switcherbtn[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; padding: 5px 8px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 100; } / Arrow / .media-view-switcherbtn[data-tooltip]::before { content: ''; position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #1f2937; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 100; } .media-view-switcherbtn[data-tooltip]:hover::after, .media-view-switcher__btn[data-tooltip]:hover::before { opacity: 1; } /Import API, Products, Sync Table fixes/ #apim-import-table.dataTable, #products-datatable.dataTable, #apim-sync-users-table.dataTable, #apim-sync-invite-table.dataTable { width: 100% !important; background-color: var(--gin-bg-layer); } #apim-import-table.dataTable tr:hover, #products-datatable.dataTable tr:hover, #apim-sync-users-table.dataTable tr:hover, #apim-sync-invite-table.dataTable tr:hover { background: var(--gin-bg-item) !important; } / common table fixes / :where() .sortable-heading > a::after, :is(#extra-specificity-hack [data-drupal-admin-styles]) .sortable-heading > a::after, .view-id-user_admin_people .sortable-heading a::after, #views-form-scheduler-scheduled-content-overview .sortable-heading a::after { inset-inline-end: 0.5rem !important; }