/* The buoy modal, reimagined (look only: what it shows and does is app.js's, unchanged). Every rule is scoped by #buoy-modal, over the base rules in app.css and telemetry/grid.css, which stay as they were. - Where: docked at the right as the Ocean stations panel is (ocean_stations.css .os-panel: 100 px down, 16 px in, to 16 px off the foot), and non-blocking: no backdrop, the overlay lets the map and the left panel take the pointer; only the panel and its arrows do. A chart opened from it still fills the screen (.telemetry-fullscreen). - Look: the farm card's glass (oxy_forecast.css .oxy-farm-card); an Oxanium title over a quiet meta line; the icon buttons of the date card (28 px squares, double chevrons, the close keeping its x); the buoy floating in a window of water ringed and glowing in its health colour (as its map marker and the Your buoys porthole are), its health in a pill; its status in a tile beside it; the measurement groups as a segmented control; the readings as glass tiles, each with its icon in a tinted chip and its value in Oxanium. Health colours: healthy the brand blue, warning amber, critical red, unknown slate. */ /* ── Where: docked at the right, non-blocking ─────────────────────────────────────────────────────────────── */ #buoy-modal.modal-overlay { pointer-events: none; } #buoy-modal > .modal-backdrop { display: none; } #buoy-modal .buoy-modal-content { --bm-gap: 18px; position: fixed; top: 100px; right: 16px; bottom: 16px; width: 550px; max-width: calc(100vw - 32px); max-height: none; display: flex; flex-direction: column; padding: 16px var(--bm-gap) 0; border-radius: 18px; background: var(--bc-glass-bg); -webkit-backdrop-filter: var(--bc-glass-blur); backdrop-filter: var(--bc-glass-blur); border: var(--bc-glass-border); box-shadow: var(--bc-glass-edge), 0 18px 44px rgba(0, 8, 22, 0.55); color: #e2e8f0; font-family: Manrope, system-ui, sans-serif; pointer-events: auto; transition: none; } /* A chart opened from it: the whole screen, as before. */ #buoy-modal .buoy-modal-content.telemetry-fullscreen { top: 2vh; right: 1vw; bottom: 2vh; left: 1vw; width: auto; max-width: none; height: auto; padding: 16px; } /* The slides fill the panel under its header, each scrolling on its own. */ #buoy-modal .buoy-carousel-wrapper { flex: 1 1 auto; min-height: 0; margin: 0 calc(-1 * var(--bm-gap)); } #buoy-modal .buoy-carousel-track { height: 100%; } #buoy-modal .buoy-slide { height: 100%; max-height: none; padding: 0 var(--bm-gap) var(--bm-gap); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } #buoy-modal .buoy-slide::-webkit-scrollbar { width: 4px; } #buoy-modal .buoy-slide::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; } /* ── The header: the name over where it is; previous / next and close at its right ──────────────────────── */ #buoy-modal .modal-header { align-items: flex-start; gap: 12px; margin-bottom: 14px; } /* The name and meta keep clear of previous / next, which sit over the header left of the close (below). */ #buoy-modal .modal-title-wrap { flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 3px; margin-right: 62px; } #buoy-modal .modal-title { flex: 0 0 100%; font-family: Oxanium, Manrope, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; color: #f8fafc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #buoy-modal .modal-title-location, #buoy-modal .buoy-modal-coords { margin: 0; font-size: 12px; font-weight: 600; color: rgba(203, 213, 225, 0.72); font-variant-numeric: tabular-nums; } #buoy-modal .modal-title-location i { display: none; } #buoy-modal .buoy-modal-coords i { margin-right: 5px; font-size: 10px; color: #60a5fa; opacity: 1; } #buoy-modal .buoy-modal-coords:hover { color: #f8fafc; } #buoy-modal .modal-title-location:not(:empty) + .buoy-modal-coords::before { content: "·"; margin-right: 10px; color: rgba(148, 163, 184, 0.6); } /* The icon buttons: the date card's (app.css .date-display .left-panel-toggle), a quiet 28 px square. */ #buoy-modal .bc-btn-group { flex: none; margin: -2px -6px 0 0; background: none; border: 0; border-radius: 0; overflow: visible; } #buoy-modal .bc-btn-group__btn, #buoy-nav-prev, #buoy-nav-next { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: rgba(226, 232, 240, 0.65); backdrop-filter: none; transition: background-color 0.15s ease, color 0.15s ease; } #buoy-modal .bc-btn-group__btn:hover, #buoy-nav-prev:hover:not([disabled]), #buoy-nav-next:hover:not([disabled]) { background: rgba(255, 255, 255, 0.1); color: #ffffff; } #buoy-modal .bc-btn-group__btn i, #buoy-nav-prev i, #buoy-nav-next i { font-size: 13px; } #buoy-modal .bc-btn-group__btn:focus-visible, #buoy-nav-prev:focus-visible, #buoy-nav-next:focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; } /* Previous / next: in the header, left of the close (they're the overlay's, not the panel's, so placed by the panel's edges: its top 100 px + 15, level with the close (the header's 16 px padding, the group's -2 px lift, and the 1 px border the panel's box adds), its right 16 px + its padding + the close and a gap). */ #buoy-nav-prev, #buoy-nav-next { top: 115px; left: auto; transform: none; pointer-events: auto; } #buoy-nav-next { right: calc(16px + 18px - 6px + 28px + 4px); } #buoy-nav-prev { right: calc(16px + 18px - 6px + 28px + 4px + 28px + 2px); } /* ── The hero: the buoy in its window of water, beside its status ──────────────────────────────────────── */ #buoy-modal .buoy-info-header { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 12px; margin-bottom: 14px; } #buoy-modal .buoy-modal-image-wrap { --tone: 46, 142, 255; height: auto; min-height: 208px; /* else as tall as the status tile beside it (the header's grid row stretches it) */ border-radius: 16px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 30%, rgba(46, 142, 255, 0.2), rgba(2, 10, 24, 0.9) 75%); box-shadow: inset 0 0 0 1.5px rgba(var(--tone), 0.7), 0 0 22px rgba(var(--tone), 0.18); } #buoy-modal .buoy-slide.telemetry-warning .buoy-modal-image-wrap { --tone: 251, 191, 36; } #buoy-modal .buoy-slide.telemetry-critical .buoy-modal-image-wrap { --tone: 239, 68, 68; animation: bm-alert-glow 2.4s ease-in-out infinite; } #buoy-modal .buoy-slide.telemetry-unknown .buoy-modal-image-wrap { --tone: 100, 116, 139; } @keyframes bm-alert-glow { 0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(var(--tone), 0.75), 0 0 18px rgba(var(--tone), 0.2); } 50% { box-shadow: inset 0 0 0 1.5px rgba(var(--tone), 1), 0 0 30px rgba(var(--tone), 0.45); } } #buoy-modal .buoy-modal-image-wrap .buoy-image-col { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; } #buoy-modal .buoy-modal-image-wrap .buoy-image-col img { width: 150px; max-height: none; margin: 22px auto 0; border-radius: 0; } #buoy-modal .buoy-modal-image-wrap .buoy-water-gradient { border-radius: 0; } /* Its health: a pill at the window's top, as the Your buoys porthole's (buoy_deck.css .bd-status). */ #buoy-modal .buoy-modal-image-wrap > .buoy-list-name { top: 10px; left: 10px; transform: none; padding: 3px 9px 4px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; text-transform: lowercase; background: rgba(46, 142, 255, 0.24); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4), 0 2px 8px rgba(2, 10, 24, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #dbeafe; } #buoy-modal .buoy-modal-image-wrap > .buoy-list-name::first-letter { text-transform: uppercase; } #buoy-modal .buoy-modal-image-wrap > .buoy-list-name.telemetry-warning, #buoy-modal .buoy-modal-image-wrap > .buoy-list-name.telemetry-critical { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px rgba(2, 10, 24, 0.45); color: #f8fafc; } #buoy-modal .buoy-modal-image-wrap > .buoy-list-name.telemetry-warning { background: #8f6d15; } #buoy-modal .buoy-modal-image-wrap > .buoy-list-name.telemetry-critical { background: #b91c1c; } #buoy-modal .buoy-modal-image-wrap > .buoy-list-name.telemetry-unknown { background: rgba(100, 116, 139, 0.4); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35); color: #cbd5e1; } /* Its status, in a tile: the device type over the readings pinned to the top. */ #buoy-modal .buoy-status-col { display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 10px; border-radius: 16px; /* faint signal rings from its top corner (the transmission it reports), over the tile's glass */ background: repeating-radial-gradient(circle at 100% 0%, transparent 0 26px, rgba(96, 165, 250, 0.07) 26px 27px, transparent 27px 52px), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.13); } #buoy-modal .buoy-device-type { margin-bottom: 8px; font-family: Oxanium, Manrope, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; color: #93c5fd; } /* The rows (the readings pinned to the top) sit at the tile's foot, under the device type, each on one line: the label takes what is left (cut short with an ellipsis), the value keeps its width at the right, beside its pin. */ #buoy-modal .buoy-status-rows { margin-top: auto; } #buoy-modal .buoy-status-row { gap: 6px; padding: 6px 0; margin: 0; font-size: 12px; } /* Its name, over its depth where it has one (Surface, Middle, Depth: a reading kept at two depths shares its name). */ #buoy-modal .buoy-status-name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } #buoy-modal .buoy-status-row .buoy-status-label { align-self: flex-start; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #buoy-modal .buoy-status-depth { margin-top: 1px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; color: rgba(148, 163, 184, 0.75); } /* Nothing pinned: how to pin, the pin as the tiles show it (unpinned, tilted) in the brand blue. */ #buoy-modal .buoy-status-empty { margin: 0; padding: 2px 0; font-size: 11.5px; font-weight: 500; line-height: 1.45; color: rgba(203, 213, 225, 0.62); } #buoy-modal .buoy-status-empty .fa-thumbtack { margin: 0 2px; font-size: 10.5px; color: #60a5fa; transform: rotate(45deg); } #buoy-modal .buoy-status-row .buoy-status-value { flex: 0 0 auto; white-space: nowrap; text-align: right; } #buoy-modal .buoy-status-row .buoy-status-row-drag-handle { margin-right: 0; } #buoy-modal .buoy-status-row .buoy-measurement-pin-btn { margin-left: 0; } #buoy-modal .buoy-status-row + .buoy-status-row { border-top: 1px solid rgba(148, 163, 184, 0.1); } #buoy-modal .buoy-status-icon { color: #60a5fa; } #buoy-modal .buoy-status-label { font-size: 12px; font-weight: 600; color: rgba(203, 213, 225, 0.68); } #buoy-modal .buoy-status-value { font-family: Oxanium, Manrope, sans-serif; font-size: 14px; font-weight: 700; color: #f8fafc; font-variant-numeric: tabular-nums; } #buoy-modal .buoy-status-info-btn { color: rgba(148, 163, 184, 0.7); } #buoy-modal .buoy-status-info-btn:hover { color: #ffffff; } /* ── The foot: Last Transmission (admin only), a quiet line under the telemetry ───────────────────────────── */ /* The slide a column, so the line sits at the panel's foot under a short tab and after the last tile under a long one. */ #buoy-modal .buoy-slide { display: flex; flex-direction: column; } /* Its parts keep their height and the slide scrolls: a part that clips (the tab strip scrolls sideways) would otherwise shrink to nothing under a long grid. Alert Settings' panel alone shrinks, to scroll its list in place (app.css .buoy-slide--fill). */ #buoy-modal .buoy-slide > *, #buoy-modal .buoy-slide > .bc-telemetry-root > * { flex-shrink: 0; } #buoy-modal .buoy-slide.buoy-slide--fill .buoy-group-panel[data-group-idx="alarms"] { flex: 1 1 auto; } /* The slide itself never scrolls: its head (the buoy, its status, the tabs) stays put and the tab's panel takes what's left, down to the Last Transmission line, scrolling only when its tiles need more than that. */ #buoy-modal .buoy-slide { overflow: hidden; } #buoy-modal .buoy-slide > .buoy-group-panel, #buoy-modal .buoy-slide > .bc-telemetry-root > .buoy-group-panel { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } #buoy-modal .buoy-group-panel::-webkit-scrollbar { width: 4px; } #buoy-modal .buoy-group-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; } #buoy-modal .buoy-tx { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: 11px; font-weight: 600; color: rgba(203, 213, 225, 0.55); font-variant-numeric: tabular-nums; } #buoy-modal .buoy-tx.is-empty { display: none; } #buoy-modal .buoy-tx > i { font-size: 10px; color: rgba(96, 165, 250, 0.7); } #buoy-modal .buoy-tx-value { color: rgba(226, 232, 240, 0.85); } #buoy-modal .buoy-slide.telemetry-warning .buoy-tx-value { color: #fbbf24; } #buoy-modal .buoy-slide.telemetry-critical .buoy-tx-value { color: #f87171; } #buoy-modal .buoy-tx .buoy-status-info-btn { margin-left: 0; padding: 2px; font-size: 11px; } /* ── The measurement groups, a segmented control; Alerts, Maintenance and Transmissions as icon buttons ─── */ #buoy-modal .buoy-group-tabs { gap: 2px; margin-bottom: 12px; padding: 4px; border: 0; border-radius: 12px; background: rgba(2, 10, 24, 0.5); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12); } #buoy-modal .buoy-group-tab { padding: 6px 12px 7px; margin: 0; border: 0; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; text-transform: none; color: rgba(226, 232, 240, 0.62); transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } #buoy-modal .buoy-group-tab:hover { background: rgba(255, 255, 255, 0.06); color: #f8fafc; } #buoy-modal .buoy-group-tab.active { background: rgba(46, 142, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5); color: #ffffff; } #buoy-modal .buoy-group-tab--icon { display: grid; place-items: center; width: 30px; padding: 6px 0 7px; } #buoy-modal .buoy-group-tab:not(.buoy-group-tab--icon) + .buoy-group-tab--icon { margin-left: auto; } /* together at the strip's right */ #buoy-modal .buoy-group-tab--icon i { font-size: 12px; color: inherit; opacity: 1; } #buoy-modal .buoy-group-tab:focus-visible { outline: 2px solid #2e8eff; outline-offset: 1px; } /* ── The readings: glass tiles, the icon in a tinted chip, the value in Oxanium ───────────────────────────── */ #buoy-modal .buoy-measurements-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } #buoy-modal .buoy-measurement-tile { gap: 10px; padding: 12px 12px 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12); transition: background 0.4s ease, box-shadow 0.2s ease; } #buoy-modal .buoy-measurement-tile:hover { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4); } #buoy-modal .buoy-measurement-tile.telemetry-updated { background: rgba(46, 142, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45); } #buoy-modal .buoy-measurement-value-row { gap: 10px; } #buoy-modal .buoy-measurement-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(46, 142, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22); color: #60a5fa; font-size: 14px; } #buoy-modal .buoy-measurement-value { font-family: Oxanium, Manrope, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0.2px; color: #f8fafc; line-height: 1.1; font-variant-numeric: tabular-nums; } #buoy-modal .buoy-measurement-uom { margin-left: 3px; font-family: Manrope, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0; color: rgba(148, 163, 184, 0.9); } #buoy-modal .buoy-measurement-name { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; color: rgba(203, 213, 225, 0.62); text-decoration-color: rgba(203, 213, 225, 0.28); } #buoy-modal .buoy-measurement-tile .buoy-measurement-name:hover { color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.8); } /* Its chart and pin buttons: quiet icons, lighting on hover; the pin inside the tile's corner. */ #buoy-modal .buoy-measurement-tile .buoy-measurement-chart-btn, #buoy-modal .buoy-measurement-tile .buoy-measurement-pin-btn { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 7px; color: rgba(203, 213, 225, 0.5); transition: background-color 0.15s ease, color 0.15s ease; } #buoy-modal .buoy-measurement-tile .buoy-measurement-chart-btn:hover, #buoy-modal .buoy-measurement-tile .buoy-measurement-pin-btn:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } #buoy-modal .buoy-measurement-tile .buoy-measurement-pin-btn { top: 6px; right: 6px; font-size: 11px; color: rgba(203, 213, 225, 0.32); } #buoy-modal .buoy-measurement-tile:hover .buoy-measurement-pin-btn { color: rgba(203, 213, 225, 0.7); } /* ── The other tabs' lists, in the same glass ──────────────────────────────────────────────────────────── */ #buoy-modal .comms-list { border: 0; border-radius: 12px; background: rgba(2, 10, 24, 0.45); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12); } #buoy-modal .comms-row { padding: 7px 12px; font-size: 11px; } /* one size: the time and channel at the ago's and delay's 11 px */ #buoy-modal .comms-row + .comms-row { border-top-color: rgba(148, 163, 184, 0.1); } /* Maintenance's status badges, in sentence case, as the panel's other pills; their colours their own. */ #buoy-modal .maint-badge { padding: 3px 9px 4px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; text-transform: lowercase; } #buoy-modal .maint-badge::first-letter { text-transform: uppercase; } /* Add Alert: the brand's blue button (the player's play disc, as a bar). */ #buoy-modal .blue-pill-button.alarms-add { border: 0; border-radius: 12px; background: radial-gradient(circle at 50% 0%, #5aa8ff, #2e8eff 60%, #1f6fd6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(46, 142, 255, 0.3); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.2px; } #buoy-modal .blue-pill-button.alarms-add:hover { background: radial-gradient(circle at 50% 0%, #74b6ff, #4b9dff 60%, #2e8eff); } /* ── The Profile tab (shared/depth-profile.css): its controls in the modal's own look ────────────────────── Over the Ocean Stations look it brings (slate boxes, white hairlines, a sky-blue pick): the menus and the switch sit in the group strip's dark trough with its hairline, the switch's pick is the strip's (the brand blue, ringed), the chart sits on a reading tile's glass; every control one height, 30 px. */ #buoy-modal .bcdp--menus .bcdp-dd-btn, #buoy-modal .bcdp--menus .bcdp-views, #buoy-modal .bcdp--menus .bcdp-step, #buoy-modal .bcdp--menus .bcdp-to-latest { border: 0; background: rgba(2, 10, 24, 0.5); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12); color: #e2e8f0; transition: box-shadow 0.15s ease, color 0.15s ease; } #buoy-modal .bcdp--menus .bcdp-dd-btn { height: 30px; padding: 0 10px 0 12px; border-radius: 10px; font-weight: 700; } #buoy-modal .bcdp--menus .bcdp-dd-btn:hover, #buoy-modal .bcdp--menus .bcdp-step:hover:not(:disabled), #buoy-modal .bcdp--menus .bcdp-to-latest:hover { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4); color: #ffffff; } #buoy-modal .bcdp--menus .bcdp-dd-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5); } #buoy-modal .bcdp-dd-chev { color: rgba(148, 163, 184, 0.8); } #buoy-modal .bcdp-dd-btn[aria-expanded="true"] .bcdp-dd-chev { color: #60a5fa; } /* One row at the modal's width: the measurement menu takes what the period menu and the switch leave, a long name (Dissolved Oxygen (mg/L)) cut short with an ellipsis rather than pushing the switch to a second line. A phone's narrow modal keeps depth-profile.css's two rows (its @container max-width: 440px). */ @container (min-width: 441px) { #buoy-modal .bcdp--menus .bcdp-controls { flex-wrap: nowrap; } #buoy-modal .bcdp--menus .bcdp-chips { flex: 0 1 auto; min-width: 0; } #buoy-modal .bcdp--menus .bcdp-windows, #buoy-modal .bcdp--menus .bcdp-views { flex: none; } } /* Its list: the modal's glass, the one shown in the strip's pick. */ #buoy-modal .bcdp--menus .bcdp-menu { padding: 4px; border: 0; border-radius: 10px; background: rgba(8, 24, 48, 0.97); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18), 0 12px 30px rgba(0, 8, 22, 0.55); } #buoy-modal .bcdp--menus .tcw-mi { border-radius: 7px; } #buoy-modal .bcdp--menus .tcw-mi:hover { background: rgba(255, 255, 255, 0.06); } #buoy-modal .bcdp--menus .tcw-mi.on { background: rgba(46, 142, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5); } /* The switch: the group strip in small. */ #buoy-modal .bcdp--menus .bcdp-views { height: 30px; padding: 3px; gap: 2px; border-radius: 10px; overflow: visible; } #buoy-modal .bcdp--menus .bcdp-views button { padding: 0 10px; border-radius: 7px; font-size: 11px; font-weight: 700; color: rgba(226, 232, 240, 0.62); transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } #buoy-modal .bcdp--menus .bcdp-views button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: #f8fafc; } #buoy-modal .bcdp--menus .bcdp-views button.on { background: rgba(46, 142, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5); color: #ffffff; } #buoy-modal .bcdp--menus .bcdp-views button:disabled { color: rgba(148, 163, 184, 0.7); } /* The stepper's buttons and back-to-latest, the same; the slider in the brand blue. */ #buoy-modal .bcdp--menus .bcdp-step { width: 30px; height: 30px; border-radius: 10px; } #buoy-modal .bcdp--menus .bcdp-to-latest { height: 26px; border-radius: 999px; } #buoy-modal .bcdp-slider { accent-color: #2e8eff; } /* The chart on a reading tile's glass. */ #buoy-modal .bcdp--toggle .bcdp-body { border: 0; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12); } /* ── A reading's trend, over the header (telemetry/mini_chart.js) ───────────────────────────────────────── A tile's chart button lays it over the buoy's window and its status tile, the tabs and readings staying in view under it, and is lit while it shows. A card of the slide's glass, lifted, rounded and ringed as the window and tile are: the reading's icon in its chip, its name over its depth and its value in Oxanium, open-full and close as the header's quiet icon buttons; the periods as the group strip's segmented control in small (the Profile tab's, 30 px), the time of the value shown at their right; then the plot, its line the brand blue over a wash of it. The chart's colours are the --bmc-* variables, which the module reads. */ #buoy-modal .buoy-info-header { position: relative; } /* Under the card the header keeps its size and place, hidden once the card has risen (and from a screen reader). */ #buoy-modal .buoy-info-header.has-minichart > :not(.bmc) { visibility: hidden; transition: visibility 0s linear 0.18s; } #buoy-modal .bmc { --bmc-line: #60a5fa; --bmc-wash: 46, 142, 255; --bmc-ring: #221f1c; --bmc-axis: rgba(148, 163, 184, 0.78); --bmc-grid: rgba(148, 163, 184, 0.09); --bmc-cross: rgba(226, 232, 240, 0.42); --bmc-font: Manrope, system-ui, sans-serif; position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; min-width: 0; padding: 12px 10px 8px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), var(--bc-glass-bg); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.13), 0 10px 26px rgba(0, 8, 22, 0.45); animation: bmc-rise 0.18s ease-out; } @keyframes bmc-rise { from { opacity: 0; transform: translateY(6px); } } /* The global