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

improvements for small windows

Browse source
This commit is contained in:
booploops 2022-01-12 07:16:29 -08:00
parent 320a90e4b2
commit fab2e1ba33
5 changed files with 532 additions and 432 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/index.js
View file

@ -658,7 +658,7 @@ const app = new Vue({
}) })
}, },
select_hasMediaItem(id) { select_hasMediaItem(id) {
let found = this.selectedMediaItems.find(item => item.id == id) let found = this.selectedMediaItems.find(item => item.guid == id)
if (found) { if (found) {
return true return true
} else { } else {

50
src/renderer/less/compact.less Normal file
View file

@ -0,0 +1,50 @@
.app-sidebar-content.compact {
padding:0px;
.app-sidebar-header-text {
padding: 6px 10px;
margin: 0px;
}
.app-sidebar-item {
display: flex;
width: 100%;
padding: 8px 12px;
font-size: 13px;
margin: 0px;
border: 1px solid transparent;
border-radius: 0px;
transition: unset;
transform: unset;
&:active {
background: var(--selected-click);
}
&::after {
display: none;
}
&.active {
background: var(--keyColor-disabled);
}
}
.sidebar-icon {
width: 14px;
height: 16px;
margin-right: 8px;
}
.folder-body {
border-radius: 0px;
padding: 0px;
}
}
// if page width is less than 951px
@media (max-width: 951px) {
.content-inner {
zoom: 0.8;
}
}

657
src/renderer/style.less
View file

@ -332,31 +332,33 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
left: 0; left: 0;
padding: 32px; padding: 32px;
width: 100%; width: 100%;
transition: zoom 1s;
zoom: 1;
} }
.content-inner.centered { .content-inner.centered {
height: 100%; height: 100%;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.app-drawer { .app-drawer {
width: 300px; width: 300px;
flex: 0 0 auto; flex: 0 0 auto;
position: absolute; position: absolute;
right: 16px; right: 16px;
top: 3%; top: 3%;
background: #1c1c1c8f; background: #1c1c1c8f;
border-radius: 12px; border-radius: 12px;
z-index: 9; z-index: 9;
height: 94%; height: 94%;
backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
box-shadow: var(--ciderShadow-Generic); box-shadow: var(--ciderShadow-Generic);
overflow: hidden; overflow: hidden;
.bgArtworkMaterial { .bgArtworkMaterial {
display: none; display: none;
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -365,139 +367,150 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.bg-artwork-container .bg-artwork { .bg-artwork-container .bg-artwork {
filter: brightness(80%) blur(180px) saturate(180%) contrast(1); filter: brightness(80%) blur(180px) saturate(180%) contrast(1);
} }
} }
} }
.search-input-container { .search-input-container {
position: relative; position: relative;
} }
.search-input { .search-input {
width: 100%; width: 100%;
padding: 6px; padding: 6px;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgb(200 200 200 / 10%); border: 1px solid rgb(200 200 200 / 10%);
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
background: rgb(100 100 100 / 25%); background: rgb(100 100 100 / 25%);
color: rgb(200 200 200); color: rgb(200 200 200);
font-weight: 500; font-weight: 500;
padding-left: 32px; padding-left: 32px;
position: relative; position: relative;
filter: contrast(0.1); filter: contrast(0.1);
} }
.search-input:focus { .search-input:focus {
outline: none; outline: none;
border-bottom: 1px solid var(--keyColor); border-bottom: 1px solid var(--keyColor);
} }
.search-input--icon { .search-input--icon {
content: ''; content: '';
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
background-image: url('assets/search.svg'); background-image: url('assets/search.svg');
background-position: 10px; background-position: 10px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 12px; background-size: 12px;
pointer-events: none; pointer-events: none;
opacity: 0.55; opacity: 0.55;
} }
.app-sidebar-header { .app-sidebar-header {
font-size: 14px; font-size: 14px;
padding: 11px; padding: 11px;
font-weight: 600; font-weight: 600;
} }
.app-sidebar-header-text { .app-sidebar-header-text {
font-size: 11px; font-size: 11px;
margin: 6px 3px; margin: 6px 3px;
font-weight: 600; font-weight: 600;
opacity: 0.50; opacity: 0.50;
} }
.app-sidebar-footer { .app-sidebar-footer {
padding: 11px; padding: 11px;
.app-playback-controls {
.control-buttons {
display: flex;
justify-content: center;
align-content: center;
}
.volume {
display: flex;
}
}
} }
.app-sidebar-button { .app-sidebar-button {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
font-family: inherit; font-family: inherit;
display: flex; display: flex;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgb(200 200 200 / 5%); border: 1px solid rgb(200 200 200 / 5%);
background: rgb(100 100 100 / 25%); background: rgb(100 100 100 / 25%);
color: #eee; color: #eee;
font-weight: 500; font-weight: 500;
align-items: center; align-items: center;
&.active { &.active {
background: rgb(200 200 200 / 15%); background: rgb(200 200 200 / 15%);
animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56); animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
} }
} }
@keyframes usermenuBtnClick { @keyframes usermenuBtnClick {
0% { 0% {
transform: translateY(0px); transform: translateY(0px);
} }
50% { 50% {
transform: translateY(-6px); transform: translateY(-6px);
} }
100% { 100% {
transform: translateY(0px); transform: translateY(0px);
} }
} }
.app-sidebar-button > .sidebar-user-icon { .app-sidebar-button > .sidebar-user-icon {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 100%; border-radius: 100%;
background-image: var(--artwork); background-image: var(--artwork);
margin: 10px; margin: 10px;
flex: 0 0 auto; flex: 0 0 auto;
box-shadow: var(--mediaItemShadow); box-shadow: var(--mediaItemShadow);
background-size: contain; background-size: contain;
} }
.app-sidebar-button > .sidebar-user-text { .app-sidebar-button > .sidebar-user-text {
width: 100%; width: 100%;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
flex-direction: column; flex-direction: column;
} }
.app-sidebar-button > .sidebar-user-text .fullname { .app-sidebar-button > .sidebar-user-text .fullname {
text-align: left; text-align: left;
} }
.app-sidebar-button > .sidebar-user-text .handle-text { .app-sidebar-button > .sidebar-user-text .handle-text {
font-size: 12px; font-size: 12px;
opacity: 0.7; opacity: 0.7;
text-align: left; text-align: left;
} }
.app-sidebar-notification { .app-sidebar-notification {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
min-height: 60px; min-height: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-top: 1px solid rgb(200 200 200 / 15%); border-top: 1px solid rgb(200 200 200 / 15%);
background: rgb(0 0 0 / 15%); background: rgb(0 0 0 / 15%);
flex-direction: column; flex-direction: column;
padding: 20px 0px; padding: 20px 0px;
&.libraryNotification { &.libraryNotification {
flex-direction: row; flex-direction: row;
padding: 0px; padding: 0px;
.message { .message {
@ -508,33 +521,33 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 30px; height: 30px;
margin-left: 1em; margin-left: 1em;
} }
} }
} }
.app-sidebar-content { .app-sidebar-content {
padding: 8px; padding: 8px;
overflow-y: scroll; overflow-y: scroll;
overflow-y: overlay; overflow-y: overlay;
height: 100%; height: 100%;
} }
#cmenu() { #cmenu() {
.container { .container {
position: absolute; position: absolute;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
z-index: 1; z-index: 1;
} }
.body { .body {
background: #242424; background: #242424;
padding: 6px; padding: 6px;
border-radius: 6px; border-radius: 6px;
width: 100%; width: 100%;
box-shadow: var(--ciderShadow-Generic); box-shadow: var(--ciderShadow-Generic);
} }
.item { .item {
background: transparent; background: transparent;
display: block; display: block;
width: 100%; width: 100%;
@ -551,45 +564,45 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
&:hover { &:hover {
background: var(--keyColor); background: var(--keyColor);
} }
} }
} }
.search-hints-container { .search-hints-container {
top: 44px; top: 44px;
#cmenu.container(); #cmenu.container();
.search-hints { .search-hints {
#cmenu.body(); #cmenu.body();
.search-hint { .search-hint {
#cmenu.item(); #cmenu.item();
} }
} }
} }
.usermenu-container { .usermenu-container {
bottom: 66px; bottom: 66px;
#cmenu.container(); #cmenu.container();
.usermenu-body { .usermenu-body {
#cmenu.body(); #cmenu.body();
.usermenu-item { .usermenu-item {
#cmenu.item(); #cmenu.item();
} }
} }
} }
.context-menu { .context-menu {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.0); background: rgba(0, 0, 0, 0.0);
z-index: 100; z-index: 100;
.context-menu-item { .context-menu-item {
background: transparent; background: transparent;
display: flex; display: flex;
width: 100%; width: 100%;
@ -611,9 +624,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
&:active { &:active {
background: var(--selected-click); background: var(--selected-click);
} }
} }
.context-menu-body { .context-menu-body {
background: #242424; background: #242424;
padding: 6px; padding: 6px;
border-radius: 6px; border-radius: 6px;
@ -632,350 +645,350 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
animation-iteration-count: 1; animation-iteration-count: 1;
animation-easings: var(--appleEase); animation-easings: var(--appleEase);
} }
} }
} }
@keyframes contextMenuIn { @keyframes contextMenuIn {
0% { 0% {
transform: scale(0.9); transform: scale(0.9);
opacity: 0; opacity: 0;
} }
100% { 100% {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
} }
@keyframes contextMenuOut { @keyframes contextMenuOut {
0% { 0% {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
100% { 100% {
transform: scale(0.9); transform: scale(0.9);
opacity: 0; opacity: 0;
} }
} }
.hidden-opacity { .hidden-opacity {
opacity: 0; opacity: 0;
height: 0px; height: 0px;
width: 0px; width: 0px;
margin: 0px; margin: 0px;
} }
.spinner { .spinner {
background-image: url("assets/spinner.svg"); background-image: url("assets/spinner.svg");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
width: 50px; width: 50px;
height: 50px; height: 50px;
display: inline-block; display: inline-block;
} }
.app-sidebar-content::-webkit-scrollbar { .app-sidebar-content::-webkit-scrollbar {
display: none; display: none;
} }
.app-sidebar-content:hover::-webkit-scrollbar { .app-sidebar-content:hover::-webkit-scrollbar {
display: initial; display: initial;
} }
.app-sidebar-item { .app-sidebar-item {
display: flex; display: flex;
width: 100%; width: 100%;
padding: 8px 12px; padding: 8px 12px;
font-weight: 400; font-weight: 400;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
margin: 6px 0px; margin: 6px 0px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 6px; border-radius: 6px;
background: transparent; background: transparent;
color: #eee; color: #eee;
transition: transform .1s; transition: transform .1s;
text-align: left; text-align: left;
&.app-sidebar-item-playlist { &.app-sidebar-item-playlist {
-webkit-user-drag: element; -webkit-user-drag: element;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.app-sidebar-item:hover { .app-sidebar-item:hover {
border: 1px solid rgb(200 200 200 / 5%); border: 1px solid rgb(200 200 200 / 5%);
background: rgb(200 200 200 / 15%); background: rgb(200 200 200 / 15%);
} }
.app-sidebar-item:active { .app-sidebar-item:active {
border: 1px solid rgb(200 200 200 / 5%); border: 1px solid rgb(200 200 200 / 5%);
background: rgb(200 200 200 / 15%); background: rgb(200 200 200 / 15%);
transform: scale(0.98); transform: scale(0.98);
transition: transform 0s; transition: transform 0s;
} }
.app-sidebar-item.active { .app-sidebar-item.active {
border: 1px solid rgb(200 200 200 / 5%); border: 1px solid rgb(200 200 200 / 5%);
background: rgb(200 200 200 / 15%); background: rgb(200 200 200 / 15%);
transform: scale(1); transform: scale(1);
transition: transform 0s; transition: transform 0s;
} }
.app-sidebar-item.active::after { .app-sidebar-item.active::after {
content: ''; content: '';
width: 4px; width: 4px;
height: 16px; height: 16px;
display: block; display: block;
position: absolute; position: absolute;
top: calc(100% - 72%); top: calc(100% - 72%);
border-radius: 10px; border-radius: 10px;
left: 0px; left: 0px;
background: var(--keyColor); background: var(--keyColor);
} }
.app-chrome { .app-chrome {
background: var(--color1); background: var(--color1);
width: 100%; width: 100%;
height: var(--chromeHeight); height: var(--chromeHeight);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
-webkit-app-region: drag; -webkit-app-region: drag;
} }
.mv-chrome { .mv-chrome {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 90%; width: 90%;
height: 55px; height: 55px;
-webkit-app-region: drag; -webkit-app-region: drag;
} }
.app-chrome .app-chrome--left, .app-chrome .app-chrome--left,
.app-chrome .app-chrome--center, .app-chrome .app-chrome--center,
.app-chrome .app-chrome--right { .app-chrome .app-chrome--right {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.app-chrome .app-chrome--left { .app-chrome .app-chrome--left {
width: 30%; width: 30%;
justify-content: left; justify-content: left;
} }
.app-chrome .app-chrome--center { .app-chrome .app-chrome--center {
width: 100%; width: 100%;
} }
.app-chrome .app-chrome--right { .app-chrome .app-chrome--right {
width: 30%; width: 30%;
justify-content: right; justify-content: right;
} }
.app-chrome .app-chrome-item { .app-chrome .app-chrome-item {
height: 100%; height: 100%;
width: auto; width: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
height: auto; height: auto;
} }
.app-chrome .app-chrome-item.generic { .app-chrome .app-chrome-item.generic {
width: 50px; width: 50px;
opacity: 0.70; opacity: 0.70;
} }
.app-chrome .app-chrome-item.volume { .app-chrome .app-chrome-item.volume {
width: 100px; width: 100px;
margin-right: 6px; margin-right: 6px;
} }
.app-chrome-item.volume-icon { .app-chrome-item.volume-icon {
opacity: 0.7; opacity: 0.7;
background-image: url(http://localhost:9000/assets/volume-up.svg); background-image: url(http://localhost:9000/assets/volume-up.svg);
height: 15px; height: 15px;
width: 30px; width: 30px;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
transition: all var(--appleTransition); transition: all var(--appleTransition);
} }
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px); background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2); transform: scale(1.2);
} }
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px); background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
transform: scale(1); transform: scale(1);
} }
.app-chrome .app-chrome-item.volume > input[type=range] { .app-chrome .app-chrome-item.volume > input[type=range] {
width: 100%; width: 100%;
} }
.app-chrome .app-chrome-item.volume > input[type=range] { .app-chrome .app-chrome-item.volume > input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
height: 4px; height: 4px;
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
border-radius: 5px; border-radius: 5px;
background-size: 70% 100%; background-size: 70% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
height: 14px; height: 14px;
width: 14px; width: 14px;
border-radius: 50%; border-radius: 50%;
background: rgb(50 50 50); background: rgb(50 50 50);
cursor: default; cursor: default;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
} }
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none; -webkit-appearance: none;
box-shadow: none; box-shadow: none;
border: none; border: none;
background: transparent; background: transparent;
} }
.app-chrome .back-button { .app-chrome .back-button {
height: 100%; height: 100%;
width: 60px; width: 60px;
} }
.app-chrome .app-chrome-item.full-height { .app-chrome .app-chrome-item.full-height {
height: 100%; height: 100%;
} }
.app-chrome .app-chrome-item > .app-title { .app-chrome .app-chrome-item > .app-title {
width: 100px; width: 100px;
font-size: 13px; font-size: 13px;
background: url("./logotmp.svg"); background: url("./logotmp.svg");
background-size: 90px; background-size: 90px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 100%; height: 100%;
margin-right: 16px; margin-right: 16px;
margin-left: 16px; margin-left: 16px;
image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-optimize-contrast;
-webkit-app-region: drag; -webkit-app-region: drag;
} }
.app-chrome .app-chrome-item > .window-controls { .app-chrome .app-chrome-item > .window-controls {
width: 138px; width: 138px;
font-size: 13px; font-size: 13px;
height: 100%; height: 100%;
display: flex; display: flex;
} }
.app-chrome .app-chrome-item > .window-controls > div { .app-chrome .app-chrome-item > .window-controls > div {
height: 100%; height: 100%;
width: 32px; width: 32px;
} }
.app-chrome .app-chrome-item > .window-controls > div:hover { .app-chrome .app-chrome-item > .window-controls > div:hover {
background: rgb(200 200 200 / 10%); background: rgb(200 200 200 / 10%);
} }
.app-chrome .app-chrome-item > .window-controls > div.close { .app-chrome .app-chrome-item > .window-controls > div.close {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: var(--gfx-closeBtn); background-image: var(--gfx-closeBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
&:hover { &:hover {
background-color: rgb(196, 43, 28) background-color: rgb(196, 43, 28)
} }
} }
.app-chrome .app-chrome-item > .window-controls > div.minmax { .app-chrome .app-chrome-item > .window-controls > div.minmax {
background-image: var(--gfx-maxBtn); background-image: var(--gfx-maxBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.app-chrome .app-chrome-item > .window-controls > div.minmax.restore { .app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
background-image: var(--gfx-restoreBtn); background-image: var(--gfx-restoreBtn);
} }
.app-chrome .app-chrome-item > .window-controls > div.minimize { .app-chrome .app-chrome-item > .window-controls > div.minimize {
background-image: var(--gfx-minBtn); background-image: var(--gfx-minBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.app-chrome .app-chrome-item.playback-controls { .app-chrome .app-chrome-item.playback-controls {
width: 80%; width: 80%;
height: 90%; height: 90%;
display: flex; display: flex;
max-width: 500px; max-width: 500px;
border-left: 1px solid rgb(200 200 200 / 8%); border-left: 1px solid rgb(200 200 200 / 8%);
border-right: 1px solid rgb(200 200 200 / 8%); border-right: 1px solid rgb(200 200 200 / 8%);
} }
.app-chrome .app-chrome-item > .app-playback-controls { .app-chrome .app-chrome-item > .app-playback-controls {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
width: 100%; width: 100%;
} }
.app-chrome .app-chrome-item > .app-playback-controls .song-name { .app-chrome .app-chrome-item > .app-playback-controls .song-name {
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
height: 1.3em; height: 1.3em;
line-height: 1.3em; line-height: 1.3em;
overflow: hidden; overflow: hidden;
max-width: 360px; max-width: 360px;
.song-name-normal { .song-name-normal {
height: inherit; height: inherit;
} }
&.song-artist-marquee { &.song-artist-marquee {
> marquee { > marquee {
//margin-bottom: -3px; //margin-bottom: -3px;
} }
} }
} }
.app-chrome .app-chrome-item > .app-playback-controls .song-duration p { .app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 10px;
height: 1.2em; height: 1.2em;
line-height: 1.3em; line-height: 1.3em;
overflow: hidden; overflow: hidden;
margin: 0 0 0.5em; margin: 0 0 0.5em;
} }
.app-chrome .app-chrome-item > .app-playback-controls .song-artist { .app-chrome .app-chrome-item > .app-playback-controls .song-artist {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
/*height: 1.2em; /*height: 1.2em;
line-height: 1.2em;*/ line-height: 1.2em;*/
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
max-width: 360px; max-width: 360px;
@ -2953,7 +2966,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
// list item compact // list item compact
&.compact { &.compact {
height: 40px; height: 40px;
font-size: 12px; font-size: 13px;
.artwork { .artwork {
display: none; display: none;
} }
@ -4364,3 +4377,5 @@ body.no-gpu {
right: -300px; right: -300px;
} }
} }
@import url("less/compact.less");

3
src/renderer/views/components/mediaitem-list-item.ejs
View file

@ -7,8 +7,9 @@
:data-index="index" :data-index="index"
:data-guid="guid" :data-guid="guid"
:data-islibrary="this.item.attributes.playParams.isLibrary ?? false" :data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
:key="item.attributes.playParams.id ?? item.id"
class="cd-mediaitem-list-item" class="cd-mediaitem-list-item"
:class="[{'mediaitem-selected': app.select_hasMediaItem(item.id)}, addClasses]"> :class="[{'mediaitem-selected': app.select_hasMediaItem(item.attributes.playParams.id ?? item.id)}, addClasses]">
<template v-if="isVisible"> <template v-if="isVisible">
<div class="isLibrary" v-if="showLibraryStatus == true"> <div class="isLibrary" v-if="showLibraryStatus == true">
<button @click="addToLibrary()" <button @click="addToLibrary()"

48
src/renderer/views/main.ejs
View file

@ -48,23 +48,23 @@
<div class="app-chrome-item full-height" v-else> <div class="app-chrome-item full-height" v-else>
<div class="app-title"></div> <div class="app-title"></div>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item display--large">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button> @click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle active" v-else <button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button> @click="mk.shuffleMode = 0"></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item display--large">
<button class="playback-button previous" @click="prevButton()"></button> <button class="playback-button previous" @click="prevButton()"></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item display--large">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button> <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button> <button class="playback-button play" @click="mk.play()" v-else></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item display--large">
<button class="playback-button next" @click="mk.skipToNextItem()"></button> <button class="playback-button next" @click="mk.skipToNextItem()"></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item display--large">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0" <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button> @click="mk.repeatMode = 1"></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2" <button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
@ -239,9 +239,43 @@
</div> </div>
</transition> </transition>
<div class="app-sidebar-footer"> <div class="app-sidebar-footer">
<input type="range" class="web-slider display--small" step="0.01" min="0" max="1"
v-model="mk.volume" @wheel="volumeWheel" <div class="app-playback-controls display--small" v-if="mkReady()"
@contextmenu="nowPlayingContextMenu">
<div class="control-buttons">
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button>
</div>
<div class="app-chrome-item">
<button class="playback-button previous" @click="prevButton()"></button>
</div>
<div class="app-chrome-item">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button>
</div>
<div class="app-chrome-item">
<button class="playback-button next" @click="mk.skipToNextItem()"></button>
</div>
<div class="app-chrome-item">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
</div>
</div>
<div class="app-chrome-item volume">
<div class="app-chrome-item volume-icon"></div>
<div class="input-container">
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'"> v-if="typeof mk.volume != 'undefined'">
</div>
</div>
</div>
<button class="app-sidebar-button" style="width:100%" <button class="app-sidebar-button" style="width:100%"
:class="{active: chrome.menuOpened}" :class="{active: chrome.menuOpened}"
@blur="setTimeout(()=>{chrome.menuOpened = false}, 100)" @blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"