Move session info to bottom and restyle for subtlety
Session info display was relocated from the logo area to the bottom of the main content in Home.razor. Updated CSS to make the session info less prominent by removing background and border, reducing font size and padding, and lowering opacity. Improved layout and responsiveness for a more subtle appearance.
This commit is contained in:
@@ -28,14 +28,6 @@
|
|||||||
<img src="images/logo.png" alt="TuneRipper Logo" class="logo" />
|
<img src="images/logo.png" alt="TuneRipper Logo" class="logo" />
|
||||||
<h1 class="app-title">TuneRipper</h1>
|
<h1 class="app-title">TuneRipper</h1>
|
||||||
<p class="app-subtitle">Convert YouTube videos to MP3 instantly</p>
|
<p class="app-subtitle">Convert YouTube videos to MP3 instantly</p>
|
||||||
|
|
||||||
@* Session info display *@
|
|
||||||
@if (!string.IsNullOrWhiteSpace(currentSessionId))
|
|
||||||
{
|
|
||||||
<div class="session-info">
|
|
||||||
<small>Session: @currentSessionId.Substring(0, 8)...</small>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="download-form">
|
<div class="download-form">
|
||||||
@@ -187,6 +179,14 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DonateButton />
|
<DonateButton />
|
||||||
|
|
||||||
|
@* Session info display - moved to bottom *@
|
||||||
|
@if (!string.IsNullOrWhiteSpace(currentSessionId))
|
||||||
|
{
|
||||||
|
<div class="session-info">
|
||||||
|
<small>Session: @currentSessionId.Substring(0, 8)...</small>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -73,24 +73,30 @@
|
|||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Session info styling */
|
/* Session info styling - now at bottom */
|
||||||
.session-info {
|
.session-info {
|
||||||
background: #f7fafc;
|
background: transparent;
|
||||||
border: 1px solid #e2e8f0;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 4px;
|
||||||
padding: 8px 16px;
|
padding: 4px 8px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: #4a5568;
|
color: rgba(107, 114, 128, 0.6);
|
||||||
font-size: 0.85rem;
|
font-size: 0.7rem;
|
||||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||||
opacity: 0.8;
|
opacity: 0.6;
|
||||||
transition: opacity 0.2s ease;
|
transition: opacity 0.2s ease;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.session-info:hover {
|
.session-info:hover {
|
||||||
opacity: 1;
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-info small {
|
||||||
|
font-size: 0.65rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-form {
|
.download-form {
|
||||||
@@ -694,11 +700,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.session-info {
|
.session-info {
|
||||||
font-size: 0.75rem;
|
font-size: 0.6rem;
|
||||||
padding: 6px 12px;
|
padding: 3px 6px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
margin-top: 10px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-info small {
|
||||||
|
font-size: 0.55rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-all-btn {
|
.download-all-btn {
|
||||||
|
|||||||
Reference in New Issue
Block a user