Implement clean porn cinema layout with header and sidebar navigation
- Fix HTML structure: move header inside body tag - Style header to match mockup: slim purple gradient design - Create right sidebar with Playlist/Search tabs - Minimize Video Library section for clean appearance - Add proper two-column grid layout - Implement tab switching functionality - Override conflicting body flex styles for cinema mode
This commit is contained in:
dilgenfritz
parent
a2af9ba8f3
commit
1e89ee95aa
333
porn-cinema.html
333
porn-cinema.html
|
|
@ -10,6 +10,40 @@
|
|||
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="cinema-mode">
|
||||
<!-- Cinema Header -->
|
||||
<header class="cinema-header">
|
||||
<div class="cinema-nav">
|
||||
<h1>🎬 Porn Cinema</h1>
|
||||
<div class="cinema-controls">
|
||||
<button id="back-to-home" class="btn btn-secondary">🏠 Home</button>
|
||||
<button id="settings-btn" class="btn btn-secondary">⚙️ Settings</button>
|
||||
<button id="theater-mode" class="btn btn-secondary">🎭 Theater</button>
|
||||
<button id="fullscreen-toggle" class="btn btn-secondary">⛶ Fullscreen</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Keyboard Shortcuts Help -->
|
||||
<div class="shortcuts-help" id="shortcuts-help">
|
||||
<div class="shortcuts-content">
|
||||
<h3>🎹 One-Handed Controls</h3>
|
||||
<div class="shortcuts-grid">
|
||||
<div class="shortcut-item"><kbd>Space</kbd> Play/Pause</div>
|
||||
<div class="shortcut-item"><kbd>←</kbd><kbd>→</kbd> Seek ±10s</div>
|
||||
<div class="shortcut-item"><kbd>↑</kbd><kbd>↓</kbd> Volume ±10%</div>
|
||||
<div class="shortcut-item"><kbd>F</kbd> Fullscreen</div>
|
||||
<div class="shortcut-item"><kbd>M</kbd> Mute/Unmute</div>
|
||||
<div class="shortcut-item"><kbd>1-4</kbd> Quality</div>
|
||||
<div class="shortcut-item"><kbd>Enter</kbd> Add to Playlist</div>
|
||||
<div class="shortcut-item"><kbd>N</kbd> Next Video</div>
|
||||
<div class="shortcut-item"><kbd>P</kbd> Previous Video</div>
|
||||
<div class="shortcut-item"><kbd>S</kbd> Shuffle Playlist</div>
|
||||
<div class="shortcut-item"><kbd>Escape</kbd> Exit Fullscreen</div>
|
||||
<div class="shortcut-item"><kbd>?</kbd> Toggle This Help</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<div id="cinema-loading" class="cinema-loading">
|
||||
<div class="loading-content">
|
||||
|
|
@ -19,175 +53,167 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cinema Header -->
|
||||
<header class="cinema-header">
|
||||
<div class="cinema-nav">
|
||||
<button id="back-to-home" class="btn btn-secondary">← Back to Home</button>
|
||||
<h1>🎬 Porn Cinema</h1>
|
||||
<div class="cinema-controls">
|
||||
<button id="theater-mode" class="btn btn-secondary" title="Theater Mode (Dim UI)">🎭</button>
|
||||
<button id="fullscreen-toggle" class="btn btn-secondary" title="Fullscreen (F)">⛶</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keyboard Shortcuts Help -->
|
||||
<div class="shortcuts-help" id="shortcuts-help">
|
||||
<div class="shortcuts-content">
|
||||
<h3>🎹 One-Handed Controls</h3>
|
||||
<div class="shortcuts-grid">
|
||||
<div class="shortcut-item"><kbd>Space</kbd> Play/Pause</div>
|
||||
<div class="shortcut-item"><kbd>←</kbd><kbd>→</kbd> Seek ±10s</div>
|
||||
<div class="shortcut-item"><kbd>↑</kbd><kbd>↓</kbd> Volume ±10%</div>
|
||||
<div class="shortcut-item"><kbd>F</kbd> Fullscreen</div>
|
||||
<div class="shortcut-item"><kbd>M</kbd> Mute/Unmute</div>
|
||||
<div class="shortcut-item"><kbd>1-4</kbd> Quality</div>
|
||||
<div class="shortcut-item"><kbd>Enter</kbd> Add to Playlist</div>
|
||||
<div class="shortcut-item"><kbd>N</kbd> Next Video</div>
|
||||
<div class="shortcut-item"><kbd>P</kbd> Previous Video</div>
|
||||
<div class="shortcut-item"><kbd>S</kbd> Shuffle Playlist</div>
|
||||
<div class="shortcut-item"><kbd>Escape</kbd> Exit Fullscreen</div>
|
||||
<div class="shortcut-item"><kbd>?</kbd> Toggle This Help</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Cinema Content -->
|
||||
<main class="cinema-main">
|
||||
<!-- Video Player Section -->
|
||||
<section class="video-player-section">
|
||||
<div class="video-container" id="video-container">
|
||||
<video id="main-video-player" class="main-video" preload="metadata">
|
||||
<source id="video-source" src="" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
<!-- Video Overlay Controls -->
|
||||
<div class="video-overlay" id="video-overlay">
|
||||
<div class="video-title" id="video-title">Select a video to begin</div>
|
||||
<div class="video-info" id="video-info"></div>
|
||||
<!-- Main Content Area -->
|
||||
<div class="main-content-area">
|
||||
<!-- Video Player Section -->
|
||||
<section class="video-player-section">
|
||||
<div class="video-container" id="video-container">
|
||||
<video id="main-video-player" class="main-video" preload="metadata">
|
||||
<source id="video-source" src="" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
<!-- Play Button Overlay -->
|
||||
<div class="play-overlay" id="play-overlay">
|
||||
<button class="play-button-large" id="play-button-large">▶</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading Spinner -->
|
||||
<div class="video-loading" id="video-loading" style="display: none;">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading video...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Video Controls -->
|
||||
<div class="video-controls" id="video-controls">
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="progress-bar">
|
||||
<div class="progress-filled" id="progress-filled"></div>
|
||||
<div class="progress-thumb" id="progress-thumb"></div>
|
||||
<!-- Video Overlay Controls -->
|
||||
<div class="video-overlay" id="video-overlay">
|
||||
<div class="video-title" id="video-title">Select a video to begin</div>
|
||||
<div class="video-info" id="video-info"></div>
|
||||
|
||||
<!-- Play Button Overlay -->
|
||||
<div class="play-overlay" id="play-overlay">
|
||||
<button class="play-button-large" id="play-button-large">▶</button>
|
||||
</div>
|
||||
<div class="time-display">
|
||||
<span id="current-time">0:00</span>
|
||||
<span class="time-separator">/</span>
|
||||
<span id="total-time">0:00</span>
|
||||
|
||||
<!-- Loading Spinner -->
|
||||
<div class="video-loading" id="video-loading" style="display: none;">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading video...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls-row">
|
||||
<div class="controls-left">
|
||||
<button id="play-pause-btn" class="control-btn">▶</button>
|
||||
<button id="prev-video-btn" class="control-btn" title="Previous Video (P)">⏮</button>
|
||||
<button id="next-video-btn" class="control-btn" title="Next Video (N)">⏭</button>
|
||||
<div class="volume-control">
|
||||
<button id="mute-btn" class="control-btn" title="Mute (M)">🔊</button>
|
||||
<input type="range" id="volume-slider" class="volume-slider" min="0" max="100" value="70">
|
||||
<span id="volume-percentage">70%</span>
|
||||
<!-- Custom Video Controls -->
|
||||
<div class="video-controls" id="video-controls">
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="progress-bar">
|
||||
<div class="progress-filled" id="progress-filled"></div>
|
||||
<div class="progress-thumb" id="progress-thumb"></div>
|
||||
</div>
|
||||
<div class="time-display">
|
||||
<span id="current-time">0:00</span>
|
||||
<span class="time-separator">/</span>
|
||||
<span id="total-time">0:00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls-center">
|
||||
<div class="quality-selector">
|
||||
<select id="quality-select" class="quality-dropdown">
|
||||
<option value="auto">Auto Quality</option>
|
||||
<option value="1080p">1080p (1)</option>
|
||||
<option value="720p">720p (2)</option>
|
||||
<option value="480p">480p (3)</option>
|
||||
<option value="360p">360p (4)</option>
|
||||
</select>
|
||||
<div class="controls-row">
|
||||
<div class="controls-left">
|
||||
<button id="play-pause-btn" class="control-btn">▶</button>
|
||||
<button id="prev-video-btn" class="control-btn" title="Previous Video (P)">⏮</button>
|
||||
<button id="next-video-btn" class="control-btn" title="Next Video (N)">⏭</button>
|
||||
<div class="volume-control">
|
||||
<button id="mute-btn" class="control-btn" title="Mute (M)">🔊</button>
|
||||
<input type="range" id="volume-slider" class="volume-slider" min="0" max="100" value="70">
|
||||
<span id="volume-percentage">70%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="speed-control">
|
||||
<select id="speed-select" class="speed-dropdown">
|
||||
<option value="0.5">0.5x</option>
|
||||
<option value="0.75">0.75x</option>
|
||||
<option value="1" selected>1x</option>
|
||||
<option value="1.25">1.25x</option>
|
||||
<option value="1.5">1.5x</option>
|
||||
<option value="2">2x</option>
|
||||
</select>
|
||||
<div class="controls-center">
|
||||
<div class="quality-selector">
|
||||
<select id="quality-select" class="quality-dropdown">
|
||||
<option value="auto">Auto Quality</option>
|
||||
<option value="1080p">1080p (1)</option>
|
||||
<option value="720p">720p (2)</option>
|
||||
<option value="480p">480p (3)</option>
|
||||
<option value="360p">360p (4)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="speed-control">
|
||||
<select id="speed-select" class="speed-dropdown">
|
||||
<option value="0.5">0.5x</option>
|
||||
<option value="0.75">0.75x</option>
|
||||
<option value="1" selected>1x</option>
|
||||
<option value="1.25">1.25x</option>
|
||||
<option value="1.5">1.5x</option>
|
||||
<option value="2">2x</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls-right">
|
||||
<button id="add-to-playlist-btn" class="control-btn" title="Add to Playlist (Enter)">➕</button>
|
||||
<button id="theater-mode-btn" class="control-btn" title="Theater Mode">🎭</button>
|
||||
<button id="fullscreen-btn" class="control-btn" title="Fullscreen (F)">⛶</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls-right">
|
||||
<button id="add-to-playlist-btn" class="control-btn" title="Add to Playlist (Enter)">➕</button>
|
||||
<button id="theater-mode-btn" class="control-btn" title="Theater Mode">🎭</button>
|
||||
<button id="fullscreen-btn" class="control-btn" title="Fullscreen (F)">⛶</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Video Library Section -->
|
||||
<section class="video-library-section">
|
||||
<div class="library-header">
|
||||
<h3><EFBFBD> Video Library</h3>
|
||||
<div class="library-controls">
|
||||
<div class="view-toggle">
|
||||
<button id="grid-view-btn" class="view-btn active" title="Grid View">⊞</button>
|
||||
<button id="list-view-btn" class="view-btn" title="List View">☰</button>
|
||||
</div>
|
||||
<div class="sort-controls">
|
||||
<select id="sort-select" class="sort-dropdown">
|
||||
<option value="name">Sort by Name</option>
|
||||
<option value="date">Sort by Date</option>
|
||||
<option value="duration">Sort by Duration</option>
|
||||
<option value="size">Sort by Size</option>
|
||||
</select>
|
||||
<button id="sort-direction" class="btn btn-mini" title="Sort Direction">↕️</button>
|
||||
</div>
|
||||
<div class="search-controls">
|
||||
<input type="text" id="library-search" class="search-input" placeholder="Search videos...">
|
||||
<button id="refresh-library" class="btn btn-mini" title="Refresh Library">🔄</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="library-content" id="library-content">
|
||||
<div class="library-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading video library...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Playlist Section -->
|
||||
<section class="playlist-section" id="playlist-section">
|
||||
<div class="playlist-header">
|
||||
<h3>📝 Current Playlist</h3>
|
||||
<div class="playlist-controls">
|
||||
<button id="shuffle-playlist" class="btn btn-mini" title="Shuffle (S)">🔀</button>
|
||||
<button id="clear-playlist" class="btn btn-mini btn-danger">🗑️ Clear</button>
|
||||
<button id="save-playlist" class="btn btn-mini">💾 Save</button>
|
||||
<button id="load-playlist" class="btn btn-mini">📁 Load</button>
|
||||
</div>
|
||||
<!-- Right Sidebar -->
|
||||
<aside class="cinema-sidebar">
|
||||
<!-- Sidebar Tabs -->
|
||||
<div class="sidebar-tabs">
|
||||
<button class="sidebar-tab active" id="playlist-tab">🎵 Playlist</button>
|
||||
<button class="sidebar-tab" id="search-tab">🔍 Search</button>
|
||||
</div>
|
||||
<div class="playlist-content" id="playlist-content">
|
||||
<div class="playlist-empty">
|
||||
<p>Playlist is empty. Add videos by clicking ➕ or pressing Enter while a video is selected.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Video Library Section -->
|
||||
<section class="video-library-section">
|
||||
<div class="library-header">
|
||||
<h3>📁 Video Library</h3>
|
||||
<div class="library-controls">
|
||||
<div class="view-toggle">
|
||||
<button id="grid-view-btn" class="view-btn active" title="Grid View">⊞</button>
|
||||
<button id="list-view-btn" class="view-btn" title="List View">☰</button>
|
||||
<!-- Playlist Panel -->
|
||||
<div class="sidebar-panel active" id="playlist-panel">
|
||||
<div class="panel-header">
|
||||
<h3>Current Playlist</h3>
|
||||
<div class="playlist-controls">
|
||||
<button id="shuffle-playlist" class="btn btn-mini" title="Shuffle (S)">🔀</button>
|
||||
<button id="clear-playlist" class="btn btn-mini btn-danger">🗑️</button>
|
||||
<button id="save-playlist" class="btn btn-mini">💾</button>
|
||||
<button id="load-playlist" class="btn btn-mini">📁</button>
|
||||
</div>
|
||||
<div class="sort-controls">
|
||||
<select id="sort-select" class="sort-dropdown">
|
||||
<option value="name">Sort by Name</option>
|
||||
<option value="date">Sort by Date</option>
|
||||
<option value="duration">Sort by Duration</option>
|
||||
<option value="size">Sort by Size</option>
|
||||
</select>
|
||||
<button id="sort-direction" class="btn btn-mini" title="Sort Direction">↕️</button>
|
||||
</div>
|
||||
<div class="search-controls">
|
||||
<input type="text" id="library-search" class="search-input" placeholder="Search videos...">
|
||||
<button id="refresh-library" class="btn btn-mini" title="Refresh Library">🔄</button>
|
||||
</div>
|
||||
<div class="playlist-content" id="playlist-content">
|
||||
<div class="playlist-empty">
|
||||
<p>Playlist is empty. Add videos by clicking ➕ or pressing Enter while a video is selected.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="library-content" id="library-content">
|
||||
<div class="library-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading video library...</p>
|
||||
|
||||
<!-- Search Panel -->
|
||||
<div class="sidebar-panel" id="search-panel">
|
||||
<div class="panel-header">
|
||||
<h3>Search Videos</h3>
|
||||
</div>
|
||||
<div class="search-content">
|
||||
<input type="text" class="search-input-sidebar" placeholder="Search your library...">
|
||||
<div class="search-results" id="search-results">
|
||||
<p>Enter search terms to find videos...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<!-- Scripts -->
|
||||
|
|
@ -252,6 +278,27 @@
|
|||
help.style.display = help.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Sidebar tab functionality
|
||||
document.getElementById('playlist-tab').addEventListener('click', () => {
|
||||
// Remove active from all tabs and panels
|
||||
document.querySelectorAll('.sidebar-tab').forEach(tab => tab.classList.remove('active'));
|
||||
document.querySelectorAll('.sidebar-panel').forEach(panel => panel.classList.remove('active'));
|
||||
|
||||
// Activate playlist tab and panel
|
||||
document.getElementById('playlist-tab').classList.add('active');
|
||||
document.getElementById('playlist-panel').classList.add('active');
|
||||
});
|
||||
|
||||
document.getElementById('search-tab').addEventListener('click', () => {
|
||||
// Remove active from all tabs and panels
|
||||
document.querySelectorAll('.sidebar-tab').forEach(tab => tab.classList.remove('active'));
|
||||
document.querySelectorAll('.sidebar-panel').forEach(panel => panel.classList.remove('active'));
|
||||
|
||||
// Activate search tab and panel
|
||||
document.getElementById('search-tab').classList.add('active');
|
||||
document.getElementById('search-panel').classList.add('active');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,10 +1,15 @@
|
|||
/* Porn Cinema Styles */
|
||||
|
||||
/* ===== CINEMA LAYOUT ===== */
|
||||
.cinema-mode {
|
||||
body.cinema-mode {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
overflow-x: hidden;
|
||||
/* Override main body flex layout */
|
||||
display: block !important;
|
||||
align-items: unset !important;
|
||||
justify-content: unset !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.cinema-loading {
|
||||
|
|
@ -21,35 +26,70 @@
|
|||
}
|
||||
|
||||
.cinema-header {
|
||||
background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
|
||||
border-bottom: 2px solid #333;
|
||||
padding: 15px 20px;
|
||||
background: linear-gradient(135deg, #2a2a3a, #1e1e2e);
|
||||
border-bottom: 1px solid #404050;
|
||||
padding: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
display: block !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.cinema-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 8px 20px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.cinema-nav h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
|
||||
background: linear-gradient(45deg, #ff6b9d, #c471ed, #12c2e9);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cinema-controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Modern header button styling */
|
||||
.cinema-header .btn {
|
||||
padding: 6px 12px !important;
|
||||
min-width: auto !important;
|
||||
min-height: auto !important;
|
||||
font-size: 0.85rem !important;
|
||||
border-radius: 6px !important;
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
color: #ffffff !important;
|
||||
transition: all 0.2s ease !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 6px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.cinema-header .btn-secondary {
|
||||
background: rgba(139, 99, 214, 0.15) !important;
|
||||
border: 1px solid rgba(139, 99, 214, 0.3) !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
.cinema-header .btn-secondary:hover {
|
||||
background: rgba(139, 99, 214, 0.25) !important;
|
||||
border-color: rgba(139, 99, 214, 0.5) !important;
|
||||
transform: none !important;
|
||||
box-shadow: 0 2px 8px rgba(139, 99, 214, 0.2) !important;
|
||||
}
|
||||
|
||||
/* ===== KEYBOARD SHORTCUTS HELP ===== */
|
||||
|
|
@ -100,21 +140,163 @@
|
|||
|
||||
/* ===== MAIN CINEMA LAYOUT ===== */
|
||||
.cinema-main {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: 20px;
|
||||
min-height: calc(100vh - 120px);
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: 0;
|
||||
min-height: calc(100vh - 52px);
|
||||
}
|
||||
|
||||
/* ===== VIDEO PLAYER SECTION ===== */
|
||||
/* ===== MAIN CONTENT AREA ===== */
|
||||
.main-content-area {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ===== RIGHT SIDEBAR ===== */
|
||||
.cinema-sidebar {
|
||||
background: linear-gradient(180deg, #1e1e2e, #2a2a3a);
|
||||
border-left: 1px solid #404050;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #404050;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.sidebar-tab {
|
||||
flex: 1;
|
||||
padding: 12px 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #a0a0a0;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
.sidebar-tab.active {
|
||||
color: #ffffff;
|
||||
background: rgba(139, 99, 214, 0.1);
|
||||
border-bottom-color: #8b63d6;
|
||||
}
|
||||
|
||||
.sidebar-tab:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.sidebar-panel {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-panel.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #404050;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.panel-header h3 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #ffffff;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.playlist-controls {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.playlist-controls .btn-mini {
|
||||
padding: 4px 8px;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(139, 99, 214, 0.15);
|
||||
border: 1px solid rgba(139, 99, 214, 0.3);
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.playlist-controls .btn-mini:hover {
|
||||
background: rgba(139, 99, 214, 0.25);
|
||||
border-color: rgba(139, 99, 214, 0.5);
|
||||
}
|
||||
|
||||
.playlist-controls .btn-danger {
|
||||
background: rgba(220, 53, 69, 0.15);
|
||||
border-color: rgba(220, 53, 69, 0.3);
|
||||
}
|
||||
|
||||
.playlist-controls .btn-danger:hover {
|
||||
background: rgba(220, 53, 69, 0.25);
|
||||
border-color: rgba(220, 53, 69, 0.5);
|
||||
}
|
||||
|
||||
/* Playlist content */
|
||||
.playlist-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.playlist-empty {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
padding: 30px 10px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Search panel */
|
||||
.search-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-input-sidebar {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid #404050;
|
||||
border-radius: 6px;
|
||||
color: #ffffff;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-input-sidebar::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
flex: 1;
|
||||
color: #a0a0a0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.video-player-section {
|
||||
background: #111;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
|
|
@ -429,9 +611,10 @@
|
|||
|
||||
/* ===== VIDEO LIBRARY SECTION ===== */
|
||||
.video-library-section {
|
||||
background: #1a1a1a;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
background: rgba(26, 26, 26, 0.6);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.library-header {
|
||||
|
|
@ -439,21 +622,29 @@
|
|||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid #333;
|
||||
padding-bottom: 15px;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.library-header h3 {
|
||||
margin: 0;
|
||||
color: #ff6b9d;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.library-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -461,9 +652,10 @@
|
|||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: #ccc;
|
||||
padding: 8px 12px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.view-btn.active,
|
||||
|
|
@ -475,44 +667,61 @@
|
|||
.sort-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sort-dropdown {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid #444;
|
||||
color: #fff;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.search-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid #444;
|
||||
color: #fff;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
width: 200px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
width: 140px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 4px 6px;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.btn-mini:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.library-content {
|
||||
min-height: 200px;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.library-loading {
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
padding: 30px;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* ===== LIBRARY GRID VIEW ===== */
|
||||
|
|
|
|||
Loading…
Reference in New Issue