diff --git a/style.css b/style.css index f76de8f..3d86028 100644 --- a/style.css +++ b/style.css @@ -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 {