diff --git a/Assets/AppChromeBtn.afdesign b/Assets/AppChromeBtn.afdesign new file mode 100644 index 00000000..00fc374b Binary files /dev/null and b/Assets/AppChromeBtn.afdesign differ diff --git a/src/renderer/AppHeader.svg b/src/renderer/AppHeader.svg deleted file mode 100644 index d6a7b723..00000000 --- a/src/renderer/AppHeader.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/renderer/assets/AppChromeBtn.svg b/src/renderer/assets/AppChromeBtn.svg new file mode 100644 index 00000000..16985261 --- /dev/null +++ b/src/renderer/assets/AppChromeBtn.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/renderer/index.js b/src/renderer/index.js index 16e166cd..eab1cdc9 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -340,6 +340,13 @@ const app = new Vue({ }, }, methods: { + mainMenuVisibility(val) { + if(val) { + (this.chrome.userinfo.id) ? this.chrome.menuOpened = !this.chrome.menuOpened : false + }else{ + setTimeout(()=>{this.chrome.menuOpened = false}, 100) + } + }, stringTemplateParser(expression, valueObj) { const templateMatcher = /{{\s?([^{}\s]*)\s?}}/g; let text = expression.replace(templateMatcher, (substring, value, index) => { @@ -594,7 +601,6 @@ const app = new Vue({ if (this.isDev) { this.mk.privateEnabled = true // Hide UserInfo if Dev mode - this.chrome.hideUserInfo = true } else { // Get Hide User from Settings this.chrome.hideUserInfo = !this.cfg.visual.showuserinfo diff --git a/src/renderer/logo-simple.svg b/src/renderer/logo-simple.svg deleted file mode 100644 index 9f78bf50..00000000 --- a/src/renderer/logo-simple.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/renderer/logotmp2.svg b/src/renderer/logotmp2.svg deleted file mode 100644 index 61317b00..00000000 --- a/src/renderer/logotmp2.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/renderer/style-old.css b/src/renderer/style-old.css deleted file mode 100644 index 7662fb15..00000000 --- a/src/renderer/style-old.css +++ /dev/null @@ -1,2165 +0,0 @@ -@import url("ameframework.css"); - -:root { - --appleEase: cubic-bezier(0.42, 0, 0.58, 1); - --mediaItemShadow-Shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55); - --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%); - --mediaItemRadius: 4px; - --mediaItemRadiusRound: 100%; - --contentInnerPadding: 16px; - --navbarHeight: 48px; - --keyColor: #fa586a; - --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); -} - -html, -body { - margin: 0; - padding: 0; - overflow: hidden; - width: 100%; - height: 100%; - box-sizing: border-box; - background-size: cover; - background-position: center; - background: #0000; - font-family: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - transition: opacity .10s var(--appleEase); -} - -body[loading] { - opacity: 0.5; - pointer-events: none; -} - -body[platform='linux'] { - background:#222; -} - -*, -*:before, -*:after { - box-sizing: inherit; -} - - -/* Modern style overlay scrollbars */ -::-webkit-scrollbar { - width: 16px; - height: 24px; -} - -::-webkit-scrollbar-button { - display: none; -} - -::-webkit-scrollbar-track-piece { - background: transparent; -} - -::-webkit-scrollbar-thumb { - 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; -} - -::-webkit-scrollbar-thumb:hover { - border: 5px solid transparent; - box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 80%); -} - -#app { - --color1: rgb(30, 30, 30, 30%); - --color2: rgba(15, 15, 15, 70%); - /* --color1: rgb(30, 30, 31, 20%); - --color2: rgba(17, 17, 17, 24%); */ - --chromeHeight: 55px; - width: 100%; - height: 100%; - background: var(--color1); - color: white; - user-select: none; - margin: 0 auto; - position: relative; - overflow: hidden; -} -[hidden] { - display: none !important; -} - - -.bg-artwork--placeholder { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #222; - z-index: -1; - background-size: cover; - background-position: center; - opacity: 0.70; -} - - -.bg-artwork { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--artwork); - z-index: -1; - object-fit: cover; - object-position: center; - /* filter: blur(60px) saturate(180%); - opacity: 0.70; */ - filter: blur(180px) saturate(280%); - opacity: 0.60; - transition: opacity .25s var(--appleEase); - pointer-events: none; - transform: translateZ(0px); -} - - -[artwork-hidden] { - transition: opacity .25s var(--appleEase); - 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; -} - -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; -} - -input[type=range].web-slider::-webkit-slider-runnable-track { - -webkit-appearance: none; - box-shadow: none; - border: none; - background: transparent; -} - -.nopadding { - padding: 0px; -} - -.md-btn { - font-family: inherit; - color: white; - font-size: 14px; -} - -#app-main { - display: flex; - width: 100%; - height: 100%; - flex-direction: column; -} - -#app-sidebar { - /* background-color: var(--color1); */ - height: 100%; - width: 260px; - display: flex; - flex-direction: column; - flex: 0 0 auto; -} - -#app-navbar { - 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 { - background-color: var(--color2); - height: 100%; - width: 100%; - overflow-y: scroll; - overflow-y: overlay; - overflow-x: hidden; - border-radius: 10px 0px; - border-left: 1px solid rgb(0 0 0 / 25%); - border-top: 1px solid rgb(0 0 0 / 25%); - position:relative; -} - -.content-inner { - position: absolute; - top: 0; - left: 0; - padding: 32px; - width: 100%; -} - -.content-inner.centered { - height: 100%; - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; -} - -.app-drawer { - width: 300px; - border-left: 1px solid rgb(0 0 0 / 25%); - flex: 0 0 auto; - border-top: 1px solid rgb(0 0 0 / 25%); -} - -.search-input-container { - position: relative; -} - -.search-input { - width: 100%; - padding: 6px; - border-radius: 6px; - border: 1px solid rgb(200 200 200 / 10%); - font-family: inherit; - font-size: 14px; - background: rgb(100 100 100 / 25%); - color: rgb(200 200 200); - font-weight: 500; - padding-left: 32px; - position: relative; -} - -.search-input:focus { - 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'); - background-position: 10px; - background-repeat: no-repeat; - background-size: 12px; - pointer-events: none; - opacity: 0.55; -} - -.app-sidebar-header { - font-size: 14px; - padding: 11px; - font-weight: 600; -} - -.app-sidebar-header-text { - font-size: 11px; - margin: 6px 3px; - font-weight: 600; - opacity: 0.50; -} - -.app-sidebar-footer { - padding: 11px; -} - -.app-sidebar-button { - 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; -} - -.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; -} - -.app-sidebar-button > .sidebar-user-text { - width: 100%; - display: flex; - font-size: 14px; - flex-direction: column; -} - -.app-sidebar-button > .sidebar-user-text .fullname { - text-align: left; -} - -.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: 60px; - 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: 20px 0px; -} - -.app-sidebar-content { - padding: 8px; - overflow-y: scroll; - overflow-y: overlay; - height: 100%; -} - -.app-sidebar-content::-webkit-scrollbar { - display: none; -} - -.app-sidebar-content:hover::-webkit-scrollbar { - display: initial; -} - -.app-sidebar-item { - display: flex; - width: 100%; - padding: 8px 12px; - font-weight: 400; - font-family: inherit; - font-size: 14px; - margin: 6px 0px; - border: 1px solid transparent; - border-radius: 6px; - background: transparent; - color: white; - transition: transform .1s; - text-align: left; -} - -.app-sidebar-item:hover { - border: 1px solid rgb(200 200 200 / 5%); - background: rgb(200 200 200 / 15%); -} - -.app-sidebar-item:active { - border: 1px solid rgb(200 200 200 / 5%); - background: rgb(200 200 200 / 15%); - transform: scale(0.98); - transition: transform 0s; -} - -.app-sidebar-item.active { - border: 1px solid rgb(200 200 200 / 5%); - background: rgb(200 200 200 / 15%); - transform: scale(1); - transition: transform 0s; -} - -.app-sidebar-item.active::after { - content: ''; - width: 4px; - height: 16px; - display: block; - position: absolute; - top: calc(100% - 72%); - border-radius: 10px; - left: 0px; - background: var(--keyColor); -} - -.app-chrome { - background: var(--color1); - width: 100%; - height: var(--chromeHeight); - display: flex; - flex-direction: row; - -webkit-app-region: drag; -} - -.mv-chrome { - 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; - justify-content: center; - align-items: center; -} - -.app-chrome .app-chrome--left { - width: 30%; - justify-content: left; -} - -.app-chrome .app-chrome--center { - width: 100%; -} - -.app-chrome .app-chrome--right { - width: 30%; - justify-content: right; -} - -.app-chrome .app-chrome-item { - height: 100%; - width: auto; - display: flex; - justify-content: center; - align-items: center; - -webkit-app-region: no-drag; - height: auto; -} - -.app-chrome .app-chrome-item.generic { - width: 50px; - opacity: 0.70; -} - -.app-chrome .app-chrome-item.volume { - width: 80px; - margin-right: 6px; -} - -.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb { - transition: all var(--appleTransition); -} - -.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover { - background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px); - transform: scale(1.2); -} - -.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active { - background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px); - transform: scale(1); -} - -.app-chrome .app-chrome-item.volume > input[type=range] { - width: 100%; -} - -.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; -} - -.app-chrome .app-chrome-item.volume > input[type=range]::-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); -} - -.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track { - -webkit-appearance: none; - box-shadow: none; - border: none; - background: transparent; -} - -.app-chrome .back-button { - height: 100%; - width: 60px; -} - -.app-chrome .app-chrome-item.full-height { - height: 100%; -} - -.app-chrome .app-chrome-item > .app-title { - width: 100px; - font-size: 13px; - background: url("./logotmp.png"); - background-size: 90px; - background-repeat: no-repeat; - background-position: center; - height: 100%; - margin-right: 16px; - margin-left: 16px; - image-rendering: -webkit-optimize-contrast; - -webkit-app-region: drag; -} - -.app-chrome .app-chrome-item > .window-controls { - width: 138px; - font-size: 13px; - height: 100%; - display: flex; -} - -.app-chrome .app-chrome-item > .window-controls > div { - height: 100%; - width: 32px; -} - -.app-chrome .app-chrome-item > .window-controls > div:hover { - background: rgb(200 200 200 / 10%); -} - -.app-chrome .app-chrome-item > .window-controls > div.close { - width: 100%; - height: 100%; - background-image: var(--gfx-closeBtn); - background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; -} - -.app-chrome .app-chrome-item > .window-controls > div.minmax { - background-image: var(--gfx-maxBtn); - background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - width: 100%; - height: 100%; -} - -.app-chrome .app-chrome-item > .window-controls > div.minmax.restore { - background-image: var(--gfx-restoreBtn); -} - -.app-chrome .app-chrome-item > .window-controls > div.minimize { - background-image: var(--gfx-minBtn); - background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - width: 100%; - height: 100%; -} - -.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%); -} - -.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 .song-name { - font-weight: 600; - text-align: center; - font-size: 13px; - height: 1em; - line-height: 1em; - overflow: hidden; -} - -.app-chrome .app-chrome-item > .app-playback-controls .song-artist { - font-weight: 400; - font-size: 13px; - text-align: center; - height: 1em; - line-height: 1em; - overflow: hidden; - /* animation: marquee 10s linear infinite; */ -} - -.app-chrome .app-chrome-item > .app-playback-controls .song-progress { - height: 16px; - position: absolute; - bottom: 0px; - left: 0px; - overflow: hidden; - -} - -@keyframes marquee { - from { - transform: translateX(100%); - } - to { - transform: translateX(-100%); - } -} - -.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range] { - appearance: none; - width: 100%; - height: 4px; - background-color: rgb(200 200 200 / 10%); -} - -.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 4px; - height: 12px; - border-radius: 2px; - background: var(--keyColor); - cursor: ew-resize; -} - -.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-moz-range-thumb { - width: 8px; - height: 8px; - border-radius: 100%; - background: var(--keyColor); - cursor: pointer; -} - -.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: 4px; - flex: 0 0 auto; - margin: 6px; - box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 25%); - image-rendering: -webkit-optimize-contrast; -} - -.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; -} - -.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; -} - -.app-chrome .app-chrome-item > .app-playback-controls .playback-info > div { - width: 100%; -} - -.app-navigation { - background: var(--color1); - height: calc(100% - var(--chromeHeight)); - width: 100%; - display: flex; -} - -.display--small { - display: none !important; -} - -.web-slider.display--small{ - margin: 10px; -} - -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); -} - -/* Window is smaller <= 1023px width */ -@media only screen and (max-width: 1023px) { - .display--small { - display: inherit !important; - } - - .display--large { - display: none !important; - } -} - -.header-text { - margin: 0px; -} - -.media-item--small { - background: rgb(0 0 0 / 25%); - height: 162px; - width: 132px; - display: inline-flex; - flex-direction: column; - justify-content: center; - align-items: center; - border-radius: 10px; -} - -.media-item--small .artwork { - background: red; - margin: 6px; - border-radius: 100%; - width: 90px; - height: 90px; - box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 30%); -} - -.playlist-artwork { - height: 190px; - width: 190px; - background: blue; - border-radius: 6px; - background: var(--artwork); - background-size: cover; - box-shadow: var(--mediaItemShadow); - flex: 0 0 auto; - margin: 6px; - margin-top: 0px; -} - -.media-item--small .text { - font-weight: 600; - font-size: 0.90em; -} - -.media-item--small .subtext { - font-size: 0.75em; -} - -.player-duration-time { - opacity: 0.5; -} - -.player-artwork-container { - display: flex; - align-items: center; - justify-content: center; -} - -.player-duration-container { - font-size: 0.85em; - font-weight: 500; -} - -.media-artwork { - --artwork: url(""); - width: 80vw; - height: 80vw; - max-height: 500px; - max-width: 500px; - background: black; - background-image: var(--artwork); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - border-radius: 8px; - box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55); - transition: transform .10s var(--appleEase); -} - -.media-artwork.paused { - transition: transform .35s var(--appleEase); - transform: scale(0.85); -} - -.playback-slider { - width: 90%; -} - -.volume-slider { - width: 100%; -} - -.volume-slider-container { - width: 90%; - margin: 0 auto; - padding: 0px; -} - -.volume-slider-container .col-auto, -.volume-slider-container .col { - display: flex; - align-items: center; - justify-self: center; - padding: 0px; - margin: 0px; -} - -.playback-button { - font-size: 2em; - width: 40px; - height: 36px; - 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; -} - -.playback-button:active { - transform: scale(0.95); -} - -.playback-button--small { - border-radius: 6px; - font-size: 1em; - color: inherit; - background-size: 14px; - background-repeat: no-repeat; - background-position: center; - background-color: transparent; - width: 40px; - height: 32px; - border: 0px; - box-shadow: unset; -} - -.playback-button:hover, .playback-button--small:hover { - background-color: rgb(200 200 200 / 10%); -} - -.playback-button:active, .playback-button--small:active { - transform: scale(0.9); -} - -.playback-button--small.active { - background-color: rgb(200 200 200 / 10%); -} - -.playback-button--small.search { - background-image: url("./assets/search.svg"); -} - -.playback-button--small.cast { - background-image: url("./assets/cast_white.svg"); -} - -.playback-button--small.queue { - background-image: url("./assets/list.svg"); -} - -.playback-button--small.lyrics { - background-image: url("./assets/quote-right.svg"); -} - -.playback-button--small.shuffle { - background-image: url("./assets/shuffle.svg"); -} - -.playback-button--small.repeat { - background-image: url("./assets/repeat.svg"); -} - -.playback-button--small.repeat.repeatOne { - background-color: var(--keyColor); -} - -.playback-button.pause { - background-image: url('./assets/pause.svg'); -} - -.playback-button.play { - background-image: url('./assets/play.svg'); -} - -.playback-button.next { - background-image: url('./assets/forward.svg'); -} - -.playback-button.previous { - background-image: url('./assets/backward.svg'); -} - -.playback-buttons { - display: flex; - align-items: center; - justify-content: center; -} - -.player-volume-glyph { - width: 32px; - height: 16px; - background-repeat: no-repeat; - background-size: contain; - background-position: center; -} - -.player-volume-glyph.decrease { - background-image: url("./assets/volume-down.svg"); - opacity: 0.5; -} - -.player-volume-glyph.increase { - background-image: url("./assets/volume-up.svg"); - opacity: 0.5; -} - -.player-track-info { - width: 90%; - margin: 0 auto; -} - -.player-song-title { - font-size: 1.25em; - text-align: left; - margin: 0 auto; - font-weight: 500; -} - -.player-song-artist { - font-size: 1.0em; - text-align: left; - margin: 0 auto; - color: var(--keyColor); - font-weight: 400; -} - -.player-song-artist:hover { - cursor: pointer; - text-decoration: underline; -} - -.player-more-container { - display: flex; - align-items: center; - justify-content: center; -} - -.player-more-button { - appearance: none; - width: 32px; - height: 32px; - border-radius: 50%; - border: 0px; - background: var(--keyColor); - cursor: pointer; - box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%); - color: white; - font-weight: bold; - padding: 0px; - font-size: 16px; -} - -.back-button { - width: 40px; - height: 40px; - background-color: transparent; - background-size: 16px; - background-position: center; - background-repeat: no-repeat; - background-image: url("./assets/arrow-left.svg"); - border: 0px; - border-radius: 0px; -} - -.header-text { - height: 40px; - display: flex; - align-items: center; - -} - - -.flex-center { - display: flex; - align-items: center; - flex-wrap: wrap; -} - -.list-entry-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 12px; - font-size: 1em; - font-family: inherit; -} - -.list-entry { - display: flex; - align-items: center; - /* justify-content: space-between; */ - padding: 12px; - font-size: 1em; - font-family: inherit; - border-bottom: 1px solid rgba(255 255 255 / 0.1); - cursor: pointer; -} - -.list-entry-image { - --artwork: url(""); - width: 64px; - height: 64px; - background: var(--artwork); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - border-radius: 8px; - box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55); -} - -.list-entry-image.artist { - border-radius: 50%; -} - -.list-entry-body { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - margin-left: 12px; -} - -.list-entry-name { - font-size: 14px; - font-weight: 500; - overflow: hidden; - width: 100%; -} - -.list-entry-artist { - font-size: 12px; - overflow: hidden; - width: 100%; -} - -.list-entry .handle { - height: 100%; - width: 28px; - background: var(--keyColor); - display: flex; - justify-content: center; - align-items: center; -} - -.md-container { - width: 100%; - position: relative; -} - -.search-panel { - background: rgb(0 0 0 / 50%); -} - -.search-header { - position: absolute; - width: 100%; - z-index: 1; - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border-bottom: 1px solid rgb(200 200 200 / 8%); -} - -.connection-error-panel { - background: rgb(0 0 0 / 50%); -} - -.search-type-container { - display: flex; -} - -.search-type-button { - background: rgb(20 20 20 / 0.85); - border-radius: 50px; - color: white; - border: 0px; - box-shadow: unset; - font-family: inherit; - padding: 8px 16px; - font-size: 14px; - font-weight: 500; - margin: 8px; - margin-top: 0px; - margin-bottom: 0px; -} - -.search-type-button.active { - background: var(--keyColor); -} - -.search-tab-container { - overflow: auto; - white-space: nowrap; - overflow-y: hidden; -} - -.search-body-container { - position: relative; - width: 100%; - height: 100%; -} - -.queue-body { - width: 100%; - height: 100%; -} - -.search-body { - position: absolute; - width: 100%; - height: 100%; - padding-top: 220px; -} - -.search-tab { - background: rgb(20 20 20 / 0.85); - border-radius: 50px; - color: white; - border: 0px; - box-shadow: unset; - font-family: inherit; - padding: 8px 16px; - font-size: 14px; - font-weight: 500; -} - -.search-tab.active { - background: var(--keyColor); -} - -.context-menu { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - z-index: 100; -} - -.context-menu .context-menu-item { - --borderRadius: 10px; - appearance: none; - width: 100%; - display: block; - font-size: 1.10em; - padding: 18px 20px; - font-family: inherit; - border: 0px; - font-weight: 600; - border-radius: 0px; - border-bottom: 1px solid rgb(200 200 200 / 15%); - margin: 0px; - background: rgb(60 60 60 / 80%); - backdrop-filter: blur(16px) saturate(180%); - -webkit-backdrop-filter: blur(16px) saturate(180%); - color: #ccc; -} - -.context-menu .context-menu-item:hover { - cursor: pointer; -} - -.context-menu .context-menu-item:active { - filter: brightness(75%); -} - -.context-menu .context-menu-item:first-child { - border-radius: 0px; - border-top-left-radius: var(--borderRadius); - border-top-right-radius: var(--borderRadius); -} - -.context-menu .context-menu-item:last-child { - border-radius: 0px; - border-bottom-left-radius: var(--borderRadius); - border-bottom-right-radius: var(--borderRadius); - border-bottom: 0px; -} - -.context-menu .context-menu-item:only-child { - border-radius: var(--borderRadius); -} - -.context-menu .context-menu-item.context-menu-item--left { - text-align: left; -} - -.context-menu .context-menu-body { - display: flex; - align-items: flex-end; - justify-content: flex-end; - flex-direction: column; -} - -.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; -} - -.lyric-line { - --bgSpeed: 1s; - appearance: none; - color: white; - font-size: 26px; - transform: scale(0.8); - transform-origin: left center; - transition: transform 0.2s var(--appleEase); - opacity: 0.75; - width: auto; - display: inline-block; - margin: 10px; - margin-left: 5%; - margin-right: 0px; -} - -.lyric-line:hover { - cursor: pointer; -} - -.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; - -webkit-backface-visibility: hidden; -} - -.lyric-line.active { - --bgSpeed: 1s; - opacity: 1; - transform: scale(1); - /*background: var(--keyColor);*/ - transition: transform 0.2s var(--appleEase); -} - -.lyric-line:not(.active) { - filter: blur(1px) -} - -.lyricWaiting { - margin-top: 8px; - display: none; -} - -.lyric-line.active .lyricWaiting { - 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; - border-radius: 50%; - margin: 3px; -} - -.lyrics-translation { - font-size: 1.6rem; - font-weight: 400; -} - -@keyframes lyricWaitingLine { - 0% { - opacity: 0.25; - transform: scale(0.85); - } - 50% { - opacity: 1; - transform: scale(1); - } - 100% { - opacity: 0.25; - transform: scale(0.85); - } -} - -@keyframes dotOpacity { - 0% { - opacity: 0.25; - } - 100% { - opacity: 1; - } -} - - -.lyric-line2:before { - background: var(--keyColor); - content: ''; - width: 0%; - height: 6px; - position: absolute; - bottom: -8px; - left: 0; - border-radius: 10px; - z-index: -1; - transition: width var(--bgSpeed); -} - -.lyric-line2.active:before { - width: 100%; - transition: width var(--bgSpeed); -} - -.player_top { - height: 100%; -} - -/* Cider */ - -.reload-btn { - background: rgb(86 86 86 / 52%); - border-radius: 100%; - width: 32px; - height: 32px; - border: 0px; - appearance: none; - display: flex; - justify-content: center; - align-items: center; -} - -.reload-btn:hover { - background: rgb(86 86 86 / 80%); - cursor: pointer; -} - -.reload-btn>svg { - height: 50%; - color: #eee; -} - -.wr-btn { - font-family: inherit; - appearance: none; - border:0px; - border-radius: 6px; - padding: 8px; - font-weight: 600; - background: rgb(80 80 80 / 70%); - color: white; -} - -/* Album / Playlist Page */ -.playlist-page { - padding: 0px; -} - -.playlist-page .well { - background: rgba(200, 200, 200, 0.05); - border-radius: 10px; - padding: var(--contentInnerPadding); - box-shadow: rgb(0 0 0 / 8%) 0px 0px 0px 1px; - margin-top: 16px; -} - -.playlist-page .playlist-body { - padding: var(--contentInnerPadding); -} - -.playlist-display { - padding: var(--contentInnerPadding); - min-height: 300px; -} - -.playlist-display .playlist-info{ - flex-shrink: unset; - display: flex; - flex-flow: column; - justify-content: flex-end; -} - -.playlist-display .playlist-info .playlist-name { - font-weight: 700; - font-size: 1.6rem; - margin-bottom: 6px; - margin-right: 6px; - flex-shrink: unset; - -} -.playlist-display .playlist-info .playlist-artist { - font-weight: 500; - font-size: 1.6rem; - margin-bottom: 6px; - margin-right: 6px; - flex-shrink: unset; -} -.playlist-display .playlist-info .playlist-desc { - box-sizing: border-box; - font-size: 14px; - flex-shrink: unset; - margin-right: 5px; - max-height: 100px; - position: relative; -} -.playlist-display .playlist-info .playlist-desc .content { - height: 100px; - -webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); -} - -.playlist-display .playlist-info .playlist-desc .more-btn { - appearance: none; - position: absolute; - right: 0; - bottom: 0; - padding: 0 5px; - font-size: 14px; - color: var(--keyColor); - background-color: transparent; - border: 0px; - cursor: pointer; - width: 100%; - height: 100%; - overflow: hidden; - display: flex; - justify-content: flex-end; - align-items: flex-end; - font-weight: 600; - font-family: inherit; - text-transform: uppercase; -} - -.playlist-display .playlist-info .playlist-desc-expanded { - box-sizing: border-box; - font-size: 14px; - position: relative; -} - -.playlist-display .playlist-info .playlist-desc-expanded .more-btn { - appearance: none; - position: absolute; - right: 0; - bottom: 0; - padding: 0 5px; - font-size: 14px; - color: var(--keyColor); - background-color: transparent; - border: 0px; - cursor: pointer; - width: 100%; - height: 100%; - overflow: hidden; - display: flex; - justify-content: flex-end; - align-items: flex-end; - font-weight: 600; - font-family: inherit; - text-transform: uppercase; -} - -.playlist-time { - font-size: 0.9em; - margin: 6px; - opacity: 0.7; -} - -/* Artist Page */ - -.artist-page { - padding: 0px; -} - -.artist-page .artist-header { - background: var(--keyColor); - color: white; - display: flex; - align-items: center; - justify-content: space-between; - min-height: 300px; - position: relative; -} - -.artist-page .artist-image { - width: 200px; - height: 200px; - margin: 32px; -} - -.artist-page .artist-body { - padding: var(--contentInnerPadding); -} - -.artist-page .well { - background: rgba(200, 200, 200, 0.05); - border-radius: 10px; - padding: var(--contentInnerPadding); - box-shadow: rgb(0 0 0 / 8%) 0px 0px 0px 1px; - margin-top: 16px; -} - -.artist-page .showmoreless { - font-family: inherit; - font-size: 16px; - font-weight: 500; - background: transparent; - border: 0px; - border-radius: 6px; - appearance: none; - color: var(--keyColor); - padding: 8px 12px; - cursor: pointer; - margin-top: 12px; - float: right; -} - -.artist-page .showmoreless:hover { - background: rgb(200 200 200 / 10%); -} - - -/* Artist Page End */ - -.text-overflow-elipsis { - display: -webkit-box; - min-width: 0px; - overflow: hidden; - text-overflow: ellipsis; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; -} - - -.mediaitem-artwork { - border-radius: var(--mediaItemRadius); - overflow: hidden; - flex: 0 0 auto; - position:relative; - width: 100%; - height: 100%; -} -.mediaitem-artwork .animatedartwork-view-box .animated{ - position: absolute; - top: 0px; - width: 100%; - height: 100%; -} - -.mediaitem-artwork .animatedartwork-view-box .animated > video { - width: 100%; - height: 100%; -} - -.mediaitem-artwork .animatedartwork-view-box{ - position: absolute; - top: 0px; - width: 100%; - height: 100%; -} - -.artist-header .animated{ - width: 100%; - height: 100%; - align-self: center; - position: absolute; - overflow: hidden; - box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; -} - -.artist-header .row .col.flex-center{ - z-index: 4; -} - -.artist-header .animated > video { - overflow: hidden; - height: 100%; - width: 100%; - min-height: 56.25vw; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - -} - -.mediaitem-artwork.rounded { - border-radius: 100%; -} - -.mediaitem-artwork::after { - content: ""; - box-shadow: var(--mediaItemShadow); - z-index: 1; - width:100%; - height:100%; - position: absolute; - top:0; - left:0; - border-radius: inherit; -} - -.mediaitem-artwork.rounded::after { - border-radius: 100%; -} - -.mediaitem-artwork>img { - width: 100%; - height: 100%; - object-fit: cover; - image-rendering: -webkit-optimize-contrast; -} - -/* horizontal media scroller */ -.cd-hmedia-scroller { - margin: 0 auto; - display: flex; - flex-flow: row; - overflow-x: scroll; -} - -.cd-hmedia-scroller::-webkit-scrollbar-thumb{ - box-shadow: none; -} - -.cd-hmedia-scroller:hover::-webkit-scrollbar-thumb{ - box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%); -} - -/* mediaitem-list-item */ -.cd-mediaitem-list-item { - width: 100%; - height: 60px; - display: flex; - flex: 0 0 auto; - flex-direction: row; - font-size: 14px; - justify-content: center; - align-items: center; - cursor: pointer; - border-bottom: 1px solid rgb(200 200 200 / 10%); -} - -.cd-mediaitem-list-item:hover { - background: rgb(200 200 200 / 10%); -} - -.cd-mediaitem-list-item .artwork { - height: 34px; - width: 34px; - border-radius: var(--mediaItemRadius); - object-fit: cover; - object-position: center; - flex: 0 0 auto; - background-repeat: no-repeat; - margin: 12px; - border: 0px; - outline: none; -} - -.cd-mediaitem-list-item .artwork.round { - border-radius: var(--mediaItemRadiusRound); -} - -.cd-mediaitem-list-item .info-rect { - width: 100%; -} - -.cd-mediaitem-list-item .title { - width: 100%; -} - -.cd-mediaitem-list-item .subtitle { - width: 90%; - font-size: 12px; - opacity: 0.7; -} - -.cd-mediaitem-list-item .duration { - min-width: 60px; - text-align: center; -} - -.cd-mediaitem-list-item .metainfo { - min-width: 145px; - text-align: center; -} - -.cd-mediaitem-list-item .content-rating { - text-transform: uppercase; - font-size: 10px; - border-radius: 3px; - background: rgb(200 200 200 / 15%); - width: 60px; - text-align: center; - padding: 5px; - margin-right: 12px; - flex: 0 0 auto; - font-weight: 500; - color: #ccc; -} - -.cd-mediaitem-list-item .isLibrary>button { - appearance: none; - border:0px; - background:transparent; - cursor:pointer; -} - -/* mediaitem-hrect */ -.cd-mediaitem-hrect { - background: rgb(255 255 255 / 18%); - width: 264px; - height: 100px; - display: inline-flex; - flex: 0 0 auto; - flex-direction: row; - font-size: 14px; - justify-content: center; - align-items: center; - border-radius: 6px; - cursor: pointer; -} - -.cd-mediaitem-hrect .artwork { - height: 70px; - width: 70px; - background: blue; - border-radius: var(--mediaItemRadius); - background: var(--artwork); - background-size: contain; - flex: 0 0 auto; - background-repeat: no-repeat; - margin: 18px; -} - -.cd-mediaitem-hrect .artwork.round { - border-radius: var(--mediaItemRadiusRound); -} - -.cd-mediaitem-hrect .info-rect { - width: 100%; -} - -.cd-mediaitem-hrect .title { - width: 100%; - text-align: center; -} - -.cd-mediaitem-hrect .subtitle { - width: 100%; - text-align: center; - font-size: 12px; -} - -/* mediaitem-square-sp */ -.cd-mediaitem-square-sp { - --spcolor: var(""); - width: 190px; - height: 250px; - display: inline-flex; - flex: 0 0 auto; - flex-direction: column; - font-size: 14px; - justify-content: flex-start; - align-items: center; - border-radius: 6px; - margin-left: 10px; - cursor: pointer; - background-color: var(--spcolor); -} - -.cd-mediaitem-square-sp:hover { - box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; -} - -.cd-mediaitem-square-sp .artwork { - height: 190px; - width: 190px; - background: blue; - border-top-left-radius: 6px; - border-top-right-radius: 6px; - background: var(--artwork); - background-size: cover; - flex: 0 0 auto; - margin: 6px; - margin-top: 0px; -} - -.artwork -{height: 190px; - width: 190px; - background: blue; - border-top-left-radius: 6px; - border-top-right-radius: 6px; - background: var(--artwork); - background-size: cover; - flex: 0 0 auto; - margin: 6px; - margin-top: 0px; -} - -.cd-mediaitem-square-sp .artwork:hover { - box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; -} - -.cd-mediaitem-square-sp .artwork.round { - border-radius: var(--mediaItemRadiusRound); -} - -.cd-mediaitem-square-sp .title { - width: 90%; - text-align: center; -} - -.cd-mediaitem-square-sp .subtitle { - width: 100%; - text-align: center; - font-size: 12px; -} - - -.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay { - z-index: 3; -} -.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay:hover { - opacity: 1; -} - -.cd-mediaitem-square-sp + .cd-mediaitem-square-large-overlay { - pointer-events: none; - -} - -.cd-mediaitem-square-sp:hover + .cd-mediaitem-square-large-overlay { - opacity: 1; - -} - -/* mediaitem-square-large */ -.cd-mediaitem-square-large { - width: 190px; - height: 250px; - display: inline-flex; - flex: 0 0 auto; - flex-direction: column; - font-size: 14px; - justify-content: flex-start; - align-items: center; - border-radius: 6px; - margin-left: 10px; - cursor: pointer; -} -.cd-mediaitem-square-large > * { - z-index: inherit; - -} - -/* .cd-mediaitem-square-large .artwork:hover { - box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; -} */ - -.cd-mediaitem-square-large .artwork { - height: 190px; - width: 190px; - background: blue; - border-top-left-radius: 6px; - border-top-right-radius: 6px; - background: var(--artwork); - background-size: cover; - flex: 0 0 auto; - margin: 6px; - margin-top: 0px; -} - -.cd-mediaitem-square-large-overlay{ - position: absolute; - width: 190px; - float: right; - height: 250px; - top: 0px; - margin: 10px; - margin-top: 0px; - opacity: 0; - -} - -.cd-mediaitem-square-large-overlay > * { - pointer-events: auto; - -} -.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay { - z-index: 3; -} -.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover { - opacity: 1; -} - -.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay { - pointer-events: none; - -} - -.cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay { - opacity: 1; - -} - - -.cd-mediaitem-square-large .artwork.round { - border-radius: var(--mediaItemRadiusRound); -} - -.cd-mediaitem-square-large .title { - width: 90%; - text-align: center; -} - -.cd-mediaitem-square-large .subtitle { - width: 100%; - text-align: center; - font-size: 12px; -} - -/* mediaitem-square */ -.cd-mediaitem-square { - width: 200px; - height: 190px; - display: inline-flex; - flex: 0 0 auto; - flex-direction: column; - font-size: 14px; - justify-content: center; - align-items: center; - border-radius: 6px; - cursor: pointer; -} - -.cd-mediaitem-square:hover { - background: rgb(200 200 200 / 10%); -} - -.cd-mediaitem-square .artwork { - height: 128px; - width: 128px; - background: blue; - border-radius: var(--mediaItemRadius); - background: var(--artwork); - background-size: cover; - box-shadow: var(--mediaItemShadow); - flex: 0 0 auto; - margin: 6px; -} - -.cd-mediaitem-square .artwork.round { - border-radius: var(--mediaItemRadiusRound); -} - -.cd-mediaitem-square .title { - width: 90%; - text-align: center; -} - -.cd-mediaitem-square .subtitle { - width: 100%; - text-align: center; - font-size: 12px; -} - - -.cd-btn-seeall { - background: transparent; - border: 0px; - color: var(--keyColor); - font-family: inherit; - font-size: 16px; - border-radius: 4px; - padding: 6px; -} - -.cd-btn-seeall:hover { - cursor: pointer; - background: rgb(200 200 200 / 10%) -} - -/* Cider */ - -/* Transitions */ -.wpfade-enter-active, -.wpfade-leave-active { - transition: opacity .1s var(--appleEase); -} - -.wpfade-enter, -.wpfade-leave-to { - opacity: 0; -} -/* Transitions End */ - -@media (prefers-color-scheme: light) { - :root { - /* */ - --gfx-closeBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6MjY6MjgtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI2OjI4LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6MjY6MjgtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PtPY89oAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEpJREFUGJWNkMENwDAIA1Gh3F7sP0Ty7xD5JgpU+OuTLVvMmQohhRTCnCEK8TpfBl9eBpcBu/HXcsAZ9FQjSrWqW2Pa95gzGofPBQZRG2fS0899AAAAAElFTkSuQmCC'); - --gfx-maxBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6MjU6NTItMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI1OjUyLTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6MjU6NTItMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PntJ23wAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEhJREFUGJVjYGBgmMzAwPCXgYHhPw78l4GBYTIjlKHHwMDwlAE7EGFgYLjJANUlgEMRDPxnIqAADoaKwn8MkCDABaShaogLcACWZRl4ajKVtAAAAABJRU5ErkJggg=='); - --gfx-restoreBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6MjY6NTMtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI2OjUzLTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6MjY6NTMtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PluKsJ0AAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGlJREFUGJWt0LEOgkAQhOFPShspSWyvMPFxKaDh0XgOq8tZuCqBIzRMMsXmn51slr9GlJVfmHC9LII3LGfoomCGHrnSloM9olnGE+3KKVgbi0oMNX1ZaXYCG50aLBj4HJwqgXuwn47eA95vgSGy6zr7OwAAAABJRU5ErkJggg=='); - --gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAaxaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pg0KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPg0KICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPg0KICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDItMTdUMTM6MDA6MzJaIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1vZGlmeURhdGU9IjIwMjAtMDItMTdUMTM6MDA6MzJaIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmEzMDAxZTFhLTI5MTktZTQ0OS1iOTRjLWMyMTIyNDhhOWY4YSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjc4N2Y3OTljLTRiMTEtZTU0YS1iMjBkLTY4NjE3ZWQ5YzVlMiIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciPg0KICAgICAgPHhtcE1NOkhpc3Rvcnk+DQogICAgICAgIDxyZGY6U2VxPg0KICAgICAgICAgIDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjc4N2Y3OTljLTRiMTEtZTU0YS1iMjBkLTY4NjE3ZWQ5YzVlMiIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgLz4NCiAgICAgICAgICA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ODVkMGVkYjAtZmQwMC1iNjRmLTllZmItYTJiNDU4NzA1YThhIiBzdEV2dDp3aGVuPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIiAvPg0KICAgICAgICA8L3JkZjpTZXE+DQogICAgICA8L3htcE1NOkhpc3Rvcnk+DQogICAgICA8cGhvdG9zaG9wOlRleHRMYXllcnM+DQogICAgICAgIDxyZGY6QmFnPg0KICAgICAgICAgIDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qShIiBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKEiIC8+DQogICAgICAgIDwvcmRmOkJhZz4NCiAgICAgIDwvcGhvdG9zaG9wOlRleHRMYXllcnM+DQogICAgPC9yZGY6RGVzY3JpcHRpb24+DQogIDwvcmRmOlJERj4NCjwveDp4bXBtZXRhPg0KPD94cGFja2V0IGVuZD0iciI/PmeGdrgAAAAVSURBVChTYxhOgBGI/0OYQx0wMAAAyp4BAZ26NiYAAAAASUVORK5CYII='); - } -} - -@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-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'); - } -} - - -#apple-music-video-container { - background: black; - position: absolute; - float: left; - display: none; - width: 100%; - height: calc(100% - var(--chromeHeight)); - bottom: 0; - z-index: 100000; -} - -#apple-music-video-player{ - position: absolute; - top: 50%; - width: 100%; - transform: translate(0, -50%); - height: 100%; -} - -#apple-music-video-player-controls{ - position: absolute; - z-index: 100001; - float: left; - width: 100%; - height: 100%; -} - -#apple-music-video-player-controls #player-exit{ - position: absolute; - z-index: 100001; - float: left; - width: 100%; - margin: 10px; - 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%; - background: rgb(255 255 255 / 50%); - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; -} - -#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%; - background: rgb(255 255 255 / 50%); - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; -} - -#apple-music-video-player-controls #player-fullscreen>svg { - width: 50%; -} - -#apple-music-video-player-controls:hover{ - opacity: 1; -} - -img[src=""] { - text-indent: -10000px; -} - -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; -} - -[v-cloak] {display: none!important} diff --git a/src/renderer/style.less b/src/renderer/style.less index 21624bc5..32f70d68 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -664,7 +664,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .usermenu-container { - bottom: 66px; + top: 0px; #cmenu.container(); .usermenu-body { @@ -995,18 +995,26 @@ input[type=range].web-slider::-webkit-slider-runnable-track { height: 100%; } -.app-chrome .app-chrome-item > .app-title { - width: 100px; +.app-chrome .app-chrome-item > .app-mainmenu { + width: 116px; font-size: 13px; - background: url("./AppHeader.svg"); - background-size: 95px; + background: url("./assets/AppChromeBtn.svg"); + background-size: contain; background-repeat: no-repeat; background-position: center; - height: 100%; + height: 70%; margin-right: 16px; margin-left: 16px; - image-rendering: -webkit-optimize-contrast; - -webkit-app-region: drag; + border: 0px; + border-radius: 6px; + + &:hover { + background-color: var(--selected); + } + + &:active, &.active { + background-color: var(--selected-click); + } } .app-chrome .app-chrome-item > .window-controls { diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs index ebfa0ac0..69408e2e 100644 --- a/src/renderer/views/main.ejs +++ b/src/renderer/views/main.ejs @@ -50,7 +50,10 @@
-
+
+ @click="drawer.open = false; miniPlayer(true)">
@@ -205,21 +209,26 @@
Cider
- +
{{$root.getLz('term.appleMusic')}}
- - + - +
{{$root.getLz('term.library')}}
- @@ -227,8 +236,10 @@ page="library-albums"> - - + +
{{ $root.getLz('term.playlists') }} @@ -239,6 +250,34 @@
+
-
+
-
@@ -302,39 +342,13 @@
-
-
@@ -360,8 +374,8 @@ - -