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

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