Spaces:
Running
Running
| /* Base Styles & Variables */ | |
| :root { | |
| /* Colors - Material Design inspired */ | |
| --primary-color: #1976d2; | |
| --primary-light: #42a5f5; | |
| --primary-dark: #0d47a1; | |
| --secondary-color: #f50057; | |
| --surface-color: #ffffff; | |
| --background-color: #f5f7fa; | |
| --text-primary: #212121; | |
| --text-secondary: #757575; | |
| --divider-color: #e0e0e0; | |
| --error-color: #f44336; | |
| --success-color: #4caf50; | |
| --warning-color: #ff9800; | |
| /* Elevation/Shadow */ | |
| --shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); | |
| --shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); | |
| --shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); | |
| --shadow-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); | |
| /* Border Radius */ | |
| --border-radius-sm: 4px; | |
| --border-radius-md: 8px; | |
| --border-radius-lg: 16px; | |
| /* Spacing */ | |
| --spacing-xs: 4px; | |
| --spacing-sm: 8px; | |
| --spacing-md: 16px; | |
| --spacing-lg: 24px; | |
| --spacing-xl: 32px; | |
| /* Animation */ | |
| --transition-fast: 0.2s; | |
| --transition-regular: 0.3s; | |
| --transition-slow: 0.5s; | |
| /* Layout */ | |
| --header-height: 64px; | |
| --footer-height: 50px; | |
| --sidebar-width: 240px; | |
| /* Font Sizes */ | |
| --font-xs: 12px; | |
| --font-sm: 14px; | |
| --font-md: 16px; | |
| --font-lg: 18px; | |
| --font-xl: 20px; | |
| --font-xxl: 24px; | |
| } | |
| /* Base Reset */ | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| background-color: var(--background-color); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| margin: 0; | |
| padding: 0; | |
| overflow-x: hidden; | |
| } | |
| /* App Container */ | |
| .app-container { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| /* Header Styles */ | |
| .app-header { | |
| background-color: var(--surface-color); | |
| box-shadow: var(--shadow-1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| height: var(--header-height); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .header-content { | |
| width: 100%; | |
| max-width: 1440px; | |
| margin: 0 auto; | |
| padding: 0 var(--spacing-lg); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .logo-container { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .logo-icon { | |
| color: var(--primary-color); | |
| font-size: var(--font-xl); | |
| margin-right: var(--spacing-sm); | |
| } | |
| .app-title { | |
| font-size: var(--font-xl); | |
| font-weight: 500; | |
| color: var(--primary-dark); | |
| white-space: nowrap; | |
| } | |
| .search-wrapper { | |
| flex-grow: 1; | |
| max-width: 500px; | |
| margin-left: var(--spacing-lg); | |
| } | |
| .search-container { | |
| position: relative; | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| background-color: rgba(0, 0, 0, 0.04); | |
| border-radius: var(--border-radius-md); | |
| padding: var(--spacing-xs) var(--spacing-md); | |
| transition: background-color var(--transition-fast); | |
| } | |
| .search-container:focus-within { | |
| background-color: rgba(0, 0, 0, 0.08); | |
| box-shadow: 0 0 0 2px var(--primary-light); | |
| } | |
| .search-icon { | |
| color: var(--text-secondary); | |
| margin-right: var(--spacing-sm); | |
| } | |
| .search-input { | |
| flex-grow: 1; | |
| border: none; | |
| background: transparent; | |
| padding: var(--spacing-sm); | |
| font-size: var(--font-md); | |
| color: var(--text-primary); | |
| outline: none; | |
| } | |
| .search-input::placeholder { | |
| color: var(--text-secondary); | |
| } | |
| .clear-search-btn { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| opacity: 0.7; | |
| transition: opacity var(--transition-fast); | |
| display: none; | |
| padding: var(--spacing-xs); | |
| } | |
| .clear-search-btn:hover { | |
| opacity: 1; | |
| } | |
| /* Main Content */ | |
| .app-main { | |
| flex: 1; | |
| padding: var(--spacing-lg); | |
| max-width: 1440px; | |
| width: 100%; | |
| margin: 0 auto; | |
| } | |
| /* Controls Bar */ | |
| .controls-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .result-counter { | |
| color: var(--text-secondary); | |
| font-size: var(--font-sm); | |
| } | |
| .view-toggle { | |
| display: flex; | |
| gap: var(--spacing-xs); | |
| } | |
| .view-btn { | |
| background: none; | |
| border: none; | |
| padding: var(--spacing-sm); | |
| border-radius: var(--border-radius-sm); | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| transition: all var(--transition-fast); | |
| } | |
| .view-btn:hover { | |
| background-color: rgba(0, 0, 0, 0.04); | |
| } | |
| .view-btn.active { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| /* Loading State */ | |
| .loading-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--spacing-xl) 0; | |
| color: var(--text-secondary); | |
| } | |
| .loading-spinner { | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| border-left: 4px solid var(--primary-color); | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Error State */ | |
| .error-container { | |
| text-align: center; | |
| padding: var(--spacing-xl) 0; | |
| color: var(--error-color); | |
| } | |
| .error-container i { | |
| font-size: 48px; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .retry-btn { | |
| margin-top: var(--spacing-md); | |
| padding: var(--spacing-sm) var(--spacing-lg); | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: var(--border-radius-sm); | |
| cursor: pointer; | |
| font-size: var(--font-md); | |
| transition: background-color var(--transition-fast); | |
| } | |
| .retry-btn:hover { | |
| background-color: var(--primary-dark); | |
| } | |
| /* Video Grid */ | |
| .video-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: var(--spacing-lg); | |
| } | |
| .video-grid.list-view { | |
| grid-template-columns: 1fr; | |
| gap: var(--spacing-md); | |
| } | |
| .video-card { | |
| background-color: var(--surface-color); | |
| border-radius: var(--border-radius-md); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-1); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .video-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-2); | |
| } | |
| .video-card.list-view { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .video-thumbnail { | |
| position: relative; | |
| width: 100%; | |
| padding-top: 56.25%; /* 16:9 aspect ratio */ | |
| background-color: #000; | |
| overflow: hidden; | |
| } | |
| .list-view .video-thumbnail { | |
| width: 180px; | |
| min-width: 180px; | |
| height: 100px; | |
| padding-top: 0; | |
| } | |
| .thumbnail-placeholder { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #2c3e50; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .play-icon { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| color: white; | |
| background-color: rgba(0, 0, 0, 0.6); | |
| border-radius: 50%; | |
| width: 50px; | |
| height: 50px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .video-card:hover .play-icon { | |
| opacity: 1; | |
| } | |
| .video-info { | |
| padding: var(--spacing-md); | |
| } | |
| .list-view .video-info { | |
| flex: 1; | |
| } | |
| .video-title { | |
| font-size: var(--font-md); | |
| font-weight: 500; | |
| margin-bottom: var(--spacing-xs); | |
| color: var(--text-primary); | |
| /* Truncate long titles */ | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| line-height: 1.4; | |
| max-height: 2.8em; | |
| } | |
| .list-view .video-title { | |
| -webkit-line-clamp: 1; | |
| font-size: var(--font-lg); | |
| } | |
| /* Pagination */ | |
| .pagination-container { | |
| margin-top: var(--spacing-xl); | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .pagination { | |
| display: flex; | |
| gap: var(--spacing-xs); | |
| } | |
| .page-btn { | |
| min-width: 36px; | |
| height: 36px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: var(--surface-color); | |
| border: 1px solid var(--divider-color); | |
| border-radius: var(--border-radius-sm); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-size: var(--font-sm); | |
| color: var(--text-primary); | |
| } | |
| .page-btn:hover { | |
| background-color: rgba(0, 0, 0, 0.04); | |
| } | |
| .page-btn.active { | |
| background-color: var(--primary-color); | |
| border-color: var(--primary-color); | |
| color: white; | |
| } | |
| .page-btn.disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.8); | |
| z-index: 1000; | |
| overflow: hidden; | |
| } | |
| .modal-content { | |
| position: relative; | |
| background-color: var(--surface-color); | |
| width: 90%; | |
| max-width: 900px; | |
| max-height: 90vh; | |
| margin: 5vh auto; | |
| border-radius: var(--border-radius-lg); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| box-shadow: var(--shadow-4); | |
| animation: modalFadeIn 0.3s ease; | |
| } | |
| @keyframes modalFadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| border-bottom: 1px solid var(--divider-color); | |
| } | |
| .modal-header h2 { | |
| font-size: var(--font-lg); | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| .close-button { | |
| background: none; | |
| border: none; | |
| font-size: var(--font-xl); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| opacity: 0.7; | |
| transition: opacity var(--transition-fast); | |
| display: flex; | |
| padding: var(--spacing-xs); | |
| border-radius: 50%; | |
| } | |
| .close-button:hover { | |
| opacity: 1; | |
| background-color: rgba(0, 0, 0, 0.04); | |
| } | |
| .modal-body { | |
| padding: var(--spacing-md); | |
| flex: 1; | |
| overflow-y: auto; | |
| } | |
| .player-container { | |
| width: 100%; | |
| border-radius: var(--border-radius-md); | |
| overflow: hidden; | |
| background-color: #000; | |
| aspect-ratio: 16 / 9; | |
| } | |
| /* Plyr Customization */ | |
| .plyr--full-ui input[type=range] { | |
| color: var(--primary-color); | |
| } | |
| .plyr__control--overlaid { | |
| background: var(--primary-color); | |
| } | |
| .plyr--video .plyr__control.plyr__tab-focus, | |
| .plyr--video .plyr__control:hover, | |
| .plyr--video .plyr__control[aria-expanded=true] { | |
| background: var(--primary-dark); | |
| } | |
| .plyr__control.plyr__tab-focus { | |
| box-shadow: 0 0 0 5px rgba(25, 118, 210, 0.5); | |
| } | |
| .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before { | |
| background: var(--primary-color); | |
| } | |
| /* Player Help */ | |
| .player-help { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--spacing-lg); | |
| margin-top: var(--spacing-md); | |
| padding: var(--spacing-sm); | |
| background-color: rgba(0, 0, 0, 0.03); | |
| border-radius: var(--border-radius-md); | |
| flex-wrap: wrap; | |
| } | |
| .help-item { | |
| display: flex; | |
| align-items: center; | |
| color: var(--text-secondary); | |
| font-size: var(--font-sm); | |
| } | |
| .help-item i { | |
| margin-right: var(--spacing-xs); | |
| } | |
| /* Toast Messages */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-sm); | |
| } | |
| .toast { | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| border-radius: var(--border-radius-md); | |
| background-color: var(--surface-color); | |
| color: var(--text-primary); | |
| box-shadow: var(--shadow-2); | |
| min-width: 250px; | |
| max-width: 350px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| transform: translateX(100%); | |
| animation: slideIn 0.3s forwards, fadeOut 0.3s 2.7s forwards; | |
| } | |
| .toast.success { | |
| border-left: 4px solid var(--success-color); | |
| } | |
| .toast.error { | |
| border-left: 4px solid var(--error-color); | |
| } | |
| .toast.info { | |
| border-left: 4px solid var(--primary-color); | |
| } | |
| .toast.warning { | |
| border-left: 4px solid var(--warning-color); | |
| } | |
| @keyframes slideIn { | |
| 100% { transform: translateX(0); } | |
| } | |
| @keyframes fadeOut { | |
| 100% { opacity: 0; } | |
| } | |
| /* Footer */ | |
| .app-footer { | |
| background-color: var(--surface-color); | |
| color: var(--text-secondary); | |
| text-align: center; | |
| padding: var(--spacing-md); | |
| margin-top: var(--spacing-xl); | |
| box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Responsive Adjustments */ | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-direction: column; | |
| align-items: stretch; | |
| padding: var(--spacing-sm); | |
| height: auto; | |
| } | |
| .app-header { | |
| height: auto; | |
| padding: var(--spacing-sm) 0; | |
| } | |
| .logo-container { | |
| margin-bottom: var(--spacing-sm); | |
| justify-content: center; | |
| } | |
| .search-wrapper { | |
| margin-left: 0; | |
| max-width: none; | |
| } | |
| .app-main { | |
| padding: var(--spacing-md); | |
| } | |
| .video-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: var(--spacing-md); | |
| } | |
| .list-view .video-thumbnail { | |
| width: 120px; | |
| min-width: 120px; | |
| height: 68px; | |
| } | |
| .modal-content { | |
| width: 95%; | |
| margin: 2.5vh auto; | |
| } | |
| .player-help { | |
| gap: var(--spacing-md); | |
| } | |
| .help-item { | |
| font-size: 10px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .video-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .list-view .video-thumbnail { | |
| width: 100px; | |
| min-width: 100px; | |
| height: 56px; | |
| } | |
| .player-help { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: var(--spacing-xs); | |
| } | |
| .pagination { | |
| gap: 2px; | |
| } | |
| .page-btn { | |
| min-width: 32px; | |
| height: 32px; | |
| font-size: 12px; | |
| } | |
| } | |
| /* style.css */ | |
| /* Make player container relative for absolute positioning inside */ | |
| .player-container { | |
| position: relative; | |
| background-color: #000; /* Black background behind video */ | |
| } | |
| /* Player Buffering/Loading Indicator Styles */ | |
| .player-loading-indicator { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay */ | |
| display: flex; /* Use flex to center content */ | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| z-index: 10; /* Above video, potentially below custom controls if needed */ | |
| pointer-events: none; /* Allow interaction with player underneath */ | |
| opacity: 1; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| .player-loading-indicator[style*="display: none"] { | |
| opacity: 0; /* Fade out when hidden */ | |
| } | |
| .player-loading-indicator .loading-spinner { | |
| /* Re-use or define a spinner style */ | |
| border: 4px solid rgba(255, 255, 255, 0.3); | |
| border-top: 4px solid #fff; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: 15px; | |
| } | |
| #playerLoadPercent { | |
| font-size: 1em; /* Slightly larger */ | |
| font-weight: bold; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.5); | |
| } | |
| /* Define spin animation if not already present */ | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Double Tap Feedback Styles */ | |
| .tap-feedback { | |
| /* Base styles are set inline via JS for positioning */ | |
| /* Add transitions and appearance styles here */ | |
| text-align: center; | |
| font-size: 0.9em; | |
| } | |
| .tap-feedback .feedback-icon { | |
| margin-bottom: 5px; | |
| } | |
| .tap-feedback .feedback-text { | |
| font-weight: bold; | |
| } | |
| /* Toast Message Container & Base Styles */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 1050; /* High z-index */ | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 10px; /* Spacing between toasts */ | |
| } | |
| .toast { | |
| padding: 10px 20px; | |
| border-radius: 4px; | |
| color: #fff; | |
| font-size: 0.9em; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); | |
| opacity: 0; /* Start hidden */ | |
| transform: translateY(20px); /* Start lower */ | |
| transition: opacity 0.4s ease, transform 0.4s ease; | |
| min-width: 200px; /* Minimum width */ | |
| text-align: center; | |
| } | |
| /* Toast Types */ | |
| .toast.info { | |
| background-color: #17a2b8; /* Bootstrap info color */ | |
| } | |
| .toast.success { | |
| background-color: #28a745; /* Bootstrap success color */ | |
| } | |
| .toast.warning { | |
| background-color: #ffc107; /* Bootstrap warning color */ | |
| color: #333; /* Darker text for yellow */ | |
| } | |
| .toast.error { | |
| background-color: #dc3545; /* Bootstrap danger color */ | |
| } | |
| /* Ensure modal content doesn't overflow weirdly on smaller screens */ | |
| .modal-content { | |
| max-height: 95vh; /* Limit height */ | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .modal-body { | |
| flex-grow: 1; /* Allow body to take remaining space */ | |
| overflow-y: auto; /* Add scroll if content exceeds height */ | |
| display: flex; | |
| flex-direction: column; /* Stack player and help */ | |
| } | |
| .player-container { | |
| flex-shrink: 0; /* Prevent player from shrinking */ | |
| } | |
| .player-help { | |
| margin-top: 15px; /* Space between player and help */ | |
| padding: 0 15px; /* Padding for help text */ | |
| flex-shrink: 0; /* Prevent help from shrinking too much */ | |
| } | |
| /* Adjust double-tap feedback container if needed */ | |
| .plyr__video-wrapper { | |
| position: relative; /* Ensure it can contain absolute feedback */ | |
| } |