pages/split-window/split-window.component.scss

0001 // The shell's central pane supplies the definite height; the quad host
0002 // fills it and hosts the shared render canvas behind the view-cell grid.
0003 .quad-host {
0004   position: relative;
0005   width: 100%;
0006   height: 100%;
0007   overflow: hidden;
0008   background: #2b2b2b;
0009
0010   // The shared render canvas is appended here by ThreeService and sits
0011   // behind the view cells; each cell is one view's scissored rectangle.
0012   ::ng-deep canvas {
0013     position: absolute;
0014     top: 0;
0015     left: 0;
0016     z-index: 0;
0017   }
0018 }
0019
0020 .quad-grid {
0021   position: absolute;
0022   inset: 0;
0023   display: grid;
0024   grid-template-columns: 1fr 1fr;
0025   grid-template-rows: 1fr 1fr;
0026   z-index: 1;
0027 }
0028
0029 .cell {
0030   position: relative;
0031   // No background: the canvas below shows through; the border separates views.
0032   border: 1px solid #555;
0033   // Prevent browser touch gestures from fighting the per-view controls.
0034   touch-action: none;
0035 }
0036
0037 .view-label {
0038   position: absolute;
0039   top: 4px;
0040   left: 8px;
0041   z-index: 2;
0042   pointer-events: none;
0043   color: #ccc;
0044   font: 12px system-ui, sans-serif;
0045   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
0046   user-select: none;
0047 }
0048
0049 .time-controls {
0050   display: flex;
0051   align-items: center;
0052   gap: 2px;
0053 }
0054
0055 .loading-indicators {
0056   display: flex;
0057   align-items: center;
0058   gap: 12px;
0059
0060   .loader-container {
0061     display: flex;
0062     align-items: center;
0063     gap: 6px;
0064   }
0065
0066   .loader-label {
0067     font-size: 12px;
0068     opacity: 0.8;
0069   }
0070 }