2 lines
4.7 KiB
CSS
2 lines
4.7 KiB
CSS
[data-v-b32a5d21]{box-sizing:border-box;margin:0;padding:0}body[data-v-b32a5d21]{background:linear-gradient(135deg,#1a2a6c,#2c3e50);color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;padding:20px}.container[data-v-b32a5d21]{margin:0 auto;max-width:1400px}header[data-v-b32a5d21]{background:#0000004d;border-radius:15px;box-shadow:0 10px 20px #0000004d;margin-bottom:30px;padding:20px 0;text-align:center}h1[data-v-b32a5d21]{font-size:2.5rem;margin-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,.5)}.subtitle[data-v-b32a5d21]{font-size:1.1rem;margin:0 auto;max-width:600px;opacity:.8}.app-container[data-v-b32a5d21]{display:grid;gap:25px;grid-template-columns:1fr 3fr}.control-panel[data-v-b32a5d21]{background:#1e1e3cb3;border-radius:15px;box-shadow:0 8px 16px #0000004d;display:flex;flex-direction:column;gap:20px;padding:25px}.panel-title[data-v-b32a5d21]{border-bottom:2px solid #3498db;color:#3498db;font-size:1.4rem;margin-bottom:15px;padding-bottom:10px}.form-group[data-v-b32a5d21]{margin-bottom:20px}label[data-v-b32a5d21]{display:block;font-weight:500;margin-bottom:8px}input[data-v-b32a5d21],select[data-v-b32a5d21]{background:#0000004d;border:2px solid #3498db;border-radius:8px;color:#fff;font-size:1rem;padding:12px 15px;width:100%}input[data-v-b32a5d21]:focus,select[data-v-b32a5d21]:focus{border-color:#1abc9c;box-shadow:0 0 0 3px #1abc9c4d;outline:none}.btn[data-v-b32a5d21]{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:8px;justify-content:center;padding:12px 20px;transition:all .3s ease}.btn-primary[data-v-b32a5d21]{background:linear-gradient(90deg,#3498db,#1abc9c);color:#fff}.btn-danger[data-v-b32a5d21]{background:linear-gradient(90deg,#e74c3c,#c0392b);color:#fff}.btn-secondary[data-v-b32a5d21]{background:#ffffff1a;border:1px solid hsla(0,0%,100%,.2);color:#fff}.btn[data-v-b32a5d21]:hover{box-shadow:0 5px 15px #0000004d;transform:translateY(-2px)}.btn[data-v-b32a5d21]:active{transform:translateY(0)}.btn[data-v-b32a5d21]:disabled{box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}.video-container[data-v-b32a5d21]{background:#1e1e3cb3;border-radius:15px;box-shadow:0 8px 16px #0000004d;min-height:500px;padding:25px;width:100%}.video-grid[data-v-b32a5d21]{margin-top:20px}.video-item[data-v-b32a5d21]{background:#0006;border-radius:12px;box-shadow:0 5px 15px #0000004d;overflow:hidden;position:relative;transition:transform .3s ease}.video-item[data-v-b32a5d21]:hover{transform:translateY(-5px)}.video-header[data-v-b32a5d21]{background:#00000080;justify-content:space-between;padding:12px}.video-header[data-v-b32a5d21],.video-player[data-v-b32a5d21]{align-items:center;display:flex}.video-player[data-v-b32a5d21]{background:#000;height:440px;justify-content:center;width:100%}.video-player video[data-v-b32a5d21]{height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.video-actions[data-v-b32a5d21]{display:flex;gap:10px;padding:12px}.status-indicator[data-v-b32a5d21]{align-items:center;display:flex;font-size:.9rem;gap:8px}.indicator[data-v-b32a5d21]{border-radius:50%;display:inline-block;height:12px;width:12px}.connected[data-v-b32a5d21]{background:#2ecc71;box-shadow:0 0 8px #2ecc71}.disconnected[data-v-b32a5d21]{background:#e74c3c}.no-videos[data-v-b32a5d21]{align-items:center;display:flex;flex-direction:column;gap:20px;height:300px;justify-content:center;text-align:center}.no-videos i[data-v-b32a5d21]{font-size:4rem;opacity:.3}.stats[data-v-b32a5d21]{background:#0000004d;border-radius:10px;margin-top:20px;padding:15px}.stat-item[data-v-b32a5d21]{background:#ffffff1a;border-radius:8px;padding:10px}.stat-value[data-v-b32a5d21]{color:#1abc9c;font-size:1.8rem;font-weight:700;margin:5px 0}.stat-label[data-v-b32a5d21]{font-size:.9rem;opacity:.8}@media (max-width:900px){.app-container[data-v-b32a5d21]{grid-template-columns:1fr}.video-grid[data-v-b32a5d21]{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media (max-width:600px){.stats[data-v-b32a5d21],.video-grid[data-v-b32a5d21]{grid-template-columns:1fr}}.loading[data-v-b32a5d21]{align-items:center;display:flex;height:300px;justify-content:center}.spinner[data-v-b32a5d21]{animation:spin-b32a5d21 1s ease-in-out infinite;border:5px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#3498db;height:50px;width:50px}@keyframes spin-b32a5d21{to{transform:rotate(1turn)}}.fullscreen[data-v-b32a5d21]{align-items:center;background:#000;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.fullscreen video[data-v-b32a5d21]{max-height:100%;max-width:100%}.close-fullscreen[data-v-b32a5d21]{background:#00000080;border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:1.5rem;height:50px;position:absolute;right:20px;top:20px;width:50px}
|