/* Dolphin EOP Application styles. Loaded after the theme stylesheets so these rules take precedence. */ /* ============================================================================ Design tokens ========================================================================= */ :root { /* Colours resolve to the theme's own variables so panels and badges share one palette. */ --tok-bg: var(--bs-body-bg); /* #f8f7fa */ --tok-surface: var(--bs-white); /* #fff — not --bs-card-bg, which the theme scopes to .card */ --tok-surface-alt: var(--bs-gray-50); /* table header, read-only fill */ --tok-border: var(--bs-border-color); /* #e6e6e8 */ --tok-text: var(--bs-heading-color); /* #444050 */ --tok-text-muted: #acaab1; /* tracks the theme's .text-muted, which has no variable */ --tok-primary: var(--bs-primary); /* Dolphin brand blue #51a3cf */ --tok-primary-contrast: #FFFFFF; --tok-success: var(--bs-success); /* #28c76f */ --tok-warning: var(--bs-warning); /* #ff9f43 */ --tok-danger: var(--bs-danger); /* #ff4c51 */ --tok-info: var(--bs-info); /* #00bad1 */ --tok-focus: var(--bs-primary); /* Derived field: lighter than --bs-primary-bg-subtle because a register shows dozens at once. */ --tok-derived-bg: rgba(var(--bs-primary-rgb), .10); --tok-derived-text: var(--bs-primary-text-emphasis); /* #204153 */ /* 4px base grid */ --tok-space-1: 4px; --tok-space-2: 8px; --tok-space-3: 12px; --tok-space-4: 16px; --tok-space-5: 24px; --tok-space-6: 32px; --tok-space-7: 48px; --tok-space-8: 64px; --tok-radius-sm: 4px; --tok-radius-md: 8px; --tok-radius-lg: 12px; --tok-control-h: 36px; --tok-tap-min: 44px; --tok-table-row-h: 36px; --tok-text-base: var(--bs-body-font-size); /* 0.9375rem = 15px */ --tok-text-lg: 1.0625rem; --tok-text-xl: 1.25rem; --tok-numeric: 20px; --tok-font-sans: var(--bs-font-sans-serif); /* Tints: the theme's subtle/emphasis pairs, shared with .alert-* and .badge.bg-label-*. */ --tok-tint-primary: var(--bs-primary-bg-subtle); --tok-tint-primary-border: var(--bs-primary-border-subtle); --tok-tint-primary-text: var(--bs-primary-text-emphasis); --tok-tint-success: var(--bs-success-bg-subtle); --tok-tint-success-border: var(--bs-success-border-subtle); --tok-tint-warning: var(--bs-warning-bg-subtle); --tok-tint-warning-border: var(--bs-warning-border-subtle); --tok-tint-warning-text: var(--bs-warning-text-emphasis); --tok-tint-info: var(--bs-info-bg-subtle); --tok-tint-info-border: var(--bs-info-border-subtle); --tok-tint-danger: var(--bs-danger-bg-subtle); --tok-tint-neutral: var(--bs-secondary-bg-subtle); --tok-tint-neutral-border: var(--bs-secondary-border-subtle); --tok-tint-neutral-text: var(--bs-secondary-text-emphasis); /* Whole-row tints sit behind body text, so they stay weaker than a panel fill. */ --tok-row-negative: rgba(var(--bs-danger-rgb), .08); --tok-row-belowmin: rgba(var(--bs-warning-rgb), .10); } /* ============================================================================ Dark style ========================================================================= */ /* The theme switches stylesheets and toggles .dark-style on ; tokens bound to --bs-* variables flip on their own. core-dark.css leaves the *-bg-subtle and *-text-emphasis pairs at their light values, so only those are restated here. */ .dark-style { --tok-surface: #2f3349; /* the theme's dark card colour */ --tok-text-muted: #76778e; /* tracks .text-muted in core-dark.css */ --tok-derived-bg: rgba(var(--bs-primary-rgb), .18); --tok-derived-text: #cfcde4; --tok-tint-primary: rgba(var(--bs-primary-rgb), .16); --tok-tint-primary-border: rgba(var(--bs-primary-rgb), .38); --tok-tint-primary-text: #b9d9ea; --tok-tint-success: rgba(var(--bs-success-rgb), .16); --tok-tint-success-border: rgba(var(--bs-success-rgb), .38); --tok-tint-warning: rgba(var(--bs-warning-rgb), .16); --tok-tint-warning-border: rgba(var(--bs-warning-rgb), .38); --tok-tint-warning-text: #ffc38a; --tok-tint-info: rgba(var(--bs-info-rgb), .16); --tok-tint-info-border: rgba(var(--bs-info-rgb), .38); --tok-tint-danger: rgba(var(--bs-danger-rgb), .16); --tok-tint-neutral: rgba(225, 222, 245, .08); --tok-tint-neutral-border: rgba(225, 222, 245, .18); --tok-tint-neutral-text: #b6b4cc; --tok-row-negative: rgba(var(--bs-danger-rgb), .14); --tok-row-belowmin: rgba(var(--bs-warning-rgb), .14); } :focus-visible { outline: 2px solid var(--tok-focus); outline-offset: 1px; } /* ============================================================================ Numbers ========================================================================= */ .qty, .dppl-num, td.qty, th.qty { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; text-align: right; white-space: nowrap; } .qty-neg { color: var(--tok-danger); font-weight: 600; } /* ============================================================================ Derived values ========================================================================= */ .dppl-derived { background: var(--tok-derived-bg); color: var(--tok-derived-text); border: 1px solid var(--tok-tint-primary-border); border-radius: var(--tok-radius-sm); padding: 6px 10px; min-height: var(--tok-control-h); display: flex; align-items: center; justify-content: space-between; gap: var(--tok-space-2); font-variant-numeric: tabular-nums; font-weight: 600; } .dppl-derived .dppl-derived-value { text-align: right; flex: 1; } .dppl-derived .dppl-derived-unit { color: var(--tok-tint-primary-text); font-weight: 500; margin-left: 4px; } .dppl-derived-lg { font-size: 1.375rem; padding: 10px 12px; } .dppl-derived-xl { font-size: 2.125rem; padding: 14px 16px; line-height: 1.1; } /* ============================================================================ Select2 sizing ========================================================================= */ /* An open dropdown never grows wider than its field, so opening one cannot widen the document or shift the layout. */ .select2-container { max-width: 100%; } .select2-container--open .select2-dropdown { max-width: 100%; box-sizing: border-box; } .select2-container .select2-selection--single .select2-selection__rendered { overflow: hidden; } /* The detached dropdown container: the theme's width:100% !important must size it against its host only. */ .select2-container:has(> .select2-dropdown) { max-width: 100%; } /* A select2 grown from a form-select-sm keeps the compact row height of the line grids. */ select.form-select-sm + .select2-container .select2-selection--single { height: calc(1.5em + 0.5rem + calc(var(--bs-border-width, 1px) * 2)); font-size: 0.8125rem; } select.form-select-sm + .select2-container .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + 0.5rem); } /* ============================================================================ Validation ========================================================================= */ /* Blocking errors use Bootstrap's .is-invalid. Bootstrap has no warning field state, so that one is custom. */ .form-control.is-warned, .form-select.is-warned { border-color: var(--tok-warning); } /* flatpickr altInput: the real field is hidden and carries the id and ISO value; validation marks it, so the state is mirrored onto the visible sibling. */ input.flatpickr-input.is-invalid + .form-control { border-color: var(--bs-danger); } input.flatpickr-input.is-warned + .form-control { border-color: var(--tok-warning); } .btn-xs { padding: 2px 8px; font-size: 0.71875rem; line-height: 1.6; } /* ============================================================================ Forms ========================================================================= */ .dppl-guide { max-width: 880px; } .dppl-guide--wide { max-width: none; } /* forms built around a line grid */ .dppl-guide-head { display: flex; align-items: center; gap: var(--tok-space-3); margin-bottom: var(--tok-space-3); } .dppl-guide-head h5 { margin: 0; font-weight: 600; } .dppl-guide-head .text-muted { font-size: .8125rem; } /* Check strip: derived figures and the stock movements a post will write. */ .dppl-check { background: var(--tok-surface-alt); border: 1px solid var(--tok-border); border-radius: var(--tok-radius-md); padding: var(--tok-space-5); } .dppl-check .dppl-check-row { display: flex; flex-wrap: wrap; gap: var(--tok-space-5); align-items: flex-start; } .dppl-check table { background: transparent; } /* One box for every warning on the form, with one acknowledgement. */ .dppl-warn-summary { border-left: 4px solid var(--tok-warning); background: var(--tok-tint-warning); color: var(--tok-tint-warning-text); border-radius: var(--tok-radius-sm); padding: var(--tok-space-4) var(--tok-space-5); margin-top: var(--tok-space-4); } .dppl-warn-summary .dppl-warn-list { margin: 0 0 var(--tok-space-2); padding-left: 1.25rem; } .dppl-warn-summary .dppl-warn-list li { padding: 2px 0; } .dppl-warn-summary .form-check { margin: 0; font-weight: 600; } .dppl-guide-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--tok-space-3); padding-top: var(--tok-space-4); border-top: 1px solid var(--tok-border); } /* Cancel is always the first button in a form footer and sits far left. */ .dppl-guide-actions > .btn-label-secondary:first-child { margin-right: auto; } /* Repeater line cards: the remove button is pinned to the top-right corner, outside the field grid. */ .dppl-line-card { position: relative; } .dppl-line-card > .dppl-line-del { position: absolute; top: .5rem; right: .5rem; z-index: 1; } .dppl-line-card.has-del { padding-right: 3rem !important; } .dppl-date input.is-invalid + input.form-control { border-color: var(--tok-danger); } /* The visible alt input follows the hidden ISO input, so Bootstrap's input-group rounding treats it as a middle element. !important outweighs the vendor rule's six :not() selectors. */ .dppl-date > input[type="hidden"] + .form-control { border-top-left-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important; margin-left: 0 !important; } /* Role list inside the navbar profile dropdown ("View as role"). */ .dppl-role-list { max-height: 300px; overflow-y: auto; } .dppl-role-list .dropdown-item { padding-left: 3rem; font-size: 0.8125rem; } .dppl-preview-banner { display: flex; align-items: center; gap: var(--tok-space-3); background: rgba(var(--bs-primary-rgb), .1); border: 1px solid rgba(var(--bs-primary-rgb), .3); color: var(--tok-primary); border-radius: var(--tok-radius-md); padding: 8px 12px; margin-bottom: var(--tok-space-4); font-size: 0.8125rem; font-weight: 500; } /* Scope line */ .dppl-scope-line { font-size: 0.75rem; color: var(--tok-text-muted); margin-bottom: var(--tok-space-3); } .dppl-scope-line i { margin-right: 4px; } /* Global search results */ .dppl-search-results { position: absolute; top: 58px; left: 24px; right: 24px; z-index: 1080; background: var(--tok-surface); border: 1px solid var(--tok-border); border-radius: var(--tok-radius-md); box-shadow: 0 8px 28px rgba(0,0,0,.14); max-height: 60vh; overflow: auto; padding: 6px; } .dppl-search-group { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tok-text-muted); padding: 8px 10px 4px; } .dppl-search-item { display: block; padding: 7px 10px; border-radius: var(--tok-radius-sm); color: var(--tok-text); text-decoration: none; } .dppl-search-item:hover { background: var(--tok-surface-alt); } .dppl-search-item small { color: var(--tok-text-muted); } /* ============================================================================ Tables and stat tiles ========================================================================= */ .dppl-kpi { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; } .dppl-kpi:hover { box-shadow: 0 6px 20px rgba(0,0,0,.09); } .dppl-kpi-value { font-size: 1.75rem; line-height: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* Caption in the heading colour, only the sub-line muted, as in the theme's own stat tile. */ .dppl-kpi-label { font-size: 0.8125rem; color: var(--tok-text); font-weight: 500; } .dppl-kpi-unit { font-size: 0.8125rem; color: var(--tok-text-muted); font-weight: 500; } /* Dashboard tiles are border-shadow statistic cards with a plain h4 value. */ .dppl-kpi h4, .card[class*=card-border-shadow-] h4, .card[class*=card-border-shadow-] h5 { font-variant-numeric: tabular-nums; } table.dppl-table { width: 100%; } /* Header typography comes from the theme's core.css. */ table.dppl-table tbody td { vertical-align: middle; padding-top: 5px; padding-bottom: 5px; } /* DataTables sort glyphs: the vendor's 9px line-height merges the two arrows into one blob. */ table.dataTable thead .sorting::before, table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_asc_disabled::before, table.dataTable thead .sorting_asc_disabled::after, table.dataTable thead .sorting_desc_disabled::before, table.dataTable thead .sorting_desc_disabled::after { line-height: 1.1rem !important; } /* Row hover; the negative/below-min row tints use !important and still win. */ table.dppl-table > tbody > tr:hover > td { background-color: var(--bs-gray-50); } /* Registers scroll sideways, so nothing wraps. Cells that must shorten opt in with .text-truncate and a max-width. */ table.dppl-table thead th, table.dppl-table tfoot td, table.dppl-table tbody td { white-space: nowrap; } /* --bs-gray-50 is an alpha grey, so the fill tracks light and dark. */ table.dppl-table thead th { background-color: var(--bs-gray-50); padding-top: .5rem; padding-bottom: .5rem; } table.dppl-table tfoot td { background: var(--bs-gray-50); font-weight: 700; } /* Status badges get a floor width in registers only, so the column stays even. */ table.dppl-table td .badge { min-width: 104px; } tr.row-negative td { background: var(--tok-row-negative) !important; } tr.row-belowmin td { background: var(--tok-row-belowmin) !important; } .dppl-line-card.row-belowmin { background: var(--tok-row-belowmin); } /* Scrolling lists: one .table-responsive container does the scrolling (DataTables scrollX is off), so the header stays part of the same table. */ .card-datatable .table-responsive { border-bottom: 1px solid var(--tok-border); /* Sticky headers need a scrolling ancestor with a height bound. */ max-height: 70vh; } .card-datatable .table-responsive > table.dppl-table > thead > tr > th { position: sticky; top: 0; z-index: 3; /* --bs-gray-50 is alpha, so an opaque card fill goes underneath or rows show through as they pass. */ background-color: var(--bs-card-bg); background-image: linear-gradient(var(--bs-gray-50), var(--bs-gray-50)); /* Collapsed borders do not travel with a stuck cell; the rule is an inset shadow instead. */ box-shadow: inset 0 -1px 0 var(--bs-border-color); } /* Totals stay on screen while the rows scroll past. */ .card-datatable .table-responsive > table.dppl-table > tfoot > tr > th, .card-datatable .table-responsive > table.dppl-table > tfoot > tr > td { position: sticky; bottom: 0; z-index: 3; background-color: var(--bs-card-bg); background-image: linear-gradient(var(--bs-gray-50), var(--bs-gray-50)); box-shadow: inset 0 1px 0 var(--bs-border-color); } .card-datatable { overflow: visible; } /* Card-hosted tabs: the header is py-0 so the active underline sits on the header's bottom border; the links carry the vertical padding. */ .card-header.py-0 > .card-header-tabs { gap: .5rem; /* Bootstrap offsets card-header-tabs by the default header padding. */ margin-bottom: -1px; } .card-header.py-0 > .card-header-tabs .nav-link { padding: 1rem 1.25rem .875rem; /* Spacing comes from the ul's gap; the vendor's link margin would overflow a max-content list. */ margin-right: 0; } /* Tabs beside header controls shrink to their labels. The div. prefix matches the specificity of the vendor's "div:not(.nav-align-left):not(.nav-align-right) > .nav-tabs" rule. */ div.card-header.d-flex > .card-header-tabs { width: max-content; } /* ============================================================================ Row actions ========================================================================= */ .dppl-actions { display: inline-flex; white-space: nowrap; } .dppl-actions .btn-icon { width: 30px; height: 30px; padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .dppl-actions .btn-icon i { font-size: 1.125rem; } /* ============================================================================ Ledger footer ========================================================================= */ .dppl-proof { background: var(--tok-derived-bg); color: var(--tok-derived-text); border: 1px solid var(--tok-tint-primary-border); border-radius: var(--tok-radius-md); padding: 12px 16px; font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* ============================================================================ Plan board ========================================================================= */ .dppl-board { overflow-x: auto; } .dppl-board table { border-collapse: separate; border-spacing: 0; min-width: 1100px; } .dppl-board th, .dppl-board td { border: 1px solid var(--tok-border); vertical-align: top; } /* Sticky cells need an opaque base under the alpha tint. */ .dppl-board thead th, .dppl-board .rowhead { background-color: var(--tok-surface); background-image: linear-gradient(var(--tok-surface-alt), var(--tok-surface-alt)); } .dppl-board thead th { position: sticky; top: 0; z-index: 2; text-align: center; font-size: 0.75rem; padding: 8px; } .dppl-board .rowhead { position: sticky; left: 0; z-index: 1; min-width: 130px; font-size: 0.78125rem; font-weight: 600; padding: 8px; } .dppl-board td.cell { min-width: 150px; height: 92px; padding: 5px; background: var(--tok-surface); } .dppl-board td.cell.drop-hover { background: var(--tok-derived-bg); } .dppl-plan-card { background: var(--tok-surface); border: 1px solid var(--tok-border); border-left: 3px solid var(--tok-primary); border-radius: var(--tok-radius-sm); padding: 6px 8px; margin-bottom: 5px; font-size: 0.75rem; cursor: grab; } .dppl-plan-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); } .dppl-plan-card.st-COMPLETED { border-left-color: var(--tok-success); } .dppl-plan-card.st-IN_PROGRESS { border-left-color: var(--tok-warning); } .dppl-plan-card.st-CANCELLED { border-left-color: var(--tok-text-muted); opacity: .6; } .dppl-plan-card .pc-name { font-weight: 600; } .dppl-plan-card .pc-meta { color: var(--tok-text-muted); font-size: 0.6875rem; } /* ============================================================================ Import comparison ========================================================================= */ .dppl-compare th { text-align: center; } .dppl-compare td.diff-ok { color: var(--tok-success); font-weight: 700; } .dppl-compare td.diff-bad { color: var(--tok-danger); font-weight: 700; } /* ============================================================================ Permission matrix ========================================================================= */ .dppl-matrix { font-size: 0.78125rem; } .dppl-matrix th { text-align: center; vertical-align: bottom; white-space: nowrap; } .dppl-matrix td { text-align: center; } .dppl-matrix td:first-child, .dppl-matrix th:first-child { text-align: left; position: sticky; left: 0; background: var(--tok-surface); } /* ============================================================================ Print ========================================================================= */ .dppl-print-body { background: #EEF0F3; } .dppl-print-toolbar { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; } .dppl-print-sheet { background: #fff; width: 297mm; max-width: 100%; min-height: 210mm; margin: 0 auto 32px; padding: 12mm 12mm; color: #000; box-shadow: 0 4px 20px rgba(0,0,0,.15); font-size: 11px; } .dppl-form-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; } .dppl-form-head .fh-title { text-align: center; flex: 1; } .dppl-form-head .fh-title h5 { margin: 0; font-weight: 700; letter-spacing: .5px; } .dppl-form-doc { font-size: 10px; text-align: right; line-height: 1.5; } .dppl-print-sheet table { width: 100%; border-collapse: collapse; } .dppl-print-sheet table th, .dppl-print-sheet table td { border: 1px solid #000; padding: 3px 5px; } .dppl-print-sheet table th { background: #E8E8E8; font-size: 10px; } .dppl-print-foot { margin-top: 10px; font-size: 9.5px; display: flex; justify-content: space-between; } @page { size: A4 landscape; margin: 8mm; } @media print { .d-print-none { display: none !important; } .dppl-print-body { background: #fff; } .dppl-print-sheet { box-shadow: none; margin: 0; width: auto; padding: 0; } .layout-menu, .layout-navbar, .content-footer, .dppl-demobar { display: none !important; } .layout-page { padding: 0 !important; } /* A capped, scrolling table would print only its first screenful. */ .card-datatable .table-responsive { max-height: none; overflow: visible; } .card-datatable .table-responsive > table.dppl-table > thead > tr > th, .card-datatable .table-responsive > table.dppl-table > tfoot > tr > th, .card-datatable .table-responsive > table.dppl-table > tfoot > tr > td { position: static; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ============================================================================ Sign-in ========================================================================= */ /* Split cover layout: brand panel left, form right. The panel is decorative and drops out under 992px rather than stacking. */ .dppl-cover-body { background: var(--tok-surface); } .dppl-cover { display: flex; min-height: 100vh; min-height: 100dvh; } /* Brand panel */ .dppl-cover-brand { position: relative; flex: 0 0 46%; max-width: 46%; display: none; /* shown from lg up */ flex-direction: column; justify-content: space-between; padding: var(--tok-space-8) var(--tok-space-7); color: #fff; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(155deg, #4280a2 0%, var(--bs-primary) 48%, #67b8e3 100%); } /* Two soft discs give the gradient depth without an image. */ .dppl-cover-brand::before, .dppl-cover-brand::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; } .dppl-cover-brand::before { width: 420px; height: 420px; top: -140px; right: -120px; } .dppl-cover-brand::after { width: 300px; height: 300px; bottom: -110px; left: -90px; } .dppl-cover-brand-inner { position: relative; z-index: 1; } .dppl-cover-logo { height: 40px; width: auto; margin-bottom: var(--tok-space-7); filter: brightness(0) invert(1); /* dark mark on a coloured panel */ } .dppl-cover-title { font-size: 2rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--tok-space-4); color: #fff; } .dppl-cover-sub { font-size: var(--tok-text-lg); line-height: 1.6; max-width: 34ch; margin-bottom: var(--tok-space-6); color: rgba(255, 255, 255, .82); } .dppl-cover-points { list-style: none; padding: 0; margin: 0 0 var(--tok-space-6); } .dppl-cover-points li { display: flex; align-items: flex-start; gap: var(--tok-space-3); padding: var(--tok-space-2) 0; color: rgba(255, 255, 255, .92); } .dppl-cover-points i { font-size: 1.15rem; opacity: .9; flex: 0 0 auto; } .dppl-cover-art { display: block; width: 100%; max-width: 320px; margin-top: var(--tok-space-5); } .dppl-cover-foot { position: relative; z-index: 1; margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .7); } /* Form panel */ .dppl-cover-form { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: var(--tok-space-7) var(--tok-space-5); background: var(--tok-surface); } .dppl-cover-form-inner { width: 100%; max-width: 420px; } .dppl-cover-head-logo { height: 40px; width: auto; margin-bottom: var(--tok-space-5); } .dppl-cover-head h4 { font-weight: 700; } .dppl-cover-form .input-group-text { color: var(--tok-text-muted); } .dppl-cover-form .btn-primary { height: 44px; font-weight: 600; } /* Quick sign-in chips */ .dppl-cover-users { margin-top: var(--tok-space-6); padding: var(--tok-space-5); border: 1px solid var(--tok-border); border-radius: var(--tok-radius-lg); background: var(--tok-surface-alt); } .dppl-cover-users-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--tok-space-1); } .dppl-cover-users-label { font-weight: 600; font-size: .875rem; } .dppl-cover-roles { display: flex; flex-wrap: wrap; gap: var(--tok-space-2); } .dppl-role-chip { display: inline-flex; flex-direction: column; gap: 1px; max-width: 100%; padding: 6px var(--tok-space-3); border: 1px solid var(--tok-border); border-radius: var(--tok-radius-md); background: var(--tok-surface); text-decoration: none; line-height: 1.25; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .dppl-role-chip:hover { border-color: var(--bs-primary); box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), .18); transform: translateY(-1px); } .dppl-role-chip .rc-user { font-size: .8125rem; font-weight: 600; color: var(--bs-primary); } .dppl-role-chip .rc-role { font-size: .6875rem; color: var(--tok-text-muted); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 992px) { .dppl-cover-brand { display: flex; } .dppl-cover-form { padding: var(--tok-space-7) var(--tok-space-8); } } @media (max-width: 575.98px) { .dppl-cover-form { padding: var(--tok-space-6) var(--tok-space-4); } .dppl-cover-roles { gap: var(--tok-space-1); } } /* Styleguide colour swatch; the fill comes from the token itself. */ .sg-swatch { width: 26px; height: 26px; border-radius: var(--tok-radius-sm); border: 1px solid var(--tok-border); } /* ============================================================================ Navbar ========================================================================= */ /* The theme caps .dropdown-notifications-list and relies on perfect-scrollbar, which its main.js does not initialise on this markup. */ .layout-navbar .navbar-dropdown.dropdown-notifications .dropdown-notifications-list { overflow-y: auto; } /* Capped, natively scrolling table inside a card. */ .dppl-scroll-320 { max-height: 320px; overflow-y: auto; } /* Empty-state glyph */ .dppl-empty-icon { font-size: 44px; line-height: 1; } .dppl-empty-icon-lg { font-size: 56px; line-height: 1; } /* Stat tile whose value is a phrase rather than a number. */ .dppl-kpi-value-sm { font-size: 1.25rem; line-height: 1.75rem; } /* The theme fills the open search bar through typeahead's injected wrapper; the global search is not a typeahead, so the wrapper takes that fill here. */ .layout-navbar .search-input-wrapper { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; background: var(--tok-surface); border-radius: inherit; } .layout-navbar .search-input-wrapper .search-input { height: 100%; }