diff --git a/src/i18n/fi_FI.json b/src/i18n/fi_FI.json
new file mode 100644
index 00000000..43821536
--- /dev/null
+++ b/src/i18n/fi_FI.json
@@ -0,0 +1,313 @@
+{
+ "i18n.languageName": "Suomi (FI)",
+ "i18n.languageNameEnglish": "Finnish (FI)",
+ "i18n.category": "main",
+ "i18n.authors": "@marcusziade",
+ "app.name": "Cider",
+ "date.format": "${d} ${m}, ${y}",
+ "dialog.cancel": "Peruuta",
+ "dialog.ok": "OK",
+ "notification.updatingLibrarySongs": "Päivitä kirjaston kappaleet...",
+ "notification.updatingLibraryAlbums": "Päivitä kirjaston albumit...",
+ "notification.updatingLibraryArtists": "Päivitä kirjaston artistit...",
+ "term.appleInc": "Apple Inc.",
+ "term.appleMusic": "Apple Music",
+ "term.applePodcasts": "Apple Podcasts",
+ "term.itunes": "iTunes",
+ "term.github": "GitHub",
+ "term.discord": "Discord",
+ "term.learnMore": "Näytä lisää",
+ "term.accountSettings": "Tilin asetukset",
+ "term.logout": "Kirjaudu ulos",
+ "term.login": "Kirjaudu sisään",
+ "term.about": "Lisätietoja",
+ "term.privateSession": "Yksityinen tila",
+ "term.queue": "Jono",
+ "term.search": "Etsi",
+ "term.library": "Kirjasto",
+ "term.listenNow": "Kuuntele nyt",
+ "term.browse": "Selaa",
+ "term.radio": "Radio",
+ "term.recentlyAdded": "Viimeksi lisätyt",
+ "term.songs": "Kappaleet",
+ "term.albums": "Albumit",
+ "term.artists": "Artistit",
+ "term.podcasts": "Podcastit",
+ "term.playlists": "Soittolistat",
+ "term.playlist": "Soittolista",
+ "term.newPlaylist": "Uusi soittolista",
+ "term.newPlaylistFolder": "Uusi soittolistakansio",
+ "term.createNewPlaylist": "Luo uusi soittolista",
+ "term.createNewPlaylistFolder": "Luo uusi soittolistakansio",
+ "term.deletePlaylist": "Oletko varma, että haluat poistaa tämän soittolistan?",
+ "term.play": "Soita",
+ "term.pause": "Tauko",
+ "term.previous": "Edellinen",
+ "term.next": "Seuraava",
+ "term.shuffle": "Sekoita",
+ "term.repeat": "Toista",
+ "term.volume": "Volyymi",
+ "term.mute": "Mykistä",
+ "term.unmute": "Poista mykistys",
+ "term.share": "Jaa",
+ "term.settings": "Asetukset",
+ "term.seeAll": "Näe kaikki",
+ "term.sortBy": "Järjestä",
+ "term.sortBy.album": "Järjestä albumin mukaan",
+ "term.sortBy.artist": "Järjestä artistin mukaan",
+ "term.sortBy.name": "Järjestä nimen mukaan",
+ "term.sortBy.genre": "Järjestä genren mukaan",
+ "term.sortBy.releaseDate": "Julkaisupäivä",
+ "term.sortBy.duration": "Pituus",
+ "term.sortOrder": "Järjestys",
+ "term.sortOrder.ascending": "Nousevassa järjestyksessä",
+ "term.sortOrder.descending": "Laskevassa järjestyksessä",
+ "term.viewAs": "Näytä kuin",
+ "term.viewAs.coverArt": "Kansikuva",
+ "term.viewAs.list": "Lista",
+ "term.size": "Koko",
+ "term.size.normal": "Normaali",
+ "term.size.compact": "Kompakti",
+ "term.enable": "Ota käyttöön",
+ "term.disable": "Poista käytöstä",
+ "term.enabled": "Käytössä",
+ "term.disabled": "Poissa käytöstä",
+ "term.connect": "Yhdistä",
+ "term.connecting": "Yhdistää",
+ "term.disconnect": "Katkaise",
+ "term.authed": "Tunnistettu",
+ "term.confirm": "Vahvista",
+ "term.more": "Lisää",
+ "term.less": "Vähemmän",
+ "term.showMore": "Näytä lisää",
+ "term.showLess": "Näytä vähemmän",
+ "term.topSongs": "Huippukappaleet",
+ "term.latestReleases": "Viimeisimmät julkaisut",
+ "term.time.added": "Lisätty",
+ "term.time.released": "Julkaistu",
+ "term.time.updated": "Päivitetty",
+ "term.time.hours": "Tuntia",
+ "term.time.hour": "Tunti",
+ "term.time.minutes": "Minuuttiaa",
+ "term.time.minute": "Minuutti",
+ "term.time.seconds": "Sekuntia",
+ "term.time.second": "Sekunti",
+ "term.fullscreenView": "Koko näytön näkymä",
+ "term.defaultView": "Oletusnäkymä",
+ "term.audioSettings": "Ääniasetukset",
+ "term.clearAll": "Puhdista kaikki",
+ "term.recentStations": "Viimeisimmät asemat",
+ "term.language": "Kieli",
+ "term.funLanguages": "Hauskat kielet",
+ "term.noLyrics": "Ei sanoituksia",
+ "term.copyright": "Tekijänoikeus",
+ "term.rightsReserved": "Oikeudet pidätetään",
+ "term.sponsor": "Sponsoroi tätä projektia",
+ "term.ciderTeam": "Cider tiimi",
+ "term.developer": "Kehittäjä",
+ "term.socialTeam": "Sosiaalinen tiimi",
+ "term.socials": "Sosiaaliset mediat",
+ "term.contributors": "Avustaja",
+ "term.equalizer": "Taajuuskorjain",
+ "term.reset": "Nollaa",
+ "term.tracks": "Kappaleita",
+ "term.videos": "Videoita",
+ "term.menu": "Valikko",
+ "term.check": "Tarkista",
+ "term.aboutArtist": "Lisätiedot {{artistName}}",
+ "home.title": "Koti",
+ "home.recentlyPlayed": "Viimeksi soitetut",
+ "home.recentlyAdded": "Viimeksi lisätyt",
+ "home.artistsFeed": "Artisti syöte",
+ "home.artistsFeed.noArtist": "Seuraa joitain artisteja nähdäksesi heidän uusimmat julkaisunsa.",
+ "home.madeForYou": "Tehty sinulle",
+ "home.friendsListeningTo": "Kaverit kuuntelee",
+ "home.followedArtists": "Seuratut artistit",
+ "error.appleMusicSubRequired": "Apple Music vaatii tilauksen.",
+ "error.connectionError": "Apple Musiciin yhdistämisessä oli ongelma.",
+ "error.noResults": "Ei tuloksia.",
+ "error.noResults.description": "Kokeile uutta hakua.",
+ "podcast.followOnCider": "Seuraa Ciderissa",
+ "podcast.followedOnCider": "Seurattu Ciderissa",
+ "podcast.subscribeOnItunes": "Tilaa iTunesissa",
+ "podcast.subscribedOnItunes": "Tilattu iTunesissa",
+ "podcast.itunesStore": "iTunes Store",
+ "podcast.episodes": "Jakso",
+ "podcast.playEpisode": "Toista jakso",
+ "podcast.website": "Avaa nettisivu",
+ "action.addToLibrary": "Lisää kirjastoon",
+ "action.addToLibrary.success": "Lisätty kirjastoon",
+ "action.addToLibrary.error": "Virhe lisättäessä kirjastoon",
+ "action.removeFromLibrary": "Poista kirjastosta",
+ "action.removeFromLibrary.success": "Poistettu kirjastosta",
+ "action.addToQueue": "Lisää jonoon",
+ "action.addToQueue.success": "Lisätty jonoon",
+ "action.addToQueue.error": "Virhe lisättäessä jonoon",
+ "action.removeFromQueue": "Poista jonosta",
+ "action.removeFromQueue.success": "Poistettu jonosta",
+ "action.removeFromQueue.error": "Virhe poistettaessa jonosta",
+ "action.createPlaylist": "Luo uusi soittolista",
+ "action.addToPlaylist": "Lisää soittolistaan",
+ "action.removeFromPlaylist": "Poista soittolistasta",
+ "action.addToFavorites": "Lisää suosikkeihin",
+ "action.follow": "Seuraa",
+ "action.follow.success": "Seurattu",
+ "action.follow.error": "Virhe seurattaessa",
+ "action.unfollow": "Lopeta seuraaminen",
+ "action.unfollow.success": "Seuraaminen lopetettu",
+ "action.unfollow.error": "Virhe seuraamisen lopetuksessa",
+ "action.playNext": "Toista seuraavaksi",
+ "action.playLater": "Toista myöhemmin",
+ "action.startRadio": "Aloita radio",
+ "action.goToArtist": "Näytä artisti",
+ "action.goToAlbum": "Näytä albumi",
+ "action.moveToTop": "Siirrä kärkeen",
+ "action.share": "Jaa",
+ "action.rename": "Nimeä uudelleen",
+ "action.love": "Tykkää",
+ "action.unlove": "Poista tykkäys",
+ "action.dislike": "En tykkää",
+ "action.undoDislike": "Kumoa en tykkää",
+ "action.showWebRemoteQR": "Cider web kaukoohjain",
+ "action.playTracksNext": "Toista ${app.selectedMediaItems.length} kappaleet seuraavaksi",
+ "action.playTracksLater": "Toista ${app.selectedMediaItems.length} kappaleet myöhemmin",
+ "action.removeTracks": "Poista ${self.selectedItems.length} kappaleet jonosta",
+ "action.import": "Tuonti",
+ "action.export": "Vienti",
+ "action.showAlbum": "Näytä albumi",
+ "action.tray.minimize": "Pienennä",
+ "action.tray.quit": "Sammuta",
+ "action.tray.show": "Näytä",
+ "action.update": "Päivitä",
+ "settings.header.general": "Yleistä",
+ "settings.header.general.description": "Muuta yleisasetuksia",
+ "settings.option.general.language": "Kieli",
+ "settings.option.general.language.main": "Kieli",
+ "settings.option.general.language.fun": "Hauskat kielet",
+ "settings.option.general.language.unsorted": "Lajittelematon",
+ "settings.header.audio": "Ääni",
+ "settings.header.audio.description": "Muuta ääniasetuksia",
+ "settings.option.audio.quality": "Äänenlaatu",
+ "settings.header.audio.quality.high": "Korkea",
+ "settings.option.audio.seamlessTransition": "Saumaton siirtyminen",
+ "settings.option.audio.enableAdvancedFunctionality": "Ota lisätoiminnot käyttöön",
+ "settings.option.audio.enableAdvancedFunctionality.description": "AudioContext-toiminnon ottaminen käyttöön mahdollistaa laajennetut ääniominaisuudet, kuten äänen normalisoinnin, taajuuskorjaimet ja visualisoijat, mutta joissakin järjestelmissä tämä voi aiheuttaa ääniraitojen pätkimistä.",
+ "settings.warn.audio.enableAdvancedFunctionality.lowcores": "Cider uskoo, että tietokoneesi ei voi käsitellä näitä ominaisuuksia. Oletko varma, että haluat jatkaa?",
+ "settings.option.audio.enableAdvancedFunctionality.audioNormalization": "Äänen normalisointi",
+ "settings.option.audio.enableAdvancedFunctionality.audioNormalization.description": "Normalisoi yksittäisten kappaleiden huippuäänenvoimakkuuden luodakseen yhtenäisemmän kuuntelukokemuksen. (Ei toimi käyttäjien lataamilla kappaleilla)",
+ "settings.header.visual": "Ulkonäkö",
+ "settings.header.visual.description": "Muuta ulkonäköä.",
+ "settings.option.visual.windowBackgroundStyle": "Taustatyyli",
+ "settings.header.visual.windowBackgroundStyle.none": "Ei taustatyyliä",
+ "settings.header.visual.windowBackgroundStyle.artwork": "Taideteos",
+ "settings.header.visual.windowBackgroundStyle.image": "Kuva",
+ "settings.option.visual.animatedArtwork": "Animoitu taideteos",
+ "settings.header.visual.animatedArtwork.always": "Aina",
+ "settings.header.visual.animatedArtwork.limited": "Ainoastaa sivuilla joilla se on tarvittua",
+ "settings.header.visual.animatedArtwork.disable": "Ei koskaan",
+ "settings.option.visual.animatedArtworkQuality": "Animoinnin laatu",
+ "settings.header.visual.animatedArtworkQuality.low": "Alhainen",
+ "settings.header.visual.animatedArtworkQuality.medium": "Keskinkertainen",
+ "settings.header.visual.animatedArtworkQuality.high": "Korkea",
+ "settings.header.visual.animatedArtworkQuality.veryHigh": "Erittäin korkea",
+ "settings.header.visual.animatedArtworkQuality.extreme": "Korkein",
+ "settings.option.visual.animatedWindowBackground": "Animoitu tausta",
+ "settings.option.visual.hardwareAcceleration": "Laitteistokiihdytys",
+ "settings.option.visual.hardwareAcceleration.description": "Vaatii uudelleenkäynnistyksen",
+ "settings.header.visual.hardwareAcceleration.default": "Vakio",
+ "settings.header.visual.hardwareAcceleration.webGPU": "WebGPU",
+ "settings.option.visual.showPersonalInfo": "Näytä henkilökohtaiset tiedot",
+ "settings.header.lyrics": "Sanoitukset",
+ "settings.header.lyrics.description": "Muuta sanoitusasetuksia",
+ "settings.option.lyrics.enableMusixmatch": "Käytä MusicXMatchia Apple Music sanoituksien sijaan",
+ "settings.option.lyrics.enableMusixmatchKaraoke": "Aktivoi karaoketila (Vain MusicXMatch)",
+ "settings.option.lyrics.musixmatchPreferredLanguage": "MusicXMatch ensisijainen kieli",
+ "settings.option.lyrics.enableYoutubeLyrics": "Käytä Youtube sanoituksia videoissa",
+ "settings.header.connectivity": "Yhteys",
+ "settings.header.connectivity.description": "Muuta yhteysasetuksia",
+ "settings.option.connectivity.discordRPC": "Discord integraatio (discordRPC)",
+ "settings.option.connectivity.playbackNotifications": "Toistoilmoitukset",
+ "settings.option.connectivity.discordRPC.clearOnPause": "Poista Discord ilmoitus, kun tauotat kappaleen",
+ "settings.option.connectivity.lastfmScrobble": "Last.fm integraatio",
+ "settings.option.connectivity.lastfmScrobble.delay": "Last.fm viive i %",
+ "settings.option.connectivity.lastfmScrobble.nowPlaying": "Näytä mikä kappale Last.fm palvelussa",
+ "settings.option.connectivity.lastfmScrobble.removeFeatured": "Älä näytä extra tietoja Last.fm palvelussa",
+ "settings.option.connectivity.lastfmScrobble.filterLoop": "Suodata pakkotoisteut kappaleet",
+ "settings.header.experimental": "Testi",
+ "settings.header.experimental.description": "Muuta testi asetuksia.",
+ "settings.option.experimental.compactUI": "Kompakti näkymä",
+ "settings.option.window.close_button_hide": "Suljenappi pienentää Cider ikkunan",
+ "spatial.notTurnedOn": "Äänen spatialisointi on poistettu käytöstä. Ota se käyttöön ennen käyttöä.",
+ "spatial.spatialProperties": "Äänen spatialisointi asetukset",
+ "spatial.width": "Leveys",
+ "spatial.height": "Korkeus",
+ "spatial.depth": "Syvyys",
+ "spatial.gain": "Tilavyöhyke",
+ "spatial.roomMaterials": "Huoneen materiaalit",
+ "spatial.roomDimensions": "Huoneen koko",
+ "spatial.roomPositions": "Huoneen sijainti",
+ "spatial.setDimensions": "Valitse koko",
+ "spatial.setPositions": "Valitse sijainnit",
+ "spatial.up": "Ylös",
+ "spatial.front": "Eteenpäin",
+ "spatial.left": "Vasemmalle",
+ "spatial.right": "Oikealle",
+ "spatial.back": "Taaksepäin",
+ "spatial.down": "Alaspäin",
+ "spatial.listener": "Kuuntelija",
+ "spatial.audioSource": "Äänenlähde",
+ "settings.header.unfinished": "Keskeneräinen",
+ "remote.web.title": "Ciderin kaukosäädin",
+ "remote.web.description": "Skannaa QR-koodi yhdistääksesi puhelimesi tämän Cider-instanssin kanssa",
+ "about.thanks": "Suuri kiitos Cider Collective Teamille ja kaikille avustajillemme.",
+ "oobe.yes": "Kyllä",
+ "oobe.no": "Ei",
+ "oobe.next": "Seuraava",
+ "oobe.previous": "Edellinen",
+ "oobe.done": "Valmis",
+ "oobe.amupsell.title": "Ennenkuin aloitamme",
+ "oobe.amupsell.text": "Cider vaatii aktiivisen, maksullisen Apple Music -tilauksen\nCider ei toimi Apple Music Voice Planin tai joidenkin tarjouskilpailutilausten kanssa. Jos sinulla on jo hyväksytty Apple Music -tilaus, napsauta Seuraava jatkaaksesi",
+ "oobe.amupsell.subscribeBtn": "Tilaa Apple Music",
+ "oobe.amupsell.explainBtn": "Selitä",
+ "oobe.amupsell.subscribeUrl": "https://apple.co/3MdqJVQ",
+ "oobe.amupsell.amWebUrl": "https://beta.music.apple.com/",
+ "oobe.amupsell.promoExplained": "Joillakin promootiotilauksilla ja muilla kuin yhdysvaltalaisilla Apple Music -kokeilutilauksilla ei ole pääsyä vaadittuihin Apple Music Web Player API:ihin, joita Cider tarvitsee toimiakseen. Tarkistaaksesi, toimiiko aktiivinen kokeiluversiosi Ciderin kanssa, mene osoitteeseen: {{ subscribeUrl }}",
+ "oobe.intro.title": "Tervetuloa Cideriin",
+ "oobe.intro.subtitle": "",
+ "oobe.intro.text": "Otetaan käyttöön muutamia asioita, jotta voit käyttää Cideriä haluamallasi tavalla. Voit aina muuttaa näitä asetuksia myöhemmin.",
+ "oobe.general.title": "Yleistä",
+ "oobe.general.subtitle": "",
+ "oobe.general.text": "",
+ "oobe.audio.title": "Ääni",
+ "oobe.audio.subtitle": "",
+ "oobe.audio.text": "Cider sisältää mukautetun viritetyn ja suunnitellun äänipinon, joka tarjoaa rikkaan korkealaatuisen äänikokemuksen.\nSisältää Cider Adrenaliinin, Atmosphere Realizerin ja Spatialized Audion.\nTämän toiminnon mahdollistamiseksi \"Advanced Audio Functionality\" on otettava käyttöön.\nOta käyttöön Advanced Audio Toiminnallisuus antaa sinulle pääsyn näihin parannuksiin Cider Audio Labsissa, joka löytyy sovelluksen asetuksista.",
+ "oobe.audio.advancedFunctionality": "",
+ "oobe.visual.title": "Ulkonäkö",
+ "oobe.visual.subtitle": "",
+ "oobe.visual.text": "",
+ "oobe.visual.layout.text": "Ciderissä on kaksi erilaista ikkuna-asettelua.\nMaverick on iTunesin kaltainen asettelu, jossa soitin on ikkunan yläosassa.\nMojave on Cider Collectiven luoma uusi kierros.\n\nVoit muuttaa asettelua milloin tahansa asetuksista.",
+ "oobe.visual.suggestingThemes": "Teema on loistava tapa muokata kokemustasi. Tässä on muutamia ehdotuksia: ",
+ "oobe.visual.suggestingThemes.subtext": "(Nämä teemat ladataan GitHubista)",
+ "oobe.visual.suggestingThemes.default": "Cider",
+ "oobe.visual.suggestingThemes.default.text": "Klassinen Ciderteema.",
+ "oobe.visual.suggestingThemes.dark": "Pimeys",
+ "oobe.visual.suggestingThemes.dark.text": "Pimeys",
+ "oobe.visual.suggestingThemes.community1": "Groovy",
+ "oobe.visual.suggestingThemes.community1.text": "WinUI-vaikutteinen teema",
+ "oobe.visual.suggestingThemes.community2": "iTheme",
+ "oobe.visual.suggestingThemes.community2.text": "Klassinen Big fruit teema",
+ "oobe.visual.suggestingThemes.community3": "Dracula",
+ "oobe.visual.suggestingThemes.community3.text": "Ikoninen Dracula-värimaailma",
+ "oobe.amsignin.title": "",
+ "share.platform.twitter.tweet": "Kuuntele kappaletta {{song}} Apple Musicissa.\n\n{{url}}\n\n#AppleMusic #Cider",
+ "share.platform.twitter": "Twitter",
+ "share.platform.facebook": "Facebook",
+ "share.platform.reddit": "Reddit",
+ "share.platform.telegram": "Telegram",
+ "share.platform.whatsapp": "WhatsApp",
+ "share.platform.messenger": "Messenger",
+ "share.platform.email": "Sähköposti",
+ "share.platform.songLink": "Kopioi song.link",
+ "share.platform.clipboard": "Kopioi linkki"
+ }
+
\ No newline at end of file
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..5f20c12f 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("music.ampwebplay.media-user-token") && 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 a10cbd80..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;
- background-color: var(--color1);
+ 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 d621c318..96c5aa03 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -629,7 +629,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/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 7dcd1184..7e909ca9 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -53,7 +53,7 @@
<%- include('../svg/chevron-right.svg') %>
-
-
+
-
+
+ 
+ 