/* 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; } /* 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-bottom: 5px; /* Reduced for modularity */ margin-top: 50px !important; /* Mobile spacing - fallback for first menu */ } /* Tighten spacing between 2nd and 3rd level menus */ #menu_module_div ul.nav.nav-pills.bg-light { margin-bottom: 5px !important; } #menu_page_div ul.nav.nav-pills.bg-light { margin-top: 0 !important; margin-bottom: 20px !important; } ul.nav.nav-pills .nav-item { margin: 0 2px; } ul.nav.nav-pills .nav-link { border-radius: 50rem !important; padding: 8px 20px !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; } }