okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New icon and animation for active search bar (thanks @Monochromish)

Browse source
This commit is contained in:
Pedro Galhardo 2022-06-29 23:51:21 +01:00
parent b842c36072
commit 6f17185dd1
No known key found for this signature in database
GPG key ID: 4740524CD85770A9
4 changed files with 65 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/renderer/style.css
View file

@ -12074,7 +12074,7 @@ input[type=checkbox][switch]:checked:active::before {
align-items: center;
color: white;
}
.playback-button.navigation > svg {
.playback-button.navigation > ._svg-icon {
height: 16px;
width: 16px;
pointer-events: none;
@ -13436,6 +13436,16 @@ input[type=checkbox][switch]:checked:active::before {
.playlist-page .playlist-body.scrollbody .tabs .tab-content .tab-pane .well {
margin: 0px;
}
.playlist-page .playlist-body .search-input-container {
height: 2.5rem;
margin: 1rem;
margin-top: 0;
scroll-margin-top: 1rem;
}
.playlist-page .playlist-body .search-input-container .search-input {
width: 100%;
height: 100%;
}
.playlist-page .floating-header {
position: sticky;
top: 0;
@ -13625,6 +13635,38 @@ input[type=checkbox][switch]:checked:active::before {
font-family: inherit;
text-transform: uppercase;
}
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn {
display: flex;
width: 32px;
align-items: center;
margin-right: 1rem;
background: transparent;
border: none;
cursor: pointer;
}
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn > ._svg-icon {
width: 18px;
height: 18px;
margin: auto;
opacity: 0.5;
}
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active {
animation: enlarge 0.5s ease-in-out;
}
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active > ._svg-icon {
opacity: 1;
}
@keyframes enlarge {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.playlist-page .friends-info {
display: flex;
flex-flow: column;