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

episode 3

Browse source
This commit is contained in:
booploops 2022-05-26 22:03:36 -07:00
parent 3102db4fa0
commit def6ee6c8a
7 changed files with 109 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/renderer/less/appvars.less Normal file
View file

@ -0,0 +1,20 @@
@colorMixRate: 1%;
@transparencyRate: 50%;
@keyColor : #fc3c44;
@ciderColor: #ff2654;
@baseColor: #1e1e1e;
@baseColorMix: mix(@baseColor, transparent, @transparencyRate);
@sidebarColor: #2e2e2e;
@sidebarColorMix: mix(@sidebarColor, transparent, @transparencyRate);
@appOpacity: 0.15;
:root {
--baseColor: @baseColor;
--baseColorMix: @baseColorMix;
--sidebarColor: @sidebarColor;
--sidebarColorMix: @sidebarColorMix;
--ciderColor: @ciderColor;
--appOpacity: @appOpacity;
--transparencyRate: @transparencyRate;
}

4
src/renderer/less/compact.less
View file

@ -46,7 +46,7 @@
@media (max-width: 951px) {
#app-content {
zoom: 0.8;
// zoom: 0.8;
}
}
}
@ -54,6 +54,6 @@
// if page width is less than 951px
@media (max-width: 951px) {
#app-content {
zoom: 0.8;
// zoom: 0.8;
}
}

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

@ -1,12 +1,3 @@
@colorMixRate: 1%;
@transparencyRate: 50%;
@keyColor : #fc3c44;
@ciderColor: #ff2654;
@baseColor: #1e1e1e;
@baseColorMix: mix(@baseColor, transparent, @transparencyRate);
@sidebarColor: #2e2e2e;
@sidebarColorMix: mix(@sidebarColor, transparent, @transparencyRate);
#app.navbar {
--navigationBarHeight: 38px;
@ -77,8 +68,9 @@
background: var(--color2);
-webkit-app-region: no-drag;
height: var(--chromeHeight2);
box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
z-index: 1;
box-shadow: 0px -2px 6px rgb(20 20 20 / 12%),
0px -1px 0px 0px rgb(200 200 200 / 12%);
z-index: 4;
.app-chrome-playback-duration-bottom {
width: 100%;

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

@ -1425,8 +1425,6 @@
//Home
.home-page {
top : 0;
//padding-top: var(--navbarHeight);
.md-btn-replay {
background-image: linear-gradient(-45deg, #2e2173, #925042);

119
src/renderer/style.less
View file

@ -4,6 +4,7 @@
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
@import url("less/appvars.less");
@import url("less/bootstrap-vue.min.less");
@import url("less/ameframework.less");
@import url("less/codicon.css");
@ -29,7 +30,8 @@
--selected: rgb(130 130 130 / 30%);
--selected-click: rgb(80 80 80 / 30%);
--hover: rgb(200 200 200 / 10%);
--keyColor: #fa586a;
// --keyColor: #fa586a;
--keyColor: @keyColor;
--keyColor-rgb: 250, 88, 106;
--keyColor-rollover: #ff8a9c;
--keyColor-rollover-rgb: 255, 138, 156;
@ -164,7 +166,7 @@ body.notransparency::before {
--chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
width: 100%;
height: 100%;
background: var(--color1);
background: transparent;
color: var(--textColor);
user-select: none;
margin: 0 auto;
@ -383,6 +385,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
flex-direction: column;
opacity: 1;
overflow: hidden;
background-color: rgba(20 20 20 / .7);
}
#app-sidebar {
@ -393,6 +396,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
flex-direction: column;
flex: 0 0 auto;
position: relative;
background : var(--sidebarColorMix);
max-width : 260px;
padding-top: var(--chromeHeight1);
}
#app-navbar {
@ -407,16 +413,21 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
#app-content {
background-color: var(--color3);
--navigationBarHeight: var(--chromeHeight1);
background-color: var(--baseColorMix);
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-y: overlay;
overflow-x: hidden;
border-radius: 10px 0px 0px 0px;
border-left: 1px solid rgb(0 0 0 / 25%);
border-top: 1px solid rgb(0 0 0 / 25%);
border-radius: 0;
border-left: 1px solid var(--baseColorMix);
// border-top: 1px solid rgb(0 0 0 / 25%);
position: relative;
&::-webkit-scrollbar-track-piece {
margin-top: var(--chromeHeight1);
}
}
.app-drawer {
@ -424,14 +435,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
flex: 0 0 auto;
position: absolute;
right: 16px;
top: 3%;
background: var(--color2);
border-radius: 12px;
z-index: 10;
height: 94%;
backdrop-filter: blur(40px) saturate(180%);
box-shadow: var(--ciderShadow-Generic);
overflow: hidden;
height: calc(calc(100% - 6%) - var(--chromeHeight1));
top: calc(var(--chromeHeight1) + 3%);
.bgArtworkMaterial {
display: none;
@ -453,15 +464,16 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
width: 100%;
padding: 6px;
border-radius: 6px;
border: 1px solid rgb(200 200 200 / 10%);
border : 1px solid rgba(100, 100, 100, 0.35);
border-top : 1px solid rgba(100, 100, 100, 0.5);
border-bottom: 1px solid rgb(60 60 60 / 12%);
font-family: inherit;
font-size: 14px;
background: rgb(100 100 100 / 25%);
background: rgba(100, 100, 100, 0.25);;
color: rgb(200 200 200);
font-weight: 500;
padding-left: 32px;
position: relative;
filter: contrast(0.1);
}
.search-input:focus {
@ -690,7 +702,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
.usermenu-container {
top: 0px;
top: var(--chromeHeight1);
z-index: 200001 !important;
#cmenu.container();
@ -874,36 +886,61 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
cursor: default;
}
.app-sidebar-item.active::after {
content: '';
width: 4px;
height: 16px;
display: block;
position: absolute;
top: calc(100% - 72%);
border-radius: 10px;
left: 0px;
background: var(--keyColor);
// animation: expandIndicator .2s cubic-bezier(0.25, 1, 0.5, 1);
// @keyframes expandIndicator {
// 0% {
// transform: scaleY(0);
// }
// 100% {
// transform: scaleY(1);
// }
// }
}
.app-chrome {
background: var(--color1);
background-color: var(--baseColorMix);
box-shadow: 0px 3px 6px rgb(20 20 20 / 12%),
0px 1px 0px 0px rgb(200 200 200 / 12%);
width: 100%;
height: var(--chromeHeight1);
display: flex;
flex-direction: row;
-webkit-app-region: drag;
z-index: 1;
&:not(.chrome-bottom) {
// box-shadow: 0px 0px
z-index: 16;
position: fixed;
backdrop-filter: var(--glassFilter);
.app-chrome--center {
flex:1;
}
}
.top-nav-group {
background: var(--baseColor);
border: 1px solid lighten(@baseColor, 8);
border-radius: 10px;
display: flex;
height: 32px;
.app-sidebar-item {
background-color: var(--baseColor);
border-radius: 10px!important;
border:0px;
min-width: 120px;
padding:6px;
justify-content: center;
align-items: center;
margin: 0px;
height: 100%;
&:hover {
background-color: lighten(@baseColor, @colorMixRate * 5);
}
&.active {
background-color: lighten(@baseColor, @colorMixRate * 5);
}
&.md-btn-primary {
box-shadow: 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
background-color: lighten(@baseColor, @colorMixRate * 5);
z-index: 1;
}
}
}
.vdiv {
width: 1px;
@ -971,6 +1008,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
margin-right: 6px;
}
.app-chrome .app-chrome-item.search {
margin-right: 6px;
}
.volume-button {
background-image: url("./assets/feather/volume-2.svg");
height: 15px;
@ -1442,8 +1483,11 @@ div[data-type="musicVideo"] .info-rect .title::before {
}
.app-navigation {
background : transparent;
align-items : center;
justify-content: center;
background: var(--color1);
height: calc(100% - var(--chromeHeight));
height: calc(100% - var(--chromeHeight2));
width: 100%;
display: flex;
position: relative;
@ -1909,7 +1953,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
background: rgba(200, 200, 200, 0.05);
border-radius: 10px;
padding: var(--contentInnerPadding);
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
margin-top: 16px;

2
src/renderer/views/app/chrome-top.ejs
View file

@ -400,7 +400,7 @@
</div>
</template>
<template v-else>
<div class="app-chrome-item">
<div class="app-chrome-item search">
<div class="search-input-container">
<div class="search-input--icon"></div>
<input

4
src/renderer/views/pages/settings.ejs
View file

@ -385,8 +385,8 @@
<div class="md-option-segment md-option-segment_auto">
<label>
<select class="md-select" v-model="$root.cfg.visual.directives.windowLayout">
<option value="default">Cupertino</option>
<option value="twopanel">Redmond</option>
<option value="default">Maverick</option>
<option value="twopanel">Mojave</option>
</select>
</label>
</div>