From e9ab433724301cdaff171aa7ca2fa854e209682e Mon Sep 17 00:00:00 2001 From: Jonathan Fenske <929220+jfenske89@users.noreply.github.com> Date: Tue, 5 Jul 2022 20:49:47 +0000 Subject: [PATCH 1/6] support custom port via optional CIDER_PORT var --- src/main/base/browserwindow.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts index 876c8f2d..0c86ab40 100644 --- a/src/main/base/browserwindow.ts +++ b/src/main/base/browserwindow.ts @@ -368,7 +368,8 @@ export class BrowserWindow { * @yields {object} Electron browser window */ async createWindow(): Promise { - this.clientPort = await getPort({ port: 9000 }); + const envPort = process.env?.CIDER_PORT || '9000' + this.clientPort = await getPort({ port: parseInt(envPort, 10) || 9000 }); BrowserWindow.verifyFiles(); this.StartWatcher(utils.getPath('themes')); @@ -1569,4 +1570,4 @@ export class BrowserWindow { server2.start(); console.log('remote broadcasted') } -} \ No newline at end of file +} From aa89baa7224ec6db2ab942a4f815b97c475f0467 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Tue, 12 Jul 2022 18:07:59 -0700 Subject: [PATCH 2/6] changed am section on sidebar to v-show allowing css manipulation --- src/renderer/main/vueapp.js | 2 +- src/renderer/views/components/sidebar.ejs | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js index b01fcf98..143ace0d 100644 --- a/src/renderer/main/vueapp.js +++ b/src/renderer/main/vueapp.js @@ -1226,7 +1226,7 @@ const app = new Vue({ } else if (this.cfg.visual.directives[directive]) { return this.cfg.visual.directives[directive] } else { - return "" + return false } }, unauthorize() { diff --git a/src/renderer/views/components/sidebar.ejs b/src/renderer/views/components/sidebar.ejs index 401603bb..07de439a 100644 --- a/src/renderer/views/components/sidebar.ejs +++ b/src/renderer/views/components/sidebar.ejs @@ -38,7 +38,7 @@
- - +
Date: Tue, 12 Jul 2022 18:11:38 -0700 Subject: [PATCH 3/6] added class for css --- src/renderer/views/components/sidebar.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/views/components/sidebar.ejs b/src/renderer/views/components/sidebar.ejs index 07de439a..4804aa27 100644 --- a/src/renderer/views/components/sidebar.ejs +++ b/src/renderer/views/components/sidebar.ejs @@ -38,7 +38,7 @@
-
+
Date: Tue, 12 Jul 2022 19:11:07 -0700 Subject: [PATCH 4/6] new effect when entering fullscreen lyrics --- src/renderer/style.less | 2433 ++++++++++++++++++++------------------- 1 file changed, 1243 insertions(+), 1190 deletions(-) diff --git a/src/renderer/style.less b/src/renderer/style.less index 99a94b71..8349454e 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -14,65 +14,65 @@ @import url("less/pages.less"); :root { - --windowRelativeScale: 1; - --appleEase: cubic-bezier(0.42, 0, 0.58, 1); - --borderColor: rgb(200 200 200 / 16%); - --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%); - --mediaItemShadow-Shadow: 0 8px 40px rgb(0 0 0 / 0.55); + --windowRelativeScale : 1; + --appleEase : cubic-bezier(0.42, 0, 0.58, 1); + --borderColor : rgb(200 200 200 / 16%); + --mediaItemShadow : inset 0px 0px 0px 1px rgb(200 200 200 / 16%); + --mediaItemShadow-Shadow : 0 8px 40px rgb(0 0 0 / 0.55); --mediaItemShadow-ShadowSubtle: 0 4px 14px rgb(0 0 0 / 10%); - --ciderShadow-Generic: var(--mediaItemShadow), 0 8px 40px rgb(0 0 0 / 0.55); - --mediaItemRadius: 8px; - --mediaItemRadiusSmall: 6px; - --mediaItemRadiusMedium: 8px; - --mediaItemRadiusRound: 100%; - --panelRadius: 10px; - --contentInnerPadding: 16px; - --navbarHeight1: 48px; - --navbarHeight2: 0px; - --navbarHeight: calc(var(--navbarHeight1) + var(--navbarHeight2)); - --selected: rgb(130 130 130 / 30%); - --selected-click: rgb(80 80 80 / 30%); - --hover: rgb(200 200 200 / 10%); + --ciderShadow-Generic : var(--mediaItemShadow), 0 8px 40px rgb(0 0 0 / 0.55); + --mediaItemRadius : 8px; + --mediaItemRadiusSmall : 6px; + --mediaItemRadiusMedium : 8px; + --mediaItemRadiusRound : 100%; + --panelRadius : 10px; + --contentInnerPadding : 16px; + --navbarHeight1 : 48px; + --navbarHeight2 : 0px; + --navbarHeight : calc(var(--navbarHeight1) + var(--navbarHeight2)); + --selected : rgb(130 130 130 / 30%); + --selected-click : rgb(80 80 80 / 30%); + --hover : rgb(200 200 200 / 10%); // --keyColor: #fa586a; - --keyColorDefault: @keyColor; - --keyColor: @keyColor; - --keyColor-rgb: 250, 88, 106; - --keyColor-rollover: #ff8a9c; - --keyColor-rollover-rgb: 255, 138, 156; - --keyColor-pressed: #ff7183; - --keyColor-pressed-rgb: 255, 113, 131; - --keyColor-deepPressed: #ff8a9c; - --keyColor-deepPressed-rgb: 255, 138, 156; - --keyColor-disabled: rgba(250, 88, 106, 0.35); - --keyColor-primary: #ff2b52a6; - --navigationBarHeight: 0px; - --modalBackground: #262626; - --songProgressColor: var(--keyColor); - --songProgressBackground: #333; - --textColor: #eee; - --replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%)); - --glassFilter: blur(16px) saturate(180%); - --glassFilterHeavy: blur(64px) saturate(280%); - --sidebarWidth: 260px; + --keyColorDefault : @keyColor; + --keyColor : @keyColor; + --keyColor-rgb : 250, 88, 106; + --keyColor-rollover : #ff8a9c; + --keyColor-rollover-rgb : 255, 138, 156; + --keyColor-pressed : #ff7183; + --keyColor-pressed-rgb : 255, 113, 131; + --keyColor-deepPressed : #ff8a9c; + --keyColor-deepPressed-rgb : 255, 138, 156; + --keyColor-disabled : rgba(250, 88, 106, 0.35); + --keyColor-primary : #ff2b52a6; + --navigationBarHeight : 0px; + --modalBackground : #262626; + --songProgressColor : var(--keyColor); + --songProgressBackground : #333; + --textColor : #eee; + --replayGradient : linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%)); + --glassFilter : blur(16px) saturate(180%); + --glassFilterHeavy : blur(64px) saturate(280%); + --sidebarWidth : 260px; } *:focus-visible { - outline:2px solid var(--keyColor); + outline: 2px solid var(--keyColor); } html, body { - margin: 0; - padding: 0; - overflow: hidden; - width: 100%; - height: 100%; - box-sizing: border-box; - background-size: cover; + margin : 0; + padding : 0; + overflow : hidden; + width : 100%; + height : 100%; + box-sizing : border-box; + background-size : cover; background-position: center; - background: #0000; - font-family: "Pretendard Variable", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - transition: opacity .10s var(--appleEase); + background : #0000; + font-family : "Pretendard Variable", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + transition : opacity .10s var(--appleEase); } @@ -81,9 +81,9 @@ a:-webkit-any-link { } hr { - appearance: none; - border: none; - height: 1px; + appearance : none; + border : none; + height : 1px; background-color: rgb(255 255 255 / 20%); } @@ -102,14 +102,14 @@ body.stopanimation * { } body.notransparency::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0.5; - display: none; + content : ""; + position : absolute; + top : 0; + left : 0; + right : 0; + bottom : 0; + opacity : 0.5; + display : none; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==); } @@ -122,7 +122,7 @@ body.notransparency::before { /* Modern style overlay scrollbars */ ::-webkit-scrollbar { - width: 16px; + width : 16px; height: 24px; } @@ -135,54 +135,54 @@ body.notransparency::before { } ::-webkit-scrollbar-thumb { - background: transparent; - border: 6px solid transparent; - box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%); + background : transparent; + border : 6px solid transparent; + box-shadow : inset 0px 0px 10px 10px rgb(200 200 200 / 50%); border-radius: 16px; - min-height: 64px; - transition: border 1s; + min-height : 64px; + transition : border 1s; } ::-webkit-scrollbar-thumb:hover { - border: 5px solid transparent; + border : 5px solid transparent; box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 80%); } [disabled] { pointer-events: none; - opacity: 0.5; + opacity : 0.5; } #app { @panelBrightness : 0%; @panelTransparency: 50%; - @msColor1 : #202020; - @msColor2 : #272727; - @msColor3 : #2b2b2b; + @msColor1 : #202020; + @msColor2 : #272727; + @msColor3 : #2b2b2b; --panelColor1 : darken(mix(@msColor1, transparent, @panelTransparency), @panelBrightness); --panelColor2 : darken(mix(@msColor2, transparent, @panelTransparency), @panelBrightness); - --color1 : var(--panelColor2); - --color2 : var(--panelColor1); - --color3 : rgb(0 0 0 / 20%); - --bgColor: transparent; - --bgWidth: 0px; - --bgHeight: 0px; - --chromeHeight1: 55px; - --chromeHeight2: 0px; - --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2)); - width: 100%; - height: 100%; - background: transparent; - color: var(--textColor); - user-select: none; - margin: 0 auto; - position: relative; - overflow: hidden; - background-size: 400% 400%; + --color1 : var(--panelColor2); + --color2 : var(--panelColor1); + --color3 : rgb(0 0 0 / 20%); + --bgColor : transparent; + --bgWidth : 0px; + --bgHeight : 0px; + --chromeHeight1 : 55px; + --chromeHeight2 : 0px; + --chromeHeight : calc(var(--chromeHeight1) + var(--chromeHeight2)); + width : 100%; + height : 100%; + background : transparent; + color : var(--textColor); + user-select : none; + margin : 0 auto; + position : relative; + overflow : hidden; + background-size : 400% 400%; &.simplebg { background: #0e0e0e; - } + } } .bgGradientMaterial-base { @@ -190,24 +190,25 @@ body.notransparency::before { } .bgGradientMaterial-base::before { - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 250%; + position : absolute; + top : -50%; + left : -50%; + width : 200%; + height : 250%; background-image: var(--bgColor); - content: ""; - z-index: -1; - transform: rotateZ(0deg); + content : ""; + z-index : -1; + transform : rotateZ(0deg); transform-origin: center; - animation: bgRotate 10s linear infinite; - filter: brightness(100%) saturate(200%) contrast(1.5); + animation : bgRotate 10s linear infinite; + filter : brightness(100%) saturate(200%) contrast(1.5); } @keyframes bgRotate { 0% { transform: rotateZ(0deg); } + 100% { transform: rotateZ(360deg); } @@ -217,28 +218,29 @@ body.notransparency::before { display: none !important; } -input[type="text"], input[type="number"] { - background: #1c1c1c; +input[type="text"], +input[type="number"] { + background : #1c1c1c; border-radius: 3px; - border: 1px solid rgb(200 200 200 / 25%); - color: #eee; - padding: 6px; - font-size: 1em; - font-family: inherit; + border : 1px solid rgb(200 200 200 / 25%); + color : #eee; + padding : 6px; + font-size : 1em; + font-family : inherit; } .bg-artwork--placeholder { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #222; - z-index: -1; - background-size: cover; + position : absolute; + top : 0; + left : 0; + width : 100%; + height : 100%; + background : #222; + z-index : -1; + background-size : cover; background-position: center; - opacity: 0.70; + opacity : 0.70; } a.dropdown-item { @@ -246,23 +248,24 @@ a.dropdown-item { &:hover { background-color: var(--selected); - color: var(--textColor); + color : var(--textColor); } + &:active { background-color: var(--selected-click); } } .bg-artwork { - position: absolute; - width: 200%; - background: var(--artwork); - filter: brightness(200%) blur(180px) saturate(280%) contrast(2); - opacity: 1; - transition: opacity 0.25s var(--appleEase); - pointer-events: none; - transform: translateZ(0px); - animation: rotateBg 35s linear infinite; + position : absolute; + width : 200%; + background : var(--artwork); + filter : brightness(200%) blur(180px) saturate(280%) contrast(2); + opacity : 1; + transition : opacity 0.25s var(--appleEase); + pointer-events : none; + transform : translateZ(0px); + animation : rotateBg 35s linear infinite; backface-visibility: hidden; } @@ -270,6 +273,7 @@ a.dropdown-item { 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } @@ -277,26 +281,26 @@ a.dropdown-item { .bg-artwork-container { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + position : absolute; + top : 0; + left : 0; + bottom : 0; + right : 0; pointer-events: none; - transform: translateZ(0px); - z-index: -1; + transform : translateZ(0px); + z-index : -1; .bg-artwork.a { - top: 0; - left: 0; + top : 0; + left : 0; //mix-blend-mode: luminosity; } .bg-artwork.b { - bottom: 0; - right: 0; + bottom : 0; + right : 0; animation-direction: reverse; - animation-delay: 10s; + animation-delay : 10s; } &.noanimation { @@ -307,27 +311,27 @@ a.dropdown-item { } .artworkMaterial { - position: relative; - height: 100%; - width: 100%; - overflow: hidden; + position : relative; + height : 100%; + width : 100%; + overflow : hidden; pointer-events: none; img { position: absolute; - width: 200%; - opacity: 0.5; - filter: brightness(200%) blur(180px) saturate(280%) contrast(2); + width : 200%; + opacity : 0.5; + filter : brightness(200%) blur(180px) saturate(280%) contrast(2); } img:first-child { - top: 0; + top : 0; left: 0; } img:last-child { - bottom: 0; - right: 0; + bottom : 0; + right : 0; transform: rotate(180deg); } } @@ -335,33 +339,33 @@ a.dropdown-item { [artwork-hidden] { transition: opacity .25s var(--appleEase); - opacity: 0; + opacity : 0; } input[type="range"].web-slider { -webkit-appearance: none; - height: 4px; - background: rgba(255, 255, 255, 0.6); - border-radius: 5px; - background-size: 70% 100%; - background-repeat: no-repeat; + height : 4px; + background : rgba(255, 255, 255, 0.6); + border-radius : 5px; + background-size : 70% 100%; + background-repeat : no-repeat; } input[type="range"].web-slider::-webkit-slider-thumb { -webkit-appearance: none; - height: 20px; - width: 20px; - border-radius: 50%; - background: rgb(255 255 255); - cursor: ew-resize; - box-shadow: 0 0 2px 0 #555; + height : 20px; + width : 20px; + border-radius : 50%; + background : rgb(255 255 255); + cursor : ew-resize; + box-shadow : 0 0 2px 0 #555; } input[type=range].web-slider::-webkit-slider-runnable-track { -webkit-appearance: none; - box-shadow: none; - border: none; - background: transparent; + box-shadow : none; + border : none; + background : transparent; } .nopadding { @@ -369,50 +373,50 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } #app-main { - display: flex; - width: 100%; - height: 100%; - flex-direction: column; - opacity: 1; - overflow: hidden; + display : flex; + width : 100%; + height : 100%; + flex-direction : column; + opacity : 1; + overflow : hidden; background-color: rgba(20 20 20 / .7); } #app-sidebar { - height: 100%; - width: var(--sidebarWidth); - display: flex; + height : 100%; + width : var(--sidebarWidth); + display : flex; flex-direction: column; - flex: 0 0 auto; - position: relative; - background: linear-gradient(180deg, var(--baseColorMix) calc(var(--chromeHeight1) + 1px), var(--sidebarColorMix) calc(var(--chromeHeight1) + 1px)); - max-width: var(--sidebarWidth); - padding-top: var(--chromeHeight1); + flex : 0 0 auto; + position : relative; + background : linear-gradient(180deg, var(--baseColorMix) calc(var(--chromeHeight1) + 1px), var(--sidebarColorMix) calc(var(--chromeHeight1) + 1px)); + max-width : var(--sidebarWidth); + padding-top : var(--chromeHeight1); } #app-navbar { - height: 40px; - width: 100%; - background: rgb(30 30 30 / 85%); - position: sticky; - top: 0px; - left: 0; - z-index: 2; + height : 40px; + width : 100%; + background : rgb(30 30 30 / 85%); + position : sticky; + top : 0px; + left : 0; + z-index : 2; backdrop-filter: blur(16px) saturate(180%); } #app-content { --navigationBarHeight: var(--chromeHeight1); - background-color: var(--baseColorMix); - height: 100%; - width: 100%; - overflow-y: scroll; - overflow-y: overlay; - overflow-x: hidden; - border-radius: 0; - border-left: 1px solid var(--baseColorMix); + background-color : var(--baseColorMix); + height : 100%; + width : 100%; + overflow-y : scroll; + overflow-y : overlay; + overflow-x : hidden; + border-radius : 0; + border-left : 1px solid var(--baseColorMix); // border-top: 1px solid rgb(0 0 0 / 25%); - position: relative; + position : relative; &::-webkit-scrollbar-track-piece { margin-top: var(--chromeHeight1); @@ -420,29 +424,31 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .app-drawer { - width: 300px; - flex: 0 0 auto; - position: absolute; - right: 16px; - background: var(--color2); - border-radius: 12px; - z-index: 10; + width : 300px; + flex : 0 0 auto; + position : absolute; + right : 16px; + background : var(--color2); + border-radius : 12px; + z-index : 10; 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%); + box-shadow : var(--ciderShadow-Generic); + overflow : hidden; + height : calc(calc(100% - 6%) - var(--chromeHeight1)); + top : calc(var(--chromeHeight1) + 3%); .bgArtworkMaterial { - display: none; + display : none; position: absolute; - width: 100%; - height: 100%; + width : 100%; + height : 100%; .bg-artwork-container .bg-artwork { filter: brightness(80%) blur(180px) saturate(180%) contrast(1); } } + + transition: .3s var(--appleEase); } .search-input-container { @@ -450,58 +456,58 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .search-input { - width: 100%; - padding: 6px; + width : 100%; + padding : 6px; border-radius: 6px; - border: 1px solid rgba(100, 100, 100, 0.35); - border-top: 1px solid rgba(100, 100, 100, 0.5); + 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 / 62%); - font-family: inherit; - font-size: 14px; - background: #1e1e1e99; - color: #c8c8c8; - font-weight: 500; - padding-left: 32px; - position: relative; + font-family : inherit; + font-size : 14px; + background : #1e1e1e99; + color : #c8c8c8; + font-weight : 500; + padding-left : 32px; + position : relative; } .search-input:focus { - outline: none; + outline : none; border-bottom: 1px solid var(--keyColor); } .search-input--icon { - content: ''; - width: 100%; - height: 100%; - display: block; - position: absolute; - top: 0px; - left: 0px; - background-image: url('assets/search.svg'); + content : ''; + width : 100%; + height : 100%; + display : block; + position : absolute; + top : 0px; + left : 0px; + background-image : url('assets/search.svg'); background-position: 10px; - background-repeat: no-repeat; - background-size: 12px; - pointer-events: none; - opacity: 0.55; + background-repeat : no-repeat; + background-size : 12px; + pointer-events : none; + opacity : 0.55; } .app-sidebar-header { - font-size: 14px; - padding: 11px; + font-size : 14px; + padding : 11px; font-weight: 600; } .app-sidebar-header-text { - font-size: 11px; - padding: 6px 6px; - font-weight: 600; - opacity: 0.5; - background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtNiA5IDYgNiA2LTYiPjwvcGF0aD4KPC9zdmc+"); - background-size: 16px; - background-repeat: no-repeat; + font-size : 11px; + padding : 6px 6px; + font-weight : 600; + opacity : 0.5; + background-image : url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtNiA5IDYgNiA2LTYiPjwvcGF0aD4KPC9zdmc+"); + background-size : 16px; + background-repeat : no-repeat; background-position: 98%; - border-radius: 3px; + border-radius : 3px; &.collapsed { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtOSAxOCA2LTYtNi02Ij48L3BhdGg+Cjwvc3ZnPg=="); @@ -518,14 +524,15 @@ input[type=range].web-slider::-webkit-slider-runnable-track { .app-sidebar-footer { border-top: 1px solid rgba(200, 200, 200, 0.15); - padding: 11px; + padding : 11px; .app-playback-controls { margin: 0 auto; + .control-buttons { - display: flex; + display : flex; justify-content: center; - align-content: center; + align-content : center; } .volume { @@ -534,55 +541,59 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } &.collapseTab { - display:flex; - padding:6px; - border:0; + display: flex; + padding: 6px; + border : 0; + >button { - appearance: none; - width: 100%; - position: relative; + appearance : none; + width : 100%; + position : relative; padding-left: 40px; - text-align: left; - font-family: inherit; + text-align : left; + font-family : inherit; + &:hover { background-color: var(--selected); } + &:active { background-color: var(--selected-click); } + &:after { - content: ''; - display: flex; + content : ''; + display : flex; justify-content: center; - align-items: center; - width: 46px; - height: 100%; - position: absolute; - top: 0; - left: 0; - font-weight: bold; - font-size: 1em; - font-family: "codicon"; + align-items : center; + width : 46px; + height : 100%; + position : absolute; + top : 0; + left : 0; + font-weight : bold; + font-size : 1em; + font-family : "codicon"; } } } } .app-sidebar-button { - width: 100%; - padding: 0px; - font-family: inherit; - display: flex; + width : 100%; + padding : 0px; + font-family : inherit; + display : flex; border-radius: 6px; - border: 1px solid rgb(200 200 200 / 5%); - background: rgb(100 100 100 / 25%); - color: #eee; - font-weight: 500; - align-items: center; + border : 1px solid rgb(200 200 200 / 5%); + background : rgb(100 100 100 / 25%); + color : #eee; + font-weight : 500; + align-items : center; &.active { 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); } } @@ -600,93 +611,95 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } } -.app-sidebar-button > .sidebar-user-icon { - width: 32px; - height: 32px; - border-radius: 100%; +.app-sidebar-button>.sidebar-user-icon { + width : 32px; + height : 32px; + border-radius : 100%; background-image: var(--artwork); - margin: 10px; - flex: 0 0 auto; - box-shadow: var(--mediaItemShadow); - background-size: contain; + margin : 10px; + flex : 0 0 auto; + box-shadow : var(--mediaItemShadow); + background-size : contain; } -.app-sidebar-button > .sidebar-user-text { - width: 100%; - display: flex; - font-size: 14px; +.app-sidebar-button>.sidebar-user-text { + width : 100%; + display : flex; + font-size : 14px; flex-direction: column; - text-align: center; - margin-right: 35px; + text-align : center; + margin-right : 35px; } -.app-sidebar-button > .sidebar-user-text .fullname { +.app-sidebar-button>.sidebar-user-text .fullname { text-align: left; } -.app-sidebar-button > .sidebar-user-text .handle-text { - font-size: 12px; - opacity: 0.7; +.app-sidebar-button>.sidebar-user-text .handle-text { + font-size : 12px; + opacity : 0.7; text-align: left; } .app-sidebar-notification { - text-align: center; - font-size: 12px; - min-height: 36px; - display: flex; + text-align : center; + font-size : 12px; + min-height : 36px; + display : flex; justify-content: center; - align-items: center; - border-top: 1px solid rgb(200 200 200 / 15%); - background: rgb(0 0 0 / 15%); - flex-direction: column; - padding: 10px 0px; + align-items : center; + border-top : 1px solid rgb(200 200 200 / 15%); + background : rgb(0 0 0 / 15%); + flex-direction : column; + padding : 10px 0px; &.libraryNotification { flex-direction: row; - padding: 0px; + padding : 0px; .message { flex-grow: 1; } .spinner { - width: 46px; - height: 30px; + width : 46px; + height : 30px; margin-left: 1em; } } } .app-sidebar-content { - padding: 8px; + padding : 8px; overflow-y: scroll; overflow-y: overlay; - height: 100%; + height : 100%; } #cmenu() { .container { - position: absolute; - left: 0px; - width: var(--sidebarWidth); + position : absolute; + left : 0px; + width : var(--sidebarWidth); max-width: var(--sidebarWidth); - padding: 10px; - z-index: 1; + padding : 10px; + z-index : 1; } .body { - background: rgb(30 30 30 / 45%); - padding: 6px; - border-radius: var(--panelRadius); - width: 100%; - box-shadow: var(--ciderShadow-Generic); + background : rgb(30 30 30 / 45%); + padding : 6px; + border-radius : var(--panelRadius); + width : 100%; + box-shadow : var(--ciderShadow-Generic); backdrop-filter: var(--glassFilter); - animation: cmenuBodyIn .5s var(--appleEase); + animation : cmenuBodyIn .5s var(--appleEase); + @keyframes cmenuBodyIn { 0% { background: rgb(30 30 30); } + 100% { background: rgb(30 30 30 / 45%); } @@ -694,18 +707,18 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .item { - background: transparent; - display: block; - width: 100%; - text-align: left; - color: #eee; - font-family: inherit; - font-size: 15px; - padding: 8px 12px; - border: 0px; - appearance: none; + background : transparent; + display : block; + width : 100%; + text-align : left; + color : #eee; + font-family : inherit; + font-size : 15px; + padding : 8px 12px; + border : 0px; + appearance : none; border-radius: 6px; - margin: 2px 0px; + margin : 2px 0px; &:hover { background: var(--selected); @@ -727,7 +740,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .usermenu-container { - top: var(--chromeHeight1); + top : var(--chromeHeight1); z-index: 200001 !important; #cmenu.container(); @@ -739,47 +752,47 @@ input[type=range].web-slider::-webkit-slider-runnable-track { .usermenu-item-icon { position: relative; - top: 1.5px; - right: 3px; - display: table-cell; + top : 1.5px; + right : 3px; + display : table-cell; } .usermenu-item-name { - position: relative; - bottom: 2px; + position : relative; + bottom : 2px; padding-left: 5px; - display: table-cell; + display : table-cell; } } } } .context-menu { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + position : absolute; + top : 0; + left : 0; + width : 100%; + height : 100%; background: rgba(0, 0, 0, 0.0); - z-index: 100; + z-index : 100; .context-menu-item { - background: transparent; - display: flex; - width: 100%; - text-align: left; - color: #eee; - font-family: inherit; - font-size: 14px; - padding: 6px 12px; - border: 0px; - appearance: none; + background : transparent; + display : flex; + width : 100%; + text-align : left; + color : #eee; + font-family : inherit; + font-size : 14px; + padding : 6px 12px; + border : 0px; + appearance : none; border-radius: 6px; - margin: 2px 0px; + margin : 2px 0px; &:hover { background: var(--selected); - cursor: pointer; + cursor : pointer; } &:active { @@ -788,23 +801,23 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .context-menu-body { - background: #242424; - padding: 6px; + background : #242424; + padding : 6px; border-radius: 6px; - box-shadow: var(--ciderShadow-Generic); + box-shadow : var(--ciderShadow-Generic); &.context-menu-open { - animation-duration: .10s; - animation-name: contextMenuIn; + animation-duration : .10s; + animation-name : contextMenuIn; animation-iteration-count: 1; - animation-easings: var(--appleEase); + animation-easings : var(--appleEase); } &.context-menu-close { - animation-duration: .10s; - animation-name: contextMenuOut; + animation-duration : .10s; + animation-name : contextMenuOut; animation-iteration-count: 1; - animation-easings: var(--appleEase); + animation-easings : var(--appleEase); } } } @@ -812,42 +825,42 @@ input[type=range].web-slider::-webkit-slider-runnable-track { @keyframes contextMenuIn { 0% { transform: scale(0.9); - opacity: 0; + opacity : 0; } 100% { transform: scale(1); - opacity: 1; + opacity : 1; } } @keyframes contextMenuOut { 0% { transform: scale(1); - opacity: 1; + opacity : 1; } 100% { transform: scale(0.9); - opacity: 0; + opacity : 0; } } .hidden-opacity { opacity: 0; - height: 0px; - width: 0px; - margin: 0px; + height : 0px; + width : 0px; + margin : 0px; } .spinner { - background-image: url("assets/spinner.svg"); + background-image : url("assets/spinner.svg"); background-position: center; - background-repeat: no-repeat; - background-size: contain; - width: 50px; - height: 50px; - display: inline-block; + background-repeat : no-repeat; + background-size : contain; + width : 50px; + height : 50px; + display : inline-block; } .app-sidebar-content::-webkit-scrollbar { @@ -859,34 +872,34 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .app-sidebar-item { - --iconSize: 18px; - display: flex; - width: 100%; - padding: 8px 12px; - font-weight: 400; - font-family: inherit; - font-size: 14px; - margin: 3px 0px; - border: 1px solid transparent; + --iconSize : 18px; + display : flex; + width : 100%; + padding : 8px 12px; + font-weight : 400; + font-family : inherit; + font-size : 14px; + margin : 3px 0px; + border : 1px solid transparent; border-radius: 6px; - background: transparent; - color: #eee; - transition: transform 0.1s; - text-align: left; - align-items: center; - gap: 12px; + background : transparent; + color : #eee; + transition : transform 0.1s; + text-align : left; + align-items : center; + gap : 12px; &.app-sidebar-item-playlist { -webkit-user-drag: element; - overflow: hidden; - text-overflow: ellipsis; + overflow : hidden; + text-overflow : ellipsis; .presentNotice { - align-self: center; - margin-left: 8px; + align-self : center; + margin-left : 8px; text-transform: uppercase; - font-size: 0.7em; - opacity: 0.6; + font-size : 0.7em; + opacity : 0.6; } } @@ -897,117 +910,118 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .app-sidebar-item:hover { - border: 1px solid rgb(200 200 200 / 0%); + border : 1px solid rgb(200 200 200 / 0%); background: rgb(180 180 180 / 15%); // cursor: pointer; } .app-sidebar-item:active { - border: 1px solid rgb(200 200 200 / 0%); - background: rgb(150 150 150 / 15%); + border : 1px solid rgb(200 200 200 / 0%); + background : rgb(150 150 150 / 15%); // transform: scale(0.98); - transition: transform 0s; + transition : transform 0s; } .app-sidebar-item.active { - border: 1px solid rgb(200 200 200 / 0%); + border : 1px solid rgb(200 200 200 / 0%); background: rgb(200 200 200 / 15%); - transform: scale(1); + transform : scale(1); transition: transform 0s; - cursor: default; + cursor : default; } .app-chrome { background-color: var(--baseColorMix); - box-shadow: 0px 3px 6px rgb(20 20 20 / 12%), + 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; + width : 100%; + height : var(--chromeHeight1); + display : flex; + flex-direction : row; -webkit-app-region: drag; - z-index: 4; + z-index : 4; &:not(.chrome-bottom) { // box-shadow: 0px 0px - z-index: 16; - position: fixed; + z-index : 16; + position : fixed; backdrop-filter: var(--glassFilter); .app-chrome--center { - flex:1; + flex: 1; } -} + } -.top-nav-group { - background: var(--baseColor); - border: 1px solid lighten(@baseColor, 8); + .top-nav-group { + background : var(--baseColor); + border : 1px solid lighten(@baseColor, 8); border-radius: 10px; - display: flex; - height: 32px; + 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%; + 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); - } + &:hover { + background-color: lighten(@baseColor, @colorMixRate * 5); + } - &.active { - 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; - } + &.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; + width : 1px; background: white; - opacity: 0.25; - height: 50%; - margin: 6px; + opacity : 0.25; + height : 50%; + margin : 6px; } } .mv-chrome { - position: absolute; - top: 0; - right: 0; - width: 90%; - height: 55px; + position : absolute; + top : 0; + right : 0; + width : 90%; + height : 55px; -webkit-app-region: drag; } .app-chrome .app-chrome--left, .app-chrome .app-chrome--center, .app-chrome .app-chrome--right { - height: 100%; - width: 100%; - display: flex; + height : 100%; + width : 100%; + display : flex; justify-content: center; - align-items: center; + align-items : center; } .app-chrome .app-chrome--left { - width: 30%; - justify-content: left; + width : 30%; + justify-content : left; -webkit-app-region: drag; } .app-chrome .app-chrome--center { + //width: 40%; .app-title-text { font-size: 0.8em; @@ -1015,27 +1029,27 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .app-chrome .app-chrome--right { - width: 30%; + width : 30%; justify-content: right; } .app-chrome .app-chrome-item { - height: 100%; - width: auto; - display: flex; - justify-content: center; - align-items: center; + height : 100%; + width : auto; + display : flex; + justify-content : center; + align-items : center; -webkit-app-region: no-drag; - height: auto; + height : auto; &.generic { - width: 50px; + width : 50px; opacity: 0.70; } &.volume { - width: 100px; + width : 100px; margin-right: 6px; } @@ -1045,96 +1059,98 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .volume-button { - background-image: url("./assets/feather/volume-2.svg"); - height: 15px; - width: 30px; - padding: 0px; - background: transparent; - border: 0px; - border-radius: 0px; - box-shadow: unset; - background-size: 12px; + background-image : url("./assets/feather/volume-2.svg"); + height : 15px; + width : 30px; + padding : 0px; + background : transparent; + border : 0px; + border-radius : 0px; + box-shadow : unset; + background-size : 12px; background-position: center; - background-repeat: no-repeat; - opacity: 0.70; - border-radius: 6px; + background-repeat : no-repeat; + opacity : 0.70; + border-radius : 6px; } -.volume-button:active, .volume-button--small:active { +.volume-button:active, +.volume-button--small:active { transform: scale(0.9); } -.volume-button.active, .volume-button--small.active { +.volume-button.active, +.volume-button--small.active { background-image: url("./assets/feather/volume.svg"); } .volume-button--small { - border-radius: 6px; - color: inherit; - background-size: 16px; - background-repeat: no-repeat; + border-radius : 6px; + color : inherit; + background-size : 16px; + background-repeat : no-repeat; background-position: center; - background-color: transparent; - height: 15px; - width: 30px; - border: 0px; - box-shadow: unset; - opacity: 0.70; - background-image: url("./assets/feather/volume-2.svg"); + background-color : transparent; + height : 15px; + width : 30px; + border : 0px; + box-shadow : unset; + opacity : 0.70; + background-image : url("./assets/feather/volume-2.svg"); } -.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; - height: 14px; - width: 14px; - border-radius: 50%; - background: #A5A8BA; - box-shadow: 0px 0px 0px 1px rgba(0 0 0 / 10%); - cursor: default; - transition: all var(--appleTransition); + height : 14px; + width : 14px; + border-radius : 50%; + background : #A5A8BA; + box-shadow : 0px 0px 0px 1px rgba(0 0 0 / 10%); + cursor : default; + transition : all var(--appleTransition); } -.app-chrome .app-chrome-item.volume > input[type=range] { +.app-chrome .app-chrome-item.volume>input[type=range] { -webkit-appearance: none; - height: 4px; - background: rgba(255, 255, 255, 0.4); - border-radius: 5px; - background-size: 70% 100%; - background-repeat: no-repeat; - width: 100%, + height : 4px; + background : rgba(255, 255, 255, 0.4); + border-radius : 5px; + background-size : 70% 100%; + background-repeat : no-repeat; + width : 100%, } -.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; - box-shadow: none; - border: none; - background: transparent; + box-shadow : none; + border : none; + background : transparent; } .app-chrome .back-button { height: 100%; - width: 60px; + width : 60px; } .app-chrome .app-chrome-item.full-height { height: 100%; } -.app-chrome .app-chrome-item > .app-mainmenu { - width: 34px; - font-size: 13px; - background: url("./assets/CiderMenu.svg"); - background-size: auto; - background-repeat: no-repeat; +.app-chrome .app-chrome-item>.app-mainmenu { + width : 34px; + font-size : 13px; + background : url("./assets/CiderMenu.svg"); + background-size : auto; + background-repeat : no-repeat; background-position: center; - height: 34px; - margin-right: 16px; - margin-left: 16px; - margin-top: 1.5px; - border: 0px; - border-radius: 6px; - transition: transform .1s var(--appleEase); - position: relative; + height : 34px; + margin-right : 16px; + margin-left : 16px; + margin-top : 1.5px; + border : 0px; + border-radius : 6px; + transition : transform .1s var(--appleEase); + position : relative; // &:after { // content: ""; @@ -1155,64 +1171,70 @@ input[type=range].web-slider::-webkit-slider-runnable-track { transform: scale(1.1); } - &:active, &.active { + &:active, + &.active { border-radius: 100%; - transform: scale(1.1); - outline: 2px solid var(--keyColor); + transform : scale(1.1); + outline : 2px solid var(--keyColor); } } -.app-chrome .app-chrome-item > .window-controls { - width: 138px; +.app-chrome .app-chrome-item>.window-controls { + width : 138px; font-size: 13px; - height: 100%; - display: flex; + height : 100%; + display : flex; &-macos { width: 100px; } - > div { + >div { height: 100%; - width: 32px; + width : 32px; + &:hover { background: rgb(200 200 200 / 10%); } + &.close { - width: 100%; - height: 100%; - background-image: var(--gfx-closeBtn); + width : 100%; + height : 100%; + background-image : var(--gfx-closeBtn); background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - + background-repeat : no-repeat; + -webkit-app-region : no-drag; + &:hover { background-color: rgb(196, 43, 28) } } + &.minmax { - background-image: var(--gfx-maxBtn); + background-image : var(--gfx-maxBtn); background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - width: 100%; - height: 100%; + background-repeat : no-repeat; + -webkit-app-region : no-drag; + width : 100%; + height : 100%; } + &.minmax.restore { background-image: var(--gfx-restoreBtn); } + &.minimize { - background-image: var(--gfx-minBtn); + background-image : var(--gfx-minBtn); background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - width: 100%; - height: 100%; + background-repeat : no-repeat; + -webkit-app-region : no-drag; + width : 100%; + height : 100%; } } } -body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minimize { +body[platform="darwin"] .app-chrome .app-chrome-item>.window-controls>div.minimize { display: none; } @@ -1220,76 +1242,77 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.mi // display: none; //} -body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minmax { +body[platform="darwin"] .app-chrome .app-chrome-item>.window-controls>div.minmax { display: none; } -body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.close { +body[platform="darwin"] .app-chrome .app-chrome-item>.window-controls>div.close { display: none; } .app-chrome .app-chrome-item.playback-controls { - width: 80%; - height: 90%; - display: flex; - max-width: 500px; - border-left: 1px solid rgb(200 200 200 / 8%); - border-right: 1px solid rgb(200 200 200 / 8%); + width : 80%; + height : 90%; + display : flex; + max-width : 500px; + border-left : 1px solid rgb(200 200 200 / 8%); + border-right : 1px solid rgb(200 200 200 / 8%); -webkit-app-region: drag; } -.app-chrome .app-chrome-item > .app-playback-controls { - display: flex; - justify-content: center; - align-content: center; - width: 100%; +.app-chrome .app-chrome-item>.app-playback-controls { + display : flex; + justify-content : center; + align-content : center; + width : 100%; -webkit-app-region: no-drag; } -.app-chrome .app-chrome-item > .app-playback-controls { - .info-rect{ - mask-image: linear-gradient(-90deg, transparent 0%, black 10%, black 90%, transparent 100%); +.app-chrome .app-chrome-item>.app-playback-controls { + .info-rect { + mask-image : linear-gradient(-90deg, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(-90deg, transparent 3%, black 10%, black 90%, transparent 100%); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width:100%; + display : flex; + flex-direction : column; + justify-content : center; + align-items : center; + width : 100%; } + .song-name { font-weight: 600; - text-align: center; - font-size: 13px; - height: 1.3em; + text-align : center; + font-size : 13px; + height : 1.3em; line-height: 1.3em; white-space: nowrap; - max-width: 360px; + max-width : 360px; .song-name-normal { height: inherit; } &.song-artist-marquee { - > marquee { + >marquee { //margin-bottom: -3px; } } .explicit-icon { - background-image: url("./assets/explicit.svg"); - height: 9px; - width: 13px; - filter: contrast(0); + background-image : url("./assets/explicit.svg"); + height : 9px; + width : 13px; + filter : contrast(0); background-repeat: no-repeat; - margin-left: 3px; + margin-left : 3px; } .heart-icon { - height: 9px; - width: 13px; - filter: contrast(0); + height : 9px; + width : 13px; + filter : contrast(0); background-repeat: no-repeat; - margin-left: 3px; + margin-left : 3px; } } @@ -1299,52 +1322,53 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl .ppe-icon { background-image: url("./assets/ppe.svg") !important; - margin-left: 0.5em !important; - flex: 1; + margin-left : 0.5em !important; + flex : 1; } .private-icon { background-image: url("./assets/private.svg") !important; - margin-left: 0.5em !important; - flex: 1; + margin-left : 0.5em !important; + flex : 1; } .chrome-icon-container { - display: flex; + display : flex; position: absolute; - right: 0px; + right : 0px; } .audio-type { - filter: contrast(0); + filter : contrast(0); background-repeat: no-repeat; - background-size: contain; - height: 15px; - width: 15px; - margin-bottom: 15px; - z-index: 1; + background-size : contain; + height : 15px; + width : 15px; + margin-bottom : 15px; + z-index : 1; } } + // Add Music Video Icons to Songs that are Music Videos div[data-type="library-music-videos"] .info-rect .title::before, div[data-type="musicVideo"] .info-rect .title::before { - content: ""; - background-image: url(./assets/feather/video.svg); - background-size: contain; - filter:invert(0.6); - display: inline-block; - width: 20px; - height: 20px; - margin-bottom: -4px; + content : ""; + background-image: url(./assets/feather/video.svg); + background-size : contain; + filter : invert(0.6); + display : inline-block; + width : 20px; + height : 20px; + margin-bottom : -4px; } -.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-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; } .app-playback-controls:hover .marquee { @@ -1370,7 +1394,7 @@ div[data-type="musicVideo"] .info-rect .title::before { .marquee { - animation: marquee 15s linear 2s infinite; + animation: marquee 15s linear 2s infinite; &.song-artist { overflow: unset; @@ -1390,51 +1414,51 @@ div[data-type="musicVideo"] .info-rect .title::before { } -.app-chrome .app-chrome-item > .app-playback-controls .song-progress { - @bgColor: transparent; +.app-chrome .app-chrome-item>.app-playback-controls .song-progress { + @bgColor : transparent; //height: 16px; - position: absolute; - bottom: 0px; - left: 0px; + position : absolute; + bottom : 0px; + left : 0px; background: @bgColor; &: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; + >input[type=range] { + appearance : none; + width : 100%; + height : 4px; background-color: rgb(200 200 200 / 10%); - border-radius: 2px; - margin: 0; + border-radius : 2px; + margin : 0; &::-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(--songProgressColor); - cursor: default; - transition: opacity .10s var(--appleEase), transform .10s var(--appleEase); + appearance : none; + width : 12px; + height : 12px; + border-radius : 100%; + background : var(--songProgressColor); + cursor : default; + transition : opacity .10s var(--appleEase), transform .10s var(--appleEase); } &::-moz-range-thumb { - width: 8px; - height: 8px; + width : 8px; + height : 8px; border-radius: 100%; - background: var(--songProgressColor); - cursor: default; + background : var(--songProgressColor); + cursor : default; } } } @@ -1449,45 +1473,46 @@ div[data-type="musicVideo"] .info-rect .title::before { } } -.app-chrome .app-chrome-item > .app-playback-controls .artwork { - width: 42px; - height: 42px; - background-image: var(--artwork); +.app-chrome .app-chrome-item>.app-playback-controls .artwork { + width : 42px; + height : 42px; + background-image : var(--artwork); background-position: center; - background-size: contain; - background-repeat: no-repeat; - border-radius: var(--mediaItemRadiusSmall); - flex: 0 0 auto; - margin: 6px; - image-rendering: -webkit-optimize-contrast; + background-size : contain; + background-repeat : no-repeat; + border-radius : var(--mediaItemRadiusSmall); + flex : 0 0 auto; + margin : 6px; + image-rendering : -webkit-optimize-contrast; + .mediaitem-artwork { border-radius: var(--mediaItemRadiusSmall); } } -.app-chrome .app-chrome-item > .app-playback-controls .actions { - width: 42px; - height: 42px; - border-radius: 2px; - flex: 0 0 auto; - margin: 6px; - display: flex; +.app-chrome .app-chrome-item>.app-playback-controls .actions { + width : 42px; + height : 42px; + border-radius : 2px; + flex : 0 0 auto; + margin : 6px; + display : flex; justify-content: center; - align-items: center; - filter: contrast(0.8); + align-items : center; + filter : contrast(0.8); .lcdMenu { - height: 100%; - width: 100%; - padding: 0px; - margin: 0px; - background: transparent; - border: 0px; - appearance: none; - display: flex; + height : 100%; + width : 100%; + padding : 0px; + margin : 0px; + background : transparent; + border : 0px; + appearance : none; + display : flex; justify-content: center; - align-items: center; - border-radius: 6px; + align-items : center; + border-radius : 6px; &:focus { outline: none; @@ -1499,7 +1524,7 @@ div[data-type="musicVideo"] .info-rect .title::before { &:active { background: var(--selected-click); - transform: scale(0.95); + transform : scale(0.95); } .svg-icon { @@ -1508,17 +1533,17 @@ div[data-type="musicVideo"] .info-rect .title::before { } } -.app-chrome .app-chrome-item > .app-playback-controls .playback-info { - width: 100%; - display: flex; +.app-chrome .app-chrome-item>.app-playback-controls .playback-info { + width : 100%; + display : flex; justify-content: center; - align-items: center; - flex-direction: column; - position: relative; - overflow: hidden; + align-items : center; + flex-direction : column; + position : relative; + overflow : hidden; } -.app-chrome .app-chrome-item > .app-playback-controls .playback-info > .song-progress { +.app-chrome .app-chrome-item>.app-playback-controls .playback-info>.song-progress { width: 100%; } @@ -1526,31 +1551,31 @@ div[data-type="musicVideo"] .info-rect .title::before { background : transparent; align-items : center; justify-content: center; - background: var(--color1); - height: calc(100% - var(--chromeHeight2)); - width: 100%; - display: flex; - position: relative; + background : var(--color1); + height : calc(100% - var(--chromeHeight2)); + width : 100%; + display : flex; + position : relative; } -.app-chrome .app-chrome-item > .app-playback-controls .song-artist-album { - font-weight: 400; - font-size: 12px; - text-align: center; - /*height: 1.2em; - line-height: 1.2em;*/ - z-index: 1; - align-items: center; +.app-chrome .app-chrome-item>.app-playback-controls .song-artist-album { + font-weight : 400; + font-size : 12px; + text-align : center; + /*height : 1.2em; + line-height : 1.2em;*/ + z-index : 1; + align-items : center; justify-content: center; - width: 80%; - max-width: 340px; - overflow: hidden; + width : 80%; + max-width : 340px; + overflow : hidden; .song-artist-album-content { font-weight: 400; - font-size: 12px; - text-align: center; - width: 100%; + font-size : 12px; + text-align : center; + width : 100%; &.song-artist-normal { height: inherit; @@ -1559,7 +1584,7 @@ div[data-type="musicVideo"] .info-rect .title::before { &.song-artist-marquee { - > marquee { + >marquee { margin-bottom: -3px; } } @@ -1575,66 +1600,67 @@ div[data-type="musicVideo"] .info-rect .title::before { input[type="range"].web-slider.display--small::-webkit-slider-thumb { -webkit-appearance: none; - height: 14px; - width: 14px; - border-radius: 50%; - background: rgb(50 50 50); - cursor: default; - box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); + height : 14px; + width : 14px; + border-radius : 50%; + background : rgb(50 50 50); + cursor : default; + box-shadow : inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); } /* Window is smaller <= 1023px width */ @media only screen and (max-width: 1120px) { .display--small { - display: inherit !important;; + display: inherit !important; + ; .slider { - width: 100%; + width : 100%; z-index: 1; } .input-container { - display: flex; + display : flex; justify-content: center; - align-items: center; - width: 100%; - padding-bottom: 10px; + align-items : center; + width : 100%; + padding-bottom : 10px; } input[type=range] { -webkit-appearance: none; - height: 4px; - background: rgba(255, 255, 255, 0.4); - border-radius: 5px; - background-size: 70% 100%; - background-repeat: no-repeat; + height : 4px; + background : rgba(255, 255, 255, 0.4); + border-radius : 5px; + background-size : 70% 100%; + background-repeat : no-repeat; &::-webkit-slider-thumb { -webkit-appearance: none; - height: 14px; - width: 14px; - border-radius: 50%; - background: rgb(50 50 50); - cursor: default; - box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); - transition: all var(--appleTransition); + height : 14px; + width : 14px; + border-radius : 50%; + background : rgb(50 50 50); + cursor : default; + box-shadow : inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); + transition : all var(--appleTransition); } &::-webkit-slider-thumb:hover { background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px); - transform: scale(1.2); + transform : scale(1.2); } &::-webkit-slider-thumb:active { background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px); - transform: scale(1); + transform : scale(1); } &::-webkit-slider-runnable-track { -webkit-appearance: none; - box-shadow: none; - border: none; - background: transparent; + box-shadow : none; + border : none; + background : transparent; } } } @@ -1646,49 +1672,49 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } .flex-center { - display: flex; + display : flex; align-items: center; - flex-wrap: wrap; + flex-wrap : wrap; } .md-container { - width: 100%; + width : 100%; position: relative; } .lyric-body { -webkit-mask-image: -webkit-gradient(linear, left 95%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); - overflow-y: scroll; - overflow-x: hidden; - display: flex; - flex-flow: column; - font-family: "Pretendard Variable", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + overflow-y : scroll; + overflow-x : hidden; + display : flex; + flex-flow : column; + font-family : "Pretendard Variable", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .lyric-body .no-lyrics { - width: 100%; + width : 100%; justify-content: center; - align-items: center; - font-weight: bold; - font-size: 26px; + align-items : center; + font-weight : bold; + font-size : 26px; } .lyric-line { - --bgSpeed: 1s; - appearance: none; - color: white; - font-size: 26px; - transform: scale(0.8); + --bgSpeed : 1s; + appearance : none; + color : white; + font-size : 26px; + transform : scale(0.8); transform-origin: left center; - transition: transform 0.5s var(--appleEase); - opacity: 0.75; - width: auto; - display: inline-block; - margin: 10px; - margin-left: 5%; - margin-right: 0px; - overflow-wrap: break-word; + transition : transform 0.5s var(--appleEase); + opacity : 0.75; + width : auto; + display : inline-block; + margin : 10px; + margin-left : 5%; + margin-right : 0px; + overflow-wrap : break-word; } .lyric-line.active .verse { @@ -1696,7 +1722,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } .lyric-line.active .verse.verse-active { - opacity: 1; + opacity : 1; transition: opacity 0.35s var(--appleEase); } @@ -1705,25 +1731,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } .lyric-line:hover::after { - content: ' '; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - transform: scale(1.06); - background: rgba(200, 200, 200, 0.1); - pointer-events: none; - border-radius: 10px; + content : ' '; + width : 100%; + height : 100%; + position : absolute; + top : 0; + left : 0; + transform : scale(1.06); + background : rgba(200, 200, 200, 0.1); + pointer-events : none; + border-radius : 10px; -webkit-backface-visibility: hidden; } .lyric-line.active { - --bgSpeed: 1s; - opacity: 1; - transform: scale(1); + --bgSpeed : 1s; + opacity : 1; + transform : scale(1); /*background: var(--keyColor);*/ - transition: transform 0.2s var(--appleEase), opacity 0.35s var(--appleEase); + transition : transform 0.2s var(--appleEase), opacity 0.35s var(--appleEase); } .lyric-line:not(.active) { @@ -1739,61 +1765,63 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } -.lyric-body:hover > .lyric-line:not(.active) { +.lyric-body:hover>.lyric-line:not(.active) { filter: none !important; } -.lyric-body > .lyric-line:not(.active) { + +.lyric-body>.lyric-line:not(.active) { // transition: filter var(--appleEase) 0.5s ease; } .lyricWaiting { - margin-bottom:10px; - display: none; + margin-bottom: 10px; + display : none; } .lyric-line.active .lyricWaiting { - display: inline-flex; + display : inline-flex; animation: lyricWaitingLine 6s cubic-bezier(0.42, 0, 0.58, 1) infinite; } -.lyric-line.active .lyricWaiting > div { - width: 10px; - height: 10px; - background: white; +.lyric-line.active .lyricWaiting>div { + width : 10px; + height : 10px; + background : white; border-radius: 50%; - margin: 3px; + margin : 3px; } .lyrics-translation { - font-size: 1.6rem; + font-size : 1.6rem; font-weight: 450; font-family: "Pretendard Variable", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - filter: contrast(0.5); + filter : contrast(0.5); } .lyric-footer { - bottom: 0; - height: 50px; - width: 100%; - position: absolute; - z-index: 1000; - opacity: 1; - background: rgba(30, 30, 30, 0.8); + bottom : 0; + height : 50px; + width : 100%; + position : absolute; + z-index : 1000; + opacity : 1; + background : rgba(30, 30, 30, 0.8); justify-content: center; - align-items: center; - display: none; - transition: opacity 0.1s var(--appleEase); + align-items : center; + display : none; + transition : opacity 0.1s var(--appleEase); } -.lyric-body:hover + .lyric-footer, .lyric-footer:hover { +.lyric-body:hover+.lyric-footer, +.lyric-footer:hover { display: flex; } .modular-fs .app-drawer .lyric-footer { background: unset; - display: flex; - opacity: 0.3; + display : flex; + opacity : 0.3; } .modular-fs .app-drawer .lyric-footer:hover { @@ -1801,23 +1829,23 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } .modular-fs .app-drawer .lyric-body .no-lyrics { - height: 100%; + height : 100%; display: flex; } @keyframes lyricWaitingLine { 0% { - opacity: 0.25; + opacity : 0.25; transform: scale(0.85); } 50% { - opacity: 1; + opacity : 1; transform: scale(1); } 100% { - opacity: 0.25; + opacity : 0.25; transform: scale(0.85); } } @@ -1834,20 +1862,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { .lyric-line2:before { - background: var(--keyColor); - content: ''; - width: 0%; - height: 6px; - position: absolute; - bottom: -8px; - left: 0; + background : var(--keyColor); + content : ''; + width : 0%; + height : 6px; + position : absolute; + bottom : -8px; + left : 0; border-radius: 10px; - z-index: -1; - transition: width var(--bgSpeed); + z-index : -1; + transition : width var(--bgSpeed); } .lyric-line2.active:before { - width: 100%; + width : 100%; transition: width var(--bgSpeed); } @@ -1858,46 +1886,46 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { /* Cider */ .more-btn-round { - border-radius: 100%; - background: rgba(100, 100, 100, 0.5); - box-shadow: var(--ciderShadow-Generic); - width: 32px; - height: 32px; - border: 0px; - cursor: pointer; - z-index: 5; - display: flex; + border-radius : 100%; + background : rgba(100, 100, 100, 0.5); + box-shadow : var(--ciderShadow-Generic); + width : 32px; + height : 32px; + border : 0px; + cursor : pointer; + z-index : 5; + display : flex; justify-content: center; - align-items: center; + align-items : center; &:hover { filter: brightness(125%); } &:active { - filter: brightness(75%); - transform: scale(0.98); + filter : brightness(75%); + transform : scale(0.98); transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); } .svg-icon { - width: 100%; + width : 100%; background: #eee; - --url: url("./views/svg/more.svg"); + --url : url("./views/svg/more.svg"); } } .social-btn { - border-radius: 100%; - background: transparent; - height: 17px; - border: 0px; - cursor: pointer; - z-index: 69; - display: flex; + border-radius : 100%; + background : transparent; + height : 17px; + border : 0px; + cursor : pointer; + z-index : 69; + display : flex; justify-content: center; - align-items: center; - float: right; + align-items : center; + float : right; } @media only screen and (min-width: 1133px) and (max-width: 1277px) { @@ -1910,45 +1938,50 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { .about-page { .teamBtn { - display: flex; + display : flex; align-items: center; - width: 100%; - font-size: 14px; - padding: 6px 16px; - margin: 4px; + width : 100%; + font-size : 14px; + padding : 6px 16px; + margin : 4px; - > img { - width: 30px; - margin: 0px 16px 0px 0px; - pointer-events: none; - border-radius: 100%; - box-shadow: var(--mediaItemShadow); + >img { + width : 30px; + margin : 0px 16px 0px 0px; + pointer-events : none; + border-radius : 100%; + box-shadow : var(--mediaItemShadow); image-rendering: -webkit-optimize-contrast; } } .sponsorBtn { - display: inline-flex; + display : inline-flex; justify-content: center; - align-items: center; + align-items : center; - > img { - width: 26px; - margin: 0px 16px 0px 0px; + >img { + width : 26px; + margin : 0px 16px 0px 0px; pointer-events: none; } + &.githubBtn { background-color: #211F1F; } + &.kofiBtn { background-color: #FBAA19; } + &.opencollectiveBtn { background-color: #7fadf2; } + &.discordBtn { background-color: #5865F2; } + &.twitterBtn { background-color: #1D9BF0; } @@ -1962,64 +1995,64 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } .folder-body { - background: #ffffff0a; + background : #ffffff0a; border-radius: 10px; - padding: 1px 6px; + padding : 1px 6px; .spinner { - display: block; - width: 100%; - height: 32px; + display : block; + width : 100%; + height : 32px; background-size: 16px; } } } #navigation-bar { - width: 100%; - background: rgba(0, 0, 0, 0.25); - height: var(--navigationBarHeight); - display: flex; - align-items: center; - padding: 0px 6px; - z-index: 7; - position: sticky; - top: 0; - left: 0; + width : 100%; + background : rgba(0, 0, 0, 0.25); + height : var(--navigationBarHeight); + display : flex; + align-items : center; + padding : 0px 6px; + z-index : 7; + position : sticky; + top : 0; + left : 0; backdrop-filter: blur(32px); //box-shadow: 0px 1px 0px rgba(185, 185, 185, 0.08); - mix-blend-mode: hard-light; + mix-blend-mode : hard-light; .nav-item { - appearance: none; - border: 0px; - height: 32px; - width: 40px; - background: transparent; - padding: 6px; - display: flex; + appearance : none; + border : 0px; + height : 32px; + width : 40px; + background : transparent; + padding : 6px; + display : flex; justify-content: center; - align-items: center; - color: rgba(200, 200, 200, 0.8); - margin: 2px; - border-radius: 6px; - transition: transform .10s var(--appleEase); + align-items : center; + color : rgba(200, 200, 200, 0.8); + margin : 2px; + border-radius : 6px; + transition : transform .10s var(--appleEase); &:active { background: var(--selected-click); - transform: scale(0.96); + transform : scale(0.96); transition: transform 0s var(--appleEase); } - > svg { - width: 8px; + >svg { + width : 8px; pointer-events: none; } &:hover { background: var(--selected); - > svg { + >svg { color: rgba(200, 200, 200, 1.0); } } @@ -2027,41 +2060,44 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } .well { - background: rgba(200, 200, 200, 0.05); + background : rgba(200, 200, 200, 0.05); border-radius: 10px; - padding: var(--contentInnerPadding); - margin-top: 16px; + padding : var(--contentInnerPadding); + margin-top : 16px; &.itemContainer { - display: flex; - flex-flow: wrap; + display : flex; + flex-flow : wrap; justify-content: center; - .cd-mediaitem-square-container{ + + .cd-mediaitem-square-container { align-items: center; } + .cd-mediaitem-square { - width: 220px; - height: 260px; - display: inline-flex; - flex: 0 0 auto; - flex-direction: column; - font-size: 14px; + width : 220px; + height : 260px; + display : inline-flex; + flex : 0 0 auto; + flex-direction : column; + font-size : 14px; justify-content: center; - align-items: center; - border-radius: 6px; - max-width: 240px; - flex-grow: 1; + align-items : center; + border-radius : 6px; + max-width : 240px; + flex-grow : 1; } &.collection-list-square { - display: grid; + display : grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); // screen size > 1200px @media screen and (min-width: 1500px) { grid-template-columns: repeat(5, minmax(200px, 1fr)); } + // less than 1100px @media screen and (max-width: 1150px) { grid-template-columns: repeat(3, minmax(200px, 1fr)); @@ -2070,24 +2106,24 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } } -.cd-mediaitem-square-container{ - display: inline-flex; - flex-direction: column; +.cd-mediaitem-square-container { + display : inline-flex; + flex-direction : column; justify-content: center; } -.reasonSP{ +.reasonSP { // margin-left: 15px; - color: rgb(167 163 163); + color : rgb(167 163 163); font-weight: 500; margin-left: 15px; } .text-overflow-elipsis { - display: -webkit-box; - min-width: 0px; - overflow: hidden; - text-overflow: ellipsis; + display : -webkit-box; + min-width : 0px; + overflow : hidden; + text-overflow : ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } @@ -2102,16 +2138,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { // Cider App #micaEffect { - opacity:1; + opacity : 1; // animation: micaEnter 1s ease-in-out forwards; - filter: brightness(1) saturate(320%); + filter : brightness(1) saturate(320%); + @keyframes micaEnter { 0% { - opacity: 0; + opacity : 0; transform: translateY(10px); } + 100% { - opacity: 1; + opacity : 1; transform: translateY(0px); } } @@ -2131,63 +2169,65 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { // Modular .modular-fs { .app-chrome.chrome-bottom { - position: fixed; - bottom: 0; - left: 0; - z-index: 14!important; + position : fixed; + bottom : 0; + left : 0; + z-index : 14 !important; backdrop-filter: var(--glassFilter); } + .app-navigation { height: 100%; } + .app-drawer { - width: 100%; - right: 0px; - top: 0px; - height: 100%; + width : 100%; + right : 0px; + top : 0px; + height : 100%; border-radius: 0px; - box-shadow: unset; - background: black; + box-shadow : unset; + background : black; .bgArtworkMaterial { display: block; &::before { - top: -50%; - left: -20%; - width: 200VH; + top : -50%; + left : -20%; + width : 200VH; height: 200VH; } - .bg-artwork-container{ + .bg-artwork-container { display: block !important; } } .lyric-body { justify-content: center; - align-items: center; - padding: 0px; - margin: 0px; - overflow: hidden; - filter: drop-shadow(0px 4px 6px rgb(0 0 0 / 70%)); + align-items : center; + padding : 0px; + margin : 0px; + overflow : hidden; + filter : drop-shadow(0px 4px 6px rgb(0 0 0 / 70%)); .lyric-line { - pointer-events: none; - font-weight: 600; - font-size: 2em; + pointer-events : none; + font-weight : 600; + font-size : 2em; transform-origin: center; - animation: fsLyricIn var(--appleEase) .2s; - opacity: 0.9; + animation : fsLyricIn var(--appleEase) .2s; + opacity : 0.9; &:not(.active) { - display: none; - margin: 0; + display : none; + margin : 0; transform: scale(1); } &.active { - margin: 0; + margin : 0; transform: scale(1); } } @@ -2197,11 +2237,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { @keyframes fsLyricIn { 0% { - opacity: 0; + opacity : 0; transform: scale(0.98) } + 100% { - opacity: 1; + opacity : 1; transform: scale(1); } } @@ -2217,7 +2258,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { .replaycard-enter, .replaycard-leave-to { - opacity: 0; + opacity : 0; transform: translateY(20px); } @@ -2238,7 +2279,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { .modal-enter, .modal-leave-to { - opacity: 0; + opacity : 0; transform: scale(1.10); } @@ -2254,40 +2295,40 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { .wpfade_transform-enter-active, .wpfade_transform-leave-active { - --transitionTime: 0.2s; - transition : opacity var(--transitionTime) var(--appleEase); - will-change : opacity, transform; + --transitionTime: 0.2s; + transition : opacity var(--transitionTime) var(--appleEase); + will-change : opacity, transform; } .wpfade_transform-enter { - opacity : 0; - transform : unset; - will-change: opacity; + opacity : 0; + transform : unset; + will-change: opacity; } .wpfade_transform-leave-to { - opacity : 0; - transform : unset; - will-change: opacity; + opacity : 0; + transform : unset; + will-change: opacity; } .wpfade_transform_backwards-enter-active, .wpfade_transform_backwards-leave-active { - --transitionTime: 0.2s; - transition : opacity var(--transitionTime) var(--appleEase); + --transitionTime: 0.2s; + transition : opacity var(--transitionTime) var(--appleEase); } .wpfade_transform_backwards-enter { - opacity : 0; - transform : unset; - will-change: opacity; + opacity : 0; + transform : unset; + will-change: opacity; } .wpfade_transform_backwards-leave-to { - opacity : 0; - transform : unset; - will-change: opacity; + opacity : 0; + transform : unset; + will-change: opacity; } .fabfade-enter-active, @@ -2297,7 +2338,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { .fabfade-enter, .fabfade-leave-to { - opacity: 0; + opacity : 0; transform: scale(0.5); } @@ -2309,7 +2350,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { .fsModeSwitch-enter, .fsModeSwitch-leave-to { transform: scale(1.10); - opacity: 0; + opacity : 0; } .sidebartransition-enter-active, @@ -2332,218 +2373,227 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { transform: translateX(400px); } -@media (prefers-color-scheme: dark) { - -} +@media (prefers-color-scheme: dark) {} :root { - --gfx-closeBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjM2LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PmN2D9EAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEtJREFUGJWNkMENwDAIA1FGY/8hkn8HOAqPfBsFKvz1yZYtbqwAlUIB6saUAH2NJ4MvL4PLgK/x13LAGTSqEaVa1a0x7XvcmI3D1wbntaRbB2haYwAAAABJRU5ErkJggg=='); - --gfx-maxBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6NTgtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjU4LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6NTgtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PlwQMBUAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFBJREFUGJXV0LERgCAUBNHVsQADM3uwWWbojQIs47MEGhgAuS/eSw41qeFYqGlRA7iAm74DKLyrfRABoLrOgq+/hJXngi71BOoGZKBMHqhAbtMvQzel9pREAAAAAElFTkSuQmCC'); + --gfx-closeBtn : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjM2LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PmN2D9EAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEtJREFUGJWNkMENwDAIA1FGY/8hkn8HOAqPfBsFKvz1yZYtbqwAlUIB6saUAH2NJ4MvL4PLgK/x13LAGTSqEaVa1a0x7XvcmI3D1wbntaRbB2haYwAAAABJRU5ErkJggg=='); + --gfx-maxBtn : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6NTgtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjU4LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6NTgtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PlwQMBUAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFBJREFUGJXV0LERgCAUBNHVsQADM3uwWWbojQIs47MEGhgAuS/eSw41qeFYqGlRA7iAm74DKLyrfRABoLrOgq+/hJXngi71BOoGZKBMHqhAbtMvQzel9pREAAAAAElFTkSuQmCC'); --gfx-restoreBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjI0LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PqiFCFwAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHNJREFUGJWtkKEOwlAMRc+QM5AwQYJFoPjZCWb2YRPIaeRTLwfTLQs0UxzX3tumtxCog78UdVTbZmM8AmsdXIABeKH2ak221dDuamnUCjyA+WtbB0zAGXgT0ycSFk31kBky/moUeBLpbsl91wi6Nnbfs/g+7XOQq6ifjfkAAAAASUVORK5CYII='); - --gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMi0xN1QxMzowMDozMloiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NWQwZWRiMC1mZDAwLWI2NGYtOWVmYi1hMmI0NTg3MDVhOGEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMzAwMWUxYS0yOTE5LWU0NDktYjk0Yy1jMjEyMjQ4YTlmOGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHN0RXZ0OndoZW49IjIwMjAtMDItMTdUMTM6MDA6MzJaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLupKEiIHBob3Rvc2hvcDpMYXllclRleHQ9Iu6koSIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwvRXAAAABdJREFUGNNj/P//PwMxgHGIKPw/XDwDAOr1HuzlELLnAAAAAElFTkSuQmCC'); + --gfx-minBtn : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMi0xN1QxMzowMDozMloiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NWQwZWRiMC1mZDAwLWI2NGYtOWVmYi1hMmI0NTg3MDVhOGEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMzAwMWUxYS0yOTE5LWU0NDktYjk0Yy1jMjEyMjQ4YTlmOGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHN0RXZ0OndoZW49IjIwMjAtMDItMTdUMTM6MDA6MzJaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLupKEiIHBob3Rvc2hvcDpMYXllclRleHQ9Iu6koSIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwvRXAAAABdJREFUGNNj/P//PwMxgHGIKPw/XDwDAOr1HuzlELLnAAAAAElFTkSuQmCC'); } #apple-music-video-container { background: black; - position: absolute; - float: left; - display: none; - width: 100%; - height: 100%; - bottom: 0; - z-index: 100000; + position : absolute; + float : left; + display : none; + width : 100%; + height : 100%; + bottom : 0; + z-index : 100000; } #apple-music-video-container { // AM Web Style Fullscreen Button #player-fullscreen { - background-size : 50%; - background-position: center; - background-repeat : no-repeat; - filter : opacity(0.6); - // filter: drop-shadow(0px 0px 4px rgb(0 0 0 / 80%)); - background-color : transparent; - border-radius : 10px; - transition : 0.2s ease-in-out filter; - bottom : 0; + background-size : 50%; + background-position: center; + background-repeat : no-repeat; + filter : opacity(0.6); + // filter: drop-shadow(0px 0px 4px rgb(0 0 0 / 80%)); + background-color : transparent; + border-radius : 10px; + transition : 0.2s ease-in-out filter; + bottom : 0; - &:hover { - filter : opacity(1); - transition: 0.2s ease-in-out filter; - } + &:hover { + filter : opacity(1); + transition: 0.2s ease-in-out filter; + } } // AM Web Style PiP Button #player-pip { - background-color: transparent; - border-radius : 10px; - bottom : 0; - filter : opacity(0.6); - transition : 0.2s ease-in-out filter; + background-color: transparent; + border-radius : 10px; + bottom : 0; + filter : opacity(0.6); + transition : 0.2s ease-in-out filter; - &:hover { - filter : opacity(1); - transition: 0.2s ease-in-out filter; - } + &:hover { + filter : opacity(1); + transition: 0.2s ease-in-out filter; + } } - .playback-info{ - position: absolute; - width:100%; - bottom: 0; - padding: 20px 40px; - background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%); - .song-artist{ - font-size: 1.7rem; - font-weight: bold; - } - .song-name{ - font-size: 1.2rem; - font-weight: bold; - color:rgb(255,255,255,0.8); - } + + .playback-info { + position : absolute; + width : 100%; + bottom : 0; + padding : 20px 40px; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%); + + .song-artist { + font-size : 1.7rem; + font-weight: bold; + } + + .song-name { + font-size : 1.2rem; + font-weight: bold; + color : rgb(255, 255, 255, 0.8); + } } - input[type="range"]{ - align-self: center; - height: 4px; - border-radius: .5rem; - margin-inline: 10px; + + input[type="range"] { + align-self : center; + height : 4px; + border-radius: .5rem; + margin-inline: 10px; } - - .song-progress input[type="range"]{ - appearance: initial; - &::-webkit-slider-thumb { - box-shadow: 0px 0px 0px #000000; - border: 1px solid #39404D; - background: #fff; - height:0.7rem; - width:0.7rem; - border-radius: 50%; - cursor: pointer; - -webkit-appearance: none; - } + + .song-progress input[type="range"] { + appearance: initial; + + &::-webkit-slider-thumb { + box-shadow : 0px 0px 0px #000000; + border : 1px solid #39404D; + background : #fff; + height : 0.7rem; + width : 0.7rem; + border-radius : 50%; + cursor : pointer; + -webkit-appearance: none; + } } } #apple-music-video-player { - position: absolute; - top: 50%; - width: 100%; + position : absolute; + top : 50%; + width : 100%; transform: translate(0, -50%); - height: 100%; + height : 100%; } #app.twopanel #apple-music-video-container { - top:0; + top : 0; bottom: unset; } + .inactive { opacity: 0; } + #apple-music-video-player-controls { position: absolute; - z-index: 100001; - float: left; - width: 100%; - height: 100%; - .playback-info{ + z-index : 100001; + float : left; + width : 100%; + height : 100%; + + .playback-info { .song-progress { display: flex; } - .app-chrome-item.display--large{ - position: relative; - display: flex; + + .app-chrome-item.display--large { + position : relative; + display : flex; flex-direction: row; - flex-wrap: nowrap; - align-items: center; + flex-wrap : nowrap; + align-items : center; + .playback-button { - position: absolute; - top: 50%; - left: 50%; + position : absolute; + top : 50%; + left : 50%; transform: translate(-50%, -50%); - padding: 3px; + padding : 3px; } } + .song-artist-album { - font-weight: 400; - font-size: 12px; - text-align: center; - /*height: 1.2em; - line-height: 1.2em;*/ - z-index: 1; - align-items: center; + font-weight : 400; + font-size : 12px; + text-align : center; + /*height : 1.2em; + line-height : 1.2em;*/ + z-index : 1; + align-items : center; justify-content: center; - width: 80%; - max-width: 340px; - overflow: hidden; - + width : 80%; + max-width : 340px; + overflow : hidden; + .song-artist-album-content { font-weight: 400; - font-size: 12px; - text-align: center; - width: 100%; - + font-size : 12px; + text-align : center; + width : 100%; + &.song-artist-normal { height: inherit; } } - - + + &.song-artist-marquee { - > marquee { + >marquee { margin-bottom: -3px; } } } - + } } #apple-music-video-player-controls #player-exit { - position: absolute; - z-index: 100001; - float: left; - width: 100%; - margin-left: 10px; - margin-right: 10px; - margin-top: 10px; + position : absolute; + z-index : 100001; + float : left; + width : 100%; + margin-left : 10px; + margin-right : 10px; + margin-top : 10px; margin-bottom: 10px; - cursor: pointer; + cursor : pointer; } #apple-music-video-player-controls #player-pip { - position: absolute; - z-index: 100001; - width: 32px; - height: 32px; - margin: 10px; - right: 50px; - border-radius: 100%; - display: flex; + position : absolute; + z-index : 100001; + width : 32px; + height : 32px; + margin : 10px; + right : 50px; + border-radius : 100%; + display : flex; justify-content: center; - align-items: center; - cursor: pointer; + align-items : center; + cursor : pointer; } -#apple-music-video-player-controls #player-pip > svg { +#apple-music-video-player-controls #player-pip>svg { width: 50%; } #apple-music-video-player-controls #player-fullscreen { - position: absolute; - z-index: 100001; - width: 32px; - height: 32px; - margin: 10px; - right: 0px; - border-radius: 100%; - display: flex; + position : absolute; + z-index : 100001; + width : 32px; + height : 32px; + margin : 10px; + right : 0px; + border-radius : 100%; + display : flex; justify-content: center; - align-items: center; - cursor: pointer; + align-items : center; + cursor : pointer; } -#apple-music-video-player-controls #player-fullscreen > svg { +#apple-music-video-player-controls #player-fullscreen>svg { width: 70%; } @@ -2556,16 +2606,16 @@ img[src=""] { } div#captions { - font-size: 1.2rem; - position: absolute; - top: 85%; - text-align: center; - width: auto; - align-self: center; - left: 50%; - transform: translate(-50%, -50%); - background: rgba(0, 0, 0, 0.6); - color: yellow; + font-size : 1.2rem; + position : absolute; + top : 85%; + text-align : center; + width : auto; + align-self : center; + left : 50%; + transform : translate(-50%, -50%); + background : rgba(0, 0, 0, 0.6); + color : yellow; white-space: pre-line; font-family: 'Inter', 'Noto Sans JP', 'Source Han Sans SC', 'Source Han Sans HK', 'Source Han Sans SC', 'Source Han Sans HK', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif; } @@ -2576,12 +2626,12 @@ div#captions { .item-navigate:hover { text-decoration: underline; - cursor: pointer; + cursor : pointer; } .title-browse-sp { - width: 100%; - text-align: left; + width : 100%; + text-align : left; margin-bottom: 2px; } @@ -2602,26 +2652,27 @@ div#captions { } body.no-gpu { - --ciderShadow-Generic: var(--mediaItemShadow); - --mediaItemShadow-Shadow: var(--mediaItemShadow); + --ciderShadow-Generic : var(--mediaItemShadow); + --mediaItemShadow-Shadow : var(--mediaItemShadow); --mediaItemShadow-ShadowSubtle: var(--mediaItemShadow); .bg-artwork-container { - display: none; + display : none; animation: none !important; - .bg-artwork{ + + .bg-artwork { animation: none !important; } } .floating-header { - background: black; + background : black; backdrop-filter: unset; } .artworkContainer { - animation: unset!important; - opacity: 0.7; + animation: unset !important; + opacity : 0.7; } .info-rect-card { @@ -2631,27 +2682,28 @@ body.no-gpu { } .menu-panel .menu-panel-body { - background: rgb(30 30 30); + background : rgb(30 30 30); backdrop-filter: unset; } #navigation-bar { backdrop-filter: unset; - mix-blend-mode: unset; - background: rgb(0 0 0); + mix-blend-mode : unset; + background : rgb(0 0 0); } .addtoplaylist-panel { .modal-window { - background: rgb(18 18 18); + background : rgb(18 18 18); backdrop-filter: unset; } } .app-drawer { backdrop-filter: unset; - mix-blend-mode: unset; - background: #1c1c1c; + mix-blend-mode : unset; + background : #1c1c1c; + transition: unset; } .wpfade-enter-active, @@ -2682,46 +2734,47 @@ body.no-gpu { .qrimg { - width: -webkit-fill-available; + width : -webkit-fill-available; max-block-size: -webkit-fill-available; - object-fit: contain; - overflow-x: hidden; - overflow-y: hidden; + object-fit : contain; + overflow-x : hidden; + overflow-y : hidden; } .moreinfo-modal { - .modal-window{ + .modal-window { height: max-content !important; - .modal-content{ - height: max-content !important; + + .modal-content { + height : max-content !important; padding-block: 25px; } } - + } .equalizer-panel { .modal-window { - height: 330px; + height : 330px; max-height: 330px; - width: 740px; - max-width: 800px; - overflow: hidden; + width : 740px; + max-width : 800px; + overflow : hidden; .info-header { padding-left: 12px; } .visual-container { - display: flex; + display : flex; justify-content: center; - align-items: center; - overflow: hidden; + align-items : center; + overflow : hidden; } .modal-header { - padding: 16px; + padding : 16px; position: relative; overflow: hidden; @@ -2742,17 +2795,17 @@ body.no-gpu { } .input-container { - display: inline-grid; - width: 54px; + display : inline-grid; + width : 54px; justify-items: center; - font-size: 0.7em; + font-size : 0.7em; } .input-container.mini { - display: inline-grid; - width: 43px; + display : inline-grid; + width : 43px; justify-items: center; - font-size: 0.7em; + font-size : 0.7em; } .freq-header { @@ -2760,30 +2813,30 @@ body.no-gpu { } .reset-button { - width: 50%; + width : 50%; margin-left: 25%; - text-align: center; + text-align : center; } input.eq-slider { -webkit-appearance: slider-vertical; - width: 5%; + width : 5%; } input[type="number"] { padding: unset; - width: 55px; + width : 55px; } .header input.eq-slider { -webkit-appearance: slider-vertical; - width: 5%; - opacity: 0; + width : 5%; + opacity : 0; } } .modal-lowercontent { - padding: 16px; + padding : 16px; background-color: var(--modalBackground); } } @@ -2794,22 +2847,22 @@ body[platform='darwin'] { display: none; } - .app-chrome .app-chrome-item > .app-mainmenu { - opacity: 0; - width: 52px; - pointer-events: none; + .app-chrome .app-chrome-item>.app-mainmenu { + opacity : 0; + width : 52px; + pointer-events : none; -webkit-app-region: drag; } } .percent { - display: inline-block; + display : inline-block; position: relative; } .percent::after { - position: relative; - right: 2em; + position : relative; + right : 2em; transition: all .05s ease-in-out; } @@ -2823,7 +2876,7 @@ body[platform='darwin'] { } .playbackrate-text { - align-items: end; + align-items : end; margin-right: 5px; } @@ -2831,52 +2884,52 @@ body[platform='darwin'] { color: transparent; } -.spatialproperties-panel.modal-fullscreen{ +.spatialproperties-panel.modal-fullscreen { flex-direction: column; -} - -.cursor { - background: rgb(255 255 255 / 50%); - width: 16px; - height: 16px; - position: fixed; - z-index: 9999999999; - pointer-events: none; - border-radius: 100%; - box-shadow: 0px 0px 0px 2px rgb(200 200 200 / 100%); - top: 0; - left: 0; - display: none; } -.keybinds-page{ - - .md-option-header { - padding: 10px 0px; - border-bottom: unset; - border-top: unset; - font-weight: 600; - background: rgba(255, 255, 255, 0); - font-size: 2em; - } +.cursor { + background : rgb(255 255 255 / 50%); + width : 16px; + height : 16px; + position : fixed; + z-index : 9999999999; + pointer-events: none; + border-radius : 100%; + box-shadow : 0px 0px 0px 2px rgb(200 200 200 / 100%); + top : 0; + left : 0; + display : none; +} - .md-option-header-sub { - padding: 15px 10px; - border-bottom: unset; - border-top: unset; - background: rgba(255, 255, 255, 0); - font-weight: 600; - font-size: 1.7em; - } +.keybinds-page { - .md-option-line{ - padding: 15px 20px; - font-size: 0.90em; - } + .md-option-header { + padding : 10px 0px; + border-bottom: unset; + border-top : unset; + font-weight : 600; + background : rgba(255, 255, 255, 0); + font-size : 2em; + } + + .md-option-header-sub { + padding : 15px 10px; + border-bottom: unset; + border-top : unset; + background : rgba(255, 255, 255, 0); + font-weight : 600; + font-size : 1.7em; + } + + .md-option-line { + padding : 15px 20px; + font-size: 0.90em; + } } .content-inner.keybinds-page { - top: var(--navigationBarHeight); + top : var(--navigationBarHeight); padding: 15px; } @@ -2884,4 +2937,4 @@ body[platform='darwin'] { @import url("less/linux.less"); @import url("less/compact.less"); @import url("less/directives.less"); -@import url("less/macosemu.less"); +@import url("less/macosemu.less"); \ No newline at end of file From 6bdb8172fadb40ad1ebf2ef90c921d65e7f1482a Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Tue, 12 Jul 2022 20:11:50 -0700 Subject: [PATCH 5/6] fixes text wrapping on tab text --- src/renderer/less/directives.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less index 6b7ea0a1..9af65a5d 100644 --- a/src/renderer/less/directives.less +++ b/src/renderer/less/directives.less @@ -35,6 +35,11 @@ margin : 0px; height : 100%; position : relative; + white-space: nowrap; + + ._svg-icon { + flex: 0 0 auto; + } &:before { --dist : 1px; From cc084ba6eab346fa6b5d6ede8731eb45e07d6a1d Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Wed, 13 Jul 2022 04:28:45 -0700 Subject: [PATCH 6/6] added is-album --- src/renderer/views/pages/cider-playlist.ejs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs index 0b3c3531..118a4658 100644 --- a/src/renderer/views/pages/cider-playlist.ejs +++ b/src/renderer/views/pages/cider-playlist.ejs @@ -1,5 +1,5 @@