diff --git a/TuneRipper/Pages/Home.razor b/TuneRipper/Pages/Home.razor index 4271a57..dfbdd75 100644 --- a/TuneRipper/Pages/Home.razor +++ b/TuneRipper/Pages/Home.razor @@ -28,14 +28,6 @@

TuneRipper

Convert YouTube videos to MP3 instantly

- - @* Session info display *@ - @if (!string.IsNullOrWhiteSpace(currentSessionId)) - { -
- Session: @currentSessionId.Substring(0, 8)... -
- }
@@ -187,6 +179,14 @@
+ + @* Session info display - moved to bottom *@ + @if (!string.IsNullOrWhiteSpace(currentSessionId)) + { +
+ Session: @currentSessionId.Substring(0, 8)... +
+ } diff --git a/TuneRipper/Pages/Home.razor.css b/TuneRipper/Pages/Home.razor.css index 7e27ca1..fec3798 100644 --- a/TuneRipper/Pages/Home.razor.css +++ b/TuneRipper/Pages/Home.razor.css @@ -73,24 +73,30 @@ line-height: 1.4; } -/* Session info styling */ +/* Session info styling - now at bottom */ .session-info { - background: #f7fafc; - border: 1px solid #e2e8f0; - border-radius: 8px; - padding: 8px 16px; + background: transparent; + border: none; + border-radius: 4px; + padding: 4px 8px; margin-top: 15px; display: inline-block; - color: #4a5568; - font-size: 0.85rem; + color: rgba(107, 114, 128, 0.6); + font-size: 0.7rem; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; - opacity: 0.8; + opacity: 0.6; transition: opacity 0.2s ease; word-break: break-all; + text-align: center; + width: 100%; } .session-info:hover { - opacity: 1; + opacity: 0.8; +} + +.session-info small { + font-size: 0.65rem; } .download-form { @@ -694,11 +700,17 @@ } .session-info { - font-size: 0.75rem; - padding: 6px 12px; + font-size: 0.6rem; + padding: 3px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; + margin-top: 10px; + opacity: 0.5; + } + + .session-info small { + font-size: 0.55rem; } .download-all-btn {