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 {
background: rgba(100, 100, 100, 0.5);
padding: 6px 12px;
border-radius: 4px;
font-size: 16px;
border: 1px solid rgb(100 100 100 / 35%);
padding: 8px 14px;
border-radius: 6px;
font-size: 14px;
border: 1px solid rgba(100, 100, 100, 0.35);
border-top: 1px solid rgba(100, 100, 100, 0.5);
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);
&.md-btn-block {
@ -2174,6 +2174,21 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
transform: scale(0.98);
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 {
@ -2186,8 +2201,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.md-ico-shuffle {
content:url("./assets/shuffle.svg");
width: 17px;
height: 17px;
width: 1em;
height: 1em;
margin-right: 1px;
margin-bottom: -2px;
align-self: center;
@ -2204,8 +2219,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.md-ico-add {
content:url("./assets/feather/plus-circle-white.svg");
width: 16px;
height: 16px;
width: 1em;
height: 1em;
margin-right: 1px;
margin-bottom: -1.5px;
align-self: center;

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

@ -62,19 +62,19 @@
</div>
</template>
<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">
{{app.getLz('term.play')}}
</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">
{{app.getLz('term.shuffle')}}
</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'">
{{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
</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'">
{{app.getLz('term.confirm')}}
</button>
@ -98,19 +98,19 @@
</div>
<div class="col-auto flex-center">
<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">
{{app.getLz('term.play')}}
</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">
{{app.getLz('term.shuffle')}}
</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'">
{{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
</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'">
{{app.getLz('term.confirm')}}
</button>