Semantic_Mismatch / app /web /sidebar.css
VirVen's picture
Upload folder using huggingface_hub
2271a07 verified
/* 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 !important; /* move main content to the reight to not cover with sidebar */
}