From b9dda9890ab30f9729f89260e0c05185d47f3e03 Mon Sep 17 00:00:00 2001 From: Maikiwi Date: Sun, 13 Feb 2022 21:20:39 -0800 Subject: [PATCH 1/3] wipe butt when not using it --- src/renderer/audio/audio.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/renderer/audio/audio.js b/src/renderer/audio/audio.js index 8a972a93..b9e09bdf 100644 --- a/src/renderer/audio/audio.js +++ b/src/renderer/audio/audio.js @@ -125,7 +125,6 @@ var CiderAudio = { let LLPW_Q = [5, 1, 3.536, 1.25, 8.409, 1.25, 14.14, 7.071, 5, 0.625, 16.82, 20, 20, 20, 28.28, 28.28, 28.28, 20, 33.64, 33.64, 10, 28.28, 7.071, 3.856]; let LLPW_GAIN = [0.38, -1.81, -0.23, -0.51, 0.4, 0.84, 0.36, -0.34, 0.27, -1.2, -0.42, -0.67, 0.81, 1.31, -0.71, 0.68, -1.04, 0.79, -0.73, -1.33, 1.17, 0.57, 0.35, 6.33]; let LLPW_FREQUENCIES = [16.452, 24.636, 37.134, 74.483, 159.54, 308.18, 670.21, 915.81, 1200.7, 2766.4, 2930.6, 4050.6, 4409.1, 5395.2, 5901.6, 6455.5, 7164.1, 7724.1, 8449, 10573, 12368, 14198, 17910, 18916]; - CiderAudio.audioNodes.llpw = []; for (i = 0; i < LLPW_FREQUENCIES.length; i++) { CiderAudio.audioNodes.llpw[i] = CiderAudio.context.createBiquadFilter(); CiderAudio.audioNodes.llpw[i].type = 'peaking'; // 'peaking'; @@ -152,8 +151,6 @@ var CiderAudio = { let VIBRANTBASSBANDS = app.cfg.audio.vibrantBass.frequencies; let VIBRANTBASSGAIN = app.cfg.audio.vibrantBass.gain; let VIBRANTBASSQ = app.cfg.audio.vibrantBass.Q; - - CiderAudio.audioNodes.vibrantbassNode = []; for (i = 0; i < VIBRANTBASSBANDS.length; i++) { CiderAudio.audioNodes.vibrantbassNode[i] = CiderAudio.context.createBiquadFilter(); @@ -174,8 +171,8 @@ var CiderAudio = { hiererchical_unloading: function (){ try {CiderAudio.audioNodes.spatialNode.output.disconnect();} catch(e){} try {CiderAudio.audioNodes.gainNode.disconnect();} catch(e){} - try {for (var i of CiderAudio.audioNodes.llpw){i.disconnect();}} catch(e){} - try {for (var i of CiderAudio.audioNodes.vibrantbassNode){i.disconnect();}} catch(e){} + try {for (var i of CiderAudio.audioNodes.llpw){i.disconnect();} CiderAudio.audioNodes.llpw = []} catch(e){} + try {for (var i of CiderAudio.audioNodes.vibrantbassNode){i.disconnect();} CiderAudio.audioNodes.vibrantbassNode = []} catch(e){} console.log("[Cider][Audio] Finished hierarchical unloading"); From 7a45d1c6e7c9a9db362062c72b7fb9b18eef6ca0 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Sun, 13 Feb 2022 21:34:25 -0800 Subject: [PATCH 2/3] some CSS cleanup --- src/renderer/less/elements.less | 1752 ++++++++++++++++++ src/renderer/less/helpers.less | 396 +++++ src/renderer/less/pages.less | 749 ++++++++ src/renderer/style.less | 2925 +------------------------------ 4 files changed, 2907 insertions(+), 2915 deletions(-) create mode 100644 src/renderer/less/elements.less create mode 100644 src/renderer/less/helpers.less create mode 100644 src/renderer/less/pages.less diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less new file mode 100644 index 00000000..f71dc236 --- /dev/null +++ b/src/renderer/less/elements.less @@ -0,0 +1,1752 @@ +// Form + +.md-select { + padding: 6px; + border-radius: 6px; + border: 1px solid rgba(200, 200, 200, 0.1); + border-top: 1px solid rgba(100, 100, 100, 0.5); + font-family: inherit; + font-size: 14px; + background: rgba(100, 100, 100, 0.25); + color: #eee; + + option { + font-size: 1em; + font-family: inherit; + padding: 8px 16px; + background: #404040; + } + + optgroup { + background: #2c2c2c; + } + + &:focus { + outline: solid 1px var(--selected); + } +} + +// Buttons +.md-btn { + font-family: inherit; + background: rgb(100 100 100 / 25%); + padding: 8px 14px; + border-radius: 6px; + font-size: 14px; + border: 1px solid rgba(100, 100, 100, 0.35); + border-top: 1px solid rgba(100, 100, 100, 0.5); + color: #eee; + white-space: nowrap; + transition: transform 0.2s var(--appleEase), box-shadow 0.2s var(--appleEase); + + &.md-btn-block { + display: block; + width: 100%; + } + + &.md-btn-glyph { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + } + + &.md-btn-primary { + background: #ff2b52a6; + color: white; + border: 1px solid rgb(220 53 69 / 25%); + border-top: 1px solid rgb(220 53 69 / 50%); + } + + &.md-btn-small { + padding: 6px 8px; + font-size: 13px; + } + + &:hover { + filter: brightness(125%); + } + + &:active { + filter: brightness(75%); + transform: scale(0.98); + transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); + } + + &.md-btn-icon { + display: inline-flex; + vertical-align: middle; + justify-content: center; + + > img { + margin: 0px 16px 0px 0px; + pointer-events: none; + } + + > .md-btn-text { + margin: 0px; + } + } +} + +.btn-group { + display: inline-flex; + justify-content: center; + align-items: center; + + > .md-btn { + border-radius: 0px; + width: 100%; + } + + > .md-btn:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + + > .md-btn:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + + > .md-btn:not(:first-child):not(:last-child) { + border-radius: 0px; + } +} + + +.md-close-btn { + -webkit-mask-image: url("ameres://icons/webui/close.svg"); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + background-color: white; + opacity: 0.75; + -webkit-mask-size: contain; + height: 18px; + width: 18px; +} + +.md-ico-play { + content: url("./assets/play.svg"); + width: 10px; + height: 12px; + margin-right: 1px; + align-self: center; +} + +.md-ico-shuffle { + content: url("./assets/shuffle.svg"); + width: 1em; + height: 1em; + margin-right: 1px; + margin-bottom: -2px; + align-self: center; +} + +.md-ico-remove { + content: url("./assets/feather/x-circle-white.svg"); + width: 16px; + height: 16px; + margin-right: 1px; + margin-bottom: -1.5px; + align-self: center; +} + +.md-ico-add { + content: url("./assets/feather/plus-circle-white.svg"); + width: 1em; + height: 1em; + margin-right: 1px; + margin-bottom: -1.5px; + align-self: center; +} + +.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; +} + +.cd-btn-seeall { + background: transparent; + border: 0px; + color: var(--keyColor); + font-family: inherit; + font-weight: 500; + font-size: 16px; + border-radius: 4px; + padding: 6px; + + &:hover { + cursor: pointer; + background: rgb(200 200 200 / 10%) + } +} + + +// Media Item Elements + +.mediaitem-artwork { + border-radius: var(--mediaItemRadius); + overflow: hidden; + flex: 0 0 auto; + position: relative; + width: 100%; + height: 100%; + background-image: url("https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg"); + background-size: cover; + background-position: center; + + .animatedartwork-view-box { + position: absolute; + top: 0px; + width: 100%; + height: 100%; + + .animated { + position: absolute; + top: 0px; + width: 100%; + height: 100%; + + video { + width: 100%; + height: 100%; + } + } + } + + &.rounded { + border-radius: 100%; + + &::after { + border-radius: 100%; + } + } + + &::after { + content: ""; + box-shadow: var(--mediaItemShadow); + z-index: 1; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + border-radius: inherit; + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + image-rendering: -webkit-optimize-contrast; + pointer-events: none; + } + + &.no-shadow { + box-shadow: none; + + &::after { + display: none; + } + } + + &.subtle-shadow { + box-shadow: var(--mediaItemShadow-ShadowSubtle); + } + + &.shadow { + box-shadow: var(--mediaItemShadow-Shadow); + } +} + +/* queue item */ +.cd-queue-item { + border-bottom: 1px solid rgb(200 200 200 / 10%); + padding: 8px; + + .row, + .col { + padding: 0px; + margin: 0px; + } + + .artwork { + width: 32px; + height: 32px; + flex: 0 0 auto; + } + + &.selected { + background: var(--selected); + } + + &:active { + background: var(--selected-click); + color: #eee; + } + + .queue-info { + display: flex; + flex-direction: column; + + .queue-title { + font-size: 14px; + } + + .queue-subtitle { + font-size: 13px; + opacity: 0.85; + } + } +} + +/* horizontal media scroller */ +.cd-hmedia-scroller { + &::-webkit-scrollbar-thumb { + box-shadow: none; + } + + &:hover::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%); + } + + &.hmedia-scroller-card { + .mediaitem-card { + margin: 16px; + } + } +} + +/* 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-between; + align-items: center; + border-radius: var(--mediaItemRadius); + + .artwork { + height: 42px; + width: 42px; + border-radius: var(--mediaItemRadius); + object-fit: cover; + object-position: center; + flex: 0 0 auto; + background-repeat: no-repeat; + margin: 12px; + border: 0px; + outline: none; + position: relative; + overflow: hidden; + + .overlay-play { + background: rgba(0, 0, 0, 0.5); + opacity: 0; + appearance: none; + border: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0px; + z-index: 5; + cursor: pointer; + + &:hover { + opacity: 1; + } + + &:active { + background: var(--selected-click); + } + } + } + + .artwork.round { + border-radius: var(--mediaItemRadiusRound); + } + + .info-rect { + height: 100%; + display: flex; + flex-flow: column; + justify-content: center; + flex-grow: 1; + } + + .title { + width: 100%; + } + + .subtitle { + width: 90%; + font-size: .8em; + opacity: 0.7; + } + + .duration { + min-width: 60px; + text-align: center; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .metainfo { + min-width: 145px; + text-align: center; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .explicit-icon { + background-image: url("./assets/explicit.svg"); + height: 12px; + width: 36px; + filter: contrast(0); + background-repeat: no-repeat; + } + + /* CSS.gg + */ + @keyframes load-bar { + 10% { + box-shadow: inset 0 -4px 0 + } + 20% { + box-shadow: inset 0 -10px 0 + } + 30% { + box-shadow: inset 0 -12px 0 + } + 40% { + box-shadow: inset 0 -8px 0 + } + 50% { + box-shadow: inset 0 -4px 0 + } + 60% { + box-shadow: inset 0 -6px 0 + } + 80% { + box-shadow: inset 0 -12px 0 + } + 90% { + box-shadow: inset 0 -6px 0 + } + to { + box-shadow: inset 0 -2px 0 + } + } + + .loadbar-sound, + .loadbar-sound::after, + .loadbar-sound::before { + animation: load-bar 1.3s ease infinite alternate; + box-sizing: border-box; + width: 3px; + height: 28px; + box-shadow: inset 0 -12px 0; + } + + .loadbar-sound { + margin-left: 22px; + margin-top: -16px; + position: relative; + transform: scale(var(--load-bar, 1)); + color: var(--keyColor); + display: block; + } + + .loadbar-sound::after, + .loadbar-sound::before { + content: ""; + position: absolute; + bottom: 0 + } + + .loadbar-sound::before { + left: -4.5px; + animation-delay: -2.4s + } + + .loadbar-sound::after { + right: -4.2px; + animation-delay: -3.7s + } + + .isLibrary { + flex: 0 0 auto; + width: 40px; + text-align: center; + + button { + appearance: none; + border: 0px; + background: transparent; + cursor: pointer; + filter: contrast(0.8); + } + } + + &:hover { + background: rgb(200 200 200 / 10%); + box-shadow: var(--mediaItemShadow); + + .overlay-play { + opacity: 1; + } + } + + &.mediaitem-selected { + background: var(--selected); + box-shadow: var(--mediaItemShadow); + } + + + &:active { + background: var(--selected-click); + box-shadow: var(--mediaItemShadow); + color: #eee; + } + + // list item compact + &.compact { + height: 40px; + font-size: 13px; + + .artwork { + display: none; + } + + .info-rect { + padding-left: 1em; + } + } +} + +/* 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; + + .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; + } + + .artwork.round { + border-radius: var(--mediaItemRadiusRound); + } + + .info-rect { + width: 100%; + } + + .title { + width: 100%; + text-align: center; + } + + .subtitle { + width: 100%; + text-align: center; + font-size: 12px; + } +} + +/* mediaitem-square-sp */ +.cd-mediaitem-square-sp { + --spcolor: var(""); + width: 190px; + height: 245px; + 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); + + .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; + + &.round { + border-radius: var(--mediaItemRadiusRound); + } + + &:hover { + box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; + } + } + + .title { + width: 90%; + text-align: center; + } + + .subtitle { + width: 100%; + text-align: center; + font-size: 12px; + } + + > .cd-mediaitem-square-large-overlay { + z-index: 3; + + &:hover { + opacity: 1; + } + } + + + .cd-mediaitem-square-large-overlay { + pointer-events: none; + } + + &:hover + .cd-mediaitem-square-large-overlay { + opacity: 1; + + } + + &:hover { + box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; + } +} + + +/* 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; + + > * { + z-index: inherit; + } +} + +.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-mvview */ + +/* mediaitem-mvview */ +.cd-mediaitem-mvview { + width: 300px; + 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; + + > * { + z-index: inherit; + } +} + +.cd-mediaitem-mvview .artwork { + height: 172px; + width: 300px; + 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-mvview-overlay { + position: absolute; + width: 300px; + float: right; + height: 250px; + top: 0px; + margin: 10px; + margin-top: 0px; + opacity: 0; + +} + +.cd-mediaitem-mvview-overlay > * { + pointer-events: auto; + +} + +.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay { + z-index: 3; +} + +.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay:hover { + opacity: 1; +} + +.cd-mediaitem-mvview + .cd-mediaitem-mvview-overlay { + pointer-events: none; + +} + +.cd-mediaitem-mvview:hover + .cd-mediaitem-mvview-overlay { + opacity: 1; + +} + + +.cd-mediaitem-mvview .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} + +.cd-mediaitem-mvview .title { + width: 90%; + text-align: center; +} + +.cd-mediaitem-mvview .subtitle { + width: 100%; + text-align: center; + font-size: 12px; +} + + +/* mediaitem-square */ +.cd-mediaitem-square { + width: 220px; + height: 238px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: 14px; + justify-content: center; + align-items: center; + border-radius: 6px; + + .artwork-container { + position: relative; + + .artwork { + height: 190px; + width: 190px; + background: blue; + border-radius: var(--mediaItemRadius); + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: 6px; + cursor: pointer; + + &.round { + border-radius: var(--mediaItemRadiusRound); + } + } + + .badge-container { + transition: opacity 0.1s var(--appleEase); + opacity: 1; + + .socialBadge { + width: 32px; + height: 32px; + position: absolute; + right: 14px; + bottom: 14px; + border-radius: 100%; + overflow: hidden; + z-index: 2; + pointer-events: none; + } + } + + > .play-btn, + > .menu-btn { + opacity: 0; + appearance: none; + padding: 0px; + border: 0px; + width: 30px; + height: 30px; + border-radius: 50%; + background: rgba(50, 50, 50, 0.7); + cursor: pointer; + transition: opacity 0.1s var(--appleEase); + + :hover { + border-radius: 50%; + background: rgba(250, 0, 0, 0.7); + } + } + + > .play-btn { + position: absolute; + bottom: 14px; + left: 14px; + z-index: 2; + + } + + > .menu-btn { + position: absolute; + bottom: 14px; + right: 14px; + z-index: 2; + } + + &:hover { + > .badge-container { + opacity: 0; + } + + > .play-btn, + > .menu-btn { + opacity: 1; + } + } + } + + .info-rect { + width: 90%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + + .title { + width: 100%; + text-align: center; + display: flex; + align-content: center; + justify-content: center; + } + + .subtitle { + width: 100%; + text-align: center; + font-size: 12px; + } + + &.mediaitem-video { + height: 200px; + width: 240px; + + .artwork { + height: 120px; + width: 212px; + } + } + + &.mediaitem-brick { + height: 200px; + width: 240px; + + .artwork { + height: 123px; + width: 220px; + } + } + + &.mediaitem-small { + width: 140px; + height: 180px; + + .artwork { + height: 128px; + width: 128px; + } + } + + &.mediaitem-card { + background: #ccc; + background: var(--spcolor); + height: 298px; + width: 230px; + max-width: 250px; + max-height: 500px; + overflow: hidden; + position: relative; + border-radius: calc(var(--mediaItemRadius) * 2); + box-shadow: var(--mediaItemShadow-ShadowSubtle); + + .artwork { + width: 230px; + height: 230px; + overflow: hidden; + border-radius: 0px; + margin: 0; + + .mediaitem-artwork { + border-radius: 0px; + + &::after { + box-shadow: unset; + } + } + } + + .info-rect-card { + padding: 10px 10px 14px; + position: relative; + width: 100%; + + &::before { + background: var(--bgartwork); + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; + background-size: cover; + background-position: bottom; + z-index: 0; + opacity: 1; + filter: brightness(0.5) blur(50px) saturate(180%); + } + } + + .title { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 0.9em; + font-weight: 500; + z-index: 1; + } + + .subtitle { + height: 100%; + justify-content: center; + align-items: center; + font-size: 0.75em; + width: 100%; + display: flex; + z-index: 1; + } + + &::after { + box-shadow: var(--mediaItemShadow); + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + pointer-events: none; + border-radius: inherit; + } + } +} + +/* mediaitem-square */ +.albums-square-containeru > * > .cd-mediaitem-square { + --frame: max(220px, 15vw); + width: var(--frame); + height: calc(var(--frame) * 13 / 11); + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: calc(var(--frame) / 220 * 14); + justify-content: center; + align-items: center; + border-radius: calc(var(--frame) / 220 * 6); + + .artwork-container { + position: relative; + + .artwork { + height: calc(var(--frame) * 19 / 22); + width: calc(var(--frame) * 19 / 22); + background: blue; + border-radius: var(--mediaItemRadius); + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: calc(var(--frame) / 220 * 6); + cursor: pointer; + + &.round { + border-radius: var(--mediaItemRadiusRound); + } + } + + > .play-btn, + > .menu-btn { + opacity: 0; + appearance: none; + padding: 0px; + border: 0px; + width: calc(var(--frame) / 220 * 30); + height: calc(var(--frame) / 220 * 30); + border-radius: 50%; + background: rgba(50, 50, 50, 0.7); + cursor: pointer; + backdrop-filter: blur(32px) saturate(180%); + transition: opacity 0.1s var(--appleEase); + } + + > .play-btn { + position: absolute; + bottom: calc(var(--frame) / 220 * 14); + left: calc(var(--frame) / 220 * 14); + z-index: 2; + } + + > .menu-btn { + position: absolute; + bottom: calc(var(--frame) / 220 * 14); + right: calc(var(--frame) / 220 * 14); + z-index: 2; + } + + &:hover { + + > .play-btn, + > .menu-btn { + opacity: 1; + } + } + } + + + .title { + width: 90%; + text-align: center; + } + + .subtitle { + width: 100%; + text-align: center; + font-size: calc(var(--frame) / 220 * 12); + } + + &.mediaitem-video { + height: calc(var(--frame) / 220 * 200); + width: calc(var(--frame) / 220 * 240); + + .artwork { + height: calc(var(--frame) / 220 * 120); + width: calc(var(--frame) / 220 * 212); + } + } + + &.mediaitem-brick { + height: calc(var(--frame) / 220 * 200); + width: calc(var(--frame) / 220 * 240); + + .artwork { + height: calc(var(--frame) / 220 * 123); + width: calc(var(--frame)); + } + } +} + + +.listitem-horizontal { + .cd-mediaitem-list-item { + width: 350px; + height: 60px; + } +} + +.mediaitem-list-item__grid { + background: rgba(200, 200, 200, 0.05); + border-radius: 10px; + padding: var(--contentInnerPadding); + box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; + width: 100%; + + .cd-mediaitem-list-item { + width: 350px; + height: 60px; + } + + &::-webkit-scrollbar { + display: none; + } + + &:hover::-webkit-scrollbar { + display: initial; + + } +} + +// Graphics + +// sidebar icon +.svg-icon { + --color: #aaa; + --url: url("./assets/feather/share.svg"); + -webkit-mask-image: var(--url); + -webkit-mask-size: cover; + height: 18px; + width: 18px; + background: var(--color); +} + +.sidebar-icon { + width: 18px; + height: 18px; + margin-right: 8px; + + > .svg-icon { + width: 100%; + height: 100%; + --color: #aaa; + } + + > svg { + width: 100%; + height: 100%; + color: #aaa; + } +} + + +/* Switch Checkbox */ +input[type=checkbox][switch] { + width: 38px; + appearance: none; + border-radius: 32px; + height: 24px; + zoom: 1; + top: 0; + cursor: pointer; + left: 0; + position: relative; + transform: scale(1); + background: rgb(142 142 147 / 100%); + padding: 0; + margin: 0; +} + +input[type=checkbox][switch]:focus, +input[type=checkbox][switch]:active { + outline: none; +} + +input[type=checkbox][switch]:checked { + background: var(--keyColor); + border: 0 solid var(--keyColor); + mix-blend-mode: unset; + + &:hover { + background: var(--keyColor-rollover); + } + + &:active { + background: var(--keyColor-pressed); + } +} + +input[type=checkbox][switch]::before { + background: white; + width: 26px; + height: 26px; + top: -1px; + left: -1px; + position: absolute; + content: ' '; + border-radius: 32px; + transition: .10s left var(--appleEase); + transform: scale(.75); +} + + +input[type=checkbox][switch]:checked::before { + background: white; + top: -1px; + left: 13px; + transition: .10s left var(--appleEase); + transform: scale(.75); +} + +input[type=checkbox][switch]:disabled::before { + opacity: .5; +} + +input[type=checkbox][switch]:active::before { + left: 13px; +} + +input[type=checkbox][switch]:checked:active::before { + left: -1px; +} + +/* End Switch Checkbox */ + + + +.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; + opacity: 0.70; +} + +.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 / 25%); +} + +.playback-button--small.search { + background-image: url("./assets/search.svg"); +} + +.playback-button--small.cast { + background-image: url("./assets/cast_white.svg"); +} + +.playback-button--small.miniplayer { + background-image: url("./assets/pip.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: rgb(200 200 200 / 25%); + background-image: url("./assets/repeatOne.svg"); +} + +.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.svg"); + opacity: 0.5; +} + +.player-volume-glyph.increase { + background-image: url("./assets/volume-2.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; + +} + + +.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; +} + +.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%; +} + +.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); +} \ No newline at end of file diff --git a/src/renderer/less/helpers.less b/src/renderer/less/helpers.less new file mode 100644 index 00000000..cdd1584f --- /dev/null +++ b/src/renderer/less/helpers.less @@ -0,0 +1,396 @@ + +.modal-fullscreen { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); + z-index: 1000; + + .modal-window { + background: #333; + border-radius: 10px; + box-shadow: var(--mediaItemShadow-Shadow); + display: flex; + flex-flow: column; + max-height: 500px; + max-width: 360px; + background: #121212; + width: 100%; + position: relative; + + &:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + box-shadow: var(--mediaItemShadow); + z-index: 1; + border-radius: inherit; + } + + .modal-header { + width: 100%; + padding: 6px; + } + + .modal-content { + width: 100%; + height: 100%; + overflow: hidden; + overflow-y: overlay; + } + + .modal-footer { + } + } +} + +.spatialproperties-panel { + .modal-window { + height: 700px; + max-height: 700px; + width: 800px; + max-width: 800px; + overflow: hidden; + + .info-header { + padding-left: 12px; + } + + .visual-container { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .visual { + position: relative; + height: 250px; + width: 300px; + display: inline-flex; + align-items: flex-end; + justify-content: center; + filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%)); + margin: 0 auto; + + .face { + position: absolute; + width: calc(12px * 6); + height: calc(12px * 6); + border-radius: 6px; + transform: rotateX(60deg) rotateZ(-45deg); + transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; + } + + .listener { + position: absolute; + width: 32px; + height: 32px; + border-radius: 6px; + transform: rotateX(60deg) rotateZ(-45deg); + transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; + background: white; + color: black; + z-index: 2; + } + + .audiosource { + position: absolute; + width: 32px; + height: 32px; + border-radius: 6px; + transform: rotateX(60deg) rotateZ(-45deg); + transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; + background: yellow; + z-index: 2; + } + + .face:nth-of-type(1) { + background: linear-gradient(45deg, #28223a, #1f2038); + z-index: 1; + } + + .face:nth-of-type(2) { + background: linear-gradient(45deg, #7d53ad, #5763ff); + transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px); + opacity: 0.7; + z-index: 3; + } + } + + .modal-header { + padding: 16px; + position: relative; + overflow: hidden; + + .modal-title { + text-align: center; + } + + .close-btn { + width: 50px; + height: 100%; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; + + &:hover { + background-color: rgb(196, 43, 28) + } + } + } + } +} + +.addtoplaylist-panel { + .modal-window { + max-height: 600px; + max-width: 400px; + background: rgb(18 18 18 / 90%); + overflow: hidden; + backdrop-filter: blur(16px) saturate(180%); + + .modal-header { + padding: 16px; + position: relative; + + .modal-title { + text-align: center; + } + + .close-btn { + width: 50px; + height: 100%; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; + + &:hover { + background-color: rgb(196, 43, 28) + } + } + } + + .modal-search { + width: 100%; + padding: 0px 16px; + position: relative; + } + + .playlist-item { + appearance: none; + border: 0px; + text-align: left; + width: 100%; + margin: 0; + display: flex; + background: rgba(32, 32, 32, 0.46); + color: #eee; + font-family: inherit; + font-size: 0.98em; + padding: 6px 12px; + align-items: center; + flex-flow: row; + + .icon { + pointer-events: none; + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 6px; + } + + .name { + } + + &:hover { + background: var(--selected); + } + + &:active { + background: var(--selected-click); + } + + &.focused { + background: var(--keyColor); + } + } + + .playlist-item:last-child { + border-bottom: 0px; + } + } +} + +.menu-panel { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 100001; + display: flex; + justify-content: center; + align-items: center; + -webkit-app-region: no-drag; + + .menu-header-body { + padding: 6px; + display: flex; + background: rgb(200 200 200 / 10%); + + .menu-option-header { + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: var(--mediaItemRadius); + appearance: none; + border: 0; + background: transparent; + + &.active { + .sidebar-icon > .svg-icon { + --color: var(--keyColor); + } + } + + &:hover { + background: var(--selected); + } + + &:active { + background: var(--selected-click); + } + } + } + + .menu-panel-body { + display: flex; + flex-flow: column; + background: rgb(38 38 38); + position: relative; + min-width: 200px; + box-shadow: var(--ciderShadow-Generic); + border-radius: var(--mediaItemRadius); + overflow: hidden; + font-size: 14px; + + .menu-option { + text-align: left; + display: flex; + width: 100%; + padding: 12px 16px; + appearance: none; + border: 0px; + font: inherit; + background: transparent; + color: inherit; + + &:hover { + background: var(--selected); + } + + &:active { + background: var(--selected-click); + } + } + } + + + .menu-header-text { + margin: 18px 6px; + + .close-btn { + width: 50px; + height: 42px; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; + + &:hover { + background-color: rgb(196, 43, 28) + } + } + } + + .menu-body { + overflow: overlay; + height: 100%; + } + + .menu-footer { + width: 100%; + padding: 12px; + } +} + +.queue-panel { + height: 100%; + width: 100%; + display: flex; + flex-flow: column; + + .queue-header-text { + margin: 18px 6px; + } + + .queue-body { + overflow: overlay; + height: 100%; + } + + .queue-footer { + width: 100%; + padding: 12px; + } + + .autoplay { + background: rgb(200 200 200 / 15%); + display: flex; + justify-content: center; + appearance: none; + border: 0; + border-radius: 6px; + height: 32px; + width: 32px; + } + + .infinity { + content: url("./assets/infinity.svg"); + margin: auto; + } +} diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less new file mode 100644 index 00000000..2d30a480 --- /dev/null +++ b/src/renderer/less/pages.less @@ -0,0 +1,749 @@ +// Helpers +.content-inner { + position: absolute; + top: var(--navigationBarHeight); + left: 0; + padding: 32px; + width: 100%; + transition: zoom 1s; + zoom: 1; +} + +.content-inner.centered { + height: 100%; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; +} +// End Helpers + + +// Library - Songs page +.library-page { + padding: 0px; + + .library-header { + position: sticky; + top: 0; + left: 0; + border-bottom: 1px solid rgba(200, 200, 200, 0.05); + z-index: 6; + background: black; + padding: 0px 2em; + backdrop-filter: blur(32px); + background: rgba(0, 0, 0, 0.25); + top: var(--navigationBarHeight); + } + + .well { + margin: 2em; + } +} + +// Podcast Page +.content-inner.podcasts-page { + display: flex; + height: calc(100% - var(--navigationBarHeight)); + padding: 0px; + + .list-flat { + border-radius: 0px; + } + + .podcast-artwork { + width: 200px; + margin: 16px auto; + height: 200px; + } + + .podcasts-list { + height: 100%; + width: 280px; + background: rgb(200 200 200 / 10%); + overflow-y: overlay; + border-right: 1px solid var(--color2); + flex: none; + overflow-x: hidden; + + .podcast-list-header { + border-bottom: 1px solid var(--color2); + font-size: 0.7em; + padding: 6px; + background: #ffffff17; + text-transform: uppercase; + font-weight: 600; + opacity: 0.5; + } + + .podcasts-search { + padding: 10px; + position: sticky; + top: 0; + left: 0; + width: 100%; + border-bottom: 1px solid var(--color2); + z-index: 2; + background: #303030; + } + } + + .episodes-list { + height: 100%; + width: 100%; + background: rgb(200 200 200 / 6%); + overflow-y: overlay; + overflow-x: hidden; + + .episodes-inline-info { + padding: 14px 14px 0px 14px; + + .podcast-show-info { + display: flex; + justify-content: center; + flex-direction: column; + } + + .podcast-show-description { + margin: 32px 6px; + font-size: 0.8rem; + white-space: pre-wrap; + display: block; + } + + .podcast-artwork { + width: 120px; + margin: 0px auto; + height: 120px; + } + } + + .podcast-no-search-results { + text-align: center; + margin-top: 40px; + } + } + + .podcasts-details { + width: 300px; + flex: none; + background: rgb(255 255 255 / 5%); + overflow-y: overlay; + overflow-x: hidden; + top: 2%; + z-index: 2; + border-left: 1px solid var(--color2); + padding-bottom: 1em; + + .meta-btn { + font-size: 0.75em; + } + + .podcasts-details-header { + display: flex; + justify-content: end; + align-items: center; + position: sticky; + top: 0; + z-index: 2; + } + + .close-btn { + width: 50px; + height: 42px; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; + + &:hover { + background-color: rgb(196, 43, 28) + } + } + + .podcast-genre { + text-align: center; + margin: 6px; + font-size: 0.8em; + font-weight: 500; + opacity: 0.8; + } + + .podcast-metainfo { + text-align: center; + font-size: 0.7em; + opacity: 0.8; + } + + .podcast-header { + text-align: center; + } + + .podcast-play-btn { + width: 50%; + display: block; + margin: 0 auto; + } + + .podcast-description { + margin: 12px; + font-size: 0.75em; + white-space: pre-wrap; + display: block; + line-break: anywhere; + } + + + } + +} + +@media only screen and (max-width: 1230px) { + .content-inner.podcasts-page { + .podcasts-details { + height: 96%; + width: 300px; + flex: none; + background: rgb(20 20 20 / 97%); + overflow-y: overlay; + overflow-x: hidden; + position: absolute; + right: 2%; + top: 2%; + border-radius: 10px; + box-shadow: var(--ciderShadow-Generic); + z-index: 2; + } + } +} + +/* Album / Playlist Page */ +.playlist-page { + --bgColor: transparent; + padding: 0px; + //background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%); + top: 0; + padding-top: var(--navigationBarHeight); + + .playlist-body { + padding: var(--contentInnerPadding) 2em; + margin-top: -75px; + } + + .floating-header { + position: sticky; + top: 0; + left: 0; + border-bottom: 1px solid rgba(200, 200, 200, 0.05); + z-index: 6; + padding: 0px 1em; + backdrop-filter: blur(32px); + background: rgba(0, 0, 0, 0.25); + top: var(--navigationBarHeight); + transition: opacity 0.1s var(--appleEase); + } + + .playlist-display { + padding: var(--contentInnerPadding); + min-height: 300px; + position: relative; + + .artworkContainer { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: 0; + margin-top: calc(var(--navigationBarHeight) * -1); + margin-bottom: -10px; + padding: 0; + -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%); + opacity: .7; + animation: playlistArtworkFadeIn 1s var(--appleEase); + + .artworkMaterial > img { + filter: brightness(100%) blur(80px) saturate(100%) contrast(1); + object-position: center; + object-fit: cover; + width: 100%; + height: 100%; + transform: unset; + } + } + + .playlistInfo { + z-index: 1; + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + + > .row { + width: calc(100% - 32px); + } + + .playlist-info { + flex-shrink: unset; + display: flex; + flex-flow: column; + justify-content: flex-end; + + .playlist-name { + font-weight: 700; + font-size: 1.6rem; + margin-bottom: 6px; + margin-right: 6px; + flex-shrink: unset; + } + + .nameEdit { + font-weight: 700; + font-size: 1.6rem; + margin-bottom: 6px; + margin-right: 6px; + flex-shrink: unset; + background: transparent; + border: 0px; + color: inherit; + font-family: inherit; + } + + .playlist-artist { + font-size: 20px; + margin-bottom: 6px; + margin-right: 6px; + flex-shrink: unset; + } + + .playlist-desc { + box-sizing: border-box; + font-size: 14px; + flex-shrink: unset; + margin-right: 5px; + max-height: 100px; + position: relative; + + .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))); + } + + .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-desc-expanded { + box-sizing: border-box; + font-size: 14px; + position: relative; + + .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; + } + } + } + } + + + } + + .friends-info { + display: flex; + flex-flow: column; + + .badge-container { + display: flex; + flex-flow: wrap; + + .socialBadge { + width: 40px; + height: 40px; + border-radius: 100%; + overflow: hidden; + box-shadow: var(--mediaItemShadow-ShadowSubtle); + transition: transform .2s var(--appleEase); + margin: 6px; + + &:hover { + transform: scale(1.2); + } + } + } + + .friends-name { + text-align: center; + font-size: 0.9em; + margin: 8px; + } + } + + .playlist-time { + font-size: 0.9em; + margin: 6px; + opacity: 0.7; + } + + &.inline-playlist { + overflow: hidden; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 6; + position: sticky; + margin-top: calc(var(--navigationBarHeight) * -1); + + .floating-header { + opacity: 1; + top: 0px; + z-index: 6; + padding: 1em; + backdrop-filter: unset; + background: black; + h3 { + display: none; + } + } + .playlist-inner { + background: black; + width: 80%; + height: 100%; + overflow: overlay; + box-shadow: var(--ciderShadow-Generic); + border-radius: var(--mediaItemRadius) var(--mediaItemRadius) 0px 0px; + + .close-btn { + position: sticky; + top: 16px; + left: 16px; + margin-left: 16px; + z-index: 7; + } + } + } +} + +@keyframes playlistArtworkFadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 0.7; + } +} + +// Collection Page +.collection-page { + padding-bottom: 128px; + + .top-fab { + height: 52px; + width: 52px; + position: fixed; + bottom: 32px; + right: 32px; + border-radius: 100%; + background: rgb(60 60 60); + border: 0px; + appearance: none; + box-shadow: var(--ciderShadow-Generic); + + > svg { + height: 50%; + color: #eee; + pointer-events: none; + } + + &:hover { + background: rgb(100 100 100); + } + + &:active { + background: var(--keyColor); + } + } + + .header-text { + margin-bottom: 32px; + } +} + +/* Artist Page */ + +.artist-page { + padding: 0px; + top: 0; + + .floating-header { + position: sticky; + top: 0; + left: 0; + border-bottom: 1px solid rgba(200, 200, 200, 0.05); + z-index: 6; + padding: 0px 1em; + backdrop-filter: blur(32px); + background: rgba(0, 0, 0, 0.25); + top: var(--navigationBarHeight); + transition: opacity 0.1s var(--appleEase); + } + + &.animated .artist-header .more-btn-round { + position: absolute; + bottom: 22px !important; + right: 28px; + } + + .artist-header { + //background: linear-gradient(45deg, var(--keyColor), #0e0e0e); + color: white; + display: flex; + align-items: center; + justify-content: space-between; + min-height: 400px; + position: relative; + pointer-events: none; + + .header-content { + z-index: 1; + margin-top: -16px; + } + + + .artworkContainer { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: 0; + padding: 0; + -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%); + opacity: .7; + animation: playlistArtworkFadeIn 1s var(--appleEase); + + .artworkMaterial > img { + filter: brightness(100%) blur(80px) saturate(100%) contrast(1); + object-position: center; + object-fit: cover; + width: 100%; + height: 100%; + transform: unset; + } + } + + .more-btn-round { + position: absolute; + bottom: 82px; + right: 28px; + } + + .animated { + width: 100%; + height: 100%; + align-self: center; + position: absolute; + overflow: hidden; + box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; + + video { + overflow: hidden; + height: 100%; + width: 100%; + min-height: 56.25vw; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + .row .col.flex-center { + z-index: 4; + } + } + + .artist-image { + width: 200px; + height: 200px; + margin: 32px; + position: relative; + + .overlay-play { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + background: rgb(0 0 0 / 50%); + transition: opacity 0.1s var(--appleEase); + border-radius: 100%; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + appearance: none; + border: 0px; + padding: 0px; + + &:hover { + opacity: 1; + } + + &:active { + background: var(--selected-click); + } + + > svg { + width: 70%; + } + } + } + + .artist-play { + width: 32px; + height: 32px; + background: rgba(100, 100, 100, 0.5); + box-shadow: var(--ciderShadow-Generic); + border-radius: 100%; + box-shadow: var(--mediaItemShadow); + display: none; + cursor: pointer; + appearance: none; + border: 0px; + padding: 0px; + + &:hover { + filter: brightness(125%); + } + + &:active { + filter: brightness(75%); + transform: scale(0.98); + transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); + } + } + + .artist-title { + + .artist-play { + transform: translateY(3px); + margin: 14px; + } + + &.artist-animation-on { + width: 100%; + flex: unset; + margin-left: 0.5em; + color: whitesmoke; + position: absolute; + bottom: 0; + + .artist-play { + display: block; + } + } + } + + .artist-body { + padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding); + margin: -140px 20px; + } + + &.animated > .artist-body { + padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding); + margin-top: -57px; + } + + .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; + } + + .showmoreless:hover { + background: rgb(200 200 200 / 10%); + } +} + +/* Artist Page End */ + +// Settings page +.settings-page { + padding: 0px; + + .md-option-header { + padding: 1.25em 1.25em; + border-bottom: unset; + border-top: unset; + font-weight: 600; + font-size: 1.0em; + background: rgb(255 255 255 / 3%); + } + + .settings-option-body { + margin: 16px; + } +} diff --git a/src/renderer/style.less b/src/renderer/style.less index 161e0c2e..d298ec4e 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -7,6 +7,8 @@ @import url("less/ameframework.less"); @import url("less/bootstrap.less"); @import url("less/notyf.less"); +@import url("less/elements.less"); +@import url("less/pages.less"); :root { --appleEase: cubic-bezier(0.42, 0, 0.58, 1); @@ -68,6 +70,14 @@ body[loading] { } } +body.stopanimation * { + animation: unset !important; + + .loadbar-sound { + display: none; + } +} + body.notransparency::before { content: ""; position: absolute; @@ -79,14 +89,6 @@ body.notransparency::before { 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==); } -body.stopanimation * { - animation: unset !important; - - .loadbar-sound { - display: none; - } -} - *, *:before, *:after { @@ -163,21 +165,6 @@ body.stopanimation * { z-index: 1; } } - - //&::before { - // position: absolute; - // top: -50%; - // left: -50%; - // width: var(--bgWidth); - // height: var(--bgHeight); - // background-image: var(--bgColor); - // content: ""; - // z-index: -1; - // transform: rotateZ(0deg); - // transform-origin: center; - // animation: bgRotate 10s linear infinite; - // filter: brightness(100%) saturate(200%) contrast(1.5); - //} } .bgGradientMaterial-base { @@ -352,11 +339,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track { padding: 0px; } -.md-btn { - font-family: inherit; - font-size: 14px; -} - #app-main { display: flex; width: 100%; @@ -400,24 +382,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track { position: relative; } -.content-inner { - position: absolute; - top: var(--navigationBarHeight); - left: 0; - padding: 32px; - width: 100%; - transition: zoom 1s; - zoom: 1; -} - -.content-inner.centered { - height: 100%; - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; -} - .app-drawer { width: 300px; flex: 0 0 auto; @@ -1478,450 +1442,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } } -.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; - opacity: 0.70; -} - -.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 / 25%); -} - -.playback-button--small.search { - background-image: url("./assets/search.svg"); -} - -.playback-button--small.cast { - background-image: url("./assets/cast_white.svg"); -} - -.playback-button--small.miniplayer { - background-image: url("./assets/pip.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: rgb(200 200 200 / 25%); - background-image: url("./assets/repeatOne.svg"); -} - -.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.svg"); - opacity: 0.5; -} - -.player-volume-glyph.increase { - background-image: url("./assets/volume-2.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%; -} - -.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); -} .lyric-body { -webkit-mask-image: -webkit-gradient(linear, left 95%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); @@ -2235,159 +1766,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } } -.md-close-btn { - -webkit-mask-image: url("ameres://icons/webui/close.svg"); - -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center; - background-color: white; - opacity: 0.75; - -webkit-mask-size: contain; - height: 18px; - width: 18px; -} - -.md-btn { - background: rgb(100 100 100 / 25%); - padding: 8px 14px; - border-radius: 6px; - font-size: 14px; - border: 1px solid rgba(100, 100, 100, 0.35); - border-top: 1px solid rgba(100, 100, 100, 0.5); - color: #eee; - white-space: nowrap; - transition: transform 0.2s var(--appleEase), box-shadow 0.2s var(--appleEase); - - &.md-btn-block { - display: block; - width: 100%; - } - - &.md-btn-glyph { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - } - - &.md-btn-primary { - background: #ff2b52a6; - color: white; - border: 1px solid rgb(220 53 69 / 25%); - border-top: 1px solid rgb(220 53 69 / 50%); - } - - &.md-btn-small { - padding: 6px 8px; - font-size: 13px; - } - - &:hover { - filter: brightness(125%); - } - - &:active { - filter: brightness(75%); - transform: scale(0.98); - transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); - } - - &.md-btn-icon { - display: inline-flex; - vertical-align: middle; - justify-content: center; - - > img { - margin: 0px 16px 0px 0px; - pointer-events: none; - } - - > .md-btn-text { - margin: 0px; - } - } -} - -.btn-group { - display:inline-flex; - justify-content: center; - align-items: center; - > .md-btn { - border-radius:0px; - width:100%; - } - > .md-btn:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - > .md-btn:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - > .md-btn:not(:first-child):not(:last-child) { - border-radius: 0px; - } -} - -.md-ico-play { - content: url("./assets/play.svg"); - width: 10px; - height: 12px; - margin-right: 1px; - align-self: center; -} - -.md-ico-shuffle { - content: url("./assets/shuffle.svg"); - width: 1em; - height: 1em; - margin-right: 1px; - margin-bottom: -2px; - align-self: center; -} - -.md-ico-remove { - content: url("./assets/feather/x-circle-white.svg"); - width: 16px; - height: 16px; - margin-right: 1px; - margin-bottom: -1.5px; - align-self: center; -} - -.md-ico-add { - content: url("./assets/feather/plus-circle-white.svg"); - width: 1em; - height: 1em; - margin-right: 1px; - margin-bottom: -1.5px; - align-self: center; -} - -.md-select { - padding: 6px; - border-radius: 6px; - border: 1px solid rgba(200, 200, 200, 0.1); - border-top: 1px solid rgba(100, 100, 100, 0.5); - font-family: inherit; - font-size: 14px; - background: rgba(100, 100, 100, 0.25); - color: #eee; - - option { - font-size: 1em; - font-family: inherit; - padding: 8px 16px; - background: #404040; - } - - optgroup { - background: #2c2c2c; - } - - &:focus { - outline: solid 1px var(--selected); - } -} .sidebar-playlist { .folder-button-active { @@ -2408,254 +1786,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } } -.modal-fullscreen { - display: flex; - justify-content: center; - align-items: center; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.3); - z-index: 1000; - - .modal-window { - background: #333; - border-radius: 10px; - box-shadow: var(--mediaItemShadow-Shadow); - display: flex; - flex-flow: column; - max-height: 500px; - max-width: 360px; - background: #121212; - width: 100%; - position: relative; - - &:after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - box-shadow: var(--mediaItemShadow); - z-index: 1; - border-radius: inherit; - } - - .modal-header { - width: 100%; - padding: 6px; - } - - .modal-content { - width: 100%; - height: 100%; - overflow: hidden; - overflow-y: overlay; - } - - .modal-footer { - } - } -} - -.spatialproperties-panel { - .modal-window { - height: 700px; - max-height: 700px; - width: 800px; - max-width: 800px; - overflow: hidden; - - .info-header { - padding-left: 12px; - } - - .visual-container { - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - } - - .visual { - position: relative; - height: 250px; - width: 300px; - display: inline-flex; - align-items: flex-end; - justify-content: center; - filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%)); - margin: 0 auto; - - .face { - position: absolute; - width: calc(12px * 6); - height: calc(12px * 6); - border-radius: 6px; - transform: rotateX(60deg) rotateZ(-45deg); - transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; - } - - .listener { - position: absolute; - width: 32px; - height: 32px; - border-radius: 6px; - transform: rotateX(60deg) rotateZ(-45deg); - transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; - background: white; - color: black; - z-index: 2; - } - - .audiosource { - position: absolute; - width: 32px; - height: 32px; - border-radius: 6px; - transform: rotateX(60deg) rotateZ(-45deg); - transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; - background: yellow; - z-index: 2; - } - - .face:nth-of-type(1) { - background: linear-gradient(45deg, #28223a, #1f2038); - z-index: 1; - } - - .face:nth-of-type(2) { - background: linear-gradient(45deg, #7d53ad, #5763ff); - transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px); - opacity: 0.7; - z-index: 3; - } - } - - .modal-header { - padding: 16px; - position: relative; - overflow: hidden; - - .modal-title { - text-align: center; - } - - .close-btn { - width: 50px; - height: 100%; - background-image: var(--gfx-closeBtn); - background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - appearance: none; - border: 0; - background-color: transparent; - position: absolute; - top: 0; - right: 0; - - &:hover { - background-color: rgb(196, 43, 28) - } - } - } - } -} - -.addtoplaylist-panel { - .modal-window { - max-height: 600px; - max-width: 400px; - background: rgb(18 18 18 / 90%); - overflow: hidden; - backdrop-filter: blur(16px) saturate(180%); - - .modal-header { - padding: 16px; - position: relative; - - .modal-title { - text-align: center; - } - - .close-btn { - width: 50px; - height: 100%; - background-image: var(--gfx-closeBtn); - background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - appearance: none; - border: 0; - background-color: transparent; - position: absolute; - top: 0; - right: 0; - - &:hover { - background-color: rgb(196, 43, 28) - } - } - } - - .modal-search { - width: 100%; - padding: 0px 16px; - position: relative; - } - - .playlist-item { - appearance: none; - border: 0px; - text-align: left; - width: 100%; - margin: 0; - display: flex; - background: rgba(32, 32, 32, 0.46); - color: #eee; - font-family: inherit; - font-size: 0.98em; - padding: 6px 12px; - align-items: center; - flex-flow: row; - - .icon { - pointer-events: none; - width: 32px; - height: 32px; - display: flex; - justify-content: center; - align-items: center; - margin-right: 6px; - } - - .name { - } - - &:hover { - background: var(--selected); - } - - &:active { - background: var(--selected-click); - } - - &.focused { - background: var(--keyColor); - } - } - - .playlist-item:last-child { - border-bottom: 0px; - } - } -} - #navigation-bar { width: 100%; background: rgba(0, 0, 0, 0.25); @@ -2707,39 +1837,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } } -.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; -} - .well { background: rgba(200, 200, 200, 0.05); border-radius: 10px; @@ -2768,717 +1865,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } } -// Library - Songs page -.library-page { - padding: 0px; - - .library-header { - position: sticky; - top: 0; - left: 0; - border-bottom: 1px solid rgba(200, 200, 200, 0.05); - z-index: 6; - background: black; - padding: 0px 2em; - backdrop-filter: blur(32px); - background: rgba(0, 0, 0, 0.25); - top: var(--navigationBarHeight); - } - - .well { - margin: 2em; - } -} - -// Podcast Page -.content-inner.podcasts-page { - display: flex; - height: calc(100% - var(--navigationBarHeight)); - padding: 0px; - - .list-flat { - border-radius: 0px; - } - - .podcast-artwork { - width: 200px; - margin: 16px auto; - height: 200px; - } - - .podcasts-list { - height: 100%; - width: 280px; - background: rgb(200 200 200 / 10%); - overflow-y: overlay; - border-right: 1px solid var(--color2); - flex: none; - overflow-x: hidden; - - .podcast-list-header { - border-bottom: 1px solid var(--color2); - font-size: 0.7em; - padding: 6px; - background: #ffffff17; - text-transform: uppercase; - font-weight: 600; - opacity: 0.5; - } - - .podcasts-search { - padding: 10px; - position: sticky; - top: 0; - left: 0; - width: 100%; - border-bottom: 1px solid var(--color2); - z-index: 2; - background: #303030; - } - } - - .episodes-list { - height: 100%; - width: 100%; - background: rgb(200 200 200 / 6%); - overflow-y: overlay; - overflow-x: hidden; - - .episodes-inline-info { - padding: 14px 14px 0px 14px; - - .podcast-show-info { - display: flex; - justify-content: center; - flex-direction: column; - } - - .podcast-show-description { - margin: 32px 6px; - font-size: 0.8rem; - white-space: pre-wrap; - display: block; - } - - .podcast-artwork { - width: 120px; - margin: 0px auto; - height: 120px; - } - } - - .podcast-no-search-results { - text-align: center; - margin-top: 40px; - } - } - - .podcasts-details { - width: 300px; - flex: none; - background: rgb(255 255 255 / 5%); - overflow-y: overlay; - overflow-x: hidden; - top: 2%; - z-index: 2; - border-left: 1px solid var(--color2); - padding-bottom: 1em; - - .meta-btn { - font-size: 0.75em; - } - - .podcasts-details-header { - display: flex; - justify-content: end; - align-items: center; - position: sticky; - top: 0; - z-index: 2; - } - - .close-btn { - width: 50px; - height: 42px; - background-image: var(--gfx-closeBtn); - background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - appearance: none; - border: 0; - background-color: transparent; - position: absolute; - top: 0; - right: 0; - - &:hover { - background-color: rgb(196, 43, 28) - } - } - - .podcast-genre { - text-align: center; - margin: 6px; - font-size: 0.8em; - font-weight: 500; - opacity: 0.8; - } - - .podcast-metainfo { - text-align: center; - font-size: 0.7em; - opacity: 0.8; - } - - .podcast-header { - text-align: center; - } - - .podcast-play-btn { - width: 50%; - display: block; - margin: 0 auto; - } - - .podcast-description { - margin: 12px; - font-size: 0.75em; - white-space: pre-wrap; - display: block; - line-break: anywhere; - } - - - } - -} - -@media only screen and (max-width: 1230px) { - .content-inner.podcasts-page { - .podcasts-details { - height: 96%; - width: 300px; - flex: none; - background: rgb(20 20 20 / 97%); - overflow-y: overlay; - overflow-x: hidden; - position: absolute; - right: 2%; - top: 2%; - border-radius: 10px; - box-shadow: var(--ciderShadow-Generic); - z-index: 2; - } - } -} - -/* Album / Playlist Page */ -.playlist-page { - --bgColor: transparent; - padding: 0px; - //background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%); - top: 0; - padding-top: var(--navigationBarHeight); - - .playlist-body { - padding: var(--contentInnerPadding) 2em; - margin-top: -75px; - } - - .floating-header { - position: sticky; - top: 0; - left: 0; - border-bottom: 1px solid rgba(200, 200, 200, 0.05); - z-index: 6; - padding: 0px 1em; - backdrop-filter: blur(32px); - background: rgba(0, 0, 0, 0.25); - top: var(--navigationBarHeight); - transition: opacity 0.1s var(--appleEase); - } - - .playlist-display { - padding: var(--contentInnerPadding); - min-height: 300px; - position: relative; - - .artworkContainer { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - margin: 0; - margin-top: calc(var(--navigationBarHeight) * -1); - margin-bottom: -10px; - padding: 0; - -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%); - opacity: .7; - animation: playlistArtworkFadeIn 1s var(--appleEase); - - .artworkMaterial > img { - filter: brightness(100%) blur(80px) saturate(100%) contrast(1); - object-position: center; - object-fit: cover; - width: 100%; - height: 100%; - transform: unset; - } - } - - .playlistInfo { - z-index: 1; - position: absolute; - bottom: 0; - left: 0; - right: 0; - top: 0; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - - > .row { - width: calc(100% - 32px); - } - - .playlist-info { - flex-shrink: unset; - display: flex; - flex-flow: column; - justify-content: flex-end; - - .playlist-name { - font-weight: 700; - font-size: 1.6rem; - margin-bottom: 6px; - margin-right: 6px; - flex-shrink: unset; - } - - .nameEdit { - font-weight: 700; - font-size: 1.6rem; - margin-bottom: 6px; - margin-right: 6px; - flex-shrink: unset; - background: transparent; - border: 0px; - color: inherit; - font-family: inherit; - } - - .playlist-artist { - font-size: 20px; - margin-bottom: 6px; - margin-right: 6px; - flex-shrink: unset; - } - - .playlist-desc { - box-sizing: border-box; - font-size: 14px; - flex-shrink: unset; - margin-right: 5px; - max-height: 100px; - position: relative; - - .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))); - } - - .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-desc-expanded { - box-sizing: border-box; - font-size: 14px; - position: relative; - - .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; - } - } - } - } - - - } - - .friends-info { - display: flex; - flex-flow: column; - - .badge-container { - display: flex; - flex-flow: wrap; - - .socialBadge { - width: 40px; - height: 40px; - border-radius: 100%; - overflow: hidden; - box-shadow: var(--mediaItemShadow-ShadowSubtle); - transition: transform .2s var(--appleEase); - margin: 6px; - - &:hover { - transform: scale(1.2); - } - } - } - - .friends-name { - text-align: center; - font-size: 0.9em; - margin: 8px; - } - } - - .playlist-time { - font-size: 0.9em; - margin: 6px; - opacity: 0.7; - } - - &.inline-playlist { - overflow: hidden; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; - z-index: 6; - position: sticky; - margin-top: calc(var(--navigationBarHeight) * -1); - - .floating-header { - opacity: 1; - top: 0px; - z-index: 6; - padding: 1em; - backdrop-filter: unset; - background: black; - h3 { - display: none; - } - } - .playlist-inner { - background: black; - width: 80%; - height: 100%; - overflow: overlay; - box-shadow: var(--ciderShadow-Generic); - border-radius: var(--mediaItemRadius) var(--mediaItemRadius) 0px 0px; - - .close-btn { - position: sticky; - top: 16px; - left: 16px; - margin-left: 16px; - z-index: 7; - } - } - } -} - -@keyframes playlistArtworkFadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 0.7; - } -} - -// Collection Page -.collection-page { - padding-bottom: 128px; - - .top-fab { - height: 52px; - width: 52px; - position: fixed; - bottom: 32px; - right: 32px; - border-radius: 100%; - background: rgb(60 60 60); - border: 0px; - appearance: none; - box-shadow: var(--ciderShadow-Generic); - - > svg { - height: 50%; - color: #eee; - pointer-events: none; - } - - &:hover { - background: rgb(100 100 100); - } - - &:active { - background: var(--keyColor); - } - } - - .header-text { - margin-bottom: 32px; - } -} - -/* Artist Page */ - -.artist-page { - padding: 0px; - top: 0; - - .floating-header { - position: sticky; - top: 0; - left: 0; - border-bottom: 1px solid rgba(200, 200, 200, 0.05); - z-index: 6; - padding: 0px 1em; - backdrop-filter: blur(32px); - background: rgba(0, 0, 0, 0.25); - top: var(--navigationBarHeight); - transition: opacity 0.1s var(--appleEase); - } - - &.animated .artist-header .more-btn-round { - position: absolute; - bottom: 22px !important; - right: 28px; - } - - .artist-header { - //background: linear-gradient(45deg, var(--keyColor), #0e0e0e); - color: white; - display: flex; - align-items: center; - justify-content: space-between; - min-height: 400px; - position: relative; - pointer-events: none; - - .header-content { - z-index: 1; - margin-top: -16px; - } - - - .artworkContainer { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - margin: 0; - padding: 0; - -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%); - opacity: .7; - animation: playlistArtworkFadeIn 1s var(--appleEase); - - .artworkMaterial > img { - filter: brightness(100%) blur(80px) saturate(100%) contrast(1); - object-position: center; - object-fit: cover; - width: 100%; - height: 100%; - transform: unset; - } - } - - .more-btn-round { - position: absolute; - bottom: 82px; - right: 28px; - } - - .animated { - width: 100%; - height: 100%; - align-self: center; - position: absolute; - overflow: hidden; - box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; - - video { - overflow: hidden; - height: 100%; - width: 100%; - min-height: 56.25vw; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } - - .row .col.flex-center { - z-index: 4; - } - } - - .artist-image { - width: 200px; - height: 200px; - margin: 32px; - position: relative; - - .overlay-play { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - background: rgb(0 0 0 / 50%); - transition: opacity 0.1s var(--appleEase); - border-radius: 100%; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - appearance: none; - border: 0px; - padding: 0px; - - &:hover { - opacity: 1; - } - - &:active { - background: var(--selected-click); - } - - > svg { - width: 70%; - } - } - } - - .artist-play { - width: 32px; - height: 32px; - background: rgba(100, 100, 100, 0.5); - box-shadow: var(--ciderShadow-Generic); - border-radius: 100%; - box-shadow: var(--mediaItemShadow); - display: none; - cursor: pointer; - appearance: none; - border: 0px; - padding: 0px; - - &:hover { - filter: brightness(125%); - } - - &:active { - filter: brightness(75%); - transform: scale(0.98); - transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); - } - } - - .artist-title { - - .artist-play { - transform: translateY(3px); - margin: 14px; - } - - &.artist-animation-on { - width: 100%; - flex: unset; - margin-left: 0.5em; - color: whitesmoke; - position: absolute; - bottom: 0; - - .artist-play { - display: block; - } - } - } - - .artist-body { - padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding); - margin: -140px 20px; - } - - &.animated > .artist-body { - padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding); - margin-top: -57px; - } - - .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; - } - - .showmoreless:hover { - background: rgb(200 200 200 / 10%); - } -} - -/* Artist Page End */ - .text-overflow-elipsis { display: -webkit-box; min-width: 0px; @@ -3489,1138 +1875,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } -.mediaitem-artwork { - border-radius: var(--mediaItemRadius); - overflow: hidden; - flex: 0 0 auto; - position: relative; - width: 100%; - height: 100%; - background-image: url("https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg"); - background-size: cover; - background-position: center; - - .animatedartwork-view-box { - position: absolute; - top: 0px; - width: 100%; - height: 100%; - - .animated { - position: absolute; - top: 0px; - width: 100%; - height: 100%; - - video { - width: 100%; - height: 100%; - } - } - } - - &.rounded { - border-radius: 100%; - - &::after { - border-radius: 100%; - } - } - - &::after { - content: ""; - box-shadow: var(--mediaItemShadow); - z-index: 1; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - border-radius: inherit; - } - - img { - width: 100%; - height: 100%; - object-fit: cover; - image-rendering: -webkit-optimize-contrast; - pointer-events: none; - } - - &.no-shadow { - box-shadow: none; - - &::after { - display: none; - } - } - - &.subtle-shadow { - box-shadow: var(--mediaItemShadow-ShadowSubtle); - } - - &.shadow { - box-shadow: var(--mediaItemShadow-Shadow); - } -} - -.menu-panel { - width: 100%; - height: 100%; - position: fixed; - top: 0; - left: 0; - z-index: 100001; - display: flex; - justify-content: center; - align-items: center; - -webkit-app-region: no-drag; - - .menu-header-body { - padding: 6px; - display: flex; - background: rgb(200 200 200 / 10%); - - .menu-option-header { - width: 40px; - height: 40px; - display: flex; - justify-content: center; - align-items: center; - border-radius: var(--mediaItemRadius); - appearance: none; - border: 0; - background: transparent; - - &.active { - .sidebar-icon > .svg-icon { - --color: var(--keyColor); - } - } - - &:hover { - background: var(--selected); - } - - &:active { - background: var(--selected-click); - } - } - } - - .menu-panel-body { - display: flex; - flex-flow: column; - background: rgb(38 38 38); - position: relative; - min-width: 200px; - box-shadow: var(--ciderShadow-Generic); - border-radius: var(--mediaItemRadius); - overflow: hidden; - font-size: 14px; - - .menu-option { - text-align: left; - display: flex; - width: 100%; - padding: 12px 16px; - appearance: none; - border: 0px; - font: inherit; - background: transparent; - color: inherit; - - &:hover { - background: var(--selected); - } - - &:active { - background: var(--selected-click); - } - } - } - - - .menu-header-text { - margin: 18px 6px; - - .close-btn { - width: 50px; - height: 42px; - background-image: var(--gfx-closeBtn); - background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - appearance: none; - border: 0; - background-color: transparent; - position: absolute; - top: 0; - right: 0; - - &:hover { - background-color: rgb(196, 43, 28) - } - } - } - - .menu-body { - overflow: overlay; - height: 100%; - } - - .menu-footer { - width: 100%; - padding: 12px; - } -} - -.queue-panel { - height: 100%; - width: 100%; - display: flex; - flex-flow: column; - - .queue-header-text { - margin: 18px 6px; - } - - .queue-body { - overflow: overlay; - height: 100%; - } - - .queue-footer { - width: 100%; - padding: 12px; - } - - .autoplay { - background: rgb(200 200 200 / 15%); - display: flex; - justify-content: center; - appearance: none; - border: 0; - border-radius: 6px; - height: 32px; - width: 32px; - } - - .infinity { - content: url("./assets/infinity.svg"); - margin: auto; - } -} - -/* queue item */ -.cd-queue-item { - border-bottom: 1px solid rgb(200 200 200 / 10%); - padding: 8px; - - .row, - .col { - padding: 0px; - margin: 0px; - } - - .artwork { - width: 32px; - height: 32px; - flex: 0 0 auto; - } - - &.selected { - background: var(--selected); - } - - &:active { - background: var(--selected-click); - color: #eee; - } - - .queue-info { - display: flex; - flex-direction: column; - - .queue-title { - font-size: 14px; - } - - .queue-subtitle { - font-size: 13px; - opacity: 0.85; - } - } -} - -/* horizontal media scroller */ -.cd-hmedia-scroller { - &::-webkit-scrollbar-thumb { - box-shadow: none; - } - - &:hover::-webkit-scrollbar-thumb { - box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%); - } - - &.hmedia-scroller-card { - .mediaitem-card { - margin: 16px; - } - } -} - -/* 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-between; - align-items: center; - border-radius: var(--mediaItemRadius); - - .artwork { - height: 42px; - width: 42px; - border-radius: var(--mediaItemRadius); - object-fit: cover; - object-position: center; - flex: 0 0 auto; - background-repeat: no-repeat; - margin: 12px; - border: 0px; - outline: none; - position: relative; - overflow: hidden; - - .overlay-play { - background: rgba(0, 0, 0, 0.5); - opacity: 0; - appearance: none; - border: 0; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 0px; - z-index: 5; - cursor: pointer; - - &:hover { - opacity: 1; - } - - &:active { - background: var(--selected-click); - } - } - } - - .artwork.round { - border-radius: var(--mediaItemRadiusRound); - } - - .info-rect { - height: 100%; - display: flex; - flex-flow: column; - justify-content: center; - flex-grow: 1; - } - - .title { - width: 100%; - } - - .subtitle { - width: 90%; - font-size: .8em; - opacity: 0.7; - } - - .duration { - min-width: 60px; - text-align: center; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - - .metainfo { - min-width: 145px; - text-align: center; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - - .explicit-icon { - background-image: url("./assets/explicit.svg"); - height: 12px; - width: 36px; - filter: contrast(0); - background-repeat: no-repeat; - } - - /* CSS.gg - */ - @keyframes load-bar { - 10% { - box-shadow: inset 0 -4px 0 - } - 20% { - box-shadow: inset 0 -10px 0 - } - 30% { - box-shadow: inset 0 -12px 0 - } - 40% { - box-shadow: inset 0 -8px 0 - } - 50% { - box-shadow: inset 0 -4px 0 - } - 60% { - box-shadow: inset 0 -6px 0 - } - 80% { - box-shadow: inset 0 -12px 0 - } - 90% { - box-shadow: inset 0 -6px 0 - } - to { - box-shadow: inset 0 -2px 0 - } - } - - .loadbar-sound, - .loadbar-sound::after, - .loadbar-sound::before { - animation: load-bar 1.3s ease infinite alternate; - box-sizing: border-box; - width: 3px; - height: 28px; - box-shadow: inset 0 -12px 0; - } - - .loadbar-sound { - margin-left: 22px; - margin-top: -16px; - position: relative; - transform: scale(var(--load-bar, 1)); - color: var(--keyColor); - display: block; - } - - .loadbar-sound::after, - .loadbar-sound::before { - content: ""; - position: absolute; - bottom: 0 - } - - .loadbar-sound::before { - left: -4.5px; - animation-delay: -2.4s - } - - .loadbar-sound::after { - right: -4.2px; - animation-delay: -3.7s - } - - .isLibrary { - flex: 0 0 auto; - width: 40px; - text-align: center; - - button { - appearance: none; - border: 0px; - background: transparent; - cursor: pointer; - filter: contrast(0.8); - } - } - - &:hover { - background: rgb(200 200 200 / 10%); - box-shadow: var(--mediaItemShadow); - - .overlay-play { - opacity: 1; - } - } - - &.mediaitem-selected { - background: var(--selected); - box-shadow: var(--mediaItemShadow); - } - - - &:active { - background: var(--selected-click); - box-shadow: var(--mediaItemShadow); - color: #eee; - } - - // list item compact - &.compact { - height: 40px; - font-size: 13px; - - .artwork { - display: none; - } - - .info-rect { - padding-left: 1em; - } - } -} - -/* 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; - - .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; - } - - .artwork.round { - border-radius: var(--mediaItemRadiusRound); - } - - .info-rect { - width: 100%; - } - - .title { - width: 100%; - text-align: center; - } - - .subtitle { - width: 100%; - text-align: center; - font-size: 12px; - } -} - -/* mediaitem-square-sp */ -.cd-mediaitem-square-sp { - --spcolor: var(""); - width: 190px; - height: 245px; - 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); - - .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; - - &.round { - border-radius: var(--mediaItemRadiusRound); - } - - &:hover { - box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; - } - } - - .title { - width: 90%; - text-align: center; - } - - .subtitle { - width: 100%; - text-align: center; - font-size: 12px; - } - - > .cd-mediaitem-square-large-overlay { - z-index: 3; - - &:hover { - opacity: 1; - } - } - - + .cd-mediaitem-square-large-overlay { - pointer-events: none; - } - - &:hover + .cd-mediaitem-square-large-overlay { - opacity: 1; - - } - - &:hover { - box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; - } -} - - -/* 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; - - > * { - z-index: inherit; - } -} - -.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-mvview */ - -/* mediaitem-mvview */ -.cd-mediaitem-mvview { - width: 300px; - 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; - - > * { - z-index: inherit; - } -} - -.cd-mediaitem-mvview .artwork { - height: 172px; - width: 300px; - 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-mvview-overlay { - position: absolute; - width: 300px; - float: right; - height: 250px; - top: 0px; - margin: 10px; - margin-top: 0px; - opacity: 0; - -} - -.cd-mediaitem-mvview-overlay > * { - pointer-events: auto; - -} - -.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay { - z-index: 3; -} - -.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay:hover { - opacity: 1; -} - -.cd-mediaitem-mvview + .cd-mediaitem-mvview-overlay { - pointer-events: none; - -} - -.cd-mediaitem-mvview:hover + .cd-mediaitem-mvview-overlay { - opacity: 1; - -} - - -.cd-mediaitem-mvview .artwork.round { - border-radius: var(--mediaItemRadiusRound); -} - -.cd-mediaitem-mvview .title { - width: 90%; - text-align: center; -} - -.cd-mediaitem-mvview .subtitle { - width: 100%; - text-align: center; - font-size: 12px; -} - - -/* mediaitem-square */ -.cd-mediaitem-square { - width: 220px; - height: 238px; - display: inline-flex; - flex: 0 0 auto; - flex-direction: column; - font-size: 14px; - justify-content: center; - align-items: center; - border-radius: 6px; - - .artwork-container { - position: relative; - - .artwork { - height: 190px; - width: 190px; - background: blue; - border-radius: var(--mediaItemRadius); - background: var(--artwork); - background-size: cover; - flex: 0 0 auto; - margin: 6px; - cursor: pointer; - - &.round { - border-radius: var(--mediaItemRadiusRound); - } - } - - .badge-container { - transition: opacity 0.1s var(--appleEase); - opacity: 1; - - .socialBadge { - width: 32px; - height: 32px; - position: absolute; - right: 14px; - bottom: 14px; - border-radius: 100%; - overflow: hidden; - z-index: 2; - pointer-events: none; - } - } - - > .play-btn, - > .menu-btn { - opacity: 0; - appearance: none; - padding: 0px; - border: 0px; - width: 30px; - height: 30px; - border-radius: 50%; - background: rgba(50, 50, 50, 0.7); - cursor: pointer; - transition: opacity 0.1s var(--appleEase); - - :hover { - border-radius: 50%; - background: rgba(250, 0, 0, 0.7); - } - } - - > .play-btn { - position: absolute; - bottom: 14px; - left: 14px; - z-index: 2; - - } - - > .menu-btn { - position: absolute; - bottom: 14px; - right: 14px; - z-index: 2; - } - - &:hover { - > .badge-container { - opacity: 0; - } - - > .play-btn, - > .menu-btn { - opacity: 1; - } - } - } - - .info-rect { - width: 90%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - } - - - .title { - width: 100%; - text-align: center; - display: flex; - align-content: center; - justify-content: center; - } - - .subtitle { - width: 100%; - text-align: center; - font-size: 12px; - } - - &.mediaitem-video { - height: 200px; - width: 240px; - - .artwork { - height: 120px; - width: 212px; - } - } - - &.mediaitem-brick { - height: 200px; - width: 240px; - - .artwork { - height: 123px; - width: 220px; - } - } - - &.mediaitem-small { - width: 140px; - height: 180px; - - .artwork { - height: 128px; - width: 128px; - } - } - - &.mediaitem-card { - background: #ccc; - background: var(--spcolor); - height: 298px; - width: 230px; - max-width: 250px; - max-height: 500px; - overflow: hidden; - position: relative; - border-radius: calc(var(--mediaItemRadius) * 2); - box-shadow: var(--mediaItemShadow-ShadowSubtle); - - .artwork { - width: 230px; - height: 230px; - overflow: hidden; - border-radius: 0px; - margin: 0; - - .mediaitem-artwork { - border-radius: 0px; - - &::after { - box-shadow: unset; - } - } - } - - .info-rect-card { - padding: 10px 10px 14px; - position: relative; - width: 100%; - - &::before { - background: var(--bgartwork); - content: ""; - top: 0; - left: 0; - bottom: 0; - right: 0; - position: absolute; - background-size: cover; - background-position: bottom; - z-index: 0; - opacity: 1; - filter: brightness(0.5) blur(50px) saturate(180%); - } - } - - .title { - height: 100%; - display: flex; - justify-content: center; - align-items: center; - font-size: 0.9em; - font-weight: 500; - z-index: 1; - } - - .subtitle { - height: 100%; - justify-content: center; - align-items: center; - font-size: 0.75em; - width: 100%; - display: flex; - z-index: 1; - } - - &::after { - box-shadow: var(--mediaItemShadow); - content: ""; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - pointer-events: none; - border-radius: inherit; - } - } -} - -/* mediaitem-square */ -.albums-square-containeru > * > .cd-mediaitem-square { - --frame: max(220px, 15vw); - width: var(--frame); - height: calc(var(--frame) * 13 / 11); - display: inline-flex; - flex: 0 0 auto; - flex-direction: column; - font-size: calc(var(--frame) / 220 * 14); - justify-content: center; - align-items: center; - border-radius: calc(var(--frame) / 220 * 6); - - .artwork-container { - position: relative; - - .artwork { - height: calc(var(--frame) * 19 / 22); - width: calc(var(--frame) * 19 / 22); - background: blue; - border-radius: var(--mediaItemRadius); - background: var(--artwork); - background-size: cover; - flex: 0 0 auto; - margin: calc(var(--frame) / 220 * 6); - cursor: pointer; - - &.round { - border-radius: var(--mediaItemRadiusRound); - } - } - - > .play-btn, - > .menu-btn { - opacity: 0; - appearance: none; - padding: 0px; - border: 0px; - width: calc(var(--frame) / 220 * 30); - height: calc(var(--frame) / 220 * 30); - border-radius: 50%; - background: rgba(50, 50, 50, 0.7); - cursor: pointer; - backdrop-filter: blur(32px) saturate(180%); - transition: opacity 0.1s var(--appleEase); - } - - > .play-btn { - position: absolute; - bottom: calc(var(--frame) / 220 * 14); - left: calc(var(--frame) / 220 * 14); - z-index: 2; - } - - > .menu-btn { - position: absolute; - bottom: calc(var(--frame) / 220 * 14); - right: calc(var(--frame) / 220 * 14); - z-index: 2; - } - - &:hover { - - > .play-btn, - > .menu-btn { - opacity: 1; - } - } - } - - - .title { - width: 90%; - text-align: center; - } - - .subtitle { - width: 100%; - text-align: center; - font-size: calc(var(--frame) / 220 * 12); - } - - &.mediaitem-video { - height: calc(var(--frame) / 220 * 200); - width: calc(var(--frame) / 220 * 240); - - .artwork { - height: calc(var(--frame) / 220 * 120); - width: calc(var(--frame) / 220 * 212); - } - } - - &.mediaitem-brick { - height: calc(var(--frame) / 220 * 200); - width: calc(var(--frame) / 220 * 240); - - .artwork { - height: calc(var(--frame) / 220 * 123); - width: calc(var(--frame)); - } - } -} - -.cd-btn-seeall { - background: transparent; - border: 0px; - color: var(--keyColor); - font-family: inherit; - font-weight: 500; - font-size: 16px; - border-radius: 4px; - padding: 6px; - - &:hover { - cursor: pointer; - background: rgb(200 200 200 / 10%) - } -} - .fullscreen-view-container { position: absolute; top: 0; @@ -5414,81 +2668,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { // Cider App -.listitem-horizontal { - .cd-mediaitem-list-item { - width: 350px; - height: 60px; - } -} - -.mediaitem-list-item__grid { - background: rgba(200, 200, 200, 0.05); - border-radius: 10px; - padding: var(--contentInnerPadding); - box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; - width: 100%; - - .cd-mediaitem-list-item { - width: 350px; - height: 60px; - } - - &::-webkit-scrollbar { - display: none; - } - - &:hover::-webkit-scrollbar { - display: initial; - - } -} - -.settings-page { - padding: 0px; - - .md-option-header { - padding: 1.25em 1.25em; - border-bottom: unset; - border-top: unset; - font-weight: 600; - font-size: 1.0em; - background: rgb(255 255 255 / 3%); - } - - .settings-option-body { - margin: 16px; - } -} - -// sidebar icon -.svg-icon { - --color: #aaa; - --url: url("./assets/feather/share.svg"); - -webkit-mask-image: var(--url); - -webkit-mask-size: cover; - height: 18px; - width: 18px; - background: var(--color); -} - -.sidebar-icon { - width: 18px; - height: 18px; - margin-right: 8px; - - > .svg-icon { - width: 100%; - height: 100%; - --color: #aaa; - } - - > svg { - width: 100%; - height: 100%; - color: #aaa; - } -} - @keyframes rotate { from { transform: rotate(0deg); @@ -5639,18 +2818,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { right: -300px; } -/* 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) { } @@ -5783,78 +2950,6 @@ div#captions { font-weight: 500; } -/* Switch Checkbox */ -input[type=checkbox][switch] { - width: 38px; - appearance: none; - border-radius: 32px; - height: 24px; - zoom: 1; - top: 0; - cursor: pointer; - left: 0; - position: relative; - transform: scale(1); - background: rgb(142 142 147 / 100%); - padding: 0; - margin: 0; -} - -input[type=checkbox][switch]:focus, -input[type=checkbox][switch]:active { - outline: none; -} - -input[type=checkbox][switch]:checked { - background: var(--keyColor); - border: 0 solid var(--keyColor); - mix-blend-mode: unset; - - &:hover { - background: var(--keyColor-rollover); - } - - &:active { - background: var(--keyColor-pressed); - } -} - -input[type=checkbox][switch]::before { - background: white; - width: 26px; - height: 26px; - top: -1px; - left: -1px; - position: absolute; - content: ' '; - border-radius: 32px; - transition: .10s left var(--appleEase); - transform: scale(.75); -} - - -input[type=checkbox][switch]:checked::before { - background: white; - top: -1px; - left: 13px; - transition: .10s left var(--appleEase); - transform: scale(.75); -} - -input[type=checkbox][switch]:disabled::before { - opacity: .5; -} - -input[type=checkbox][switch]:active::before { - left: 13px; -} - -input[type=checkbox][switch]:checked:active::before { - left: -1px; -} - -/* End Switch Checkbox */ - .madeforyou-body { margin-top: 15px; } From 74646bff5eadd908363bb37b88e6caa2f9c3fccf Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Sun, 13 Feb 2022 21:37:27 -0800 Subject: [PATCH 3/3] forgot an import --- src/renderer/style.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/renderer/style.less b/src/renderer/style.less index d298ec4e..6a238d94 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -8,6 +8,7 @@ @import url("less/bootstrap.less"); @import url("less/notyf.less"); @import url("less/elements.less"); +@import url("less/helpers.less"); @import url("less/pages.less"); :root {