diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 4053944..de12954 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -30,5 +30,5 @@ const auth = useAuthStore() .nav-links { display: flex; gap: 1.5rem; } .nav-links a { color: #aaa; text-decoration: none; transition: color 0.2s; } .nav-links a:hover, .nav-links a.router-link-active { color: #1da1f2; } -.container { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; } +.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; } diff --git a/frontend/src/views/Admin.vue b/frontend/src/views/Admin.vue index c022741..2cad36a 100644 --- a/frontend/src/views/Admin.vue +++ b/frontend/src/views/Admin.vue @@ -277,13 +277,14 @@ onMounted(() => { fetchVideos(); fetchStats() }) .search-bar select { padding: 0.6rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; } .video-card { display: flex; justify-content: space-between; align-items: center; - background: #1a1a2e; border-radius: 10px; padding: 1rem; margin-bottom: 0.8rem; gap: 1rem; + background: #1a1a2e; border-radius: 10px; padding: 1.1rem 1.3rem; margin-bottom: 0.9rem; gap: 1.2rem; + border: 1px solid #2a2a3e; } -.video-main { display: flex; gap: 1rem; flex: 1; min-width: 0; } -.thumb { width: 80px; height: 45px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } +.video-main { display: flex; gap: 1.2rem; flex: 1; min-width: 0; } +.thumb { width: 112px; height: 63px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .info { min-width: 0; } -.info h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.3rem; } -.meta { display: flex; gap: 0.8rem; font-size: 0.85rem; color: #888; flex-wrap: wrap; } +.info h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.4rem; font-size: 1rem; } +.meta { display: flex; gap: 1rem; font-size: 0.88rem; color: #888; flex-wrap: wrap; } .status-done { color: #27ae60; } .status-downloading { color: #f39c12; } .status-error { color: #e74c3c; } @@ -297,24 +298,29 @@ onMounted(() => { fetchVideos(); fetchStats() }) .btn-del:hover { border-color: #e74c3c !important; } /* Logs */ -.log-filter { display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center; } -.log-filter input { flex: 1; padding: 0.6rem 1rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; } -.clear-btn { padding: 0.5rem 0.9rem; border: 1px solid #f39c12; border-radius: 8px; background: transparent; color: #f39c12; cursor: pointer; white-space: nowrap; font-size: 0.85rem; } -.log-table-wrap { overflow-x: auto; } -.log-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } -.log-table th { text-align: left; padding: 0.6rem 1rem; background: #1a1a2e; color: #888; border-bottom: 1px solid #333; white-space: nowrap; } -.log-table td { padding: 0.6rem 1rem; border-bottom: 1px solid #222; vertical-align: middle; } -.log-table tr:hover td { background: rgba(255,255,255,0.03); } -.td-time { color: #888; white-space: nowrap; font-size: 0.82rem; } -.td-ip { font-family: monospace; color: #7fdbff; white-space: nowrap; } -.td-location { white-space: nowrap; } -.flag { margin-right: 0.3rem; } -.location-text { color: #ccc; font-size: 0.88rem; } -.td-browser, .td-device { color: #ddd; white-space: nowrap; } -.td-video { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.log-filter { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; align-items: center; } +.log-filter input { flex: 1; padding: 0.7rem 1rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; font-size: 0.95rem; } +.clear-btn { padding: 0.6rem 1rem; border: 1px solid #f39c12; border-radius: 8px; background: transparent; color: #f39c12; cursor: pointer; white-space: nowrap; font-size: 0.88rem; } +.log-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid #2a2a3e; } +.log-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 900px; } +.log-table th { + text-align: left; padding: 0.9rem 1.2rem; + background: #12122a; color: #999; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; + border-bottom: 1px solid #2a2a3e; white-space: nowrap; +} +.log-table td { padding: 0.85rem 1.2rem; border-bottom: 1px solid #1e1e30; vertical-align: middle; } +.log-table tr:last-child td { border-bottom: none; } +.log-table tr:hover td { background: rgba(255,255,255,0.04); } +.td-time { color: #888; white-space: nowrap; font-size: 0.88rem; min-width: 140px; } +.td-ip { font-family: monospace; color: #7fdbff; white-space: nowrap; font-size: 0.92rem; min-width: 120px; } +.td-location { white-space: nowrap; min-width: 160px; } +.flag { margin-right: 0.35rem; font-size: 1.1rem; } +.location-text { color: #ccc; } +.td-browser, .td-device { color: #ddd; white-space: nowrap; min-width: 100px; } +.td-video { max-width: 380px; min-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .platform-badge { - display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.4rem; - border-radius: 4px; margin-right: 0.4rem; vertical-align: middle; font-weight: 600; + display: inline-block; font-size: 0.72rem; padding: 0.15rem 0.5rem; + border-radius: 4px; margin-right: 0.4rem; vertical-align: middle; font-weight: 700; letter-spacing: 0.03em; } .plat-youtube { background: #c00; color: #fff; } .plat-twitter { background: #1da1f2; color: #fff; }