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

app chrome changes, added app.macOSEmu()

Browse source
This commit is contained in:
booploops 2022-03-28 22:15:40 -07:00
parent 474084deb8
commit 0d5be827c0
8 changed files with 210 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

135
src/renderer/less/directives.less
View file

@ -1,20 +1,24 @@
#app.navbar {
--navigationBarHeight: 38px;
}
#app.twopanel {
--chromeHeight1: 42px;
--chromeHeight2: 76px;
--chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
--chromeHeight : calc(var(--chromeHeight1) + var(--chromeHeight2));
.app-chrome {
.app-mainmenu {
margin-left: 10px;
width: 88px;
width : 30px;
height: 30px;
}
height: var(--chromeHeight1);
&.chrome-bottom {
height: var(--chromeHeight2);
height : var(--chromeHeight2);
box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
z-index: 1;
z-index : 1;
}
}
@ -29,39 +33,39 @@
.playback-button.play,
.playback-button.pause {
width: 42px;
height: 42px;
width : 42px;
height : 42px;
background-color: rgb(200 200 200 / 20%);
border-radius: 50%;
margin: 6px;
box-shadow: 0px 0px 0px 2px var(--keyColor);
border-radius : 50%;
margin : 6px;
box-shadow : 0px 0px 0px 2px var(--keyColor);
}
.app-chrome--center {
display: flex;
display : flex;
flex-direction: column;
.app-chrome-playback-controls {
display: flex;
z-index: 1;
display : flex;
z-index : 1;
// margin-bottom: 12px;
}
.app-chrome-playback-duration {
position: relative;
width: 80%;
position : relative;
width : 80%;
-webkit-app-region: no-drag;
height: 16px;
height : 16px;
.song-progress {
@bgColor: transparent;
height: 16px;
position: absolute;
bottom: 4px;
left: 0px;
right: 4px;
@bgColor : transparent;
height : 16px;
position : absolute;
bottom : 4px;
left : 0px;
right : 4px;
background: @bgColor;
z-index: 0;
z-index : 0;
.song-duration {
@ -70,41 +74,41 @@
.song-duration p {
font-weight: 400;
font-size: 10px;
height: 1.2em;
font-size : 10px;
height : 1.2em;
line-height: 1.3em;
overflow: hidden;
margin: 0 0 0 0.25em;
overflow : hidden;
margin : 0 0 0 0.25em;
}
&:hover {
> input[type=range] {
>input[type=range] {
&::-webkit-slider-thumb {
opacity: 1;
opacity : 1;
transform: scale(1);
z-index: 1;
z-index : 1;
}
}
}
input[type=range] {
appearance: none;
width: 100%;
height: 4px;
appearance : none;
width : 100%;
height : 4px;
background-color: rgb(200 200 200 / 10%);
border-radius: 2px;
border-radius : 2px;
&::-webkit-slider-thumb {
opacity: 0;
transform: scale(0.5);
opacity : 0;
transform : scale(0.5);
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 100%;
background: var(--keyColor);
cursor: default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
appearance : none;
width : 12px;
height : 12px;
border-radius : 100%;
background : var(--keyColor);
cursor : default;
transition : opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
}
}
@ -113,40 +117,40 @@
}
.app-chrome--left {
width: 30%;
width : 30%;
justify-content: flex-start;
align-items: flex-start;
align-items : flex-start;
.playback-controls {
.artwork {
width: var(--chromeHeight2);
height: var(--chromeHeight2);
margin: 0px 6px 0px 0px;
width : var(--chromeHeight2);
height : var(--chromeHeight2);
margin : 0px 6px 0px 0px;
box-shadow: unset;
border: 0px;
border : 0px;
.mediaitem-artwork,
img {
border-radius: 0px;
box-shadow: unset;
border: 0px;
box-shadow : unset;
border : 0px;
}
}
.playback-info {
align-items: flex-start;
margin: 6px;
margin : 6px;
.song-name {
text-align: left;
font-size: 15px;
font-weight: initial;
width: 100%;
text-align : left;
font-size : 15px;
font-weight : initial;
width : 100%;
-webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
}
.song-artist-album {
width: 100%;
width : 100%;
-webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
}
@ -156,29 +160,30 @@
.song-artist-album-content {
text-align: left;
font-size: 12px;
font-size : 12px;
}
}
width: 100%;
height: 100%;
width : 100%;
height : 100%;
max-width: 100%;
border: 0px;
border : 0px;
}
flex: 0 0 auto;
}
.app-chrome--right {
width: 30%;
flex: 0 0 auto;
width : 30%;
flex : 0 0 auto;
padding-right: 8px;
}
}
.collection-page {
.top-fab {
bottom:96px;
bottom: 96px;
}
}
}
}