diff --git a/package.json b/package.json index 89aeaf73..0f94d1bc 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@sentry/electron": "^3.0.2", "@sentry/integrations": "^6.18.1", "adm-zip": "0.4.10", + "castv2-client": "^1.2.0", "chokidar": "^3.5.3", "discord-rpc": "^4.0.1", @@ -48,7 +49,7 @@ "electron-notarize": "^1.1.1", "electron-store": "^8.0.1", "electron-updater": "^4.6.5", - "electron-vibrancy-updated": "git+https://github.com/ciderapp/electron-vibrancy-updated", + "electron-window-state": "^5.0.3", "express": "^4.17.3", "get-port": "^5.1.1", @@ -76,7 +77,7 @@ "@types/express": "^4.17.13", "@types/qrcode-terminal": "^0.12.0", "@types/ws": "^8.5.1", - "electron": "git+https://github.com/castlabs/electron-releases.git#16-x-y", + "electron": "git+https://github.com/castlabs/electron-releases.git", "electron-builder": "^22.14.13", "electron-builder-notarize-pkg": "^1.2.0", "electron-webpack": "^2.8.2", @@ -108,9 +109,9 @@ } ], "build": { - "electronVersion": "16.0.7", + "electronVersion": "17.1.0", "electronDownload": { - "version": "16.0.7+wvcus", + "version": "18.0.0-alpha.5+wvcus", "mirror": "https://github.com/castlabs/electron-releases/releases/download/v" }, "appId": "cider", diff --git a/resources/icons/icon.icns b/resources/icons/icon.icns index 2325c333..4276a463 100644 Binary files a/resources/icons/icon.icns and b/resources/icons/icon.icns differ diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts index c415e6bf..b9dd9734 100644 --- a/src/main/base/browserwindow.ts +++ b/src/main/base/browserwindow.ts @@ -60,6 +60,7 @@ export class BrowserWindow { "pages/replay", "pages/audiolabs", "pages/zoo", + "pages/plugin-renderer", "components/mediaitem-artwork", "components/artwork-material", "components/menu-panel", @@ -90,8 +91,14 @@ export class BrowserWindow { "components/miniplayer", "components/castmenu", "components/artist-chip", + "components/hello-world", ], appRoutes: [ + { + page: "plugin-renderer", + component: ``, + condition: "page == 'plugin-renderer'" + }, { page: "zoo", component: "", diff --git a/src/main/index.ts b/src/main/index.ts index 2d49cc66..5d181f04 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -1,6 +1,6 @@ require('v8-compile-cache'); -import {app, components, ipcMain} from 'electron'; +const {app, components, ipcMain} = require('electron'); import {join} from 'path'; if (!app.isPackaged) { @@ -41,8 +41,7 @@ app.on('ready', () => { require('vue-devtools').install() } - app.whenReady().then(async () => { - await components.whenReady(); + components.whenReady().then(async () => { const bw = new BrowserWindow() const win = await bw.createWindow() @@ -51,11 +50,11 @@ app.on('ready', () => { }) console.log('[Cider][Widevine] Status:', components.status()); + win.show(); win.on("ready-to-show", () => { Cider.bwCreated(); CiderPlug.callPlugins('onReady', win); - win.show(); }); }); diff --git a/src/renderer/audio/audio.js b/src/renderer/audio/audio.js index 8f24d107..76e3eedc 100644 --- a/src/renderer/audio/audio.js +++ b/src/renderer/audio/audio.js @@ -438,238 +438,190 @@ const CiderAudio = { }, hierarchical_loading: function (){ CiderAudio.hierarchical_unloading(); - - // Vibrant Bass, CAP, Analog Warmth, Spatial - if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier !== 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === true && - app.cfg.audio.spatial === true && - app.cfg.audio.maikiwiAudio.analogWarmth === true) { - + + if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier !== 0) { // Vibrant Bass CiderAudio.vibrantbass_h2_1(true) - CiderAudio.llpw_h2_2(true, 2); - CiderAudio.analogWarmth_h2_3(true, 3); - if (app.cfg.audio.maikiwiAudio.spatial === true) { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); - CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.analogWarmth[0]); - app.cfg.audio.normalization = true; - console.debug('[Cider][Audio] Vibrant Bass, CAP, Analog Warmth, Maikiwi Spatial') - } - else { - app.cfg.audio.normalization = true; - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); - CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.analogWarmth[0]); - console.debug('[Cider][Audio] Vibrant Bass, CAP, Analog Warmth, Spatial') - } + if (app.cfg.audio.maikiwiAudio.ciderPPE === true) { // Vibrant Bass, CAP + CiderAudio.llpw_h2_2(true, 2); - + if (app.cfg.audio.maikiwiAudio.analogWarmth === true) { // Vibrant Bass, CAP, Analog Warmth + CiderAudio.analogWarmth_h2_3(true, 3); - } - // CAP, Analog Warmth, Spatial - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier === 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === true && - app.cfg.audio.spatial === true && - app.cfg.audio.maikiwiAudio.analogWarmth === true) { - - CiderAudio.llpw_h2_2(true, 1); - CiderAudio.analogWarmth_h2_3(true, 3); - - if (app.cfg.audio.maikiwiAudio.spatial === true) { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); - CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.analogWarmth[0]); - app.cfg.audio.normalization = true; - console.debug('[Cider][Audio] CAP, Analog Warmth, Maikiwi Spatial') - } - else { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); - CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.analogWarmth[0]); - console.debug('[Cider][Audio] CAP, Analog Warmth, Spatial') - } - } - // Vibrant Bass, CAP, Spatial - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier !== 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === true && - app.cfg.audio.spatial === true && - app.cfg.audio.maikiwiAudio.analogWarmth === false) { - - CiderAudio.vibrantbass_h2_1(true) - CiderAudio.llpw_h2_2(true, 2); - if (app.cfg.audio.maikiwiAudio.spatial === true) { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); - CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.llpw[0]); - app.cfg.audio.normalization = true - console.debug('[Cider][Audio] Vibrant Bass, CAP, Maikiwi Spatial') - } - else { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); - CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.llpw[0]); - console.debug('[Cider][Audio] Vibrant Bass, CAP, Spatial') - } - - } - // Vibrant Bass, CAP, Analog Warmth - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier !== 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === true && - app.cfg.audio.spatial === false && - app.cfg.audio.maikiwiAudio.analogWarmth === true) { - - CiderAudio.vibrantbass_h2_1(true) - CiderAudio.llpw_h2_2(true, 2); - CiderAudio.analogWarmth_h2_3(true, 3); - - app.cfg.audio.normalization = true; - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]); - console.debug('[Cider][Audio] Vibrant Bass, CAP, Analog Warmth') - } - // CAP, Spatial - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier === 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === true && - app.cfg.audio.spatial === true && - app.cfg.audio.maikiwiAudio.analogWarmth === false) { - - CiderAudio.llpw_h2_2(true, 1); - if (app.cfg.audio.maikiwiAudio.spatial === true) { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); - CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.llpw[0]); - app.cfg.audio.normalization = true; - console.debug('[Cider][Audio] CAP, Maikiwi Spatial') - } - else { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); - CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.llpw[0]); - console.debug('[Cider][Audio] CAP, Spatial') - } - } - // Analog Warmth, Spatial - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier === 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === false && - app.cfg.audio.spatial === true && - app.cfg.audio.maikiwiAudio.analogWarmth === true) { - - CiderAudio.analogWarmth_h2_3(true, 1); - if (app.cfg.audio.maikiwiAudio.spatial === true) { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); - CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.analogWarmth[0]); - app.cfg.audio.normalization = true; - console.debug('[Cider][Audio] Analog Warmth, Maikiwi Spatial') - } - else { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); - CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.analogWarmth[0]); - console.debug('[Cider][Audio] Analog Warmth, Spatial') - } - } - // CAP, Analog Warmth - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier === 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === true && - app.cfg.audio.spatial === false && - app.cfg.audio.maikiwiAudio.analogWarmth === true) { - - CiderAudio.llpw_h2_2(true, 1); - CiderAudio.analogWarmth_h2_3(true, 3); - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]); - console.debug('[Cider][Audio] CAP and Analog Warmth') - } - // Vibrant Bass, Analog Warmth - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier !== 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === false && - app.cfg.audio.spatial === false && - app.cfg.audio.maikiwiAudio.analogWarmth === true) { - - CiderAudio.vibrantbass_h2_1(true) - CiderAudio.analogWarmth_h2_3(true, 2); - app.cfg.audio.normalization = true; - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]); - console.debug('[Cider][Audio] Vibrant Bass, Analog Warmth') - } - - // Vibrant Bass, CAP - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier !== 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === true && - app.cfg.audio.spatial === false && - app.cfg.audio.maikiwiAudio.analogWarmth === false) { - - CiderAudio.vibrantbass_h2_1(true) - CiderAudio.llpw_h2_2(true, 2); - - app.cfg.audio.normalization = true; - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.llpw[0]); - console.debug('[Cider][Audio] Vibrant Bass, CAP') - } - // Vibrant Bass, Spatial - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier !== 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === false && - app.cfg.audio.spatial === true && - app.cfg.audio.maikiwiAudio.analogWarmth === false) { - - CiderAudio.vibrantbass_h2_1(true) - if (app.cfg.audio.maikiwiAudio.spatial === true) { - - app.cfg.audio.normalization = true; - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); - CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.vibrantbassNode[0]); - console.debug('[Cider][Audio] Vibrant Bass, Maikiwi Spatial') - } - else { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); - CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.vibrantbassNode[0]); - console.debug('[Cider][Audio] Vibrant Bass, Spatial') - } - - } - // Vibrant Bass - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier !== 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === false && - app.cfg.audio.spatial === false && - app.cfg.audio.maikiwiAudio.analogWarmth === false) { - - CiderAudio.vibrantbass_h2_1(true) - app.cfg.audio.normalization = true; - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.vibrantbassNode[0]); - console.debug('[Cider][Audio] Vibrant Bass') - - } - // CAP - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier === 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === true && - app.cfg.audio.spatial === false && - app.cfg.audio.maikiwiAudio.analogWarmth === false) { - CiderAudio.llpw_h2_2(true, 1); - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.llpw[0]); - console.debug('[Cider][Audio] CAP') - } - // Analog Warmth - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier === 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === false && - app.cfg.audio.spatial === false && - app.cfg.audio.maikiwiAudio.analogWarmth === true) { - CiderAudio.analogWarmth_h2_3(true, 1); - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]); - console.debug('[Cider][Audio] Analog Warmth') - } - // Spatial - else if (app.cfg.audio.maikiwiAudio.vibrantBass.multiplier === 0 && - app.cfg.audio.maikiwiAudio.ciderPPE === false && - app.cfg.audio.spatial === true && - app.cfg.audio.maikiwiAudio.analogWarmth === false){ - if (app.cfg.audio.maikiwiAudio.spatial === true) { - - app.cfg.audio.normalization = true; - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); - CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.audioBands[0]); - console.debug('[Cider][Audio] Maikiwi Spatial') + if (app.cfg.audio.spatial === true) { + if (app.cfg.audio.maikiwiAudio.spatial === true) { // Vibrant Bass, CAP, Analog Warmth, Maikiwi Spatial + app.cfg.audio.normalization = true; + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); + CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.analogWarmth[0]); + console.debug('[Cider][Audio] Vibrant Bass, CAP, Analog Warmth, Maikiwi Spatial') + } + else { // Vibrant Bass, CAP, Analog Warmth, Spatial + app.cfg.audio.normalization = true; + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); + CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.analogWarmth[0]); + console.debug('[Cider][Audio] Vibrant Bass, CAP, Analog Warmth, Spatial') + } + } + else { + app.cfg.audio.normalization = true; + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]); + console.debug('[Cider][Audio] Vibrant Bass, CAP, Analog Warmth') + } } else { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); - CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.audioBands[0]); - console.debug('[Cider][Audio] Spatial') + if (app.cfg.audio.spatial === true) { + if (app.cfg.audio.maikiwiAudio.spatial === true) { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); + CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.llpw[0]); + app.cfg.audio.normalization = true + console.debug('[Cider][Audio] Vibrant Bass, CAP, Maikiwi Spatial') + } + else { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); + CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.llpw[0]); + console.debug('[Cider][Audio] Vibrant Bass, CAP, Spatial') + } + } + else { + app.cfg.audio.normalization = true; + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.llpw[0]); + console.debug('[Cider][Audio] Vibrant Bass, CAP') + } } + } + else { + if (app.cfg.audio.maikiwiAudio.analogWarmth === true) { + CiderAudio.analogWarmth_h2_3(true, 2); + app.cfg.audio.normalization = true; + if (app.cfg.audio.spatial === true) { + if (app.cfg.audio.maikiwiAudio.spatial === true) { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); + CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.analogWarmth[0]); + console.debug('[Cider][Audio] Vibrant Bass, Analog Warmth, Maikiwi Spatial') + } + else { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); + CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.analogWarmth[0]); + console.debug('[Cider][Audio] Vibrant Bass, Analog Warmth, Spatial') + } + } + else { + app.cfg.audio.normalization = true; + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]); + console.debug('[Cider][Audio] Vibrant Bass, Analog Warmth') + } + } + else { + if (app.cfg.audio.spatial === true) { + if (app.cfg.audio.maikiwiAudio.spatial === true) { + app.cfg.audio.normalization = true; + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); + CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.vibrantbassNode[0]); + console.debug('[Cider][Audio] Vibrant Bass, Maikiwi Spatial') + } + else { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); + CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.vibrantbassNode[0]); + console.debug('[Cider][Audio] Vibrant Bass, Spatial') + } + } + else { + app.cfg.audio.normalization = true; + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.vibrantbassNode[0]); + console.debug('[Cider][Audio] Vibrant Bass') + } + } + } } - // Nothing - else { - CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.audioBands[0]); - console.debug('[Cider][Audio] Nothing') // If CAP & vibrant bass is disabled + // Vibrant Bass ends here + else { + if (app.cfg.audio.maikiwiAudio.ciderPPE === true) { + CiderAudio.llpw_h2_2(true, 1); + + if (app.cfg.audio.maikiwiAudio.analogWarmth === true) { + CiderAudio.analogWarmth_h2_3(true, 3); + + if (app.cfg.audio.spatial === true) { + if (app.cfg.audio.maikiwiAudio.spatial === true) { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); + CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.analogWarmth[0]); + app.cfg.audio.normalization = true; + console.debug('[Cider][Audio] CAP, Analog Warmth, Maikiwi Spatial') + } + else { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); + CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.analogWarmth[0]); + console.debug('[Cider][Audio] CAP, Analog Warmth, Spatial') + } + } + else { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]); + console.debug('[Cider][Audio] CAP and Analog Warmth') + } + } + else { + if (app.cfg.audio.spatial === true) { + if (app.cfg.audio.maikiwiAudio.spatial === true) { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); + CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.llpw[0]); + app.cfg.audio.normalization = true; + console.debug('[Cider][Audio] CAP, Maikiwi Spatial') + } + else { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); + CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.llpw[0]); + console.debug('[Cider][Audio] CAP, Spatial') + } + } + else { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.llpw[0]); + console.debug('[Cider][Audio] CAP') + } + } + } // CAP ends here + else { + if (app.cfg.audio.maikiwiAudio.analogWarmth === true) { + CiderAudio.analogWarmth_h2_3(true, 1); + + if (app.cfg.audio.spatial === true) { + if (app.cfg.audio.maikiwiAudio.spatial === true) { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); + CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.analogWarmth[0]); + app.cfg.audio.normalization = true; + console.debug('[Cider][Audio] Analog Warmth, Maikiwi Spatial') + } + else { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); + CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.analogWarmth[0]); + console.debug('[Cider][Audio] Analog Warmth, Spatial') + } + } + else { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]); + console.debug('[Cider][Audio] Analog Warmth') + } + } + else { + if (app.cfg.audio.spatial === true) { + if (app.cfg.audio.maikiwiAudio.spatial === true) { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode); + CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.audioBands[0]); + app.cfg.audio.normalization = true; + console.debug('[Cider][Audio] Maikiwi Spatial') + } + else { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input); + CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.audioBands[0]); + console.debug('[Cider][Audio] Spatial') + } + } + else { + CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.audioBands[0]); + console.debug('[Cider][Audio] Direct Mode to Equalizer') + } + } + } } console.debug("[Cider][Audio] Finished hierarchical loading"); diff --git a/src/renderer/main/musickittools.js b/src/renderer/main/musickittools.js index 7e368fa5..8967f4a9 100644 --- a/src/renderer/main/musickittools.js +++ b/src/renderer/main/musickittools.js @@ -1,17 +1,32 @@ const MusicKitTools = { - async v3Continuous (href, options = {}, reqOptions = {}) { + async v3Continuous ({ + href, + options = {}, + reqOptions = {}, + onProgress = () => {}, + onError = () => {}, + onSuccess = () => {} + } = {}) { let returnData = [] async function sendReq(href, options) { - const response = await app.mk.api.v3.music(href, options) + const response = await app.mk.api.v3.music(href, options).catch(error => onError) returnData = returnData.concat(response.data.data) if(response.data.next) { - await sendReq(response.data.next, options) + onProgress({ + response: response, + total: returnData.length + }) + try { + await sendReq(response.data.next, options) + }catch(e){ + await sendReq(response.data.next, options) + } } } await sendReq(href, options) - + onSuccess(returnData) return returnData }, getHeader() { diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js index f4ca97b2..638aa49b 100644 --- a/src/renderer/main/vueapp.js +++ b/src/renderer/main/vueapp.js @@ -1,4 +1,4 @@ -import {store} from './vuex-store.js'; +import { store } from './vuex-store.js'; Vue.use(VueHorizontal); Vue.use(VueObserveVisibility); @@ -217,7 +217,11 @@ const app = new Vue({ } }, pauseButtonTimer: null, - activeCasts: [] + activeCasts: [], + pluginPages: { + page: "hello-world", + pages: [], + } }, watch: { cfg: { @@ -542,13 +546,13 @@ const app = new Vue({ this.modals.addToPlaylist = false await app.mk.api.v3.music( `/v1/me/library/playlists/${playlist_id}/tracks`, {}, { - fetchOptions: { - method: "POST", - body: JSON.stringify({ - data: pl_items - }) - } + fetchOptions: { + method: "POST", + body: JSON.stringify({ + data: pl_items + }) } + } ).then(() => { if (this.page == 'playlist_' + this.showingPlaylist.id) { this.getPlaylistFromID(this.showingPlaylist.id, true) @@ -560,7 +564,7 @@ const app = new Vue({ if (this.cfg.visual.theme != "default.less" && this.cfg.visual.theme != "") { this.setTheme(this.cfg.visual.theme) } - + this.setLz(this.cfg.general.language) this.setLzManual() clearTimeout(this.hangtimer) @@ -1017,7 +1021,7 @@ const app = new Vue({ console.log("playlist has no cache") } - if(cachedTrackMapping) { + if (cachedTrackMapping) { console.log("using cached track mapping") this.playlists.trackMapping = cachedTrackMapping } @@ -1033,7 +1037,7 @@ const app = new Vue({ const playlistData = await app.mk.api.v3.music(`/v1/me/library/playlist-folders/${parent}/children/`) await asyncForEach(playlistData.data.data, async (playlist) => { playlist.parent = parent - if( + if ( playlist.type != "library-playlist-folders" && typeof playlist.attributes.playParams["versionHash"] != "undefined" ) { @@ -1103,12 +1107,12 @@ const app = new Vue({ this.newPlaylist() } }, - { - name: app.getLz('term.createNewPlaylistFolder'), - action: () => { - this.newPlaylistFolder() - } + { + name: app.getLz('term.createNewPlaylistFolder'), + action: () => { + this.newPlaylistFolder() } + } ] } this.showMenuPanel(menu, event) @@ -1117,13 +1121,13 @@ const app = new Vue({ let self = this this.mk.api.v3.music( `/v1/me/library/playlist-folders/${id}`, {}, { - fetchOptions: { - method: "PATCH", - body: JSON.stringify({ - attributes: { name: name } - }) - } + fetchOptions: { + method: "PATCH", + body: JSON.stringify({ + attributes: { name: name } + }) } + } ).then(res => { self.refreshPlaylists() }) @@ -1132,13 +1136,13 @@ const app = new Vue({ let self = this this.mk.api.v3.music( `/v1/me/library/playlists/${id}`, {}, { - fetchOptions: { - method: "PATCH", - body: JSON.stringify({ - attributes: { name: name } - }) - } + fetchOptions: { + method: "PATCH", + body: JSON.stringify({ + attributes: { name: name } + }) } + } ).then(res => { self.refreshPlaylists() }) @@ -1401,7 +1405,7 @@ const app = new Vue({ */ convertTime(time = 0, format = 'short') { - if(isNaN(time)) { + if (isNaN(time)) { time = 0 } if (typeof time !== "number") { @@ -1488,6 +1492,11 @@ const app = new Vue({ let page = hash[0] let id = hash[1] let isLibrary = hash[2] ?? false + if(page == "plugin") { + this.pluginPages.page = "plugin." + id + this.page = "plugin-renderer" + return + } this.routeView({ kind: page, id: id, @@ -1516,10 +1525,10 @@ const app = new Vue({ document.querySelector("#app-content").scrollTop = 0 } else if (kind == "editorial-elements") { console.log(item) - if (item.relationships?.contents?.data != null && item.relationships?.contents?.data.length > 0){ + if (item.relationships?.contents?.data != null && item.relationships?.contents?.data.length > 0) { this.routeView(item.relationships.contents.data[0]) - } else if (item.attributes?.link?.url != null){ - window.open(item.attributes.link.url) + } else if (item.attributes?.link?.url != null) { + window.open(item.attributes.link.url) } } else if (kind.toString().includes("artist")) { @@ -2048,7 +2057,7 @@ const app = new Vue({ } let librarySongs = await CiderCache.getCache(cacheId) if (librarySongs) { - this.library.songs.listing = librarySongs + this.library.songs.listing.data = librarySongs this.searchLibrarySongs() } if (this.songstest) { @@ -2058,8 +2067,9 @@ const app = new Vue({ this.library.backgroundNotification.show = true this.library.backgroundNotification.message = app.getLz('notification.updatingLibrarySongs') - function downloadChunk() { - const params = { + library = await MusicKitTools.v3Continuous({ + href: `/v1/me/library/songs/`, + options: { "include[library-songs]": "catalog,artists,albums", "fields[artists]": "name,url,id", "fields[albums]": "name,url,id", @@ -2067,80 +2077,28 @@ const app = new Vue({ "fields[catalog]": "artistUrl,albumUrl", "fields[songs]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url", limit: 100, - l: self.mklang - } - const safeparams = { - "platform": "web", - "limit": 80 - } - self.library.songs.downloadState = 1 - if (downloaded == null) { - app.mk.api.v3.music(`/v1/me/library/songs/`, params).then((response) => { - processChunk(response.data) - }).catch((error) => { - console.log('safe loading'); - app.mk.api.v3.music(`/v1/me/library/songs/`, safeparams).then((response) => { - processChunk(response.data) - }).catch((error) => { - console.log('safe loading failed', error) - app.library.songs.downloadState = 2 - app.library.backgroundNotification.show = false - }) - }) - } else { - if (downloaded.next != null) { - app.mk.api.v3.music(downloaded.next, params).then((response) => { - processChunk(response.data) - }).catch((error) => { - console.log('safe loading'); - app.mk.api.v3.music(downloaded.next, safeparams).then((response) => { - processChunk(response.data) - }).catch((error) => { - console.log('safe loading failed', error) - app.library.songs.downloadState = 2 - app.library.backgroundNotification.show = false - }) - }) - } else { - console.log("Download next", downloaded.next) - } - } - } + l: app.mklang, + }, + onProgress: (data) => { + console.log(`${data.total}/${data.response.data.meta.total}`) + self.library.backgroundNotification.show = true + self.library.backgroundNotification.message = app.getLz('notification.updatingLibrarySongs') + self.library.backgroundNotification.total = data.response.data.meta.total + self.library.backgroundNotification.progress = data.total + }, + onSuccess: () => { - function processChunk(response) { - downloaded = response - library = library.concat(downloaded.data) - self.library.backgroundNotification.show = true - self.library.backgroundNotification.message = app.getLz('notification.updatingLibrarySongs') - self.library.backgroundNotification.total = downloaded.meta.total - self.library.backgroundNotification.progress = library.length + } + }) - if (downloaded.meta.total == 0) { - self.library.songs.downloadState = 3 - return - } - if (typeof downloaded.next == "undefined") { - console.log("downloaded.next is undefined") - self.library.songs.listing = library - self.library.songs.downloadState = 2 - self.library.backgroundNotification.show = false - self.searchLibrarySongs() - CiderCache.putCache(cacheId, library) - } - if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") { - console.log(`downloading next chunk - ${library.length} songs so far`) - downloadChunk() - } else { - self.library.songs.listing = library - self.library.songs.downloadState = 2 - self.library.backgroundNotification.show = false - self.searchLibrarySongs() - CiderCache.putCache(cacheId, library) - // console.log(library) - } - } + self.library.songs.listing = library + self.library.songs.downloadState = 2 + self.library.backgroundNotification.show = false + self.searchLibrarySongs() + CiderCache.putCache(cacheId, library) + console.log("Done!") - downloadChunk() + return }, // copy the getLibrarySongsFull function except change Songs to Albums async getLibraryAlbumsFull(force = false, index) { @@ -2239,7 +2197,7 @@ const app = new Vue({ } if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") { console.log(`downloading next chunk - ${library.length - } albums so far`) + } albums so far`) downloadChunk() } else { self.library.albums.listing = library @@ -2348,7 +2306,7 @@ const app = new Vue({ } if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") { console.log(`downloading next chunk - ${library.length - } artists so far`) + } artists so far`) downloadChunk() } else { self.library.artists.listing = library @@ -2484,13 +2442,13 @@ const app = new Vue({ let self = this this.mk.api.v3.music( "/v1/me/library/playlist-folders/", {}, { - fetchOptions: { - method: "POST", - body: JSON.stringify({ - attributes: { name: name } - }) - } + fetchOptions: { + method: "POST", + body: JSON.stringify({ + attributes: { name: name } + }) } + } ).then((res) => { let playlist = (res.data.data[0]) self.playlists.listing.push({ @@ -3055,21 +3013,21 @@ const app = new Vue({ if (ids.length > 0) { if (app.mk.queue._itemIDs.length > 0) { app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] }).then(function () { - ind += 1; - console.log(ind, Object.keys(itemsToPlay).length) - if (ind >= Object.keys(itemsToPlay).length) { - app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.attributes.playParams.id ?? item.id)) - } + ind += 1; + console.log(ind, Object.keys(itemsToPlay).length) + if (ind >= Object.keys(itemsToPlay).length) { + app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.attributes.playParams.id ?? item.id)) } + } ) } else { app.mk.setQueue({ [kind + "s"]: itemsToPlay[kind] }).then(function () { - ind += 1; - console.log(ind, Object.keys(itemsToPlay).length) - if (ind >= Object.keys(itemsToPlay).length) { - app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.attributes.playParams.id ?? item.id)) - } + ind += 1; + console.log(ind, Object.keys(itemsToPlay).length) + if (ind >= Object.keys(itemsToPlay).length) { + app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.attributes.playParams.id ?? item.id)) } + } ) } } @@ -3379,7 +3337,7 @@ const app = new Vue({ if (app.getThemeDirective("lcdArtworkSize") != "") { artworkSize = app.getThemeDirective("lcdArtworkSize") } else if (this.cfg.visual.directives.windowLayout == "twopanel") { - artworkSize = 70 + artworkSize = 80 } this.currentArtUrl = ''; this.currentArtUrlRaw = ''; @@ -3648,36 +3606,36 @@ const app = new Vue({ app.love(app.mk.nowPlayingItem) } }, - { - "icon": "./assets/feather/heart.svg", - "id": "unlove", - "active": true, - "name": app.getLz('action.unlove'), - "hidden": true, - "action": function () { - app.unlove(app.mk.nowPlayingItem) - } - }, - { - "icon": "./assets/feather/thumbs-down.svg", - "id": "dislike", - "name": app.getLz('action.dislike'), - "hidden": false, - "disabled": true, - "action": function () { - app.dislike(app.mk.nowPlayingItem) - } - }, - { - "icon": "./assets/feather/thumbs-down.svg", - "id": "undo_dislike", - "name": app.getLz('action.undoDislike'), - "active": true, - "hidden": true, - "action": function () { - app.unlove(app.mk.nowPlayingItem) - } - }, + { + "icon": "./assets/feather/heart.svg", + "id": "unlove", + "active": true, + "name": app.getLz('action.unlove'), + "hidden": true, + "action": function () { + app.unlove(app.mk.nowPlayingItem) + } + }, + { + "icon": "./assets/feather/thumbs-down.svg", + "id": "dislike", + "name": app.getLz('action.dislike'), + "hidden": false, + "disabled": true, + "action": function () { + app.dislike(app.mk.nowPlayingItem) + } + }, + { + "icon": "./assets/feather/thumbs-down.svg", + "id": "undo_dislike", + "name": app.getLz('action.undoDislike'), + "active": true, + "hidden": true, + "action": function () { + app.unlove(app.mk.nowPlayingItem) + } + }, ], items: [ { @@ -3868,14 +3826,15 @@ const app = new Vue({ } }, pinMiniPlayer(status = false) { - if (!status){ - if (!this.cfg.visual.miniplayer_top_toggle) { - ipcRenderer.send('windowontop', true) - this.cfg.visual.miniplayer_top_toggle = true; + if (!status) { + if (!this.cfg.visual.miniplayer_top_toggle) { + ipcRenderer.send('windowontop', true) + this.cfg.visual.miniplayer_top_toggle = true; + } else { + ipcRenderer.send('windowontop', false) + this.cfg.visual.miniplayer_top_toggle = false; + } } else { - ipcRenderer.send('windowontop', false) - this.cfg.visual.miniplayer_top_toggle = false; - }} else { ipcRenderer.send('windowontop', this.cfg.visual.miniplayer_top_toggle ?? false) } }, diff --git a/src/renderer/style.css b/src/renderer/style.css new file mode 100644 index 00000000..1ff1aa0c --- /dev/null +++ b/src/renderer/style.css @@ -0,0 +1,13152 @@ +@import url("assets/fonts/Inter/inter.css"); +@import url("less/bootstrap-vue.min.css"); +@import url("less/codicon.css"); +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v40/-F6ofjtqLzI2JPCgQBnw7HFQoggM.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v40/-F6pfjtqLzI2JPCgQBnw7HFQaioq1A.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v40/-F62fjtqLzI2JPCgQBnw7HFowA.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v40/-F6pfjtqLzI2JPCgQBnw7HFQMisq1A.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v40/-F6pfjtqLzI2JPCgQBnw7HFQei0q1A.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v40/-F6pfjtqLzI2JPCgQBnw7HFQQi8q1A.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v24/k3kJo84MPvpLmixcA63oeALZTYKL.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v24/k3kIo84MPvpLmixcA63oeALZhaCt9w.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v24/k3kXo84MPvpLmixcA63oeALhLw.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v24/k3kIo84MPvpLmixcA63oeALZ3aGt9w.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v24/k3kIo84MPvpLmixcA63oeALZlaet9w.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v24/k3kIo84MPvpLmixcA63oeALZraWt9w.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans HK'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanshk/v19/nKKO-GM_FYFRJvXzVXaAPe9ZUHp1.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans HK'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanshk/v19/nKKP-GM_FYFRJvXzVXaAPe9ZmFhTHA.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans HK'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanshk/v19/nKKQ-GM_FYFRJvXzVXaAPe9hMg.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans HK'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanshk/v19/nKKP-GM_FYFRJvXzVXaAPe9ZwFlTHA.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans HK'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanshk/v19/nKKP-GM_FYFRJvXzVXaAPe9ZiF9THA.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans HK'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanshk/v19/nKKP-GM_FYFRJvXzVXaAPe9ZsF1THA.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v24/-nFlOG829Oofr2wohFbTp9i9WyEJ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v24/-nFkOG829Oofr2wohFbTp9i9kwMvDQ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v24/-nF7OG829Oofr2wohFbTp9iFOQ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v24/-nFkOG829Oofr2wohFbTp9i9ywIvDQ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v24/-nFkOG829Oofr2wohFbTp9i9gwQvDQ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v24/-nFkOG829Oofr2wohFbTp9i9uwYvDQ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v25/Pby6FmXiEBPT4ITbgNA5CgmOsn7u.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v25/Pby7FmXiEBPT4ITbgNA5CgmOelzI7g.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v25/PbykFmXiEBPT4ITbgNA5Cgm20A.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v25/Pby7FmXiEBPT4ITbgNA5CgmOIl3I7g.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v25/Pby7FmXiEBPT4ITbgNA5CgmOalvI7g.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v25/Pby7FmXiEBPT4ITbgNA5CgmOUlnI7g.otf) format('opentype'); +} +:root { + --appleEase: cubic-bezier(0.42, 0, 0.58, 1); + --appleTransition: 0.2s var(--appleEase); +} +/* Simple CSS framework for Apple Music Electron */ +.md-labeltext { + font-size: 14px; + text-transform: uppercase; + opacity: 0.75; + font-weight: 500; +} +.md-option-container { + /* border-radius: 10px; */ + overflow: hidden; +} +.md-option-line { + display: flex; + width: 100%; + padding: 14px; + background: var(--opaquePageBGColor); + font-size: 0.85em; +} +.md-option-segment.md-option-segment_auto { + width: auto; + white-space: nowrap; +} +.md-option-container .md-option-line:not(:last-child) { + border-bottom: 1px solid rgba(0, 0, 0, 0.15); +} +input[type="range"].md-slider { + -webkit-appearance: none; + height: 7px; + background: rgba(255, 255, 255, 0.6); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; +} +input[type="range"].md-slider::-webkit-slider-thumb { + -webkit-appearance: none; + height: 20px; + width: 20px; + border-radius: 50%; + background: #ffffff; + cursor: ew-resize; + box-shadow: 0 0 2px 0 #555; +} +input[type=range].md-slider::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} +.md-option-header { + padding: 10px; + border-bottom: 1px solid rgba(200, 200, 200, 0.25); + font-weight: 500; + font-size: 0.9em; + background: rgba(255, 255, 255, 0.1); +} +.md-option-segment { + width: 100%; + display: flex; + justify-content: center; + flex-direction: column; +} +.md-h1 { + font-size: 3em; + text-align: center; +} +.md-header { + padding: 16px; +} +.md-header-title { + padding: 18px; + font-weight: 600; + font-size: 16px; + height: 55px; + background: var(--opaquePageBGColor); + border-bottom: 1px solid rgba(0, 0, 0, 0.15); +} +.md-footer { + padding: 16px; + text-align: center; +} +.md-transparent { + background: transparent; +} +.md-container { + display: flex; + flex-direction: column; + height: 100%; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + padding: 32px; +} +.md-container_panel { + padding: 0px; +} +.md-body { + height: 100%; + padding: 16px; + font-size: 1.25em; +} +@media (prefers-color-scheme: light) { + .md-btn { + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 1px; + border: 1px solid rgba(0, 0, 0, 0.15); + } + .md-close-btn { + background-color: #000; + } +} +/* Vue transitions */ +.fade_simple-enter-active, +.fade_simple-leave-active { + transition: all 0.5s; +} +.fade_simple-enter, +.fade_simple-leave-to { + opacity: 0; +} +.fade-enter-active, +.fade-leave-active { + transition: all 0.5s; +} +.fade-enter, +.fade-leave-to { + opacity: 0; + transform: scale(0.95); +} +/* CSS Grids */ +.container, +.container-fluid, +.container-xxl, +.container-xl, +.container-lg, +.container-md, +.container-sm { + width: 100%; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); + margin-right: auto; + margin-left: auto; +} +.row { + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + /*margin-top: calc(-1 * var(--bs-gutter-y));*/ + /*margin-right: calc(-0.5 * var(--bs-gutter-x));*/ + /*margin-left: calc(-0.5 * var(--bs-gutter-x));*/ +} +.row > * { + box-sizing: border-box; + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * 0.5); + padding-left: calc(var(--bs-gutter-x) * 0.5); + margin-top: var(--bs-gutter-y); +} +.col { + flex: 1 0 0%; +} +.row-cols-auto > * { + flex: 0 0 auto; + width: auto; +} +.row-cols-1 > * { + flex: 0 0 auto; + width: 100%; +} +.row-cols-2 > * { + flex: 0 0 auto; + width: 50%; +} +.row-cols-3 > * { + flex: 0 0 auto; + width: 33.33333333%; +} +.row-cols-4 > * { + flex: 0 0 auto; + width: 25%; +} +.row-cols-5 > * { + flex: 0 0 auto; + width: 20%; +} +.row-cols-6 > * { + flex: 0 0 auto; + width: 16.66666667%; +} +.col-auto { + flex: 0 0 auto; + width: auto; +} +.col-1 { + flex: 0 0 auto; + width: 8.33333333%; +} +.col-2 { + flex: 0 0 auto; + width: 16.66666667%; +} +.col-3 { + flex: 0 0 auto; + width: 25%; +} +.col-4 { + flex: 0 0 auto; + width: 33.33333333%; +} +.col-5 { + flex: 0 0 auto; + width: 41.66666667%; +} +.col-6 { + flex: 0 0 auto; + width: 50%; +} +.col-7 { + flex: 0 0 auto; + width: 58.33333333%; +} +.col-8 { + flex: 0 0 auto; + width: 66.66666667%; +} +.col-9 { + flex: 0 0 auto; + width: 75%; +} +.col-10 { + flex: 0 0 auto; + width: 83.33333333%; +} +.col-11 { + flex: 0 0 auto; + width: 91.66666667%; +} +.col-12 { + flex: 0 0 auto; + width: 100%; +} +.offset-1 { + margin-left: 8.33333333%; +} +.offset-2 { + margin-left: 16.66666667%; +} +.offset-3 { + margin-left: 25%; +} +.offset-4 { + margin-left: 33.33333333%; +} +.offset-5 { + margin-left: 41.66666667%; +} +.offset-6 { + margin-left: 50%; +} +.offset-7 { + margin-left: 58.33333333%; +} +.offset-8 { + margin-left: 66.66666667%; +} +.offset-9 { + margin-left: 75%; +} +.offset-10 { + margin-left: 83.33333333%; +} +.offset-11 { + margin-left: 91.66666667%; +} +.g-0, +.gx-0 { + --bs-gutter-x: 0; +} +.g-0, +.gy-0 { + --bs-gutter-y: 0; +} +.g-1, +.gx-1 { + --bs-gutter-x: 0.25rem; +} +.g-1, +.gy-1 { + --bs-gutter-y: 0.25rem; +} +.g-2, +.gx-2 { + --bs-gutter-x: 0.5rem; +} +.g-2, +.gy-2 { + --bs-gutter-y: 0.5rem; +} +.g-3, +.gx-3 { + --bs-gutter-x: 1rem; +} +.g-3, +.gy-3 { + --bs-gutter-y: 1rem; +} +.g-4, +.gx-4 { + --bs-gutter-x: 1.5rem; +} +.g-4, +.gy-4 { + --bs-gutter-y: 1.5rem; +} +.g-5, +.gx-5 { + --bs-gutter-x: 3rem; +} +.g-5, +.gy-5 { + --bs-gutter-y: 3rem; +} +.d-inline { + display: inline !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-block { + display: block !important; +} +.d-grid { + display: grid !important; +} +.d-table { + display: table !important; +} +.d-table-row { + display: table-row !important; +} +.d-table-cell { + display: table-cell !important; +} +.d-flex { + display: flex !important; +} +.d-inline-flex { + display: inline-flex !important; +} +.d-none { + display: none !important; +} +.flex-fill { + flex: 1 1 auto !important; +} +.flex-row { + flex-direction: row !important; +} +.flex-column { + flex-direction: column !important; +} +.flex-row-reverse { + flex-direction: row-reverse !important; +} +.flex-column-reverse { + flex-direction: column-reverse !important; +} +.flex-grow-0 { + flex-grow: 0 !important; +} +.flex-grow-1 { + flex-grow: 1 !important; +} +.flex-shrink-0 { + flex-shrink: 0 !important; +} +.flex-shrink-1 { + flex-shrink: 1 !important; +} +.flex-wrap { + flex-wrap: wrap !important; +} +.flex-nowrap { + flex-wrap: nowrap !important; +} +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} +.justify-content-start { + justify-content: flex-start !important; +} +.justify-content-end { + justify-content: flex-end !important; +} +.justify-content-center { + justify-content: center !important; +} +.justify-content-between { + justify-content: space-between !important; +} +.justify-content-around { + justify-content: space-around !important; +} +.justify-content-evenly { + justify-content: space-evenly !important; +} +.align-items-start { + align-items: flex-start !important; +} +.align-items-end { + align-items: flex-end !important; +} +.align-items-center { + align-items: center !important; +} +.align-items-baseline { + align-items: baseline !important; +} +.align-items-stretch { + align-items: stretch !important; +} +.align-content-start { + align-content: flex-start !important; +} +.align-content-end { + align-content: flex-end !important; +} +.align-content-center { + align-content: center !important; +} +.align-content-between { + align-content: space-between !important; +} +.align-content-around { + align-content: space-around !important; +} +.align-content-stretch { + align-content: stretch !important; +} +.align-self-auto { + align-self: auto !important; +} +.align-self-start { + align-self: flex-start !important; +} +.align-self-end { + align-self: flex-end !important; +} +.align-self-center { + align-self: center !important; +} +.align-self-baseline { + align-self: baseline !important; +} +.align-self-stretch { + align-self: stretch !important; +} +.order-first { + order: -1 !important; +} +.order-0 { + order: 0 !important; +} +.order-1 { + order: 1 !important; +} +.order-2 { + order: 2 !important; +} +.order-3 { + order: 3 !important; +} +.order-4 { + order: 4 !important; +} +.order-5 { + order: 5 !important; +} +.order-last { + order: 6 !important; +} +.m-0 { + margin: 0 !important; +} +.m-1 { + margin: 0.25rem !important; +} +.m-2 { + margin: 0.5rem !important; +} +.m-3 { + margin: 1rem !important; +} +.m-4 { + margin: 1.5rem !important; +} +.m-5 { + margin: 3rem !important; +} +.m-auto { + margin: auto !important; +} +.mx-0 { + margin-right: 0 !important; + margin-left: 0 !important; +} +.mx-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; +} +.mx-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; +} +.mx-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; +} +.mx-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; +} +.mx-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; +} +.mx-auto { + margin-right: auto !important; + margin-left: auto !important; +} +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} +.my-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} +.my-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} +.my-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} +.mt-0 { + margin-top: 0 !important; +} +.mt-1 { + margin-top: 0.25rem !important; +} +.mt-2 { + margin-top: 0.5rem !important; +} +.mt-3 { + margin-top: 1rem !important; +} +.mt-4 { + margin-top: 1.5rem !important; +} +.mt-5 { + margin-top: 3rem !important; +} +.mt-auto { + margin-top: auto !important; +} +.me-0 { + margin-right: 0 !important; +} +.me-1 { + margin-right: 0.25rem !important; +} +.me-2 { + margin-right: 0.5rem !important; +} +.me-3 { + margin-right: 1rem !important; +} +.me-4 { + margin-right: 1.5rem !important; +} +.me-5 { + margin-right: 3rem !important; +} +.me-auto { + margin-right: auto !important; +} +.mb-0 { + margin-bottom: 0 !important; +} +.mb-1 { + margin-bottom: 0.25rem !important; +} +.mb-2 { + margin-bottom: 0.5rem !important; +} +.mb-3 { + margin-bottom: 1rem !important; +} +.mb-4 { + margin-bottom: 1.5rem !important; +} +.mb-5 { + margin-bottom: 3rem !important; +} +.mb-auto { + margin-bottom: auto !important; +} +.ms-0 { + margin-left: 0 !important; +} +.ms-1 { + margin-left: 0.25rem !important; +} +.ms-2 { + margin-left: 0.5rem !important; +} +.ms-3 { + margin-left: 1rem !important; +} +.ms-4 { + margin-left: 1.5rem !important; +} +.ms-5 { + margin-left: 3rem !important; +} +.ms-auto { + margin-left: auto !important; +} +.p-0 { + padding: 0 !important; +} +.p-1 { + padding: 0.25rem !important; +} +.p-2 { + padding: 0.5rem !important; +} +.p-3 { + padding: 1rem !important; +} +.p-4 { + padding: 1.5rem !important; +} +.p-5 { + padding: 3rem !important; +} +.px-0 { + padding-right: 0 !important; + padding-left: 0 !important; +} +.px-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; +} +.px-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; +} +.px-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; +} +.px-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; +} +.px-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; +} +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} +.py-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} +.py-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} +.py-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} +.pt-0 { + padding-top: 0 !important; +} +.pt-1 { + padding-top: 0.25rem !important; +} +.pt-2 { + padding-top: 0.5rem !important; +} +.pt-3 { + padding-top: 1rem !important; +} +.pt-4 { + padding-top: 1.5rem !important; +} +.pt-5 { + padding-top: 3rem !important; +} +.pe-0 { + padding-right: 0 !important; +} +.pe-1 { + padding-right: 0.25rem !important; +} +.pe-2 { + padding-right: 0.5rem !important; +} +.pe-3 { + padding-right: 1rem !important; +} +.pe-4 { + padding-right: 1.5rem !important; +} +.pe-5 { + padding-right: 3rem !important; +} +.pb-0 { + padding-bottom: 0 !important; +} +.pb-1 { + padding-bottom: 0.25rem !important; +} +.pb-2 { + padding-bottom: 0.5rem !important; +} +.pb-3 { + padding-bottom: 1rem !important; +} +.pb-4 { + padding-bottom: 1.5rem !important; +} +.pb-5 { + padding-bottom: 3rem !important; +} +.ps-0 { + padding-left: 0 !important; +} +.ps-1 { + padding-left: 0.25rem !important; +} +.ps-2 { + padding-left: 0.5rem !important; +} +.ps-3 { + padding-left: 1rem !important; +} +.ps-4 { + padding-left: 1.5rem !important; +} +.ps-5 { + padding-left: 3rem !important; +} +.dropup, +.dropend, +.dropdown, +.dropstart { + position: relative; +} +.dropdown-toggle { + white-space: nowrap; +} +.dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; +} +.dropdown-toggle:empty::after { + margin-left: 0; +} +.dropdown-menu { + position: absolute; + z-index: 1000; + display: none; + min-width: 10rem; + padding: 0.5rem 0; + margin: 0; + font-size: 1rem; + color: #212529; + text-align: left; + list-style: none; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; +} +.dropdown-menu[data-bs-popper] { + top: 100%; + left: 0; + margin-top: 0.125rem; +} +.dropdown-menu-start { + --bs-position: start; +} +.dropdown-menu-start[data-bs-popper] { + right: auto; + left: 0; +} +.dropdown-menu-end { + --bs-position: end; +} +.dropdown-menu-end[data-bs-popper] { + right: 0; + left: auto; +} +@media (min-width: 576px) { + .dropdown-menu-sm-start { + --bs-position: start; + } + .dropdown-menu-sm-start[data-bs-popper] { + right: auto; + left: 0; + } + .dropdown-menu-sm-end { + --bs-position: end; + } + .dropdown-menu-sm-end[data-bs-popper] { + right: 0; + left: auto; + } +} +@media (min-width: 768px) { + .dropdown-menu-md-start { + --bs-position: start; + } + .dropdown-menu-md-start[data-bs-popper] { + right: auto; + left: 0; + } + .dropdown-menu-md-end { + --bs-position: end; + } + .dropdown-menu-md-end[data-bs-popper] { + right: 0; + left: auto; + } +} +@media (min-width: 992px) { + .dropdown-menu-lg-start { + --bs-position: start; + } + .dropdown-menu-lg-start[data-bs-popper] { + right: auto; + left: 0; + } + .dropdown-menu-lg-end { + --bs-position: end; + } + .dropdown-menu-lg-end[data-bs-popper] { + right: 0; + left: auto; + } +} +@media (min-width: 1200px) { + .dropdown-menu-xl-start { + --bs-position: start; + } + .dropdown-menu-xl-start[data-bs-popper] { + right: auto; + left: 0; + } + .dropdown-menu-xl-end { + --bs-position: end; + } + .dropdown-menu-xl-end[data-bs-popper] { + right: 0; + left: auto; + } +} +@media (min-width: 1400px) { + .dropdown-menu-xxl-start { + --bs-position: start; + } + .dropdown-menu-xxl-start[data-bs-popper] { + right: auto; + left: 0; + } + .dropdown-menu-xxl-end { + --bs-position: end; + } + .dropdown-menu-xxl-end[data-bs-popper] { + right: 0; + left: auto; + } +} +.dropup .dropdown-menu[data-bs-popper] { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: 0.125rem; +} +.dropup .dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0; + border-right: 0.3em solid transparent; + border-bottom: 0.3em solid; + border-left: 0.3em solid transparent; +} +.dropup .dropdown-toggle:empty::after { + margin-left: 0; +} +.dropend .dropdown-menu[data-bs-popper] { + top: 0; + right: auto; + left: 100%; + margin-top: 0; + margin-left: 0.125rem; +} +.dropend .dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid transparent; + border-right: 0; + border-bottom: 0.3em solid transparent; + border-left: 0.3em solid; +} +.dropend .dropdown-toggle:empty::after { + margin-left: 0; +} +.dropend .dropdown-toggle::after { + vertical-align: 0; +} +.dropstart .dropdown-menu[data-bs-popper] { + top: 0; + right: 100%; + left: auto; + margin-top: 0; + margin-right: 0.125rem; +} +.dropstart .dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; +} +.dropstart .dropdown-toggle::after { + display: none; +} +.dropstart .dropdown-toggle::before { + display: inline-block; + margin-right: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid transparent; + border-right: 0.3em solid; + border-bottom: 0.3em solid transparent; +} +.dropstart .dropdown-toggle:empty::after { + margin-left: 0; +} +.dropstart .dropdown-toggle::before { + vertical-align: 0; +} +.dropdown-divider { + height: 0; + margin: 0.5rem 0; + overflow: hidden; + border-top: 1px solid rgba(0, 0, 0, 0.15); +} +.dropdown-item { + display: block; + width: 100%; + padding: 0.25rem 1rem; + clear: both; + font-weight: 400; + color: #212529; + text-align: inherit; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border: 0; +} +.dropdown-item:hover, +.dropdown-item:focus { + color: #1e2125; + background-color: #e9ecef; +} +.dropdown-item.active, +.dropdown-item:active { + color: #fff; + text-decoration: none; + background-color: #0d6efd; +} +.dropdown-item.disabled, +.dropdown-item:disabled { + color: #adb5bd; + pointer-events: none; + background-color: transparent; +} +.dropdown-menu.show { + display: block; +} +.dropdown-header { + display: block; + padding: 0.5rem 1rem; + margin-bottom: 0; + font-size: 0.875rem; + color: #6c757d; + white-space: nowrap; +} +.dropdown-item-text { + display: block; + padding: 0.25rem 1rem; + color: #212529; +} +.dropdown-menu-dark { + color: #dee2e6; + background-color: #343a40; + border-color: rgba(0, 0, 0, 0.15); +} +.dropdown-menu-dark .dropdown-item { + color: #dee2e6; +} +.dropdown-menu-dark .dropdown-item:hover, +.dropdown-menu-dark .dropdown-item:focus { + color: #fff; + background-color: rgba(255, 255, 255, 0.15); +} +.dropdown-menu-dark .dropdown-item.active, +.dropdown-menu-dark .dropdown-item:active { + color: #fff; + background-color: #0d6efd; +} +.dropdown-menu-dark .dropdown-item.disabled, +.dropdown-menu-dark .dropdown-item:disabled { + color: #adb5bd; +} +.dropdown-menu-dark .dropdown-divider { + border-color: rgba(0, 0, 0, 0.15); +} +.dropdown-menu-dark .dropdown-item-text { + color: #dee2e6; +} +.dropdown-menu-dark .dropdown-header { + color: #adb5bd; +} +.list-group { + display: flex; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + border-radius: 0.25rem; +} +.list-group-numbered { + list-style-type: none; + counter-reset: section; +} +.list-group-numbered > li::before { + content: counters(section, ".") ". "; + counter-increment: section; +} +.list-group-item-action { + width: 100%; + color: #495057; + text-align: inherit; +} +.list-group-item-action:hover, +.list-group-item-action:focus { + z-index: 1; + color: #495057; + text-decoration: none; + background-color: #f8f9fa; +} +.list-group-item-action:active { + color: #212529; + background-color: #e9ecef; +} +.list-group-item { + position: relative; + display: block; + padding: 0.5rem 1rem; + color: #212529; + text-decoration: none; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.125); +} +.list-group-item:first-child { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} +.list-group-item:last-child { + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; +} +.list-group-item.disabled, +.list-group-item:disabled { + color: #6c757d; + pointer-events: none; + background-color: #fff; +} +.list-group-item.active { + z-index: 2; + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} +.list-group-item + .list-group-item { + border-top-width: 0; +} +.list-group-item + .list-group-item.active { + margin-top: -1px; + border-top-width: 1px; +} +.list-group-horizontal { + flex-direction: row; +} +.list-group-horizontal > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; +} +.list-group-horizontal > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; +} +.list-group-horizontal > .list-group-item.active { + margin-top: 0; +} +.list-group-horizontal > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; +} +.list-group-horizontal > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; +} +@media (min-width: 576px) { + .list-group-horizontal-sm { + flex-direction: row; + } + .list-group-horizontal-sm > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-sm > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } + .list-group-horizontal-sm > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-sm > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; + } + .list-group-horizontal-sm > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; + } +} +@media (min-width: 768px) { + .list-group-horizontal-md { + flex-direction: row; + } + .list-group-horizontal-md > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-md > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } + .list-group-horizontal-md > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-md > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; + } + .list-group-horizontal-md > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; + } +} +@media (min-width: 992px) { + .list-group-horizontal-lg { + flex-direction: row; + } + .list-group-horizontal-lg > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-lg > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } + .list-group-horizontal-lg > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-lg > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; + } + .list-group-horizontal-lg > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; + } +} +@media (min-width: 1200px) { + .list-group-horizontal-xl { + flex-direction: row; + } + .list-group-horizontal-xl > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-xl > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } + .list-group-horizontal-xl > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-xl > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; + } + .list-group-horizontal-xl > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; + } +} +@media (min-width: 1400px) { + .list-group-horizontal-xxl { + flex-direction: row; + } + .list-group-horizontal-xxl > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-xxl > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } + .list-group-horizontal-xxl > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-xxl > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; + } + .list-group-horizontal-xxl > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; + } +} +.list-group-flush { + border-radius: 0; +} +.list-group-flush > .list-group-item { + border-width: 0 0 1px; +} +.list-group-flush > .list-group-item:last-child { + border-bottom-width: 0; +} +.list-group-item-primary { + color: #084298; + background-color: #cfe2ff; +} +.list-group-item-primary.list-group-item-action:hover, +.list-group-item-primary.list-group-item-action:focus { + color: #084298; + background-color: #bacbe6; +} +.list-group-item-primary.list-group-item-action.active { + color: #fff; + background-color: #084298; + border-color: #084298; +} +.list-group-item-secondary { + color: #41464b; + background-color: #e2e3e5; +} +.list-group-item-secondary.list-group-item-action:hover, +.list-group-item-secondary.list-group-item-action:focus { + color: #41464b; + background-color: #cbccce; +} +.list-group-item-secondary.list-group-item-action.active { + color: #fff; + background-color: #41464b; + border-color: #41464b; +} +.list-group-item-success { + color: #0f5132; + background-color: #d1e7dd; +} +.list-group-item-success.list-group-item-action:hover, +.list-group-item-success.list-group-item-action:focus { + color: #0f5132; + background-color: #bcd0c7; +} +.list-group-item-success.list-group-item-action.active { + color: #fff; + background-color: #0f5132; + border-color: #0f5132; +} +.list-group-item-info { + color: #055160; + background-color: #cff4fc; +} +.list-group-item-info.list-group-item-action:hover, +.list-group-item-info.list-group-item-action:focus { + color: #055160; + background-color: #badce3; +} +.list-group-item-info.list-group-item-action.active { + color: #fff; + background-color: #055160; + border-color: #055160; +} +.list-group-item-warning { + color: #664d03; + background-color: #fff3cd; +} +.list-group-item-warning.list-group-item-action:hover, +.list-group-item-warning.list-group-item-action:focus { + color: #664d03; + background-color: #e6dbb9; +} +.list-group-item-warning.list-group-item-action.active { + color: #fff; + background-color: #664d03; + border-color: #664d03; +} +.list-group-item-danger { + color: #842029; + background-color: #f8d7da; +} +.list-group-item-danger.list-group-item-action:hover, +.list-group-item-danger.list-group-item-action:focus { + color: #842029; + background-color: #dfc2c4; +} +.list-group-item-danger.list-group-item-action.active { + color: #fff; + background-color: #842029; + border-color: #842029; +} +.list-group-item-light { + color: #636464; + background-color: #fefefe; +} +.list-group-item-light.list-group-item-action:hover, +.list-group-item-light.list-group-item-action:focus { + color: #636464; + background-color: #e5e5e5; +} +.list-group-item-light.list-group-item-action.active { + color: #fff; + background-color: #636464; + border-color: #636464; +} +.list-group-item-dark { + color: var(--textColor); + background-color: #333; +} +.list-group-item-dark.list-group-item-action:hover, +.list-group-item-dark.list-group-item-action:focus { + color: #141619; + background-color: #bebebf; +} +.list-group-item-dark.list-group-item-action.active { + color: #fff; + background-color: #141619; + border-color: #141619; +} +.toast { + width: 350px; + max-width: 100%; + font-size: 0.875rem; + pointer-events: auto; + background-color: rgba(255, 255, 255, 0.85); + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; +} +.toast.showing { + opacity: 0; +} +.toast:not(.show) { + display: none; +} +.toast-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + max-width: 100%; + pointer-events: none; +} +.toast-container > :not(:last-child) { + margin-bottom: 0.75rem; +} +.toast-header { + display: flex; + align-items: center; + padding: 0.5rem 0.75rem; + color: #6c757d; + background-color: rgba(255, 255, 255, 0.85); + background-clip: padding-box; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +} +.toast-header .btn-close { + margin-right: -0.375rem; + margin-left: 0.75rem; +} +.toast-body { + padding: 0.75rem; + word-wrap: break-word; +} +.card { + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: #333; + background-clip: border-box; + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0.25rem; +} +.card > hr { + margin-right: 0; + margin-left: 0; +} +.card > .list-group { + border-top: inherit; + border-bottom: inherit; +} +.card > .list-group:first-child { + border-top-width: 0; + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +} +.card > .list-group:last-child { + border-bottom-width: 0; + border-bottom-right-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); +} +.card > .card-header + .list-group, +.card > .list-group + .card-footer { + border-top: 0; +} +.card-body { + flex: 1 1 auto; + padding: 1rem 1rem; +} +.card-title { + margin-bottom: 0.5rem; +} +.card-subtitle { + margin-top: -0.25rem; + margin-bottom: 0; +} +.card-text:last-child { + margin-bottom: 0; +} +.card-link + .card-link { + margin-left: 1rem; +} +.card-header { + padding: 0.5rem 1rem; + margin-bottom: 0; + background-color: rgba(0, 0, 0, 0.03); + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} +.card-header:first-child { + border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; +} +.card-footer { + padding: 0.5rem 1rem; + background-color: rgba(0, 0, 0, 0.03); + border-top: 1px solid rgba(0, 0, 0, 0.125); +} +.card-footer:last-child { + border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); +} +.card-header-tabs { + margin-right: -0.5rem; + margin-bottom: -0.5rem; + margin-left: -0.5rem; + border-bottom: 0; +} +.card-header-pills { + margin-right: -0.5rem; + margin-left: -0.5rem; +} +.card-img-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 1rem; + border-radius: calc(0.25rem - 1px); +} +.card-img, +.card-img-top, +.card-img-bottom { + width: 100%; +} +.card-img, +.card-img-top { + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +} +.card-img, +.card-img-bottom { + border-bottom-right-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); +} +.card-group > .card { + margin-bottom: 0.75rem; +} +@media (min-width: 576px) { + .card-group { + display: flex; + flex-flow: row wrap; + } + .card-group > .card { + flex: 1 0 0%; + margin-bottom: 0; + } + .card-group > .card + .card { + margin-left: 0; + border-left: 0; + } + .card-group > .card:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .card-group > .card:not(:last-child) .card-img-top, + .card-group > .card:not(:last-child) .card-header { + border-top-right-radius: 0; + } + .card-group > .card:not(:last-child) .card-img-bottom, + .card-group > .card:not(:last-child) .card-footer { + border-bottom-right-radius: 0; + } + .card-group > .card:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .card-group > .card:not(:first-child) .card-img-top, + .card-group > .card:not(:first-child) .card-header { + border-top-left-radius: 0; + } + .card-group > .card:not(:first-child) .card-img-bottom, + .card-group > .card:not(:first-child) .card-footer { + border-bottom-left-radius: 0; + } +} +.modal { + position: fixed; + top: 0; + left: 0; + z-index: 1055; + display: none; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + outline: 0; + user-select: none; +} +.modal .close { + 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; +} +.modal .close:hover { + background-color: #c42b1c; +} +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; + color: var(--textColor); +} +.modal.fade .modal-dialog { + transition: transform 0.1s var(--appleEase), opacity 0.1s var(--appleEase); + transform: scale(0.9); + opacity: 0; +} +@media (prefers-reduced-motion: reduce) { + .modal.fade .modal-dialog { + transition: none; + } +} +.modal.show .modal-dialog { + transform: none; + opacity: 1; +} +.modal.modal-static .modal-dialog { + transform: scale(1.02); +} +.modal-dialog-scrollable { + height: calc(100% - 1rem); +} +.modal-dialog-scrollable .modal-content { + max-height: 100%; + overflow: hidden; +} +.modal-dialog-scrollable .modal-body { + overflow-y: auto; +} +.modal-dialog-centered { + display: flex; + align-items: center; + min-height: calc(100% - 1rem); +} +.modal-content { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + pointer-events: auto; + background-color: var(--modalBackground); + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0.3rem; + outline: 0; + box-shadow: var(--ciderShadow-Generic); + overflow: hidden; +} +.modal-backdrop { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + width: 100vw; + height: 100vh; + background-color: #000; +} +.modal-backdrop.fade { + opacity: 0; +} +.modal-backdrop.show { + opacity: 0.5; +} +.modal-header { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: space-between; + padding: 1rem 1rem; + border-top-left-radius: calc(0.3rem - 1px); + border-top-right-radius: calc(0.3rem - 1px); +} +.modal-header .btn-close { + padding: 0.5rem 0.5rem; + margin: -0.5rem -0.5rem -0.5rem auto; +} +.modal-title { + line-height: 1.5; + margin: 0; +} +.modal-body { + position: relative; + flex: 1 1 auto; + padding: 3rem 1rem 1rem 1rem; + font-size: 0.9em; +} +.modal-footer { + display: flex; + flex-wrap: wrap; + flex-shrink: 0; + align-items: center; + justify-content: flex-end; + padding: 0.75rem; + border-bottom-right-radius: calc(0.3rem - 1px); + border-bottom-left-radius: calc(0.3rem - 1px); +} +.modal-footer > * { + margin: 0.25rem; +} +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; + } + .modal-dialog-scrollable { + height: calc(100% - 3.5rem); + } + .modal-dialog-centered { + min-height: calc(100% - 3.5rem); + } + .modal-sm { + max-width: 300px; + } +} +@media (min-width: 992px) { + .modal-lg, + .modal-xl { + max-width: 800px; + } +} +@media (min-width: 1200px) { + .modal-xl { + max-width: 1140px; + } +} +.modal-fullscreen { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; +} +.modal-fullscreen .modal-content { + height: 100%; + border: 0; + border-radius: 0; +} +.modal-fullscreen .modal-header { + border-radius: 0; +} +.modal-fullscreen .modal-body { + overflow-y: auto; +} +.modal-fullscreen .modal-footer { + border-radius: 0; +} +@media (max-width: 575.98px) { + .modal-fullscreen-sm-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-sm-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-sm-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-sm-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-sm-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 767.98px) { + .modal-fullscreen-md-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-md-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-md-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-md-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-md-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 991.98px) { + .modal-fullscreen-lg-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-lg-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-lg-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-lg-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-lg-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 1199.98px) { + .modal-fullscreen-xl-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-xl-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-xl-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-xl-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-xl-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 1399.98px) { + .modal-fullscreen-xxl-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-xxl-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-xxl-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-xxl-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-xxl-down .modal-footer { + border-radius: 0; + } +} +.btn { + display: inline-block; + font-weight: 400; + line-height: 1.5; + color: #212529; + text-align: center; + text-decoration: none; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: 0.375rem 0.75rem; + font-size: 1rem; + border-radius: 0.25rem; + font-family: inherit; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .btn { + transition: none; + } +} +.btn:hover { + color: #212529; +} +.btn-check:focus + .btn, +.btn:focus { + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} +.btn:disabled, +.btn.disabled, +fieldset:disabled .btn { + pointer-events: none; + opacity: 0.65; +} +.btn-primary { + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} +.btn-primary:hover { + color: #fff; + background-color: #0b5ed7; + border-color: #0a58ca; +} +.btn-check:focus + .btn-primary, +.btn-primary:focus { + color: #fff; + background-color: #0b5ed7; + border-color: #0a58ca; + box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); +} +.btn-check:checked + .btn-primary, +.btn-check:active + .btn-primary, +.btn-primary:active, +.btn-primary.active, +.show > .btn-primary.dropdown-toggle { + color: #fff; + background-color: #0a58ca; + border-color: #0a53be; +} +.btn-check:checked + .btn-primary:focus, +.btn-check:active + .btn-primary:focus, +.btn-primary:active:focus, +.btn-primary.active:focus, +.show > .btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); +} +.btn-primary:disabled, +.btn-primary.disabled { + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} +.btn-secondary { + color: #fff; + background-color: #6c757d; + border-color: #6c757d; +} +.btn-secondary:hover { + color: #fff; + background-color: #5c636a; + border-color: #565e64; +} +.btn-check:focus + .btn-secondary, +.btn-secondary:focus { + color: #fff; + background-color: #5c636a; + border-color: #565e64; + box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); +} +.btn-check:checked + .btn-secondary, +.btn-check:active + .btn-secondary, +.btn-secondary:active, +.btn-secondary.active, +.show > .btn-secondary.dropdown-toggle { + color: #fff; + background-color: #565e64; + border-color: #51585e; +} +.btn-check:checked + .btn-secondary:focus, +.btn-check:active + .btn-secondary:focus, +.btn-secondary:active:focus, +.btn-secondary.active:focus, +.show > .btn-secondary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); +} +.btn-secondary:disabled, +.btn-secondary.disabled { + color: #fff; + background-color: #6c757d; + border-color: #6c757d; +} +.btn-success { + color: #fff; + background-color: #198754; + border-color: #198754; +} +.btn-success:hover { + color: #fff; + background-color: #157347; + border-color: #146c43; +} +.btn-check:focus + .btn-success, +.btn-success:focus { + color: #fff; + background-color: #157347; + border-color: #146c43; + box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5); +} +.btn-check:checked + .btn-success, +.btn-check:active + .btn-success, +.btn-success:active, +.btn-success.active, +.show > .btn-success.dropdown-toggle { + color: #fff; + background-color: #146c43; + border-color: #13653f; +} +.btn-check:checked + .btn-success:focus, +.btn-check:active + .btn-success:focus, +.btn-success:active:focus, +.btn-success.active:focus, +.show > .btn-success.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5); +} +.btn-success:disabled, +.btn-success.disabled { + color: #fff; + background-color: #198754; + border-color: #198754; +} +.btn-info { + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; +} +.btn-info:hover { + color: #000; + background-color: #31d2f2; + border-color: #25cff2; +} +.btn-check:focus + .btn-info, +.btn-info:focus { + color: #000; + background-color: #31d2f2; + border-color: #25cff2; + box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5); +} +.btn-check:checked + .btn-info, +.btn-check:active + .btn-info, +.btn-info:active, +.btn-info.active, +.show > .btn-info.dropdown-toggle { + color: #000; + background-color: #3dd5f3; + border-color: #25cff2; +} +.btn-check:checked + .btn-info:focus, +.btn-check:active + .btn-info:focus, +.btn-info:active:focus, +.btn-info.active:focus, +.show > .btn-info.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5); +} +.btn-info:disabled, +.btn-info.disabled { + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; +} +.btn-warning { + color: #000; + background-color: #ffc107; + border-color: #ffc107; +} +.btn-warning:hover { + color: #000; + background-color: #ffca2c; + border-color: #ffc720; +} +.btn-check:focus + .btn-warning, +.btn-warning:focus { + color: #000; + background-color: #ffca2c; + border-color: #ffc720; + box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5); +} +.btn-check:checked + .btn-warning, +.btn-check:active + .btn-warning, +.btn-warning:active, +.btn-warning.active, +.show > .btn-warning.dropdown-toggle { + color: #000; + background-color: #ffcd39; + border-color: #ffc720; +} +.btn-check:checked + .btn-warning:focus, +.btn-check:active + .btn-warning:focus, +.btn-warning:active:focus, +.btn-warning.active:focus, +.show > .btn-warning.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5); +} +.btn-warning:disabled, +.btn-warning.disabled { + color: #000; + background-color: #ffc107; + border-color: #ffc107; +} +.btn-danger { + color: #fff; + background-color: #dc3545; + border-color: #dc3545; +} +.btn-danger:hover { + color: #fff; + background-color: #bb2d3b; + border-color: #b02a37; +} +.btn-check:focus + .btn-danger, +.btn-danger:focus { + color: #fff; + background-color: #bb2d3b; + border-color: #b02a37; + box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); +} +.btn-check:checked + .btn-danger, +.btn-check:active + .btn-danger, +.btn-danger:active, +.btn-danger.active, +.show > .btn-danger.dropdown-toggle { + color: #fff; + background-color: #b02a37; + border-color: #a52834; +} +.btn-check:checked + .btn-danger:focus, +.btn-check:active + .btn-danger:focus, +.btn-danger:active:focus, +.btn-danger.active:focus, +.show > .btn-danger.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); +} +.btn-danger:disabled, +.btn-danger.disabled { + color: #fff; + background-color: #dc3545; + border-color: #dc3545; +} +.btn-light { + color: #000; + background-color: #f8f9fa; + border-color: #f8f9fa; +} +.btn-light:hover { + color: #000; + background-color: #f9fafb; + border-color: #f9fafb; +} +.btn-check:focus + .btn-light, +.btn-light:focus { + color: #000; + background-color: #f9fafb; + border-color: #f9fafb; + box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); +} +.btn-check:checked + .btn-light, +.btn-check:active + .btn-light, +.btn-light:active, +.btn-light.active, +.show > .btn-light.dropdown-toggle { + color: #000; + background-color: #f9fafb; + border-color: #f9fafb; +} +.btn-check:checked + .btn-light:focus, +.btn-check:active + .btn-light:focus, +.btn-light:active:focus, +.btn-light.active:focus, +.show > .btn-light.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); +} +.btn-light:disabled, +.btn-light.disabled { + color: #000; + background-color: #f8f9fa; + border-color: #f8f9fa; +} +.btn-dark { + color: #fff; + background-color: #212529; + border-color: #212529; +} +.btn-dark:hover { + color: #fff; + background-color: #1c1f23; + border-color: #1a1e21; +} +.btn-check:focus + .btn-dark, +.btn-dark:focus { + color: #fff; + background-color: #1c1f23; + border-color: #1a1e21; + box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); +} +.btn-check:checked + .btn-dark, +.btn-check:active + .btn-dark, +.btn-dark:active, +.btn-dark.active, +.show > .btn-dark.dropdown-toggle { + color: #fff; + background-color: #1a1e21; + border-color: #191c1f; +} +.btn-check:checked + .btn-dark:focus, +.btn-check:active + .btn-dark:focus, +.btn-dark:active:focus, +.btn-dark.active:focus, +.show > .btn-dark.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); +} +.btn-dark:disabled, +.btn-dark.disabled { + color: #fff; + background-color: #212529; + border-color: #212529; +} +.btn-outline-primary { + color: #0d6efd; + border-color: #0d6efd; +} +.btn-outline-primary:hover { + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} +.btn-check:focus + .btn-outline-primary, +.btn-outline-primary:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); +} +.btn-check:checked + .btn-outline-primary, +.btn-check:active + .btn-outline-primary, +.btn-outline-primary:active, +.btn-outline-primary.active, +.btn-outline-primary.dropdown-toggle.show { + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} +.btn-check:checked + .btn-outline-primary:focus, +.btn-check:active + .btn-outline-primary:focus, +.btn-outline-primary:active:focus, +.btn-outline-primary.active:focus, +.btn-outline-primary.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); +} +.btn-outline-primary:disabled, +.btn-outline-primary.disabled { + color: #0d6efd; + background-color: transparent; +} +.btn-outline-secondary { + color: #6c757d; + border-color: #6c757d; +} +.btn-outline-secondary:hover { + color: #fff; + background-color: #6c757d; + border-color: #6c757d; +} +.btn-check:focus + .btn-outline-secondary, +.btn-outline-secondary:focus { + box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); +} +.btn-check:checked + .btn-outline-secondary, +.btn-check:active + .btn-outline-secondary, +.btn-outline-secondary:active, +.btn-outline-secondary.active, +.btn-outline-secondary.dropdown-toggle.show { + color: #fff; + background-color: #6c757d; + border-color: #6c757d; +} +.btn-check:checked + .btn-outline-secondary:focus, +.btn-check:active + .btn-outline-secondary:focus, +.btn-outline-secondary:active:focus, +.btn-outline-secondary.active:focus, +.btn-outline-secondary.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); +} +.btn-outline-secondary:disabled, +.btn-outline-secondary.disabled { + color: #6c757d; + background-color: transparent; +} +.btn-outline-success { + color: #198754; + border-color: #198754; +} +.btn-outline-success:hover { + color: #fff; + background-color: #198754; + border-color: #198754; +} +.btn-check:focus + .btn-outline-success, +.btn-outline-success:focus { + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); +} +.btn-check:checked + .btn-outline-success, +.btn-check:active + .btn-outline-success, +.btn-outline-success:active, +.btn-outline-success.active, +.btn-outline-success.dropdown-toggle.show { + color: #fff; + background-color: #198754; + border-color: #198754; +} +.btn-check:checked + .btn-outline-success:focus, +.btn-check:active + .btn-outline-success:focus, +.btn-outline-success:active:focus, +.btn-outline-success.active:focus, +.btn-outline-success.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); +} +.btn-outline-success:disabled, +.btn-outline-success.disabled { + color: #198754; + background-color: transparent; +} +.btn-outline-info { + color: #0dcaf0; + border-color: #0dcaf0; +} +.btn-outline-info:hover { + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; +} +.btn-check:focus + .btn-outline-info, +.btn-outline-info:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); +} +.btn-check:checked + .btn-outline-info, +.btn-check:active + .btn-outline-info, +.btn-outline-info:active, +.btn-outline-info.active, +.btn-outline-info.dropdown-toggle.show { + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; +} +.btn-check:checked + .btn-outline-info:focus, +.btn-check:active + .btn-outline-info:focus, +.btn-outline-info:active:focus, +.btn-outline-info.active:focus, +.btn-outline-info.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); +} +.btn-outline-info:disabled, +.btn-outline-info.disabled { + color: #0dcaf0; + background-color: transparent; +} +.btn-outline-warning { + color: #ffc107; + border-color: #ffc107; +} +.btn-outline-warning:hover { + color: #000; + background-color: #ffc107; + border-color: #ffc107; +} +.btn-check:focus + .btn-outline-warning, +.btn-outline-warning:focus { + box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); +} +.btn-check:checked + .btn-outline-warning, +.btn-check:active + .btn-outline-warning, +.btn-outline-warning:active, +.btn-outline-warning.active, +.btn-outline-warning.dropdown-toggle.show { + color: #000; + background-color: #ffc107; + border-color: #ffc107; +} +.btn-check:checked + .btn-outline-warning:focus, +.btn-check:active + .btn-outline-warning:focus, +.btn-outline-warning:active:focus, +.btn-outline-warning.active:focus, +.btn-outline-warning.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); +} +.btn-outline-warning:disabled, +.btn-outline-warning.disabled { + color: #ffc107; + background-color: transparent; +} +.btn-outline-danger { + color: #dc3545; + border-color: #dc3545; +} +.btn-outline-danger:hover { + color: #fff; + background-color: #dc3545; + border-color: #dc3545; +} +.btn-check:focus + .btn-outline-danger, +.btn-outline-danger:focus { + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); +} +.btn-check:checked + .btn-outline-danger, +.btn-check:active + .btn-outline-danger, +.btn-outline-danger:active, +.btn-outline-danger.active, +.btn-outline-danger.dropdown-toggle.show { + color: #fff; + background-color: #dc3545; + border-color: #dc3545; +} +.btn-check:checked + .btn-outline-danger:focus, +.btn-check:active + .btn-outline-danger:focus, +.btn-outline-danger:active:focus, +.btn-outline-danger.active:focus, +.btn-outline-danger.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); +} +.btn-outline-danger:disabled, +.btn-outline-danger.disabled { + color: #dc3545; + background-color: transparent; +} +.btn-outline-light { + color: #f8f9fa; + border-color: #f8f9fa; +} +.btn-outline-light:hover { + color: #000; + background-color: #f8f9fa; + border-color: #f8f9fa; +} +.btn-check:focus + .btn-outline-light, +.btn-outline-light:focus { + box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); +} +.btn-check:checked + .btn-outline-light, +.btn-check:active + .btn-outline-light, +.btn-outline-light:active, +.btn-outline-light.active, +.btn-outline-light.dropdown-toggle.show { + color: #000; + background-color: #f8f9fa; + border-color: #f8f9fa; +} +.btn-check:checked + .btn-outline-light:focus, +.btn-check:active + .btn-outline-light:focus, +.btn-outline-light:active:focus, +.btn-outline-light.active:focus, +.btn-outline-light.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); +} +.btn-outline-light:disabled, +.btn-outline-light.disabled { + color: #f8f9fa; + background-color: transparent; +} +.btn-outline-dark { + color: #212529; + border-color: #212529; +} +.btn-outline-dark:hover { + color: #fff; + background-color: #212529; + border-color: #212529; +} +.btn-check:focus + .btn-outline-dark, +.btn-outline-dark:focus { + box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); +} +.btn-check:checked + .btn-outline-dark, +.btn-check:active + .btn-outline-dark, +.btn-outline-dark:active, +.btn-outline-dark.active, +.btn-outline-dark.dropdown-toggle.show { + color: #fff; + background-color: #212529; + border-color: #212529; +} +.btn-check:checked + .btn-outline-dark:focus, +.btn-check:active + .btn-outline-dark:focus, +.btn-outline-dark:active:focus, +.btn-outline-dark.active:focus, +.btn-outline-dark.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); +} +.btn-outline-dark:disabled, +.btn-outline-dark.disabled { + color: #212529; + background-color: transparent; +} +.btn-link { + font-weight: 400; + color: #0d6efd; + text-decoration: underline; +} +.btn-link:hover { + color: #0a58ca; +} +.btn-link:disabled, +.btn-link.disabled { + color: #6c757d; +} +.btn-lg, +.btn-group-lg > .btn { + padding: 0.5rem 1rem; + font-size: 1.25rem; + border-radius: 0.3rem; +} +.btn-sm, +.btn-group-sm > .btn { + padding: 0.25rem 0.5rem; + font-size: 0.875rem; + border-radius: 0.2rem; +} +.form-control { + width: 100%; +} +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-flex; + vertical-align: middle; +} +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + flex: 1 1 auto; +} +.btn-group > .btn-check:checked + .btn, +.btn-group > .btn-check:focus + .btn, +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active, +.btn-group-vertical > .btn-check:checked + .btn, +.btn-group-vertical > .btn-check:focus + .btn, +.btn-group-vertical > .btn:hover, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { + z-index: 1; +} +.btn-toolbar { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} +.btn-toolbar .input-group { + width: auto; +} +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) { + margin-left: -1px; +} +.btn-group > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group > .btn-group:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn:nth-child(n+3), +.btn-group > :not(.btn-check) + .btn, +.btn-group > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.dropdown-toggle-split { + padding-right: 0.5625rem; + padding-left: 0.5625rem; +} +.dropdown-toggle-split::after, +.dropup .dropdown-toggle-split::after, +.dropend .dropdown-toggle-split::after { + margin-left: 0; +} +.dropstart .dropdown-toggle-split::before { + margin-right: 0; +} +.btn-sm + .dropdown-toggle-split, +.btn-group-sm > .btn + .dropdown-toggle-split { + padding-right: 0.375rem; + padding-left: 0.375rem; +} +.btn-lg + .dropdown-toggle-split, +.btn-group-lg > .btn + .dropdown-toggle-split { + padding-right: 0.75rem; + padding-left: 0.75rem; +} +.btn-group-vertical { + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group { + width: 100%; +} +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) { + margin-top: -1px; +} +.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group-vertical > .btn-group:not(:last-child) > .btn { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn ~ .btn, +.btn-group-vertical > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.table { + --bs-table-bg: transparent; + --bs-table-accent-bg: transparent; + --bs-table-striped-color: #212529; + --bs-table-striped-bg: rgba(0, 0, 0, 0.05); + --bs-table-active-color: #212529; + --bs-table-active-bg: rgba(0, 0, 0, 0.1); + --bs-table-hover-color: #212529; + --bs-table-hover-bg: rgba(0, 0, 0, 0.075); + width: 100%; + margin-bottom: 1rem; + color: #212529; + vertical-align: top; + border-color: #dee2e6; +} +.table > :not(caption) > * > * { + padding: 0.5rem 0.5rem; + background-color: var(--bs-table-bg); + border-bottom-width: 1px; + box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); +} +.table > tbody { + vertical-align: inherit; +} +.table > thead { + vertical-align: bottom; +} +.table > :not(:first-child) { + border-top: 2px solid currentColor; +} +.caption-top { + caption-side: top; +} +.table-sm > :not(caption) > * > * { + padding: 0.25rem 0.25rem; +} +.table-bordered > :not(caption) > * { + border-width: 1px 0; +} +.table-bordered > :not(caption) > * > * { + border-width: 0 1px; +} +.table-borderless > :not(caption) > * > * { + border-bottom-width: 0; +} +.table-borderless > :not(:first-child) { + border-top-width: 0; +} +.table-striped > tbody > tr:nth-of-type(odd) > * { + --bs-table-accent-bg: var(--bs-table-striped-bg); + color: var(--bs-table-striped-color); +} +.table-active { + --bs-table-accent-bg: var(--bs-table-active-bg); + color: var(--bs-table-active-color); +} +.table-hover > tbody > tr:hover > * { + --bs-table-accent-bg: var(--bs-table-hover-bg); + color: var(--bs-table-hover-color); +} +.table-primary { + --bs-table-bg: #cfe2ff; + --bs-table-striped-bg: #c5d7f2; + --bs-table-striped-color: #000; + --bs-table-active-bg: #bacbe6; + --bs-table-active-color: #000; + --bs-table-hover-bg: #bfd1ec; + --bs-table-hover-color: #000; + color: #000; + border-color: #bacbe6; +} +.table-secondary { + --bs-table-bg: #e2e3e5; + --bs-table-striped-bg: #d7d8da; + --bs-table-striped-color: #000; + --bs-table-active-bg: #cbccce; + --bs-table-active-color: #000; + --bs-table-hover-bg: #d1d2d4; + --bs-table-hover-color: #000; + color: #000; + border-color: #cbccce; +} +.table-success { + --bs-table-bg: #d1e7dd; + --bs-table-striped-bg: #c7dbd2; + --bs-table-striped-color: #000; + --bs-table-active-bg: #bcd0c7; + --bs-table-active-color: #000; + --bs-table-hover-bg: #c1d6cc; + --bs-table-hover-color: #000; + color: #000; + border-color: #bcd0c7; +} +.table-info { + --bs-table-bg: #cff4fc; + --bs-table-striped-bg: #c5e8ef; + --bs-table-striped-color: #000; + --bs-table-active-bg: #badce3; + --bs-table-active-color: #000; + --bs-table-hover-bg: #bfe2e9; + --bs-table-hover-color: #000; + color: #000; + border-color: #badce3; +} +.table-warning { + --bs-table-bg: #fff3cd; + --bs-table-striped-bg: #f2e7c3; + --bs-table-striped-color: #000; + --bs-table-active-bg: #e6dbb9; + --bs-table-active-color: #000; + --bs-table-hover-bg: #ece1be; + --bs-table-hover-color: #000; + color: #000; + border-color: #e6dbb9; +} +.table-danger { + --bs-table-bg: #f8d7da; + --bs-table-striped-bg: #eccccf; + --bs-table-striped-color: #000; + --bs-table-active-bg: #dfc2c4; + --bs-table-active-color: #000; + --bs-table-hover-bg: #e5c7ca; + --bs-table-hover-color: #000; + color: #000; + border-color: #dfc2c4; +} +.table-light { + --bs-table-bg: #f8f9fa; + --bs-table-striped-bg: #ecedee; + --bs-table-striped-color: #000; + --bs-table-active-bg: #dfe0e1; + --bs-table-active-color: #000; + --bs-table-hover-bg: #e5e6e7; + --bs-table-hover-color: #000; + color: #000; + border-color: #dfe0e1; +} +.table-dark { + --bs-table-bg: #212529; + --bs-table-striped-bg: #2c3034; + --bs-table-striped-color: #fff; + --bs-table-active-bg: #373b3e; + --bs-table-active-color: #fff; + --bs-table-hover-bg: #323539; + --bs-table-hover-color: #fff; + color: #fff; + border-color: #373b3e; +} +.table-responsive { + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} +@media (max-width: 575.98px) { + .table-responsive-sm { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} +@media (max-width: 767.98px) { + .table-responsive-md { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} +@media (max-width: 991.98px) { + .table-responsive-lg { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} +@media (max-width: 1199.98px) { + .table-responsive-xl { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} +@media (max-width: 1399.98px) { + .table-responsive-xxl { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} +.nav-tabs { + border-bottom: 1px solid #dee2e6; +} +.nav-tabs .nav-link { + margin-bottom: -1px; + background: none; + border: 1px solid transparent; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} +.nav-tabs .nav-link:hover, +.nav-tabs .nav-link:focus { + border-color: #e9ecef #e9ecef #dee2e6; + isolation: isolate; +} +.nav-tabs .nav-link.disabled { + color: #6c757d; + background-color: transparent; + border-color: transparent; +} +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + color: #495057; + background-color: #fff; + border-color: #dee2e6 #dee2e6 #fff; +} +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.nav-pills .nav-link { + background: none; + border: 0; + border-radius: 0.25rem; +} +.nav-pills .nav-link.active, +.nav-pills .show > .nav-link { + color: #fff; + background-color: #0d6efd; +} +.nav-fill > .nav-link, +.nav-fill .nav-item { + flex: 1 1 auto; + text-align: center; +} +.nav-justified > .nav-link, +.nav-justified .nav-item { + flex-basis: 0; + flex-grow: 1; + text-align: center; +} +.nav-fill .nav-item .nav-link, +.nav-justified .nav-item .nav-link { + width: 100%; +} +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} +/*! + * Bootstrap Grid v5.1.1 (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */ +:root { + --bs-blue: #0d6efd; + --bs-indigo: #6610f2; + --bs-purple: #6f42c1; + --bs-pink: #d63384; + --bs-red: #dc3545; + --bs-orange: #fd7e14; + --bs-yellow: #ffc107; + --bs-green: #198754; + --bs-teal: #20c997; + --bs-cyan: #0dcaf0; + --bs-white: #fff; + --bs-gray: #6c757d; + --bs-gray-dark: #343a40; + --bs-gray-100: #f8f9fa; + --bs-gray-200: #e9ecef; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #adb5bd; + --bs-gray-600: #6c757d; + --bs-gray-700: #495057; + --bs-gray-800: #343a40; + --bs-gray-900: #212529; + --bs-primary: #0d6efd; + --bs-secondary: #6c757d; + --bs-success: #198754; + --bs-info: #0dcaf0; + --bs-warning: #ffc107; + --bs-danger: #dc3545; + --bs-light: #f8f9fa; + --bs-dark: #212529; + --bs-primary-rgb: 13, 110, 253; + --bs-secondary-rgb: 108, 117, 125; + --bs-success-rgb: 25, 135, 84; + --bs-info-rgb: 13, 202, 240; + --bs-warning-rgb: 255, 193, 7; + --bs-danger-rgb: 220, 53, 69; + --bs-light-rgb: 248, 249, 250; + --bs-dark-rgb: 33, 37, 41; + --bs-white-rgb: 255, 255, 255; + --bs-black-rgb: 0, 0, 0; + --bs-body-color-rgb: 33, 37, 41; + --bs-body-bg-rgb: 255, 255, 255; + --bs-font-sans-serif: inherit; + --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-body-font-family: inherit; + --bs-body-font-size: 1rem; + --bs-body-font-weight: 400; + --bs-body-line-height: 1.5; + --bs-body-color: #212529; + --bs-body-bg: #fff; +} +.container, +.container-fluid, +.container-xxl, +.container-xl, +.container-lg, +.container-md, +.container-sm { + width: 100%; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); + margin-right: auto; + margin-left: auto; +} +@media (min-width: 576px) { + .container-sm, + .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container-md, + .container-sm, + .container { + max-width: 720px; + } +} +@media (min-width: 992px) { + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 1140px; + } +} +@media (min-width: 1400px) { + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 1320px; + } +} +.col { + flex: 1 0 0%; +} +.row-cols-auto > * { + flex: 0 0 auto; + width: auto; +} +.row-cols-1 > * { + flex: 0 0 auto; + width: 100%; +} +.row-cols-2 > * { + flex: 0 0 auto; + width: 50%; +} +.row-cols-3 > * { + flex: 0 0 auto; + width: 33.33333333%; +} +.row-cols-4 > * { + flex: 0 0 auto; + width: 25%; +} +.row-cols-5 > * { + flex: 0 0 auto; + width: 20%; +} +.row-cols-6 > * { + flex: 0 0 auto; + width: 16.66666667%; +} +.col-auto { + flex: 0 0 auto; + width: auto; +} +.col-1 { + flex: 0 0 auto; + width: 8.33333333%; +} +.col-2 { + flex: 0 0 auto; + width: 16.66666667%; +} +.col-3 { + flex: 0 0 auto; + width: 25%; +} +.col-4 { + flex: 0 0 auto; + width: 33.33333333%; +} +.col-5 { + flex: 0 0 auto; + width: 41.66666667%; +} +.col-6 { + flex: 0 0 auto; + width: 50%; +} +.col-7 { + flex: 0 0 auto; + width: 58.33333333%; +} +.col-8 { + flex: 0 0 auto; + width: 66.66666667%; +} +.col-9 { + flex: 0 0 auto; + width: 75%; +} +.col-10 { + flex: 0 0 auto; + width: 83.33333333%; +} +.col-11 { + flex: 0 0 auto; + width: 91.66666667%; +} +.col-12 { + flex: 0 0 auto; + width: 100%; +} +.offset-1 { + margin-left: 8.33333333%; +} +.offset-2 { + margin-left: 16.66666667%; +} +.offset-3 { + margin-left: 25%; +} +.offset-4 { + margin-left: 33.33333333%; +} +.offset-5 { + margin-left: 41.66666667%; +} +.offset-6 { + margin-left: 50%; +} +.offset-7 { + margin-left: 58.33333333%; +} +.offset-8 { + margin-left: 66.66666667%; +} +.offset-9 { + margin-left: 75%; +} +.offset-10 { + margin-left: 83.33333333%; +} +.offset-11 { + margin-left: 91.66666667%; +} +.g-0, +.gx-0 { + --bs-gutter-x: 0; +} +.g-0, +.gy-0 { + --bs-gutter-y: 0; +} +.g-1, +.gx-1 { + --bs-gutter-x: 0.25rem; +} +.g-1, +.gy-1 { + --bs-gutter-y: 0.25rem; +} +.g-2, +.gx-2 { + --bs-gutter-x: 0.5rem; +} +.g-2, +.gy-2 { + --bs-gutter-y: 0.5rem; +} +.g-3, +.gx-3 { + --bs-gutter-x: 1rem; +} +.g-3, +.gy-3 { + --bs-gutter-y: 1rem; +} +.g-4, +.gx-4 { + --bs-gutter-x: 1.5rem; +} +.g-4, +.gy-4 { + --bs-gutter-y: 1.5rem; +} +.g-5, +.gx-5 { + --bs-gutter-x: 3rem; +} +.g-5, +.gy-5 { + --bs-gutter-y: 3rem; +} +@media (min-width: 576px) { + .col-sm { + flex: 1 0 0%; + } + .row-cols-sm-auto > * { + flex: 0 0 auto; + width: auto; + } + .row-cols-sm-1 > * { + flex: 0 0 auto; + width: 100%; + } + .row-cols-sm-2 > * { + flex: 0 0 auto; + width: 50%; + } + .row-cols-sm-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + .row-cols-sm-4 > * { + flex: 0 0 auto; + width: 25%; + } + .row-cols-sm-5 > * { + flex: 0 0 auto; + width: 20%; + } + .row-cols-sm-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-sm-auto { + flex: 0 0 auto; + width: auto; + } + .col-sm-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + .col-sm-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-sm-3 { + flex: 0 0 auto; + width: 25%; + } + .col-sm-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + .col-sm-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + .col-sm-6 { + flex: 0 0 auto; + width: 50%; + } + .col-sm-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + .col-sm-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + .col-sm-9 { + flex: 0 0 auto; + width: 75%; + } + .col-sm-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + .col-sm-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + .col-sm-12 { + flex: 0 0 auto; + width: 100%; + } + .offset-sm-0 { + margin-left: 0; + } + .offset-sm-1 { + margin-left: 8.33333333%; + } + .offset-sm-2 { + margin-left: 16.66666667%; + } + .offset-sm-3 { + margin-left: 25%; + } + .offset-sm-4 { + margin-left: 33.33333333%; + } + .offset-sm-5 { + margin-left: 41.66666667%; + } + .offset-sm-6 { + margin-left: 50%; + } + .offset-sm-7 { + margin-left: 58.33333333%; + } + .offset-sm-8 { + margin-left: 66.66666667%; + } + .offset-sm-9 { + margin-left: 75%; + } + .offset-sm-10 { + margin-left: 83.33333333%; + } + .offset-sm-11 { + margin-left: 91.66666667%; + } + .g-sm-0, + .gx-sm-0 { + --bs-gutter-x: 0; + } + .g-sm-0, + .gy-sm-0 { + --bs-gutter-y: 0; + } + .g-sm-1, + .gx-sm-1 { + --bs-gutter-x: 0.25rem; + } + .g-sm-1, + .gy-sm-1 { + --bs-gutter-y: 0.25rem; + } + .g-sm-2, + .gx-sm-2 { + --bs-gutter-x: 0.5rem; + } + .g-sm-2, + .gy-sm-2 { + --bs-gutter-y: 0.5rem; + } + .g-sm-3, + .gx-sm-3 { + --bs-gutter-x: 1rem; + } + .g-sm-3, + .gy-sm-3 { + --bs-gutter-y: 1rem; + } + .g-sm-4, + .gx-sm-4 { + --bs-gutter-x: 1.5rem; + } + .g-sm-4, + .gy-sm-4 { + --bs-gutter-y: 1.5rem; + } + .g-sm-5, + .gx-sm-5 { + --bs-gutter-x: 3rem; + } + .g-sm-5, + .gy-sm-5 { + --bs-gutter-y: 3rem; + } +} +@media (min-width: 768px) { + .col-md { + flex: 1 0 0%; + } + .row-cols-md-auto > * { + flex: 0 0 auto; + width: auto; + } + .row-cols-md-1 > * { + flex: 0 0 auto; + width: 100%; + } + .row-cols-md-2 > * { + flex: 0 0 auto; + width: 50%; + } + .row-cols-md-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + .row-cols-md-4 > * { + flex: 0 0 auto; + width: 25%; + } + .row-cols-md-5 > * { + flex: 0 0 auto; + width: 20%; + } + .row-cols-md-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-md-auto { + flex: 0 0 auto; + width: auto; + } + .col-md-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + .col-md-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-md-3 { + flex: 0 0 auto; + width: 25%; + } + .col-md-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + .col-md-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + .col-md-6 { + flex: 0 0 auto; + width: 50%; + } + .col-md-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + .col-md-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + .col-md-9 { + flex: 0 0 auto; + width: 75%; + } + .col-md-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + .col-md-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + .col-md-12 { + flex: 0 0 auto; + width: 100%; + } + .offset-md-0 { + margin-left: 0; + } + .offset-md-1 { + margin-left: 8.33333333%; + } + .offset-md-2 { + margin-left: 16.66666667%; + } + .offset-md-3 { + margin-left: 25%; + } + .offset-md-4 { + margin-left: 33.33333333%; + } + .offset-md-5 { + margin-left: 41.66666667%; + } + .offset-md-6 { + margin-left: 50%; + } + .offset-md-7 { + margin-left: 58.33333333%; + } + .offset-md-8 { + margin-left: 66.66666667%; + } + .offset-md-9 { + margin-left: 75%; + } + .offset-md-10 { + margin-left: 83.33333333%; + } + .offset-md-11 { + margin-left: 91.66666667%; + } + .g-md-0, + .gx-md-0 { + --bs-gutter-x: 0; + } + .g-md-0, + .gy-md-0 { + --bs-gutter-y: 0; + } + .g-md-1, + .gx-md-1 { + --bs-gutter-x: 0.25rem; + } + .g-md-1, + .gy-md-1 { + --bs-gutter-y: 0.25rem; + } + .g-md-2, + .gx-md-2 { + --bs-gutter-x: 0.5rem; + } + .g-md-2, + .gy-md-2 { + --bs-gutter-y: 0.5rem; + } + .g-md-3, + .gx-md-3 { + --bs-gutter-x: 1rem; + } + .g-md-3, + .gy-md-3 { + --bs-gutter-y: 1rem; + } + .g-md-4, + .gx-md-4 { + --bs-gutter-x: 1.5rem; + } + .g-md-4, + .gy-md-4 { + --bs-gutter-y: 1.5rem; + } + .g-md-5, + .gx-md-5 { + --bs-gutter-x: 3rem; + } + .g-md-5, + .gy-md-5 { + --bs-gutter-y: 3rem; + } +} +@media (min-width: 992px) { + .col-lg { + flex: 1 0 0%; + } + .row-cols-lg-auto > * { + flex: 0 0 auto; + width: auto; + } + .row-cols-lg-1 > * { + flex: 0 0 auto; + width: 100%; + } + .row-cols-lg-2 > * { + flex: 0 0 auto; + width: 50%; + } + .row-cols-lg-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + .row-cols-lg-4 > * { + flex: 0 0 auto; + width: 25%; + } + .row-cols-lg-5 > * { + flex: 0 0 auto; + width: 20%; + } + .row-cols-lg-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-lg-auto { + flex: 0 0 auto; + width: auto; + } + .col-lg-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + .col-lg-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-lg-3 { + flex: 0 0 auto; + width: 25%; + } + .col-lg-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + .col-lg-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + .col-lg-6 { + flex: 0 0 auto; + width: 50%; + } + .col-lg-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + .col-lg-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + .col-lg-9 { + flex: 0 0 auto; + width: 75%; + } + .col-lg-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + .col-lg-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + .col-lg-12 { + flex: 0 0 auto; + width: 100%; + } + .offset-lg-0 { + margin-left: 0; + } + .offset-lg-1 { + margin-left: 8.33333333%; + } + .offset-lg-2 { + margin-left: 16.66666667%; + } + .offset-lg-3 { + margin-left: 25%; + } + .offset-lg-4 { + margin-left: 33.33333333%; + } + .offset-lg-5 { + margin-left: 41.66666667%; + } + .offset-lg-6 { + margin-left: 50%; + } + .offset-lg-7 { + margin-left: 58.33333333%; + } + .offset-lg-8 { + margin-left: 66.66666667%; + } + .offset-lg-9 { + margin-left: 75%; + } + .offset-lg-10 { + margin-left: 83.33333333%; + } + .offset-lg-11 { + margin-left: 91.66666667%; + } + .g-lg-0, + .gx-lg-0 { + --bs-gutter-x: 0; + } + .g-lg-0, + .gy-lg-0 { + --bs-gutter-y: 0; + } + .g-lg-1, + .gx-lg-1 { + --bs-gutter-x: 0.25rem; + } + .g-lg-1, + .gy-lg-1 { + --bs-gutter-y: 0.25rem; + } + .g-lg-2, + .gx-lg-2 { + --bs-gutter-x: 0.5rem; + } + .g-lg-2, + .gy-lg-2 { + --bs-gutter-y: 0.5rem; + } + .g-lg-3, + .gx-lg-3 { + --bs-gutter-x: 1rem; + } + .g-lg-3, + .gy-lg-3 { + --bs-gutter-y: 1rem; + } + .g-lg-4, + .gx-lg-4 { + --bs-gutter-x: 1.5rem; + } + .g-lg-4, + .gy-lg-4 { + --bs-gutter-y: 1.5rem; + } + .g-lg-5, + .gx-lg-5 { + --bs-gutter-x: 3rem; + } + .g-lg-5, + .gy-lg-5 { + --bs-gutter-y: 3rem; + } +} +@media (min-width: 1200px) { + .col-xl { + flex: 1 0 0%; + } + .row-cols-xl-auto > * { + flex: 0 0 auto; + width: auto; + } + .row-cols-xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + .row-cols-xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + .row-cols-xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + .row-cols-xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + .row-cols-xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + .row-cols-xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-xl-auto { + flex: 0 0 auto; + width: auto; + } + .col-xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + .col-xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-xl-3 { + flex: 0 0 auto; + width: 25%; + } + .col-xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + .col-xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + .col-xl-6 { + flex: 0 0 auto; + width: 50%; + } + .col-xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + .col-xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + .col-xl-9 { + flex: 0 0 auto; + width: 75%; + } + .col-xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + .col-xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + .col-xl-12 { + flex: 0 0 auto; + width: 100%; + } + .offset-xl-0 { + margin-left: 0; + } + .offset-xl-1 { + margin-left: 8.33333333%; + } + .offset-xl-2 { + margin-left: 16.66666667%; + } + .offset-xl-3 { + margin-left: 25%; + } + .offset-xl-4 { + margin-left: 33.33333333%; + } + .offset-xl-5 { + margin-left: 41.66666667%; + } + .offset-xl-6 { + margin-left: 50%; + } + .offset-xl-7 { + margin-left: 58.33333333%; + } + .offset-xl-8 { + margin-left: 66.66666667%; + } + .offset-xl-9 { + margin-left: 75%; + } + .offset-xl-10 { + margin-left: 83.33333333%; + } + .offset-xl-11 { + margin-left: 91.66666667%; + } + .g-xl-0, + .gx-xl-0 { + --bs-gutter-x: 0; + } + .g-xl-0, + .gy-xl-0 { + --bs-gutter-y: 0; + } + .g-xl-1, + .gx-xl-1 { + --bs-gutter-x: 0.25rem; + } + .g-xl-1, + .gy-xl-1 { + --bs-gutter-y: 0.25rem; + } + .g-xl-2, + .gx-xl-2 { + --bs-gutter-x: 0.5rem; + } + .g-xl-2, + .gy-xl-2 { + --bs-gutter-y: 0.5rem; + } + .g-xl-3, + .gx-xl-3 { + --bs-gutter-x: 1rem; + } + .g-xl-3, + .gy-xl-3 { + --bs-gutter-y: 1rem; + } + .g-xl-4, + .gx-xl-4 { + --bs-gutter-x: 1.5rem; + } + .g-xl-4, + .gy-xl-4 { + --bs-gutter-y: 1.5rem; + } + .g-xl-5, + .gx-xl-5 { + --bs-gutter-x: 3rem; + } + .g-xl-5, + .gy-xl-5 { + --bs-gutter-y: 3rem; + } +} +@media (min-width: 1400px) { + .col-xxl { + flex: 1 0 0%; + } + .row-cols-xxl-auto > * { + flex: 0 0 auto; + width: auto; + } + .row-cols-xxl-1 > * { + flex: 0 0 auto; + width: 100%; + } + .row-cols-xxl-2 > * { + flex: 0 0 auto; + width: 50%; + } + .row-cols-xxl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + .row-cols-xxl-4 > * { + flex: 0 0 auto; + width: 25%; + } + .row-cols-xxl-5 > * { + flex: 0 0 auto; + width: 20%; + } + .row-cols-xxl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-xxl-auto { + flex: 0 0 auto; + width: auto; + } + .col-xxl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + .col-xxl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-xxl-3 { + flex: 0 0 auto; + width: 25%; + } + .col-xxl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + .col-xxl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + .col-xxl-6 { + flex: 0 0 auto; + width: 50%; + } + .col-xxl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + .col-xxl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + .col-xxl-9 { + flex: 0 0 auto; + width: 75%; + } + .col-xxl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + .col-xxl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + .col-xxl-12 { + flex: 0 0 auto; + width: 100%; + } + .offset-xxl-0 { + margin-left: 0; + } + .offset-xxl-1 { + margin-left: 8.33333333%; + } + .offset-xxl-2 { + margin-left: 16.66666667%; + } + .offset-xxl-3 { + margin-left: 25%; + } + .offset-xxl-4 { + margin-left: 33.33333333%; + } + .offset-xxl-5 { + margin-left: 41.66666667%; + } + .offset-xxl-6 { + margin-left: 50%; + } + .offset-xxl-7 { + margin-left: 58.33333333%; + } + .offset-xxl-8 { + margin-left: 66.66666667%; + } + .offset-xxl-9 { + margin-left: 75%; + } + .offset-xxl-10 { + margin-left: 83.33333333%; + } + .offset-xxl-11 { + margin-left: 91.66666667%; + } + .g-xxl-0, + .gx-xxl-0 { + --bs-gutter-x: 0; + } + .g-xxl-0, + .gy-xxl-0 { + --bs-gutter-y: 0; + } + .g-xxl-1, + .gx-xxl-1 { + --bs-gutter-x: 0.25rem; + } + .g-xxl-1, + .gy-xxl-1 { + --bs-gutter-y: 0.25rem; + } + .g-xxl-2, + .gx-xxl-2 { + --bs-gutter-x: 0.5rem; + } + .g-xxl-2, + .gy-xxl-2 { + --bs-gutter-y: 0.5rem; + } + .g-xxl-3, + .gx-xxl-3 { + --bs-gutter-x: 1rem; + } + .g-xxl-3, + .gy-xxl-3 { + --bs-gutter-y: 1rem; + } + .g-xxl-4, + .gx-xxl-4 { + --bs-gutter-x: 1.5rem; + } + .g-xxl-4, + .gy-xxl-4 { + --bs-gutter-y: 1.5rem; + } + .g-xxl-5, + .gx-xxl-5 { + --bs-gutter-x: 3rem; + } + .g-xxl-5, + .gy-xxl-5 { + --bs-gutter-y: 3rem; + } +} +.d-inline { + display: inline !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-block { + display: block !important; +} +.d-grid { + display: grid !important; +} +.d-table { + display: table !important; +} +.d-table-row { + display: table-row !important; +} +.d-table-cell { + display: table-cell !important; +} +.d-flex { + display: flex !important; +} +.d-inline-flex { + display: inline-flex !important; +} +.d-none { + display: none !important; +} +.flex-fill { + flex: 1 1 auto !important; +} +.flex-row { + flex-direction: row !important; +} +.flex-column { + flex-direction: column !important; +} +.flex-row-reverse { + flex-direction: row-reverse !important; +} +.flex-column-reverse { + flex-direction: column-reverse !important; +} +.flex-grow-0 { + flex-grow: 0 !important; +} +.flex-grow-1 { + flex-grow: 1 !important; +} +.flex-shrink-0 { + flex-shrink: 0 !important; +} +.flex-shrink-1 { + flex-shrink: 1 !important; +} +.flex-wrap { + flex-wrap: wrap !important; +} +.flex-nowrap { + flex-wrap: nowrap !important; +} +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} +.justify-content-start { + justify-content: flex-start !important; +} +.justify-content-end { + justify-content: flex-end !important; +} +.justify-content-center { + justify-content: center !important; +} +.justify-content-between { + justify-content: space-between !important; +} +.justify-content-around { + justify-content: space-around !important; +} +.justify-content-evenly { + justify-content: space-evenly !important; +} +.align-items-start { + align-items: flex-start !important; +} +.align-items-end { + align-items: flex-end !important; +} +.align-items-center { + align-items: center !important; +} +.align-items-baseline { + align-items: baseline !important; +} +.align-items-stretch { + align-items: stretch !important; +} +.align-content-start { + align-content: flex-start !important; +} +.align-content-end { + align-content: flex-end !important; +} +.align-content-center { + align-content: center !important; +} +.align-content-between { + align-content: space-between !important; +} +.align-content-around { + align-content: space-around !important; +} +.align-content-stretch { + align-content: stretch !important; +} +.align-self-auto { + align-self: auto !important; +} +.align-self-start { + align-self: flex-start !important; +} +.align-self-end { + align-self: flex-end !important; +} +.align-self-center { + align-self: center !important; +} +.align-self-baseline { + align-self: baseline !important; +} +.align-self-stretch { + align-self: stretch !important; +} +.order-first { + order: -1 !important; +} +.order-0 { + order: 0 !important; +} +.order-1 { + order: 1 !important; +} +.order-2 { + order: 2 !important; +} +.order-3 { + order: 3 !important; +} +.order-4 { + order: 4 !important; +} +.order-5 { + order: 5 !important; +} +.order-last { + order: 6 !important; +} +.m-0 { + margin: 0 !important; +} +.m-1 { + margin: 0.25rem !important; +} +.m-2 { + margin: 0.5rem !important; +} +.m-3 { + margin: 1rem !important; +} +.m-4 { + margin: 1.5rem !important; +} +.m-5 { + margin: 3rem !important; +} +.m-auto { + margin: auto !important; +} +.mx-0 { + margin-right: 0 !important; + margin-left: 0 !important; +} +.mx-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; +} +.mx-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; +} +.mx-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; +} +.mx-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; +} +.mx-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; +} +.mx-auto { + margin-right: auto !important; + margin-left: auto !important; +} +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} +.my-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} +.my-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} +.my-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} +.mt-0 { + margin-top: 0 !important; +} +.mt-1 { + margin-top: 0.25rem !important; +} +.mt-2 { + margin-top: 0.5rem !important; +} +.mt-3 { + margin-top: 1rem !important; +} +.mt-4 { + margin-top: 1.5rem !important; +} +.mt-5 { + margin-top: 3rem !important; +} +.mt-auto { + margin-top: auto !important; +} +.me-0 { + margin-right: 0 !important; +} +.me-1 { + margin-right: 0.25rem !important; +} +.me-2 { + margin-right: 0.5rem !important; +} +.me-3 { + margin-right: 1rem !important; +} +.me-4 { + margin-right: 1.5rem !important; +} +.me-5 { + margin-right: 3rem !important; +} +.me-auto { + margin-right: auto !important; +} +.mb-0 { + margin-bottom: 0 !important; +} +.mb-1 { + margin-bottom: 0.25rem !important; +} +.mb-2 { + margin-bottom: 0.5rem !important; +} +.mb-3 { + margin-bottom: 1rem !important; +} +.mb-4 { + margin-bottom: 1.5rem !important; +} +.mb-5 { + margin-bottom: 3rem !important; +} +.mb-auto { + margin-bottom: auto !important; +} +.ms-0 { + margin-left: 0 !important; +} +.ms-1 { + margin-left: 0.25rem !important; +} +.ms-2 { + margin-left: 0.5rem !important; +} +.ms-3 { + margin-left: 1rem !important; +} +.ms-4 { + margin-left: 1.5rem !important; +} +.ms-5 { + margin-left: 3rem !important; +} +.ms-auto { + margin-left: auto !important; +} +.p-0 { + padding: 0 !important; +} +.p-1 { + padding: 0.25rem !important; +} +.p-2 { + padding: 0.5rem !important; +} +.p-3 { + padding: 1rem !important; +} +.p-4 { + padding: 1.5rem !important; +} +.p-5 { + padding: 3rem !important; +} +.px-0 { + padding-right: 0 !important; + padding-left: 0 !important; +} +.px-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; +} +.px-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; +} +.px-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; +} +.px-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; +} +.px-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; +} +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} +.py-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} +.py-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} +.py-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} +.pt-0 { + padding-top: 0 !important; +} +.pt-1 { + padding-top: 0.25rem !important; +} +.pt-2 { + padding-top: 0.5rem !important; +} +.pt-3 { + padding-top: 1rem !important; +} +.pt-4 { + padding-top: 1.5rem !important; +} +.pt-5 { + padding-top: 3rem !important; +} +.pe-0 { + padding-right: 0 !important; +} +.pe-1 { + padding-right: 0.25rem !important; +} +.pe-2 { + padding-right: 0.5rem !important; +} +.pe-3 { + padding-right: 1rem !important; +} +.pe-4 { + padding-right: 1.5rem !important; +} +.pe-5 { + padding-right: 3rem !important; +} +.pb-0 { + padding-bottom: 0 !important; +} +.pb-1 { + padding-bottom: 0.25rem !important; +} +.pb-2 { + padding-bottom: 0.5rem !important; +} +.pb-3 { + padding-bottom: 1rem !important; +} +.pb-4 { + padding-bottom: 1.5rem !important; +} +.pb-5 { + padding-bottom: 3rem !important; +} +.ps-0 { + padding-left: 0 !important; +} +.ps-1 { + padding-left: 0.25rem !important; +} +.ps-2 { + padding-left: 0.5rem !important; +} +.ps-3 { + padding-left: 1rem !important; +} +.ps-4 { + padding-left: 1.5rem !important; +} +.ps-5 { + padding-left: 3rem !important; +} +@media (min-width: 576px) { + .d-sm-inline { + display: inline !important; + } + .d-sm-inline-block { + display: inline-block !important; + } + .d-sm-block { + display: block !important; + } + .d-sm-grid { + display: grid !important; + } + .d-sm-table { + display: table !important; + } + .d-sm-table-row { + display: table-row !important; + } + .d-sm-table-cell { + display: table-cell !important; + } + .d-sm-flex { + display: flex !important; + } + .d-sm-inline-flex { + display: inline-flex !important; + } + .d-sm-none { + display: none !important; + } + .flex-sm-fill { + flex: 1 1 auto !important; + } + .flex-sm-row { + flex-direction: row !important; + } + .flex-sm-column { + flex-direction: column !important; + } + .flex-sm-row-reverse { + flex-direction: row-reverse !important; + } + .flex-sm-column-reverse { + flex-direction: column-reverse !important; + } + .flex-sm-grow-0 { + flex-grow: 0 !important; + } + .flex-sm-grow-1 { + flex-grow: 1 !important; + } + .flex-sm-shrink-0 { + flex-shrink: 0 !important; + } + .flex-sm-shrink-1 { + flex-shrink: 1 !important; + } + .flex-sm-wrap { + flex-wrap: wrap !important; + } + .flex-sm-nowrap { + flex-wrap: nowrap !important; + } + .flex-sm-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-content-sm-start { + justify-content: flex-start !important; + } + .justify-content-sm-end { + justify-content: flex-end !important; + } + .justify-content-sm-center { + justify-content: center !important; + } + .justify-content-sm-between { + justify-content: space-between !important; + } + .justify-content-sm-around { + justify-content: space-around !important; + } + .justify-content-sm-evenly { + justify-content: space-evenly !important; + } + .align-items-sm-start { + align-items: flex-start !important; + } + .align-items-sm-end { + align-items: flex-end !important; + } + .align-items-sm-center { + align-items: center !important; + } + .align-items-sm-baseline { + align-items: baseline !important; + } + .align-items-sm-stretch { + align-items: stretch !important; + } + .align-content-sm-start { + align-content: flex-start !important; + } + .align-content-sm-end { + align-content: flex-end !important; + } + .align-content-sm-center { + align-content: center !important; + } + .align-content-sm-between { + align-content: space-between !important; + } + .align-content-sm-around { + align-content: space-around !important; + } + .align-content-sm-stretch { + align-content: stretch !important; + } + .align-self-sm-auto { + align-self: auto !important; + } + .align-self-sm-start { + align-self: flex-start !important; + } + .align-self-sm-end { + align-self: flex-end !important; + } + .align-self-sm-center { + align-self: center !important; + } + .align-self-sm-baseline { + align-self: baseline !important; + } + .align-self-sm-stretch { + align-self: stretch !important; + } + .order-sm-first { + order: -1 !important; + } + .order-sm-0 { + order: 0 !important; + } + .order-sm-1 { + order: 1 !important; + } + .order-sm-2 { + order: 2 !important; + } + .order-sm-3 { + order: 3 !important; + } + .order-sm-4 { + order: 4 !important; + } + .order-sm-5 { + order: 5 !important; + } + .order-sm-last { + order: 6 !important; + } + .m-sm-0 { + margin: 0 !important; + } + .m-sm-1 { + margin: 0.25rem !important; + } + .m-sm-2 { + margin: 0.5rem !important; + } + .m-sm-3 { + margin: 1rem !important; + } + .m-sm-4 { + margin: 1.5rem !important; + } + .m-sm-5 { + margin: 3rem !important; + } + .m-sm-auto { + margin: auto !important; + } + .mx-sm-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + .mx-sm-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + .mx-sm-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + .mx-sm-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + .mx-sm-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + .mx-sm-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + .mx-sm-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-sm-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .my-sm-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + .my-sm-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + .my-sm-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + .my-sm-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + .my-sm-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + .my-sm-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-sm-0 { + margin-top: 0 !important; + } + .mt-sm-1 { + margin-top: 0.25rem !important; + } + .mt-sm-2 { + margin-top: 0.5rem !important; + } + .mt-sm-3 { + margin-top: 1rem !important; + } + .mt-sm-4 { + margin-top: 1.5rem !important; + } + .mt-sm-5 { + margin-top: 3rem !important; + } + .mt-sm-auto { + margin-top: auto !important; + } + .me-sm-0 { + margin-right: 0 !important; + } + .me-sm-1 { + margin-right: 0.25rem !important; + } + .me-sm-2 { + margin-right: 0.5rem !important; + } + .me-sm-3 { + margin-right: 1rem !important; + } + .me-sm-4 { + margin-right: 1.5rem !important; + } + .me-sm-5 { + margin-right: 3rem !important; + } + .me-sm-auto { + margin-right: auto !important; + } + .mb-sm-0 { + margin-bottom: 0 !important; + } + .mb-sm-1 { + margin-bottom: 0.25rem !important; + } + .mb-sm-2 { + margin-bottom: 0.5rem !important; + } + .mb-sm-3 { + margin-bottom: 1rem !important; + } + .mb-sm-4 { + margin-bottom: 1.5rem !important; + } + .mb-sm-5 { + margin-bottom: 3rem !important; + } + .mb-sm-auto { + margin-bottom: auto !important; + } + .ms-sm-0 { + margin-left: 0 !important; + } + .ms-sm-1 { + margin-left: 0.25rem !important; + } + .ms-sm-2 { + margin-left: 0.5rem !important; + } + .ms-sm-3 { + margin-left: 1rem !important; + } + .ms-sm-4 { + margin-left: 1.5rem !important; + } + .ms-sm-5 { + margin-left: 3rem !important; + } + .ms-sm-auto { + margin-left: auto !important; + } + .p-sm-0 { + padding: 0 !important; + } + .p-sm-1 { + padding: 0.25rem !important; + } + .p-sm-2 { + padding: 0.5rem !important; + } + .p-sm-3 { + padding: 1rem !important; + } + .p-sm-4 { + padding: 1.5rem !important; + } + .p-sm-5 { + padding: 3rem !important; + } + .px-sm-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + .px-sm-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + .px-sm-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + .px-sm-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + .px-sm-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + .px-sm-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + .py-sm-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .py-sm-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + .py-sm-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + .py-sm-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + .py-sm-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + .py-sm-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + .pt-sm-0 { + padding-top: 0 !important; + } + .pt-sm-1 { + padding-top: 0.25rem !important; + } + .pt-sm-2 { + padding-top: 0.5rem !important; + } + .pt-sm-3 { + padding-top: 1rem !important; + } + .pt-sm-4 { + padding-top: 1.5rem !important; + } + .pt-sm-5 { + padding-top: 3rem !important; + } + .pe-sm-0 { + padding-right: 0 !important; + } + .pe-sm-1 { + padding-right: 0.25rem !important; + } + .pe-sm-2 { + padding-right: 0.5rem !important; + } + .pe-sm-3 { + padding-right: 1rem !important; + } + .pe-sm-4 { + padding-right: 1.5rem !important; + } + .pe-sm-5 { + padding-right: 3rem !important; + } + .pb-sm-0 { + padding-bottom: 0 !important; + } + .pb-sm-1 { + padding-bottom: 0.25rem !important; + } + .pb-sm-2 { + padding-bottom: 0.5rem !important; + } + .pb-sm-3 { + padding-bottom: 1rem !important; + } + .pb-sm-4 { + padding-bottom: 1.5rem !important; + } + .pb-sm-5 { + padding-bottom: 3rem !important; + } + .ps-sm-0 { + padding-left: 0 !important; + } + .ps-sm-1 { + padding-left: 0.25rem !important; + } + .ps-sm-2 { + padding-left: 0.5rem !important; + } + .ps-sm-3 { + padding-left: 1rem !important; + } + .ps-sm-4 { + padding-left: 1.5rem !important; + } + .ps-sm-5 { + padding-left: 3rem !important; + } +} +@media (min-width: 768px) { + .d-md-inline { + display: inline !important; + } + .d-md-inline-block { + display: inline-block !important; + } + .d-md-block { + display: block !important; + } + .d-md-grid { + display: grid !important; + } + .d-md-table { + display: table !important; + } + .d-md-table-row { + display: table-row !important; + } + .d-md-table-cell { + display: table-cell !important; + } + .d-md-flex { + display: flex !important; + } + .d-md-inline-flex { + display: inline-flex !important; + } + .d-md-none { + display: none !important; + } + .flex-md-fill { + flex: 1 1 auto !important; + } + .flex-md-row { + flex-direction: row !important; + } + .flex-md-column { + flex-direction: column !important; + } + .flex-md-row-reverse { + flex-direction: row-reverse !important; + } + .flex-md-column-reverse { + flex-direction: column-reverse !important; + } + .flex-md-grow-0 { + flex-grow: 0 !important; + } + .flex-md-grow-1 { + flex-grow: 1 !important; + } + .flex-md-shrink-0 { + flex-shrink: 0 !important; + } + .flex-md-shrink-1 { + flex-shrink: 1 !important; + } + .flex-md-wrap { + flex-wrap: wrap !important; + } + .flex-md-nowrap { + flex-wrap: nowrap !important; + } + .flex-md-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-content-md-start { + justify-content: flex-start !important; + } + .justify-content-md-end { + justify-content: flex-end !important; + } + .justify-content-md-center { + justify-content: center !important; + } + .justify-content-md-between { + justify-content: space-between !important; + } + .justify-content-md-around { + justify-content: space-around !important; + } + .justify-content-md-evenly { + justify-content: space-evenly !important; + } + .align-items-md-start { + align-items: flex-start !important; + } + .align-items-md-end { + align-items: flex-end !important; + } + .align-items-md-center { + align-items: center !important; + } + .align-items-md-baseline { + align-items: baseline !important; + } + .align-items-md-stretch { + align-items: stretch !important; + } + .align-content-md-start { + align-content: flex-start !important; + } + .align-content-md-end { + align-content: flex-end !important; + } + .align-content-md-center { + align-content: center !important; + } + .align-content-md-between { + align-content: space-between !important; + } + .align-content-md-around { + align-content: space-around !important; + } + .align-content-md-stretch { + align-content: stretch !important; + } + .align-self-md-auto { + align-self: auto !important; + } + .align-self-md-start { + align-self: flex-start !important; + } + .align-self-md-end { + align-self: flex-end !important; + } + .align-self-md-center { + align-self: center !important; + } + .align-self-md-baseline { + align-self: baseline !important; + } + .align-self-md-stretch { + align-self: stretch !important; + } + .order-md-first { + order: -1 !important; + } + .order-md-0 { + order: 0 !important; + } + .order-md-1 { + order: 1 !important; + } + .order-md-2 { + order: 2 !important; + } + .order-md-3 { + order: 3 !important; + } + .order-md-4 { + order: 4 !important; + } + .order-md-5 { + order: 5 !important; + } + .order-md-last { + order: 6 !important; + } + .m-md-0 { + margin: 0 !important; + } + .m-md-1 { + margin: 0.25rem !important; + } + .m-md-2 { + margin: 0.5rem !important; + } + .m-md-3 { + margin: 1rem !important; + } + .m-md-4 { + margin: 1.5rem !important; + } + .m-md-5 { + margin: 3rem !important; + } + .m-md-auto { + margin: auto !important; + } + .mx-md-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + .mx-md-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + .mx-md-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + .mx-md-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + .mx-md-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + .mx-md-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + .mx-md-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-md-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .my-md-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + .my-md-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + .my-md-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + .my-md-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + .my-md-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + .my-md-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-md-0 { + margin-top: 0 !important; + } + .mt-md-1 { + margin-top: 0.25rem !important; + } + .mt-md-2 { + margin-top: 0.5rem !important; + } + .mt-md-3 { + margin-top: 1rem !important; + } + .mt-md-4 { + margin-top: 1.5rem !important; + } + .mt-md-5 { + margin-top: 3rem !important; + } + .mt-md-auto { + margin-top: auto !important; + } + .me-md-0 { + margin-right: 0 !important; + } + .me-md-1 { + margin-right: 0.25rem !important; + } + .me-md-2 { + margin-right: 0.5rem !important; + } + .me-md-3 { + margin-right: 1rem !important; + } + .me-md-4 { + margin-right: 1.5rem !important; + } + .me-md-5 { + margin-right: 3rem !important; + } + .me-md-auto { + margin-right: auto !important; + } + .mb-md-0 { + margin-bottom: 0 !important; + } + .mb-md-1 { + margin-bottom: 0.25rem !important; + } + .mb-md-2 { + margin-bottom: 0.5rem !important; + } + .mb-md-3 { + margin-bottom: 1rem !important; + } + .mb-md-4 { + margin-bottom: 1.5rem !important; + } + .mb-md-5 { + margin-bottom: 3rem !important; + } + .mb-md-auto { + margin-bottom: auto !important; + } + .ms-md-0 { + margin-left: 0 !important; + } + .ms-md-1 { + margin-left: 0.25rem !important; + } + .ms-md-2 { + margin-left: 0.5rem !important; + } + .ms-md-3 { + margin-left: 1rem !important; + } + .ms-md-4 { + margin-left: 1.5rem !important; + } + .ms-md-5 { + margin-left: 3rem !important; + } + .ms-md-auto { + margin-left: auto !important; + } + .p-md-0 { + padding: 0 !important; + } + .p-md-1 { + padding: 0.25rem !important; + } + .p-md-2 { + padding: 0.5rem !important; + } + .p-md-3 { + padding: 1rem !important; + } + .p-md-4 { + padding: 1.5rem !important; + } + .p-md-5 { + padding: 3rem !important; + } + .px-md-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + .px-md-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + .px-md-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + .px-md-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + .px-md-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + .px-md-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + .py-md-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .py-md-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + .py-md-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + .py-md-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + .py-md-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + .py-md-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + .pt-md-0 { + padding-top: 0 !important; + } + .pt-md-1 { + padding-top: 0.25rem !important; + } + .pt-md-2 { + padding-top: 0.5rem !important; + } + .pt-md-3 { + padding-top: 1rem !important; + } + .pt-md-4 { + padding-top: 1.5rem !important; + } + .pt-md-5 { + padding-top: 3rem !important; + } + .pe-md-0 { + padding-right: 0 !important; + } + .pe-md-1 { + padding-right: 0.25rem !important; + } + .pe-md-2 { + padding-right: 0.5rem !important; + } + .pe-md-3 { + padding-right: 1rem !important; + } + .pe-md-4 { + padding-right: 1.5rem !important; + } + .pe-md-5 { + padding-right: 3rem !important; + } + .pb-md-0 { + padding-bottom: 0 !important; + } + .pb-md-1 { + padding-bottom: 0.25rem !important; + } + .pb-md-2 { + padding-bottom: 0.5rem !important; + } + .pb-md-3 { + padding-bottom: 1rem !important; + } + .pb-md-4 { + padding-bottom: 1.5rem !important; + } + .pb-md-5 { + padding-bottom: 3rem !important; + } + .ps-md-0 { + padding-left: 0 !important; + } + .ps-md-1 { + padding-left: 0.25rem !important; + } + .ps-md-2 { + padding-left: 0.5rem !important; + } + .ps-md-3 { + padding-left: 1rem !important; + } + .ps-md-4 { + padding-left: 1.5rem !important; + } + .ps-md-5 { + padding-left: 3rem !important; + } +} +@media (min-width: 992px) { + .d-lg-inline { + display: inline !important; + } + .d-lg-inline-block { + display: inline-block !important; + } + .d-lg-block { + display: block !important; + } + .d-lg-grid { + display: grid !important; + } + .d-lg-table { + display: table !important; + } + .d-lg-table-row { + display: table-row !important; + } + .d-lg-table-cell { + display: table-cell !important; + } + .d-lg-flex { + display: flex !important; + } + .d-lg-inline-flex { + display: inline-flex !important; + } + .d-lg-none { + display: none !important; + } + .flex-lg-fill { + flex: 1 1 auto !important; + } + .flex-lg-row { + flex-direction: row !important; + } + .flex-lg-column { + flex-direction: column !important; + } + .flex-lg-row-reverse { + flex-direction: row-reverse !important; + } + .flex-lg-column-reverse { + flex-direction: column-reverse !important; + } + .flex-lg-grow-0 { + flex-grow: 0 !important; + } + .flex-lg-grow-1 { + flex-grow: 1 !important; + } + .flex-lg-shrink-0 { + flex-shrink: 0 !important; + } + .flex-lg-shrink-1 { + flex-shrink: 1 !important; + } + .flex-lg-wrap { + flex-wrap: wrap !important; + } + .flex-lg-nowrap { + flex-wrap: nowrap !important; + } + .flex-lg-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-content-lg-start { + justify-content: flex-start !important; + } + .justify-content-lg-end { + justify-content: flex-end !important; + } + .justify-content-lg-center { + justify-content: center !important; + } + .justify-content-lg-between { + justify-content: space-between !important; + } + .justify-content-lg-around { + justify-content: space-around !important; + } + .justify-content-lg-evenly { + justify-content: space-evenly !important; + } + .align-items-lg-start { + align-items: flex-start !important; + } + .align-items-lg-end { + align-items: flex-end !important; + } + .align-items-lg-center { + align-items: center !important; + } + .align-items-lg-baseline { + align-items: baseline !important; + } + .align-items-lg-stretch { + align-items: stretch !important; + } + .align-content-lg-start { + align-content: flex-start !important; + } + .align-content-lg-end { + align-content: flex-end !important; + } + .align-content-lg-center { + align-content: center !important; + } + .align-content-lg-between { + align-content: space-between !important; + } + .align-content-lg-around { + align-content: space-around !important; + } + .align-content-lg-stretch { + align-content: stretch !important; + } + .align-self-lg-auto { + align-self: auto !important; + } + .align-self-lg-start { + align-self: flex-start !important; + } + .align-self-lg-end { + align-self: flex-end !important; + } + .align-self-lg-center { + align-self: center !important; + } + .align-self-lg-baseline { + align-self: baseline !important; + } + .align-self-lg-stretch { + align-self: stretch !important; + } + .order-lg-first { + order: -1 !important; + } + .order-lg-0 { + order: 0 !important; + } + .order-lg-1 { + order: 1 !important; + } + .order-lg-2 { + order: 2 !important; + } + .order-lg-3 { + order: 3 !important; + } + .order-lg-4 { + order: 4 !important; + } + .order-lg-5 { + order: 5 !important; + } + .order-lg-last { + order: 6 !important; + } + .m-lg-0 { + margin: 0 !important; + } + .m-lg-1 { + margin: 0.25rem !important; + } + .m-lg-2 { + margin: 0.5rem !important; + } + .m-lg-3 { + margin: 1rem !important; + } + .m-lg-4 { + margin: 1.5rem !important; + } + .m-lg-5 { + margin: 3rem !important; + } + .m-lg-auto { + margin: auto !important; + } + .mx-lg-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + .mx-lg-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + .mx-lg-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + .mx-lg-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + .mx-lg-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + .mx-lg-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + .mx-lg-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-lg-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .my-lg-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + .my-lg-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + .my-lg-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + .my-lg-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + .my-lg-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + .my-lg-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-lg-0 { + margin-top: 0 !important; + } + .mt-lg-1 { + margin-top: 0.25rem !important; + } + .mt-lg-2 { + margin-top: 0.5rem !important; + } + .mt-lg-3 { + margin-top: 1rem !important; + } + .mt-lg-4 { + margin-top: 1.5rem !important; + } + .mt-lg-5 { + margin-top: 3rem !important; + } + .mt-lg-auto { + margin-top: auto !important; + } + .me-lg-0 { + margin-right: 0 !important; + } + .me-lg-1 { + margin-right: 0.25rem !important; + } + .me-lg-2 { + margin-right: 0.5rem !important; + } + .me-lg-3 { + margin-right: 1rem !important; + } + .me-lg-4 { + margin-right: 1.5rem !important; + } + .me-lg-5 { + margin-right: 3rem !important; + } + .me-lg-auto { + margin-right: auto !important; + } + .mb-lg-0 { + margin-bottom: 0 !important; + } + .mb-lg-1 { + margin-bottom: 0.25rem !important; + } + .mb-lg-2 { + margin-bottom: 0.5rem !important; + } + .mb-lg-3 { + margin-bottom: 1rem !important; + } + .mb-lg-4 { + margin-bottom: 1.5rem !important; + } + .mb-lg-5 { + margin-bottom: 3rem !important; + } + .mb-lg-auto { + margin-bottom: auto !important; + } + .ms-lg-0 { + margin-left: 0 !important; + } + .ms-lg-1 { + margin-left: 0.25rem !important; + } + .ms-lg-2 { + margin-left: 0.5rem !important; + } + .ms-lg-3 { + margin-left: 1rem !important; + } + .ms-lg-4 { + margin-left: 1.5rem !important; + } + .ms-lg-5 { + margin-left: 3rem !important; + } + .ms-lg-auto { + margin-left: auto !important; + } + .p-lg-0 { + padding: 0 !important; + } + .p-lg-1 { + padding: 0.25rem !important; + } + .p-lg-2 { + padding: 0.5rem !important; + } + .p-lg-3 { + padding: 1rem !important; + } + .p-lg-4 { + padding: 1.5rem !important; + } + .p-lg-5 { + padding: 3rem !important; + } + .px-lg-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + .px-lg-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + .px-lg-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + .px-lg-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + .px-lg-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + .px-lg-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + .py-lg-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .py-lg-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + .py-lg-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + .py-lg-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + .py-lg-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + .py-lg-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + .pt-lg-0 { + padding-top: 0 !important; + } + .pt-lg-1 { + padding-top: 0.25rem !important; + } + .pt-lg-2 { + padding-top: 0.5rem !important; + } + .pt-lg-3 { + padding-top: 1rem !important; + } + .pt-lg-4 { + padding-top: 1.5rem !important; + } + .pt-lg-5 { + padding-top: 3rem !important; + } + .pe-lg-0 { + padding-right: 0 !important; + } + .pe-lg-1 { + padding-right: 0.25rem !important; + } + .pe-lg-2 { + padding-right: 0.5rem !important; + } + .pe-lg-3 { + padding-right: 1rem !important; + } + .pe-lg-4 { + padding-right: 1.5rem !important; + } + .pe-lg-5 { + padding-right: 3rem !important; + } + .pb-lg-0 { + padding-bottom: 0 !important; + } + .pb-lg-1 { + padding-bottom: 0.25rem !important; + } + .pb-lg-2 { + padding-bottom: 0.5rem !important; + } + .pb-lg-3 { + padding-bottom: 1rem !important; + } + .pb-lg-4 { + padding-bottom: 1.5rem !important; + } + .pb-lg-5 { + padding-bottom: 3rem !important; + } + .ps-lg-0 { + padding-left: 0 !important; + } + .ps-lg-1 { + padding-left: 0.25rem !important; + } + .ps-lg-2 { + padding-left: 0.5rem !important; + } + .ps-lg-3 { + padding-left: 1rem !important; + } + .ps-lg-4 { + padding-left: 1.5rem !important; + } + .ps-lg-5 { + padding-left: 3rem !important; + } +} +@media (min-width: 1200px) { + .d-xl-inline { + display: inline !important; + } + .d-xl-inline-block { + display: inline-block !important; + } + .d-xl-block { + display: block !important; + } + .d-xl-grid { + display: grid !important; + } + .d-xl-table { + display: table !important; + } + .d-xl-table-row { + display: table-row !important; + } + .d-xl-table-cell { + display: table-cell !important; + } + .d-xl-flex { + display: flex !important; + } + .d-xl-inline-flex { + display: inline-flex !important; + } + .d-xl-none { + display: none !important; + } + .flex-xl-fill { + flex: 1 1 auto !important; + } + .flex-xl-row { + flex-direction: row !important; + } + .flex-xl-column { + flex-direction: column !important; + } + .flex-xl-row-reverse { + flex-direction: row-reverse !important; + } + .flex-xl-column-reverse { + flex-direction: column-reverse !important; + } + .flex-xl-grow-0 { + flex-grow: 0 !important; + } + .flex-xl-grow-1 { + flex-grow: 1 !important; + } + .flex-xl-shrink-0 { + flex-shrink: 0 !important; + } + .flex-xl-shrink-1 { + flex-shrink: 1 !important; + } + .flex-xl-wrap { + flex-wrap: wrap !important; + } + .flex-xl-nowrap { + flex-wrap: nowrap !important; + } + .flex-xl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-content-xl-start { + justify-content: flex-start !important; + } + .justify-content-xl-end { + justify-content: flex-end !important; + } + .justify-content-xl-center { + justify-content: center !important; + } + .justify-content-xl-between { + justify-content: space-between !important; + } + .justify-content-xl-around { + justify-content: space-around !important; + } + .justify-content-xl-evenly { + justify-content: space-evenly !important; + } + .align-items-xl-start { + align-items: flex-start !important; + } + .align-items-xl-end { + align-items: flex-end !important; + } + .align-items-xl-center { + align-items: center !important; + } + .align-items-xl-baseline { + align-items: baseline !important; + } + .align-items-xl-stretch { + align-items: stretch !important; + } + .align-content-xl-start { + align-content: flex-start !important; + } + .align-content-xl-end { + align-content: flex-end !important; + } + .align-content-xl-center { + align-content: center !important; + } + .align-content-xl-between { + align-content: space-between !important; + } + .align-content-xl-around { + align-content: space-around !important; + } + .align-content-xl-stretch { + align-content: stretch !important; + } + .align-self-xl-auto { + align-self: auto !important; + } + .align-self-xl-start { + align-self: flex-start !important; + } + .align-self-xl-end { + align-self: flex-end !important; + } + .align-self-xl-center { + align-self: center !important; + } + .align-self-xl-baseline { + align-self: baseline !important; + } + .align-self-xl-stretch { + align-self: stretch !important; + } + .order-xl-first { + order: -1 !important; + } + .order-xl-0 { + order: 0 !important; + } + .order-xl-1 { + order: 1 !important; + } + .order-xl-2 { + order: 2 !important; + } + .order-xl-3 { + order: 3 !important; + } + .order-xl-4 { + order: 4 !important; + } + .order-xl-5 { + order: 5 !important; + } + .order-xl-last { + order: 6 !important; + } + .m-xl-0 { + margin: 0 !important; + } + .m-xl-1 { + margin: 0.25rem !important; + } + .m-xl-2 { + margin: 0.5rem !important; + } + .m-xl-3 { + margin: 1rem !important; + } + .m-xl-4 { + margin: 1.5rem !important; + } + .m-xl-5 { + margin: 3rem !important; + } + .m-xl-auto { + margin: auto !important; + } + .mx-xl-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + .mx-xl-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + .mx-xl-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + .mx-xl-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + .mx-xl-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + .mx-xl-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + .mx-xl-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-xl-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .my-xl-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + .my-xl-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + .my-xl-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + .my-xl-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + .my-xl-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + .my-xl-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-xl-0 { + margin-top: 0 !important; + } + .mt-xl-1 { + margin-top: 0.25rem !important; + } + .mt-xl-2 { + margin-top: 0.5rem !important; + } + .mt-xl-3 { + margin-top: 1rem !important; + } + .mt-xl-4 { + margin-top: 1.5rem !important; + } + .mt-xl-5 { + margin-top: 3rem !important; + } + .mt-xl-auto { + margin-top: auto !important; + } + .me-xl-0 { + margin-right: 0 !important; + } + .me-xl-1 { + margin-right: 0.25rem !important; + } + .me-xl-2 { + margin-right: 0.5rem !important; + } + .me-xl-3 { + margin-right: 1rem !important; + } + .me-xl-4 { + margin-right: 1.5rem !important; + } + .me-xl-5 { + margin-right: 3rem !important; + } + .me-xl-auto { + margin-right: auto !important; + } + .mb-xl-0 { + margin-bottom: 0 !important; + } + .mb-xl-1 { + margin-bottom: 0.25rem !important; + } + .mb-xl-2 { + margin-bottom: 0.5rem !important; + } + .mb-xl-3 { + margin-bottom: 1rem !important; + } + .mb-xl-4 { + margin-bottom: 1.5rem !important; + } + .mb-xl-5 { + margin-bottom: 3rem !important; + } + .mb-xl-auto { + margin-bottom: auto !important; + } + .ms-xl-0 { + margin-left: 0 !important; + } + .ms-xl-1 { + margin-left: 0.25rem !important; + } + .ms-xl-2 { + margin-left: 0.5rem !important; + } + .ms-xl-3 { + margin-left: 1rem !important; + } + .ms-xl-4 { + margin-left: 1.5rem !important; + } + .ms-xl-5 { + margin-left: 3rem !important; + } + .ms-xl-auto { + margin-left: auto !important; + } + .p-xl-0 { + padding: 0 !important; + } + .p-xl-1 { + padding: 0.25rem !important; + } + .p-xl-2 { + padding: 0.5rem !important; + } + .p-xl-3 { + padding: 1rem !important; + } + .p-xl-4 { + padding: 1.5rem !important; + } + .p-xl-5 { + padding: 3rem !important; + } + .px-xl-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + .px-xl-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + .px-xl-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + .px-xl-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + .px-xl-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + .px-xl-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + .py-xl-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .py-xl-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + .py-xl-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + .py-xl-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + .py-xl-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + .py-xl-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + .pt-xl-0 { + padding-top: 0 !important; + } + .pt-xl-1 { + padding-top: 0.25rem !important; + } + .pt-xl-2 { + padding-top: 0.5rem !important; + } + .pt-xl-3 { + padding-top: 1rem !important; + } + .pt-xl-4 { + padding-top: 1.5rem !important; + } + .pt-xl-5 { + padding-top: 3rem !important; + } + .pe-xl-0 { + padding-right: 0 !important; + } + .pe-xl-1 { + padding-right: 0.25rem !important; + } + .pe-xl-2 { + padding-right: 0.5rem !important; + } + .pe-xl-3 { + padding-right: 1rem !important; + } + .pe-xl-4 { + padding-right: 1.5rem !important; + } + .pe-xl-5 { + padding-right: 3rem !important; + } + .pb-xl-0 { + padding-bottom: 0 !important; + } + .pb-xl-1 { + padding-bottom: 0.25rem !important; + } + .pb-xl-2 { + padding-bottom: 0.5rem !important; + } + .pb-xl-3 { + padding-bottom: 1rem !important; + } + .pb-xl-4 { + padding-bottom: 1.5rem !important; + } + .pb-xl-5 { + padding-bottom: 3rem !important; + } + .ps-xl-0 { + padding-left: 0 !important; + } + .ps-xl-1 { + padding-left: 0.25rem !important; + } + .ps-xl-2 { + padding-left: 0.5rem !important; + } + .ps-xl-3 { + padding-left: 1rem !important; + } + .ps-xl-4 { + padding-left: 1.5rem !important; + } + .ps-xl-5 { + padding-left: 3rem !important; + } +} +@media (min-width: 1400px) { + .d-xxl-inline { + display: inline !important; + } + .d-xxl-inline-block { + display: inline-block !important; + } + .d-xxl-block { + display: block !important; + } + .d-xxl-grid { + display: grid !important; + } + .d-xxl-table { + display: table !important; + } + .d-xxl-table-row { + display: table-row !important; + } + .d-xxl-table-cell { + display: table-cell !important; + } + .d-xxl-flex { + display: flex !important; + } + .d-xxl-inline-flex { + display: inline-flex !important; + } + .d-xxl-none { + display: none !important; + } + .flex-xxl-fill { + flex: 1 1 auto !important; + } + .flex-xxl-row { + flex-direction: row !important; + } + .flex-xxl-column { + flex-direction: column !important; + } + .flex-xxl-row-reverse { + flex-direction: row-reverse !important; + } + .flex-xxl-column-reverse { + flex-direction: column-reverse !important; + } + .flex-xxl-grow-0 { + flex-grow: 0 !important; + } + .flex-xxl-grow-1 { + flex-grow: 1 !important; + } + .flex-xxl-shrink-0 { + flex-shrink: 0 !important; + } + .flex-xxl-shrink-1 { + flex-shrink: 1 !important; + } + .flex-xxl-wrap { + flex-wrap: wrap !important; + } + .flex-xxl-nowrap { + flex-wrap: nowrap !important; + } + .flex-xxl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-content-xxl-start { + justify-content: flex-start !important; + } + .justify-content-xxl-end { + justify-content: flex-end !important; + } + .justify-content-xxl-center { + justify-content: center !important; + } + .justify-content-xxl-between { + justify-content: space-between !important; + } + .justify-content-xxl-around { + justify-content: space-around !important; + } + .justify-content-xxl-evenly { + justify-content: space-evenly !important; + } + .align-items-xxl-start { + align-items: flex-start !important; + } + .align-items-xxl-end { + align-items: flex-end !important; + } + .align-items-xxl-center { + align-items: center !important; + } + .align-items-xxl-baseline { + align-items: baseline !important; + } + .align-items-xxl-stretch { + align-items: stretch !important; + } + .align-content-xxl-start { + align-content: flex-start !important; + } + .align-content-xxl-end { + align-content: flex-end !important; + } + .align-content-xxl-center { + align-content: center !important; + } + .align-content-xxl-between { + align-content: space-between !important; + } + .align-content-xxl-around { + align-content: space-around !important; + } + .align-content-xxl-stretch { + align-content: stretch !important; + } + .align-self-xxl-auto { + align-self: auto !important; + } + .align-self-xxl-start { + align-self: flex-start !important; + } + .align-self-xxl-end { + align-self: flex-end !important; + } + .align-self-xxl-center { + align-self: center !important; + } + .align-self-xxl-baseline { + align-self: baseline !important; + } + .align-self-xxl-stretch { + align-self: stretch !important; + } + .order-xxl-first { + order: -1 !important; + } + .order-xxl-0 { + order: 0 !important; + } + .order-xxl-1 { + order: 1 !important; + } + .order-xxl-2 { + order: 2 !important; + } + .order-xxl-3 { + order: 3 !important; + } + .order-xxl-4 { + order: 4 !important; + } + .order-xxl-5 { + order: 5 !important; + } + .order-xxl-last { + order: 6 !important; + } + .m-xxl-0 { + margin: 0 !important; + } + .m-xxl-1 { + margin: 0.25rem !important; + } + .m-xxl-2 { + margin: 0.5rem !important; + } + .m-xxl-3 { + margin: 1rem !important; + } + .m-xxl-4 { + margin: 1.5rem !important; + } + .m-xxl-5 { + margin: 3rem !important; + } + .m-xxl-auto { + margin: auto !important; + } + .mx-xxl-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + .mx-xxl-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + .mx-xxl-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + .mx-xxl-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + .mx-xxl-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + .mx-xxl-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + .mx-xxl-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-xxl-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .my-xxl-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + .my-xxl-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + .my-xxl-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + .my-xxl-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + .my-xxl-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + .my-xxl-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-xxl-0 { + margin-top: 0 !important; + } + .mt-xxl-1 { + margin-top: 0.25rem !important; + } + .mt-xxl-2 { + margin-top: 0.5rem !important; + } + .mt-xxl-3 { + margin-top: 1rem !important; + } + .mt-xxl-4 { + margin-top: 1.5rem !important; + } + .mt-xxl-5 { + margin-top: 3rem !important; + } + .mt-xxl-auto { + margin-top: auto !important; + } + .me-xxl-0 { + margin-right: 0 !important; + } + .me-xxl-1 { + margin-right: 0.25rem !important; + } + .me-xxl-2 { + margin-right: 0.5rem !important; + } + .me-xxl-3 { + margin-right: 1rem !important; + } + .me-xxl-4 { + margin-right: 1.5rem !important; + } + .me-xxl-5 { + margin-right: 3rem !important; + } + .me-xxl-auto { + margin-right: auto !important; + } + .mb-xxl-0 { + margin-bottom: 0 !important; + } + .mb-xxl-1 { + margin-bottom: 0.25rem !important; + } + .mb-xxl-2 { + margin-bottom: 0.5rem !important; + } + .mb-xxl-3 { + margin-bottom: 1rem !important; + } + .mb-xxl-4 { + margin-bottom: 1.5rem !important; + } + .mb-xxl-5 { + margin-bottom: 3rem !important; + } + .mb-xxl-auto { + margin-bottom: auto !important; + } + .ms-xxl-0 { + margin-left: 0 !important; + } + .ms-xxl-1 { + margin-left: 0.25rem !important; + } + .ms-xxl-2 { + margin-left: 0.5rem !important; + } + .ms-xxl-3 { + margin-left: 1rem !important; + } + .ms-xxl-4 { + margin-left: 1.5rem !important; + } + .ms-xxl-5 { + margin-left: 3rem !important; + } + .ms-xxl-auto { + margin-left: auto !important; + } + .p-xxl-0 { + padding: 0 !important; + } + .p-xxl-1 { + padding: 0.25rem !important; + } + .p-xxl-2 { + padding: 0.5rem !important; + } + .p-xxl-3 { + padding: 1rem !important; + } + .p-xxl-4 { + padding: 1.5rem !important; + } + .p-xxl-5 { + padding: 3rem !important; + } + .px-xxl-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + .px-xxl-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + .px-xxl-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + .px-xxl-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + .px-xxl-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + .px-xxl-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + .py-xxl-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .py-xxl-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + .py-xxl-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + .py-xxl-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + .py-xxl-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + .py-xxl-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + .pt-xxl-0 { + padding-top: 0 !important; + } + .pt-xxl-1 { + padding-top: 0.25rem !important; + } + .pt-xxl-2 { + padding-top: 0.5rem !important; + } + .pt-xxl-3 { + padding-top: 1rem !important; + } + .pt-xxl-4 { + padding-top: 1.5rem !important; + } + .pt-xxl-5 { + padding-top: 3rem !important; + } + .pe-xxl-0 { + padding-right: 0 !important; + } + .pe-xxl-1 { + padding-right: 0.25rem !important; + } + .pe-xxl-2 { + padding-right: 0.5rem !important; + } + .pe-xxl-3 { + padding-right: 1rem !important; + } + .pe-xxl-4 { + padding-right: 1.5rem !important; + } + .pe-xxl-5 { + padding-right: 3rem !important; + } + .pb-xxl-0 { + padding-bottom: 0 !important; + } + .pb-xxl-1 { + padding-bottom: 0.25rem !important; + } + .pb-xxl-2 { + padding-bottom: 0.5rem !important; + } + .pb-xxl-3 { + padding-bottom: 1rem !important; + } + .pb-xxl-4 { + padding-bottom: 1.5rem !important; + } + .pb-xxl-5 { + padding-bottom: 3rem !important; + } + .ps-xxl-0 { + padding-left: 0 !important; + } + .ps-xxl-1 { + padding-left: 0.25rem !important; + } + .ps-xxl-2 { + padding-left: 0.5rem !important; + } + .ps-xxl-3 { + padding-left: 1rem !important; + } + .ps-xxl-4 { + padding-left: 1.5rem !important; + } + .ps-xxl-5 { + padding-left: 3rem !important; + } +} +@media print { + .d-print-inline { + display: inline !important; + } + .d-print-inline-block { + display: inline-block !important; + } + .d-print-block { + display: block !important; + } + .d-print-grid { + display: grid !important; + } + .d-print-table { + display: table !important; + } + .d-print-table-row { + display: table-row !important; + } + .d-print-table-cell { + display: table-cell !important; + } + .d-print-flex { + display: flex !important; + } + .d-print-inline-flex { + display: inline-flex !important; + } + .d-print-none { + display: none !important; + } +} +.tooltip { + position: absolute; + z-index: 1080; + display: block; + margin: 0; + font-family: var(--bs-font-sans-serif); + font-style: normal; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.875rem; + word-wrap: break-word; + opacity: 0; +} +.tooltip.show { + opacity: 0.9; +} +.tooltip .tooltip-arrow { + position: absolute; + display: block; + width: 0.8rem; + height: 0.4rem; +} +.tooltip .tooltip-arrow::before { + position: absolute; + content: ""; + border-color: transparent; + border-style: solid; +} +.bs-tooltip-top, +.bs-tooltip-auto[data-popper-placement^=top] { + padding: 0.4rem 0; +} +.bs-tooltip-top .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow { + bottom: 0; +} +.bs-tooltip-top .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { + top: -1px; + border-width: 0.4rem 0.4rem 0; + border-top-color: #000; +} +.bs-tooltip-end, +.bs-tooltip-auto[data-popper-placement^=right] { + padding: 0 0.4rem; +} +.bs-tooltip-end .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow { + left: 0; + width: 0.4rem; + height: 0.8rem; +} +.bs-tooltip-end .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { + right: -1px; + border-width: 0.4rem 0.4rem 0.4rem 0; + border-right-color: #000; +} +.bs-tooltip-bottom, +.bs-tooltip-auto[data-popper-placement^=bottom] { + padding: 0.4rem 0; +} +.bs-tooltip-bottom .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow { + top: 0; +} +.bs-tooltip-bottom .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { + bottom: -1px; + border-width: 0 0.4rem 0.4rem; + border-bottom-color: #000; +} +.bs-tooltip-start, +.bs-tooltip-auto[data-popper-placement^=left] { + padding: 0 0.4rem; +} +.bs-tooltip-start .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow { + right: 0; + width: 0.4rem; + height: 0.8rem; +} +.bs-tooltip-start .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before { + left: -1px; + border-width: 0.4rem 0 0.4rem 0.4rem; + border-left-color: #000; +} +.tooltip-inner { + max-width: 200px; + padding: 0.25rem 0.5rem; + color: #fff; + text-align: center; + background-color: #000; + border-radius: 0.25rem; + -webkit-user-select: none; + user-select: none; + pointer-events: none; +} +.popover { + position: absolute; + top: 0; + left: 0 /* rtl:ignore */; + z-index: 1070; + display: block; + max-width: 276px; + font-family: var(--bs-font-sans-serif); + font-style: normal; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.875rem; + word-wrap: break-word; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0.3rem; +} +.popover .popover-arrow { + position: absolute; + display: block; + width: 1rem; + height: 0.5rem; +} +.popover .popover-arrow::before, +.popover .popover-arrow::after { + position: absolute; + display: block; + content: ""; + border-color: transparent; + border-style: solid; +} +.bs-popover-top > .popover-arrow, +.bs-popover-auto[data-popper-placement^=top] > .popover-arrow { + bottom: calc(-0.5rem - 1px); +} +.bs-popover-top > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { + bottom: 0; + border-width: 0.5rem 0.5rem 0; + border-top-color: rgba(0, 0, 0, 0.25); +} +.bs-popover-top > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after { + bottom: 1px; + border-width: 0.5rem 0.5rem 0; + border-top-color: #fff; +} +.bs-popover-end > .popover-arrow, +.bs-popover-auto[data-popper-placement^=right] > .popover-arrow { + left: calc(-0.5rem - 1px); + width: 0.5rem; + height: 1rem; +} +.bs-popover-end > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { + left: 0; + border-width: 0.5rem 0.5rem 0.5rem 0; + border-right-color: rgba(0, 0, 0, 0.25); +} +.bs-popover-end > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after { + left: 1px; + border-width: 0.5rem 0.5rem 0.5rem 0; + border-right-color: #fff; +} +.bs-popover-bottom > .popover-arrow, +.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow { + top: calc(-0.5rem - 1px); +} +.bs-popover-bottom > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { + top: 0; + border-width: 0 0.5rem 0.5rem 0.5rem; + border-bottom-color: rgba(0, 0, 0, 0.25); +} +.bs-popover-bottom > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after { + top: 1px; + border-width: 0 0.5rem 0.5rem 0.5rem; + border-bottom-color: #fff; +} +.bs-popover-bottom .popover-header::before, +.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: 1rem; + margin-left: -0.5rem; + content: ""; + border-bottom: 1px solid #f0f0f0; +} +.bs-popover-start > .popover-arrow, +.bs-popover-auto[data-popper-placement^=left] > .popover-arrow { + right: calc(-0.5rem - 1px); + width: 0.5rem; + height: 1rem; +} +.bs-popover-start > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { + right: 0; + border-width: 0.5rem 0 0.5rem 0.5rem; + border-left-color: rgba(0, 0, 0, 0.25); +} +.bs-popover-start > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after { + right: 1px; + border-width: 0.5rem 0 0.5rem 0.5rem; + border-left-color: #fff; +} +.popover-header { + padding: 0.5rem 1rem; + margin-bottom: 0; + font-size: 1rem; + background-color: #f0f0f0; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + border-top-left-radius: calc(0.3rem - 1px); + border-top-right-radius: calc(0.3rem - 1px); +} +.popover-header:empty { + display: none; +} +.popover-body { + padding: 1rem 1rem; + color: #212529; +} +@-webkit-keyframes notyf-fadeinup { + 0% { + opacity: 0; + transform: translateY(25%); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@keyframes notyf-fadeinup { + 0% { + opacity: 0; + transform: translateY(25%); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@-webkit-keyframes notyf-fadeinleft { + 0% { + opacity: 0; + transform: translateX(25%); + } + to { + opacity: 1; + transform: translateX(0); + } +} +@keyframes notyf-fadeinleft { + 0% { + opacity: 0; + transform: translateX(25%); + } + to { + opacity: 1; + transform: translateX(0); + } +} +@-webkit-keyframes notyf-fadeoutright { + 0% { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(25%); + } +} +@keyframes notyf-fadeoutright { + 0% { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(25%); + } +} +@-webkit-keyframes notyf-fadeoutdown { + 0% { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(25%); + } +} +@keyframes notyf-fadeoutdown { + 0% { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(25%); + } +} +@-webkit-keyframes ripple { + 0% { + transform: scale(0) translateY(-45%) translateX(13%); + } + to { + transform: scale(1) translateY(-45%) translateX(13%); + } +} +@keyframes ripple { + 0% { + transform: scale(0) translateY(-45%) translateX(13%); + } + to { + transform: scale(1) translateY(-45%) translateX(13%); + } +} +.notyf { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + color: #fff; + z-index: 9999; + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: flex-end; + pointer-events: none; + box-sizing: border-box; + padding: 20px; +} +.notyf__icon--error, +.notyf__icon--success { + height: 21px; + width: 21px; + background: #fff; + border-radius: 50%; + display: block; + margin: 0 auto; + position: relative; +} +.notyf__icon--error:after, +.notyf__icon--error:before { + content: ""; + background: currentColor; + display: block; + position: absolute; + width: 3px; + border-radius: 3px; + left: 9px; + height: 12px; + top: 5px; +} +.notyf__icon--error:after { + transform: rotate(-45deg); +} +.notyf__icon--error:before { + transform: rotate(45deg); +} +.notyf__icon--success:after, +.notyf__icon--success:before { + content: ""; + background: currentColor; + display: block; + position: absolute; + width: 3px; + border-radius: 3px; +} +.notyf__icon--success:after { + height: 6px; + transform: rotate(-45deg); + top: 9px; + left: 6px; +} +.notyf__icon--success:before { + height: 11px; + transform: rotate(45deg); + top: 5px; + left: 10px; +} +.notyf__toast { + display: block; + overflow: hidden; + pointer-events: auto; + -webkit-animation: notyf-fadeinup 0.3s ease-in forwards; + animation: notyf-fadeinup 0.3s ease-in forwards; + box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.25); + position: relative; + padding: 0 15px; + border-radius: 2px; + max-width: 300px; + transform: translateY(25%); + box-sizing: border-box; + flex-shrink: 0; +} +.notyf__toast--disappear { + transform: translateY(0); + -webkit-animation: notyf-fadeoutdown 0.3s forwards; + animation: notyf-fadeoutdown 0.3s forwards; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; +} +.notyf__toast--disappear .notyf__icon, +.notyf__toast--disappear .notyf__message { + -webkit-animation: notyf-fadeoutdown 0.3s forwards; + animation: notyf-fadeoutdown 0.3s forwards; + opacity: 1; + transform: translateY(0); +} +.notyf__toast--disappear .notyf__dismiss { + -webkit-animation: notyf-fadeoutright 0.3s forwards; + animation: notyf-fadeoutright 0.3s forwards; + opacity: 1; + transform: translateX(0); +} +.notyf__toast--disappear .notyf__message { + -webkit-animation-delay: 0.05s; + animation-delay: 0.05s; +} +.notyf__toast--upper { + margin-bottom: 20px; +} +.notyf__toast--lower { + margin-top: 20px; +} +.notyf__toast--dismissible .notyf__wrapper { + padding-right: 30px; +} +.notyf__ripple { + height: 400px; + width: 400px; + position: absolute; + transform-origin: bottom right; + right: 0; + top: 0; + border-radius: 50%; + transform: scale(0) translateY(-51%) translateX(13%); + z-index: 5; + -webkit-animation: ripple 0.4s ease-out forwards; + animation: ripple 0.4s ease-out forwards; +} +.notyf__wrapper { + display: flex; + align-items: center; + padding-top: 17px; + padding-bottom: 17px; + padding-right: 15px; + border-radius: 3px; + position: relative; + z-index: 10; +} +.notyf__icon { + width: 22px; + text-align: center; + font-size: 1.3em; + opacity: 0; + -webkit-animation: notyf-fadeinup 0.3s forwards; + animation: notyf-fadeinup 0.3s forwards; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + margin-right: 13px; +} +.notyf__dismiss { + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 26px; + margin-right: -15px; + -webkit-animation: notyf-fadeinleft 0.3s forwards; + animation: notyf-fadeinleft 0.3s forwards; + -webkit-animation-delay: 0.35s; + animation-delay: 0.35s; + opacity: 0; +} +.notyf__dismiss-btn { + background-color: rgba(0, 0, 0, 0.25); + border: none; + cursor: pointer; + transition: opacity 0.2s ease, background-color 0.2s ease; + outline: none; + opacity: 0.35; + height: 100%; + width: 100%; +} +.notyf__dismiss-btn:after, +.notyf__dismiss-btn:before { + content: ""; + background: #fff; + height: 12px; + width: 2px; + border-radius: 3px; + position: absolute; + left: calc(50% - 1px); + top: calc(50% - 5px); +} +.notyf__dismiss-btn:after { + transform: rotate(-45deg); +} +.notyf__dismiss-btn:before { + transform: rotate(45deg); +} +.notyf__dismiss-btn:hover { + opacity: 0.7; + background-color: rgba(0, 0, 0, 0.15); +} +.notyf__dismiss-btn:active { + opacity: 0.8; +} +.notyf__message { + vertical-align: middle; + position: relative; + opacity: 0; + -webkit-animation: notyf-fadeinup 0.3s forwards; + animation: notyf-fadeinup 0.3s forwards; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; + line-height: 1.5em; +} +@media only screen and (max-width: 480px) { + .notyf { + padding: 0; + } + .notyf__ripple { + height: 600px; + width: 600px; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + } + .notyf__toast { + max-width: none; + border-radius: 0; + box-shadow: 0 -2px 7px 0 rgba(0, 0, 0, 0.13); + width: 100%; + } + .notyf__dismiss { + width: 56px; + } +} +.md-select { + padding: 6px; + border-radius: 6px; + border: 1px solid rgba(200, 200, 200, 0.1); + border-top: 1px solid rgba(100, 100, 100, 0.5); + font-family: inherit; + font-size: 14px; + background: rgba(100, 100, 100, 0.25); + color: #eee; +} +.md-select option { + font-size: 1em; + font-family: inherit; + padding: 8px 16px; + background: #404040; +} +.md-select optgroup { + background: #2c2c2c; +} +.md-select:focus { + outline: solid 1px var(--selected); +} +.md-btn { + font-family: inherit; + background: rgba(100, 100, 100, 0.25); + padding: 8px 14px; + border-radius: 6px; + font-size: 14px; + border: 1px solid rgba(100, 100, 100, 0.35); + border-top: 1px solid rgba(100, 100, 100, 0.5); + color: #eee; + white-space: nowrap; + transition: transform 0.2s var(--appleEase), box-shadow 0.2s var(--appleEase); +} +.md-btn.md-btn-block { + display: block; + width: 100%; +} +.md-btn.md-btn-glyph { + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} +.md-btn.md-btn-primary { + background: #ff2b52a6; + color: white; + border: 1px solid rgba(220, 53, 69, 0.25); + border-top: 1px solid rgba(220, 53, 69, 0.5); +} +.md-btn.md-btn-small { + padding: 6px 8px; + font-size: 13px; +} +.md-btn:hover { + filter: brightness(125%); +} +.md-btn:active { + filter: brightness(75%); + transform: scale(0.98); + transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); +} +.md-btn.md-btn-icon { + display: inline-flex; + vertical-align: middle; + justify-content: center; +} +.md-btn.md-btn-icon > img { + margin: 0px 16px 0px 0px; + pointer-events: none; +} +.md-btn.md-btn-icon > .md-btn-text { + margin: 0px; +} +.btn-group { + display: inline-flex; + justify-content: center; + align-items: center; +} +.btn-group > .md-btn { + border-radius: 0px; + width: 100%; +} +.btn-group > .md-btn:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.btn-group > .md-btn:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.btn-group > .md-btn:not(:first-child):not(:last-child) { + border-radius: 0px; +} +.md-close-btn { + -webkit-mask-image: url("ameres://icons/webui/close.svg"); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + background-color: white; + opacity: 0.75; + -webkit-mask-size: contain; + height: 18px; + width: 18px; +} +.md-ico-play { + content: url("assets/play.svg"); + width: 10px; + height: 12px; + margin-right: 1px; + align-self: center; +} +.md-ico-shuffle { + content: url("assets/shuffle.svg"); + width: 1em; + height: 1em; + margin-right: 1px; + margin-bottom: -2px; + align-self: center; +} +.md-ico-remove { + content: url("assets/feather/x-circle-white.svg"); + width: 16px; + height: 16px; + margin-right: 1px; + margin-bottom: -1.5px; + align-self: center; +} +.md-ico-add { + content: url("assets/feather/plus-circle-white.svg"); + width: 1em; + height: 1em; + margin-right: 1px; + margin-bottom: -1.5px; + align-self: center; +} +.reload-btn { + background: rgba(86, 86, 86, 0.52); + border-radius: 100%; + width: 32px; + height: 32px; + border: 0px; + appearance: none; + display: flex; + justify-content: center; + align-items: center; +} +.reload-btn:hover { + background: rgba(86, 86, 86, 0.8); + cursor: pointer; +} +.reload-btn > svg { + height: 50%; + color: #eee; +} +.wr-btn { + font-family: inherit; + appearance: none; + border: 0px; + border-radius: 6px; + padding: 8px; + font-weight: 600; + background: rgba(80, 80, 80, 0.7); + color: white; +} +.cd-btn-seeall { + background: transparent; + border: 0px; + color: var(--keyColor); + font-family: inherit; + font-weight: 500; + font-size: 16px; + border-radius: 4px; + padding: 6px; +} +.cd-btn-seeall:hover { + cursor: pointer; + background: rgba(200, 200, 200, 0.1); +} +.mediaitem-artwork { + border-radius: var(--mediaItemRadius); + overflow: hidden; + flex: 0 0 auto; + position: relative; + width: 100%; + height: 100%; + background-image: url("https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg"); + background-size: cover; + background-position: center; +} +.mediaitem-artwork .animatedartwork-view-box { + position: absolute; + top: 0px; + width: 100%; + height: 100%; +} +.mediaitem-artwork .animatedartwork-view-box .animated { + position: absolute; + top: 0px; + width: 100%; + height: 100%; +} +.mediaitem-artwork .animatedartwork-view-box .animated video { + width: 100%; + height: 100%; +} +.mediaitem-artwork.rounded { + border-radius: 100%; +} +.mediaitem-artwork.rounded::after { + border-radius: 100%; +} +.mediaitem-artwork::after { + content: ""; + box-shadow: var(--mediaItemShadow); + z-index: 1; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + border-radius: inherit; +} +.mediaitem-artwork img { + width: 100%; + height: 100%; + object-fit: cover; + image-rendering: -webkit-optimize-contrast; + pointer-events: none; +} +.mediaitem-artwork.no-shadow { + box-shadow: none; +} +.mediaitem-artwork.no-shadow::after { + display: none; +} +.mediaitem-artwork.subtle-shadow { + box-shadow: var(--mediaItemShadow-ShadowSubtle); +} +.mediaitem-artwork.shadow { + box-shadow: var(--mediaItemShadow-Shadow); +} +/* queue item */ +.cd-queue-item { + border-bottom: 1px solid rgba(200, 200, 200, 0.1); + padding: 8px; +} +.cd-queue-item .row, +.cd-queue-item .col { + padding: 0px; + margin: 0px; +} +.cd-queue-item .artwork { + width: 32px; + height: 32px; + flex: 0 0 auto; +} +.cd-queue-item.selected { + background: var(--selected); +} +.cd-queue-item:active { + background: var(--selected-click); + color: #eee; +} +.cd-queue-item .queue-info { + display: flex; + flex-direction: column; +} +.cd-queue-item .queue-info .queue-title { + font-size: 14px; +} +.cd-queue-item .queue-info .queue-subtitle { + font-size: 13px; + opacity: 0.85; +} +/* horizontal media scroller */ +.cd-hmedia-scroller::-webkit-scrollbar-thumb { + box-shadow: none; +} +.cd-hmedia-scroller:hover::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); +} +.cd-hmedia-scroller.hmedia-scroller-card .mediaitem-card { + margin: 16px; +} +/* mediaitem-list-item */ +.cd-mediaitem-list-item { + width: 100%; + height: 60px; + display: flex; + flex: 0 0 auto; + flex-direction: row; + font-size: 14px; + justify-content: center-between; + align-items: center; + border-radius: var(--mediaItemRadius); + /* CSS.gg + */ +} +.cd-mediaitem-list-item .artwork { + height: 42px; + width: 42px; + border-radius: var(--mediaItemRadius); + object-fit: cover; + object-position: center; + flex: 0 0 auto; + background-repeat: no-repeat; + margin: 12px; + border: 0px; + outline: none; + position: relative; + overflow: hidden; +} +.cd-mediaitem-list-item .artwork .overlay-play { + background: rgba(0, 0, 0, 0.5); + opacity: 0; + appearance: none; + border: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0px; + z-index: 5; + cursor: pointer; +} +.cd-mediaitem-list-item .artwork .overlay-play:hover { + opacity: 1; +} +.cd-mediaitem-list-item .artwork .overlay-play:active { + background: var(--selected-click); +} +.cd-mediaitem-list-item .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-list-item .info-rect { + height: 100%; + display: flex; + flex-flow: column; + justify-content: center; + flex-grow: 1; +} +.cd-mediaitem-list-item .title { + width: 100%; +} +.cd-mediaitem-list-item .subtitle { + width: 90%; + font-size: 0.8em; + opacity: 0.7; +} +.cd-mediaitem-list-item .duration { + min-width: 60px; + text-align: center; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.cd-mediaitem-list-item .metainfo { + min-width: 145px; + text-align: center; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.cd-mediaitem-list-item .explicit-icon { + background-image: url("assets/explicit.svg"); + height: 12px; + width: 36px; + filter: contrast(0); + background-repeat: no-repeat; +} +@keyframes load-bar { + 10% { + box-shadow: inset 0 -4px 0; + } + 20% { + box-shadow: inset 0 -10px 0; + } + 30% { + box-shadow: inset 0 -12px 0; + } + 40% { + box-shadow: inset 0 -8px 0; + } + 50% { + box-shadow: inset 0 -4px 0; + } + 60% { + box-shadow: inset 0 -6px 0; + } + 80% { + box-shadow: inset 0 -12px 0; + } + 90% { + box-shadow: inset 0 -6px 0; + } + to { + box-shadow: inset 0 -2px 0; + } +} +.cd-mediaitem-list-item .loadbar-sound, +.cd-mediaitem-list-item .loadbar-sound::after, +.cd-mediaitem-list-item .loadbar-sound::before { + animation: load-bar 1.3s ease infinite alternate; + box-sizing: border-box; + width: 3px; + height: 28px; + box-shadow: inset 0 -12px 0; +} +.cd-mediaitem-list-item .loadbar-sound { + margin-left: 22px; + margin-top: -16px; + position: relative; + transform: scale(var(--load-bar, 1)); + color: var(--keyColor); + display: block; +} +.cd-mediaitem-list-item .loadbar-sound::after, +.cd-mediaitem-list-item .loadbar-sound::before { + content: ""; + position: absolute; + bottom: 0; +} +.cd-mediaitem-list-item .loadbar-sound::before { + left: -4.5px; + animation-delay: -2.4s; +} +.cd-mediaitem-list-item .loadbar-sound::after { + right: -4.2px; + animation-delay: -3.7s; +} +.cd-mediaitem-list-item .isLibrary { + flex: 0 0 auto; + width: 40px; + text-align: center; +} +.cd-mediaitem-list-item .isLibrary button { + appearance: none; + border: 0px; + background: transparent; + cursor: pointer; + filter: contrast(0.8); +} +.cd-mediaitem-list-item:hover { + background: rgba(200, 200, 200, 0.1); + box-shadow: var(--mediaItemShadow); +} +.cd-mediaitem-list-item:hover .overlay-play { + opacity: 1; +} +.cd-mediaitem-list-item.mediaitem-selected { + background: var(--selected); + box-shadow: var(--mediaItemShadow); +} +.cd-mediaitem-list-item:active { + background: var(--selected-click); + box-shadow: var(--mediaItemShadow); + color: #eee; +} +.cd-mediaitem-list-item.compact { + height: 40px; + font-size: 13px; +} +.cd-mediaitem-list-item.compact .artwork { + display: none; +} +.cd-mediaitem-list-item.compact .info-rect { + padding-left: 1em; +} +/* mediaitem-hrect */ +.cd-mediaitem-hrect { + background: rgba(255, 255, 255, 0.18); + width: 264px; + height: 100px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: row; + font-size: 14px; + justify-content: center; + align-items: center; + border-radius: 6px; + cursor: pointer; +} +.cd-mediaitem-hrect .artwork { + height: 70px; + width: 70px; + background: blue; + border-radius: var(--mediaItemRadius); + background: var(--artwork); + background-size: contain; + flex: 0 0 auto; + background-repeat: no-repeat; + margin: 18px; +} +.cd-mediaitem-hrect .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-hrect .info-rect { + width: 100%; +} +.cd-mediaitem-hrect .title { + width: 100%; + text-align: center; +} +.cd-mediaitem-hrect .subtitle { + width: 100%; + text-align: center; + font-size: 12px; +} +/* mediaitem-square-sp */ +.cd-mediaitem-square-sp { + --spcolor: var(""); + width: 190px; + height: 245px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: 14px; + justify-content: flex-start; + align-items: center; + border-radius: 6px; + margin-left: 10px; + cursor: pointer; + background-color: var(--spcolor); +} +.cd-mediaitem-square-sp .artwork { + height: 190px; + width: 190px; + background: blue; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: 6px; + margin-top: 0px; +} +.cd-mediaitem-square-sp .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-square-sp .artwork:hover { + box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1000000px inset; +} +.cd-mediaitem-square-sp .title { + width: 90%; + text-align: center; +} +.cd-mediaitem-square-sp .subtitle { + width: 100%; + text-align: center; + font-size: 12px; +} +.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay { + z-index: 3; +} +.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay:hover { + opacity: 1; +} +.cd-mediaitem-square-sp + .cd-mediaitem-square-large-overlay { + pointer-events: none; +} +.cd-mediaitem-square-sp:hover + .cd-mediaitem-square-large-overlay { + opacity: 1; +} +.cd-mediaitem-square-sp:hover { + box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1000000px inset; +} +/* mediaitem-square-large */ +.cd-mediaitem-square-large { + width: 190px; + height: 250px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: 14px; + justify-content: flex-start; + align-items: center; + border-radius: 6px; + margin-left: 10px; + cursor: pointer; +} +.cd-mediaitem-square-large > * { + z-index: inherit; +} +.cd-mediaitem-square-large .artwork { + height: 190px; + width: 190px; + background: blue; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: 6px; + margin-top: 0px; +} +.cd-mediaitem-square-large-overlay { + position: absolute; + width: 190px; + float: right; + height: 250px; + top: 0px; + margin: 10px; + margin-top: 0px; + opacity: 0; +} +.cd-mediaitem-square-large-overlay > * { + pointer-events: auto; +} +.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay { + z-index: 3; +} +.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover { + opacity: 1; +} +.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay { + pointer-events: none; +} +.cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay { + opacity: 1; +} +.cd-mediaitem-square-large .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-square-large .title { + width: 90%; + text-align: center; +} +.cd-mediaitem-square-large .subtitle { + width: 100%; + text-align: center; + font-size: 12px; +} +/* mediaitem-mvview */ +/* mediaitem-mvview */ +.cd-mediaitem-mvview { + width: 300px; + height: 250px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: 14px; + justify-content: flex-start; + align-items: center; + border-radius: 6px; + margin-left: 10px; + cursor: pointer; +} +.cd-mediaitem-mvview > * { + z-index: inherit; +} +.cd-mediaitem-mvview .artwork { + height: 172px; + width: 300px; + background: blue; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: 6px; + margin-top: 0px; +} +.cd-mediaitem-mvview-overlay { + position: absolute; + width: 300px; + float: right; + height: 250px; + top: 0px; + margin: 10px; + margin-top: 0px; + opacity: 0; +} +.cd-mediaitem-mvview-overlay > * { + pointer-events: auto; +} +.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay { + z-index: 3; +} +.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay:hover { + opacity: 1; +} +.cd-mediaitem-mvview + .cd-mediaitem-mvview-overlay { + pointer-events: none; +} +.cd-mediaitem-mvview:hover + .cd-mediaitem-mvview-overlay { + opacity: 1; +} +.cd-mediaitem-mvview .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-mvview .title { + width: 90%; + text-align: center; +} +.cd-mediaitem-mvview .subtitle { + width: 100%; + text-align: center; + font-size: 12px; +} +/* mediaitem-square */ +.cd-mediaitem-square { + width: 220px; + height: 238px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: 14px; + justify-content: center; + align-items: center; + border-radius: 6px; +} +.cd-mediaitem-square .artwork-container { + position: relative; +} +.cd-mediaitem-square .artwork-container .artwork { + height: 190px; + width: 190px; + background: blue; + border-radius: var(--mediaItemRadius); + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: 6px; + cursor: pointer; +} +.cd-mediaitem-square .artwork-container .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-square .artwork-container .badge-container { + transition: opacity 0.1s var(--appleEase); + opacity: 1; +} +.cd-mediaitem-square .artwork-container .badge-container .socialBadge { + width: 32px; + height: 32px; + position: absolute; + right: 14px; + bottom: 14px; + border-radius: 100%; + overflow: hidden; + z-index: 2; + pointer-events: none; +} +.cd-mediaitem-square .artwork-container > .play-btn, +.cd-mediaitem-square .artwork-container > .menu-btn { + opacity: 0; + appearance: none; + padding: 0px; + border: 0px; + width: 30px; + height: 30px; + border-radius: 50%; + background: rgba(50, 50, 50, 0.7); + cursor: pointer; + transition: opacity 0.1s var(--appleEase); +} +.cd-mediaitem-square .artwork-container > .play-btn :hover, +.cd-mediaitem-square .artwork-container > .menu-btn :hover { + border-radius: 50%; + background: rgba(250, 0, 0, 0.7); +} +.cd-mediaitem-square .artwork-container > .play-btn { + position: absolute; + bottom: 14px; + left: 14px; + z-index: 2; +} +.cd-mediaitem-square .artwork-container > .menu-btn { + position: absolute; + bottom: 14px; + right: 14px; + z-index: 2; +} +.cd-mediaitem-square .artwork-container:hover > .badge-container { + opacity: 0; +} +.cd-mediaitem-square .artwork-container:hover > .play-btn, +.cd-mediaitem-square .artwork-container:hover > .menu-btn { + opacity: 1; +} +.cd-mediaitem-square .info-rect { + width: 90%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.cd-mediaitem-square .title { + width: 100%; + text-align: center; + display: flex; + align-content: center; + justify-content: center; +} +.cd-mediaitem-square .subtitle { + width: 100%; + text-align: center; + font-size: 12px; +} +.cd-mediaitem-square .unavailable-overlay { + position: absolute; + top: 0px; + left: 0px; + bottom: 0; + right: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 2; + pointer-events: none; + background: rgba(0, 0, 0, 0.4); + margin: 2em; + border-radius: 10px; +} +.cd-mediaitem-square .unavailable-overlay > .codicon { + font-size: 4em; + font-weight: bold; + opacity: 0.5; +} +.cd-mediaitem-square.mediaitem-video { + height: 200px; + width: 240px; +} +.cd-mediaitem-square.mediaitem-video .artwork { + height: 120px; + width: 212px; +} +.cd-mediaitem-square.mediaitem-brick { + height: 200px; + width: 240px; +} +.cd-mediaitem-square.mediaitem-brick .artwork { + height: 123px; + width: 220px; +} +.cd-mediaitem-square.mediaitem-small { + width: 140px; + height: 180px; +} +.cd-mediaitem-square.mediaitem-small .artwork { + height: 128px; + width: 128px; +} +.cd-mediaitem-square.mediaitem-card { + background: #ccc; + background: var(--spcolor); + height: 298px; + width: 230px; + max-width: 250px; + max-height: 500px; + overflow: hidden; + position: relative; + border-radius: calc(var(--mediaItemRadius) * 2); + box-shadow: var(--mediaItemShadow-ShadowSubtle); +} +.cd-mediaitem-square.mediaitem-card .artwork { + width: 230px; + height: 230px; + overflow: hidden; + border-radius: 0px; + margin: 0; +} +.cd-mediaitem-square.mediaitem-card .artwork .mediaitem-artwork { + border-radius: 0px; +} +.cd-mediaitem-square.mediaitem-card .artwork .mediaitem-artwork::after { + box-shadow: unset; +} +.cd-mediaitem-square.mediaitem-card .info-rect-card { + padding: 10px 10px 14px; + position: relative; + width: 100%; +} +.cd-mediaitem-square.mediaitem-card .info-rect-card::before { + background: var(--bgartwork); + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; + background-size: cover; + background-position: bottom; + z-index: 0; + opacity: 1; + filter: brightness(0.5) blur(50px) saturate(180%); +} +.cd-mediaitem-square.mediaitem-card .title { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 0.9em; + font-weight: 500; + z-index: 1; +} +.cd-mediaitem-square.mediaitem-card .subtitle { + height: 100%; + justify-content: center; + align-items: center; + font-size: 0.75em; + width: 100%; + display: flex; + z-index: 1; +} +.cd-mediaitem-square.mediaitem-card::after { + box-shadow: var(--mediaItemShadow); + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + pointer-events: none; + border-radius: inherit; +} +/* mediaitem-square */ +.albums-square-containeru > * > .cd-mediaitem-square { + --frame: max(220px, 15vw); + width: var(--frame); + height: calc(var(--frame) * 13 / 11); + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: calc(var(--frame) / 220 * 14); + justify-content: center; + align-items: center; + border-radius: calc(var(--frame) / 220 * 6); +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container { + position: relative; +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container .artwork { + height: calc(var(--frame) * 19 / 22); + width: calc(var(--frame) * 19 / 22); + background: blue; + border-radius: var(--mediaItemRadius); + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: calc(var(--frame) / 220 * 6); + cursor: pointer; +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .play-btn, +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .menu-btn { + opacity: 0; + appearance: none; + padding: 0px; + border: 0px; + width: calc(var(--frame) / 220 * 30); + height: calc(var(--frame) / 220 * 30); + border-radius: 50%; + background: rgba(50, 50, 50, 0.7); + cursor: pointer; + backdrop-filter: blur(32px) saturate(180%); + transition: opacity 0.1s var(--appleEase); +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .play-btn { + position: absolute; + bottom: calc(var(--frame) / 220 * 14); + left: calc(var(--frame) / 220 * 14); + z-index: 2; +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .menu-btn { + position: absolute; + bottom: calc(var(--frame) / 220 * 14); + right: calc(var(--frame) / 220 * 14); + z-index: 2; +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container:hover > .play-btn, +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container:hover > .menu-btn { + opacity: 1; +} +.albums-square-containeru > * > .cd-mediaitem-square .title { + width: 90%; + text-align: center; +} +.albums-square-containeru > * > .cd-mediaitem-square .subtitle { + width: 100%; + text-align: center; + font-size: calc(var(--frame) / 220 * 12); +} +.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-video { + height: calc(var(--frame) / 220 * 200); + width: calc(var(--frame) / 220 * 240); +} +.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-video .artwork { + height: calc(var(--frame) / 220 * 120); + width: calc(var(--frame) / 220 * 212); +} +.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-brick { + height: calc(var(--frame) / 220 * 200); + width: calc(var(--frame) / 220 * 240); +} +.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-brick .artwork { + height: calc(var(--frame) / 220 * 123); + width: calc(var(--frame)); +} +.listitem-horizontal .cd-mediaitem-list-item { + width: 350px; + height: 60px; +} +.mediaitem-list-item__grid { + background: rgba(200, 200, 200, 0.05); + border-radius: 10px; + padding: var(--contentInnerPadding); + box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; + width: 100%; +} +.mediaitem-list-item__grid .cd-mediaitem-list-item { + width: 350px; + height: 60px; +} +.mediaitem-list-item__grid::-webkit-scrollbar { + display: none; +} +.mediaitem-list-item__grid:hover::-webkit-scrollbar { + display: initial; +} +.svg-icon { + --color: #aaa; + --url: url("assets/feather/share.svg"); + -webkit-mask-image: var(--url); + -webkit-mask-size: cover; + height: 18px; + width: 18px; + background: var(--color); +} +.svg-icon.inline { + display: inline-block; +} +.sidebar-icon { + width: 18px; + height: 18px; + margin-right: 8px; +} +.sidebar-icon > .svg-icon { + width: 100%; + height: 100%; + --color: #aaa; +} +.sidebar-icon > svg { + width: 100%; + height: 100%; + color: #aaa; +} +/* Switch Checkbox */ +input[type=checkbox][switch] { + width: 38px; + appearance: none; + border-radius: 32px; + height: 24px; + zoom: 1; + top: 0; + cursor: pointer; + left: 0; + position: relative; + transform: scale(1); + background: #8e8e93; + padding: 0; + margin: 0; +} +input[type=checkbox][switch]:focus, +input[type=checkbox][switch]:active { + outline: none; +} +input[type=checkbox][switch]:checked { + background: var(--keyColor); + border: 0 solid var(--keyColor); + mix-blend-mode: unset; +} +input[type=checkbox][switch]:checked:hover { + background: var(--keyColor-rollover); +} +input[type=checkbox][switch]:checked:active { + background: var(--keyColor-pressed); +} +input[type=checkbox][switch]::before { + background: white; + width: 26px; + height: 26px; + top: -1px; + left: -1px; + position: absolute; + content: ' '; + border-radius: 32px; + transition: 0.1s left var(--appleEase); + transform: scale(0.75); +} +input[type=checkbox][switch]:checked::before { + background: white; + top: -1px; + left: 13px; + transition: 0.1s left var(--appleEase); + transform: scale(0.75); +} +input[type=checkbox][switch]:disabled::before { + opacity: 0.5; +} +input[type=checkbox][switch]:active::before { + left: 13px; +} +input[type=checkbox][switch]:checked:active::before { + left: -1px; +} +/* End Switch Checkbox */ +.header-text { + margin: 0px; +} +.media-item--small { + background: rgba(0, 0, 0, 0.25); + height: 162px; + width: 132px; + display: inline-flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 10px; +} +.media-item--small .artwork { + background: red; + margin: 6px; + border-radius: 100%; + width: 90px; + height: 90px; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.3); +} +.playlist-artwork { + height: 190px; + width: 190px; + background: blue; + border-radius: 6px; + background: var(--artwork); + background-size: cover; + box-shadow: var(--mediaItemShadow); + flex: 0 0 auto; + margin: 6px; + margin-top: 0px; +} +.media-item--small .text { + font-weight: 600; + font-size: 0.9em; +} +.media-item--small .subtext { + font-size: 0.75em; +} +.player-duration-time { + opacity: 0.5; +} +.player-artwork-container { + display: flex; + align-items: center; + justify-content: center; +} +.player-duration-container { + font-size: 0.85em; + font-weight: 500; +} +.media-artwork { + --artwork: url(""); + width: 80vw; + height: 80vw; + max-height: 500px; + max-width: 500px; + background: black; + background-image: var(--artwork); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border-radius: 8px; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16), 0 8px 40px rgba(0, 0, 0, 0.55); + transition: transform 0.1s var(--appleEase); +} +.media-artwork.paused { + transition: transform 0.35s var(--appleEase); + transform: scale(0.85); +} +.playback-slider { + width: 90%; +} +.volume-slider { + width: 100%; +} +.volume-slider-container { + width: 90%; + margin: 0 auto; + padding: 0px; +} +.volume-slider-container .col-auto, +.volume-slider-container .col { + display: flex; + align-items: center; + justify-self: center; + padding: 0px; + margin: 0px; +} +.playback-button { + font-size: 2em; + width: 40px; + height: 36px; + padding: 0px; + background: transparent; + border: 0px; + border-radius: 0px; + box-shadow: unset; + background-size: 12px; + background-position: center; + background-repeat: no-repeat; + opacity: 0.7; + border-radius: 6px; +} +.playback-button:active { + transform: scale(0.95); +} +.playback-button--small { + border-radius: 6px; + font-size: 1em; + color: inherit; + background-size: 14px; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + width: 40px; + height: 32px; + border: 0px; + box-shadow: unset; + opacity: 0.7; +} +.playback-button:hover, +.playback-button--small:hover { + background-color: rgba(200, 200, 200, 0.1); +} +.playback-button:active, +.playback-button--small:active { + transform: scale(0.9); +} +.playback-button--small.active { + background-color: rgba(200, 200, 200, 0.25); +} +.playback-button--small.search { + background-image: url("assets/search.svg"); +} +.playback-button--small.cast { + background-image: url("assets/cast_white.svg"); +} +.playback-button--small.miniplayer { + background-image: url("assets/pip.svg"); +} +.playback-button--small.queue { + background-image: url("assets/list.svg"); +} +.playback-button--small.lyrics { + background-image: url("assets/quote-right.svg"); +} +.playback-button--small.shuffle { + background-image: url("assets/shuffle.svg"); +} +.playback-button--small.repeat { + background-image: url("assets/repeat.svg"); +} +.playback-button--small.repeat.repeatOne { + background-color: rgba(200, 200, 200, 0.25); + background-image: url("assets/repeatOne.svg"); +} +.playback-button.pause { + background-image: url('assets/pause.svg'); +} +.playback-button.play { + background-image: url('assets/play.svg'); +} +.playback-button.next { + background-image: url('assets/forward.svg'); +} +.playback-button.previous { + background-image: url('assets/backward.svg'); +} +.playback-buttons { + display: flex; + align-items: center; + justify-content: center; +} +.player-volume-glyph { + width: 32px; + height: 16px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; +} +.player-volume-glyph.decrease { + background-image: url("assets/volume.svg"); + opacity: 0.5; +} +.player-volume-glyph.increase { + background-image: url("assets/volume-2.svg"); + opacity: 0.5; +} +.player-track-info { + width: 90%; + margin: 0 auto; +} +.player-song-title { + font-size: 1.25em; + text-align: left; + margin: 0 auto; + font-weight: 500; +} +.player-song-artist { + font-size: 1em; + text-align: left; + margin: 0 auto; + color: var(--keyColor); + font-weight: 400; +} +.player-song-artist:hover { + cursor: pointer; + text-decoration: underline; +} +.player-more-container { + display: flex; + align-items: center; + justify-content: center; +} +.player-more-button { + appearance: none; + width: 32px; + height: 32px; + border-radius: 50%; + border: 0px; + background: var(--keyColor); + cursor: pointer; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16); + color: white; + font-weight: bold; + padding: 0px; + font-size: 16px; +} +.back-button { + width: 40px; + height: 40px; + background-color: transparent; + background-size: 16px; + background-position: center; + background-repeat: no-repeat; + background-image: url("assets/arrow-left.svg"); + border: 0px; + border-radius: 0px; +} +.header-text { + height: 40px; + display: flex; + align-items: center; +} +.list-entry-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px; + font-size: 1em; + font-family: inherit; +} +.list-entry { + display: flex; + align-items: center; + /* justify-content: space-between; */ + padding: 12px; + font-size: 1em; + font-family: inherit; + border-bottom: 1px solid rgba(255 255 255 / 0.1); + cursor: pointer; +} +.list-entry-image { + --artwork: url(""); + width: 64px; + height: 64px; + background: var(--artwork); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border-radius: 8px; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16), 0 8px 40px rgba(0, 0, 0, 0.55); +} +.list-entry-image.artist { + border-radius: 50%; +} +.list-entry-body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin-left: 12px; +} +.list-entry-name { + font-size: 14px; + font-weight: 500; + overflow: hidden; + width: 100%; +} +.list-entry-artist { + font-size: 12px; + overflow: hidden; + width: 100%; +} +.list-entry .handle { + height: 100%; + width: 28px; + background: var(--keyColor); + display: flex; + justify-content: center; + align-items: center; +} +.artist-chip { + display: inline-flex; + align-items: center; + justify-content: center; + margin: 4px 0px; + border-radius: 4px; + color: white; + font-size: 1em; + font-weight: 500; + cursor: pointer; + padding: 8px; +} +.artist-chip:hover { + background: var(--selected); +} +.artist-chip .artist-chip__follow { + appearance: none; + border: 0; + height: 32px; + width: 32px; + background: #ffffff0f; + margin: 0px 0px 0px 10px; + font-weight: bold; + color: white; + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 12px; + cursor: pointer; + flex: 0 0 32px; +} +.artist-chip .artist-chip__follow:hover { + background: var(--selected); +} +.artist-chip .artist-chip__image { + width: 32px; + height: 32px; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + border-radius: 100%; + overflow: hidden; + margin: 0px 12px 0px 0px; + pointer-events: none; + flex: 0 0 32px; +} +.artist-chip .artist-chip__image .mediaitem-artwork { + border-radius: inherit; +} +.artist-chip .artist-chip__name { + pointer-events: none; +} +.search-panel { + background: rgba(0, 0, 0, 0.5); +} +.search-header { + position: absolute; + width: 100%; + z-index: 1; + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-bottom: 1px solid rgba(200, 200, 200, 0.08); +} +.connection-error-panel { + background: rgba(0, 0, 0, 0.5); +} +.search-type-container { + display: flex; +} +.search-type-button { + background: rgba(20, 20, 20, 0.85); + border-radius: 50px; + color: white; + border: 0px; + box-shadow: unset; + font-family: inherit; + padding: 8px 16px; + font-size: 14px; + font-weight: 500; + margin: 8px; + margin-top: 0px; + margin-bottom: 0px; +} +.search-type-button.active { + background: var(--keyColor); +} +.search-tab-container { + overflow: auto; + white-space: nowrap; + overflow-y: hidden; +} +.search-body-container { + position: relative; + width: 100%; + height: 100%; +} +.search-body { + position: absolute; + width: 100%; + height: 100%; + padding-top: 220px; +} +.search-tab { + background: rgba(20, 20, 20, 0.85); + border-radius: 50px; + color: white; + border: 0px; + box-shadow: unset; + font-family: inherit; + padding: 8px 16px; + font-size: 14px; + font-weight: 500; +} +.search-tab.active { + background: var(--keyColor); +} +.notyf__toast { + -webkit-app-region: no-drag; + cursor: pointer; +} +.notyf-info { + background: var(--keyColor); +} +.modal-fullscreen { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); + z-index: 1000; +} +.modal-fullscreen .modal-window { + background: #333; + border-radius: 10px; + box-shadow: var(--mediaItemShadow-Shadow); + display: flex; + flex-flow: column; + max-height: 500px; + max-width: 360px; + background: #121212; + width: 100%; + position: relative; +} +.modal-fullscreen .modal-window:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + box-shadow: var(--mediaItemShadow); + z-index: 1; + border-radius: inherit; +} +.modal-fullscreen .modal-window .modal-header { + width: 100%; + padding: 6px; +} +.modal-fullscreen .modal-window .modal-content { + width: 100%; + height: 100%; + overflow: hidden; + overflow-y: overlay; +} +.spatialproperties-panel .modal-window { + height: 700px; + max-height: 700px; + width: 800px; + max-width: 800px; + overflow: hidden; +} +.spatialproperties-panel .modal-window .info-header { + padding-left: 12px; +} +.spatialproperties-panel .modal-window .visual-container { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} +.spatialproperties-panel .modal-window .visual { + position: relative; + height: 250px; + width: 300px; + display: inline-flex; + align-items: flex-end; + justify-content: center; + filter: drop-shadow(2px 12px 6px rgba(0, 0, 0, 0.25)); + margin: 0 auto; +} +.spatialproperties-panel .modal-window .visual .face { + position: absolute; + width: calc(12px * 6); + height: calc(12px * 6); + border-radius: 6px; + transform: rotateX(60deg) rotateZ(-45deg); + transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; +} +.spatialproperties-panel .modal-window .visual .listener { + position: absolute; + width: 32px; + height: 32px; + border-radius: 6px; + transform: rotateX(60deg) rotateZ(-45deg); + transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; + background: white; + color: black; + z-index: 2; +} +.spatialproperties-panel .modal-window .visual .audiosource { + position: absolute; + width: 32px; + height: 32px; + border-radius: 6px; + transform: rotateX(60deg) rotateZ(-45deg); + transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; + background: yellow; + z-index: 2; +} +.spatialproperties-panel .modal-window .visual .face:nth-of-type(1) { + background: linear-gradient(45deg, #28223a, #1f2038); + z-index: 1; +} +.spatialproperties-panel .modal-window .visual .face:nth-of-type(2) { + background: linear-gradient(45deg, #7d53ad, #5763ff); + transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px); + opacity: 0.7; + z-index: 3; +} +.spatialproperties-panel .modal-window .modal-header { + padding: 16px; + position: relative; + overflow: hidden; +} +.spatialproperties-panel .modal-window .modal-header .modal-title { + text-align: center; +} +.spatialproperties-panel .modal-window .modal-header .close-btn { + width: 50px; + height: 100%; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; +} +.spatialproperties-panel .modal-window .modal-header .close-btn:hover { + background-color: #c42b1c; +} +.addtoplaylist-panel .modal-window { + max-height: 600px; + max-width: 400px; + background: rgba(18, 18, 18, 0.9); + overflow: hidden; + backdrop-filter: blur(16px) saturate(180%); +} +.addtoplaylist-panel .modal-window .modal-header { + padding: 16px; + position: relative; +} +.addtoplaylist-panel .modal-window .modal-header .modal-title { + text-align: center; +} +.addtoplaylist-panel .modal-window .modal-header .close-btn { + width: 50px; + height: 100%; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; +} +.addtoplaylist-panel .modal-window .modal-header .close-btn:hover { + background-color: #c42b1c; +} +.addtoplaylist-panel .modal-window .modal-search { + width: 100%; + padding: 0px 16px; + position: relative; +} +.addtoplaylist-panel .modal-window .playlist-item { + appearance: none; + border: 0px; + text-align: left; + width: 100%; + margin: 0; + display: flex; + background: rgba(32, 32, 32, 0.46); + color: #eee; + font-family: inherit; + font-size: 0.98em; + padding: 6px 12px; + align-items: center; + flex-flow: row; +} +.addtoplaylist-panel .modal-window .playlist-item .icon { + pointer-events: none; + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 6px; +} +.addtoplaylist-panel .modal-window .playlist-item .name { + position: relative; +} +.addtoplaylist-panel .modal-window .playlist-item:hover { + background: var(--selected); +} +.addtoplaylist-panel .modal-window .playlist-item:active { + background: var(--selected-click); +} +.addtoplaylist-panel .modal-window .playlist-item.focused { + background: var(--keyColor); +} +.addtoplaylist-panel .modal-window .playlist-item:last-child { + border-bottom: 0px; +} +.menu-panel { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 100001; + display: flex; + justify-content: center; + align-items: center; + -webkit-app-region: no-drag; +} +.menu-panel .menu-header-body { + padding: 6px; + display: flex; + background: rgba(200, 200, 200, 0.1); +} +.menu-panel .menu-header-body .menu-option-header { + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: var(--mediaItemRadius); + appearance: none; + border: 0; + background: transparent; +} +.menu-panel .menu-header-body .menu-option-header.active .sidebar-icon > .svg-icon { + --color: var(--keyColor); +} +.menu-panel .menu-header-body .menu-option-header:hover { + background: var(--selected); +} +.menu-panel .menu-header-body .menu-option-header:active { + background: var(--selected-click); +} +.menu-panel .menu-panel-body { + display: flex; + flex-flow: column; + background: #262626; + position: relative; + min-width: 200px; + box-shadow: var(--ciderShadow-Generic); + border-radius: var(--mediaItemRadius); + overflow: hidden; + font-size: 13px; +} +.menu-panel .menu-panel-body .menu-option { + text-align: left; + display: flex; + width: 100%; + padding: 9px 16px; + appearance: none; + border: 0px; + font: inherit; + background: transparent; + color: inherit; +} +.menu-panel .menu-panel-body .menu-option:hover { + background: var(--selected); +} +.menu-panel .menu-panel-body .menu-option:active { + background: var(--selected-click); +} +.menu-panel .menu-header-text { + margin: 18px 6px; +} +.menu-panel .menu-header-text .close-btn { + width: 50px; + height: 42px; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; +} +.menu-panel .menu-header-text .close-btn:hover { + background-color: #c42b1c; +} +.menu-panel .menu-body { + overflow: overlay; + height: 100%; +} +.menu-panel .menu-footer { + width: 100%; + padding: 12px; +} +.queue-panel { + height: 100%; + width: 100%; + display: flex; + flex-flow: column; +} +.queue-panel .queue-header-text { + margin: 18px 6px; +} +.queue-panel .queue-body { + overflow: overlay; + height: 100%; +} +.queue-panel .queue-footer { + width: 100%; + padding: 12px; +} +.queue-panel .autoplay { + background: rgba(200, 200, 200, 0.15); + display: flex; + justify-content: center; + appearance: none; + border: 0; + border-radius: 6px; + height: 32px; + width: 32px; +} +.queue-panel .infinity { + content: url("assets/infinity.svg"); + margin: auto; +} +.content-inner { + position: absolute; + top: var(--navigationBarHeight); + left: 0; + padding: 32px; + width: 100%; + transition: zoom 1s; + zoom: 1; +} +.content-inner.centered { + height: 100%; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; +} +.github-themes-page { + display: flex; + flex-direction: column; + padding: 0px; + height: calc(100% - var(--navigationBarHeight)); +} +.github-themes-page .github-avatar { + height: 42px; + width: 42px; + margin: 6px; + border-radius: 32px; +} +.github-themes-page .repo-name { + margin: 0px; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + white-space: break-spaces; +} +.github-themes-page .repo-url { + color: var(--textColor); + font-size: 0.8em; +} +.github-themes-page .repo-preview-name { + margin: 0px; +} +.github-themes-page .repos-list { + height: 100%; + overflow-y: overlay; + width: 320px; + font-size: 14px; +} +.github-themes-page .repos-list > .list-group { + margin: 0px; +} +.github-themes-page .repos-list .list-group-item { + padding: 12px 6px; +} +.github-themes-page .repos-list .list-group-item:hover { + filter: brightness(1.2); +} +.github-themes-page .repos-list .list-group-item:active { + filter: brightness(0.8); +} +.github-themes-page .github-preview { + height: 100%; + flex: 1; + background: var(--color2); + padding: 16px 32px; + overflow-y: overlay; +} +.github-themes-page .gh-content { + display: flex; + flex-direction: row; + flex: 1; + overflow: hidden; +} +.github-themes-page .gh-header { + padding: 16px; +} +.library-page { + padding: 0px; +} +.library-page .library-header { + position: sticky; + top: 0; + left: 0; + border-bottom: 1px solid rgba(200, 200, 200, 0.05); + z-index: 6; + background: black; + padding: 0px 2em; + backdrop-filter: blur(32px); + background: rgba(0, 0, 0, 0.25); + top: var(--navigationBarHeight); +} +.library-page .well { + margin: 2em; +} +.content-inner.podcasts-page { + display: flex; + height: calc(100% - var(--navigationBarHeight)); + padding: 0px; +} +.content-inner.podcasts-page .list-flat { + border-radius: 0px; +} +.content-inner.podcasts-page .podcast-artwork { + width: 200px; + margin: 16px auto; + height: 200px; +} +.content-inner.podcasts-page .podcasts-list { + height: 100%; + width: 280px; + background: rgba(200, 200, 200, 0.1); + overflow-y: overlay; + border-right: 1px solid var(--color2); + flex: none; + overflow-x: hidden; +} +.content-inner.podcasts-page .podcasts-list .podcast-list-header { + border-bottom: 1px solid var(--color2); + font-size: 0.7em; + padding: 6px; + background: #ffffff17; + text-transform: uppercase; + font-weight: 600; + opacity: 0.5; +} +.content-inner.podcasts-page .podcasts-list .podcasts-search { + padding: 10px; + position: sticky; + top: 0; + left: 0; + width: 100%; + border-bottom: 1px solid var(--color2); + z-index: 2; + background: #303030; +} +.content-inner.podcasts-page .episodes-list { + height: 100%; + width: 100%; + background: rgba(200, 200, 200, 0.06); + overflow-y: overlay; + overflow-x: hidden; +} +.content-inner.podcasts-page .episodes-list .episodes-inline-info { + padding: 14px 14px 0px 14px; +} +.content-inner.podcasts-page .episodes-list .episodes-inline-info .podcast-show-info { + display: flex; + justify-content: center; + flex-direction: column; +} +.content-inner.podcasts-page .episodes-list .episodes-inline-info .podcast-show-description { + margin: 32px 6px; + font-size: 0.8rem; + white-space: pre-wrap; + display: block; +} +.content-inner.podcasts-page .episodes-list .episodes-inline-info .podcast-artwork { + width: 120px; + margin: 0px auto; + height: 120px; +} +.content-inner.podcasts-page .episodes-list .podcast-no-search-results { + text-align: center; + margin-top: 40px; +} +.content-inner.podcasts-page .podcasts-details { + width: 300px; + flex: none; + background: rgba(255, 255, 255, 0.05); + overflow-y: overlay; + overflow-x: hidden; + top: 2%; + z-index: 2; + border-left: 1px solid var(--color2); + padding-bottom: 1em; +} +.content-inner.podcasts-page .podcasts-details .meta-btn { + font-size: 0.75em; +} +.content-inner.podcasts-page .podcasts-details .podcasts-details-header { + display: flex; + justify-content: end; + align-items: center; + position: sticky; + top: 0; + z-index: 2; +} +.content-inner.podcasts-page .podcasts-details .close-btn { + width: 50px; + height: 42px; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; +} +.content-inner.podcasts-page .podcasts-details .close-btn:hover { + background-color: #c42b1c; +} +.content-inner.podcasts-page .podcasts-details .podcast-genre { + text-align: center; + margin: 6px; + font-size: 0.8em; + font-weight: 500; + opacity: 0.8; +} +.content-inner.podcasts-page .podcasts-details .podcast-metainfo { + text-align: center; + font-size: 0.7em; + opacity: 0.8; +} +.content-inner.podcasts-page .podcasts-details .podcast-header { + text-align: center; +} +.content-inner.podcasts-page .podcasts-details .podcast-play-btn { + width: 50%; + display: block; + margin: 0 auto; +} +.content-inner.podcasts-page .podcasts-details .podcast-description { + margin: 12px; + font-size: 0.75em; + white-space: pre-wrap; + display: block; + line-break: anywhere; +} +@media only screen and (max-width: 1230px) { + .content-inner.podcasts-page .podcasts-details { + height: 96%; + width: 300px; + flex: none; + background: rgba(20, 20, 20, 0.97); + overflow-y: overlay; + overflow-x: hidden; + position: absolute; + right: 2%; + top: 2%; + border-radius: 10px; + box-shadow: var(--ciderShadow-Generic); + z-index: 2; + } +} +/* Album / Playlist Page */ +.playlist-page { + --bgColor: transparent; + padding: 0px; + top: 0; + padding-top: var(--navigationBarHeight); +} +.playlist-page .playlist-body { + padding: var(--contentInnerPadding) 2em; + margin-top: -75px; +} +.playlist-page .floating-header { + position: sticky; + top: 0; + left: 0; + border-bottom: 1px solid rgba(200, 200, 200, 0.05); + z-index: 6; + padding: 0px 1em; + backdrop-filter: blur(32px); + background: rgba(0, 0, 0, 0.25); + top: var(--navigationBarHeight); + transition: opacity 0.1s var(--appleEase); +} +.playlist-page .playlist-display { + padding: var(--contentInnerPadding); + min-height: 300px; + position: relative; +} +.playlist-page .playlist-display .artworkContainer { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: 0; + margin-top: calc(var(--navigationBarHeight) * -1); + margin-bottom: -10px; + padding: 0; + -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, #c8c8c8, transparent 98%); + opacity: 0.7; + animation: playlistArtworkFadeIn 1s var(--appleEase); +} +.playlist-page .playlist-display .artworkContainer .artworkMaterial > img { + filter: brightness(100%) blur(80px) saturate(100%) contrast(1); + object-position: center; + object-fit: cover; + width: 100%; + height: 100%; + transform: unset; +} +.playlist-page .playlist-display .playlistInfo { + z-index: 1; + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} +.playlist-page .playlist-display .playlistInfo > .row { + width: calc(100% - 32px); +} +.playlist-page .playlist-display .playlistInfo .playlist-info { + flex-shrink: unset; + display: flex; + flex-flow: column; + justify-content: flex-end; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-name { + font-weight: 700; + font-size: 1.6rem; + margin-right: 6px; + flex-shrink: unset; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .nameEdit { + font-weight: 700; + font-size: 1.6rem; + margin-bottom: 6px; + margin-right: 6px; + flex-shrink: unset; + background: transparent; + border: 0px; + color: inherit; + font-family: inherit; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-artist { + font-size: 20px; + margin-bottom: 6px; + margin-right: 6px; + flex-shrink: unset; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-desc { + box-sizing: border-box; + font-size: 14px; + flex-shrink: unset; + margin-right: 5px; + max-height: 100px; + position: relative; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-desc .content { + height: 100px; + -webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(#000000), to(rgba(0, 0, 0, 0))); +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-desc .more-btn { + appearance: none; + position: absolute; + right: 0; + bottom: 0; + padding: 0 5px; + font-size: 14px; + color: var(--keyColor); + background-color: transparent; + border: 0px; + cursor: pointer; + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + justify-content: flex-end; + align-items: flex-end; + font-weight: 600; + font-family: inherit; + text-transform: uppercase; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-desc-expanded { + box-sizing: border-box; + font-size: 14px; + position: relative; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-desc-expanded .more-btn { + appearance: none; + position: absolute; + right: 0; + bottom: 0; + padding: 0 5px; + font-size: 14px; + color: var(--keyColor); + background-color: transparent; + border: 0px; + cursor: pointer; + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + justify-content: flex-end; + align-items: flex-end; + font-weight: 600; + font-family: inherit; + text-transform: uppercase; +} +.playlist-page .friends-info { + display: flex; + flex-flow: column; +} +.playlist-page .friends-info .badge-container { + display: flex; + flex-flow: wrap; +} +.playlist-page .friends-info .badge-container .socialBadge { + width: 40px; + height: 40px; + border-radius: 100%; + overflow: hidden; + box-shadow: var(--mediaItemShadow-ShadowSubtle); + transition: transform 0.2s var(--appleEase); + margin: 6px; +} +.playlist-page .friends-info .badge-container .socialBadge:hover { + transform: scale(1.2); +} +.playlist-page .friends-info .friends-name { + text-align: center; + font-size: 0.9em; + margin: 8px; +} +.playlist-page .playlist-time { + font-size: 0.9em; + margin: 6px; + opacity: 0.7; +} +.playlist-page.inline-playlist { + overflow: hidden; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 6; + position: sticky; + margin-top: calc(var(--navigationBarHeight) * -1); +} +.playlist-page.inline-playlist .floating-header { + opacity: 1; + top: 0px; + z-index: 6; + padding: 1em; + backdrop-filter: unset; + background: black; +} +.playlist-page.inline-playlist .floating-header h3 { + display: none; +} +.playlist-page.inline-playlist .playlist-inner { + background: black; + width: 80%; + height: 100%; + overflow: overlay; + box-shadow: var(--ciderShadow-Generic); + border-radius: var(--mediaItemRadius) var(--mediaItemRadius) 0px 0px; +} +.playlist-page.inline-playlist .playlist-inner .close-btn { + position: sticky; + top: 16px; + left: 16px; + margin-left: 16px; + z-index: 7; +} +@keyframes playlistArtworkFadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 0.7; + } +} +.collection-page { + padding-bottom: 128px; +} +.collection-page .top-fab { + height: 52px; + width: 52px; + position: fixed; + bottom: 32px; + right: 32px; + border-radius: 100%; + background: #3c3c3c; + border: 0px; + appearance: none; + box-shadow: var(--ciderShadow-Generic); +} +.collection-page .top-fab > svg { + height: 50%; + color: #eee; + pointer-events: none; +} +.collection-page .top-fab:hover { + background: #646464; +} +.collection-page .top-fab:active { + background: var(--keyColor); +} +.collection-page .header-text { + margin-bottom: 32px; +} +/* Artist Page */ +.artist-page { + padding: 0px; + top: 0; +} +.artist-page .floating-header { + position: sticky; + top: 0; + left: 0; + border-bottom: 1px solid rgba(200, 200, 200, 0.05); + z-index: 6; + padding: 0px 1em; + backdrop-filter: blur(32px); + background: rgba(0, 0, 0, 0.25); + top: var(--navigationBarHeight); + transition: opacity 0.1s var(--appleEase); +} +.artist-page.animated .artist-header .more-btn-round { + position: absolute; + bottom: 22px !important; + right: 28px; +} +.artist-page .artist-header { + color: white; + display: flex; + align-items: center; + justify-content: space-between; + min-height: 400px; + position: relative; + pointer-events: none; +} +.artist-page .artist-header .header-content { + z-index: 1; + margin-top: -16px; +} +.artist-page .artist-header .artworkContainer { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: 0; + padding: 0; + -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, #c8c8c8, transparent 98%); + opacity: 0.7; + animation: playlistArtworkFadeIn 1s var(--appleEase); +} +.artist-page .artist-header .artworkContainer .artworkMaterial > img { + filter: brightness(100%) blur(80px) saturate(100%) contrast(1); + object-position: center; + object-fit: cover; + width: 100%; + height: 100%; + transform: unset; +} +.artist-page .artist-header .more-btn-round { + position: absolute; + bottom: 82px; + right: 28px; +} +.artist-page .artist-header .animated { + width: 100%; + height: 100%; + align-self: center; + position: absolute; + overflow: hidden; + box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1000000px inset; +} +.artist-page .artist-header .animated video { + overflow: hidden; + height: 100%; + width: 100%; + min-height: 56.25vw; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.artist-page .artist-header .row .col.flex-center { + z-index: 4; +} +.artist-page .artist-image { + width: 200px; + height: 200px; + margin: 32px; + position: relative; +} +.artist-page .artist-image .overlay-play { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + background: rgba(0, 0, 0, 0.5); + 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; +} +.artist-page .artist-image .overlay-play:hover { + opacity: 1; +} +.artist-page .artist-image .overlay-play:active { + background: var(--selected-click); +} +.artist-page .artist-image .overlay-play > svg { + width: 70%; +} +.artist-page .artist-play { + width: 32px; + height: 32px; + background: rgba(100, 100, 100, 0.5); + box-shadow: var(--ciderShadow-Generic); + border-radius: 100%; + box-shadow: var(--mediaItemShadow); + display: none; + cursor: pointer; + appearance: none; + border: 0px; + padding: 0px; +} +.artist-page .artist-play:hover { + filter: brightness(125%); +} +.artist-page .artist-play:active { + filter: brightness(75%); + transform: scale(0.98); + transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); +} +.artist-page .artist-title .artist-play { + transform: translateY(3px); + margin: 14px; +} +.artist-page .artist-title.artist-animation-on { + width: 100%; + flex: unset; + margin-left: 0.5em; + color: whitesmoke; + position: absolute; + bottom: 0; +} +.artist-page .artist-title.artist-animation-on .artist-play { + display: block; +} +.artist-page .artist-body { + padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding); + margin: -140px 20px; +} +.artist-page.animated > .artist-body { + padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding); + margin-top: -57px; +} +.artist-page .showmoreless { + font-family: inherit; + font-size: 16px; + font-weight: 500; + background: transparent; + border: 0px; + border-radius: 6px; + appearance: none; + color: var(--keyColor); + padding: 8px 12px; + cursor: pointer; + margin-top: 12px; + float: right; +} +.artist-page .showmoreless:hover { + background: rgba(200, 200, 200, 0.1); +} +/* Artist Page End */ +.settings-page { + padding: 0px; +} +.settings-page .md-option-header { + padding: 1.25em 1.25em; + border-bottom: unset; + border-top: unset; + font-weight: 600; + font-size: 1em; + background: rgba(255, 255, 255, 0.03); +} +.settings-page .settings-option-body { + margin: 16px; +} +.home-page { + top: 0; + padding-top: var(--navbarHeight); +} +.home-page .md-btn-replay { + background: var(--replayGradient); + border: 0px; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2); + text-transform: uppercase; + font-weight: bold; +} +.home-page .md-btn-replay--hero { + font-size: 1em; + padding: 16px; + background: var(--replayGradient); + border: 0px; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2); + margin-top: 1em; + font-size: 0.9em; + text-transform: uppercase; + font-weight: bold; +} +.home-page .artist-feed-card { + position: absolute; + bottom: 0; + left: 10%; + z-index: 1; + background: black; + width: 80%; + height: 96%; + overflow: scroll; + border-radius: 10px; +} +.home-page .col.madeforyou-col { + width: 420px; + min-width: 0px; + max-width: 420px; +} +.home-page .well.artistfeed-well { + margin-top: 0px; + height: 392px; + align-content: flex-start; +} +.home-page .hint-text { + font-size: 0.9rem; + color: rgba(200, 200, 200, 0.7); +} +.home-page .user-icon { + border-radius: 100%; + width: 128px; + height: 128px; + overflow: hidden; + box-shadow: var(--mediaItemShadow-Shadow); + margin: 16px; +} +.home-page .well.profile-well { + flex-direction: column; + justify-content: center; + align-items: center; +} +.home-page .well.profile-well .name { + margin: 4px; + font-weight: 500; +} +.home-page .well.profile-well .handle { + margin: 4px; + opacity: 0.7; + font-weight: 500; +} +.replay-page { + --replayTextShadow: 0px 3px 2px #6f3f52; +} +.replay-page .replay-period { + height: 200px; + width: 200px; + margin: 6px; + border-radius: var(--mediaItemRadius); + overflow: hidden; + cursor: pointer; + transition: transform 0.2s var(--appleEase); + transition-delay: 0.1s; + align-self: center; +} +.replay-page .replay-period:hover { + transform: translateY(-6px); + transition-delay: 0s; +} +.replay-page .replay-period .artwork-container { + height: 200px; + width: 200px; +} +.replay-page .replay-playlist-container .cd-mediaitem-square { + height: 230px; + width: 230px; +} +.replay-page .replay-playlist-container .cd-mediaitem-square .info-rect { + display: none; +} +.replay-page .replay-video { + max-height: 300px; + max-width: 800px; + margin: 0 auto; +} +.replay-page .replay-video .mediaitem-artwork { + max-height: 300px; + max-width: 800px; +} +.replay-page .replay-video .mediaitem-artwork .animatedartwork-view-box .animated video { + object-fit: cover; +} +.replay-page .top-genres-container .genre-name { + font-size: 0.9em; + margin: 6px 0px; + font-weight: 500; +} +.replay-page .top-genres-container .genre-count { + width: 100%; + height: 32px; + background: #ffffff14; + border-radius: 10px; + overflow: hidden; +} +.replay-page .top-genres-container .genre-count .genre-count-bar { + 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; +} +.replay-page .cd-mediaitem-square { + transition: transform 0.2s var(--appleEase); + transition-delay: 0.1s; +} +.replay-page .cd-mediaitem-square .mediaitem-artwork { + animation: replayFadeIn 0.5s var(--appleEase); +} +.replay-page .cd-mediaitem-square:hover { + transform: scale(1.1); + transition-delay: 0s; +} +@keyframes replayFadeIn { + 0% { + transform: translateY(10px) scale(0.9); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +.replay-page .replay-viewport { + background: var(--replayGradient); + padding: 16px 40px; + border-radius: 10px; + box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-Shadow); + color: rgba(238, 238, 238, 0.86); +} +.replay-page .replay-viewport .replay-header { + text-align: center; + font-size: 3em; + text-shadow: var(--replayTextShadow); +} +.replay-page .replay-card { + background: transparent; + border: 0px; +} +:root { + --appleEase: cubic-bezier(0.42, 0, 0.58, 1); + --mediaItemShadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16); + --mediaItemShadow-Shadow: 0 8px 40px rgba(0, 0, 0, 0.55); + --mediaItemShadow-ShadowSubtle: 0 4px 14px rgba(0, 0, 0, 0.1); + --ciderShadow-Generic: var(--mediaItemShadow), 0 8px 40px rgb(0 0 0 / 0.55); + --mediaItemRadius: 6px; + --mediaItemRadiusRound: 100%; + --contentInnerPadding: 16px; + --navbarHeight1: 48px; + --navbarHeight2: 0px; + --navbarHeight: calc(var(--navbarHeight1) + var(--navbarHeight2)); + --selected: rgba(130, 130, 130, 0.3); + --selected-click: rgba(80, 80, 80, 0.3); + --hover: rgba(200, 200, 200, 0.1); + --keyColor: #fa586a; + --keyColor-rgb: 250, 88, 106; + --keyColor-rollover: #ff8a9c; + --keyColor-rollover-rgb: 255, 138, 156; + --keyColor-pressed: #ff7183; + --keyColor-pressed-rgb: 255, 113, 131; + --keyColor-deepPressed: #ff8a9c; + --keyColor-deepPressed-rgb: 255, 138, 156; + --keyColor-disabled: rgba(250, 88, 106, 0.35); + --navigationBarHeight: 38px; + --modalBackground: #262626; + --songProgressColor: var(--keyColor); + --songProgressBackground: #333; + --textColor: #eee; + --replayGradient: linear-gradient(45deg, hsl(248, 58%, 29%), hsl(13, 41%, 42%)); +} +*:focus-visible { + outline: 2px solid var(--keyColor); +} +html, +body { + margin: 0; + padding: 0; + overflow: hidden; + width: 100%; + height: 100%; + box-sizing: border-box; + background-size: cover; + background-position: center; + background: #0000; + font-family: "Inter var experimental", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + transition: opacity 0.1s var(--appleEase); +} +a:-webkit-any-link { + color: var(--keyColor); +} +hr { + appearance: none; + border: none; + height: 1px; + background-color: rgba(255, 255, 255, 0.2); +} +body[loading] .app-navigation { + pointer-events: none; +} +body.stopanimation * { + animation: unset !important; +} +body.stopanimation * .loadbar-sound { + display: none; +} +body.notransparency::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0.5; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==); +} +*, +*:before, +*:after { + box-sizing: inherit; +} +/* Modern style overlay scrollbars */ +::-webkit-scrollbar { + width: 16px; + height: 24px; +} +::-webkit-scrollbar-button { + display: none; +} +::-webkit-scrollbar-track-piece { + background: transparent; +} +::-webkit-scrollbar-thumb { + background: transparent; + border: 6px solid transparent; + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); + border-radius: 16px; + min-height: 64px; + transition: border 1s; +} +::-webkit-scrollbar-thumb:hover { + border: 5px solid transparent; + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.8); +} +[disabled] { + pointer-events: none; + opacity: 0.5; +} +#app { + --color1: rgba(30, 30, 30, 0.3); + --color2: rgba(15, 15, 15, 0.3); + --bgColor: transparent; + --bgWidth: 0px; + --bgHeight: 0px; + --chromeHeight1: 55px; + --chromeHeight2: 0px; + --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2)); + width: 100%; + height: 100%; + background: var(--color1); + color: var(--textColor); + user-select: none; + margin: 0 auto; + position: relative; + overflow: hidden; + background-size: 400% 400%; +} +#app.simplebg { + background: #0e0e0e; +} +#app.simplebg::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0.5; + z-index: 0; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==); +} +#app.simplebg .app-chrome { + z-index: 1; +} +.bgGradientMaterial-base { + position: relative; +} +.bgGradientMaterial-base::before { + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 250%; + background-image: var(--bgColor); + content: ""; + z-index: -1; + transform: rotateZ(0deg); + transform-origin: center; + animation: bgRotate 10s linear infinite; + filter: brightness(100%) saturate(200%) contrast(1.5); +} +@keyframes bgRotate { + 0% { + transform: rotateZ(0deg); + } + 100% { + transform: rotateZ(360deg); + } +} +[hidden] { + display: none !important; +} +input[type="text"], +input[type="number"] { + background: #1c1c1c; + border-radius: 3px; + border: 1px solid rgba(200, 200, 200, 0.25); + color: #eee; + padding: 6px; + font-size: 1em; + font-family: inherit; +} +.bg-artwork--placeholder { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #222; + z-index: -1; + background-size: cover; + background-position: center; + opacity: 0.7; +} +.bg-artwork { + position: absolute; + width: 200%; + background: var(--artwork); + filter: brightness(200%) blur(180px) saturate(280%) contrast(2); + opacity: 1; + transition: opacity 0.25s var(--appleEase); + pointer-events: none; + transform: translateZ(0px); + animation: rotateBg 35s linear infinite; + backface-visibility: hidden; +} +@keyframes rotateBg { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +.bg-artwork-container { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + pointer-events: none; + transform: translateZ(0px); + z-index: -1; +} +.bg-artwork-container .bg-artwork.a { + top: 0; + left: 0; +} +.bg-artwork-container .bg-artwork.b { + bottom: 0; + right: 0; + animation-direction: reverse; + animation-delay: 10s; +} +.bg-artwork-container.noanimation .bg-artwork { + animation: none; +} +.artworkMaterial { + position: relative; + height: 100%; + width: 100%; + overflow: hidden; + pointer-events: none; +} +.artworkMaterial > img { + position: absolute; + width: 200%; + opacity: 0.5; + filter: brightness(200%) blur(180px) saturate(280%) contrast(2); +} +.artworkMaterial > img:first-child { + top: 0; + left: 0; +} +.artworkMaterial > img:last-child { + bottom: 0; + right: 0; + transform: rotate(180deg); +} +[artwork-hidden] { + transition: opacity 0.25s var(--appleEase); + opacity: 0; +} +input[type="range"].web-slider { + -webkit-appearance: none; + height: 4px; + background: rgba(255, 255, 255, 0.6); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; +} +input[type="range"].web-slider::-webkit-slider-thumb { + -webkit-appearance: none; + height: 20px; + width: 20px; + border-radius: 50%; + background: #ffffff; + cursor: ew-resize; + box-shadow: 0 0 2px 0 #555; +} +input[type=range].web-slider::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} +.nopadding { + padding: 0px; +} +#app-main { + display: flex; + width: 100%; + height: 100%; + flex-direction: column; + opacity: 1; + overflow: hidden; +} +#app-sidebar { + /* background-color: var(--color1); */ + height: 100%; + width: 260px; + display: flex; + flex-direction: column; + flex: 0 0 auto; + position: relative; +} +#app-navbar { + height: 40px; + width: 100%; + background: rgba(30, 30, 30, 0.85); + position: sticky; + top: 0px; + left: 0; + z-index: 2; + backdrop-filter: blur(16px) saturate(180%); +} +#app-content { + background-color: var(--color2); + height: 100%; + width: 100%; + overflow-y: scroll; + overflow-y: overlay; + overflow-x: hidden; + border-radius: 10px 0px 0px 0px; + border-left: 1px solid rgba(0, 0, 0, 0.25); + border-top: 1px solid rgba(0, 0, 0, 0.25); + position: relative; +} +.app-drawer { + width: 300px; + flex: 0 0 auto; + position: absolute; + right: 16px; + top: 3%; + background: #1c1c1c8f; + border-radius: 12px; + z-index: 9; + height: 94%; + backdrop-filter: blur(40px) saturate(180%); + box-shadow: var(--ciderShadow-Generic); + overflow: hidden; +} +.app-drawer .bgArtworkMaterial { + display: none; + position: absolute; + width: 100%; + height: 100%; +} +.app-drawer .bgArtworkMaterial .bg-artwork-container .bg-artwork { + filter: brightness(80%) blur(180px) saturate(180%) contrast(1); +} +.search-input-container { + position: relative; +} +.search-input { + width: 100%; + padding: 6px; + border-radius: 6px; + border: 1px solid rgba(200, 200, 200, 0.1); + font-family: inherit; + font-size: 14px; + background: rgba(100, 100, 100, 0.25); + color: #c8c8c8; + font-weight: 500; + padding-left: 32px; + position: relative; + filter: contrast(0.1); +} +.search-input:focus { + outline: none; + border-bottom: 1px solid var(--keyColor); +} +.search-input--icon { + content: ''; + width: 100%; + height: 100%; + display: block; + position: absolute; + top: 0px; + left: 0px; + background-image: url('assets/search.svg'); + background-position: 10px; + background-repeat: no-repeat; + background-size: 12px; + pointer-events: none; + opacity: 0.55; +} +.app-sidebar-header { + font-size: 14px; + padding: 11px; + font-weight: 600; +} +.app-sidebar-header-text { + font-size: 11px; + margin: 6px 3px; + font-weight: 600; + opacity: 0.5; +} +.app-sidebar-footer { + border-top: 1px solid rgba(200, 200, 200, 0.15); + padding: 11px; +} +.app-sidebar-footer .app-playback-controls { + margin: 0 auto; +} +.app-sidebar-footer .app-playback-controls .control-buttons { + display: flex; + justify-content: center; + align-content: center; +} +.app-sidebar-footer .app-playback-controls .volume { + display: flex; +} +.app-sidebar-button { + width: 100%; + padding: 0px; + font-family: inherit; + display: flex; + border-radius: 6px; + border: 1px solid rgba(200, 200, 200, 0.05); + background: rgba(100, 100, 100, 0.25); + color: #eee; + font-weight: 500; + align-items: center; +} +.app-sidebar-button.active { + background: rgba(200, 200, 200, 0.15); + animation: usermenuBtnClick 0.3s cubic-bezier(0.36, 0, 0.66, -0.56); +} +@keyframes usermenuBtnClick { + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(-6px); + } + 100% { + transform: translateY(0px); + } +} +.app-sidebar-button > .sidebar-user-icon { + width: 32px; + height: 32px; + border-radius: 100%; + background-image: var(--artwork); + margin: 10px; + flex: 0 0 auto; + box-shadow: var(--mediaItemShadow); + background-size: contain; +} +.app-sidebar-button > .sidebar-user-text { + width: 100%; + display: flex; + font-size: 14px; + flex-direction: column; + text-align: center; + margin-right: 35px; +} +.app-sidebar-button > .sidebar-user-text .fullname { + text-align: left; +} +.app-sidebar-button > .sidebar-user-text .handle-text { + font-size: 12px; + opacity: 0.7; + text-align: left; +} +.app-sidebar-notification { + text-align: center; + font-size: 12px; + min-height: 36px; + display: flex; + justify-content: center; + align-items: center; + border-top: 1px solid rgba(200, 200, 200, 0.15); + background: rgba(0, 0, 0, 0.15); + flex-direction: column; + padding: 10px 0px; +} +.app-sidebar-notification.libraryNotification { + flex-direction: row; + padding: 0px; +} +.app-sidebar-notification.libraryNotification .message { + flex-grow: 1; +} +.app-sidebar-notification.libraryNotification .spinner { + width: 46px; + height: 30px; + margin-left: 1em; +} +.app-sidebar-content { + padding: 8px; + overflow-y: scroll; + overflow-y: overlay; + height: 100%; +} +.search-hints-container { + top: 44px; + position: absolute; + width: 100%; + padding: 10px; + z-index: 1; +} +.search-hints-container .search-hints { + background: #242424; + padding: 6px; + border-radius: 6px; + width: 100%; + box-shadow: var(--ciderShadow-Generic); +} +.search-hints-container .search-hints .search-hint { + background: transparent; + display: block; + width: 100%; + text-align: left; + color: #eee; + font-family: inherit; + font-size: 15px; + padding: 8px 12px; + border: 0px; + appearance: none; + border-radius: 6px; + margin: 2px 0px; +} +.search-hints-container .search-hints .search-hint:hover { + background: var(--keyColor); +} +.usermenu-container { + top: 0px; + z-index: 200001 !important; + position: absolute; + width: 100%; + padding: 10px; + z-index: 1; +} +.usermenu-container .usermenu-body { + background: #242424; + padding: 6px; + border-radius: 6px; + width: 100%; + box-shadow: var(--ciderShadow-Generic); +} +.usermenu-container .usermenu-body .usermenu-item { + background: transparent; + display: block; + width: 100%; + text-align: left; + color: #eee; + font-family: inherit; + font-size: 15px; + padding: 8px 12px; + border: 0px; + appearance: none; + border-radius: 6px; + margin: 2px 0px; +} +.usermenu-container .usermenu-body .usermenu-item:hover { + background: var(--keyColor); +} +.usermenu-container .usermenu-body .usermenu-item .usermenu-item-icon { + position: relative; + top: 1.5px; + right: 3px; + display: table-cell; +} +.usermenu-container .usermenu-body .usermenu-item .usermenu-item-name { + position: relative; + bottom: 2px; + padding-left: 5px; + display: table-cell; +} +.context-menu { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0); + z-index: 100; +} +.context-menu .context-menu-item { + background: transparent; + display: flex; + width: 100%; + text-align: left; + color: #eee; + font-family: inherit; + font-size: 14px; + padding: 6px 12px; + border: 0px; + appearance: none; + border-radius: 6px; + margin: 2px 0px; +} +.context-menu .context-menu-item:hover { + background: var(--selected); + cursor: pointer; +} +.context-menu .context-menu-item:active { + background: var(--selected-click); +} +.context-menu .context-menu-body { + background: #242424; + padding: 6px; + border-radius: 6px; + box-shadow: var(--ciderShadow-Generic); +} +.context-menu .context-menu-body.context-menu-open { + animation-duration: 0.1s; + animation-name: contextMenuIn; + animation-iteration-count: 1; + animation-easings: var(--appleEase); +} +.context-menu .context-menu-body.context-menu-close { + animation-duration: 0.1s; + animation-name: contextMenuOut; + animation-iteration-count: 1; + animation-easings: var(--appleEase); +} +@keyframes contextMenuIn { + 0% { + transform: scale(0.9); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@keyframes contextMenuOut { + 0% { + transform: scale(1); + opacity: 1; + } + 100% { + transform: scale(0.9); + opacity: 0; + } +} +.hidden-opacity { + opacity: 0; + height: 0px; + width: 0px; + margin: 0px; +} +.spinner { + background-image: url("assets/spinner.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + width: 50px; + height: 50px; + display: inline-block; +} +.app-sidebar-content::-webkit-scrollbar { + display: none; +} +.app-sidebar-content:hover::-webkit-scrollbar { + display: initial; +} +.app-sidebar-item { + display: flex; + width: 100%; + padding: 8px 12px; + font-weight: 400; + font-family: inherit; + font-size: 14px; + margin: 3px 0px; + border: 1px solid transparent; + border-radius: 6px; + background: transparent; + color: #eee; + transition: transform 0.1s; + text-align: left; +} +.app-sidebar-item.app-sidebar-item-playlist { + -webkit-user-drag: element; + overflow: hidden; + text-overflow: ellipsis; +} +.app-sidebar-item.app-sidebar-item-playlist .presentNotice { + align-self: center; + margin-left: 8px; + text-transform: uppercase; + font-size: 0.7em; + opacity: 0.6; +} +.app-sidebar-item:hover { + border: 1px solid rgba(200, 200, 200, 0.05); + background: rgba(200, 200, 200, 0.15); +} +.app-sidebar-item:active { + border: 1px solid rgba(200, 200, 200, 0.05); + background: rgba(200, 200, 200, 0.15); + transform: scale(0.98); + transition: transform 0s; +} +.app-sidebar-item.active { + border: 1px solid rgba(200, 200, 200, 0.05); + background: rgba(200, 200, 200, 0.15); + transform: scale(1); + transition: transform 0s; +} +.app-sidebar-item.active::after { + content: ''; + width: 4px; + height: 16px; + display: block; + position: absolute; + top: calc(100% - 72%); + border-radius: 10px; + left: 0px; + background: var(--keyColor); +} +.app-chrome { + background: var(--color1); + width: 100%; + height: var(--chromeHeight1); + display: flex; + flex-direction: row; + -webkit-app-region: drag; +} +.mv-chrome { + position: absolute; + top: 0; + right: 0; + width: 90%; + height: 55px; + -webkit-app-region: drag; +} +.app-chrome .app-chrome--left, +.app-chrome .app-chrome--center, +.app-chrome .app-chrome--right { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.app-chrome .app-chrome--left { + width: 30%; + justify-content: left; + -webkit-app-region: drag; +} +.app-chrome .app-chrome--center { + width: 40%; +} +.app-chrome .app-chrome--right { + width: 30%; + justify-content: right; +} +.app-chrome .app-chrome-item { + height: 100%; + width: auto; + display: flex; + justify-content: center; + align-items: center; + -webkit-app-region: no-drag; + height: auto; +} +.app-chrome .app-chrome-item.generic { + width: 50px; + opacity: 0.7; +} +.app-chrome .app-chrome-item.volume { + width: 100px; + margin-right: 6px; +} +.volume-button { + background-image: url("assets/feather/volume-2.svg"); + height: 15px; + width: 30px; + padding: 0px; + background: transparent; + border: 0px; + border-radius: 0px; + box-shadow: unset; + background-size: 12px; + background-position: center; + background-repeat: no-repeat; + opacity: 0.7; + border-radius: 6px; +} +.volume-button:active, +.volume-button--small:active { + transform: scale(0.9); +} +.volume-button.active, +.volume-button--small.active { + background-image: url("assets/feather/volume.svg"); +} +.volume-button--small { + border-radius: 6px; + color: inherit; + background-size: 16px; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + height: 15px; + width: 30px; + border: 0px; + box-shadow: unset; + opacity: 0.7; + background-image: url("assets/feather/volume-2.svg"); +} +.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: #323232; + cursor: default; + box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); + transition: all var(--appleTransition); +} +.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover { + background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px); + transform: scale(1.2); +} +.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active { + background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px); + transform: scale(1); +} +.app-chrome .app-chrome-item.volume > input[type=range] { + -webkit-appearance: none; + height: 4px; + background: rgba(255, 255, 255, 0.4); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; + width: 100%; +} +.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} +.app-chrome .back-button { + height: 100%; + width: 60px; +} +.app-chrome .app-chrome-item.full-height { + height: 100%; +} +.app-chrome .app-chrome-item > .app-mainmenu { + width: 110px; + font-size: 13px; + background: url("assets/AppChromeBtn.svg"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + height: 70%; + margin-right: 16px; + margin-left: 16px; + margin-top: 1.5px; + border: 0px; + border-radius: 6px; +} +.app-chrome .app-chrome-item > .app-mainmenu:hover { + background-color: var(--selected); +} +.app-chrome .app-chrome-item > .app-mainmenu:active, +.app-chrome .app-chrome-item > .app-mainmenu.active { + background-color: var(--selected-click); +} +.app-chrome .app-chrome-item > .app-mainmenu.active { + background-image: url("assets/AppChromeBtn-Open.svg"); +} +.app-chrome .app-chrome-item > .window-controls { + width: 138px; + font-size: 13px; + height: 100%; + display: flex; +} +.app-chrome .app-chrome-item > .window-controls > div { + height: 100%; + width: 32px; +} +.app-chrome .app-chrome-item > .window-controls > div:hover { + background: rgba(200, 200, 200, 0.1); +} +.app-chrome .app-chrome-item > .window-controls > div.close { + width: 100%; + height: 100%; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; +} +.app-chrome .app-chrome-item > .window-controls > div.close:hover { + background-color: #c42b1c; +} +.app-chrome .app-chrome-item > .window-controls > div.minmax { + background-image: var(--gfx-maxBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + width: 100%; + height: 100%; +} +.app-chrome .app-chrome-item > .window-controls > div.minmax.restore { + background-image: var(--gfx-restoreBtn); +} +.app-chrome .app-chrome-item > .window-controls > div.minimize { + background-image: var(--gfx-minBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + width: 100%; + height: 100%; +} +body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minimize { + height: 12px; + width: 12px; + background-color: #ff5c5c; + border-radius: 50%; + display: inline-block; + margin: auto 4px; + color: #820005; + -webkit-app-region: no-drag; + background-image: unset; +} +body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls { + width: 67px; +} +body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minmax { + height: 12px; + width: 12px; + background-color: #ffbd4c; + border-radius: 50%; + display: inline-block; + margin: auto 4px; + -webkit-app-region: no-drag; + background-image: unset; +} +body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.close { + height: 12px; + width: 12px; + background-color: #00ca56; + border-radius: 50%; + display: inline-block; + margin: auto 4px auto 4px; + -webkit-app-region: no-drag; + background-image: unset; +} +.app-chrome .app-chrome-item.playback-controls { + width: 80%; + height: 90%; + display: flex; + max-width: 500px; + border-left: 1px solid rgba(200, 200, 200, 0.08); + border-right: 1px solid rgba(200, 200, 200, 0.08); + -webkit-app-region: drag; +} +.app-chrome .app-chrome-item > .app-playback-controls { + display: flex; + justify-content: center; + align-content: center; + width: 100%; + -webkit-app-region: no-drag; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-name { + font-weight: 600; + text-align: center; + font-size: 13px; + height: 1.3em; + line-height: 1.3em; + white-space: nowrap; + max-width: 360px; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-name .song-name-normal { + height: inherit; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-name .explicit-icon { + background-image: url("assets/explicit.svg"); + height: 9px; + width: 13px; + filter: contrast(0); + background-repeat: no-repeat; + margin-left: 3px; +} +.app-chrome .app-chrome-item > .app-playback-controls .lossless-icon { + background-image: url("assets/lossless.svg") !important; +} +.app-chrome .app-chrome-item > .app-playback-controls .ppe-icon { + background-image: url("assets/ppe.svg") !important; +} +.app-chrome .app-chrome-item > .app-playback-controls .audio-type { + filter: contrast(0); + background-repeat: no-repeat; + background-size: contain; + height: 15px; + width: 15px; + position: absolute; + right: 0; + margin-bottom: 15px; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-duration p { + font-weight: 400; + font-size: 10px; + height: 1.2em; + line-height: 1.3em; + overflow: hidden; + margin: 0 0 0 0.25em; +} +.app-playback-controls:hover .marquee { + animation: unset; +} +.app-playback-controls:hover .marquee.song-artist { + overflow: hidden; +} +.app-playback-controls:hover .marquee .song-artist { + overflow: hidden; +} +.app-playback-controls:hover .marquee.song-name { + overflow: hidden; +} +.app-playback-controls:hover .marquee::after { + content: none !important; + display: none; +} +.marquee { + animation: marquee 15s linear infinite; +} +.marquee.song-artist { + overflow: unset; +} +.marquee .song-artist { + overflow: unset; +} +.marquee.song-name { + overflow: unset; +} +.marquee::after { + content: attr(data-value); +} +.app-chrome .app-chrome-item > .app-playback-controls .song-progress { + position: absolute; + bottom: 0px; + left: 0px; + background: transparent; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-progress:hover > input[type=range]::-webkit-slider-thumb { + opacity: 1; + transform: scale(1); + z-index: 1; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range] { + appearance: none; + width: 100%; + height: 4px; + background-color: rgba(200, 200, 200, 0.1); + border-radius: 2px; + margin: 0; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-webkit-slider-thumb { + opacity: 0; + transform: scale(0.5); + -webkit-appearance: none; + appearance: none; + width: 12px; + height: 12px; + border-radius: 100%; + background: var(--keyColor); + cursor: default; + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-moz-range-thumb { + width: 8px; + height: 8px; + border-radius: 100%; + background: var(--keyColor); + cursor: default; +} +@keyframes marquee { + from { + transform: translateX(0); + } + to { + transform: translateX(-140%); + } +} +.app-chrome .app-chrome-item > .app-playback-controls .artwork { + width: 42px; + height: 42px; + background-image: var(--artwork); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + border-radius: 4px; + flex: 0 0 auto; + margin: 6px; + image-rendering: -webkit-optimize-contrast; +} +.app-chrome .app-chrome-item > .app-playback-controls .actions { + width: 42px; + height: 42px; + border-radius: 2px; + flex: 0 0 auto; + margin: 6px; + display: flex; + justify-content: center; + align-items: center; + filter: contrast(0.8); +} +.app-chrome .app-chrome-item > .app-playback-controls .actions .lcdMenu { + height: 100%; + width: 100%; + padding: 0px; + margin: 0px; + background: transparent; + border: 0px; + appearance: none; + display: flex; + justify-content: center; + align-items: center; + border-radius: 6px; +} +.app-chrome .app-chrome-item > .app-playback-controls .actions .lcdMenu:focus { + outline: none; +} +.app-chrome .app-chrome-item > .app-playback-controls .actions .lcdMenu:hover { + background: var(--hover); +} +.app-chrome .app-chrome-item > .app-playback-controls .actions .lcdMenu:active { + background: var(--selected-click); + transform: scale(0.95); +} +.app-chrome .app-chrome-item > .app-playback-controls .actions .lcdMenu .svg-icon { + --url: url('views/svg/more.svg') !important; +} +.app-chrome .app-chrome-item > .app-playback-controls .playback-info { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; + overflow: hidden; +} +.app-chrome .app-chrome-item > .app-playback-controls .playback-info > .song-progress { + width: 100%; +} +.app-navigation { + background: var(--color1); + height: calc(100% - var(--chromeHeight)); + width: 100%; + display: flex; + position: relative; +} +.app-chrome .app-chrome-item > .app-playback-controls > div > .song-artist-album { + font-weight: 400; + font-size: 12px; + text-align: center; + /*height: 1.2em; + line-height: 1.2em;*/ + z-index: 1; + align-items: center; + justify-content: center; + width: 80%; + max-width: 340px; + overflow: hidden; +} +.app-chrome .app-chrome-item > .app-playback-controls > div > .song-artist-album .song-artist-album-content { + font-weight: 400; + font-size: 12px; + text-align: center; + width: 100%; +} +.app-chrome .app-chrome-item > .app-playback-controls > div > .song-artist-album .song-artist-album-content.song-artist-normal { + height: inherit; +} +.app-chrome .app-chrome-item > .app-playback-controls > div > .song-artist-album.song-artist-marquee > marquee { + margin-bottom: -3px; +} +.display--small { + display: none !important; +} +.web-slider.display--small { + margin: 10px; +} +input[type="range"].web-slider.display--small::-webkit-slider-thumb { + -webkit-appearance: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: #323232; + cursor: default; + box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); +} +/* Window is smaller <= 1023px width */ +@media only screen and (max-width: 1120px) { + .display--small { + display: inherit !important; + } + .display--small .slider { + width: 100%; + z-index: 1; + } + .display--small .input-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding-bottom: 10px; + } + .display--small input[type=range] { + -webkit-appearance: none; + height: 4px; + background: rgba(255, 255, 255, 0.4); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; + } + .display--small input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: #323232; + cursor: default; + box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); + transition: all var(--appleTransition); + } + .display--small input[type=range]::-webkit-slider-thumb:hover { + background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px); + transform: scale(1.2); + } + .display--small input[type=range]::-webkit-slider-thumb:active { + background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px); + transform: scale(1); + } + .display--small input[type=range]::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; + } + .display--large { + display: none !important; + } +} +.flex-center { + display: flex; + align-items: center; + flex-wrap: wrap; +} +.md-container { + width: 100%; + position: relative; +} +.lyric-body { + -webkit-mask-image: -webkit-gradient(linear, left 95%, left bottom, from(#000000), to(rgba(0, 0, 0, 0))); + overflow-y: scroll; + overflow-x: hidden; + display: flex; + flex-flow: column; + font-family: 'Inter', 'Noto Sans JP', 'Source Han Sans SC', 'Source Han Sans HK', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif; +} +.lyric-body .no-lyrics { + width: 100%; + justify-content: center; + align-items: center; + font-weight: bold; + font-size: 26px; +} +.lyric-line { + --bgSpeed: 1s; + appearance: none; + color: white; + font-size: 26px; + transform: scale(0.8); + transform-origin: left center; + transition: transform 0.2s var(--appleEase); + opacity: 0.75; + width: auto; + display: inline-block; + margin: 10px; + margin-left: 5%; + margin-right: 0px; +} +.lyric-line.active .verse { + opacity: 0.6; +} +.lyric-line.active .verse.verse-active { + opacity: 1; +} +.lyric-line:hover { + cursor: pointer; +} +.lyric-line:hover::after { + content: ' '; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + transform: scale(1.06); + background: rgba(200, 200, 200, 0.1); + pointer-events: none; + border-radius: 10px; + -webkit-backface-visibility: hidden; +} +.lyric-line.active { + --bgSpeed: 1s; + opacity: 1; + transform: scale(1); + /*background: var(--keyColor);*/ + transition: transform 0.2s var(--appleEase); +} +.lyric-line:not(.active) { + filter: blur(1px); +} +.lyric-line:not(.active).unsynced { + filter: none !important; +} +.lyric-line.unsynced { + filter: none !important; +} +.lyricWaiting { + margin-top: 8px; + display: none; +} +.lyric-line.active .lyricWaiting { + display: inline-flex; + animation: lyricWaitingLine 6s cubic-bezier(0.42, 0, 0.58, 1) infinite; +} +.lyric-line.active .lyricWaiting > div { + width: 10px; + height: 10px; + background: white; + border-radius: 50%; + margin: 3px; +} +.lyrics-translation { + font-size: 1.6rem; + font-weight: 450; + font-family: 'Inter', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif; + filter: contrast(0.5); +} +.lyric-footer { + bottom: 0; + height: 50px; + width: 100%; + position: absolute; + z-index: 1000; + opacity: 1; + background: rgba(30, 30, 30, 0.8); + justify-content: center; + align-items: center; + display: none; + transition: opacity 0.1s var(--appleEase); +} +.lyric-body:hover + .lyric-footer, +.lyric-footer:hover { + display: flex; +} +.modular-fs .app-drawer .lyric-footer { + background: unset; + display: flex; + opacity: 0.3; +} +.modular-fs .app-drawer .lyric-footer:hover { + opacity: 1; +} +.modular-fs .app-drawer .lyric-body .no-lyrics { + height: 100%; + display: flex; +} +@keyframes lyricWaitingLine { + 0% { + opacity: 0.25; + transform: scale(0.85); + } + 50% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0.25; + transform: scale(0.85); + } +} +@keyframes dotOpacity { + 0% { + opacity: 0.25; + } + 100% { + opacity: 1; + } +} +.lyric-line2:before { + background: var(--keyColor); + content: ''; + width: 0%; + height: 6px; + position: absolute; + bottom: -8px; + left: 0; + border-radius: 10px; + z-index: -1; + transition: width var(--bgSpeed); +} +.lyric-line2.active:before { + width: 100%; + transition: width var(--bgSpeed); +} +.player_top { + height: 100%; +} +/* Cider */ +.more-btn-round { + border-radius: 100%; + background: rgba(100, 100, 100, 0.5); + box-shadow: var(--ciderShadow-Generic); + width: 32px; + height: 32px; + border: 0px; + cursor: pointer; + z-index: 5; + display: flex; + justify-content: center; + align-items: center; +} +.more-btn-round:hover { + filter: brightness(125%); +} +.more-btn-round:active { + filter: brightness(75%); + transform: scale(0.98); + transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); +} +.more-btn-round .svg-icon { + width: 100%; + background: #eee; + --url: url("views/svg/more.svg"); +} +.about-page .teamBtn { + display: flex; + align-items: center; + width: 100%; + font-size: 14px; + padding: 6px 16px; + margin: 4px; +} +.about-page .teamBtn > img { + width: 30px; + margin: 0px 16px 0px 0px; + pointer-events: none; + border-radius: 100%; + box-shadow: var(--mediaItemShadow); + image-rendering: -webkit-optimize-contrast; +} +.about-page .sponsorBtn { + display: inline-flex; + justify-content: center; + align-items: center; +} +.about-page .sponsorBtn > img { + width: 26px; + margin: 0px 16px 0px 0px; + pointer-events: none; +} +.sidebar-playlist .folder-button-active { + background: rgba(255, 255, 255, 0.12); +} +.sidebar-playlist .folder-body { + background: #ffffff0a; + border-radius: 10px; + padding: 1px 6px; +} +.sidebar-playlist .folder-body .spinner { + display: block; + width: 100%; + height: 32px; + background-size: 16px; +} +#navigation-bar { + width: 100%; + background: rgba(0, 0, 0, 0.25); + height: var(--navigationBarHeight); + display: flex; + align-items: center; + padding: 0px 6px; + z-index: 7; + position: sticky; + top: 0; + left: 0; + backdrop-filter: blur(32px); + mix-blend-mode: hard-light; +} +#navigation-bar .nav-item { + appearance: none; + border: 0px; + height: 32px; + width: 40px; + background: transparent; + padding: 6px; + display: flex; + justify-content: center; + align-items: center; + color: rgba(200, 200, 200, 0.8); + margin: 2px; + border-radius: 6px; + transition: transform 0.1s var(--appleEase); +} +#navigation-bar .nav-item:active { + background: var(--selected-click); + transform: scale(0.96); + transition: transform 0s var(--appleEase); +} +#navigation-bar .nav-item > svg { + width: 8px; + pointer-events: none; +} +#navigation-bar .nav-item:hover { + background: var(--selected); +} +#navigation-bar .nav-item:hover > svg { + color: #c8c8c8; +} +.well { + background: rgba(200, 200, 200, 0.05); + border-radius: 10px; + padding: var(--contentInnerPadding); + box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; + margin-top: 16px; +} +.well.itemContainer { + display: flex; + flex-flow: wrap; + justify-content: center; +} +.well.itemContainer .cd-mediaitem-square { + width: 220px; + height: 260px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: 14px; + justify-content: center; + align-items: center; + border-radius: 6px; + max-width: 240px; + flex-grow: 1; +} +.text-overflow-elipsis { + display: -webkit-box; + min-width: 0px; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; +} +.no-animation { + animation: unset !important; +} +.fullscreen-view-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: black; + z-index: 99; + display: flex; + justify-content: center; + align-items: center; + opacity: 1; +} +.fullscreen-view { + width: 100%; + height: 100%; + background: black; + display: flex; + justify-content: center; + align-items: center; +} +.fullscreen-view .fs-row { + flex-grow: 1; +} +.fullscreen-view .playback-button--small.active { + background-color: rgba(200, 200, 200, 0.25); +} +.fullscreen-view .playback-button--small { + opacity: 0.7; +} +.fullscreen-view .right-col { + height: 50vh; +} +.fullscreen-view .bg-artwork-container { + display: block !important; +} +@media only screen and (max-width: 1121px) { + .fullscreen-view .display--large { + display: flex !important; + } +} +.fullscreen-view .display--large { + display: flex; +} +.fullscreen-view .display--large .slider { + width: 100%; + z-index: 1; +} +.fullscreen-view .display--large .input-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} +.fullscreen-view .display--large .volume-button--small { + border-radius: 6px; + color: inherit; + background-size: 16px; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + height: 15px; + width: 30px; + border: 0px; + box-shadow: unset; + opacity: 0.7; + background-image: url("assets/feather/volume-2.svg"); +} +.fullscreen-view .display--large .volume-button--small:active { + transform: scale(0.9); +} +.fullscreen-view .display--large .volume-button--small.active { + background-image: url("assets/feather/volume.svg"); +} +.fullscreen-view .display--large input[type=range] { + -webkit-appearance: none; + height: 4px; + background: rgba(255, 255, 255, 0.4); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; +} +.fullscreen-view .display--large input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: #323232; + cursor: default; + box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); + transition: all var(--appleTransition); +} +.fullscreen-view .display--large input[type=range]::-webkit-slider-thumb:hover { + background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px); + transform: scale(1.2); +} +.fullscreen-view .display--large input[type=range]::-webkit-slider-thumb:active { + background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px); + transform: scale(1); +} +.fullscreen-view .display--large input[type=range]::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} +.fullscreen-view .background { + position: absolute; + background-size: cover; + width: 100%; + height: 100%; +} +.fullscreen-view .background .bgArtworkMaterial { + position: absolute; + width: 100%; + height: 100%; +} +.fullscreen-view .background .bgArtworkMaterial .bg-artwork-container { + z-index: unset; +} +.fullscreen-view .background .bgArtworkMaterial .bg-artwork-container .bg-artwork { + filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9); +} +.fullscreen-view .lyrics-col { + height: 62vh; + display: flex; + justify-content: center; + align-content: center; + width: 80%; +} +.fullscreen-view .lyrics-col ::-webkit-scrollbar-thumb { + box-shadow: unset; +} +.fullscreen-view .lyrics-col:hover ::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); +} +.fullscreen-view .lyrics-col .no-lyrics { + width: 100%; + height: 100%; + display: flex; + justify-content: center; +} +.fullscreen-view .lyrics-col .lyric-line { + font-size: 35px; +} +.fullscreen-view .queue-col { + width: 60vh; + height: 62vh; +} +.fullscreen-view .queue-col .queue-title { + opacity: 0.6; +} +.fullscreen-view .queue-col .queue-panel > * { + z-index: 3; +} +.fullscreen-view .queue-col ::-webkit-scrollbar-thumb { + box-shadow: unset; +} +.fullscreen-view .queue-col:hover ::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); +} +.fullscreen-view .tab-toggles { + display: flex; + position: absolute; + bottom: 0; + right: 0; + width: 15vh; + height: 5vh; + justify-content: space-evenly; +} +.fullscreen-view .tab-toggles .volume { + background-image: url("assets/feathers/volume.svg"); + padding: 0.5vh; + width: 2vh; + height: 2vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.fullscreen-view .tab-toggles .queue { + background-image: url("assets/list.svg"); + padding: 0.5vh; + width: 2.5vh; + height: 2.5vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.fullscreen-view .tab-toggles .lyrics { + background-image: url("assets/quote-right.svg"); + padding: 0.5vh; + width: 2.5vh; + height: 2.5vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.fullscreen-view .tab-toggles .active { + background-color: rgba(200, 200, 200, 0.7); + border-radius: 3px; +} +.fullscreen-view .artwork-col { + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; +} +.fullscreen-view .artwork-col .artwork { + width: 50vh; + height: 50vh; +} +.fullscreen-view .artwork-col .controls-parents { + width: 50vh; +} +.fullscreen-view .artwork-col .app-playback-controls .song-artist, +.fullscreen-view .artwork-col .app-playback-controls .song-name { + font-weight: 600; + text-align: center; + font-size: 0.9em; + height: 1.2em; + line-height: 0.9em; + overflow: hidden; + text-overflow: ellipsis; + max-width: 360px; +} +.fullscreen-view .artwork-col .app-playback-controls .song-artist .song-name-normal, +.fullscreen-view .artwork-col .app-playback-controls .song-name .song-name-normal { + height: inherit; +} +.fullscreen-view .artwork-col .app-playback-controls .song-artist { + font-size: 0.875em; + font-weight: 400; +} +.fullscreen-view .artwork-col .app-playback-controls .song-name { + width: unset !important; + margin-top: 0.15vh; + display: -webkit-box; + line-height: 1.2; + text-overflow: ellipsis; + text-align: center; +} +.fullscreen-view .artwork-col .app-playback-controls .playback-info { + margin-top: 0.5vh; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; +} +.fullscreen-view .artwork-col .app-playback-controls .playback-info input[type="range"] { + width: 100%; +} +.fullscreen-view .artwork-col .app-playback-controls .playback-info > div { + width: 100%; + text-align: center; +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress { + position: absolute; + bottom: -1.5vh; + left: 0px; + background: transparent; +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress .song-duration p { + font-weight: 400; + font-size: 10px; + height: 1.2em; + line-height: 1.3em; + overflow: hidden; + margin: 0 0 0 0.25em; +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress:hover > input[type=range]::-webkit-slider-thumb { + opacity: 1; + transform: scale(1); + z-index: 1; +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress input[type=range] { + appearance: none; + width: 100%; + height: 4px; + background-color: rgba(200, 200, 200, 0.1); + border-radius: 2px; +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress input[type=range]::-webkit-slider-thumb { + opacity: 0; + transform: scale(0.5); + -webkit-appearance: none; + appearance: none; + width: 12px; + height: 12px; + border-radius: 100%; + background: var(--keyColor); + cursor: default; + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress input[type=range]::-moz-range-thumb { + width: 8px; + height: 8px; + border-radius: 100%; + background: var(--keyColor); + cursor: default; +} +.fullscreen-view .artwork-col .control-buttons { + margin-top: 2vh; + display: inline-flex; + width: 100%; + justify-content: center; +} +.mini-view { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.mini-view .fs-row { + flex-grow: 1; +} +.mini-view .playback-button--small.active { + background-color: rgba(200, 200, 200, 0.25); +} +.mini-view .player-exit { + z-index: 3; + position: absolute; + top: 5px; + right: 5px; + -webkit-app-region: no-drag; +} +.mini-view .player-pin { + z-index: 3; + position: absolute; + min-width: 20px; + min-height: 20px; + top: 5px; + right: 30px; + -webkit-app-region: no-drag; +} +.mini-view #mini-pin { + display: none; +} +.mini-view .player-pin:hover #mini-pin { + display: block; +} +.mini-view .playback-button--small { + opacity: 0.7; +} +.mini-view .right-col { + height: 50vh; +} +@media only screen and (max-width: 1121px) { + .mini-view .display--large { + display: flex !important; + } +} +.mini-view .display--large { + display: flex; +} +.mini-view .display--large .slider { + width: 100%; + z-index: 1; +} +.mini-view .display--large .input-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} +.mini-view .display--large .volume-button--small { + border-radius: 6px; + color: inherit; + background-size: 16px; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + height: 15px; + width: 30px; + border: 0px; + box-shadow: unset; + opacity: 0.7; + background-image: url("assets/feather/volume-2.svg"); +} +.mini-view .display--large .volume-button--small:active { + transform: scale(0.9); +} +.mini-view .display--large .volume-button--small.active { + background-image: url("assets/feather/volume.svg"); +} +.mini-view .display--large input[type=range] { + -webkit-appearance: none; + height: 4px; + background: rgba(255, 255, 255, 0.4); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; +} +.mini-view .display--large input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: #323232; + cursor: default; + box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); + transition: all var(--appleTransition); +} +.mini-view .display--large input[type=range]::-webkit-slider-thumb:hover { + background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px); + transform: scale(1.2); +} +.mini-view .display--large input[type=range]::-webkit-slider-thumb:active { + background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px); + transform: scale(1); +} +.mini-view .display--large input[type=range]::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} +.mini-view .background { + position: absolute; + background-size: cover; + width: 100%; + height: 100%; + -webkit-user-select: none; + -webkit-app-region: drag; +} +.mini-view .background .bgArtworkMaterial { + position: absolute; + width: 100%; + height: 100%; +} +.mini-view .background .bgArtworkMaterial .bg-artwork-container { + z-index: unset; +} +.mini-view .background .bgArtworkMaterial .bg-artwork-container .bg-artwork { + filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9); +} +.mini-view .background .bgArtworkMaterial .no-animation { + animation: unset; +} +.mini-view .lyrics-col { + height: 62vh; + display: flex; + justify-content: center; + align-content: center; + width: 80%; +} +.mini-view .lyrics-col ::-webkit-scrollbar-thumb { + box-shadow: unset; +} +.mini-view .lyrics-col:hover ::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); +} +.mini-view .lyrics-col .no-lyrics { + width: 100%; + height: 100%; + display: flex; + justify-content: center; +} +.mini-view .lyrics-col .lyric-line { + font-size: 35px; +} +.mini-view .queue-col { + width: 60vh; + height: 50vh; +} +.mini-view .queue-col .queue-title { + opacity: 0.6; +} +.mini-view .queue-col .queue-panel > * { + z-index: 3; +} +.mini-view .queue-col ::-webkit-scrollbar-thumb { + box-shadow: unset; +} +.mini-view .queue-col:hover ::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); +} +.mini-view .tab-toggles { + display: flex; + position: absolute; + bottom: 0; + right: 0; + width: 15vh; + height: 5vh; + justify-content: space-evenly; +} +.mini-view .tab-toggles .volume { + background-image: url("assets/feathers/volume.svg"); + padding: 0.5vh; + width: 2vh; + height: 2vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.mini-view .tab-toggles .queue { + background-image: url("assets/list.svg"); + padding: 0.5vh; + width: 2.5vh; + height: 2.5vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.mini-view .tab-toggles .lyrics { + background-image: url("assets/quote-right.svg"); + padding: 0.5vh; + width: 2.5vh; + height: 2.5vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.mini-view .tab-toggles .active { + background-color: rgba(200, 200, 200, 0.7); + border-radius: 3px; +} +.mini-view .artwork-col { + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; +} +.mini-view .artwork-col .artwork { + width: 100%; + height: 100%; +} +.mini-view .artwork-col .artwork .mediaitem-artwork { + border-radius: unset; +} +.mini-view .artwork-col .controls-parents { + width: 100%; + position: absolute; + background: #0000009e; + backdrop-filter: blur(10px); + bottom: 0px; + z-index: 3; + opacity: 0; + padding: 3%; +} +.mini-view .artwork-col .controls-parents:hover { + opacity: 1; +} +.mini-view .artwork-col .app-playback-controls { + -webkit-app-region: no-drag; +} +.mini-view .artwork-col .app-playback-controls .song-artist, +.mini-view .artwork-col .app-playback-controls .song-name { + font-weight: 600; + text-align: center; + font-size: 0.9em; + height: 1.2em; + line-height: 0.9em; + overflow: hidden; + text-overflow: ellipsis; + max-width: 360px; +} +.mini-view .artwork-col .app-playback-controls .song-artist .song-name-normal, +.mini-view .artwork-col .app-playback-controls .song-name .song-name-normal { + height: inherit; +} +.mini-view .artwork-col .app-playback-controls .song-artist { + font-size: 0.875em; + font-weight: 400; +} +.mini-view .artwork-col .app-playback-controls .song-name { + width: unset !important; + margin-top: 0.15vh; + display: -webkit-box; + line-height: 1.2; + text-overflow: ellipsis; + text-align: center; +} +.mini-view .artwork-col .app-playback-controls .playback-info { + margin-top: 0.5vh; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; +} +.mini-view .artwork-col .app-playback-controls .playback-info input[type="range"] { + width: 100%; +} +.mini-view .artwork-col .app-playback-controls .playback-info > div { + width: 100%; + text-align: center; +} +.mini-view .artwork-col .app-playback-controls .song-progress { + position: absolute; + bottom: -3.5vh; + left: 0px; + background: transparent; +} +.mini-view .artwork-col .app-playback-controls .song-progress .song-duration p { + font-weight: 400; + font-size: 10px; + height: 1.2em; + line-height: 1.3em; + overflow: hidden; + margin: 0 0 0 0.25em; +} +.mini-view .artwork-col .app-playback-controls .song-progress:hover > input[type=range]::-webkit-slider-thumb { + opacity: 1; + transform: scale(1); + z-index: 1; +} +.mini-view .artwork-col .app-playback-controls .song-progress input[type=range] { + appearance: none; + width: 100%; + height: 4px; + background-color: rgba(200, 200, 200, 0.1); + border-radius: 2px; +} +.mini-view .artwork-col .app-playback-controls .song-progress input[type=range]::-webkit-slider-thumb { + opacity: 0; + transform: scale(0.5); + -webkit-appearance: none; + appearance: none; + width: 12px; + height: 12px; + border-radius: 100%; + background: var(--keyColor); + cursor: default; + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +.mini-view .artwork-col .app-playback-controls .song-progress input[type=range]::-moz-range-thumb { + width: 8px; + height: 8px; + border-radius: 100%; + background: var(--keyColor); + cursor: default; +} +.mini-view .artwork-col .control-buttons { + margin-top: 3.5vh; + display: inline-flex; + width: 100%; + justify-content: center; +} +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.modular-fs .app-drawer { + width: 100%; + right: 0px; + top: 0px; + height: 100%; + border-radius: 0px; + box-shadow: unset; + background: black; +} +.modular-fs .app-drawer .bgArtworkMaterial { + display: block; +} +.modular-fs .app-drawer .bgArtworkMaterial::before { + top: -50%; + left: -20%; + width: 200VH; + height: 200VH; +} +.modular-fs .app-drawer .bgArtworkMaterial .bg-artwork-container { + display: block !important; +} +.modular-fs .app-drawer .lyric-body { + justify-content: center; + align-items: center; + padding: 0px; + margin: 0px; + overflow: hidden; + filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.7)); +} +.modular-fs .app-drawer .lyric-body .lyric-line { + pointer-events: none; + font-weight: 600; + font-size: 2em; + transform-origin: center; + animation: fsLyricIn var(--appleEase) 0.2s; + opacity: 0.9; +} +.modular-fs .app-drawer .lyric-body .lyric-line:not(.active) { + display: none; + margin: 0; + transform: scale(1); +} +.modular-fs .app-drawer .lyric-body .lyric-line.active { + margin: 0; + transform: scale(1); +} +@keyframes fsLyricIn { + 0% { + opacity: 0; + transform: scale(0.98); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +/* Transitions */ +.replaycard-enter-active, +.replaycard-leave-active { + transition: opacity 0.5s var(--appleEase), transform 0.5s var(--appleEase); +} +.replaycard-enter, +.replaycard-leave-to { + opacity: 0; + transform: translateY(20px); +} +.modal-enter-active, +.modal-leave-active { + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +.modal-enter, +.modal-leave-to { + opacity: 0; + transform: scale(1.1); +} +.wpfade-enter-active, +.wpfade-leave-active { + transition: opacity 0.1s var(--appleEase); +} +.wpfade-enter, +.wpfade-leave-to { + opacity: 0; +} +.wpfade_transform-enter-active, +.wpfade_transform-leave-active { + --transitionTime: 0.2s; + transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase); + will-change: opacity, transform; +} +.wpfade_transform-enter { + opacity: 0; + transform: translateX(50%) translate3d(0, 0, 0); + will-change: opacity, transform; +} +.wpfade_transform-leave-to { + opacity: 0; + transform: translateX(-50%) translate3d(0, 0, 0); + will-change: opacity, transform; +} +.wpfade_transform_backwards-enter-active, +.wpfade_transform_backwards-leave-active { + --transitionTime: 0.2s; + transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase); +} +.wpfade_transform_backwards-enter { + opacity: 0; + transform: translateX(-50%) translate3d(0, 0, 0); + will-change: opacity, transform; +} +.wpfade_transform_backwards-leave-to { + opacity: 0; + transform: translateX(50%) translate3d(0, 0, 0); + will-change: opacity, transform; +} +.fabfade-enter-active, +.fabfade-leave-active { + transition: transform 0.1s var(--appleEase), opacity 0.1s var(--appleEase); +} +.fabfade-enter, +.fabfade-leave-to { + opacity: 0; + transform: scale(0.5); +} +.fsModeSwitch-enter-active, +.fsModeSwitch-leave-active { + transition: transform 1s var(--appleEase), opacity 1s var(--appleEase); +} +.fsModeSwitch-enter, +.fsModeSwitch-leave-to { + transform: scale(1.1); + opacity: 0; +} +.drawertransition-enter-active, +.drawertransition-leave-active { + transition: right 0.25s var(--appleEase); +} +.drawertransition-enter, +.drawertransition-leave-to { + right: -300px; +} +:root { + --gfx-closeBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjM2LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PmN2D9EAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEtJREFUGJWNkMENwDAIA1FGY/8hkn8HOAqPfBsFKvz1yZYtbqwAlUIB6saUAH2NJ4MvL4PLgK/x13LAGTSqEaVa1a0x7XvcmI3D1wbntaRbB2haYwAAAABJRU5ErkJggg=='); + --gfx-maxBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6NTgtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjU4LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6NTgtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PlwQMBUAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFBJREFUGJXV0LERgCAUBNHVsQADM3uwWWbojQIs47MEGhgAuS/eSw41qeFYqGlRA7iAm74DKLyrfRABoLrOgq+/hJXngi71BOoGZKBMHqhAbtMvQzel9pREAAAAAElFTkSuQmCC'); + --gfx-restoreBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjI0LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PqiFCFwAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHNJREFUGJWtkKEOwlAMRc+QM5AwQYJFoPjZCWb2YRPIaeRTLwfTLQs0UxzX3tumtxCog78UdVTbZmM8AmsdXIABeKH2ak221dDuamnUCjyA+WtbB0zAGXgT0ycSFk31kBky/moUeBLpbsl91wi6Nnbfs/g+7XOQq6ifjfkAAAAASUVORK5CYII='); + --gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMi0xN1QxMzowMDozMloiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NWQwZWRiMC1mZDAwLWI2NGYtOWVmYi1hMmI0NTg3MDVhOGEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMzAwMWUxYS0yOTE5LWU0NDktYjk0Yy1jMjEyMjQ4YTlmOGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHN0RXZ0OndoZW49IjIwMjAtMDItMTdUMTM6MDA6MzJaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLupKEiIHBob3Rvc2hvcDpMYXllclRleHQ9Iu6koSIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwvRXAAAABdJREFUGNNj/P//PwMxgHGIKPw/XDwDAOr1HuzlELLnAAAAAElFTkSuQmCC'); +} +#apple-music-video-container { + background: black; + position: absolute; + float: left; + display: none; + width: 100%; + height: calc(100% - var(--chromeHeight)); + bottom: 0; + z-index: 100000; +} +#apple-music-video-player { + position: absolute; + top: 50%; + width: 100%; + transform: translate(0, -50%); + height: 100%; +} +#app.twopanel #apple-music-video-container { + top: var(--chromeHeight1); + bottom: unset; +} +#apple-music-video-player-controls { + position: absolute; + z-index: 100001; + float: left; + width: 100%; + height: 100%; +} +#apple-music-video-player-controls #player-exit { + position: absolute; + z-index: 100001; + float: left; + width: 100%; + margin: 10px; + cursor: pointer; +} +#apple-music-video-player-controls #player-pip { + position: absolute; + z-index: 100001; + width: 32px; + height: 32px; + margin: 10px; + right: 50px; + border-radius: 100%; + background: rgba(255, 255, 255, 0.5); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} +#apple-music-video-player-controls #player-pip > svg { + width: 50%; +} +#apple-music-video-player-controls #player-fullscreen { + position: absolute; + z-index: 100001; + width: 32px; + height: 32px; + margin: 10px; + right: 0px; + border-radius: 100%; + background: rgba(255, 255, 255, 0.5); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} +#apple-music-video-player-controls #player-fullscreen > svg { + width: 70%; +} +#apple-music-video-player-controls:hover { + opacity: 1; +} +img[src=""] { + text-indent: -10000px; +} +div#captions { + font-size: 1.2rem; + position: absolute; + top: 85%; + text-align: center; + width: auto; + align-self: center; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, 0.6); + color: yellow; + white-space: pre-line; + font-family: 'Inter', 'Noto Sans JP', 'Source Han Sans SC', 'Source Han Sans HK', 'Source Han Sans SC', 'Source Han Sans HK', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif; +} +[v-cloak] { + display: none !important; +} +.item-navigate:hover { + text-decoration: underline; + cursor: pointer; +} +.title-browse-sp { + width: 100%; + text-align: left; + margin-bottom: 2px; +} +.bold { + font-weight: bold; +} +.semibold { + font-weight: 500; +} +.madeforyou-body { + margin-top: 15px; +} +.albums-square-container { + text-align: center; +} +body.no-gpu { + --ciderShadow-Generic: var(--mediaItemShadow); + --mediaItemShadow-Shadow: var(--mediaItemShadow); + --mediaItemShadow-ShadowSubtle: var(--mediaItemShadow); +} +body.no-gpu .bg-artwork-container { + display: none; + animation: none !important; +} +body.no-gpu .bg-artwork-container .bg-artwork { + animation: none !important; +} +body.no-gpu #navigation-bar { + backdrop-filter: unset; + mix-blend-mode: unset; + background: #000000; +} +body.no-gpu .addtoplaylist-panel .modal-window { + background: #121212; + backdrop-filter: unset; +} +body.no-gpu .app-drawer { + backdrop-filter: unset; + mix-blend-mode: unset; + background: #1c1c1c; +} +body.no-gpu .wpfade-enter-active, +body.no-gpu .wpfade-leave-active { + transition: opacity 0s var(--appleEase); +} +body.no-gpu .wpfade-enter, +body.no-gpu .wpfade-leave-to { + opacity: 0; +} +body.no-gpu .drawertransition-enter-active, +body.no-gpu .drawertransition-leave-active { + transition: right 0s var(--appleEase); +} +body.no-gpu .drawertransition-enter, +body.no-gpu .drawertransition-leave-to { + right: -300px; +} +body.no-gpu .lyric-line:hover::after { + display: none; +} +.qrimg { + width: -webkit-fill-available; + max-block-size: -webkit-fill-available; + object-fit: contain; + overflow-x: hidden; + overflow-y: hidden; +} +.equalizer-panel .modal-window { + height: 330px; + max-height: 330px; + width: 740px; + max-width: 800px; + overflow: hidden; +} +.equalizer-panel .modal-window .info-header { + padding-left: 12px; +} +.equalizer-panel .modal-window .visual-container { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} +.equalizer-panel .modal-window .modal-header { + padding: 16px; + position: relative; + overflow: hidden; +} +.equalizer-panel .modal-window .modal-header .modal-title { + text-align: center; +} +.equalizer-panel .modal-window .modal-header .close-btn { + width: 50px; + height: 100%; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; +} +.equalizer-panel .modal-window .modal-header .close-btn:hover { + background-color: #c42b1c; +} +.equalizer-panel .modal-window .modal-content { + display: block; +} +.equalizer-panel .modal-window .modal-content .inputs-container { + margin-left: 8px; +} +.equalizer-panel .modal-window .modal-content .input-container { + display: inline-grid; + width: 54px; + justify-items: center; + font-size: 0.7em; +} +.equalizer-panel .modal-window .modal-content .input-container.mini { + display: inline-grid; + width: 43px; + justify-items: center; + font-size: 0.7em; +} +.equalizer-panel .modal-window .modal-content .freq-header { + margin-bottom: 2px; +} +.equalizer-panel .modal-window .modal-content .reset-button { + width: 50%; + margin-left: 25%; + text-align: center; +} +.equalizer-panel .modal-window .modal-content input.eq-slider { + -webkit-appearance: slider-vertical; + width: 5%; +} +.equalizer-panel .modal-window .modal-content input[type="number"] { + padding: unset; + width: 55px; +} +.equalizer-panel .modal-window .modal-content .header input.eq-slider { + -webkit-appearance: slider-vertical; + width: 5%; + opacity: 0; +} +.equalizer-panel .modal-window .modal-lowercontent { + padding: 16px; + background-color: var(--modalBackground); +} +body[platform='darwin'] #window-controls-container { + display: none; +} +body[platform='darwin'] .app-chrome .app-chrome-item > .app-mainmenu { + opacity: 0; + pointer-events: none; + -webkit-app-region: drag; +} +.percent { + display: inline-block; + position: relative; +} +.percent::after { + position: relative; + right: 2em; + transition: all 0.05s ease-in-out; +} +.percent:hover::after, +.percent:focus-within::after { + right: 3.5em; +} +.percent::after { + content: '%'; +} +.spatialproperties-panel.modal-fullscreen { + flex-direction: column; +} +.cursor { + background: rgba(255, 255, 255, 0.5); + width: 16px; + height: 16px; + position: fixed; + z-index: 9999999999; + pointer-events: none; + border-radius: 100%; + box-shadow: 0px 0px 0px 2px #c8c8c8; + top: 0; + left: 0; + display: none; +} +body[platform="darwin"] html { + background: transparent!important; +} +body[platform="darwin"].notransparency::before { + display: none; +} +body[platform="darwin"] #app.simplebg { + background: transparent; +} +body[platform="darwin"] #app::before { + display: none; +} +body[platform="linux"] #window-controls-container { + display: none; +} +#app.compact .content-inner { + zoom: 0.95; +} +#app.compact .app-sidebar-content { + padding: 0px; +} +#app.compact .app-sidebar-content .app-sidebar-header-text { + padding: 6px 10px; + margin: 0px; +} +#app.compact .app-sidebar-content .app-sidebar-item { + display: flex; + width: 100%; + padding: 8px 12px; + font-size: 13px; + margin: 0px; + border: 1px solid transparent; + border-radius: 0px; + transition: unset; + transform: unset; +} +#app.compact .app-sidebar-content .app-sidebar-item:active { + background: var(--selected-click); +} +#app.compact .app-sidebar-content .app-sidebar-item::after { + display: none; +} +#app.compact .app-sidebar-content .app-sidebar-item.active { + background: var(--keyColor-disabled); +} +#app.compact .app-sidebar-content .sidebar-icon { + width: 14px; + height: 16px; + margin-right: 8px; +} +#app.compact .app-sidebar-content .folder-body { + border-radius: 0px; + padding: 0px; +} +@media (max-width: 951px) { + #app.compact #app-content { + zoom: 0.8; + } +} +@media (max-width: 951px) { + #app-content { + zoom: 0.8; + } +} +#app.twopanel { + --chromeHeight1: 42px; + --chromeHeight2: 76px; + --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2)); +} +#app.twopanel .app-chrome { + height: var(--chromeHeight1); +} +#app.twopanel .app-chrome .app-mainmenu { + margin-left: 10px; + width: 88px; +} +#app.twopanel .app-chrome.chrome-bottom { + height: var(--chromeHeight2); + box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25); +} +#app.twopanel .app-sidebar-footer--controls { + display: none !important; +} +#app.twopanel .app-chrome.chrome-bottom .app-playback-controls .actions { + align-self: center; +} +#app.twopanel .app-chrome.chrome-bottom .playback-button.play, +#app.twopanel .app-chrome.chrome-bottom .playback-button.pause { + width: 42px; + height: 42px; + background-color: rgba(200, 200, 200, 0.2); + border-radius: 50%; + margin: 6px; + box-shadow: 0px 0px 0px 2px var(--keyColor); +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center { + display: flex; + flex-direction: column; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-controls { + display: flex; + z-index: 1; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration { + position: relative; + width: 80%; + -webkit-app-region: no-drag; + height: 16px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress { + height: 16px; + position: absolute; + bottom: 4px; + left: 0px; + right: 4px; + background: transparent; + z-index: 0; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress .song-duration { + display: flex; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress .song-duration p { + font-weight: 400; + font-size: 10px; + height: 1.2em; + line-height: 1.3em; + overflow: hidden; + margin: 0 0 0 0.25em; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress:hover > input[type=range]::-webkit-slider-thumb { + opacity: 1; + transform: scale(1); + z-index: 1; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress input[type=range] { + appearance: none; + width: 100%; + height: 4px; + background-color: rgba(200, 200, 200, 0.1); + border-radius: 2px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress input[type=range]::-webkit-slider-thumb { + opacity: 0; + transform: scale(0.5); + -webkit-appearance: none; + appearance: none; + width: 12px; + height: 12px; + border-radius: 100%; + background: var(--keyColor); + cursor: default; + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left { + width: 30%; + justify-content: flex-start; + align-items: flex-start; + flex: 0 0 auto; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls { + width: 100%; + height: 100%; + max-width: 100%; + border: 0px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .artwork { + width: var(--chromeHeight2); + height: var(--chromeHeight2); + margin: 0px 6px 0px 0px; + box-shadow: unset; + border: 0px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .artwork .mediaitem-artwork, +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .artwork img { + border-radius: 0px; + box-shadow: unset; + border: 0px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info { + align-items: flex-start; + margin: 6px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info .song-name { + text-align: left; + font-size: 15px; + font-weight: initial; + width: 100%; + -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%); +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info .song-artist-album { + width: 100%; + -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%); +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info .audio-type { + margin: 0px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info .song-artist-album-content { + text-align: left; + font-size: 12px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--right { + width: 30%; + flex: 0 0 auto; +} +#app.twopanel .collection-page .top-fab { + bottom: 96px; +} diff --git a/src/renderer/style.less b/src/renderer/style.less index ba1f00f6..f0505165 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -558,14 +558,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track { .app-sidebar-notification { text-align: center; font-size: 12px; - min-height: 60px; + min-height: 36px; display: flex; justify-content: center; align-items: center; border-top: 1px solid rgb(200 200 200 / 15%); background: rgb(0 0 0 / 15%); flex-direction: column; - padding: 20px 0px; + padding: 10px 0px; &.libraryNotification { flex-direction: row; diff --git a/src/renderer/themes/sweetener.css b/src/renderer/themes/sweetener.css new file mode 100644 index 00000000..51e9f4e3 --- /dev/null +++ b/src/renderer/themes/sweetener.css @@ -0,0 +1,40 @@ +.menu-panel .menu-panel-body { + background-color: rgba(30, 30, 30, 0.45); + backdrop-filter: blur(32px) saturate(180%); + animation: menuIn 0.1s var(--appleEase); +} +@keyframes menuIn { + 0% { + opacity: 0; + transform: translateY(-10px) translate3d(0, 0, 0); + background: #1e1e1e; + } + 100% { + opacity: 1; + transform: translateY(0); + background: rgba(30, 30, 30, 0.45); + } +} +.cd-mediaitem-square:not(.mediaitem-card) { + transition: transform 0.2s var(--appleEase); + transition-delay: 0.1s; + padding: 12px; + height: 250px; +} +.cd-mediaitem-square:not(.mediaitem-card) .artwork-container, +.cd-mediaitem-square:not(.mediaitem-card) .info-rect { + transition: transform 0.22s var(--appleEase); + transition-delay: 0.05s; +} +.cd-mediaitem-square:not(.mediaitem-card):hover .artwork-container { + transform: scale(1.1); + transition: transform 0.1s var(--appleEase); + transition-delay: 0s; + transform-origin: center; +} +.cd-mediaitem-square:not(.mediaitem-card):hover .info-rect { + z-index: 1; + transition: transform 0.1s var(--appleEase); + transition-delay: 0s; + transform: translateY(8px) translate3d(0, 0, 0); +} diff --git a/src/renderer/themes/sweetener.less b/src/renderer/themes/sweetener.less index f497420b..681f41d3 100644 --- a/src/renderer/themes/sweetener.less +++ b/src/renderer/themes/sweetener.less @@ -47,7 +47,7 @@ &:hover { .artwork-container { - transform : scale(1.1) translate3d(0,0,0); + transform : scale(1.1); transition : transform .1s var(--appleEase); transition-delay: 0s; transform-origin: center; diff --git a/src/renderer/views/components/animatedartwork-view.ejs b/src/renderer/views/components/animatedartwork-view.ejs index cf135217..ef091ee3 100644 --- a/src/renderer/views/components/animatedartwork-view.ejs +++ b/src/renderer/views/components/animatedartwork-view.ejs @@ -57,6 +57,7 @@ platformInfo: {requiresCDMAttachOnStart: !0, maxSecurityLevel: d, keySystemConfig: h}, appData: {serviceName: "Apple Music"} } + this.hls.attachMedia(this.$refs.video); this.hls.loadSource(this.video); let u = this.hls; @@ -80,8 +81,8 @@ quality = qualities[qualities.length - 1].level } } - - this.hls.loadLevel = parseInt( quality || 1);},200) + try{ + this.hls.loadLevel = parseInt( quality || 1);} catch(e){}},200) } }) } diff --git a/src/renderer/views/components/equalizer.ejs b/src/renderer/views/components/equalizer.ejs index d9ab684e..e163ee32 100644 --- a/src/renderer/views/components/equalizer.ejs +++ b/src/renderer/views/components/equalizer.ejs @@ -295,11 +295,19 @@ }, changeVibrantBass() { app.cfg.audio.maikiwiAudio.vibrantBass.multiplier = app.cfg.audio.equalizer.vibrantBass / 10 - CiderAudio.hierarchical_loading(); - if (app.cfg.audio.equalizer.vibrantBass != 0) { - for (var i = 0; i < 21; i++) { + if (app.cfg.audio.equalizer.vibrantBass !== 0) { + try { + for (var i = 0; i < 21; i++) { CiderAudio.audioNodes.vibrantbassNode[i].gain.value = app.cfg.audio.maikiwiAudio.vibrantBass.gain[i] * (app.cfg.audio.equalizer.vibrantBass / 10); - }} + }} + catch(e) { + CiderAudio.hierarchical_loading(); + } + } + + else { + CiderAudio.hierarchical_loading(); + } }, changeMix() { for (var i = 0; i < 10; i++) { diff --git a/src/renderer/views/components/hello-world.ejs b/src/renderer/views/components/hello-world.ejs index 6fa4e1f7..acbac471 100644 --- a/src/renderer/views/components/hello-world.ejs +++ b/src/renderer/views/components/hello-world.ejs @@ -3,7 +3,7 @@ @@ -125,5 +178,33 @@ } }, + ciderPPEStandard: function () { + app.cfg.audio.maikiwiAudio.ciderPPE_value = 0.5; + let LLPW_GAIN = [0.38, -1.81, -0.23, -0.51, 0.4, 0.84, 0.36, -0.34, 0.27, -1.2, -0.42, -0.67, 0.81, 1.31, -0.71, 0.68, -1.04, 0.79, -0.73, -1.33, 1.17, 0.57, 0.35, 6.33]; + for (let i = 0; i < 24; i++) { + CiderAudio.audioNodes.llpw[i].gain.value = LLPW_GAIN[i]; + } + }, + ciderPPEClarity: function () { + app.cfg.audio.maikiwiAudio.ciderPPE_value = 0.55; + let c_LLPW_GAIN = [-0.11, 0.27, -0.8, 0.57, 1.84, -0.38, 0.47, -1.56, 0.83, 1.58, -1.79, -0.45, 0.48, 1.22, -1.58, -1.59, -2.03, 2.56, -2.2, -2.48, 4.75, 10.5, 1.43, 3.76]; + for (let i = 0; i < 24; i++) { + CiderAudio.audioNodes.llpw[i].gain.value = LLPW_GAIN[i]; + } + }, + analogWarmthSmooth: function () { + app.cfg.audio.maikiwiAudio.analogWarmth_value = 1.25 + let WARMTH_GAIN = [-4.81, 0.74, 0.55, -0.84, -1.52, 0.84, 0.66, -0.29, 0.29, 0.94, 1.67, 1.62, -0.53, -0.81, -4.98, 1.43, 0.86, 1.13, -1.06, -0.95, -1.13, 1.78, -3.86]; + for (let i = 0; i < 23; i++) { + CiderAudio.audioNodes.analogWarmth[i].gain.value = WARMTH_GAIN[i] * 1.25; + } + }, + analogWarmthWarm: function () { + app.cfg.audio.maikiwiAudio.analogWarmth_value = 1.75 + let WARMTH_GAIN = [-4.81, 0.74, 0.55, -0.84, -1.52, 0.84, 0.66, -0.29, 0.29, 0.94, 1.67, 1.62, -0.53, -0.81, -4.98, 1.43, 0.86, 1.13, -1.06, -0.95, -1.13, 1.78, -3.86]; + for (let i = 0; i < 23; i++) { + CiderAudio.audioNodes.analogWarmth[i].gain.value = WARMTH_GAIN[i] * 1.75; + } + } }}) \ No newline at end of file diff --git a/src/renderer/views/pages/plugin-renderer.ejs b/src/renderer/views/pages/plugin-renderer.ejs new file mode 100644 index 00000000..beaa936a --- /dev/null +++ b/src/renderer/views/pages/plugin-renderer.ejs @@ -0,0 +1,22 @@ + \ No newline at end of file