163 lines
4.7 KiB
CSS
163 lines
4.7 KiB
CSS
/* Shared Mobile Custom CSS for Anime Downloader */
|
|
|
|
/* Custom Notify Styling - Mobile Default */
|
|
.bootstrap-notify-container,
|
|
[data-notify="container"] {
|
|
max-width: 90vw !important;
|
|
width: auto !important;
|
|
right: 5vw !important;
|
|
left: 5vw !important;
|
|
padding: 12px 16px !important;
|
|
border-radius: 10px !important;
|
|
background: var(--notify-bg) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
border: 1px solid var(--notify-border) !important;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
|
|
color: #e0e7ff !important;
|
|
font-size: 13px !important;
|
|
z-index: 10000 !important;
|
|
}
|
|
|
|
/* Desktop Notify: 오른쪽 정렬, 적절한 사이즈 */
|
|
@media (min-width: 769px) {
|
|
.bootstrap-notify-container,
|
|
[data-notify="container"] {
|
|
max-width: 450px !important;
|
|
min-width: 300px !important;
|
|
width: auto !important;
|
|
right: 20px !important;
|
|
left: auto !important;
|
|
}
|
|
}
|
|
|
|
[data-notify="container"].alert-success {
|
|
border-color: rgba(16, 185, 129, 0.4) !important;
|
|
background: var(--notify-success-bg, rgba(6, 78, 59, 0.95)) !important;
|
|
}
|
|
|
|
[data-notify="container"].alert-warning {
|
|
border-color: rgba(245, 158, 11, 0.4) !important;
|
|
background: var(--notify-warning-bg, rgba(120, 53, 15, 0.95)) !important;
|
|
}
|
|
|
|
[data-notify="container"].alert-danger {
|
|
border-color: rgba(239, 68, 68, 0.4) !important;
|
|
background: var(--notify-danger-bg, rgba(127, 29, 29, 0.95)) !important;
|
|
}
|
|
|
|
[data-notify="message"] {
|
|
color: #e0e7ff !important;
|
|
}
|
|
|
|
[data-notify="title"] {
|
|
color: #fff !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
/* Common Mobile Responsive Fixes */
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding-top: 5px !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
/* Compact Navbar */
|
|
.navbar {
|
|
padding-top: 0.25rem !important;
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
|
|
/* Global Navigation Pills Fix & Premium Styling */
|
|
ul.nav.nav-pills.bg-light {
|
|
background-color: rgba(30, 41, 59, 0.6) !important;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 50rem !important; /* Pill shape container */
|
|
padding: 6px !important;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
|
|
display: inline-flex !important; /* Fit content */
|
|
flex-wrap: wrap; /* allow wrap on small screens */
|
|
justify-content: center;
|
|
width: auto !important; /* Prevent full width */
|
|
margin-top: 2px !important; /* Reduced for modularity */
|
|
}
|
|
|
|
/* Override for the fallback above to be tighter */
|
|
ul.nav.nav-pills.bg-light {
|
|
margin-top: 4px !important;
|
|
}
|
|
|
|
/* Tighten spacing between 2nd and 3rd level menus */
|
|
#menu_module_div ul.nav.nav-pills.bg-light {
|
|
margin-bottom: 2px !important;
|
|
}
|
|
|
|
#menu_page_div ul.nav.nav-pills.bg-light {
|
|
margin-top: -4px !important;
|
|
margin-bottom: 12px !important;
|
|
}
|
|
|
|
ul.nav.nav-pills .nav-item {
|
|
margin: 0 2px;
|
|
}
|
|
|
|
ul.nav.nav-pills .nav-link {
|
|
border-radius: 50rem !important;
|
|
padding: 6px 16px !important;
|
|
color: #94a3b8 !important; /* Muted text */
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
ul.nav.nav-pills .nav-link:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
color: #fff !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
ul.nav.nav-pills .nav-link.active {
|
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
|
|
color: #fff !important;
|
|
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
|
}
|
|
|
|
/* Layout Expansion on Mobile */
|
|
.container, .container-fluid, .row, form, #main_container {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding-left: 8px !important;
|
|
padding-right: 8px !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Card/Table Container Fix */
|
|
.card, .table-responsive {
|
|
width: 100% !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
border-radius: 12px !important;
|
|
}
|
|
}
|
|
|
|
/* Global Navigation Spacing Adjustments (Plugin Specific) */
|
|
#menu_module_div {
|
|
padding-top: 52px !important; /* Adjusted for compact navbar (~52px) */
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
#menu_module_div .nav-pills,
|
|
#menu_page_div .nav-pills {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 2px !important;
|
|
}
|
|
|
|
/* Tighten main container for desktop */
|
|
@media (min-width: 769px) {
|
|
#main_container {
|
|
margin-top: 0 !important;
|
|
padding-top: 0 !important;
|
|
}
|
|
}
|