components/shell/shell.component.scss

0001 /* shell.component.scss */
0002
0003 /* The overall shell layout */
0004 .display-shell {
0005   display: flex;
0006   flex-direction: column;
0007   height: 100vh;
0008   width: 100%;
0009   overflow: hidden;
0010   box-sizing: border-box;
0011   position: relative; /* Needed for mobile-menu absolute positioning */
0012 }
0013
0014 /* TOP BAR (header) styling */
0015 .top-toolbar {
0016   position: relative;
0017   z-index: 20;
0018   padding: 8px 16px;
0019   min-height: 56px;
0020   height: auto; /* Allow expansion when buttons wrap */
0021   background-color: var(--mat-sys-surface-container);
0022   color: var(--mat-sys-on-surface-container);
0023   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
0024   flex-wrap: wrap; /* Allow wrapping on tablet */
0025   align-content: flex-start;
0026 }
0027
0028 /** Left and right panels separator (which is movable by mouse) */
0029 .divider {
0030   width: 5px;
0031   margin: 1px 0;
0032   cursor: col-resize;
0033   background-color: var(--mat-sys-outline-variant);
0034   user-select: none;
0035   z-index: 15;
0036   // border-radius: 2px;
0037
0038 }
0039
0040 .left-divider {
0041   cursor: col-resize;
0042   background-color: var(--mat-sys-outline-variant);
0043   box-shadow:  2px 0 rgba(0, 0, 0, 0.1);
0044 }
0045 .right-divider {
0046   cursor: col-resize;
0047   background-color: var(--mat-sys-outline-variant);
0048   box-shadow:  -2px 0 rgba(0, 0, 0, 0.1);
0049 }
0050
0051 /* The main content area for left/right/center */
0052 .main-content {
0053   box-sizing: border-box;
0054   display: flex;
0055   flex: 1;
0056   overflow: hidden;
0057 }
0058
0059 /** Left and right panes */
0060 .pane {
0061   position: relative;
0062   z-index: 10;
0063   overflow: auto;
0064   min-width: 0;
0065 }
0066
0067 .left-pane {
0068   box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.2);
0069   background-color: var(--mat-sys-surface-container);
0070   // (!) Padding messes up all changing dimension! padding: 5px 5px 5px 10px;
0071 }
0072 .right-pane {
0073   background-color: var(--mat-sys-surface-container);
0074   box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.2);
0075   // (!) Padding messes up all changing dimension! padding: 5px 10px 5px 5px;
0076 }
0077
0078 .central-pane {
0079   background-color: var(--mat-sys-surface);
0080   flex: 1;
0081   overflow: auto;
0082
0083 }
0084
0085 /** BOTTOM BAR (footer) styling */
0086 .footer {
0087   display: flex;
0088   align-items: center;
0089   justify-content: space-between; /* space out left & right */
0090   min-height: 36px; /* or whatever height you want */
0091   width: 100%;
0092   position: relative;
0093   z-index: 20;
0094   background-color: var(--mat-sys-surface-container);
0095   color: var(--mat-sys-on-surface-container);
0096   box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.3);
0097   padding: 4px 8px;
0098 }
0099
0100 /* If you want columns, or just do standard flex children. */
0101 .footer-left {
0102
0103   align-items: center;
0104   gap: 8px;
0105 }
0106 .footer-center {
0107   flex: 1; /* fill space, center content if you like */
0108   display: flex;
0109   justify-content: center;
0110   align-items: center;
0111 }
0112 .footer-right {
0113   display: flex;
0114   align-items: center;
0115   gap: 8px;
0116 }
0117
0118 /* Hamburger vs. desktop nav style toggles */
0119 .hide-desktop {
0120   display: none !important;
0121 }
0122
0123 .hide-mobile {
0124   display: flex;
0125 }
0126
0127 /* For the nav items row on big screens */
0128 .nav-items.visible-nav {
0129   display: flex;
0130   align-items: center;
0131   gap: 12px;
0132 }
0133
0134 /* The "middle section" is the content projected by <ng-content select="[header]"> */
0135 .middle-section {
0136   margin-left: 24px;
0137   display: flex;
0138   align-items: center;
0139   flex-wrap: wrap;
0140   gap: 4px;
0141 }
0142
0143 /* Fills space to push theme toggle or hamburger to the right */
0144 .flex-spacer {
0145   flex: 1 1 auto;
0146 }
0147
0148 /* Position of theme toggle on large screens */
0149 .theme-toggle {
0150   margin-left: 16px;
0151 }
0152
0153 /* The mobile menu container (hidden by default) */
0154 .mobile-menu {
0155   display: none;
0156   flex-direction: column;
0157   position: absolute;
0158   top: 56px;
0159   z-index: 50;
0160   background-color: var(--mat-sys-surface);
0161   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
0162   padding: 16px;
0163   border-radius: 8px;
0164   transform: translateY(-20%);
0165   opacity: 0;
0166   visibility: hidden;
0167   transition: all 0.3s ease;
0168   gap: 12px;
0169 }
0170
0171 /* Navigation menu positioned on the left */
0172 .mobile-menu.nav-menu {
0173   left: 8px;
0174   right: auto;
0175 }
0176
0177 /* Tools menu positioned on the left (below tools hamburger) */
0178 .mobile-menu.tools-menu {
0179   left: 56px;
0180   right: auto;
0181 }
0182
0183 /* Show menu if .open is set */
0184 .mobile-menu.open {
0185   transform: translateY(0%);
0186   opacity: 1;
0187   visibility: visible;
0188 }
0189
0190 .theme-toggle-mobile {
0191   margin-top: 16px;
0192 }
0193
0194 .version-item {
0195   opacity: 0.5;
0196   font-size: 12px;
0197   padding: 8px 16px;
0198   text-align: center;
0199 }
0200
0201 /* Mobile header section (event selector etc) */
0202 .mobile-header-section {
0203   display: flex;
0204   align-items: center;
0205   gap: 8px;
0206   flex: 1;
0207 }
0208
0209 .logo-button {
0210   padding: 6px;
0211   border-radius: 50%;
0212   cursor: pointer;
0213   transition: transform 0.2s ease, box-shadow 0.3s ease;
0214   display: flex;
0215   align-items: center;
0216   justify-content: center;
0217   margin-right: 25px;
0218   width: 48px;
0219   height: 48px;
0220   box-shadow: 0 0 12px 4px rgba(255, 140, 0, 0.5);
0221 }
0222
0223 .logo-button:hover {
0224   transform: scale(1.1);
0225   box-shadow: 0 0 12px 4px rgba(255, 140, 0, 0.5);
0226 }
0227
0228 .logo-button img {
0229   width: 45px;
0230   height: 45px;
0231   border-radius: 50%;
0232   pointer-events: none;
0233   box-shadow: var(--mat-sys-level1);
0234 }
0235
0236
0237
0238 /* Tablet breakpoint - buttons may wrap */
0239 @media (max-width: 1024px) and (min-width: 769px) {
0240   .middle-section {
0241     flex: 1 1 auto;
0242     margin-left: 12px;
0243   }
0244 }
0245
0246 /* Responsive breakpoints for small screens (mobile) */
0247 @media (max-width: 768px) {
0248   .hide-desktop {
0249     display: inline-flex !important;
0250   }
0251   .hide-mobile {
0252     display: none !important;
0253   }
0254   .mobile-menu {
0255     display: flex;
0256   }
0257
0258   .top-toolbar {
0259     flex-wrap: nowrap; /* Single row on mobile */
0260     height: 56px;
0261     min-height: 56px;
0262     padding: 8px 12px;
0263     position: relative;
0264     z-index: 60;
0265     gap: 4px;
0266     align-content: center;
0267   }
0268
0269   /* Hide spacer on mobile - not needed */
0270   .flex-spacer {
0271     display: none;
0272   }
0273
0274   /* Mobile header section takes remaining space */
0275   .mobile-header-section {
0276     flex: 1;
0277     justify-content: flex-start;
0278     margin-left: 8px;
0279   }
0280
0281   .footer {
0282     flex-direction: column;
0283     align-items: stretch;
0284     gap: 12px;
0285     padding: 8px 12px;
0286   }
0287
0288   .footer-center {
0289     justify-content: flex-start;
0290     flex-wrap: wrap;
0291   }
0292
0293   .footer-left,
0294   .footer-right {
0295     justify-content: space-between;
0296     flex-wrap: wrap;
0297   }
0298 }