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
0062 @media (max-width: 630px) {
0063   .time-controls {
0064     flex-wrap: wrap;
0065     justify-content: flex-start;
0066   }
0067
0068   .time-controls app-event-time-control {
0069     flex: 1 1 100%;
0070   }
0071 }
0072
0073 /* Loaders */
0074 .loading-indicators {
0075   display: flex;
0076   gap: 12px;
0077   justify-content: flex-end;
0078   margin-bottom: 4px;
0079   padding-right: 12px;
0080 }
0081
0082 .loader-container {
0083   display: flex;
0084   flex-direction: column;
0085   align-items: center;
0086   min-width: 70px; /* Ensure enough space for the label */
0087
0088   .loader-label {
0089     font-size: 10px;
0090     margin-top: 2px;
0091     color: var(--mat-sys-on-surface-variant);
0092     white-space: nowrap; /* Prevent label from wrapping */
0093   }
0094 }
0095
0096 /* Error message "snack bar" */
0097 // Push the snackbar below the header
0098 .snackbar-below-header {
0099   margin-top: 64px !important; // Adjust based on your header height
0100 }
0101 .error-snackbar {
0102   position: absolute;
0103   top: 60px;
0104 }