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

changes to bg gradient

Browse source
This commit is contained in:
booploops 2022-01-03 19:55:28 -08:00
parent 23fb0db161
commit 250a94f991
2 changed files with 36 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/renderer/index.js
View file

@ -341,7 +341,7 @@ const app = new Vue({
break;
case "disabled":
document.querySelector("html").style.background = "#222";
document.querySelector("body").style.background = "#222";
// document.querySelector("body").style.background = "#222";
break;
}
},
@ -2430,18 +2430,18 @@ const app = new Vue({
document.querySelector('.bg-artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
let angle = "140deg"
if(palette.DarkMuted != null && palette.DarkVibrant != null){
document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(palette.DarkMuted._rgb)} 0%, ${self._rgbToRgb(palette.DarkVibrant._rgb)} 100%)`
}else if(palette.Muted != null && palette.LightMuted != null){
document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(palette.Muted._rgb)} 0%, ${self._rgbToRgb(palette.LightMuted._rgb)} 100%)`
}else if(palette.Vibrant != null && palette.DarkVibrant != null){
document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(palette.Vibrant._rgb)} 0%, ${self._rgbToRgb(palette.DarkVibrant._rgb)} 100%)`
}else{
let gradient = ""
let colors = Object.values(palette).filter(color=>color!=null)
if(colors.length > 0){
document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(colors[0]._rgb)} 0%, ${self._rgbToRgb(colors[1]._rgb)} 100%)`
}
let stops = []
colors.forEach(color=>{
stops.push(`${self._rgbToRgb(color._rgb)} 0%`)
})
stops.push(`${self._rgbToRgb(colors[0]._rgb)} 100%`)
gradient = `linear-gradient(${angle}, ${stops.join(", ")}`
}
document.querySelector("#app").style.setProperty("--bgColor", gradient)
}).setQuantizer(Vibrant.Quantizer.WebWorker)
try {

29
src/renderer/style.less
View file

@ -88,6 +88,7 @@ body[platform='linux'] {
#app {
--color1: rgba(30, 30, 30, 30%);
--color2: rgba(15, 15, 15, 30%);
--bgColor: transparent;
--chromeHeight: 55px;
width: 100%;
height: 100%;
@ -98,13 +99,30 @@ body[platform='linux'] {
position: relative;
overflow: hidden;
background-size: 400% 400%;
animation: bgGradient 10s ease infinite;
}
@keyframes bgGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
#app::before {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 250%;
background-image: var(--bgColor);
content: "";
z-index: -1;
transform: rotateZ(0deg);
transform-origin: center;
animation: bgRotate 10s linear infinite;
filter: brightness(300%) saturate(300%) contrast(1.5);
}
@keyframes bgRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
[hidden] {
@ -153,6 +171,7 @@ input[type="text"], input[type="number"] {
transition: opacity .25s var(--appleEase);
pointer-events: none;
transform: translateZ(0px);
display: none;
}