nicd/elektrofoni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve search and loading indicator styles

Browse source
This commit is contained in:
Mikko Ahlroth 2024-02-26 15:38:09 +02:00
parent 7b3e06beb3
commit 451b619f5b
1 changed files with 35 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
style.css
View file

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