mirror of
https://github.com/plexguide/Huntarr.io.git
synced 2026-04-24 05:46:52 -04:00
b52776628e
This update addresses CSS loading order and specificity issues, ensuring that critical responsive styles are applied correctly. The mobile layout has been refined to stack elements vertically for better readability, with added debug borders for testing. Additionally, the external CSS files have been updated to include necessary styles, improving the overall user experience across different screen sizes.
126 lines
3.6 KiB
CSS
126 lines
3.6 KiB
CSS
/*
|
|
* Fix responsive design issues in the Settings section
|
|
* Ensures proper transitions between desktop and mobile layouts
|
|
*/
|
|
|
|
/* Improve header consistency across viewport sizes */
|
|
.section-header {
|
|
display: flex !important;
|
|
justify-content: space-between !important;
|
|
align-items: center !important;
|
|
flex-wrap: wrap !important;
|
|
background-color: transparent !important;
|
|
border-radius: 0 !important;
|
|
padding: 15px 0 !important;
|
|
margin-bottom: 20px !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Better handling of the Save button in the settings header */
|
|
.settings-actions {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Mobile-specific settings adjustments */
|
|
@media (max-width: 768px) {
|
|
/* Force mobile mode at this breakpoint for consistency - moved from tablet view */
|
|
.sidebar {
|
|
width: 60px !important;
|
|
min-width: 60px !important;
|
|
max-width: 60px !important;
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: 0 !important;
|
|
width: calc(100% - 60px) !important;
|
|
}
|
|
|
|
/* Navbar item adjustments - moved from tablet view */
|
|
.nav-item {
|
|
padding: 10px 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-item span {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-icon-wrapper {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
/* Ensure General Settings header is responsive - moved from tablet view */
|
|
#settingsSection .section-header {
|
|
flex-wrap: wrap !important;
|
|
}
|
|
|
|
/* Move Save button to its own row when space is limited - moved from tablet view */
|
|
#settingsSection .settings-actions {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* Fix the positioning of the Save button on narrow screens - moved from tablet view */
|
|
#saveSettingsButton {
|
|
position: relative !important;
|
|
top: auto !important;
|
|
right: auto !important;
|
|
}
|
|
|
|
/* Fix General Settings section header on mobile */
|
|
#settingsSection .section-header {
|
|
padding: 10px 15px !important;
|
|
min-height: 0 !important;
|
|
max-height: none !important;
|
|
flex-direction: column;
|
|
align-items: flex-start !important;
|
|
}
|
|
|
|
#settingsSection .section-header h2 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Save button positioning for mobile */
|
|
#settingsSection .settings-actions {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
#saveSettingsButton {
|
|
width: 100%;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* SWAPARR MOBILE RESPONSIVE FIX - Force vertical layout on mobile */
|
|
.app-stats-card.swaparr .stats-numbers {
|
|
display: grid !important;
|
|
grid-template-columns: 1fr !important;
|
|
grid-template-rows: repeat(4, auto) !important;
|
|
gap: 10px !important;
|
|
max-width: 300px !important;
|
|
margin: 0 auto 20px auto !important;
|
|
flex-direction: initial !important;
|
|
justify-content: initial !important;
|
|
}
|
|
|
|
.app-stats-card.swaparr .stat-box {
|
|
padding: 15px !important;
|
|
background: rgba(26, 32, 44, 0.5) !important;
|
|
border-radius: 10px !important;
|
|
border: 1px solid rgba(120, 140, 180, 0.2) !important;
|
|
transition: all 0.3s ease !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.app-stats-card.swaparr .stat-box:hover {
|
|
transform: translateY(-2px) !important;
|
|
border-color: rgba(120, 140, 180, 0.4) !important;
|
|
background: rgba(26, 32, 44, 0.7) !important;
|
|
}
|
|
}
|