Delete style.css

style.css

@@ -1,689 +0,0 @@
-/* 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;
-    }
-}