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

Merge pull request #1225 from Monochromish/main

Browse source 
Add color to search button background
This commit is contained in:
yazninja 2022-07-02 20:51:18 +08:00 • committed by GitHub
commit 8bedcf81cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/renderer/less/elements.less
View file

@ -2090,6 +2090,7 @@ input[type=checkbox][switch]:checked:active::before {
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
flex: 0 0 32px; flex: 0 0 32px;
box-shadow: var(--ciderShadow-Generic);
&:hover { &:hover {
background: var(--selected); background: var(--selected);

8
src/renderer/less/pages.less
View file

@ -825,9 +825,11 @@
width: 32px; width: 32px;
align-items: center; align-items: center;
margin-right: 1rem; margin-right: 1rem;
background: transparent; background: rgba(100, 100, 100, 0.5);
border: none; border: none;
cursor: pointer; cursor: pointer;
border-radius: 100vmax;
box-shadow: var(--ciderShadow-Generic);
> ._svg-icon { > ._svg-icon {
width: 18px; width: 18px;
@ -840,6 +842,10 @@
animation: enlarge 0.5s ease-in-out; animation: enlarge 0.5s ease-in-out;
} }
.search-btn:hover {
filter: brightness(125%);
}
@keyframes enlarge { @keyframes enlarge {
0% { 0% {
transform: scale(1); transform: scale(1);

8
src/renderer/style.css
View file

@ -12260,6 +12260,7 @@ input[type=checkbox][switch]:checked:active::before {
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
flex: 0 0 32px; flex: 0 0 32px;
box-shadow: var(--ciderShadow-Generic);
} }
.artist-chip .artist-chip__follow:hover { .artist-chip .artist-chip__follow:hover {
background: var(--selected); background: var(--selected);
@ -13660,9 +13661,11 @@ input[type=checkbox][switch]:checked:active::before {
width: 32px; width: 32px;
align-items: center; align-items: center;
margin-right: 1rem; margin-right: 1rem;
background: transparent; background: rgba(100, 100, 100, 0.5);
border: none; border: none;
cursor: pointer; cursor: pointer;
border-radius: 100vmax;
box-shadow: var(--ciderShadow-Generic);
} }
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn > ._svg-icon { .playlist-page .playlist-display .playlistInfo .playlist-info .search-btn > ._svg-icon {
width: 18px; width: 18px;
@ -13672,6 +13675,9 @@ input[type=checkbox][switch]:checked:active::before {
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active { .playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active {
animation: enlarge 0.5s ease-in-out; animation: enlarge 0.5s ease-in-out;
} }
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn:hover {
filter: brightness(125%);
}
@keyframes enlarge { @keyframes enlarge {
0% { 0% {
transform: scale(1); transform: scale(1);

11
src/renderer/views/pages/cider-playlist.ejs
View file

@ -108,15 +108,12 @@
{{app.getLz('term.confirm')}} {{app.getLz('term.confirm')}}
</button> </button>
<div style="display: flex; float: right;"> <div style="display: flex; float: right;">
<button :class="['search-btn', showSearch ? 'active' : '']" <button :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }" :class="['search-btn', showSearch ? 'active' : '']" @click="toggleSearch()" :aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
@click="toggleSearch()" <svg-icon :style="{ 'width': '15px', 'background-color': '#' + hasHeroObject()?.bgColor ?? '' }" :url="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
:aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
<svg-icon :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }"
:url="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
</svg-icon> </svg-icon>
</button> </button>
<button class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')"> <button :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }" class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div> <div :style="{ 'background-color': '#' + hasHeroObject()?.bgColor ?? '' }" class="svg-icon"></div>
</button> </button>
</div> </div>
</div> </div>