From c34bef2378a74b65e7e29bd2f20adcd4660de2c8 Mon Sep 17 00:00:00 2001 From: Admin9705 <9705@duck.com> Date: Tue, 10 Feb 2026 06:41:52 -0500 Subject: [PATCH] update --- frontend/static/css/import-media.css | 115 ++++++------------ .../settings_import_media_section.html | 24 ++-- 2 files changed, 50 insertions(+), 89 deletions(-) diff --git a/frontend/static/css/import-media.css b/frontend/static/css/import-media.css index e6c5beb1..8a304776 100644 --- a/frontend/static/css/import-media.css +++ b/frontend/static/css/import-media.css @@ -2,53 +2,13 @@ Import Media — Unmapped folder import UI ========================================================================== */ -/* Section scroll fix — use standard section scrolling */ +/* Section - let parent handle scrolling */ #settingsImportMediaSection { - /* Remove the overrides that were breaking scrolling */ -} - -/* Sticky Toolbar Container */ -.import-media-sticky-toolbar { - position: sticky; - top: -20px; /* Aligns with content-section padding */ - background: #0f172a; /* Match main background */ - z-index: 100; - padding: 20px 0 0 0; - margin-bottom: 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); -} - -/* Table Header */ -.import-media-list-header { - display: grid; - grid-template-columns: 45px 1.5fr 1fr 120px 200px; - align-items: center; - gap: 20px; - padding: 12px 16px; - margin-top: 10px; - background: rgba(255, 255, 255, 0.02); - border-top: 1px solid rgba(255, 255, 255, 0.05); - border-left: 3px solid transparent; /* Match item border spacing */ -} - -.import-media-list-header .header-col { - font-size: 0.7rem; - font-weight: 700; - color: rgba(148, 163, 184, 0.4); - text-transform: uppercase; - letter-spacing: 1px; -} - -.import-media-list-header .actions-col { - text-align: left; /* Align header to the left */ + /* No overrides - let parent .main-content handle scrolling */ } #settingsImportMediaSection .import-media-settings-group { - padding-bottom: 100px; - margin-top: 0; - border-top: none; - border-top-left-radius: 0; - border-top-right-radius: 0; + padding-bottom: 40px; } /* Header */ @@ -58,7 +18,6 @@ justify-content: space-between; gap: 16px; margin-bottom: 16px; - padding: 0 16px; } .import-media-header h3 { @@ -130,7 +89,7 @@ background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.15); border-radius: 10px; - margin: 16px; + margin-bottom: 16px; } .import-media-status-icon i { @@ -152,7 +111,7 @@ background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; - margin: 0 16px 16px 16px; + margin-bottom: 16px; flex-wrap: wrap; } @@ -183,6 +142,29 @@ color: rgba(148, 163, 184, 0.5); } +/* Table Header - sticky within settings-group */ +.import-media-list-header { + display: grid; + grid-template-columns: 45px 1.5fr 1fr 120px 200px; + align-items: center; + gap: 20px; + padding: 12px 0px; + margin-bottom: 12px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + position: sticky; + top: 20px; + z-index: 50; + background: transparent; +} + +.import-media-list-header .header-col { + font-size: 0.7rem; + font-weight: 700; + color: rgba(148, 163, 184, 0.4); + text-transform: uppercase; + letter-spacing: 1px; +} + /* Empty state */ .import-media-empty { text-align: center; @@ -207,7 +189,7 @@ display: flex; flex-direction: column; gap: 8px; - padding: 16px; + padding: 0; } /* Desktop: grid layout for consistent column alignment */ @@ -216,45 +198,29 @@ grid-template-columns: 45px 1.5fr 1fr 120px 200px; align-items: center; gap: 20px; - padding: 12px 16px; - background: rgba(255, 255, 255, 0.02); - border: 1px solid rgba(255, 255, 255, 0.06); + padding: 12px 16px 12px 16px; + background: transparent; + border: none; border-radius: 10px; transition: all 0.2s ease; - border-left: 3px solid transparent; /* Placeholder for status border */ -} - -/* Column dividers for visual alignment */ -.import-media-item > div:not(:last-child) { - position: relative; -} - -.import-media-item > div:not(:first-child):not(:last-child)::after { - content: ""; - position: absolute; - right: -10px; - top: 50%; - transform: translateY(-50%); - height: 40px; - width: 1px; - background: rgba(255, 255, 255, 0.05); + border-left: 3px solid transparent; + margin-left: 0; } .import-media-item:hover { - background: rgba(255, 255, 255, 0.04); - border-color: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.02); } .import-media-item.status-matched { - border-left: 3px solid #4ade80; + border-left-color: #4ade80; } .import-media-item.status-pending { - border-left: 3px solid #fbbf24; + border-left-color: #fbbf24; } .import-media-item.status-no_match { - border-left: 3px solid #f87171; + border-left-color: #f87171; } /* Poster thumbnail */ @@ -369,7 +335,7 @@ .import-media-actions { display: flex; gap: 6px; - justify-content: flex-start; /* Align icons to the left */ + justify-content: flex-start; width: 100%; } @@ -678,9 +644,6 @@ grid-template-columns: 45px 1.2fr 1fr auto; gap: 15px; } - .import-media-item > div::after { - display: none; - } .import-media-match-confidence { display: none; } diff --git a/frontend/templates/components/settings_import_media_section.html b/frontend/templates/components/settings_import_media_section.html index c8f152f5..dd9836a8 100644 --- a/frontend/templates/components/settings_import_media_section.html +++ b/frontend/templates/components/settings_import_media_section.html @@ -1,5 +1,5 @@