32 lines
1.5 KiB
CSS
32 lines
1.5 KiB
CSS
:root { --bg: #0f0f0f; --text: #fff; --accent: #3d3d3d; }
|
|
body { margin: 0; background: var(--bg); color: var(--text); font-family: sans-serif; overflow-x: hidden; }
|
|
|
|
.top-bar {
|
|
height: 60px; display: flex; justify-content: space-between; align-items: center;
|
|
padding: 0 20px; background: #202020; position: sticky; top: 0; z-index: 100;
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 20px; padding: 20px;
|
|
}
|
|
|
|
.video-card { cursor: pointer; transition: transform 0.2s; }
|
|
.video-card img { width: 100%; border-radius: 12px; }
|
|
|
|
.drawer {
|
|
position: fixed; top: 0; right: -300px; width: 300px; height: 100%;
|
|
background: #1e1e1e; z-index: 1000; transition: 0.3s; padding: 20px;
|
|
}
|
|
.drawer.open { right: 0; }
|
|
|
|
#overlay {
|
|
position: fixed; inset: 0; background: rgba(0,0,0,0.7);
|
|
display: none; z-index: 999;
|
|
}
|
|
|
|
.modal { display: none; position: fixed; inset: 0; background: #000; z-index: 2000; }
|
|
.modal-content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
|
|
.close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 28px; cursor: pointer; background: rgba(0,0,0,0.5); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; z-index: 2001; }
|
|
.close:hover { background: rgba(255,255,255,0.2); }
|
|
video { width: 100%; height: 100%; max-width: 100%; max-height: 100vh; object-fit: contain; } |