webui: fixed width for speed info (#6739)

* webui: fixed width for speed info

* fix: match download icon-text gap with upload

* webui: move speed arrow to the right of the text
This commit is contained in:
Yat Ho 2024-05-26 02:32:01 +08:00 committed by GitHub
parent 8bb49e3fdf
commit 381c17e0bb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 57 additions and 42 deletions

View File

@ -383,20 +383,30 @@ a {
> * {
margin-right: 5px;
}
}
#speed-up-icon,
#speed-dn-icon {
fill: var(--color-fg-primary);
.speed-container {
display: inherit;
align-items: inherit;
flex-direction: inherit;
svg {
width: 20px;
&:not(:nth-child(1 of #mainwin-statusbar .speed-container)) {
width: 100px;
}
}
}
#speed-dn-label,
#speed-up-label {
text-align: right;
#speed-up-icon,
#speed-dn-icon {
fill: var(--color-fg-primary);
svg {
width: 20px;
}
}
#speed-dn-label,
#speed-up-label {
text-align: right;
}
}
/// TORRENT CONTAINER

View File

@ -203,40 +203,45 @@
<input type="search" id="torrent-search" placeholder="Filter" />
<span id="filter-count">&nbsp;</span>
<span class="flexible-space"></span>
<div id="speed-dn-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-chevron-down"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
<div class="speed-container">
<div id="speed-dn-label"></div>
<div id="speed-dn-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-chevron-down"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
</div>
<div id="speed-dn-label"></div>
<div id="speed-up-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-chevron-up"
>
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
<div class="speed-container">
<span class="flexible-space"></span>
<div id="speed-up-label"></div>
<div id="speed-up-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-chevron-up"
>
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
</div>
</div>
<div id="speed-up-label"></div>
</header>
<main id="mainwin-workarea">