/* Full, untruncated raw message on /Signals/Details - wraps instead of eliding since there's no row-height constraint on a detail page. (The /Signals grid truncates Raw itself via the column's clipMode="EllipsisWithTooltip".) */ .signal-raw-full { white-space: pre-wrap; word-break: break-word; } /* Signals arriving live over SignalR briefly flash orange so the user notices the new row appear in the grid. Two quick pulses, then it settles into the normal row. */ @keyframes signal-flash { 0% { background-color: transparent; } 50% { background-color: #fd7e14; } 100% { background-color: transparent; } } #signals-grid tr.signal-new > td { animation: signal-flash 0.8s ease-in-out 2; } @media (prefers-reduced-motion: reduce) { #signals-grid tr.signal-new > td { animation: none; } } /* The inline Action dropdown (the only interactive cell in the /Signals grid). Sized to sit inside the row without pushing its height, and dimmed briefly while its save is in flight. */ #signals-grid .signal-action { width: 100%; min-width: 8rem; padding-top: 0.15rem; padding-bottom: 0.15rem; } #signals-grid .signal-action:disabled { opacity: 0.5; } /* Chat view on /Signals - a message transcript over the same data as the grid. Colours come from Bootstrap theme variables so it follows the site's light/dark toggle. */ .signal-chat { height: 60vh; min-height: 12rem; max-height: 95vh; resize: vertical; /* drag the bottom-right corner to grow the log */ overflow: auto; padding: 0.5rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-tertiary-bg); } /* Chat "Full screen" - pins #view-chat over the whole viewport with the log stretched to fill (toggled from the toolbar button / Esc). */ #view-chat.chat-fullscreen { position: fixed; inset: 0; z-index: 1050; margin: 0; padding: 1rem; background-color: var(--bs-body-bg); display: flex; flex-direction: column; overflow: hidden; } #view-chat.chat-fullscreen .signal-chat { flex: 1 1 auto; height: auto; max-height: none; min-height: 0; resize: none; } body.chat-fullscreen-open { overflow: hidden; } .signal-msg { max-width: 48rem; margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); } .signal-msg:last-child { margin-bottom: 0; } .signal-msg-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; } .signal-msg-reply { margin: 0 0 0.4rem; padding: 0.3rem 0.6rem; border-left: 3px solid var(--bs-primary); background-color: var(--bs-tertiary-bg); font-size: 0.9em; } .signal-msg-reply .signal-msg-reply-text { margin-top: 0.15rem; color: var(--bs-secondary-color); font-size: 0.95em; } .signal-msg-body { margin: 0; font-family: inherit; } .signal-msg-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--bs-border-color-translucent); } .signal-msg-foot .signal-action { width: auto; min-width: 10rem; } .signal-msg-foot .signal-action:disabled { opacity: 0.5; } html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { /* var(--bs-body-bg), not a hardcoded white, so the focus ring's inner gap matches the page in dark mode too. */ box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem #258cfb; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Navbar light/dark toggle (site.js). Bootstrap 5.3 themes everything else off ; this just keeps the button from crowding the links beside it. */ #theme-toggle { margin-left: 0.5rem; } @media (max-width: 575.98px) { #theme-toggle { margin: 0.25rem 0; } }