pages/main-display/main-display.component.scss

0001
0002
0003 .central-fill {
0004   position: relative;
0005   width: 100%;
0006   height: 100%;
0007   overflow: hidden;
0008 }
0009
0010 #eventDisplay {
0011   position: relative;
0012   width: 100%;
0013   height: 100%;
0014   overflow: hidden;
0015 }
0016
0017
0018 .toggle-btn {
0019   position: absolute;
0020   top: 50px;
0021   //color: white;
0022   padding-top: 8px;
0023   z-index: 10;
0024   color: var(--text-color);
0025   transition: background-color 0.3s, color 0.3s;
0026 }
0027 .toggle-btn:hover {
0028   background-color: var(--secondary-background-color);
0029   color: var(--accent-color);
0030 }
0031
0032 .toggle-btn1 {
0033   color: white;
0034 }
0035
0036 .tcontrol {
0037   width: 40px;
0038   align-content: center;
0039   min-width: 40px;
0040   background-color: var(--mat-sys-surface-container-low);
0041   box-shadow: var(--mat-sys-level2);
0042 }
0043
0044
0045 .time-controls {
0046   display: flex;
0047   align-items: center;
0048   justify-content: space-between;
0049   height: auto;
0050   padding: 8px;
0051   bottom: 0;
0052   gap: 10px;
0053 }
0054
0055 mat-slider{
0056   width: 200px;
0057 }
0058
0059
0060
0061 /* Responsive breakpoints for small screens */
0062 @media (max-width: 768px) {
0063   .time-controls {
0064     flex-wrap: wrap;
0065     gap: 8px;
0066     justify-content: flex-start;
0067   }
0068
0069   .hide-on-mobile {
0070     display: none !important;
0071   }
0072 }
0073
0074 @media (max-width: 630px) {
0075   .time-controls {
0076     flex-wrap: wrap;
0077     justify-content: flex-start;
0078   }
0079
0080   .time-controls app-event-time-control {
0081     flex: 1 1 100%;
0082   }
0083 }
0084
0085 /* Loaders */
0086 .loading-indicators {
0087   display: flex;
0088   gap: 12px;
0089   justify-content: flex-end;
0090   margin-bottom: 4px;
0091   padding-right: 12px;
0092 }
0093
0094 .loader-container {
0095   display: flex;
0096   flex-direction: column;
0097   align-items: center;
0098   min-width: 70px; /* Ensure enough space for the label */
0099
0100   .loader-label {
0101     font-size: 10px;
0102     margin-top: 2px;
0103     color: var(--mat-sys-on-surface-variant);
0104     white-space: nowrap; /* Prevent label from wrapping */
0105   }
0106 }
0107
0108 /* Error message "snack bar" */
0109 // Push the snackbar below the header
0110 .snackbar-below-header {
0111   margin-top: 64px !important; // Adjust based on your header height
0112 }
0113 .error-snackbar {
0114   position: absolute;
0115   top: 60px;
0116 }
0117
0118 // Active state for panel buttons
0119 .panel-button.active {
0120   background-color: var(--mat-sys-primary-container) !important;
0121   color: var(--mat-sys-on-primary-container) !important;
0122 }
0123
0124 // Left pane: switch between the physics model tree and the debug scene tree
0125 .tree-mode-switch {
0126   display: flex;
0127   gap: 4px;
0128   padding: 6px 8px;
0129
0130   button {
0131     flex: 1;
0132     border: 1px solid var(--mat-sys-outline-variant);
0133     background: none;
0134     color: var(--mat-sys-on-surface);
0135     border-radius: 12px;
0136     padding: 3px 10px;
0137     font-size: 12px;
0138     cursor: pointer;
0139
0140     &.active {
0141       background: var(--mat-sys-primary-container);
0142       color: var(--mat-sys-on-primary-container);
0143       border-color: transparent;
0144     }
0145   }
0146 }