| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); |
|
|
| @keyframes shimmer { |
| 0% { background-position: -468px 0; } |
| 100% { background-position: 468px 0; } |
| } |
|
|
| .skeleton { |
| background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); |
| background-size: 468px 100%; |
| animation: shimmer 1.2s ease-in-out infinite; |
| border-radius: 8px; |
| } |
|
|
| .skeleton-text { height: 16px; margin-bottom: 8px; } |
| .skeleton-title { height: 24px; width: 60%; margin-bottom: 12px; } |
|
|
| |
| .notification, .modal-overlay, .loading-overlay { |
| will-change: opacity, transform; |
| transform: translateZ(0); |
| } |
|
|
| .channel-item, .epg-item { |
| contain: layout style paint; |
| } |
|
|
| |
| .fab-button { |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
|
|
| .fab-button:hover { |
| transform: translateY(-4px); |
| } |
|
|
| :root { |
| --primary: #6366f1; |
| --primary-dark: #4f46e5; |
| --success: #10b981; |
| --warning: #f59e0b; |
| --danger: #ef4444; |
| --dark: #1e293b; |
| --light: #f8fafc; |
| --border: #e2e8f0; |
| --shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| } |
|
|
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| body { |
| font-family: 'Inter', -apple-system, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| background-attachment: fixed; |
| min-height: 100vh; |
| line-height: 1.5; |
| font-size: 14px; |
| color: var(--dark); |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| *, *::before, *::after { |
| animation: none !important; |
| transition: none !important; |
| } |
|
|
| .notification, |
| .login-overlay, |
| .epg-video-modal { |
| transition: opacity 0.15s ease !important; |
| } |
|
|
| .app-container { |
| display: flex; |
| flex-direction: column; |
| min-height: 100vh; |
| max-width: 1600px; |
| margin: 20px auto; |
| background: rgba(255, 255, 255, 0.95); |
| border-radius: 20px; |
| box-shadow: var(--shadow); |
| overflow: hidden; |
| contain: layout style paint; |
| } |
|
|
| .app-body { |
| flex: 1; |
| padding: 20px 30px; |
| transform: translateZ(0); |
| will-change: scroll-position; |
| } |
|
|
| .header { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| padding: 20px 30px; |
| contain: layout style paint; |
| } |
|
|
| .header-top { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 15px; |
| gap: 15px; |
| flex-wrap: wrap; |
| } |
|
|
| .header h1 { |
| font-size: 1.8em; |
| font-weight: 700; |
| margin-bottom: 5px; |
| } |
|
|
| .subtitle { |
| font-size: 0.9em; |
| opacity: 0.9; |
| } |
|
|
| .status-bar { |
| display: flex; |
| justify-content: center; |
| gap: 20px; |
| flex-wrap: wrap; |
| font-size: 0.85em; |
| } |
|
|
| .status-item { |
| background: rgba(255, 255, 255, 0.2); |
| padding: 8px 15px; |
| border-radius: 20px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| } |
|
|
| .btn-logout { |
| padding: 10px 20px; |
| background: rgba(255, 255, 255, 0.2); |
| color: white; |
| border: 2px solid rgba(255, 255, 255, 0.5); |
| border-radius: 20px; |
| cursor: pointer; |
| font-size: 0.9em; |
| font-weight: 600; |
| } |
|
|
| .btn-logout:hover { |
| background: rgba(255, 255, 255, 0.3); |
| } |
|
|
| .user-type-badge { |
| display: inline-block; |
| padding: 3px 10px; |
| border-radius: 15px; |
| font-size: 0.7em; |
| font-weight: 700; |
| margin-left: 8px; |
| } |
|
|
| .user-type-badge.admin { |
| background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); |
| color: white; |
| } |
|
|
| .user-type-badge.user { |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); |
| color: white; |
| } |
|
|
| .tabs { |
| display: flex; |
| background: rgba(248, 250, 252, 0.8); |
| border-bottom: 1px solid var(--border); |
| overflow-x: auto; |
| scrollbar-width: none; |
| contain: layout style; |
| } |
|
|
| .tabs::-webkit-scrollbar { |
| display: none; |
| } |
|
|
| .tab-button { |
| flex: 1; |
| padding: 15px 18px; |
| background: transparent; |
| border: none; |
| cursor: pointer; |
| font-size: 0.9em; |
| color: var(--dark); |
| font-weight: 500; |
| text-decoration: none; |
| text-align: center; |
| min-width: 120px; |
| border-bottom: 3px solid transparent; |
| } |
|
|
| .tab-button:hover { |
| background: rgba(99, 102, 241, 0.05); |
| } |
|
|
| .tab-button.active { |
| background: white; |
| font-weight: 600; |
| color: var(--primary); |
| border-bottom-color: var(--primary); |
| } |
|
|
| .btn { |
| padding: 10px 20px; |
| border: none; |
| border-radius: 10px; |
| cursor: pointer; |
| font-size: 0.9em; |
| font-weight: 600; |
| contain: layout style paint; |
| } |
|
|
| .btn:hover:not(:disabled) { |
| opacity: 0.9; |
| } |
|
|
| .btn:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| } |
|
|
| .btn-primary { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| } |
|
|
| .btn-success { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| color: white; |
| } |
|
|
| .btn-warning { |
| background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); |
| color: white; |
| } |
|
|
| .btn-danger { |
| background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); |
| color: white; |
| } |
|
|
| .form-control { |
| width: 100%; |
| padding: 12px 15px; |
| border: 2px solid var(--border); |
| border-radius: 10px; |
| font-size: 0.9em; |
| background: white; |
| font-family: inherit; |
| } |
|
|
| .form-control:focus { |
| outline: none; |
| border-color: var(--primary); |
| } |
|
|
| .form-group { |
| margin-bottom: 15px; |
| } |
|
|
| .form-group label { |
| display: block; |
| margin-bottom: 6px; |
| font-weight: 600; |
| color: var(--dark); |
| font-size: 0.85em; |
| } |
|
|
| .section-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 20px; |
| gap: 15px; |
| flex-wrap: wrap; |
| } |
|
|
| .stats-box { |
| background: rgba(99, 102, 241, 0.1); |
| padding: 12px 20px; |
| border-radius: 12px; |
| margin-bottom: 20px; |
| font-size: 0.9em; |
| border: 1px solid rgba(99, 102, 241, 0.2); |
| } |
|
|
| .channel-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); |
| gap: 15px; |
| content-visibility: auto; |
| } |
|
|
| .channel-card { |
| background: white; |
| border: 2px solid transparent; |
| border-radius: 15px; |
| padding: 20px 15px; |
| cursor: pointer; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
| contain: layout style paint; |
| content-visibility: auto; |
| } |
|
|
| .channel-card:hover { |
| border-color: var(--primary); |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); |
| } |
|
|
| .channel-name { |
| font-size: 1em; |
| color: var(--dark); |
| margin-bottom: 12px; |
| font-weight: 600; |
| text-align: center; |
| min-height: 45px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .channel-actions { |
| display: flex; |
| gap: 8px; |
| } |
|
|
| .channel-actions .btn { |
| flex: 1; |
| padding: 8px; |
| font-size: 0.85em; |
| } |
|
|
| .player-page { |
| display: flex; |
| flex-direction: column; |
| gap: 15px; |
| } |
|
|
| .player-controls { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| gap: 12px; |
| align-items: end; |
| } |
|
|
| .video-wrapper { |
| position: relative; |
| background: #1e293b; |
| border-radius: 15px; |
| overflow: hidden; |
| aspect-ratio: 16 / 9; |
| max-height: 550px; |
| contain: layout style; |
| } |
|
|
| video { |
| width: 100%; |
| height: 100%; |
| display: block; |
| object-fit: contain; |
| } |
|
|
| .video-placeholder { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: #1e293b; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| } |
|
|
| .video-placeholder.hidden { |
| display: none; |
| } |
|
|
| .placeholder-icon { |
| font-size: 50px; |
| margin-bottom: 12px; |
| opacity: 0.6; |
| } |
|
|
| .stream-info-panel { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 15px; |
| } |
|
|
| .info-section, |
| .record-section { |
| background: rgba(255, 255, 255, 0.95); |
| padding: 20px; |
| border-radius: 15px; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| contain: layout style paint; |
| } |
|
|
| .info-section h3, |
| .record-section h3 { |
| margin-bottom: 12px; |
| color: var(--dark); |
| font-size: 1em; |
| font-weight: 700; |
| } |
|
|
| .info-content { |
| background: #f8fafc; |
| padding: 12px; |
| border-radius: 10px; |
| font-family: 'Courier New', monospace; |
| font-size: 0.8em; |
| line-height: 1.5; |
| white-space: pre-wrap; |
| word-break: break-all; |
| min-height: 100px; |
| max-height: 250px; |
| overflow-y: auto; |
| border: 1px solid #e2e8f0; |
| color: var(--dark); |
| } |
|
|
| .btn-record { |
| width: 100%; |
| padding: 14px; |
| background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); |
| color: white; |
| border: none; |
| border-radius: 12px; |
| cursor: pointer; |
| font-size: 0.95em; |
| font-weight: 700; |
| } |
|
|
| .btn-record:hover:not(:disabled) { |
| opacity: 0.9; |
| } |
|
|
| .btn-record:disabled { |
| background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); |
| cursor: not-allowed; |
| } |
|
|
| .record-status { |
| margin-top: 12px; |
| padding: 12px; |
| border-radius: 10px; |
| font-size: 0.85em; |
| text-align: center; |
| display: none; |
| } |
|
|
| .record-status.show { |
| display: block; |
| } |
|
|
| .record-status.recording { |
| background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); |
| color: #92400e; |
| border: 2px solid #fbbf24; |
| } |
|
|
| .record-status.success { |
| background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); |
| color: #065f46; |
| border: 2px solid #10b981; |
| } |
|
|
| .record-status.error { |
| background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); |
| color: #991b1b; |
| border: 2px solid #ef4444; |
| } |
|
|
| .record-info { |
| background: rgba(219, 234, 254, 0.5); |
| padding: 12px; |
| border-radius: 10px; |
| margin-top: 12px; |
| font-size: 0.85em; |
| line-height: 1.5; |
| } |
|
|
| .epg-page { |
| display: flex; |
| flex-direction: column; |
| gap: 15px; |
| } |
|
|
| .epg-controls { |
| display: grid; |
| grid-template-columns: 1fr 1fr auto; |
| gap: 12px; |
| align-items: end; |
| } |
|
|
| .epg-list { |
| max-height: 550px; |
| overflow-y: auto; |
| background: rgba(248, 250, 252, 0.5); |
| border-radius: 15px; |
| padding: 15px; |
| content-visibility: auto; |
| } |
|
|
| .epg-item { |
| background: white; |
| padding: 15px; |
| margin-bottom: 12px; |
| border-radius: 12px; |
| border-left: 4px solid var(--primary); |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
| contain: layout style paint; |
| content-visibility: auto; |
| } |
|
|
| .epg-item:hover { |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15); |
| } |
|
|
| .epg-time { |
| font-weight: 700; |
| color: var(--primary); |
| margin-bottom: 6px; |
| font-size: 0.9em; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .epg-title { |
| font-size: 1em; |
| color: var(--dark); |
| margin-bottom: 6px; |
| font-weight: 600; |
| } |
|
|
| .epg-description { |
| color: #64748b; |
| font-size: 0.85em; |
| line-height: 1.4; |
| margin-top: 6px; |
| padding: 10px; |
| background: #f8fafc; |
| border-radius: 8px; |
| } |
|
|
| .epg-item.current { |
| border-left-color: var(--success); |
| background: linear-gradient(135deg, #d1fae5 0%, white 100%); |
| } |
|
|
| .epg-item.current .epg-time { |
| color: var(--success); |
| } |
|
|
| .epg-item.past { |
| opacity: 0.7; |
| } |
|
|
| .epg-actions { |
| margin-top: 10px; |
| display: flex; |
| gap: 8px; |
| } |
|
|
| .epg-actions .btn { |
| flex: 1; |
| padding: 8px 12px; |
| font-size: 0.85em; |
| } |
|
|
| .epg-video-modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(30, 41, 59, 0.95); |
| z-index: 9999; |
| align-items: center; |
| justify-content: center; |
| padding: 20px; |
| } |
|
|
| .epg-video-modal.show { |
| display: flex; |
| } |
|
|
| .epg-video-container { |
| background: white; |
| border-radius: 20px; |
| max-width: 1100px; |
| width: 100%; |
| max-height: 90vh; |
| overflow: hidden; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); |
| } |
|
|
| .epg-video-header { |
| padding: 15px 25px; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| .epg-video-header h3 { |
| font-size: 1.2em; |
| font-weight: 700; |
| margin: 0; |
| } |
|
|
| .epg-video-close { |
| background: rgba(255, 255, 255, 0.2); |
| border: none; |
| color: white; |
| font-size: 1.4em; |
| width: 35px; |
| height: 35px; |
| border-radius: 50%; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .epg-video-close:hover { |
| background: rgba(255, 255, 255, 0.3); |
| } |
|
|
| .epg-video-body { |
| padding: 0; |
| } |
|
|
| .epg-video-wrapper { |
| position: relative; |
| background: #000; |
| aspect-ratio: 16 / 9; |
| max-height: 65vh; |
| } |
|
|
| .epg-video-wrapper video { |
| width: 100%; |
| height: 100%; |
| display: block; |
| } |
|
|
| .epg-video-info { |
| padding: 15px 25px; |
| background: #f8fafc; |
| } |
|
|
| .epg-video-info p { |
| margin: 6px 0; |
| color: var(--dark); |
| font-size: 0.9em; |
| } |
|
|
| .cache-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 15px; |
| margin-bottom: 25px; |
| } |
|
|
| .cache-card { |
| background: white; |
| padding: 20px; |
| border-radius: 15px; |
| border-left: 4px solid var(--primary); |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
| contain: layout style paint; |
| } |
|
|
| .cache-card h3 { |
| color: var(--dark); |
| margin-bottom: 12px; |
| font-size: 1em; |
| font-weight: 700; |
| } |
|
|
| .cache-detail { |
| display: flex; |
| justify-content: space-between; |
| padding: 8px 0; |
| border-bottom: 1px solid var(--border); |
| font-size: 0.85em; |
| } |
|
|
| .cache-detail:last-child { |
| border-bottom: none; |
| } |
|
|
| .cache-label { |
| font-weight: 600; |
| color: #64748b; |
| } |
|
|
| .cache-value { |
| font-family: 'Courier New', monospace; |
| color: var(--dark); |
| font-weight: 600; |
| } |
|
|
| .cache-actions { |
| background: rgba(255, 255, 255, 0.95); |
| padding: 20px; |
| border-radius: 15px; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .button-group { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| } |
|
|
| .footer { |
| background: rgba(248, 250, 252, 0.8); |
| padding: 15px; |
| text-align: center; |
| border-top: 1px solid var(--border); |
| color: #64748b; |
| font-size: 0.85em; |
| } |
|
|
| .footer a { |
| color: var(--primary); |
| text-decoration: none; |
| font-weight: 600; |
| } |
|
|
| .notification { |
| position: fixed; |
| top: 20px; |
| right: 20px; |
| padding: 12px 20px; |
| border-radius: 12px; |
| z-index: 10000; |
| color: white; |
| font-weight: 600; |
| font-size: 0.9em; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| opacity: 1; |
| } |
|
|
| .notification.notification-success { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| } |
|
|
| .notification.notification-error { |
| background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); |
| } |
|
|
| .notification.notification-info { |
| background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); |
| } |
|
|
| .login-overlay { |
| display: flex; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| z-index: 99999; |
| align-items: center; |
| justify-content: center; |
| padding: 20px; |
| } |
|
|
| .login-overlay.hide { |
| display: none !important; |
| } |
|
|
| .login-box { |
| background: rgba(255, 255, 255, 0.95); |
| border-radius: 25px; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| overflow: hidden; |
| max-width: 420px; |
| width: 100%; |
| } |
|
|
| .login-box-header { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| padding: 30px 25px; |
| text-align: center; |
| } |
|
|
| .login-box-header h1 { |
| font-size: 2em; |
| font-weight: 700; |
| margin-bottom: 8px; |
| } |
|
|
| .login-box-body { |
| padding: 30px 25px; |
| } |
|
|
| .login-form-group { |
| margin-bottom: 20px; |
| } |
|
|
| .login-form-group label { |
| display: block; |
| margin-bottom: 8px; |
| font-weight: 600; |
| color: var(--dark); |
| font-size: 0.9em; |
| } |
|
|
| .login-form-group input { |
| width: 100%; |
| padding: 12px 15px; |
| border: 2px solid var(--border); |
| border-radius: 10px; |
| font-size: 0.9em; |
| } |
|
|
| .login-form-group input:focus { |
| outline: none; |
| border-color: var(--primary); |
| } |
|
|
| .login-btn { |
| width: 100%; |
| padding: 14px; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| border: none; |
| border-radius: 10px; |
| font-size: 1em; |
| font-weight: 700; |
| cursor: pointer; |
| } |
|
|
| .login-btn:hover:not(:disabled) { |
| opacity: 0.9; |
| } |
|
|
| .login-btn:disabled { |
| opacity: 0.7; |
| cursor: not-allowed; |
| } |
|
|
| .login-error { |
| background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); |
| color: #991b1b; |
| padding: 12px; |
| border-radius: 10px; |
| margin-bottom: 15px; |
| display: none; |
| border: 2px solid #fca5a5; |
| font-size: 0.85em; |
| } |
|
|
| .login-error.show { |
| display: block; |
| } |
|
|
| .login-info { |
| background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); |
| color: #1e40af; |
| padding: 12px; |
| border-radius: 10px; |
| margin-bottom: 15px; |
| font-size: 0.85em; |
| border: 1px solid #93c5fd; |
| } |
|
|
| .password-toggle-login { |
| position: relative; |
| } |
|
|
| .password-toggle-btn-login { |
| position: absolute; |
| right: 12px; |
| top: 50%; |
| transform: translateY(-50%); |
| background: none; |
| border: none; |
| cursor: pointer; |
| color: #64748b; |
| font-size: 1.1em; |
| padding: 5px; |
| } |
|
|
| .login-type-switch { |
| text-align: center; |
| margin-top: 12px; |
| padding-top: 12px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .login-type-switch a { |
| color: var(--primary); |
| text-decoration: none; |
| font-weight: 600; |
| cursor: pointer; |
| font-size: 0.85em; |
| } |
|
|
| .loading-overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| z-index: 99999; |
| } |
|
|
| .loading-overlay.hide { |
| display: none !important; |
| } |
|
|
| .loading-spinner-large { |
| width: 50px; |
| height: 50px; |
| border: 4px solid rgba(255,255,255,.2); |
| border-radius: 50%; |
| border-top-color: #fff; |
| animation: spin 1s linear infinite !important; |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| .loading-text { |
| color: white; |
| margin-top: 15px; |
| font-size: 1em; |
| font-weight: 600; |
| } |
|
|
| .loading-spinner { |
| text-align: center; |
| padding: 40px; |
| color: var(--primary); |
| } |
|
|
| .badge { |
| padding: 5px 12px; |
| border-radius: 15px; |
| font-size: 0.75em; |
| font-weight: 700; |
| display: inline-block; |
| } |
|
|
| .badge-success { |
| background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); |
| color: #065f46; |
| border: 1px solid #6ee7b7; |
| } |
|
|
| .badge-danger { |
| background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); |
| color: #991b1b; |
| border: 1px solid #fca5a5; |
| } |
|
|
| .empty-state { |
| text-align: center; |
| padding: 60px 30px; |
| color: #94a3b8; |
| } |
|
|
| .empty-state-icon { |
| font-size: 60px; |
| margin-bottom: 15px; |
| opacity: 0.5; |
| } |
|
|
| .empty-state-text { |
| font-size: 1em; |
| margin-bottom: 8px; |
| font-weight: 600; |
| } |
|
|
| .search-box { |
| position: relative; |
| } |
|
|
| .search-box input { |
| width: 100%; |
| padding: 12px 15px 12px 40px; |
| border: 2px solid var(--border); |
| border-radius: 12px; |
| font-size: 0.9em; |
| } |
|
|
| .search-box input:focus { |
| border-color: var(--primary); |
| } |
|
|
| .search-box::before { |
| content: '🔍'; |
| position: absolute; |
| left: 12px; |
| top: 50%; |
| transform: translateY(-50%); |
| font-size: 1.1em; |
| opacity: 0.5; |
| } |
|
|
| .skeleton { |
| background: #e0e0e0; |
| border-radius: 8px; |
| } |
|
|
| .skeleton-card { |
| height: 180px; |
| } |
|
|
| @media (max-width: 768px) { |
| .app-container { |
| margin: 10px; |
| border-radius: 15px; |
| } |
|
|
| .app-body { |
| padding: 15px 20px; |
| } |
|
|
| .header { |
| padding: 15px 20px; |
| } |
|
|
| .header h1 { |
| font-size: 1.5em; |
| } |
|
|
| .header-top { |
| flex-direction: column; |
| } |
|
|
| .status-bar { |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .status-item { |
| width: 100%; |
| justify-content: space-between; |
| } |
|
|
| .tab-button { |
| min-width: 100px; |
| padding: 12px 14px; |
| } |
|
|
| .channel-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .epg-controls { |
| grid-template-columns: 1fr; |
| } |
|
|
| .player-controls { |
| grid-template-columns: 1fr; |
| } |
|
|
| .stream-info-panel { |
| grid-template-columns: 1fr; |
| } |
|
|
| .cache-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .button-group { |
| flex-direction: column; |
| } |
|
|
| .epg-video-container { |
| max-height: 95vh; |
| } |
| } |
|
|
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: #f1f5f9; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: #cbd5e1; |
| border-radius: 4px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: #94a3b8; |
| } |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| .text-center { |
| text-align: center; |
| } |
|
|
| .admin-only { |
| display: none; |
| } |
|
|
| .channel-card, |
| .epg-item, |
| .cache-card { |
| transform: translateZ(0); |
| backface-visibility: hidden; |
| } |
|
|
| @media print { |
| body { |
| background: white; |
| } |
|
|
| .header, |
| .tabs, |
| .btn, |
| .footer, |
| .notification { |
| display: none; |
| } |
| } |
| .epg-page { |
| height: 100%; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .epg-list-container { |
| flex: 1; |
| overflow-y: auto; |
| -webkit-overflow-scrolling: touch; |
| contain: strict; |
| padding-bottom: 80px; |
| } |
|
|
| .epg-list-container::-webkit-scrollbar { |
| width: 6px; |
| } |
|
|
| .epg-list-container::-webkit-scrollbar-thumb { |
| background: var(--primary-light); |
| border-radius: 4px; |
| } |
|
|
| .epg-controls-panel { |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| background: rgba(255, 255, 255, 0.9); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border-bottom: 1px solid var(--border); |
| } |
