/* ========================================================================== NMS THEME — Glass & Aurora The NMS design system (2018) palette — brand blue #1964AA, cyan #009FE3, warm amber — rendered as a light, translucent surface language: frosted glass panels floating over a slowly drifting aurora, gloss highlights on every raised edge, brand-tinted glow instead of grey shadow. Typography: Merriweather Sans for headings and UI chrome, Open Sans for content at 150% line-height (W3C accessibility minimum). Light mode. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); /* ---------- DESIGN TOKENS ---------- */ /* Declared on , not on the themed : the page background and the aurora layer are painted on , and custom properties only inherit down. */ html:has(.theme-nms) { /* Brand — straight from the NMS design system */ --nms-blue: #1964AA; --nms-blue-deep: #0C3255; --nms-blue-mid: #114677; --nms-blue-soft: #E8EFF7; --nms-cyan: #009FE3; --nms-cyan-soft: #E5F5FC; --nms-amber: #E8852E; --nms-green: #66B536; --nms-red: #D00000; /* One fill for every saturated control. A cyan-to-blue ramp reads as cyan on a badge and as blue on a button, and the same token looking like two different colours is what made the chrome feel arbitrary — so the ramp stays anchored on the brand blue and only leans towards cyan. */ --nms-brand: linear-gradient(135deg, #2E8BD0 0%, var(--nms-blue) 70%); --nms-brand-hover: linear-gradient(135deg, #2681C7 0%, var(--nms-blue-mid) 75%); /* Surfaces — four tiers, and which tier a thing belongs to is decided by what sits behind it, not by what it is. glass — chrome with nothing but the aurora behind it: the nav rail. frost — chrome that live content scrolls underneath: the top bar, the chat composer, the filter panel's reset strip. Translucent, but backed by a real backdrop blur so what passes behind is a wash, never readable text. panel — content cards, grids, chat bubbles. Nothing but the aurora sits behind them, and a blurred smooth gradient is the same gradient, so these take the translucency and the gloss sweep and skip the backdrop filter entirely — which also keeps them from becoming containing blocks. overlay — menus, popovers, tooltips, calendars, modals, offcanvases: every one of them covers arbitrary live content, so every one of them is opaque and takes its gloss from light instead. */ --nms-bg: #D3E2F3; --nms-surface: #FFFFFF; --nms-glass: rgba(255, 255, 255, 0.68); --nms-glass-strong: rgba(255, 255, 255, 0.88); --nms-glass-border: rgba(255, 255, 255, 0.85); --nms-panel: rgba(255, 255, 255, 0.70); /* Each panel's own top-left highlight. Without it a row of translucent cards reads as randomly tinted rectangles; with it every card is lit from the same direction and the tint underneath becomes the glass, not the accident. */ --nms-gloss: linear-gradient(158deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.12) 42%, rgba(255, 255, 255, 0) 70%); --nms-overlay: #FFFFFF; /* The opaque counterpart of --nms-panel, for the surfaces that cover live content: modals, offcanvases, side columns. Faintly blue so they still belong to the field. */ --nms-sheet: #F6F9FD; --nms-hairline: rgba(12, 50, 85, 0.10); --nms-hairline-strong: rgba(12, 50, 85, 0.16); --nms-blur: blur(18px) saturate(170%); --nms-blur-soft: blur(10px) saturate(140%); /* Text */ --nms-text: #253444; --nms-text-muted: #606B7A; --nms-text-subtle: #8999AF; /* Elevation — shadows carry a blue cast so they belong to the palette */ --nms-shadow-sm: 0 1px 2px rgba(12, 50, 85, 0.05), 0 1px 3px rgba(12, 50, 85, 0.06); --nms-shadow: 0 8px 28px rgba(12, 50, 85, 0.08), 0 2px 6px rgba(12, 50, 85, 0.04); --nms-shadow-lg: 0 24px 60px rgba(12, 50, 85, 0.18), 0 4px 12px rgba(12, 50, 85, 0.08); /* Menus are small. A 60px blur offset 24px down falls clean outside a 24px-tall popup and leaves it floating unanchored, so overlays get their own elevation. */ --nms-shadow-menu: 0 10px 24px rgba(12, 50, 85, 0.16), 0 2px 6px rgba(12, 50, 85, 0.10); --nms-glow: 0 6px 20px rgba(25, 100, 170, 0.28); /* Top-edge gloss: the single line that makes a flat panel read as glass */ --nms-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.75); --nms-r-sm: 8px; --nms-r: 12px; --nms-r-lg: 18px; --nms-r-pill: 999px; --nms-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --nms-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --nms-font-head: 'Merriweather Sans', 'Segoe UI', system-ui, sans-serif; --nms-font-body: 'Open Sans', 'Segoe UI', system-ui, sans-serif; color-scheme: light; } .theme-nms { font-family: var(--nms-font-body); line-height: 1.5; } /* ============================================= BOOTSTRAP OVERRIDES The base app palette is already the NMS palette, so only surface-level variables are re-pointed here — hues stay as they are. ============================================= */ .theme-nms { /* --bs-body-bg has to stay an opaque colour. Half the app reaches for it as "the solid surface behind content" — sticky grid heads, the filter panel's reset footer, offcanvas bodies, response cards — and Bootstrap derives --bs-tooltip-color from it, so `transparent` here also turned every tooltip's text invisible. The page background is painted on instead, and is forced transparent below. */ --bs-body-bg: #F3F8FD; --bs-body-bg-rgb: 243, 248, 253; --bs-body-color: var(--nms-text); --bs-secondary-color: var(--nms-text-muted); --bs-border-color: var(--nms-hairline); --bs-border-color-translucent: var(--nms-hairline); --bs-emphasis-color-rgb: 37, 52, 68; --border-color-opacity-10: var(--nms-hairline); --input-border-color: var(--nms-hairline-strong); --input-focus-box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.22); --bs-box-shadow: var(--nms-shadow); --bs-box-shadow-sm: var(--nms-shadow-sm); --bs-box-shadow-lg: var(--nms-shadow-lg); --bs-card-box-shadow: var(--nms-shadow-sm); /* The global radius is what small controls inherit — inputs, select2, grid filters, chips. At 12px a 28px-tall select turns into a lozenge next to the .form-control beside it, so the base stays small and panels opt into the larger radii. */ --bs-border-radius: var(--nms-r-sm); --bs-border-radius-sm: 6px; --bs-border-radius-lg: var(--nms-r-lg); /* The app's --bs-accent is #FD5200, an orange-red that appears nowhere in the NMS palette; the design system's accent is amber. */ --bs-accent: var(--nms-amber); --bs-accent-rgb: 232, 133, 46; --bs-tooltip-bg: #143D64; --bs-tooltip-color: #FFFFFF; --bs-tooltip-opacity: 1; --bs-secondary-bg-subtle: var(--nms-blue-soft); --bs-secondary-bg-subtle-rgb: 232, 239, 247; } /* ============================================= BODY — aurora field Three brand-hued light pools drift behind the whole app. They live on a fixed pseudo-element so the animation composites on the GPU instead of repainting a `background-attachment: fixed` layer on every scroll. ============================================= */ html:has(.theme-nms) { background: var(--nms-bg); } .theme-nms.theme-nms { background: transparent !important; color: var(--nms-text); } .theme-nms::before { content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none; /* The pools are placed in this element's own box, which the -25% inset makes 150% of the viewport — so a pool at "10% 4%" of the box lands off-screen above the top-left corner. These positions are the viewport positions remapped into that box: box% = (viewport% + 25) / 1.5. The middle pool is what makes the panels read as glass at all. With the field only coloured at its corners, the content column — the one place every card sits — was the palest part of the page, and a translucent card over near-white is just a white card. */ background: radial-gradient(40% 44% at 23% 22%, rgba(25, 100, 170, 0.47), transparent 68%), radial-gradient(36% 40% at 75% 23%, rgba(0, 159, 227, 0.45), transparent 66%), radial-gradient(42% 44% at 53% 47%, rgba(0, 159, 227, 0.26), transparent 70%), radial-gradient(40% 42% at 33% 75%, rgba(232, 133, 46, 0.20), transparent 70%), radial-gradient(34% 38% at 78% 69%, rgba(25, 100, 170, 0.27), transparent 68%); animation: nms-aurora-drift 30s var(--nms-ease) infinite alternate; will-change: transform; } @keyframes nms-aurora-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2.5%, -2%, 0) scale(1.06); } 100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); } } .theme-nms .body-wrap { background: transparent; } .theme-nms h1, .theme-nms h2, .theme-nms h3, .theme-nms h4, .theme-nms h5, .theme-nms h6, .theme-nms .card-title { font-family: var(--nms-font-head); font-weight: 600; letter-spacing: -0.01em; color: var(--nms-blue-deep); } .theme-nms .text-muted { color: var(--nms-text-muted) !important; } .theme-nms .text-dark, .theme-nms .text-body { color: var(--nms-text) !important; } .theme-nms a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) { color: var(--nms-blue); text-decoration: none; transition: color 150ms var(--nms-ease); } .theme-nms a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover { color: var(--nms-cyan); text-decoration: underline; text-underline-offset: 2px; } /* ============================================= NAVBAR — frosted left rail The rail is translucent so the aurora keeps moving behind it; the active item is a solid brand pill with a glow, which is the only saturated block in the chrome. ============================================= */ .theme-nms .navbar { background: rgba(255, 255, 255, 0.96) !important; box-shadow: var(--nms-sheen), 0 0 0 1px var(--nms-hairline) !important; border-right: 0 !important; } /* The blur only from md up. Below that the navbar is a fixed top bar that hosts the slide-in menu, and a backdrop-filter would make it the containing block for that position: fixed panel — collapsing the whole menu to the bar's own height. From md up the rail is full height and Bootstrap lays the menu out statically inside it, so the glass is safe there. */ @media (min-width: 768px) { .theme-nms .navbar { background: var(--nms-glass) !important; backdrop-filter: var(--nms-blur); -webkit-backdrop-filter: var(--nms-blur); box-shadow: var(--nms-sheen), 1px 0 0 0 var(--nms-hairline), 8px 0 32px rgba(12, 50, 85, 0.05) !important; } } .theme-nms .navbar .navbar-brand { border-bottom-color: var(--nms-hairline) !important; } .theme-nms .navbar .nav-link { position: relative; color: var(--nms-text-muted); border-radius: var(--nms-r); transition: color 180ms var(--nms-ease), background-color 180ms var(--nms-ease), box-shadow 180ms var(--nms-ease), transform 180ms var(--nms-ease); } .theme-nms .navbar .nav-link span { font-family: var(--nms-font-head); font-weight: 500; } .theme-nms .navbar .nav-link:hover { color: var(--nms-blue); background: linear-gradient(135deg, rgba(0, 159, 227, 0.14), rgba(25, 100, 170, 0.08)); box-shadow: var(--nms-sheen); } .theme-nms .navbar .nav-item.active > .nav-link, .theme-nms .navbar .nav-link.active { color: #fff !important; background: var(--nms-brand) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--nms-glow) !important; } .theme-nms .navbar .nav-item.active > .nav-link .icon, .theme-nms .navbar .nav-item.active > .nav-link i { color: #fff !important; } .theme-nms .navbar .nav-divider { border-top-color: var(--nms-hairline) !important; } /* The rail's own offcanvas must stay a plain wrapper from md up, where Bootstrap already makes it transparent. A backdrop-filter here would turn it into the containing block for the submenu flyout, and the markup's .overflow-auto would then clip the flyout out of existence. */ @media (min-width: 768px) { .theme-nms .navbar .offcanvas { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; } } /* From md up the submenu is a full-height flyout pinned to the rail: chrome rather than a floating menu, so it is square, fully opaque, and cannot let the pinned filter panel underneath ghost through it. */ @media (min-width: 768px) { .theme-nms .navbar .offcanvas .navbar-nav .nav-item.dropdown .dropdown-menu { background: var(--nms-sheet); backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-right: 1px solid var(--nms-hairline); border-radius: 0; box-shadow: 8px 0 32px rgba(12, 50, 85, 0.10); padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x); } } /* Below md the submenu is an inline list inside the rail, not a flyout — it has to stay flat instead of turning into a floating sheet. */ @media (max-width: 767.98px) { .theme-nms .navbar .dropdown-menu { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; } } /* The submenu's rows carry a nine-class block of their own in the base stylesheet, so the app-wide dropdown states never reach them and they answered with flat greys — white on hover, --bs-light for the current dashboard. These are the filter tree's two fills again; the rail's submenu is the same kind of list as the tree and the conversation history, so it reads like them. Forced rather than out-specified, as the rest of this section already is. */ .theme-nms .navbar .dropdown-menu .dropdown-item.active { background: rgba(25, 100, 170, 0.09) !important; color: var(--nms-blue-deep) !important; font-weight: 600; } .theme-nms .navbar .dropdown-menu .dropdown-item:hover, .theme-nms .navbar .dropdown-menu .dropdown-item:focus, .theme-nms .navbar .dropdown-menu .dropdown-item.active:hover { background: rgba(0, 159, 227, 0.12) !important; color: var(--nms-blue) !important; } /* ============================================= TOP BAR ============================================= */ /* The page scrolls underneath the fixed chrome, so nothing in it may paint over the bar — and a grid filter's calendar (z-index 999) or a select2 menu (1051) otherwise does. Isolating the scrolling column puts every such popup in its own stacking context; modals and offcanvases are moved to body-level containers outside it and still cover everything. */ .theme-nms .content-wrap { isolation: isolate; } /* Frost, not glass: the page scrolls underneath the top bar, so the backdrop blur is doing real work here and the fill has to be opaque enough that what passes behind never reads as text. */ .theme-nms .top-bar { background: var(--nms-glass-strong) !important; backdrop-filter: var(--nms-blur); -webkit-backdrop-filter: var(--nms-blur); border-bottom: 1px solid var(--nms-hairline) !important; box-shadow: var(--nms-sheen), 0 1px 12px rgba(12, 50, 85, 0.05); } /* The filters offcanvas is rendered inside the top bar and only moved into .offcanvas-container once the JS runs. A backdrop-filter is a containing block for position: fixed, so while the panel is still in here it would be laid out against the top bar — which starts one nav rail in — and the pinned panel would paint a rail's width too far right until the move snapped it back. :has() drops the blur for exactly that window and restores it the moment the panel leaves. */ .theme-nms .top-bar:has(.offcanvas) { backdrop-filter: none; -webkit-backdrop-filter: none; } /* ============================================= SIDEBAR ============================================= */ /* The layout reserves the rail's width, so nothing ever passes behind the side column — it can take the glass. */ .theme-nms .sidebar, .theme-nms .tina-sidebar { background-color: var(--nms-panel) !important; background-image: var(--nms-gloss); backdrop-filter: none; -webkit-backdrop-filter: none; border-right: 0; box-shadow: var(--nms-sheen), 1px 0 0 0 var(--nms-hairline) !important; } .theme-nms .sidebar .nav-link { color: var(--nms-text-muted); border-radius: var(--nms-r-sm); transition: var(--transition-150); } .theme-nms .sidebar .nav-link:hover { color: var(--nms-blue); background: rgba(0, 159, 227, 0.10); } .theme-nms .sidebar .nav-link.active { color: var(--nms-blue-deep); background: var(--nms-blue-soft); font-weight: 600; box-shadow: inset 3px 0 0 0 var(--nms-cyan); } /* ============================================= CARDS — floating glass panels ============================================= */ .theme-nms .card { /* The base stylesheet rounds a card's first and last child with --bs-card-border-radius, so that variable must match the card's own radius — otherwise every child carrying a fill (a .card-body, a grid wrapper, a loading skeleton) pokes square corners out through the parent's rounding. */ --bs-card-border-radius: var(--nms-r-lg); --bs-card-inner-border-radius: var(--nms-r-lg); background-color: var(--nms-panel); background-image: var(--nms-gloss); border: 1px solid var(--nms-glass-border); border-radius: var(--nms-r-lg); box-shadow: var(--nms-sheen), 0 0 0 1px var(--nms-hairline), var(--nms-shadow); transition: box-shadow 260ms var(--nms-ease-out), transform 260ms var(--nms-ease-out); } /* The glass makes every card a stacking context, which traps a menu opened inside one underneath the cards that follow it in the grid. Lift the card for as long as it holds an open overlay. */ .theme-nms .card:has(.dropdown-menu.show) { z-index: 3; } .theme-nms .card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(0, 159, 227, 0.35), var(--nms-shadow-lg); } /* The lift is a click affordance, so it is left to the cards that are one clickable object: the project tiles. A dashboard component is content read under a moving pointer, and there the movement is noise rather than an invitation — those answer the pointer with the ring above and stay put. */ .theme-nms .page-selectProject .card:hover { transform: translateY(-2px); } .theme-nms .card-header { background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); border-bottom: 1px solid var(--nms-hairline); font-family: var(--nms-font-head); font-weight: 600; color: var(--nms-blue-deep); } .theme-nms .card-footer { background: linear-gradient(0deg, rgba(232, 239, 247, 0.55), rgba(255, 255, 255, 0)); border-top: 1px solid var(--nms-hairline); } .theme-nms .card-title { font-family: var(--nms-font-head); font-weight: 600; color: var(--nms-blue-deep); } /* Dashboard section header — a label strip, not a panel */ .theme-nms .card.db-section-header { background: transparent; border: 0; box-shadow: none; } .theme-nms .card.db-section-header:hover { box-shadow: none; } /* A grid is routinely wider than the card holding it, because the app scrolls the page rather than the card: the card's box stops at the viewport while the table runs on past it. So the table, not the card, is the panel here — it is the only box that spans the whole grid. Two translucent surfaces stacked would also read as two: over the card the whites multiply and past its right edge only one is left, which drew a seam down the rows exactly where the card ended. The card keeps its box for the header and the footer and paints nothing of its own. */ .theme-nms .card:has(.datagrid) { background: transparent; border-color: transparent; box-shadow: none; } .theme-nms .card:has(.datagrid):hover { box-shadow: none; } .theme-nms .card:has(.datagrid) > .card-body { background: transparent; } .theme-nms .card:has(.datagrid) > .card-header { background-color: var(--nms-panel); background-image: var(--nms-gloss); border-radius: var(--nms-r-lg) var(--nms-r-lg) 0 0; box-shadow: var(--nms-sheen), 0 0 0 1px var(--nms-hairline); } .theme-nms .datagrid table:not(.item-detail-content) { background-color: var(--nms-panel); background-image: var(--nms-gloss); border-radius: var(--nms-r-lg); box-shadow: var(--nms-sheen), 0 0 0 1px var(--nms-hairline), var(--nms-shadow); } /* With a header above it the table is no longer the top of the panel. */ .theme-nms .card:has(> .card-header) .datagrid table:not(.item-detail-content) { border-start-start-radius: 0; border-start-end-radius: 0; } /* Nothing here can clip — a grid filter opens its calendar inline, inside the table — so a tinted header band would square off the panel's rounded top corners. The header is carried by weight and a rule instead of a fill. */ .theme-nms .datagrid table thead tr:not(.row-group-actions) th, .theme-nms .datagrid table thead tr:not(.row-group-actions) td { background: transparent !important; } .theme-nms .datagrid table thead tr:not(.row-group-actions):last-child > * { border-bottom: 2px solid var(--nms-hairline-strong) !important; } .theme-nms .bg-white, .theme-nms .bg-body, .theme-nms .bg-light { background-color: var(--nms-glass-strong) !important; } .theme-nms .bg-body-secondary, .theme-nms .bg-body-tertiary { background-color: rgba(232, 239, 247, 0.65) !important; } /* ============================================= BUTTONS — glossy brand, glass secondaries ============================================= */ .theme-nms .btn { --bs-btn-border-radius: var(--nms-r-sm); font-family: var(--nms-font-head); font-weight: 500; transition: background 200ms var(--nms-ease), color 200ms var(--nms-ease), box-shadow 200ms var(--nms-ease), transform 120ms var(--nms-ease); } .theme-nms .btn:active:not(:disabled) { transform: translateY(1px); } /* Primary — the only fully saturated control; gradient + top sheen + glow, with a light sweep on hover (same idiom as the app's .animate-shine) */ .theme-nms .btn-primary, .theme-nms .btn-accent, .theme-nms .btn-danger, .theme-nms .btn-success, .theme-nms .btn-info, .theme-nms .btn-warning { overflow: hidden; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--nms-shadow-sm); } .theme-nms .btn-primary::after, .theme-nms .btn-accent::after, .theme-nms .btn-danger::after, .theme-nms .btn-success::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-20deg); pointer-events: none; opacity: 0; } .theme-nms .btn-primary:hover:not(:disabled)::after, .theme-nms .btn-accent:hover:not(:disabled)::after, .theme-nms .btn-danger:hover:not(:disabled)::after, .theme-nms .btn-success:hover:not(:disabled)::after { animation: nms-btn-shine 800ms var(--nms-ease-out); } @keyframes nms-btn-shine { 0% { left: -75%; opacity: 1; } 100% { left: 125%; opacity: 1; } } .theme-nms .btn-primary { --bs-btn-bg: var(--nms-blue); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--nms-blue-mid); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--nms-blue-mid); background-image: var(--nms-brand); } .theme-nms .btn-primary:hover:not(:disabled) { background-image: var(--nms-brand-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--nms-glow); } .theme-nms .btn-accent { background-image: linear-gradient(135deg, #F2A24E 0%, var(--nms-amber) 70%); } .theme-nms .btn-accent:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 20px rgba(232, 133, 46, 0.32); } .theme-nms .btn-danger { background-image: linear-gradient(135deg, #E23B3B 0%, var(--nms-red) 70%); } .theme-nms .btn-danger:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 20px rgba(208, 0, 0, 0.30); } .theme-nms .btn-success { background-image: linear-gradient(135deg, #85CB56 0%, var(--nms-green) 70%); } .theme-nms .btn-success:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 20px rgba(102, 181, 54, 0.30); } .theme-nms .btn-info { background-image: linear-gradient(135deg, #46BEED 0%, var(--nms-cyan) 70%); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; } .theme-nms .btn-warning { background-image: linear-gradient(135deg, #FECD70 0%, #FDB833 70%); } /* Outline — a hairline chip that fills on hover. The theme repaints the resting fill, so each variant also has to claim its hover/active colours: Bootstrap's defaults put white text on them, which on this near-white fill made the label vanish the moment a button went active (the period pill in the top bar). */ /* Only the resting state is repainted — an unqualified `background` here would also win over Bootstrap's hover and active fills and leave the button white in every state. */ .theme-nms .btn-outline-primary:not(:hover):not(:active):not(.active):not(.show), .theme-nms .btn-outline-accent:not(:hover):not(:active):not(.active):not(.show), .theme-nms .btn-outline-danger:not(:hover):not(:active):not(.active):not(.show), .theme-nms .btn-outline-success:not(:hover):not(:active):not(.active):not(.show), .theme-nms .btn-outline-info:not(:hover):not(:active):not(.active):not(.show), .theme-nms .btn-outline-warning:not(:hover):not(:active):not(.active):not(.show), .theme-nms .btn-outline-light:not(:hover):not(:active):not(.active):not(.show) { background: rgba(255, 255, 255, 0.55); } .theme-nms .btn-outline-accent { --bs-btn-color: #A85C13; --bs-btn-border-color: rgba(232, 133, 46, 0.45); --bs-btn-hover-bg: var(--nms-amber); --bs-btn-hover-border-color: var(--nms-amber); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--nms-amber); --bs-btn-active-border-color: var(--nms-amber); --bs-btn-active-color: #fff; } .theme-nms .btn-outline-danger { --bs-btn-color: var(--nms-red); --bs-btn-border-color: rgba(208, 0, 0, 0.40); --bs-btn-hover-bg: var(--nms-red); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--nms-red); --bs-btn-active-color: #fff; } .theme-nms .btn-outline-success { --bs-btn-color: #4E8F27; --bs-btn-border-color: rgba(102, 181, 54, 0.45); --bs-btn-hover-bg: var(--nms-green); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--nms-green); --bs-btn-active-color: #fff; } .theme-nms .btn-outline-info { --bs-btn-color: #006F9F; --bs-btn-border-color: rgba(0, 159, 227, 0.40); --bs-btn-hover-bg: var(--nms-cyan); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--nms-cyan); --bs-btn-active-color: #fff; } .theme-nms .btn-outline-warning { --bs-btn-color: #8A631B; --bs-btn-border-color: rgba(253, 184, 51, 0.55); --bs-btn-hover-bg: #FDB833; --bs-btn-hover-color: #6B4B10; --bs-btn-active-bg: #FDB833; --bs-btn-active-color: #6B4B10; } .theme-nms .btn-outline-primary { --bs-btn-color: var(--nms-blue); --bs-btn-border-color: rgba(25, 100, 170, 0.35); --bs-btn-hover-bg: var(--nms-blue); --bs-btn-hover-border-color: var(--nms-blue); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--nms-blue); --bs-btn-active-border-color: var(--nms-blue); --bs-btn-active-color: #fff; } .theme-nms .btn-outline-primary:hover:not(:disabled) { box-shadow: var(--nms-glow); } .theme-nms .btn-outline-light { --bs-btn-color: var(--nms-text-muted); --bs-btn-border-color: var(--nms-hairline-strong); --bs-btn-hover-bg: var(--nms-blue-soft); --bs-btn-hover-color: var(--nms-blue-deep); --bs-btn-hover-border-color: rgba(25, 100, 170, 0.28); } /* Flat is the app's quiet default, and it is used mostly for icon chips packed into filter trees, grid rows and toolbars. Painting each one as a bordered white tile turned those rows into a grid of little boxes, so the affordance is carried entirely by the hover fill — which is also what keeps the blue from looking arbitrary: exactly one control style is saturated, and this is not it. */ .theme-nms .btn-flat-primary, .theme-nms .btn-flat-secondary, .theme-nms .btn-flat-success, .theme-nms .btn-flat-warning, .theme-nms .btn-flat-danger, .theme-nms .btn-flat-info { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; box-shadow: none; } .theme-nms .btn-flat-primary { --bs-btn-color: var(--nms-blue); --bs-btn-hover-color: var(--nms-blue-deep); --bs-btn-hover-bg: var(--nms-blue-soft); --bs-btn-active-color: var(--nms-blue-deep); --bs-btn-active-bg: var(--nms-blue-soft); } .theme-nms .btn-flat-secondary { --bs-btn-color: var(--nms-text-muted); --bs-btn-hover-color: var(--nms-blue); --bs-btn-hover-bg: rgba(0, 159, 227, 0.10); } .theme-nms .btn-flat-success { --bs-btn-color: #4E8F27; --bs-btn-hover-color: #3E7320; --bs-btn-hover-bg: rgba(102, 181, 54, 0.14); } .theme-nms .btn-flat-warning { --bs-btn-color: #B18124; --bs-btn-hover-color: #8A631B; --bs-btn-hover-bg: rgba(253, 184, 51, 0.18); } .theme-nms .btn-flat-danger { --bs-btn-color: var(--nms-red); --bs-btn-hover-color: #920000; --bs-btn-hover-bg: rgba(208, 0, 0, 0.10); } /* Secondary — the base theme paints it solid grey, which reads as a dead block next to the glass chrome; make it a quiet glass chip instead */ .theme-nms .btn-secondary { --bs-btn-bg: rgba(255, 255, 255, 0.62); --bs-btn-border-color: var(--nms-hairline-strong); --bs-btn-color: var(--nms-text-muted); --bs-btn-hover-bg: var(--nms-blue-soft); --bs-btn-hover-border-color: rgba(25, 100, 170, 0.28); --bs-btn-hover-color: var(--nms-blue-deep); --bs-btn-active-bg: var(--nms-blue-soft); --bs-btn-active-border-color: rgba(25, 100, 170, 0.28); --bs-btn-active-color: var(--nms-blue-deep); --bs-btn-disabled-bg: rgba(255, 255, 255, 0.4); --bs-btn-disabled-color: var(--nms-text-subtle); --bs-btn-disabled-border-color: var(--nms-hairline); box-shadow: var(--nms-sheen), var(--nms-shadow-sm); } .theme-nms .btn-outline-secondary { --bs-btn-color: var(--nms-text-muted); --bs-btn-border-color: var(--nms-hairline-strong); --bs-btn-hover-bg: var(--nms-blue); --bs-btn-hover-border-color: var(--nms-blue); --bs-btn-hover-color: #fff; } .theme-nms .btn-link { --bs-btn-color: var(--nms-blue); --bs-btn-hover-color: var(--nms-cyan); text-decoration: none; } /* The base sets --bs-btn-disabled-opacity: 0.3. On a saturated gradient that leaves white text on a washed-out blue; on a flat button it multiplies with the variant's own rgba(0,0,0,.5) label down to roughly 15% alpha — a ghost. Nothing fades out; disabled is expressed by a muted colour at full opacity. */ .theme-nms .btn:disabled, .theme-nms .btn.disabled, .theme-nms fieldset:disabled .btn { --bs-btn-disabled-opacity: 1; --bs-btn-disabled-color: var(--nms-text-subtle); } .theme-nms .btn-primary:disabled, .theme-nms .btn-accent:disabled, .theme-nms .btn-danger:disabled, .theme-nms .btn-success:disabled, .theme-nms .btn-info:disabled, .theme-nms .btn-warning:disabled, .theme-nms .btn-primary.disabled, .theme-nms .btn-accent.disabled, .theme-nms .btn-danger.disabled, .theme-nms .btn-success.disabled, .theme-nms .btn-info.disabled, .theme-nms .btn-warning.disabled { --bs-btn-disabled-opacity: 1; --bs-btn-disabled-bg: var(--nms-blue-soft); --bs-btn-disabled-color: var(--nms-text-subtle); --bs-btn-disabled-border-color: transparent; background-image: none; box-shadow: inset 0 0 0 1px var(--nms-hairline); } .theme-nms .btn:disabled, .theme-nms .btn.disabled { box-shadow: none; cursor: not-allowed; } /* A .btn carrying a background utility instead of a variant class keeps --bs-btn-color, i.e. body text — dark navy on solid red for "Delete project". The utility decides the fill, so it has to decide the label too. */ .theme-nms .btn.bg-primary, .theme-nms .btn.bg-danger, .theme-nms .btn.bg-success, .theme-nms .btn.bg-info, .theme-nms .btn.bg-dark, .theme-nms .btn.bg-secondary { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; color: #fff; } .theme-nms .btn.bg-warning, .theme-nms .btn.bg-light { --bs-btn-color: var(--nms-text); --bs-btn-hover-color: var(--nms-text); --bs-btn-active-color: var(--nms-text); color: var(--nms-text); } .theme-nms .btn:focus-visible { box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.30) !important; outline: none; } /* ============================================= FORMS — translucent inputs with a cyan focus ring ============================================= */ .theme-nms .form-label { font-family: var(--nms-font-head); font-weight: 600; color: var(--nms-text-muted); } /* The app leaves every control to its own metrics — a .form-control lands at 27px, a native .form-select at 38px, a select2 at 28px — so a form stacks three different heights. One height for the default size; the grid's .form-control-sm row keeps its own smaller one. */ .theme-nms .form-control:not(.form-control-sm), .theme-nms .form-select:not(.form-select-sm), .theme-nms .select2:not(.select2-container--focus), .theme-nms input[type="search"]:not(.form-control-sm) { min-height: 34px; } /* A native