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

improvements to md-btn, added &.md-btn-icon

Browse source
This commit is contained in:
booploops 2022-01-28 01:58:27 -08:00
parent 310db6731c
commit 305da8ea08
2 changed files with 32 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/renderer/style.less
View file

@ -2140,12 +2140,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.md-btn { .md-btn {
background: rgba(100, 100, 100, 0.5); background: rgba(100, 100, 100, 0.5);
padding: 6px 12px; padding: 8px 14px;
border-radius: 4px; border-radius: 6px;
font-size: 16px; font-size: 14px;
border: 1px solid rgb(100 100 100 / 35%); border: 1px solid rgba(100, 100, 100, 0.35);
border-top: 1px solid rgba(100, 100, 100, 0.5);
color: #eee; color: #eee;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
transition: transform 0.2s var(--appleEase), box-shadow 0.2s var(--appleEase); transition: transform 0.2s var(--appleEase), box-shadow 0.2s var(--appleEase);
&.md-btn-block { &.md-btn-block {
@ -2174,6 +2174,21 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
transform: scale(0.98); transform: scale(0.98);
transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
} }
&.md-btn-icon {
display: inline-flex;
vertical-align: middle;
justify-content: center;
> img {
margin: 0px 16px 0px 0px;
pointer-events: none;
}
> .md-btn-text {
margin: 0px;
}
}
} }
.md-ico-play { .md-ico-play {
@ -2186,8 +2201,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.md-ico-shuffle { .md-ico-shuffle {
content:url("./assets/shuffle.svg"); content:url("./assets/shuffle.svg");
width: 17px; width: 1em;
height: 17px; height: 1em;
margin-right: 1px; margin-right: 1px;
margin-bottom: -2px; margin-bottom: -2px;
align-self: center; align-self: center;
@ -2204,8 +2219,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.md-ico-add { .md-ico-add {
content:url("./assets/feather/plus-circle-white.svg"); content:url("./assets/feather/plus-circle-white.svg");
width: 16px; width: 1em;
height: 16px; height: 1em;
margin-right: 1px; margin-right: 1px;
margin-bottom: -1.5px; margin-bottom: -1.5px;
align-self: center; align-self: center;

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

@ -62,19 +62,19 @@
</div> </div>
</template> </template>
<div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}"> <div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}">
<button class="md-btn" style="min-width: 100px;" <button class="md-btn md-btn-icon" style="min-width: 100px;"
@click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play"> @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
{{app.getLz('term.play')}} {{app.getLz('term.play')}}
</button> </button>
<button class="md-btn" style="min-width: 100px;" <button class="md-btn md-btn-icon" style="min-width: 100px;"
@click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle"> @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
{{app.getLz('term.shuffle')}} {{app.getLz('term.shuffle')}}
</button> </button>
<button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true" <button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'"> @click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }} {{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
</button> </button>
<button class="md-btn" style="min-width: 180px;" v-if="confirm==true" <button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'"> @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{app.getLz('term.confirm')}} {{app.getLz('term.confirm')}}
</button> </button>
@ -98,19 +98,19 @@
</div> </div>
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div> <div>
<button class="md-btn" style="min-width: 100px;" <button class="md-btn md-btn-icon" style="min-width: 100px;"
@click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play"> @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
{{app.getLz('term.play')}} {{app.getLz('term.play')}}
</button> </button>
<button class="md-btn" style="min-width: 100px;" <button class="md-btn md-btn-icon" style="min-width: 100px;"
@click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle"> @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
{{app.getLz('term.shuffle')}} {{app.getLz('term.shuffle')}}
</button> </button>
<button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true" <button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'"> @click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }} {{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
</button> </button>
<button class="md-btn" style="min-width: 180px;" v-if="confirm==true" <button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'"> @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{app.getLz('term.confirm')}} {{app.getLz('term.confirm')}}
</button> </button>