Spaces:
Sleeping
Sleeping
| /* Sidebar placed on the left bottom */ | |
| #sidebar { | |
| position: fixed; /* stay in place when scrolling */ | |
| left: 0; /* stick to left edge */ | |
| bottom: 0; /* stick to bottom edge */ | |
| width: 140px; /* fixed width of a sidebar */ | |
| /* look & feel */ | |
| background: #202124; /* dark gray background */ | |
| color: #fff; /* white text */ | |
| padding: 12px 8px; /* inner padding */ | |
| box-sizing: border-box; /* include padding in width */ | |
| display: flex; /* flex container */ | |
| flex-direction: column; /* stack items vertically */ | |
| gap: 8px; /* space between items */ | |
| } | |
| /* buttons inside the bar */ | |
| #sidebar a { | |
| display: block; /* make links block-level */ | |
| padding: 8px 4px; /* inner padding */ | |
| border-radius: 4px; /* rounded corners */ | |
| color: #fff; /* white text */ | |
| text-decoration: none; /* no underline */ | |
| text-align: center; /* center text */ | |
| background: #3d4043; /* slightly lighter bg */ | |
| font-weight: 600; /* semi-bold text */ | |
| font-size: 14px; /* slightly larger text */ | |
| } | |
| #sidebar a:hover { | |
| background: #5f6368; /* background of a button when hover */ | |
| } | |
| /* keep main app shifted right so it doesn’t sit under the bar */ | |
| body { | |
| margin-left: 140px ; /* move main content to the reight to not cover with sidebar */ | |
| } | |