.p-component { font-size: .875rem; }
.p-datatable .p-datatable-tbody > tr > td,
.p-datatable .p-datatable-thead > tr > th {
padding: .3rem .75rem;
}
.p-datatable .p-datatable-thead > tr > th {
// brand-tinted dark navy header, a touch lighter than rows
background-color: #1b2636;
border-bottom: 1px solid rgba(97, 175, 239, 0.15);
}
// Scrollable datatable sticky header/footer — brand navy (was grey #3b3b3b).
.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot,
.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead,
.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot {
background-color: #1b2636 !important;
}
.p-treenode-label { width: 100%; }
.p-tree, .p-tree .p-tree-container .p-treenode .p-treenode-content { padding: 0; }
.p-tree-container { margin: 0 }
p-progressSpinner {
position: absolute;
top: 0;
left: 0;
// Flat navy glass loading overlay (no gradient).
background-color: rgba(8, 12, 18, 0.72);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
width: 100%;
height: 100%;
z-index: 2;
}
// Branded spinner: replace primeng's rotating SVG with the API Maker rocket
// mark (pulsing, stays upright) inside a rotating brand blue->green ring.
p-progressSpinner .p-progress-spinner-svg { display: none !important; }
p-progressSpinner .p-progress-spinner {
position: absolute;
top: 50%;
left: 50%;
width: 56px !important;
height: 56px !important;
transform: translate(-50%, -50%);
// Rotating brand ring — a fixed 56px square so it stays a perfect circle
// regardless of the host element's aspect ratio. Centred about its own
// midpoint so rotation has no wobble.
// Complete brand ring via a conic-gradient (full 360° circle, no border gaps),
// masked in the centre to leave a 3px-thick ring. Rotates for the loading motion.
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 56px;
height: 56px;
box-sizing: border-box;
border-radius: 50%;
background: conic-gradient(
from 0deg,
rgba(97, 175, 239, 0.18) 0deg,
rgba(97, 175, 239, 0.18) 90deg,
#61AFEF 200deg,
#3DBE79 320deg,
rgba(97, 175, 239, 0.18) 360deg
);
// carve out the centre so the gradient reads as a 3px ring (full circle)
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
transform-origin: 50% 50%;
animation: am-spin 0.9s linear infinite;
}
// API Maker rocket mark, gently pulsing in the centre.
// Dark theme (default): use the dark-mode rocket SVG (lighter body/wings so it pops on dark).
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
background: url("/assets/images/logo/store_logo-dark.svg") center / contain no-repeat;
filter: drop-shadow(0 0 6px rgba(97, 175, 239, 0.4));
animation: am-pulse 1.2s ease-in-out infinite;
}
}
// Light theme: the original (darker) rocket reads well on the light spinner centre.
html.LIGHT p-progressSpinner .p-progress-spinner::after {
background: url("/assets/images/logo/store_logo-light.svg") center / contain no-repeat !important;
filter: drop-shadow(0 0 5px rgba(12, 83, 164, 0.30));
}
@keyframes am-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes am-pulse {
/* keep the centring translate; only the scale changes */
0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.75; }
50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}
.p-tabview .p-tabview-panels { padding: 0; }
// New UI standard: brand-blue tinted tab strip underline (was flat grey #4f4f4f).
.p-tabview .p-tabview-nav {
margin-bottom: 0;
border-color: rgba(97, 175, 239, 0.18) !important;
}
.p-tabview .p-tabview-nav li .p-tabview-nav-link { padding: .4rem .75rem; background: transparent; }
.p-tabview .p-tabview-nav li .p-tabview-nav-link,
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { color: #b0b0b0; }
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
background: #4e4e4e;
}
// Kill the theme's red/maroon focus ring on a pressed/focused tab header —
// replace with a subtle brand-blue ring (same pattern as the datatable rows
// and confirm-dialog buttons above).
.p-tabview .p-tabview-nav li .p-tabview-nav-link:focus,
.p-tabview .p-tabview-nav li .p-tabview-nav-link:focus-visible,
.p-tabview .p-tabview-nav li .p-tabview-nav-link.p-focus,
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link:focus {
outline: none !important;
box-shadow: inset 0 0 0 0.12rem rgba(97, 175, 239, 0.5) !important;
}
.p-dialog .p-dialog-footer,
// Match the bootstrap .modal-header height (padding .25rem .5rem + line-height 1.5rem).
.p-dialog .p-dialog-header { padding: .25rem .5rem !important; line-height: 1.5rem; }
.p-dialog .p-dialog-content { padding: 0 1rem; }
// Dialog title — proper modal-title size (was oversized from the theme default).
.p-dialog .p-dialog-title { font-size: 1.05rem !important; font-weight: 700 !important; }
// Confirm buttons — fixed 30px height (matches the standard modal buttons).
.p-confirm-dialog .p-dialog-footer .p-button {
height: 30px !important;
padding: 0 0.6rem !important;
font-size: 0.875rem !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
}
.p-confirm-dialog .p-dialog-footer .p-button .p-button-icon { font-size: 0.875rem !important; }
// New UI standard: brand-navy dialog (was flat grey #3b3b3b).
.p-dialog .p-dialog-content,
.p-dialog .p-dialog-footer {
background: #141c29 !important;
color: #d7dae0 !important;
}
// Footer top divider — brand-blue hairline (was the leftover grey #4f4f4f from theme.css).
.p-dialog .p-dialog-footer { border-top: 1px solid rgba(97, 175, 239, 0.18) !important; }
.p-dialog .p-dialog-header {
background-color: #1b2636 !important;
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
border-bottom: 1px solid rgba(97, 175, 239, 0.18) !important;
color: #ffffff !important;
}
// Standard modal radius (matches Bootstrap .modal-content; cards in this app are square,
// so keep the dialog to the conventional subtle 0.3rem rather than an exaggerated round).
.p-dialog { border: 1px solid rgba(97, 175, 239, 0.20) !important; border-radius: 0.3rem !important; overflow: hidden; }
.p-dialog .p-dialog-header { border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }
.p-dialog .p-dialog-footer { border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; }
// Confirm "No" (reject) = neutral dark navy; "Yes" (accept) = brand blue->green (was maroon).
.p-confirm-dialog-reject {
background-color: #1c2839 !important;
background-image: linear-gradient(180deg, #20293a 0%, #161f2d 100%) !important;
border: 1px solid rgba(97, 175, 239, 0.25) !important;
color: #d7dae0 !important;
}
// Kill the theme's red/maroon focus ring on the auto-focused reject/accept buttons — use brand (or none).
.p-confirm-dialog-reject:focus,
.p-confirm-dialog-reject.p-focus,
.p-confirm-dialog-reject:enabled:focus {
border: 1px solid rgba(97, 175, 239, 0.45) !important;
box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.25) !important;
outline: 0 none !important;
}
.p-confirm-dialog-accept {
background-color: #0C53A4 !important;
background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
border: 1px solid rgba(97, 175, 239, 0.45) !important;
color: #ffffff !important;
}
.p-confirm-dialog-accept:enabled:hover,
.p-confirm-dialog-accept:enabled:focus,
.p-confirm-dialog-accept:enabled:active,
.p-confirm-dialog-accept:focus,
.p-confirm-dialog-accept.p-focus {
background-image: linear-gradient(135deg, #1565c9 0%, #0e8576 55%, #00a84d 100%) !important;
border: 1px solid rgba(97, 175, 239, 0.6) !important;
box-shadow: 0 0 0 0.2rem rgba(97, 175, 239, 0.30) !important;
outline: 0 none !important;
}
// ===== Confirm dialog — polished alert layout =====
// Content: comfortable padding, icon + message aligned on a single centred row.
.p-confirm-dialog .p-dialog-content {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.35rem 1.5rem !important;
}
// Warning icon rendered as a soft amber "caution badge" (circular halo) rather than
// a bare glyph — gives the alert a clearer, more finished affordance.
.p-confirm-dialog .p-confirm-dialog-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
margin: 0 !important;
color: #ffc84a !important; // brand-amber caution
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(240, 165, 0, 0.22) 0%, rgba(240, 165, 0, 0.08) 70%, transparent 100%);
border: 1px solid rgba(240, 165, 0, 0.35);
box-shadow: 0 0 12px rgba(240, 165, 0, 0.20), inset 0 0 6px rgba(240, 165, 0, 0.15);
}
// Center the glyph itself inside the badge. The pi-exclamation-triangle glyph carries
// internal top/bottom padding in its em box that makes it sit high; line-height:1 on the
// ::before (the actual icon char) + flex-centering pins it to the true optical center.
.p-confirm-dialog .p-confirm-dialog-icon::before {
display: block;
line-height: 1 !important;
font-size: 1.5rem !important;
margin-bottom: 5px;
}
// Message text — left aligned next to the badge, comfortable size/leading.
// (Overrides the global .dialog-text `margin:30px; text-align:center` used by callers so
// the icon+message read as one tidy row instead of a large centred block.)
.p-confirm-dialog .p-confirm-dialog-message {
margin: 0 !important;
line-height: 1.5;
font-size: 0.95rem;
color: #dfe4ec !important;
}
.p-confirm-dialog .p-confirm-dialog-message .dialog-text {
margin: 0 !important;
text-align: left !important;
}
// Optional inline leading icon inside the message (e.g. pi-trash for delete confirmations).
// Sits just before the text, tinted the danger red so it reinforces the destructive action.
.p-confirm-dialog .p-confirm-dialog-message .confirm-msg-icon {
margin-right: 0.5rem;
font-size: 0.95rem;
vertical-align: -1px;
color: #ff7b72 !important;
}
// The emphasised (danger) phrase within the message — keep it distinct but on-brand.
.p-confirm-dialog .p-confirm-dialog-message .text-danger {
color: #ff7b72 !important;
font-weight: 700;
}
// Footer — a touch more breathing room and a consistent gap between No / Yes.
.p-confirm-dialog .p-dialog-footer {
padding: 0.6rem 0.85rem !important;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
.p-confirm-dialog .p-dialog-footer .p-button { margin: 0 !important; }
// New UI standard: brand-tinted dark navy for grids/tables (matches inputs, cards, tiles).
// Selection/hover use brand blue instead of the legacy maroon from theme.css.
.p-datatable { background: #10161f; }
// Caption/header area (holds toolbar dropdowns etc.) — brand navy instead of the legacy
// grey #3b3b3b from theme.css, so a control inside it doesn't read as a dark border band.
.p-datatable .p-datatable-header {
background: #131b27;
color: #c6ccd6;
border: 0 none;
border-bottom: 1px solid rgba(97, 175, 239, 0.15);
}
.p-datatable .p-datatable-tbody > tr { background: #131b27; color: #c6ccd6; transition: background-color .12s ease; }
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(2n) { background-color: #18222f; }
// Hover (incl. selectable rows) — brand blue->green gradient wash.
.p-datatable .p-datatable-tbody > tr:not(.p-highlight):hover,
.p-datatable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):hover {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.22) 0%, rgba(0, 137, 63, 0.14) 100%) !important;
background-color: #1d2a3d !important;
color: #ffffff !important;
}
// Kill the maroon focus outline on rows (replace with a brand-blue ring).
.p-datatable .p-datatable-tbody > tr:focus {
outline: 0.15rem solid rgba(97, 175, 239, 0.5) !important;
outline-offset: -0.15rem !important;
}
.p-treetable .p-treetable-tbody > tr:focus {
outline: 0.15rem solid rgba(97, 175, 239, 0.5) !important;
outline-offset: -0.15rem !important;
}
// Hoverable-rows variant also defaults to maroon in theme.css.
.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.22) 0%, rgba(0, 137, 63, 0.14) 100%) !important;
background-color: #1d2a3d !important;
color: #ffffff !important;
}
// Selected row — brand blue->green gradient + left accent. Beats theme.css maroon, incl. striped-even.
.p-datatable .p-datatable-tbody > tr.p-highlight,
.p-datatable .p-datatable-tbody > tr.p-selectable-row.p-highlight,
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight,
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd).p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
background-color: #16273d !important;
color: #ffffff !important;
box-shadow: none !important;
}
.p-datatable .p-datatable-tbody > tr > td {
border-top: 0.5px solid rgba(97, 175, 239, 0.12);
border-bottom: 0;
border-left: 0;
border-right: 0;
}
// Tooltip settings — New UI standard: brand-tinted dark navy (was bright gold #e3b70f).
$tooltip-bg: #16273d;
.p-tooltip.p-tooltip-right .p-tooltip-arrow { border-right-color: $tooltip-bg;}
.p-tooltip.p-tooltip-left .p-tooltip-arrow { border-left-color: $tooltip-bg;}
.p-tooltip.p-tooltip-top .p-tooltip-arrow { border-top-color: $tooltip-bg;}
.p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: $tooltip-bg;}
.p-tooltip .p-tooltip-text {
background-color: $tooltip-bg;
background-image: linear-gradient(135deg, #1b3553 0%, #133024 100%);
color: #e6ebf2;
border: 1px solid rgba(97, 175, 239, 0.35);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
padding: .25rem .75rem;
}
// ===== Switch (p-inputSwitch) — brand pill: off = navy track + light round knob, on = brand
// blue->green track + white knob, focus = brand-blue ring. Was grey/maroon. =====
.p-inputswitch { width: 2.5rem; height: 1.25rem; }
.p-inputswitch .p-inputswitch-slider {
background: #1a2738 !important;
border: 1px solid rgba(97, 175, 239, 0.30);
border-radius: 1rem !important; // pill track
}
// Round knob, vertically centred, sized to the track (off state = light slate so it's visible on navy).
.p-inputswitch .p-inputswitch-slider::before {
width: 0.9rem; height: 0.9rem;
left: 0.18rem; top: 50%; margin-top: -0.45rem;
border-radius: 50% !important;
background: #c7d2e0 !important;
transition: transform 0.15s ease, background 0.15s ease;
}
.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #22324a !important; }
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
background-color: #0C53A4 !important;
border-color: rgba(97, 175, 239, 0.5);
}
// On state — white knob slid to the right.
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before {
background: #ffffff !important;
transform: translateX(1.25rem);
}
.p-inputswitch.p-focus .p-inputswitch-slider {
box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.35) !important;
outline: 0 none !important;
}
.mt-2px { margin-top: 2px; }
// Dropdown size related changes
.p-inputtext { font-size: 14px; padding: .25rem .5rem; }
// New UI standard: brand navy fill + brand-blue border on primeng text inputs (e.g. p-tree-filter).
// Beats theme.css greys (#4f4f4f) and maroon focus (#8a0000/#7a0000).
.p-inputtext:not(.p-dropdown-label) {
background-color: #16202e !important;
background-image: linear-gradient(160deg, #1c2a3d 0%, #141e2c 100%) !important;
border: 1px solid rgba(97, 175, 239, 0.28) !important;
color: #d7dae0 !important;
}
.p-inputtext:not(.p-dropdown-label):enabled:hover {
border-color: rgba(97, 175, 239, 0.45) !important;
}
.p-inputtext:not(.p-dropdown-label):enabled:focus {
border-color: rgba(97, 175, 239, 0.7) !important;
box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.30) !important;
outline: 0 none !important;
}
.p-inputtext::placeholder { color: #6f7c8c !important; }
.p-component.p-overlay { z-index: 1100 !important; }
.p-dropdown-panel .p-dropdown-header { padding: 0.3rem 0.3rem; }
.p-dropdown-panel .p-dropdown-items .p-dropdown-item { padding: .25rem 1rem; }
ol, ul, dl { margin-bottom: 0; }
// New UI standard: brand-tinted navy gradient for dropdowns (color-only, matches .form-control).
.p-dropdown .p-dropdown-trigger { background-color: transparent !important; }
// Dropdown control fill — brand navy gradient. Covers plain, compound .p-input-filled (same element),
// descendant .p-input-filled, hover/focus — to beat theme.css #2e2e2e / #404040 / #4f4f4f.
.p-dropdown,
.p-dropdown.p-input-filled,
.p-dropdown.p-input-filled:not(.p-disabled):hover,
.p-input-filled .p-dropdown,
.p-input-filled .p-dropdown:not(.p-disabled):hover {
// Subtle brand-blue hairline border (matches .form-control) — a touch brighter than card edges.
border: 1px solid rgba(97, 175, 239, 0.28) !important;
background-color: #1a2738 !important;
background-image: linear-gradient(160deg, #1c2a3d 0%, #141e2c 100%) !important;
}
// Focus — brand-blue border, matching .form-control:focus.
.p-dropdown.p-input-filled:not(.p-disabled).p-focus,
.p-input-filled .p-dropdown:not(.p-disabled).p-focus,
.p-dropdown:not(.p-disabled).p-focus {
border: 1px solid rgba(97, 175, 239, 0.55) !important;
background-color: #1a2738 !important;
background-image: linear-gradient(160deg, #1c2a3d 0%, #141e2c 100%) !important;
box-shadow: 0 0 0 0.2rem rgba(97, 175, 239, 0.35) !important;
}
// The inner label/input never shows its own grey fill.
.p-dropdown .p-dropdown-label,
.p-dropdown.p-input-filled .p-dropdown-label,
.p-dropdown .p-inputtext { background: transparent !important; }
// Selected-value text must match the .form-control font-size + colour (was a faint theme.css grey
// at a different size, so dropdowns looked inconsistent next to plain inputs).
.p-dropdown .p-dropdown-label {
color: #d7dae0 !important;
font-size: 0.875rem !important;
line-height: 1.5 !important;
}
.p-dropdown .p-dropdown-label.p-placeholder { color: #6f7c8c !important; }
// Dropdown items in the panel — same size for consistency.
.p-dropdown-panel .p-dropdown-items .p-dropdown-item { font-size: 0.875rem !important; }
html.DARK .p-tabview .p-tabview-panels { background: #141c29; }
html.LIGHT .p-tabview .p-tabview-panels { background: #ffffff; color: #2b3340; }
.p-input-small-dropdown {
.p-inputtext { padding: 0 0.5rem; }
}
// ===== API dropdown (api-testing filter-section) — aligned columns =====
// Styled globally (panel is appendTo="body"). Method + category are fixed-width columns and
// the name has a min-width, so every column (method | [CATEGORY] | name | path) lines up.
.api-dd-panel {
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
border: 1px solid rgba(97, 175, 239, 0.22);
}
/* filter box — give it room, round it and add a brand focus ring */
.api-dd-panel .p-dropdown-header { padding: 0.6rem 0.75rem 0.5rem; }
.api-dd-panel .p-dropdown-filter-container { width: 100%; }
.api-dd-panel .p-dropdown-filter-container .p-dropdown-filter {
border-radius: 0.4rem;
padding: 0.45rem 2.25rem 0.45rem 0.75rem;
}
.api-dd-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
right: 0.85rem; color: var(--brand-secondary, #61AFEF);
}
.api-dd-panel .p-dropdown-items { padding: 0.25rem; }
.api-dd-panel .p-dropdown-items .p-dropdown-item {
padding: 0.4rem 0.65rem !important;
border-radius: 0.35rem;
margin-bottom: 1px;
}
.api-dd-panel .p-dropdown-items .p-dropdown-item > span {
display: flex; align-items: center; gap: 0.6rem; width: 100%;
}
/* method column (GET/POST/PUT/DELETE) — rendered as a small badge for scannability */
.api-dd-panel .p-dropdown-items .p-dropdown-item .get,
.api-dd-panel .p-dropdown-items .p-dropdown-item .post,
.api-dd-panel .p-dropdown-items .p-dropdown-item .put,
.api-dd-panel .p-dropdown-items .p-dropdown-item .delete {
flex: 0 0 56px; width: 56px; margin: 0 !important;
text-align: center;
font-size: 0.6875rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em;
padding: 0.15rem 0;
border-radius: 0.25rem;
border: 1px solid currentColor;
text-transform: uppercase;
}
.api-dd-panel .p-dropdown-items .p-dropdown-item .get { background: rgba(47, 179, 106, 0.14); }
.api-dd-panel .p-dropdown-items .p-dropdown-item .post { background: rgba(224, 168, 0, 0.14); }
.api-dd-panel .p-dropdown-items .p-dropdown-item .put { background: rgba(97, 175, 239, 0.14); }
.api-dd-panel .p-dropdown-items .p-dropdown-item .delete { background: rgba(231, 76, 60, 0.14); }
/* keep the badge's semantic colour even on the highlighted/hover row
(the generic rule above forces white text on .p-highlight) */
.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .get,
.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .get { color: var(--accent-success) !important; background: rgba(47, 179, 106, 0.22); }
.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .post,
.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .post { color: var(--accent-warning) !important; background: rgba(224, 168, 0, 0.22); }
.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .put,
.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .put { color: var(--brand-secondary) !important; background: rgba(97, 175, 239, 0.22); }
.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .delete,
.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .delete { color: var(--accent-error) !important; background: rgba(231, 76, 60, 0.22); }
/* [CATEGORY] column — rendered as a small chip; SCHEMA vs GEN colour-coded */
.api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat {
flex: 0 0 76px; width: 76px !important; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.12rem 0.3rem;
border-radius: 0.25rem;
border: 1px solid;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* SCHEMA = brand-blue, GEN = teal/green — distinct at a glance */
.api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat[data-cat="SCHEMA"] {
color: #7fb6ec; border-color: rgba(127, 182, 236, 0.45); background: rgba(97, 175, 239, 0.12);
}
.api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat[data-cat="GEN"] {
color: #3fc99a; border-color: rgba(63, 201, 154, 0.45); background: rgba(47, 179, 106, 0.12);
}
/* any other category — neutral slate chip */
.api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat:not([data-cat="SCHEMA"]):not([data-cat="GEN"]) {
color: #9aa7b8; border-color: rgba(154, 167, 184, 0.35); background: rgba(154, 167, 184, 0.10);
}
/* name column — min-width so short names still push the path to a common column */
.api-dd-panel .p-dropdown-items .p-dropdown-item > span > span:not([class]):not([style]) {
flex: 0 0 auto; min-width: 240px; font-weight: 500;
}
/* path — muted, fills remaining space, truncates if very long */
.api-dd-panel .p-dropdown-items .p-dropdown-item .text-muted {
flex: 1 1 auto; margin: 0 !important;
font-size: 0.8125rem; opacity: 0.8;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
// ===== API dropdown — SELECTED item (the closed control's label) =====
// The selectedItem template renders inside .p-dropdown-label; without this it
// collapses to inline text ("SCHEMAGet all"). Give it the same badge/chip treatment.
.api-dd-control .p-dropdown-label {
display: flex !important; align-items: center; gap: 0.6rem;
overflow: hidden;
}
.api-dd-control .p-dropdown-label > span {
display: flex; align-items: center; gap: 0.6rem; width: 100%; overflow: hidden;
}
/* method badge — colour set with !important to beat the global .p-dropdown-label colour */
.api-dd-control .p-dropdown-label .get,
.api-dd-control .p-dropdown-label .post,
.api-dd-control .p-dropdown-label .put,
.api-dd-control .p-dropdown-label .delete {
flex: 0 0 auto; margin: 0 !important;
font-size: 0.6875rem !important; font-weight: 700 !important;
letter-spacing: 0.04em; text-transform: uppercase;
padding: 0.15rem 0.45rem; border-radius: 0.25rem; border: 1px solid currentColor;
}
.api-dd-control .p-dropdown-label .get { color: var(--accent-success) !important; background: rgba(47, 179, 106, 0.14); }
.api-dd-control .p-dropdown-label .post { color: var(--accent-warning) !important; background: rgba(224, 168, 0, 0.14); }
.api-dd-control .p-dropdown-label .put { color: var(--brand-secondary) !important; background: rgba(97, 175, 239, 0.14); }
.api-dd-control .p-dropdown-label .delete { color: var(--accent-error) !important; background: rgba(231, 76, 60, 0.14); }
/* category chip */
.api-dd-control .p-dropdown-label .api-cat {
flex: 0 0 auto; width: auto !important; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
padding: 0.12rem 0.4rem; border-radius: 0.25rem; border: 1px solid;
}
.api-dd-control .p-dropdown-label .api-cat[data-cat="SCHEMA"] {
color: #7fb6ec !important; border-color: rgba(127, 182, 236, 0.45); background: rgba(97, 175, 239, 0.12);
}
.api-dd-control .p-dropdown-label .api-cat[data-cat="GEN"] {
color: #3fc99a !important; border-color: rgba(63, 201, 154, 0.45); background: rgba(47, 179, 106, 0.12);
}
.api-dd-control .p-dropdown-label .api-cat:not([data-cat="SCHEMA"]):not([data-cat="GEN"]) {
color: #9aa7b8 !important; border-color: rgba(154, 167, 184, 0.35); background: rgba(154, 167, 184, 0.10);
}
/* name — don't let it crowd the path; path muted and ellipsised */
.api-dd-control .p-dropdown-label > span > span:not([class]):not([style]) {
flex: 0 0 auto; font-weight: 500; white-space: nowrap;
}
.api-dd-control .p-dropdown-label .text-muted {
flex: 1 1 auto; margin: 0 !important;
font-size: 0.8125rem; opacity: 0.8;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
// ===== Timezone dropdown — zone name on the left, offset chip on the right =====
// Styled globally (the panel is appendTo="body", so component styles can't reach it).
.tz-row {
display: flex; align-items: center; justify-content: space-between;
gap: 0.75rem; width: 100%;
}
.tz-row__zone { font-size: 0.875rem; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-row__offset {
flex: 0 0 auto;
font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 600;
color: #6fdcaa;
padding: 1px 7px; border-radius: 10px;
background: rgba(0, 137, 63, 0.14); border: 1px solid rgba(0, 137, 63, 0.30);
}
// roomier items in the timezone panel
.tz-dropdown-panel .p-dropdown-items .p-dropdown-item { padding: 0.45rem 0.85rem !important; }
.tz-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight .tz-row__offset {
color: #ffffff; background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35);
}
html.LIGHT {
.tz-row__offset { color: #1d8a4e; background: rgba(0, 137, 63, 0.10); border-color: rgba(0, 137, 63, 0.28); }
.tz-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight .tz-row__offset {
color: #ffffff; background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.45);
}
}
.p-multiselect-sm {
.p-multiselect-label { padding: 0.25rem 0.5rem; }
}
p-dropdown.text-secondary {
.p-dropdown-label {
color: #7A8288;
}
}
// Paginator footer — brand-navy surface + brand-blue controls (was flat grey).
.p-paginator {
background: #141c29 !important;
border-top: 1px solid rgba(97, 175, 239, 0.18) !important;
color: #9aa6b5 !important;
}
.p-paginator .p-paginator-pages .p-paginator-page { color: #cecece; }
.p-paginator .p-paginator-first, .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last {
color: #9ec3e8 !important;
border-radius: 6px;
}
.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover,
.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
color: #ffffff !important;
background: rgba(12, 83, 164, 0.22) !important;
}
// Active page = brand-blue fill.
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
background: #0C53A4 !important;
color: #ffffff !important;
border-color: #0C53A4 !important;
}
// Rows-per-page dropdown — brand navy + brand-blue border.
.p-paginator .p-dropdown {
background: #16202e !important;
border: 1px solid rgba(97, 175, 239, 0.30) !important;
}
.p-paginator .p-dropdown .p-dropdown-label { color: #d6e2f2 !important; }
.p-paginator .p-dropdown .p-dropdown-trigger { color: #9ec3e8 !important; }
.p-paginator .p-dropdown:not(.p-disabled):hover { border-color: rgba(97, 175, 239, 0.55) !important; }
p-paginator {
.p-paginator .p-dropdown .p-dropdown-label { padding-top: 8px; }
}
.p-button.p-button-text { color: #ffffff; }
// NOTE: the :hover here is superseded by the brand-blue-tint rule below
// (`.p-button.p-button-text:enabled:hover { ... !important }`), which is the
// effective style. Kept harmless; do not rely on this grey value.
.p-button.p-button-text:enabled:hover { background: #606060; color: #ffffff; }
// Text / plain / rounded buttons (e.g. p-table row toggler chevron) — transparent, no maroon fill.
// The theme's base .p-button bg is maroon (#790109); text/plain buttons must stay see-through.
.p-button.p-button-text,
.p-button.p-button-plain,
.p-button.p-button-rounded.p-button-text,
.p-row-toggler.p-button {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border-color: transparent !important;
box-shadow: none !important;
color: #61AFEF !important;
}
.p-button.p-button-text:enabled:hover,
.p-button.p-button-plain:enabled:hover,
.p-row-toggler.p-button:enabled:hover {
background: rgba(97, 175, 239, 0.14) !important;
color: #ffffff !important;
border-color: transparent !important;
}
.p-button.p-button-plain { color: #9fb3cc !important; }
// ===== Calendar / date picker — brand navy panel + brand-blue accents (was grey/maroon) =====
.p-datepicker:not(.p-datepicker-inline),
.p-datepicker {
background: #141c29 !important;
color: #d7dae0 !important;
border: 1px solid rgba(97, 175, 239, 0.20) !important;
border-radius: 10px !important;
// Size the panel to its calendar grid, not the (full-width) input it is
// appended next to — PrimeNG otherwise stretches the panel to match the
// trigger width via an inline min-width.
width: auto !important;
min-width: 0 !important;
max-width: 19rem !important;
}
// ---- Compact sizing (theme-agnostic): the base theme.css cells (2.5rem, font 1rem,
// .5rem padding everywhere) make the panel oversized. Tighten it up. ----
.p-datepicker { padding: 0.25rem !important; }
.p-datepicker .p-datepicker-header { padding: 0.35rem 0.5rem !important; }
.p-datepicker .p-datepicker-header .p-datepicker-prev,
.p-datepicker .p-datepicker-header .p-datepicker-next { width: 1.75rem !important; height: 1.75rem !important; }
.p-datepicker table { font-size: 0.85rem !important; margin: 0.25rem 0 !important; }
.p-datepicker table th { padding: 0.2rem !important; }
.p-datepicker table th > span { width: 2rem !important; height: 1.6rem !important; }
.p-datepicker table td { padding: 0.1rem !important; }
.p-datepicker table td > span { width: 2rem !important; height: 2rem !important; }
.p-datepicker .p-datepicker-buttonbar { padding: 0.35rem 0.5rem !important; }
.p-datepicker .p-datepicker-buttonbar .p-button { padding: 0.25rem 0.5rem !important; font-size: 0.8rem !important; }
.p-datepicker .p-datepicker-header {
background: #1b2636 !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(97, 175, 239, 0.18) !important;
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month,
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year { color: #ffffff !important; }
.p-datepicker .p-datepicker-header .p-datepicker-prev,
.p-datepicker .p-datepicker-header .p-datepicker-next { color: #9fb3cc !important; }
.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
color: #ffffff !important; background: rgba(97, 175, 239, 0.12) !important;
}
.p-datepicker table th > span { color: #9fb3cc !important; }
.p-datepicker table td > span { color: #d7dae0 !important; border-radius: 7px !important; }
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
color: #ffffff !important; background: rgba(97, 175, 239, 0.15) !important;
}
.p-datepicker table td.p-datepicker-today > span {
background: rgba(97, 175, 239, 0.18) !important; color: #ffffff !important;
border: 1px solid rgba(97, 175, 239, 0.35) !important;
}
.p-datepicker table td > span.p-highlight {
background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
color: #ffffff !important;
}
.p-datepicker .p-datepicker-buttonbar { border-top: 1px solid rgba(97, 175, 239, 0.15) !important; }
.p-datepicker .p-datepicker-buttonbar .p-button.p-button-text { color: #61AFEF !important; }
// The calendar input's trigger icon button — brand blue->green (was maroon primary).
.p-calendar .p-datepicker-trigger.p-button {
background-color: #0C53A4 !important;
background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
border: 1px solid rgba(97, 175, 239, 0.45) !important;
color: #ffffff !important;
}
.p-calendar .p-datepicker-trigger.p-button:enabled:hover { filter: brightness(1.08); }
// Calendar input text must match the normal form inputs (0.875rem / .form-control),
// not the theme's larger 1rem .p-inputtext.
.p-calendar .p-inputtext { font-size: 0.875rem !important; }
// ---- Time picker (the HH:MM AM/PM spinner under the calendar) ----
// Base theme.css leaves it with oversized 0.5rem padding everywhere; tighten + brand it.
.p-datepicker .p-timepicker {
padding: 0.4rem 0.5rem !important;
border-top: 1px solid rgba(97, 175, 239, 0.15) !important;
gap: 0.25rem;
}
.p-datepicker .p-timepicker span { font-size: 0.9rem !important; color: #d7dae0 !important; }
.p-datepicker .p-timepicker > div { padding: 0 0.25rem !important; }
.p-datepicker .p-timepicker button {
width: 1.75rem !important; height: 1.75rem !important;
color: #9fb3cc !important; border-radius: 7px !important;
}
.p-datepicker .p-timepicker button:enabled:hover {
color: #ffffff !important; background: rgba(97, 175, 239, 0.15) !important;
}
// ===== Log-table summary chips — brand-tinted by category (was loud red/orange/blue/grey) =====
// Recolour the Bootstrap contextual classes ONLY when applied to a p-chip, keeping the
// per-category distinction but in a calm brand palette. Text/remove-icon kept readable.
.p-chip {
border-radius: 14px;
.p-chip-text { color: inherit; }
.p-chip-remove-icon { color: inherit; opacity: 0.7; }
.p-chip-remove-icon:hover { opacity: 1; }
}
.p-chip.bg-danger { background-color: #0C53A4 !important; color: #ffffff !important; } // instances -> brand blue
.p-chip.bg-warning { background-color: #0a7d6f !important; color: #ffffff !important; } // databases -> teal
.p-chip.bg-info { background-color: #1d8a4e !important; color: #ffffff !important; } // collections -> green
.p-chip.bg-light { background-color: #2a3a4f !important; color: #dbe4f0 !important; } // apis -> slate
.p-chip.bg-danger.text-dark,
.p-chip.bg-warning.text-dark,
.p-chip.bg-info.text-dark { color: #ffffff !important; }
.p-chip.bg-light.text-dark { color: #dbe4f0 !important; }
p-tree {
p-checkbox {
label { margin-bottom: 0.1rem; }
.p-checkbox-label { margin-left: 0; }
}
}
p-table {
p-checkbox {
label { margin-bottom: 0.1rem; }
}
}
// New UI standard: brand navy splitter + brand-tinted gutter/handle (was grey #3b3b3b / #4f4f4f).
.p-splitter {
background: #141c29 !important;
border: 1px solid rgba(97, 175, 239, 0.18) !important;
color: #c6ccd6 !important;
}
.p-splitter .p-splitter-gutter { background: rgba(97, 175, 239, 0.06) !important; }
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(97, 175, 239, 0.35) !important; }
.p-splitter .p-splitter-gutter-resizing { background: linear-gradient(135deg, #0C53A4, #00893F) !important; }
.p-component.p-overlay {
box-shadow: var(--mdc-dialog-container-elevation,0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12));
}
a.p-element.p-ripple.p-tabview-nav-link { border-bottom: none; }
a.p-element.p-ripple.p-tabview-nav-link:hover { text-decoration: none; }
p-checkbox {
label.p-checkbox-label {
margin-bottom: 0;
}
}
.p-button { padding: 0.25rem 0.5rem; }
// brand-tinted dark navy tree background + subtle hover/selected states
.p-tree { background: #141c29; border: none; }
// Tree checkbox nodes (events-tree, custom-api-tree, web-socket-events-tree, etc.) render
// | {{label}} | with no gap — checkbox sits
// flush against the label. Add breathing room without touching per-component markup.
.p-tree .p-treenode-content td:has(> .p-checkbox) {
padding-right: 8px;
}
// Striped rows for p-tree (like the grids/tables) — at EVERY nesting level.
// PrimeNG renders each row as ... > .p-treenode-content. nth-of-type on the
// wrapper alternates within each sibling group (top-level AND nested children).
p-treenode:nth-of-type(even) > .p-treenode > .p-treenode-content:not(.p-highlight) {
background-color: #18222f !important;
}
p-treenode:nth-of-type(odd) > .p-treenode > .p-treenode-content:not(.p-highlight) {
background-color: transparent !important;
}
// Full-specificity selectors to beat theme.css ( .p-tree .p-tree-container .p-treenode .p-treenode-content... )
// Hover (selectable node) — was maroon #610000.
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover,
.p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.22) 0%, rgba(0, 137, 63, 0.14) 100%) !important;
background-color: #1d2a3d !important;
color: #ffffff !important;
}
// Selected node — was maroon #750008.
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
background-color: #16273d !important;
color: #ffffff !important;
box-shadow: none !important;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff !important; }
// Focus ring — was maroon #8a0000.
.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
box-shadow: inset 0 0 0 0.15rem rgba(97, 175, 239, 0.5) !important;
}
// TreeTable (e.g. Custom APIs list): brand-tinted dark navy rows/header,
// brand-blue selection/hover instead of the legacy maroon.
.p-treetable .p-treetable-thead > tr > th {
background: #1b2636;
color: #c6ccd6;
border-color: rgba(97, 175, 239, 0.15);
}
.p-treetable .p-treetable-tbody > tr { background: #141c29; color: #c6ccd6; }
// kill maroon focus rings on tree togglers
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus,
.p-tree .p-tree-toggler:focus { box-shadow: 0 0 0 1px rgba(97, 175, 239, 0.5) !important; }
.p-treetable .p-treetable-tbody > tr.p-highlight,
.p-treetable .p-treetable-tbody > tr.p-selectable-row.p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
background-color: #16273d !important;
color: #ffffff !important;
box-shadow: none !important;
}
.p-treetable .p-treetable-tbody > tr:not(.p-highlight):hover,
.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover,
.p-treetable .p-treetable-tbody > tr.p-selectable-row:not(.p-highlight):hover {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.22) 0%, rgba(0, 137, 63, 0.14) 100%) !important;
background-color: #1d2a3d !important;
color: #ffffff !important;
}
// ---- New UI standard: brand-tint checkboxes, tabs, dropdown panels (was red/grey) ----
// Checkbox: unchecked = dark navy; checked = brand blue->green gradient (was maroon #790109).
.p-checkbox .p-checkbox-box {
background: #16202e !important;
border: 1px solid rgba(97, 175, 239, 0.30) !important;
}
.p-checkbox .p-checkbox-box.p-highlight,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover,
.p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
border-color: rgba(97, 175, 239, 0.6) !important;
background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
background-color: #0C53A4 !important;
color: #ffffff !important;
}
// Kill the theme's dark-red focus ring (#8a0000) — use a brand-blue ring +
// hover border instead (matches the datatable/tab focus treatment).
.p-checkbox .p-checkbox-box.p-focus {
outline: 0 none !important;
box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.35) !important;
border-color: rgba(97, 175, 239, 0.6) !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
border-color: rgba(97, 175, 239, 0.6) !important;
}
// Dropdown overlay panel + header + items (was grey #3b3b3b / maroon selection).
.p-dropdown-panel { background: #131c29 !important; border: 1px solid rgba(97, 175, 239, 0.20) !important; }
.p-dropdown-panel .p-dropdown-header { background: #1b2636 !important; border-bottom: 1px solid rgba(97, 175, 239, 0.15) !important; }
// Dropdown filter (search) input — brand navy, brand-blue border + focus (was grey + red focus).
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
background-color: #16202e !important;
background-image: linear-gradient(160deg, #1c2a3d 0%, #141e2c 100%) !important;
border: 1px solid rgba(97, 175, 239, 0.30) !important;
color: #d7dae0 !important;
}
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter:focus,
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter:enabled:focus {
border-color: rgba(97, 175, 239, 0.7) !important;
box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.30) !important;
outline: 0 none !important;
}
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { color: #61AFEF !important; }
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { background: #1b2636 !important; }
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
background-color: #16273d !important;
color: #ffffff !important;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.22) 0%, rgba(0, 137, 63, 0.14) 100%) !important;
background-color: #1d2a3d !important;
color: #ffffff !important;
}
// Tabview nav (Header / params tabs): dark navy, selected = brand-tinted with brand-blue accent.
.p-tabview .p-tabview-nav li .p-tabview-nav-link {
background: #131c29 !important;
border-color: #1f2c3e #1f2c3e rgba(97, 175, 239, 0.25) #1f2c3e !important;
color: #9aa6b5 !important;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #1d2a3d !important;
border-color: rgba(97, 175, 239, 0.25) !important;
color: #d7dae0 !important;
}
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
background-image: linear-gradient(180deg, rgba(12, 83, 164, 0.30) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
background-color: #16273d !important;
border-color: rgba(97, 175, 239, 0.35) rgba(97, 175, 239, 0.35) transparent rgba(97, 175, 239, 0.35) !important;
color: #ffffff !important;
//box-shadow: inset 0 2px 0 #61AFEF !important;
}
.p-tabview .p-tabview-nav-btn.p-link { background: #131c29 !important; color: #9aa6b5 !important; }
// ===== Radio button — unchecked dark navy; checked = brand blue dot (was maroon #790109). =====
.p-radiobutton .p-radiobutton-box {
background: #16202e !important;
border: 1px solid rgba(97, 175, 239, 0.30) !important;
}
.p-radiobutton .p-radiobutton-box.p-highlight,
.p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box.p-highlight:hover,
.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
border-color: rgba(97, 175, 239, 0.65) !important;
background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
background-color: #0C53A4 !important;
}
.p-radiobutton .p-radiobutton-box .p-radiobutton-icon { background-color: #ffffff !important; }
.p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box:not(.p-highlight):hover { border-color: rgba(97, 175, 239, 0.5) !important; }
.p-radiobutton .p-radiobutton-box:focus, .p-radiobutton .p-radiobutton-box.p-focus {
box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.30) !important; outline: 0 none !important;
}
// ===== MultiSelect — match the dropdown treatment (control, panel, items, checkboxes). =====
.p-multiselect {
background: #141c29 !important;
border: 1px solid rgba(97, 175, 239, 0.30) !important;
border-radius: 6px;
}
.p-multiselect:not(.p-disabled):hover { border-color: rgba(97, 175, 239, 0.5) !important; }
.p-multiselect:not(.p-disabled).p-focus { border-color: rgba(97, 175, 239, 0.85) !important; box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.25) !important; }
.p-multiselect .p-multiselect-label { color: #d7dae0 !important; }
.p-multiselect .p-multiselect-trigger { color: #9fb3cc !important; }
.p-multiselect-panel { background: #131c29 !important; border: 1px solid rgba(97, 175, 239, 0.20) !important; }
.p-multiselect-panel .p-multiselect-header { background: #1b2636 !important; border-bottom: 1px solid rgba(97, 175, 239, 0.15) !important; }
.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
background: #141c29 !important; border: 1px solid rgba(97, 175, 239, 0.35) !important; color: #d7dae0 !important;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item { color: #d7dae0 !important; }
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
background: rgba(97, 175, 239, 0.12) !important; color: #ffffff !important;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
background-color: #16273d !important; color: #ffffff !important;
}
// chips inside the multiselect label
.p-multiselect .p-multiselect-token {
background: rgba(12, 83, 164, 0.30) !important; color: #e7edf5 !important; border: 1px solid rgba(97, 175, 239, 0.30);
}
// ===== AutoComplete — control + panel + selection (was grey/maroon). =====
.p-autocomplete .p-inputtext { background: #141c29 !important; border: 1px solid rgba(97, 175, 239, 0.30) !important; color: #d7dae0 !important; }
.p-autocomplete .p-inputtext:enabled:focus { border-color: rgba(97, 175, 239, 0.85) !important; box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.25) !important; }
.p-autocomplete-panel { background: #131c29 !important; border: 1px solid rgba(97, 175, 239, 0.20) !important; }
.p-autocomplete-panel .p-autocomplete-item { color: #d7dae0 !important; }
.p-autocomplete-panel .p-autocomplete-item:not(.p-highlight):hover { background: rgba(97, 175, 239, 0.12) !important; color: #ffffff !important; }
.p-autocomplete-panel .p-autocomplete-item.p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
background-color: #16273d !important; color: #ffffff !important;
}
// ===== ProgressBar — brand blue->green gradient fill (was flat default). =====
.p-progressbar { background: #16202e !important; border: 1px solid rgba(97, 175, 239, 0.18) !important; border-radius: 6px; }
.p-progressbar .p-progressbar-value {
background-color: #0C53A4 !important;
background-image: linear-gradient(90deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
}
.p-progressbar .p-progressbar-label { color: #ffffff !important; font-weight: 600; }
// ===== FileUpload — brand buttons + brand-navy content (was grey + maroon primary). =====
.p-fileupload .p-fileupload-buttonbar {
background: #1b2636 !important; border: 1px solid rgba(97, 175, 239, 0.18) !important;
border-bottom: 0 !important;
}
.p-fileupload .p-fileupload-content { background: #141c29 !important; border: 1px solid rgba(97, 175, 239, 0.18) !important; color: #d7dae0 !important; }
.p-fileupload .p-fileupload-buttonbar .p-button {
background-color: #0C53A4 !important;
background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
border: 1px solid rgba(97, 175, 239, 0.45) !important; color: #ffffff !important;
}
.p-fileupload .p-fileupload-buttonbar .p-button:enabled:hover { filter: brightness(1.08); }
.p-fileupload .p-fileupload-row > div { color: #d7dae0 !important; }
// ===== Column filter (inline) — its input follows the brand inputtext; menu/overlay = dropdown panel. =====
.p-columnfilter .p-column-filter-menu-button,
.p-columnfilter .p-column-filter-clear-button { color: #9fb3cc !important; }
.p-columnfilter .p-column-filter-menu-button:hover { background: rgba(97, 175, 239, 0.12) !important; color: #ffffff !important; }
.p-column-filter-overlay { background: #131c29 !important; border: 1px solid rgba(97, 175, 239, 0.20) !important; color: #d7dae0 !important; }
.p-column-filter-overlay .p-column-filter-row-item:not(.p-highlight):hover { background: rgba(97, 175, 239, 0.12) !important; }
.p-column-filter-overlay .p-column-filter-row-item.p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important; color: #ffffff !important;
}
// ===== Sortable column — kill the theme's maroon hover/sorted/focus states,
// use brand-blue tints instead. =====
.p-datatable .p-sortable-column:not(.p-highlight):hover,
.p-treetable .p-sortable-column:not(.p-highlight):hover {
background: rgba(12, 83, 164, 0.22) !important;
color: #ffffff !important;
}
.p-datatable .p-sortable-column.p-highlight,
.p-treetable .p-sortable-column.p-highlight {
background: rgba(12, 83, 164, 0.30) !important;
color: #ffffff !important;
}
.p-datatable .p-sortable-column.p-highlight:hover,
.p-treetable .p-sortable-column.p-highlight:hover {
background: rgba(12, 83, 164, 0.38) !important;
}
.p-datatable .p-sortable-column:focus,
.p-treetable .p-sortable-column:focus {
box-shadow: inset 0 0 0 0.15rem rgba(97, 175, 239, 0.35) !important;
outline: 0 none !important;
}
// ===== Sort icon — neutral, brand-blue when active (was theme default). =====
.p-sortable-column .p-sortable-column-icon { color: #7f93ad !important; }
.p-sortable-column.p-highlight .p-sortable-column-icon,
.p-sortable-column .p-sortable-column-icon.pi-sort-amount-up-alt,
.p-sortable-column .p-sortable-column-icon.pi-sort-amount-down { color: #61AFEF !important; }
// =====================================================================
// LIGHT THEME — PrimeNG component overrides (white surfaces + brand accents).
// =====================================================================
html.LIGHT {
// Base text color for primeng components (theme.css defaults them to grey #b0b0b0 — too faint on white).
.p-component, .p-inputtext, .p-dropdown, .p-dropdown-label, .p-dropdown-item,
.p-treenode-content, .p-datatable, .p-treetable, .p-multiselect, .p-listbox,
.p-checkbox-label, .p-tabview, .p-paginator, .p-tree { color: #2b3340; }
// Paginator footer — light surface + brand-blue controls (was flat grey).
.p-paginator {
background: #f3f7fc !important;
border-top: 1px solid rgba(12, 83, 164, 0.18) !important;
color: #4a5563 !important;
}
.p-paginator .p-paginator-first, .p-paginator .p-paginator-prev,
.p-paginator .p-paginator-next, .p-paginator .p-paginator-last { color: #0C53A4 !important; }
.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover,
.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
color: #0C53A4 !important;
background: rgba(12, 83, 164, 0.10) !important;
}
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
background: #0C53A4 !important;
color: #ffffff !important;
border-color: #0C53A4 !important;
}
.p-paginator .p-dropdown {
background: #ffffff !important;
border: 1px solid rgba(12, 83, 164, 0.25) !important;
}
.p-paginator .p-dropdown .p-dropdown-label { color: #2b3340 !important; }
.p-paginator .p-dropdown .p-dropdown-trigger { color: #0C53A4 !important; }
.p-paginator .p-dropdown:not(.p-disabled):hover { border-color: rgba(12, 83, 164, 0.5) !important; }
.p-component .p-disabled, .p-disabled { color: #9aa3b0; }
// ===== Calendar / date picker — light brand panel (was grey/maroon) =====
.p-datepicker:not(.p-datepicker-inline),
.p-datepicker {
background: #ffffff !important;
color: #2b3340 !important;
border: 1px solid rgba(12, 83, 164, 0.20) !important;
}
.p-datepicker .p-datepicker-header {
background: #f3f7fc !important;
color: #14233a !important;
border-bottom: 1px solid rgba(12, 83, 164, 0.15) !important;
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month,
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year { color: #14233a !important; }
.p-datepicker .p-datepicker-header .p-datepicker-prev,
.p-datepicker .p-datepicker-header .p-datepicker-next { color: #5a6a82 !important; }
.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
color: #0C53A4 !important; background: rgba(12, 83, 164, 0.08) !important;
}
.p-datepicker table th > span { color: #5a6a82 !important; }
.p-datepicker table td > span { color: #2b3340 !important; }
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
color: #14233a !important; background: rgba(12, 83, 164, 0.08) !important;
}
.p-datepicker table td.p-datepicker-today > span {
background: rgba(12, 83, 164, 0.10) !important; color: #0C53A4 !important;
border: 1px solid rgba(12, 83, 164, 0.30) !important;
}
.p-datepicker table td > span.p-highlight {
background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
color: #ffffff !important;
}
.p-datepicker .p-datepicker-buttonbar { border-top: 1px solid rgba(12, 83, 164, 0.12) !important; }
.p-datepicker .p-datepicker-buttonbar .p-button.p-button-text { color: #0C53A4 !important; }
.p-calendar .p-datepicker-trigger.p-button {
background-color: #0C53A4 !important;
background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
border: 1px solid rgba(12, 83, 164, 0.45) !important;
color: #ffffff !important;
}
// Time picker (light) — tighter padding + brand accents on white.
.p-datepicker .p-timepicker {
border-top: 1px solid rgba(12, 83, 164, 0.12) !important;
}
.p-datepicker .p-timepicker span { color: #14233a !important; }
.p-datepicker .p-timepicker button { color: #5a6a82 !important; }
.p-datepicker .p-timepicker button:enabled:hover {
color: #0C53A4 !important; background: rgba(12, 83, 164, 0.08) !important;
}
// ===== Log-table summary chips — light brand-tinted by category =====
.p-chip.bg-danger { background-color: #0C53A4 !important; color: #ffffff !important; } // instances
.p-chip.bg-warning { background-color: #0a7d6f !important; color: #ffffff !important; } // databases
.p-chip.bg-info { background-color: #1d8a4e !important; color: #ffffff !important; } // collections
.p-chip.bg-light { background-color: #e7eef7 !important; color: #243446 !important; border: 1px solid rgba(12, 83, 164, 0.18); } // apis
.p-chip.bg-danger.text-dark,
.p-chip.bg-warning.text-dark,
.p-chip.bg-info.text-dark { color: #ffffff !important; }
.p-chip.bg-light.text-dark { color: #243446 !important; }
// Grids / tables
.p-datatable { background: #ffffff; }
// Caption/header area — light brand tint instead of the legacy dark grey from theme.css,
// so a dropdown inside the caption no longer sits on a dark band (double-border look).
.p-datatable .p-datatable-header {
background: #f3f7fc;
color: #1b2330;
border: 0 none;
border-bottom: 1px solid rgba(12, 83, 164, 0.15);
}
.p-datatable .p-datatable-thead > tr > th { background-color: #eef3fa !important; color: #1b2330; border-bottom: 1px solid rgba(12, 83, 164, 0.15); }
.p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #2b3340; }
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background-color: #f3f7fc; }
.p-datatable .p-datatable-tbody > tr > td { border-top: 0.5px solid rgba(12, 83, 164, 0.10); }
.p-datatable .p-datatable-tbody > tr.p-highlight,
.p-datatable .p-datatable-tbody > tr.p-selectable-row.p-highlight,
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight,
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd).p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
background-color: #dbe8fa !important; color: #0b2e5c !important; box-shadow: none !important;
}
.p-datatable .p-datatable-tbody > tr:not(.p-highlight):hover,
.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.08) 0%, rgba(0, 137, 63, 0.05) 100%) !important;
background-color: #eef4fb !important; color: #14233a !important;
}
.p-datatable .p-datatable-tbody > tr:focus { outline: 0.15rem solid rgba(12, 83, 164, 0.4) !important; outline-offset: -0.15rem !important; }
// TreeTable
.p-treetable .p-treetable-thead > tr > th { background: #eef3fa !important; color: #1b2330; border-color: rgba(12,83,164,0.15); }
.p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #2b3340; }
.p-treetable .p-treetable-tbody > tr.p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
background-color: #dbe8fa !important; color: #0b2e5c !important; box-shadow: none !important;
}
.p-treetable .p-treetable-tbody > tr:not(.p-highlight):hover { background-color: #eef4fb !important; color: #14233a !important; }
// Tree
.p-tree { background: #ffffff; color: #2b3340; }
.p-tree .p-treenode-content { color: #2b3340 !important; }
p-treenode:nth-of-type(even) > .p-treenode > .p-treenode-content:not(.p-highlight) { background-color: #f3f7fc !important; }
p-treenode:nth-of-type(odd) > .p-treenode > .p-treenode-content:not(.p-highlight) { background-color: transparent !important; }
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover,
.p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover {
background-color: #eef4fb !important; color: #14233a !important;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
background-color: #dbe8fa !important; color: #0b2e5c !important; box-shadow: none !important;
}
// Dropdown control + panel
.p-dropdown, .p-dropdown.p-input-filled, .p-input-filled .p-dropdown,
.p-dropdown.p-input-filled:not(.p-disabled):hover,
.p-input-filled .p-dropdown:not(.p-disabled):hover,
.p-dropdown.p-input-filled:not(.p-disabled).p-focus,
.p-input-filled .p-dropdown:not(.p-disabled).p-focus,
.p-dropdown:not(.p-disabled).p-focus {
background: #ffffff !important; background-image: none !important;
border: 1px solid rgba(12, 83, 164, 0.25) !important;
color: #2b3340 !important;
}
.p-dropdown .p-dropdown-label { color: #2b3340 !important; }
// Lighter overlay shadow in light mode (the global Material-elevation
// shadow was too heavy a halo on the white panels).
.p-component.p-overlay {
box-shadow: 0 6px 18px rgba(12, 30, 60, 0.12) !important;
}
.p-dropdown-panel { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.20) !important; }
.p-dropdown-panel .p-dropdown-header { background: #eef3fa !important; }
.p-dropdown-panel .p-dropdown-items .p-dropdown-item { color: #2b3340; }
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.16) 0%, rgba(0, 137, 63, 0.10) 100%) !important;
background-color: #eaf1fb !important; color: #14233a !important;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
background-color: #eef4fb !important; color: #14233a !important;
}
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
background: #ffffff !important; background-image: none !important;
border: 1px solid rgba(12, 83, 164, 0.25) !important; color: #2b3340 !important;
}
// p-inputtext
.p-inputtext:not(.p-dropdown-label) {
background: #ffffff !important; background-image: none !important;
border: 1px solid rgba(12, 83, 164, 0.25) !important; color: #2b3340 !important;
}
.p-inputtext:not(.p-dropdown-label):enabled:focus {
border-color: rgba(12, 83, 164, 0.6) !important; box-shadow: 0 0 0 0.15rem rgba(12, 83, 164, 0.18) !important;
}
// Checkbox — white box + brand-blue border; brand gradient + white check when selected.
.p-checkbox .p-checkbox-box {
background: #ffffff !important;
border: 1px solid rgba(12, 83, 164, 0.35) !important;
color: #ffffff !important;
}
.p-checkbox .p-checkbox-box.p-highlight,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover,
.p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
background-color: #0C53A4 !important;
border-color: rgba(12, 83, 164, 0.9) !important;
}
.p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon { color: #ffffff !important; }
// Brand-blue focus ring (not the theme's dark-red) + hover border.
.p-checkbox .p-checkbox-box.p-focus {
outline: 0 none !important;
box-shadow: 0 0 0 0.15rem rgba(12, 83, 164, 0.30) !important;
border-color: rgba(12, 83, 164, 0.6) !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
border-color: rgba(12, 83, 164, 0.6) !important;
}
// InputSwitch (light) — light track + brand-blue knob (off), brand gradient + white knob (on).
.p-inputswitch .p-inputswitch-slider { background: #d4dce6 !important; border: 1px solid rgba(12, 83, 164, 0.25); }
.p-inputswitch .p-inputswitch-slider::before { background: #ffffff !important; }
.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #c6d1de !important; }
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important; background-color: #0C53A4 !important;
}
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before { background: #ffffff !important; }
// Tabview — consistent brand-blue borders (match dropdown/input @ 0.25 / 0.18).
.p-tabview .p-tabview-nav { border-color: rgba(12, 83, 164, 0.18) !important; }
.p-tabview .p-tabview-nav li .p-tabview-nav-link {
background: #f3f7fc !important; color: #4a5563 !important;
border: 1px solid rgba(12, 83, 164, 0.18) !important;
border-bottom-color: rgba(12, 83, 164, 0.18) !important;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #e6eef9 !important; border-color: rgba(12, 83, 164, 0.30) !important; color: #0C53A4 !important;
}
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
background-image: linear-gradient(180deg, rgba(12,83,164,0.14) 0%, rgba(0,137,63,0.08) 100%) !important;
background-color: #eaf1fb !important; color: #0C53A4 !important;
border: 1px solid rgba(12, 83, 164, 0.30) !important;
border-bottom-color: transparent !important;
//box-shadow: inset 0 2px 0 #0C53A4 !important;
}
// dropdown trigger seam: keep the trigger border-less so the control reads as one bordered box
.p-dropdown .p-dropdown-trigger { border: 0 none !important; }
// Splitter
.p-splitter { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.18) !important; }
// Tooltip
.p-tooltip .p-tooltip-text { background-color: #1b2636 !important; background-image: linear-gradient(135deg, #1b3553 0%, #133024 100%) !important; color: #fff !important; }
// Toast (light glass) — white glass + per-severity accent gradient + colored icon/progress bar.
.p-toast .p-toast-message {
background: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(12, 83, 164, 0.22) !important;
border-left-width: 4px !important;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(12, 30, 60, 0.14) !important;
color: #2b3340 !important;
}
.p-toast .p-toast-summary { color: #14233a !important; }
.p-toast .p-toast-detail { color: #3a4452 !important; }
.p-toast .p-toast-icon-close { color: #4a5563 !important; }
// per-severity: left accent border + icon + progress bar
.p-toast .p-toast-message-info { border-left-color: #0C53A4 !important; background-image: linear-gradient(135deg, rgba(12,83,164,0.10) 0%, rgba(255,255,255,0) 60%) !important; }
.p-toast .p-toast-message-info .p-toast-message-icon { color: #0C53A4 !important; }
.p-toast .p-toast-message-success { border-left-color: #00893F !important; background-image: linear-gradient(135deg, rgba(0,137,63,0.10) 0%, rgba(255,255,255,0) 60%) !important; }
.p-toast .p-toast-message-success .p-toast-message-icon { color: #00893F !important; }
.p-toast .p-toast-message-warn { border-left-color: #d99a07 !important; background-image: linear-gradient(135deg, rgba(217,154,7,0.12) 0%, rgba(255,255,255,0) 60%) !important; }
.p-toast .p-toast-message-warn .p-toast-message-icon { color: #d99a07 !important; }
.p-toast .p-toast-message-error { border-left-color: #DC2626 !important; background-image: linear-gradient(135deg, rgba(220,38,38,0.10) 0%, rgba(255,255,255,0) 60%) !important; }
.p-toast .p-toast-message-error .p-toast-message-icon { color: #DC2626 !important; }
// Confirm dialog
.p-dialog .p-dialog-content, .p-dialog .p-dialog-footer { background: #ffffff !important; color: #2b3340 !important; }
.p-dialog .p-dialog-footer { border-top: 1px solid rgba(12, 83, 164, 0.15) !important; }
.p-dialog .p-dialog-header { background-color: #eef3fa !important; background-image: linear-gradient(90deg, rgba(12,83,164,0.12) 0%, rgba(0,137,63,0.08) 100%) !important; color: #14233a !important; border-bottom: 1px solid rgba(12,83,164,0.18) !important; }
.p-confirm-dialog-reject {
background: #e3eaf3 !important;
background-image: linear-gradient(180deg, #eef2f7 0%, #dde5ef 100%) !important;
color: #1b2330 !important;
border: 1px solid rgba(12, 83, 164, 0.35) !important;
}
.p-confirm-dialog-reject:hover, .p-confirm-dialog-reject:focus {
background-image: linear-gradient(180deg, #e3eaf3 0%, #d2ddec 100%) !important;
border-color: rgba(12, 83, 164, 0.5) !important;
color: #14233a !important;
}
// Kill the theme's red focus ring on the auto-focused reject button (light).
.p-confirm-dialog-reject:focus, .p-confirm-dialog-reject.p-focus, .p-confirm-dialog-reject:enabled:focus {
box-shadow: 0 0 0 0.15rem rgba(12, 83, 164, 0.20) !important;
outline: 0 none !important;
}
// No-button label + icon must be dark/visible on the light neutral bg (high specificity to beat primeng/white-flip).
.p-confirm-dialog .p-confirm-dialog-reject.p-button,
.p-confirm-dialog .p-confirm-dialog-reject .p-button-label,
.p-confirm-dialog .p-confirm-dialog-reject .p-button-icon,
.p-confirm-dialog .p-confirm-dialog-reject span.p-button-icon,
.p-confirm-dialog .p-confirm-dialog-reject i,
button.p-confirm-dialog-reject .p-button-icon,
button.p-confirm-dialog-reject i { color: #1b2330 !important; }
.p-confirm-dialog-accept { background-color: #0C53A4 !important; background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important; color: #fff !important; border: 1px solid rgba(12,83,164,0.45) !important; }
// Warning icon — deeper amber for contrast on the white dialog.
.p-confirm-dialog .p-confirm-dialog-icon { color: #d99a07 !important; filter: drop-shadow(0 0 5px rgba(217, 154, 7, 0.35)); }
// progress spinner overlay
// Light loading overlay — flat translucent white (no gradient). The logo
// rocket spinner (defined globally above) carries over.
p-progressSpinner {
background-color: rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
}
// ===== Radio button (light) — white box, brand-blue checked dot. =====
.p-radiobutton .p-radiobutton-box { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.30) !important; }
.p-radiobutton .p-radiobutton-box.p-highlight,
.p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box.p-highlight:hover {
border-color: rgba(12, 83, 164, 0.6) !important;
background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
background-color: #0C53A4 !important;
}
.p-radiobutton .p-radiobutton-box .p-radiobutton-icon { background-color: #ffffff !important; }
.p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box:not(.p-highlight):hover { border-color: rgba(12, 83, 164, 0.5) !important; }
// ===== MultiSelect (light) — white control + panel, brand selection. =====
.p-multiselect { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.30) !important; }
.p-multiselect:not(.p-disabled):hover { border-color: rgba(12, 83, 164, 0.5) !important; }
.p-multiselect:not(.p-disabled).p-focus { border-color: rgba(12, 83, 164, 0.7) !important; box-shadow: 0 0 0 0.15rem rgba(12, 83, 164, 0.18) !important; }
.p-multiselect .p-multiselect-label { color: #2b3340 !important; }
.p-multiselect .p-multiselect-trigger { color: #5a6a82 !important; }
.p-multiselect-panel { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.20) !important; }
.p-multiselect-panel .p-multiselect-header { background: #eef3fa !important; border-bottom: 1px solid rgba(12, 83, 164, 0.15) !important; }
.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.30) !important; color: #2b3340 !important; }
.p-multiselect-panel .p-multiselect-items .p-multiselect-item { color: #2b3340 !important; }
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { background: rgba(12, 83, 164, 0.08) !important; color: #14233a !important; }
.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
background-color: #dbe8fa !important; color: #0b2e5c !important;
}
.p-multiselect .p-multiselect-token { background: rgba(12, 83, 164, 0.12) !important; color: #14233a !important; border: 1px solid rgba(12, 83, 164, 0.25); }
// ===== AutoComplete (light). =====
.p-autocomplete .p-inputtext { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.30) !important; color: #2b3340 !important; }
.p-autocomplete .p-inputtext:enabled:focus { border-color: rgba(12, 83, 164, 0.7) !important; box-shadow: 0 0 0 0.15rem rgba(12, 83, 164, 0.18) !important; }
.p-autocomplete-panel { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.20) !important; }
.p-autocomplete-panel .p-autocomplete-item { color: #2b3340 !important; }
.p-autocomplete-panel .p-autocomplete-item:not(.p-highlight):hover { background: rgba(12, 83, 164, 0.08) !important; color: #14233a !important; }
.p-autocomplete-panel .p-autocomplete-item.p-highlight {
background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
background-color: #dbe8fa !important; color: #0b2e5c !important;
}
// ===== ProgressBar (light) — light track, brand gradient fill. =====
.p-progressbar { background: #e6eef8 !important; border: 1px solid rgba(12, 83, 164, 0.15) !important; }
.p-progressbar .p-progressbar-value {
background-color: #0C53A4 !important;
background-image: linear-gradient(90deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
}
.p-progressbar .p-progressbar-label { color: #ffffff !important; }
// ===== FileUpload (light). =====
.p-fileupload .p-fileupload-buttonbar { border-bottom: 0 !important; }
.p-fileupload .p-fileupload-content { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.15) !important; color: #2b3340 !important; }
.p-fileupload .p-fileupload-buttonbar .p-button {
background-color: #0C53A4 !important;
background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
border: 1px solid rgba(12, 83, 164, 0.45) !important; color: #ffffff !important;
}
.p-fileupload .p-fileupload-row > div { color: #2b3340 !important; }
// ===== Column filter (light). =====
.p-columnfilter .p-column-filter-menu-button, .p-columnfilter .p-column-filter-clear-button { color: #5a6a82 !important; }
.p-columnfilter .p-column-filter-menu-button:hover { background: rgba(12, 83, 164, 0.08) !important; color: #0C53A4 !important; }
.p-column-filter-overlay { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.20) !important; color: #2b3340 !important; }
// ===== Sortable column (light) — brand-blue tints, no maroon. =====
.p-datatable .p-sortable-column:not(.p-highlight):hover,
.p-treetable .p-sortable-column:not(.p-highlight):hover {
background: rgba(12, 83, 164, 0.10) !important;
color: #14233a !important;
}
.p-datatable .p-sortable-column.p-highlight,
.p-treetable .p-sortable-column.p-highlight {
background: rgba(12, 83, 164, 0.14) !important;
color: #0C53A4 !important;
}
.p-datatable .p-sortable-column.p-highlight:hover,
.p-treetable .p-sortable-column.p-highlight:hover {
background: rgba(12, 83, 164, 0.20) !important;
}
.p-datatable .p-sortable-column:focus,
.p-treetable .p-sortable-column:focus {
box-shadow: inset 0 0 0 0.15rem rgba(12, 83, 164, 0.30) !important;
outline: 0 none !important;
}
// ===== Sort icon (light). =====
.p-sortable-column .p-sortable-column-icon { color: #7488a3 !important; }
.p-sortable-column.p-highlight .p-sortable-column-icon { color: #0C53A4 !important; }
// ===== Text/plain/rounded buttons (row toggler) — transparent, brand-blue (light). =====
.p-button.p-button-text,
.p-button.p-button-plain,
.p-button.p-button-rounded.p-button-text,
.p-row-toggler.p-button {
background: transparent !important; background-image: none !important;
border-color: transparent !important; box-shadow: none !important; color: #0C53A4 !important;
}
.p-button.p-button-text:enabled:hover,
.p-button.p-button-plain:enabled:hover,
.p-row-toggler.p-button:enabled:hover {
background: rgba(12, 83, 164, 0.10) !important; color: #0C53A4 !important;
}
.p-button.p-button-plain { color: #5a6a82 !important; }
// ===== API dropdown popup (light) — softer frame + lighter badge tints =====
.api-dd-panel {
box-shadow: 0 10px 28px rgba(12, 30, 60, 0.14) !important;
border: 1px solid rgba(12, 83, 164, 0.18) !important;
}
.api-dd-panel .p-dropdown-items .p-dropdown-item .get { background: rgba(38, 180, 127, 0.12); }
.api-dd-panel .p-dropdown-items .p-dropdown-item .post { background: rgba(255, 180, 0, 0.14); }
.api-dd-panel .p-dropdown-items .p-dropdown-item .put { background: rgba(9, 123, 237, 0.12); }
.api-dd-panel .p-dropdown-items .p-dropdown-item .delete { background: rgba(237, 75, 72, 0.12); }
.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .get,
.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .get { background: rgba(38, 180, 127, 0.18); }
.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .post,
.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .post { background: rgba(255, 180, 0, 0.20); }
.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .put,
.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .put { background: rgba(9, 123, 237, 0.18); }
.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .delete,
.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .delete { background: rgba(237, 75, 72, 0.18); }
// category chips — darker text on the white panel
.api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat[data-cat="SCHEMA"] {
color: #0C53A4; border-color: rgba(12, 83, 164, 0.35); background: rgba(12, 83, 164, 0.08);
}
.api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat[data-cat="GEN"] {
color: #00893F; border-color: rgba(0, 137, 63, 0.35); background: rgba(0, 137, 63, 0.08);
}
.api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat:not([data-cat="SCHEMA"]):not([data-cat="GEN"]) {
color: #5a6a82; border-color: rgba(90, 106, 130, 0.30); background: rgba(90, 106, 130, 0.08);
}
// selected control (closed dropdown label) — chips + badges on the white control
.api-dd-control .p-dropdown-label .get { color: #00893F !important; }
.api-dd-control .p-dropdown-label .post { color: #c98a00 !important; }
.api-dd-control .p-dropdown-label .put { color: #0C53A4 !important; }
.api-dd-control .p-dropdown-label .delete { color: #d9534f !important; }
.api-dd-control .p-dropdown-label .api-cat[data-cat="SCHEMA"] {
color: #0C53A4 !important; border-color: rgba(12, 83, 164, 0.35); background: rgba(12, 83, 164, 0.08);
}
.api-dd-control .p-dropdown-label .api-cat[data-cat="GEN"] {
color: #00893F !important; border-color: rgba(0, 137, 63, 0.35); background: rgba(0, 137, 63, 0.08);
}
.api-dd-control .p-dropdown-label .api-cat:not([data-cat="SCHEMA"]):not([data-cat="GEN"]) {
color: #5a6a82 !important; border-color: rgba(90, 106, 130, 0.30); background: rgba(90, 106, 130, 0.08);
}
}