diff --git a/src/renderer/assets/oobe/maverick.png b/src/renderer/assets/oobe/maverick.png
new file mode 100644
index 00000000..c2238734
Binary files /dev/null and b/src/renderer/assets/oobe/maverick.png differ
diff --git a/src/renderer/assets/oobe/mojave.png b/src/renderer/assets/oobe/mojave.png
new file mode 100644
index 00000000..0f6a9280
Binary files /dev/null and b/src/renderer/assets/oobe/mojave.png differ
diff --git a/src/renderer/assets/oobe/ss1.png b/src/renderer/assets/oobe/ss1.png
deleted file mode 100644
index afb41b43..00000000
Binary files a/src/renderer/assets/oobe/ss1.png and /dev/null differ
diff --git a/src/renderer/assets/oobe/ss2.png b/src/renderer/assets/oobe/ss2.png
deleted file mode 100644
index fac18955..00000000
Binary files a/src/renderer/assets/oobe/ss2.png and /dev/null differ
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 12a5e538..4d1917c6 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -117,35 +117,35 @@ function fallbackinitMusicKit() {
);
request.send();
}
-document.addEventListener("musickitloaded", function () {
- console.log("MusicKit loaded");
- // MusicKit global is now defined
- function initMusicKit() {
- let parsedJson = JSON.parse(this.responseText);
- MusicKit.configure({
- developerToken: parsedJson.token,
- app: {
- name: "Apple Music",
- build: "1978.4.1",
- version: "1.0",
- },
- sourceType: 24,
- suppressErrorDialog: true,
- }).then(() => {
- function waitForApp() {
- if (typeof app.init !== "undefined") {
- app.init();
- if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
- app.spawnMica();
- }
- } else {
- setTimeout(waitForApp, 250);
- }
- }
- waitForApp();
- });
- }
+function initMusicKit() {
+
+ let parsedJson = JSON.parse(this.responseText);
+ MusicKit.configure({
+ developerToken: parsedJson.token,
+ app: {
+ name: "Apple Music",
+ build: "1978.4.1",
+ version: "1.0",
+ },
+ sourceType: 24,
+ suppressErrorDialog: true,
+ }).then(() => {
+ function waitForApp() {
+ if (typeof app.init !== "undefined") {
+ app.init();
+ if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
+ app.spawnMica();
+ }
+ } else {
+ setTimeout(waitForApp, 250);
+ }
+ }
+ waitForApp();
+ });
+}
+
+function capiInit() {
const request = new XMLHttpRequest();
request.timeout = 5000;
request.addEventListener("load", initMusicKit);
@@ -156,13 +156,17 @@ document.addEventListener("musickitloaded", function () {
};
request.open("GET", "https://api.cider.sh/v1/");
request.send();
+}
- // check for widevine failure and reconfigure the instance.
- window.addEventListener("drmUnsupported", function () {
- initMusicKit();
- });
+document.addEventListener("musickitloaded", function () {
+ if (showOobe()) return;
+ console.log("MusicKit loaded");
+ // MusicKit global is now defined
+ capiInit()
+});
+window.addEventListener("drmUnsupported", function () {
+ initMusicKit();
});
-
if ("serviceWorker" in navigator) {
// Use the window load event to keep the page load performant
window.addEventListener("load", () => {
@@ -251,7 +255,7 @@ var checkIfScrollIsStatic = setInterval(() => {
// do something
}
position = document.getElementsByClassName("lyric-body")[0].scrollTop;
- } catch (e) {}
+ } catch (e) { }
}, 50);
// WebGPU Console Notification
@@ -287,6 +291,22 @@ function isJson(item) {
webGPU().then();
+function showOobe() {
+ if (localStorage.getItem("mk-player-tsid") && localStorage.getItem("seenOOBE")) {
+ return false
+ } else {
+ function waitForApp() {
+ if (typeof app.init !== "undefined") {
+ app.oobeInit();
+ } else {
+ setTimeout(waitForApp, 250);
+ }
+ }
+ waitForApp();
+ return true
+ }
+}
+
let screenWidth = screen.width;
let screenHeight = screen.height;
diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 14e413ac..baed43e5 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -1,48 +1,48 @@
// Helpers
.content-inner {
- position: absolute;
- top: var(--navigationBarHeight);
- left: 0;
- padding: 32px;
- width: 100%;
+ position : absolute;
+ top : var(--navigationBarHeight);
+ left : 0;
+ padding : 32px;
+ width : 100%;
transition: zoom 1s;
- zoom: 1;
+ zoom : 1;
}
.content-inner.centered {
- height: 100%;
- display: flex;
- flex-flow: column;
+ height : 100%;
+ display : flex;
+ flex-flow : column;
justify-content: center;
- align-items: center;
+ align-items : center;
}
// End Helpers
// GitHub Themes
.github-themes-page {
- display: flex;
+ display : flex;
flex-direction: column;
- padding: 0px;
- height: calc(100% - var(--navigationBarHeight));
+ padding : 0px;
+ height : calc(100% - var(--navigationBarHeight));
.github-avatar {
- height: 42px;
- width: 42px;
- margin: 6px;
+ height : 42px;
+ width : 42px;
+ margin : 6px;
border-radius: 32px;
}
.repo-name {
- margin: 0px;
- font-weight: 500;
- overflow: hidden;
+ margin : 0px;
+ font-weight : 500;
+ overflow : hidden;
text-overflow: ellipsis;
- white-space: break-spaces;
+ white-space : break-spaces;
}
.repo-url {
- color: var(--textColor);
+ color : var(--textColor);
font-size: 0.8em;
}
@@ -51,12 +51,12 @@
}
.repos-list {
- height: 100%;
+ height : 100%;
overflow-y: overlay;
- width: 320px;
- font-size: 14px;
+ width : 320px;
+ font-size : 14px;
- > .list-group {
+ >.list-group {
margin: 0px;
}
@@ -74,18 +74,18 @@
}
.github-preview {
- height: 100%;
- flex: 1;
+ height : 100%;
+ flex : 1;
background: var(--color2);
- padding: 16px 32px;
+ padding : 16px 32px;
overflow-y: overlay;
}
.gh-content {
- display: flex;
+ display : flex;
flex-direction: row;
- flex: 1;
- overflow: hidden;
+ flex : 1;
+ overflow : hidden;
}
.gh-header {
@@ -98,16 +98,16 @@
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;
+ 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);
+ background : rgba(0, 0, 0, 0.25);
+ top : var(--navigationBarHeight);
}
.well {
@@ -121,7 +121,7 @@
.searchToggle {
float: right;
- > button {
+ >button {
min-width: 120px;
}
}
@@ -130,18 +130,18 @@
width: 530px !important;
.artwork-container .artwork {
- height: 168px !important;
- width: 507px !important;
+ height : 168px !important;
+ width : 507px !important;
z-index: 1;
}
.title {
- font-weight: bold;
+ font-weight : bold;
justify-content: left;
- font-size: 18px;
- margin-top: -40px;
- z-index: 5;
- pointer-events: none;
+ font-size : 18px;
+ margin-top : -40px;
+ z-index : 5;
+ pointer-events : none;
}
}
}
@@ -149,7 +149,7 @@
// Podcast Page
.content-inner.podcasts-page {
display: flex;
- height: calc(100% - var(--navigationBarHeight));
+ height : calc(100% - var(--navigationBarHeight));
padding: 0px;
.list-flat {
@@ -157,45 +157,45 @@
}
.podcast-artwork {
- width: 200px;
+ width : 200px;
margin: 16px auto;
height: 200px;
}
.podcasts-list {
- height: 100%;
- width: 280px;
- background: rgb(200 200 200 / 10%);
- overflow-y: overlay;
+ height : 100%;
+ width : 280px;
+ background : rgb(200 200 200 / 10%);
+ overflow-y : overlay;
border-right: 1px solid var(--color2);
- flex: none;
- overflow-x: hidden;
+ flex : none;
+ overflow-x : hidden;
.podcast-list-header {
- border-bottom: 1px solid var(--color2);
- font-size: 0.7em;
- padding: 6px;
- background: #ffffff17;
+ border-bottom : 1px solid var(--color2);
+ font-size : 0.7em;
+ padding : 6px;
+ background : #ffffff17;
text-transform: uppercase;
- font-weight: 600;
- opacity: 0.5;
+ font-weight : 600;
+ opacity : 0.5;
}
.podcasts-search {
- padding: 10px;
- position: sticky;
- top: 0;
- left: 0;
- width: 100%;
+ padding : 10px;
+ position : sticky;
+ top : 0;
+ left : 0;
+ width : 100%;
border-bottom: 1px solid var(--color2);
- z-index: 2;
- background: #303030;
+ z-index : 2;
+ background : #303030;
}
}
.episodes-list {
- height: 100%;
- width: 100%;
+ height : 100%;
+ width : 100%;
background: rgb(200 200 200 / 6%);
overflow-y: overlay;
overflow-x: hidden;
@@ -204,20 +204,20 @@
padding: 14px 14px 0px 14px;
.podcast-show-info {
- display: flex;
+ display : flex;
justify-content: center;
- flex-direction: column;
+ flex-direction : column;
}
.podcast-show-description {
- margin: 32px 6px;
- font-size: 0.8rem;
+ margin : 32px 6px;
+ font-size : 0.8rem;
white-space: pre-wrap;
- display: block;
+ display : block;
}
.podcast-artwork {
- width: 120px;
+ width : 120px;
margin: 0px auto;
height: 120px;
}
@@ -230,14 +230,14 @@
}
.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);
+ 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 {
@@ -245,27 +245,27 @@
}
.podcasts-details-header {
- display: flex;
+ display : flex;
justify-content: end;
- align-items: center;
- position: sticky;
- top: 0;
- z-index: 2;
+ align-items : center;
+ position : sticky;
+ top : 0;
+ z-index : 2;
}
.close-btn {
- width: 50px;
- height: 42px;
- background-image: var(--gfx-closeBtn);
+ 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;
+ 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)
@@ -273,17 +273,17 @@
}
.podcast-genre {
- text-align: center;
- margin: 6px;
- font-size: 0.8em;
+ text-align : center;
+ margin : 6px;
+ font-size : 0.8em;
font-weight: 500;
- opacity: 0.8;
+ opacity : 0.8;
}
.podcast-metainfo {
text-align: center;
- font-size: 0.7em;
- opacity: 0.8;
+ font-size : 0.7em;
+ opacity : 0.8;
}
.podcast-header {
@@ -291,17 +291,17 @@
}
.podcast-play-btn {
- width: 50%;
+ width : 50%;
display: block;
- margin: 0 auto;
+ margin : 0 auto;
}
.podcast-description {
- margin: 12px;
- font-size: 0.75em;
+ margin : 12px;
+ font-size : 0.75em;
white-space: pre-wrap;
- display: block;
- line-break: anywhere;
+ display : block;
+ line-break : anywhere;
}
@@ -312,59 +312,59 @@
// Podcast Page
.content-inner.library-artists-page {
// top: 0;
- height: calc(100% - 60px - var(--navigationBarHeight));
+ height : calc(100% - 60px - var(--navigationBarHeight));
padding: 0px;
.inner-container {
display: flex;
- height: calc(100% - var(--navigationBarHeight));
+ height : calc(100% - var(--navigationBarHeight));
padding: 0px;
- height: 100%;
+ height : 100%;
.list-flat {
border-radius: 0px;
}
.podcast-artwork {
- width: 200px;
+ width : 200px;
margin: 16px auto;
height: 200px;
}
.podcasts-list {
- height: 100%;
- width: 280px;
- background: rgb(200 200 200 / 10%);
- overflow-y: overlay;
+ height : 100%;
+ width : 280px;
+ background : rgb(200 200 200 / 10%);
+ overflow-y : overlay;
border-right: 1px solid var(--color2);
- flex: none;
- overflow-x: hidden;
+ flex : none;
+ overflow-x : hidden;
.podcast-list-header {
- border-bottom: 1px solid var(--color2);
- font-size: 0.7em;
- padding: 6px;
- background: #ffffff17;
+ border-bottom : 1px solid var(--color2);
+ font-size : 0.7em;
+ padding : 6px;
+ background : #ffffff17;
text-transform: uppercase;
- font-weight: 600;
- opacity: 0.5;
+ font-weight : 600;
+ opacity : 0.5;
}
.podcasts-search {
- padding: 10px;
- position: sticky;
- top: 0;
- left: 0;
- width: 100%;
+ padding : 10px;
+ position : sticky;
+ top : 0;
+ left : 0;
+ width : 100%;
border-bottom: 1px solid var(--color2);
- z-index: 2;
- background: #303030;
+ z-index : 2;
+ background : #303030;
}
}
.episodes-list {
- height: calc(100% + 60px);
- width: 100%;
+ height : calc(100% + 60px);
+ width : 100%;
background: rgb(200 200 200 / 6%);
overflow-y: overlay;
overflow-x: hidden;
@@ -373,20 +373,20 @@
padding: 14px 14px 0px 14px;
.podcast-show-info {
- display: flex;
+ display : flex;
justify-content: center;
- flex-direction: column;
+ flex-direction : column;
}
.podcast-show-description {
- margin: 32px 6px;
- font-size: 0.8rem;
+ margin : 32px 6px;
+ font-size : 0.8rem;
white-space: pre-wrap;
- display: block;
+ display : block;
}
.podcast-artwork {
- width: 120px;
+ width : 120px;
margin: 0px auto;
height: 120px;
}
@@ -399,14 +399,14 @@
}
.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);
+ 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 {
@@ -414,27 +414,27 @@
}
.podcasts-details-header {
- display: flex;
+ display : flex;
justify-content: end;
- align-items: center;
- position: sticky;
- top: 0;
- z-index: 2;
+ align-items : center;
+ position : sticky;
+ top : 0;
+ z-index : 2;
}
.close-btn {
- width: 50px;
- height: 42px;
- background-image: var(--gfx-closeBtn);
+ 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;
+ 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)
@@ -442,17 +442,17 @@
}
.podcast-genre {
- text-align: center;
- margin: 6px;
- font-size: 0.8em;
+ text-align : center;
+ margin : 6px;
+ font-size : 0.8em;
font-weight: 500;
- opacity: 0.8;
+ opacity : 0.8;
}
.podcast-metainfo {
text-align: center;
- font-size: 0.7em;
- opacity: 0.8;
+ font-size : 0.7em;
+ opacity : 0.8;
}
.podcast-header {
@@ -460,17 +460,17 @@
}
.podcast-play-btn {
- width: 50%;
+ width : 50%;
display: block;
- margin: 0 auto;
+ margin : 0 auto;
}
.podcast-description {
- margin: 12px;
- font-size: 0.75em;
+ margin : 12px;
+ font-size : 0.75em;
white-space: pre-wrap;
- display: block;
- line-break: anywhere;
+ display : block;
+ line-break : anywhere;
}
@@ -481,18 +481,18 @@
@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%;
+ 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;
+ box-shadow : var(--ciderShadow-Generic);
+ z-index : 2;
}
}
}
@@ -501,33 +501,33 @@
@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%;
+ 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;
+ box-shadow : var(--ciderShadow-Generic);
+ z-index : 2;
}
}
}
/* Album / Playlist Page */
.playlist-page {
- --bgColor: transparent;
- padding: 0px;
+ --bgColor : transparent;
+ padding : 0px;
//background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%);
- top: 0;
- padding-top: var(--navigationBarHeight);
- display: flex;
+ top : 0;
+ padding-top : var(--navigationBarHeight);
+ display : flex;
flex-direction: column;
- height: 100%;
- overflow: hidden;
+ height : 100%;
+ overflow : hidden;
.cd-mediaitem-list-item {
&:hover {
@@ -543,51 +543,51 @@
.editTracksBtn {
position: absolute;
- top: 20px;
- right: 20px;
- z-index: 1;
+ top : 20px;
+ right : 20px;
+ z-index : 1;
- > span {
+ >span {
display: flex;
- gap: 8px;
+ gap : 8px;
}
}
.mediaContainer {
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
- width: 260px;
- height: 260px;
+ width : 260px;
+ height : 260px;
}
.playlist-body {
- padding: 32px;
+ padding : 32px;
// margin-top: -75px;
- overflow-y: overlay;
- height: 100%;
- padding: 0px;
+ overflow-y : overlay;
+ height : 100%;
+ padding : 0px;
background-color: var(--color3);
&.scrollbody {
.tabs {
- display: flex;
+ display : flex;
flex-flow: column;
- height: 100%;
+ height : 100%;
.nav-link {
text-transform: capitalize;
}
.tab-content {
- height: 100%;
+ height : 100%;
overflow: hidden;
- margin: 0px;
+ margin : 0px;
.tab-pane {
- height: 100%;
- overflow-y: overlay;
- overflow-x: hidden;
- padding: var(--contentInnerPadding);
- padding-inline: 40px;
+ height : 100%;
+ overflow-y : overlay;
+ overflow-x : hidden;
+ padding : var(--contentInnerPadding);
+ padding-inline : 40px;
-webkit-mask-image: linear-gradient(180deg, transparent, white 20px);
.well {
@@ -600,172 +600,172 @@
}
.floating-header {
- position: sticky;
- top: 0;
- left: 0;
- border-bottom: 1px solid rgba(200, 200, 200, 0.05);
- z-index: 6;
- padding: 0px 1em;
+ 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);
- display: none;
+ background : rgba(0, 0, 0, 0.25);
+ top : var(--navigationBarHeight);
+ transition : opacity 0.1s var(--appleEase);
+ display : none;
}
.playlist-display {
- padding: var(--contentInnerPadding);
+ padding : var(--contentInnerPadding);
min-height: 300px;
- position: relative;
+ position : relative;
box-shadow: 0px 4px 6px 3px rgb(0 0 0 / 10%);
transition: min-height 0.5s ease-in-out;
.artworkContainer {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- margin: 0;
- margin-top: calc(var(--navigationBarHeight) * -1);
- margin-bottom: -10px;
- padding: 0;
+ 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);
+ opacity : .7;
+ animation : playlistArtworkFadeIn 1s var(--appleEase);
- .artworkMaterial > img {
- filter: brightness(100%) blur(80px) saturate(100%) contrast(1);
+ .artworkMaterial>img {
+ filter : brightness(100%) blur(80px) saturate(100%) contrast(1);
object-position: center;
- object-fit: cover;
- width: 100%;
- height: 100%;
- transform: unset;
+ 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;
+ 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%;
+ align-items : center;
+ width : 100%;
+ height : 100%;
- > .row {
+ >.row {
width: calc(100% - 32px);
}
.playlist-info {
- flex-shrink: unset;
- display: flex;
- flex-flow: column;
+ flex-shrink : unset;
+ display : flex;
+ flex-flow : column;
justify-content: flex-end;
.playlist-name {
- font-weight: 700;
- font-size: 1.6rem;
+ font-weight : 700;
+ font-size : 1.6rem;
//margin-bottom: 6px;
- margin-right: 6px;
- margin-bottom: 6px;
- flex-shrink: unset;
+ margin-right : 6px;
+ margin-bottom : 6px;
+ flex-shrink : unset;
}
.nameEdit {
font-weight: 700;
- font-size: 1.6rem;
+ font-size : 1.6rem;
flex-shrink: unset;
- background: transparent;
- border: 0px;
- color: inherit;
+ background : transparent;
+ border : 0px;
+ color : inherit;
font-family: inherit;
}
.descriptionEdit {
- font-size: 14px;
+ font-size : 14px;
flex-shrink: unset;
- background: transparent;
- border: 0px;
- color: inherit;
+ background : transparent;
+ border : 0px;
+ color : inherit;
font-family: inherit;
- width: 60vw;
+ width : 60vw;
}
.playlist-artist {
- font-size: 20px;
+ font-size : 20px;
margin-bottom: 6px;
- margin-right: 6px;
- flex-shrink: unset;
+ margin-right : 6px;
+ flex-shrink : unset;
}
.playlist-desc {
- transition: height .2s ease-in-out, opacity .2s ease-in-out;
- box-sizing: border-box;
- font-size: 14px;
- flex-shrink: unset;
+ transition : height .2s ease-in-out, opacity .2s ease-in-out;
+ box-sizing : border-box;
+ font-size : 14px;
+ flex-shrink : unset;
margin-right: 5px;
- max-height: 100px;
- position: relative;
- height: 4vh;
+ max-height : 100px;
+ position : relative;
+ height : 4vh;
.content {
- height: 4vh;
+ height : 4vh;
-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);
+ 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;
+ 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;
+ font-size : 14px;
+ position : relative;
.more-btn {
- appearance: none;
- position: absolute;
- right: 0;
- bottom: 0;
- padding: 0 5px;
- font-size: 14px;
- color: var(--keyColor);
+ 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;
+ 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;
}
}
}
@@ -775,21 +775,21 @@
}
.friends-info {
- display: flex;
+ display : flex;
flex-flow: column;
.badge-container {
- display: flex;
+ display : flex;
flex-flow: wrap;
.socialBadge {
- width: 40px;
- height: 40px;
+ width : 40px;
+ height : 40px;
border-radius: 100%;
- overflow: hidden;
- box-shadow: var(--mediaItemShadow-ShadowSubtle);
- transition: transform .2s var(--appleEase);
- margin: 6px;
+ overflow : hidden;
+ box-shadow : var(--mediaItemShadow-ShadowSubtle);
+ transition : transform .2s var(--appleEase);
+ margin : 6px;
&:hover {
transform: scale(1.2);
@@ -799,38 +799,38 @@
.friends-name {
text-align: center;
- font-size: 0.9em;
- margin: 8px;
+ font-size : 0.9em;
+ margin : 8px;
}
}
.playlist-time {
- font-size: 0.9em;
- margin: 6px;
- opacity: 0.7;
+ font-size : 0.9em;
+ margin : 6px;
+ opacity : 0.7;
transition: height .2s ease-in-out, opacity .2s ease-in-out;
- height: 0.9em;
+ height : 0.9em;
}
&.inline-playlist {
- overflow: hidden;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.5);
- display: flex;
+ overflow : hidden;
+ width : 100%;
+ height : 100%;
+ background : rgba(0, 0, 0, 0.5);
+ display : flex;
justify-content: center;
- align-items: center;
- z-index: 10;
- position: sticky;
- margin-top: calc(var(--navigationBarHeight) * -1);
+ align-items : center;
+ z-index : 10;
+ position : sticky;
+ margin-top : calc(var(--navigationBarHeight) * -1);
.floating-header {
- opacity: 1;
- top: 0px;
- z-index: 6;
- padding: 1em;
+ opacity : 1;
+ top : 0px;
+ z-index : 6;
+ padding : 1em;
backdrop-filter: unset;
- background: black;
+ background : black;
h3 {
display: none;
@@ -838,27 +838,27 @@
}
.playlist-inner {
- background: black;
- width: 80%;
- height: 100%;
- overflow: overlay;
- box-shadow: var(--ciderShadow-Generic);
+ 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;
+ position : sticky;
+ top : 16px;
+ left : 16px;
margin-left: 16px;
- z-index: 7;
+ z-index : 7;
}
}
}
.pilldim {
.nav-pills {
- width: max-content;
- margin: 0 auto;
+ width : max-content;
+ margin : 0 auto;
margin-top: 16px;
}
}
@@ -868,25 +868,24 @@
transition: min-height 0.5s ease-in-out;
min-height: 200px;
- .playlistInfo {
- }
+ .playlistInfo {}
.mediaContainer {
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
- width: 128px !important;
- height: 128px !important;
+ width : 128px !important;
+ height : 128px !important;
}
.playlist-time {
transition: height .2s ease-in-out, opacity .2s ease-in-out;
- height: 0px;
- opacity: 0;
+ height : 0px;
+ opacity : 0;
}
.playlist-desc {
transition: height .2s ease-in-out, opacity .2s ease-in-out;
- height: 0px !important;
- opacity: 0;
+ height : 0px !important;
+ opacity : 0;
}
}
}
@@ -907,20 +906,20 @@
padding-bottom: 128px;
.top-fab {
- height: 52px;
- width: 52px;
- position: fixed;
- bottom: 32px;
- right: 32px;
+ 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);
+ background : rgb(60 60 60);
+ border : 0px;
+ appearance : none;
+ box-shadow : var(--ciderShadow-Generic);
- > svg {
- height: 50%;
- color: #eee;
+ >svg {
+ height : 50%;
+ color : #eee;
pointer-events: none;
}
@@ -942,88 +941,88 @@
.artist-page {
padding: 0px;
- top: 0;
+ 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;
+ 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);
+ 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;
+ bottom : 22px !important;
+ right : 28px;
}
.artist-header {
//background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
- color: white;
- display: flex;
- align-items: center;
+ color : white;
+ display : flex;
+ align-items : center;
justify-content: space-between;
- min-height: 400px;
- position: relative;
- pointer-events: none;
+ min-height : 400px;
+ position : relative;
+ pointer-events : none;
.header-content {
- z-index: 1;
+ z-index : 1;
// margin-top: -16px;
}
.artworkContainer {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- margin: 0;
- padding: 0;
+ 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);
+ opacity : .7;
+ animation : playlistArtworkFadeIn 1s var(--appleEase);
- .artworkMaterial > img {
- filter: brightness(100%) blur(80px) saturate(100%) contrast(1);
+ .artworkMaterial>img {
+ filter : brightness(100%) blur(80px) saturate(100%) contrast(1);
object-position: center;
- object-fit: cover;
- width: 100%;
- height: 100%;
- transform: unset;
+ object-fit : cover;
+ width : 100%;
+ height : 100%;
+ transform : unset;
}
}
.more-btn-round {
position: absolute;
- bottom: 82px;
- right: 28px;
+ bottom : 82px;
+ right : 28px;
}
.animated {
- width: 100%;
- height: 100%;
+ width : 100%;
+ height : 100%;
align-self: center;
- position: absolute;
- overflow: hidden;
+ position : absolute;
+ overflow : hidden;
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
video {
- overflow: hidden;
- height: 100%;
- width: 100%;
+ overflow : hidden;
+ height : 100%;
+ width : 100%;
min-height: 56.25vw;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
+ position : absolute;
+ top : 50%;
+ left : 50%;
+ transform : translate(-50%, -50%);
}
}
@@ -1033,29 +1032,29 @@
}
.artist-image {
- width: 200px;
- height: 200px;
- margin: 32px;
+ 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;
+ 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;
+ cursor : pointer;
+ appearance : none;
+ border : 0px;
+ padding : 0px;
&:hover {
opacity: 1;
@@ -1065,32 +1064,32 @@
background: var(--selected-click);
}
- > svg {
+ >svg {
width: 70%;
}
}
}
.artist-play {
- width: 32px;
- height: 32px;
- background: rgba(100, 100, 100, 0.5);
- box-shadow: var(--ciderShadow-Generic);
+ 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;
+ 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);
+ filter : brightness(75%);
+ transform : scale(0.98);
transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
}
}
@@ -1099,16 +1098,16 @@
.artist-play {
transform: translateY(3px);
- margin: 14px;
+ margin : 14px;
}
&.artist-animation-on {
- width: 100%;
- flex: unset;
+ width : 100%;
+ flex : unset;
margin-left: 0.5em;
- color: whitesmoke;
- position: absolute;
- bottom: 0;
+ color : whitesmoke;
+ position : absolute;
+ bottom : 0;
.artist-play {
display: block;
@@ -1118,45 +1117,45 @@
.artist-body {
padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
- margin: -64px 20px;
+ margin : -64px 20px;
.arow {
- display: flex;
+ display : flex;
overflow: hidden;
- padding: 16px 32px;
+ padding : 16px 32px;
- > .latestRelease {
+ >.latestRelease {
width: 250px;
}
- > .topSongs {
+ >.topSongs {
width: calc(100% - 250px);
}
- &.arowb > .topSongs {
+ &.arowb>.topSongs {
width: 100%;
}
}
}
- &.animated > .artist-body {
- padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
+ &.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;
+ 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;
+ appearance : none;
+ color : var(--keyColor);
+ padding : 8px 12px;
+ cursor : pointer;
+ margin-top : 12px;
+ float : right;
}
.showmoreless:hover {
@@ -1171,8 +1170,8 @@
.themeContextMenu {
background: transparent;
- color: var(--keyColor);
- border: 0px;
+ color : var(--keyColor);
+ border : 0px;
}
.list-group-item {
@@ -1181,35 +1180,35 @@
}
&.applied {
- background: var(--keyColor-disabled);
+ background : var(--keyColor-disabled);
pointer-events: none;
}
}
.repo-header {
- font-size: 16px;
- position: sticky;
- top: 0;
- left: 0;
- right: 0;
- width: 100%;
- height: 50px;
- z-index: 1;
- background: rgba(36, 36, 36, 0.5);
- display: flex;
+ font-size : 16px;
+ position : sticky;
+ top : 0;
+ left : 0;
+ right : 0;
+ width : 100%;
+ height : 50px;
+ z-index : 1;
+ background : rgba(36, 36, 36, 0.5);
+ display : flex;
justify-content: center;
- align-items: center;
+ align-items : center;
backdrop-filter: var(--glassFilter);
- overflow: hidden;
- border-bottom: 1px solid rgb(0 0 0 / 18%);
- border-top: 1px solid rgb(135 135 135 / 18%);
+ overflow : hidden;
+ border-bottom : 1px solid rgb(0 0 0 / 18%);
+ border-top : 1px solid rgb(135 135 135 / 18%);
}
.style-editor-container {
- height: 100%;
- flex: 1;
+ height : 100%;
+ flex : 1;
background: var(--color2);
- padding: 0px;
+ padding : 0px;
overflow-y: overlay;
.list-group-item {
@@ -1227,15 +1226,15 @@
}
.themeLabel {
- display: flex;
+ display : flex;
align-items: center;
}
.handle {
- height: 100%;
- display: flex;
+ height : 100%;
+ display : flex;
justify-content: center;
- align-items: center;
+ align-items : center;
}
.list-group-item {
@@ -1250,17 +1249,17 @@
}
.removeItem {
- border: 0px;
- background: transparent;
- height: 32px;
+ border : 0px;
+ background : transparent;
+ height : 32px;
font-weight: bold;
- color: var(--textColor);
- cursor: pointer;
+ color : var(--textColor);
+ cursor : pointer;
}
.stylesDropdown {
- > .dropdown-menu {
- height: 300px;
+ >.dropdown-menu {
+ height : 300px;
overflow-y: overlay;
}
}
@@ -1272,22 +1271,22 @@
padding: 0px;
.nav {
- width: 90%;
+ width : 90%;
margin: 16px auto 0px;
}
.md-option-header {
- padding: 0px 26px;
+ padding : 0px 26px;
border-bottom: unset;
- border-top: unset;
- font-weight: 600;
- background: rgb(255 255 255 / 0%);
- font-size: 2em;
+ border-top : unset;
+ font-weight : 600;
+ background : rgb(255 255 255 / 0%);
+ font-size : 2em;
}
.settings-option-body-webview {
height: 100%;
- width: 100%;
+ width : 100%;
}
.settings-option-body {
@@ -1300,48 +1299,48 @@
padding: 0px;
.md-option-header {
- padding: 1.25em 1.25em;
+ padding : 1.25em 1.25em;
border-bottom: unset;
- border-top: unset;
- font-weight: 600;
- font-size: 1.0em;
- background: rgb(255 255 255 / 3%);
+ border-top : unset;
+ font-weight : 600;
+ font-size : 1.0em;
+ background : rgb(255 255 255 / 3%);
}
- .carousel-item > img {
+ .carousel-item>img {
object-fit: cover;
- width: 100%;
+ width : 100%;
}
.spprofile-line {
- height: 300px;
- width: 100%;
+ height : 300px;
+ width : 100%;
max-width: 1024px;
- padding: 16px;
- margin: 0 auto;
+ padding : 16px;
+ margin : 0 auto;
.spprofile-viewport {
- height: 100%;
- position: relative;
+ height : 100%;
+ position : relative;
border-radius: var(--mediaItemRadius);
- overflow: hidden;
- box-shadow: var(--mediaItemShadow-Shadow);
- background: black;
+ overflow : hidden;
+ box-shadow : var(--mediaItemShadow-Shadow);
+ background : black;
.spprev,
.nextprev {
- position: absolute;
- height: 100%;
- width: 64px;
- top: 0;
+ position : absolute;
+ height : 100%;
+ width : 64px;
+ top : 0;
background: rgb(0 0 0 / 20%);
- z-index: 1;
- border: 0px;
+ z-index : 1;
+ border : 0px;
transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase);
&:hover {
background: var(--selected);
- transform: scale(1.1);
+ transform : scale(1.1);
}
&:active {
@@ -1350,17 +1349,17 @@
}
&:before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: #eee;
- opacity: 1;
+ content : '';
+ position : absolute;
+ top : 0;
+ left : 0;
+ width : 100%;
+ height : 100%;
+ background : #eee;
+ opacity : 1;
-webkit-mask-position: center;
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-size: 1em;
+ -webkit-mask-repeat : no-repeat;
+ -webkit-mask-size : 1em;
}
}
@@ -1383,25 +1382,25 @@
}
.spslide {
- position: absolute;
- width: 100%;
- height: 100%;
- overflow: hidden;
+ position : absolute;
+ width : 100%;
+ height : 100%;
+ overflow : hidden;
background: black;
- > img {
- WIDTH: 100%;
- height: 100%;
+ >img {
+ WIDTH : 100%;
+ height : 100%;
object-fit: cover;
}
.sptitle {
- position: absolute;
- bottom: 0px;
- left: 0;
- width: 100%;
- text-align: center;
- font-size: 18px;
+ position : absolute;
+ bottom : 0px;
+ left : 0;
+ width : 100%;
+ text-align : center;
+ font-size : 18px;
text-shadow: 0px 2px 4px #00000033;
}
}
@@ -1409,19 +1408,19 @@
.spfade-enter-active,
.spfade-leave-active {
--transitionTime: 0.2s;
- transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
- will-change: opacity, transform;
+ transition : opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
+ will-change : opacity, transform;
}
.spfade-enter {
- opacity: 0;
- transform: scale(1.2) translate3d(0, 0, 0);
+ opacity : 0;
+ transform : scale(1.2) translate3d(0, 0, 0);
will-change: opacity, transform;
}
.spfade-leave-to {
- opacity: 1;
- transform: scale(1) translate3d(0, 0, 0);
+ opacity : 1;
+ transform : scale(1) translate3d(0, 0, 0);
will-change: opacity, transform;
}
}
@@ -1451,79 +1450,79 @@
.md-btn-replay {
background-image: linear-gradient(-45deg, #2e2173, #925042);
- animation: gradient-animation 5s ease-in-out infinite;
- background-size: 400% 400%;
- border: 0px;
- box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
- text-transform: uppercase;
- font-weight: bold;
+ animation : gradient-animation 5s ease-in-out infinite;
+ background-size : 400% 400%;
+ border : 0px;
+ box-shadow : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
+ text-transform : uppercase;
+ font-weight : bold;
}
.md-btn-replay--hero {
- font-size: 1em;
- padding: 16px;
+ font-size : 1em;
+ padding : 16px;
background-image: linear-gradient(-45deg, #2e2173, #925042);
- animation: gradient-animation 5s ease-in-out infinite;
- background-size: 400% 400%;
- border: 0px;
- box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
- margin-top: 1em;
- font-size: 0.9em;
- text-transform: uppercase;
- font-weight: bold;
+ animation : gradient-animation 5s ease-in-out infinite;
+ background-size : 400% 400%;
+ border : 0px;
+ box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
+ margin-top : 1em;
+ font-size : 0.9em;
+ text-transform : uppercase;
+ font-weight : bold;
}
.artist-feed-card {
- position: absolute;
- bottom: 0;
- left: 10%;
- z-index: 1;
- background: black;
- width: 80%;
- height: 96%;
- overflow: scroll;
+ position : absolute;
+ bottom : 0;
+ left : 10%;
+ z-index : 1;
+ background : black;
+ width : 80%;
+ height : 96%;
+ overflow : scroll;
border-radius: 10px;
}
.col.madeforyou-col {
- width: 420px;
+ width : 420px;
min-width: 0px;
max-width: 420px;
}
.well.artistfeed-well {
- margin-top: 0px;
- height: 392px;
+ margin-top : 0px;
+ height : 392px;
align-content: flex-start;
}
.hint-text {
font-size: 0.9rem;
- color: rgb(200 200 200 / 70%);
+ color : rgb(200 200 200 / 70%);
}
.user-icon {
border-radius: 100%;
- width: 128px;
- height: 128px;
- overflow: hidden;
- box-shadow: var(--mediaItemShadow-Shadow);
- margin: 16px;
+ width : 128px;
+ height : 128px;
+ overflow : hidden;
+ box-shadow : var(--mediaItemShadow-Shadow);
+ margin : 16px;
}
.well.profile-well {
- flex-direction: column;
+ flex-direction : column;
justify-content: center;
- align-items: center;
+ align-items : center;
.name {
- margin: 4px;
+ margin : 4px;
font-weight: 500;
}
.handle {
- margin: 4px;
- opacity: 0.7;
+ margin : 4px;
+ opacity : 0.7;
font-weight: 500;
}
}
@@ -1534,31 +1533,31 @@
--replayTextShadow: 0px 3px 2px #6f3f52;
.replay-period {
- height: 200px;
- width: 200px;
- margin: 6px;
- border-radius: var(--mediaItemRadius);
- overflow: hidden;
- cursor: pointer;
- transition: transform .2s var(--appleEase);
+ height : 200px;
+ width : 200px;
+ margin : 6px;
+ border-radius : var(--mediaItemRadius);
+ overflow : hidden;
+ cursor : pointer;
+ transition : transform .2s var(--appleEase);
transition-delay: .1s;
- align-self: center;
+ align-self : center;
&:hover {
- transform: translateY(-6px);
+ transform : translateY(-6px);
transition-delay: 0s;
}
.artwork-container {
height: 200px;
- width: 200px;
+ width : 200px;
}
}
.replay-playlist-container {
.cd-mediaitem-square {
height: 230px;
- width: 230px;
+ width : 230px;
.info-rect {
display: none;
@@ -1568,12 +1567,12 @@
.replay-video {
max-height: 300px;
- max-width: 800px;
- margin: 0 auto;
+ max-width : 800px;
+ margin : 0 auto;
.mediaitem-artwork {
max-height: 300px;
- max-width: 800px;
+ max-width : 800px;
}
.mediaitem-artwork .animatedartwork-view-box .animated video {
@@ -1584,28 +1583,28 @@
.top-genres-container {
.genre-name {
- font-size: 0.9em;
- margin: 6px 0px;
+ font-size : 0.9em;
+ margin : 6px 0px;
font-weight: 500;
}
.genre-count {
- width: 100%;
- height: 32px;
- background: #ffffff14;
+ width : 100%;
+ height : 32px;
+ background : #ffffff14;
border-radius: 10px;
- overflow: hidden;
+ overflow : hidden;
.genre-count-bar {
- height: 100%;
- width: 0%;
- background: var(--keyColor);
- display: flex;
+ height : 100%;
+ width : 0%;
+ background : var(--keyColor);
+ display : flex;
justify-content: center;
- align-items: center;
- min-width: 32px;
- font-size: 0.9em;
- font-weight: 500;
+ align-items : center;
+ min-width : 32px;
+ font-size : 0.9em;
+ font-weight : 500;
}
}
}
@@ -1615,11 +1614,11 @@
animation: replayFadeIn .5s var(--appleEase);
}
- transition: transform .2s var(--appleEase);
+ transition : transform .2s var(--appleEase);
transition-delay: .1s;
&:hover {
- transform: scale(1.1);
+ transform : scale(1.1);
transition-delay: 0s;
}
}
@@ -1628,76 +1627,78 @@
0% {
//border-radius: 100%;
transform: translateY(10px) scale(0.9);
- opacity: 0;
+ opacity : 0;
}
100% {
//border-radius: var(--mediaItemRadius);
transform: scale(1);
- opacity: 1;
+ opacity : 1;
}
}
.replay-viewport {
background-image: linear-gradient(-45deg, #2e2173, #925042);
- animation: gradient-animation 5s ease-in-out infinite;
- background-size: 400% 400%;
- padding: 16px 40px;
- border-radius: 10px;
- box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
- color: rgb(238 238 238 / 86%);
+ animation : gradient-animation 5s ease-in-out infinite;
+ background-size : 400% 400%;
+ padding : 16px 40px;
+ border-radius : 10px;
+ box-shadow : var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
+ color : rgb(238 238 238 / 86%);
.replay-header {
- text-align: center;
- font-size: 3em;
+ text-align : center;
+ font-size : 3em;
text-shadow: var(--replayTextShadow);
}
}
.replay-card {
background: transparent;
- border: 0px;
+ border : 0px;
}
}
.content-inner.oobe {
- position: absolute;
- overflow: hidden;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- display: grid;
+ position : absolute;
+ overflow : hidden;
+ top : 0;
+ left : 0;
+ bottom : 0;
+ right : 0;
+ display : grid;
place-items: center;
- width: 100%;
- background: #1e1e1e;
+ width : 100%;
+ background : #1e1e1e;
.oobe-view {
- display: flex;
- flex-direction: column;
+ display : flex;
+ flex-direction : column;
justify-content: center;
- align-items: center;
- gap: 32px;
- max-width: 1280px;
- max-height: 720px;
- align-self: center;
- justify-self: center;
- height: 100%;
- width: 100%;
+ align-items : center;
+ gap : 32px;
+ max-width : 1280px;
+ max-height : 720px;
+ align-self : center;
+ justify-self : center;
+ height : 100%;
+ width : 100%;
.oobe-header {
- font-size: 3em;
+ font-size : 3em;
text-shadow: var(--replayTextShadow);
font-weight: 600;
}
.oobe-body {
- flex: 1;
- width: 100%;
- background: #ffffff0d;
+ flex : 1;
+ width : 100%;
+ background : #ffffff0d;
border-radius: 20px;
- padding: 3em;
+ padding : 3em;
+ overflow-y : scroll;
+ overflow-x : hidden;
&.text {
white-space: pre-wrap;
@@ -1705,7 +1706,7 @@
.blurb {
white-space: pre-wrap;
- margin: 16px;
+ margin : 16px;
line-height: 1.5em;
}
@@ -1714,48 +1715,63 @@
.stylePicker {
border-radius: 10px;
- overflow: hidden;
- cursor: pointer;
- transition: .25s all;
- box-shadow: 0px 2px 6px rgb(0 0 0 / 25%);
+ overflow : hidden;
+ cursor : pointer;
+ transition : 0.25s all;
+ box-shadow : 0px 2px 6px rgba(0, 0, 0, 0.25);
+ width : 450px;
+ margin : 0 auto;
.visualPreview {
pointer-events: none;
- transition: .25s all;
- width: 100%;
- filter: drop-shadow(0px 8px 6px rgb(0 0 0 / 30%));
+ transition : .25s all;
+ width : 100%;
+ }
+
+ .card-body {
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.card-footer {
- font-size: 1.25em;
+ font-size : 1.25em;
font-weight: 500;
+ position : absolute;
+ bottom : 0;
+ left : 0;
+ width : 100%;
+ border:0px;
+ text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+ font-weight: bold;
+ }
+
+ &.style-active {
+ outline: 4px solid var(--keyColor);
}
&:hover {
- transform: scale(1.10) translateZ(-1px);
- z-index: 1;
+ transform : scale(1.10) translateZ(-1px) translateY(10px);
+ z-index : 1;
box-shadow: 0px 12px 16px rgb(0 0 0 / 25%);
-
- .visualPreview {
- transform: scale(1.5) translateZ(-1px);
- }
}
}
}
}
.oobe-footer {
- display: flex;
- flex-direction: row;
+ display : flex;
+ flex-direction : row;
justify-content: center;
- align-items: center;
- padding: 16px;
+ align-items : center;
+ padding : 16px;
.md-btn {
- font-size: 18px;
- min-width: 128px;
+ font-size : 18px;
+ min-width : 128px;
text-align: center;
}
}
@@ -1770,20 +1786,20 @@
}
.header-desc {
- font-size: 1em;
+ font-size : 1em;
font-weight: 400;
}
.artworkContainer {
height: 300px;
- width: 100%;
+ width : 100%;
img {
- height: 100%;
- width: 100%;
- overflow: hidden;
+ height : 100%;
+ width : 100%;
+ overflow : hidden;
object-fit: cover;
- filter: unset;
+ filter : unset;
&:last-child {
transform: unset;
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index b33357bd..9e6ac995 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -628,7 +628,9 @@ const app = new Vue({
},
async init() {
let self = this
-
+ if(!localStorage.getItem("seenOOBE")) {
+ localStorage.setItem("seenOOBE", 1)
+ }
if (this.cfg.visual.styles.length != 0) {
await this.reloadStyles()
}
diff --git a/src/renderer/views/pages/oobe.ejs b/src/renderer/views/pages/oobe.ejs
index af26a9f6..defb2bc4 100644
--- a/src/renderer/views/pages/oobe.ejs
+++ b/src/renderer/views/pages/oobe.ejs
@@ -1,7 +1,7 @@