.ntsh_dashboard { position: absolute; inset: 0px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(600px, 100%), 1fr)); grid-auto-rows: min-content; align-items: stretch; justify-items: stretch; align-content: start; overflow-y: auto; gap: var(--mux-edge-offset); box-sizing: border-box; padding: var(--mux-edge-offset); .ntsh_dashboard-box { background: var(--mux-selected-color); box-sizing: border-box; padding: var(--mux-edge-offset); border-radius: var(--mux-rounding); .ntsh_dashboard-box-header { padding-bottom: var(--mux-edge-offset-tiny); border-bottom: 1px solid #979797; margin-bottom: var(--mux-edge-offset-tiny); font-size: 18px; } .mux_header:not(.ntsh_dashboard-box-header) { margin-bottom: var(--mux-edge-offset-tiny); } } .ntsh_dashboard-unity-parameters { .ntsh_dashboard-unity-parameters-loading { text-align: center; color: #9d9d9d; } } .ntsh_dashboard-unity-advancedparameters { .ntsh_dashboard-unity-advancedparameters-loading { text-align: center; color: #9d9d9d; } } .ntsh_dashboard-unity-sensors { .ntsh_dashboard-unity-sensors-loading { text-align: center; color: #9d9d9d; } } table { width: 100%; &.ntsh_vertical { tr td { height: 24px; &:first-child { width: min(150px, 20vw); } } } &.ntsh_horizontal {} &.ntsh_center { tr td { text-align: center; .ntsh_status { margin: 0 auto; } } } tr { td { &:has(.ntsh_status) { width: 30px; } } } } .ntsh_dashboard-error { display: none; box-sizing: border-box; padding: var(--mux-edge-offset-tiny); border-radius: var(--mux-rounding); margin-top: var(--mux-edge-offset-tiny); background: #721e1e; } .ntsh_progress { position: relative; background: #2f2f2f; width: 100%; height: 20px; border-radius: 4px; overflow: hidden; .ntsh_progress-value { height: 100%; background: #777777; &.ntsh_progress-smooth { transition-duration: .3s; transition-timing-function: ease-in-out; } &.mux_resizer { transition-duration: 0s; .mux_resizer-grab { background: var(--mux-primary-color); border-radius: 4px; height: 100%; } } } .ntsh_progress-label { position: absolute; z-index: 101; inset: 0px; display: flex; justify-content: center; align-items: center; font-size: 12px; color: #fff; font-weight: 500; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; pointer-events: none; } } .ntsh_status { width: 24px; height: 24px; background: #868686; border: 4px solid #00000071; border-radius: 100%; box-sizing: border-box; &.ntsh_status-green { background: #149214; } &.ntsh_status-yellow { background: #ffbf00; } &.ntsh_status-red { background: #ff0000; } &.ntsh_status-gray { background: #868686; } } .ntsh_buttons { width: 100%; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--mux-edge-offset-tiny); .ntsh_button { min-width: 30px; height: 30px; box-sizing: border-box; padding: 0px 4px; display: flex; justify-content: center; align-items: center; background: #787878; cursor: pointer; transition: background .2s; &:hover { background: #5a5a5a; } } } } .ntsh_callanchor { width: 100%; background: #202020; margin-bottom: calc(var(--mux-edge-offset) * -1); display: flex; justify-content: center; align-items: center; font-size: 30px; padding: var(--mux-edge-offset) 0px; color: #fff; font-family: monospace; letter-spacing: 0px; }