Improve search and loading indicator styles

This commit is contained in:
Mikko Ahlroth 2024-02-26 15:38:09 +02:00
parent 7b3e06beb3
commit 451b619f5b

View file

@ -37,6 +37,8 @@
--track-scale-factor: 4;
--library-top-nav-height: 45px;
--search-size: 1.6rem;
}
.glass-bg,
@ -72,8 +74,6 @@
border-radius: var(--button-border-radius);
text-align: center;
color: var(--text-color);
text-decoration: none;
}
.button-small,
@ -136,6 +136,11 @@ main {
overflow-y: hidden;
}
a {
color: var(--text-color);
text-decoration: none;
}
tracks-view,
albums-view,
artists-view,
@ -309,9 +314,20 @@ single-artist-view {
padding: 0;
}
#library-loading-indicator {
position: absolute;
top: 50%;
left: 0;
width: 100vw;
text-align: center;
font-size: 1.5rem;
}
#search-bar {
position: absolute;
bottom: 100px;
top: calc(var(--library-top-nav-height) + var(--side-margin) * 3);
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 20px);
@ -323,12 +339,27 @@ single-artist-view {
gap: var(--double-margin);
}
#search-bar button {
border-radius: 100%;
width: calc(var(--search-size) * 2);
height: calc(var(--search-size) * 2);
font-size: var(--search-size);
}
#search-bar-input-wrapper {
flex: 1 1;
}
#search-bar-input-wrapper input {
width: 100%;
height: 100%;
font-size: var(--search-size);
}
#search-bar-input-wrapper input::-webkit-search-cancel-button {
font-size: var(--search-size);
}
.library-list {
@ -377,7 +408,7 @@ single-artist-view {
}
.library-item {
cursor: default;
cursor: pointer;
}
.library-item:active {