mirror of
https://github.com/plexguide/Huntarr.io.git
synced 2026-01-13 08:18:58 -05:00
d1a5233439
- Added a mobile-specific topbar to the index template for improved navigation on smaller screens. - Updated CSS to hide the original topbar in mobile view and adjust main content padding accordingly.
90 lines
2.1 KiB
CSS
90 lines
2.1 KiB
CSS
/*
|
|
* Huntarr Mobile CSS
|
|
* Handles all mobile-specific styling and sidebar behavior
|
|
*/
|
|
|
|
/* Mobile viewport adjustments */
|
|
@media (max-width: 768px) {
|
|
/* Sidebar behavior - exactly like desktop but with mobile styling */
|
|
.sidebar {
|
|
width: 60px !important;
|
|
padding: 20px 0 !important;
|
|
}
|
|
|
|
/* Hide sidebar text and labels in mobile */
|
|
.sidebar h1,
|
|
.nav-item span,
|
|
.switch-label {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Adjust nav item icons for mobile */
|
|
.nav-item i {
|
|
margin-right: 0 !important;
|
|
font-size: 22px !important;
|
|
}
|
|
|
|
/* Center logo in mobile */
|
|
.logo-container {
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.logo {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
/* Requestarr sidebar - same JavaScript behavior as desktop */
|
|
#requestarr-sidebar {
|
|
width: 60px !important;
|
|
padding: 20px 0 !important;
|
|
}
|
|
|
|
/* When JavaScript sets display: none, enforce it */
|
|
#sidebar[style*="display: none"],
|
|
#requestarr-sidebar[style*="display: none"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* When JavaScript sets display: block, show as flex */
|
|
#sidebar[style*="display: block"],
|
|
#requestarr-sidebar[style*="display: block"] {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
/* Ensure only one sidebar shows at a time - default state */
|
|
#requestarr-sidebar:not([style*="display: block"]) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* User nav hiding for local bypass mode */
|
|
#userNav[style*="display: none"] {
|
|
display: none !important;
|
|
}
|
|
|
|
.hide-for-bypass {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide original topbar in mobile view */
|
|
.top-bar {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Adjust main content padding when mobile topbar is active */
|
|
.main-content {
|
|
padding-top: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Very small screens */
|
|
@media (max-width: 480px) {
|
|
.sidebar,
|
|
#requestarr-sidebar {
|
|
width: 50px !important;
|
|
}
|
|
|
|
.nav-item i {
|
|
font-size: 20px !important;
|
|
}
|
|
} |