mirror of
https://github.com/plexguide/Huntarr.io.git
synced 2026-04-23 04:57:34 -04:00
134 lines
3.5 KiB
CSS
134 lines
3.5 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;
|
|
}
|
|
|
|
/* Fix hover effect causing layout shift - disable all transitions and size changes */
|
|
.sidebar .nav-item {
|
|
transition: none !important;
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.sidebar .nav-item:hover,
|
|
.sidebar .nav-item.active {
|
|
width: auto !important;
|
|
margin: 0 !important;
|
|
margin-bottom: 10px !important;
|
|
padding: 14px 24px !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Add spacer below sponsor icon on mobile - half space */
|
|
.sidebar .sponsor-nav::after {
|
|
content: '';
|
|
display: block;
|
|
height: 24px;
|
|
}
|
|
|
|
/* Add spacing between nav items on mobile */
|
|
.sidebar .nav-menu {
|
|
gap: 0 !important;
|
|
}
|
|
|
|
/* Add spacing between nav groups */
|
|
.sidebar .nav-group {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
/* Remove extra spacing from last nav item in groups */
|
|
.sidebar .nav-group .nav-item:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* Center logo in mobile */
|
|
.logo-container {
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.logo {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
/* Requestarr and Movie Hunt sidebars - same JavaScript behavior as desktop */
|
|
#requestarr-sidebar,
|
|
#movie-hunt-sidebar {
|
|
width: 60px !important;
|
|
padding: 20px 0 !important;
|
|
}
|
|
|
|
/* When JavaScript sets display: none, enforce it */
|
|
#sidebar[style*="display: none"],
|
|
#requestarr-sidebar[style*="display: none"],
|
|
#movie-hunt-sidebar[style*="display: none"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* When JavaScript sets display: block/flex, show as flex */
|
|
#sidebar[style*="display: block"],
|
|
#requestarr-sidebar[style*="display: block"],
|
|
#requestarr-sidebar[style*="display: flex"],
|
|
#movie-hunt-sidebar[style*="display: block"],
|
|
#movie-hunt-sidebar[style*="display: flex"] {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
/* Ensure only one sidebar shows at a time - default state */
|
|
#requestarr-sidebar:not([style*="display: block"]):not([style*="display: flex"]),
|
|
#movie-hunt-sidebar:not([style*="display: block"]):not([style*="display: flex"]) {
|
|
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,
|
|
#movie-hunt-sidebar {
|
|
width: 50px !important;
|
|
}
|
|
|
|
.nav-item i {
|
|
font-size: 20px !important;
|
|
}
|
|
} |