get real. (#1321)
* test * fix multiroom * attempt for fix rare cast bug * changes for local files: read below * added pouchdb-node * moved all logic for local files to src/main/providers/local * added new local library section on sidebar * removed dupe * added caching headers * fix * add path menu to settings-window * fix mxm for local * some test * some fix * clear this * clear log * add playlist folder class * sometest * fix * Auto focus search bar * use object instead of array for albums (#1219) * feat: 🌐 Update French language (#1218) * add pagination for library songs * Add 'go to' page * Make playlist search icon use hero color * Merge pull request #1 from vapormusic/patch-1 dont populate out-of-display doms * both infinite and paging * Add color to search button background * Add shadow to follow button * im dumb sorry * Add brightness effect of search button * add some delay to scroll v-observe-visibility * some multiroom fixes * somefixes * [Audio] Fix VBass & Added COCS * [Audio] COCS revision * some fix * fix m1 mac * fix m1 build * some fix regarding audiocontext * [Audio] Fix #1207 (discussions) Eliminates audio stuttering even when AudioContext is enabled. Make lyrics account for the extra latency introduced by Audio Lab. * idk what I did * apparently this no worki * should default to 0 * expose bitrate of localfiles * [Audio] Added CAP & Normalization behavior for local files * smh musickit * Expose more local files metadata + fix norm error * pokemon gotta catch them all * maikiwi is a clown confirmed * pokemon gotta catch them all v2 * pokemon gotta catch them all v5 * Update zh_TW.json (#1229) Fix errors, update zh-TW translation. * Change No Lyrics Message in Full Screen Player (#1210) * Modify term.noLyrics text in 5 files * Minor change in 3 files * Colorize sponsor buttons in about page Co-authored-by: ctaetcsh <48845980+ctaetcsh@users.noreply.github.com> * max size of more info panel dynamic * Add twitter social button for some developers in about page (#1232) * Big Chungus Window settings (#1230) * Initial Changes * I suposse this is the last * cryptofyre * Documentation * Revert "Big Chungus Window settings (#1230)" (#1233) This reverts commite133b2c38b. * test * Just changed it and gonna leave for debugging * reimpe133b2c, adjustments for macOS * resolve #1 * copied files * readded strings to en_US * adjustments to settings sidebar collapse * add multiplex * Update version.sh * Update style.css * dont break pls thx * swag * I forgot that (#1239) * Update zh_TW.json (#1236) Update TW language. * Update zh_CN.json (#1240) * because I can * Fix cider team buttons in about page * Update style.less * Float right looks better * support custom port via optional CIDER_PORT var * Scan Local Files now 46 times faster * Update .gitignore * cleanups * remove console time (1s/1600 tracks) * fix m1 * sometest * Update build-macos.yml * Fix absolutely unacceptable punctuation error (#1249) * ok * pray * revert mxm back to local * Update zh_CN.json (#1242) * Update de_DE.json (#1246) * Musixmatch fix (thx plank ily) * whoops * yes * whoops v2 * bump to e18.3.5 * don't give the lyric api id if local files * Update afterPack.js * ukie * Update afterPack.js * Update afterPack.js * how the fuck did this not throw an error * fix stupid svg smh * new mediaitem scaling method * added Maximum Element Scale * mediaitem square artwork res now adapts to window size * will not affect high dpi * fix now playing artwork * fix album genre names before: gets genre from 1st track now: gets genre from album data * clamped element scale to 1.5x * added caching for auth * adjustment to artist page * changed to v-show for list item vis * Bring back mxm lyrics (Fully tested) * fix mmx translation * fix settings view * remove useless args & nonexistent funcs * fix div hell * fixed missing end tag for local playlist * fix divs * Fix cider list * the amount of brain cells that I have lost because of mxm trans * WIP language filter * it was fun while it lasted, goodbye MXM languages * MXM changes * 4am code moments * move logic * fix lyrics translation & allow other lang * default store.ts mxm trans to be disabled * this is why you dont code at 4am * and this is why you should test your code before pushing * added Romanized langs to mxm trans * love how previous MXM changes are in vain till now * stop. uploading. this. * NEVER. CODE. AT. FOUR. AYE. EM. AGAIN. * test * Revert "test" This reverts commit256d06bbcc. * did a funny * did another funny * yes * add prime symbol to apostrophe * Don't do anything if res != 200 * Recursive Folder Search in Cider Utils * 4am code moment * fix function (force recompile utils) * did a funny there * I need sleep * Update zh_CN.json (#1265) This is a big work * Update zh_TW.json (#1260) Update TW language. * performant logging is enabled by default * test getting rid of lyriccurrenttime * set timeout can go away now * boops forgot this * mxm moms * mxm moms * Revert "mxm moms" This reverts commit51fc09280e. * README download link fix * Update vueapp.js * Fix settings menu (#1271) * remove unused pages * profile page (for search for now) * lol * updated recordLabel with i18n and root usage * Local Lossless Icon and more - add Cider-profile boilerplate - add local lossless icon -add hover for PPE and lossless Co-authored-by: Core <coredev-uk@users.noreply.github.com> * no coding at 4am * fix units for local lossless badge * fix units for local lossless badge * remove CAP icon for local files, cuz unsupported * mpris overhaul * Fix seeking in mpris * changed am section on sidebar to v-show allowing css manipulation * added class for css * new effect when entering fullscreen lyrics * fixes text wrapping on tab text * added is-album * linux is cooollll * Lyrics API migration * Update musickit to use api mirror by default * add div for app-playback-buttons * Add spatialization icon (#1276) * Add spatialization icon * that never happened * add checkmode func to webremote * whoops sorry * Updated config.yml * mogus * fix string matching * may Maikiwi bless your CI * MKV3 red * Go touch grass; * this was so unreadable lmao * add logic for showing spatialization icon * add space in lossless icon * Remove dead fallback token, add error log if capi call fails (#1289) I tested and the fallback key you are using is dead. 401s. Unusable. * Fix #1282 * Fix #1237 * fix default CAP * someone played with translation code * lmao yaz why * stop polluting my logs you lil POST * I18n (#1293) * Update es_ES * I18N * idk this only breaking now * added framework for c2 parity * fixes * Fix volume bar on miniplayer (#1297) * Update stale-issues.yml * removed loading bar, testing without hlscider * overwrite restriction * allow listennow "more like" nav to work * garbage gone * fix for primary-content linking * Update README.md Add QQ group info * Revert back to music metadata * gimp v2 * remove local files as experiment * just to be safe * world is now a better place * meltdown avoided * meltdown avoided * Revert "meltdown avoided" This reverts commit38e6f1b7fa. * Revert "meltdown avoided" This reverts commit54cc6656d6. * Revert "world is now a better place" This reverts commitc019bf9c63. * remove quasar * add some shiz (#1313) * Update ru_RU.json keeping russian lang actual * ok * Add gradient to lyric-footer * *Commit en español Ñ (#1304) * i hate my life (#1307) * world is now a better place * meltdown avoided * meltdown avoided * stylize new listen now childs * full scale artwork, finally * dynamic width for search categories * hd all album work * Update afterPack.js * force hq quality * oops * attempt to fix * misc cleanup * why what * what was i thinking * fix duplicated text in listen now childs * Paginate/infinite scroll for albums, playlists (#1234) * Infinite scroll, pagination to album, playlists * move pagination below tracks * Make page size configurable * remove renderer * Mitigate songs / album slow app issue. * add ratings, library change to web remote (#1285) * Add compact artist header option (#1308) * Support compact artist header (optional) * Add required term Co-authored-by: h0ckerman <35598335+h0ckerman@users.noreply.github.com> Co-authored-by: vapormusic <vietanhfat@gmail.com> Co-authored-by: Monochromish <chillygamer7@gmail.com> Co-authored-by: Gabriel Davila <56521591+mefsaal@users.noreply.github.com> Co-authored-by: Core <64542347+coredev-uk@users.noreply.github.com> Co-authored-by: Maikiwi <stella@mai.kiwi> Co-authored-by: yazninja <yazlesean@gmail.com> Co-authored-by: booploops <49113086+booploops@users.noreply.github.com> Co-authored-by: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Co-authored-by: Pedro Galhardo <pgalhardo@icloud.com> * obama (#1314) * Update ru_RU.json keeping russian lang actual * ok * Add gradient to lyric-footer * *Commit en español Ñ (#1304) * i hate my life (#1307) * world is now a better place * meltdown avoided * meltdown avoided * stylize new listen now childs * full scale artwork, finally * dynamic width for search categories * hd all album work * Update afterPack.js * force hq quality * oops * attempt to fix * misc cleanup * why what * what was i thinking * fix duplicated text in listen now childs * Paginate/infinite scroll for albums, playlists (#1234) * Infinite scroll, pagination to album, playlists * move pagination below tracks * Make page size configurable * remove renderer * Mitigate songs / album slow app issue. * add ratings, library change to web remote (#1285) * Add compact artist header option (#1308) * Support compact artist header (optional) * Add required term * improve pagination styling Co-authored-by: h0ckerman <35598335+h0ckerman@users.noreply.github.com> Co-authored-by: vapormusic <vietanhfat@gmail.com> Co-authored-by: Monochromish <chillygamer7@gmail.com> Co-authored-by: Gabriel Davila <56521591+mefsaal@users.noreply.github.com> Co-authored-by: Core <64542347+coredev-uk@users.noreply.github.com> Co-authored-by: Maikiwi <stella@mai.kiwi> Co-authored-by: yazninja <yazlesean@gmail.com> Co-authored-by: booploops <49113086+booploops@users.noreply.github.com> Co-authored-by: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Co-authored-by: Pedro Galhardo <pgalhardo@icloud.com> Co-authored-by: yazninja <71800112+yazninja@users.noreply.github.com> * obama episode 2. (#1317) * Update ru_RU.json keeping russian lang actual * ok * Add gradient to lyric-footer * *Commit en español Ñ (#1304) * i hate my life (#1307) * world is now a better place * meltdown avoided * meltdown avoided * stylize new listen now childs * full scale artwork, finally * dynamic width for search categories * hd all album work * Update afterPack.js * force hq quality * oops * attempt to fix * misc cleanup * why what * what was i thinking * fix duplicated text in listen now childs * Paginate/infinite scroll for albums, playlists (#1234) * Infinite scroll, pagination to album, playlists * move pagination below tracks * Make page size configurable * remove renderer * Mitigate songs / album slow app issue. * add ratings, library change to web remote (#1285) * Add compact artist header option (#1308) * Support compact artist header (optional) * Add required term * improve pagination styling * Disable Fullscreen view when artist/album name is clicked. (#1315) * Disable Fullscreen view when artist/album name is clicked. idk why this change didn't exist * Seperate dash from album name * Replace `$root.showSearch()` with `app.appRoute('search')` `$root.showSearch()` prevents going back to previous page from sidebar. * Fix Anim (#1316) Co-authored-by: h0ckerman <35598335+h0ckerman@users.noreply.github.com> Co-authored-by: vapormusic <vietanhfat@gmail.com> Co-authored-by: Monochromish <chillygamer7@gmail.com> Co-authored-by: Gabriel Davila <56521591+mefsaal@users.noreply.github.com> Co-authored-by: Core <64542347+coredev-uk@users.noreply.github.com> Co-authored-by: Maikiwi <stella@mai.kiwi> Co-authored-by: yazninja <yazlesean@gmail.com> Co-authored-by: booploops <49113086+booploops@users.noreply.github.com> Co-authored-by: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Co-authored-by: Pedro Galhardo <pgalhardo@icloud.com> Co-authored-by: Monochromish <79590499+Monochromish@users.noreply.github.com> * re add that i guess. github is fucked. * aa (#1320) * Update ru_RU.json keeping russian lang actual * ok * Add gradient to lyric-footer * *Commit en español Ñ (#1304) * i hate my life (#1307) * world is now a better place * meltdown avoided * meltdown avoided * stylize new listen now childs * full scale artwork, finally * dynamic width for search categories * hd all album work * Update afterPack.js * force hq quality * oops * attempt to fix * misc cleanup * why what * what was i thinking * fix duplicated text in listen now childs * Paginate/infinite scroll for albums, playlists (#1234) * Infinite scroll, pagination to album, playlists * move pagination below tracks * Make page size configurable * remove renderer * Mitigate songs / album slow app issue. * add ratings, library change to web remote (#1285) * Add compact artist header option (#1308) * Support compact artist header (optional) * Add required term * improve pagination styling * Disable Fullscreen view when artist/album name is clicked. (#1315) * Disable Fullscreen view when artist/album name is clicked. idk why this change didn't exist * Seperate dash from album name * Replace `$root.showSearch()` with `app.appRoute('search')` `$root.showSearch()` prevents going back to previous page from sidebar. * Fix Anim (#1316) * make tracks tab active (#1318) * welp that wasn't it. * Thnks (#1319) * Thnks * i need sleep Co-authored-by: h0ckerman <35598335+h0ckerman@users.noreply.github.com> Co-authored-by: vapormusic <vietanhfat@gmail.com> Co-authored-by: Monochromish <chillygamer7@gmail.com> Co-authored-by: Gabriel Davila <56521591+mefsaal@users.noreply.github.com> Co-authored-by: Core <64542347+coredev-uk@users.noreply.github.com> Co-authored-by: Maikiwi <stella@mai.kiwi> Co-authored-by: yazninja <yazlesean@gmail.com> Co-authored-by: booploops <49113086+booploops@users.noreply.github.com> Co-authored-by: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Co-authored-by: Pedro Galhardo <pgalhardo@icloud.com> Co-authored-by: Monochromish <79590499+Monochromish@users.noreply.github.com> Co-authored-by: vapormusic <vietanhfat@gmail.com> Co-authored-by: booploops <49113086+booploops@users.noreply.github.com> Co-authored-by: yazninja <yazlesean@gmail.com> Co-authored-by: Pedro Galhardo <pedromgalhardo@tecnico.ulisboa.pt> Co-authored-by: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Co-authored-by: Erwan <24718500+ErwanGit@users.noreply.github.com> Co-authored-by: Monochromish <chillygamer7@gmail.com> Co-authored-by: maikirakiwi <stella@mai.kiwi> Co-authored-by: yazninja <71800112+yazninja@users.noreply.github.com> Co-authored-by: 宥叡 <46503943+jay900604@users.noreply.github.com> Co-authored-by: Nathan Ritchie <48845980+ctaetcsh@users.noreply.github.com> Co-authored-by: Monochromish <79590499+Monochromish@users.noreply.github.com> Co-authored-by: Gabriel Davila <56521591+mefsaal@users.noreply.github.com> Co-authored-by: Core <64542347+coredev-uk@users.noreply.github.com> Co-authored-by: 椎名アヤネ <53814845+sakura0224@users.noreply.github.com> Co-authored-by: Jonathan Fenske <929220+jfenske89@users.noreply.github.com> Co-authored-by: UnbreakCode <unbreakcode@gmail.com> Co-authored-by: SoNothing <git@sonothing.com> Co-authored-by: Core <coredev-uk@users.noreply.github.com> Co-authored-by: Amaru8 <52407090+Amaru8@users.noreply.github.com> Co-authored-by: rlaphoenix <pragma.exe@gmail.com> Co-authored-by: h0ckerman <35598335+h0ckerman@users.noreply.github.com> Co-authored-by: Pedro Galhardo <pgalhardo@icloud.com>
This commit is contained in:
cryptofyre
GitHub
parent
57b2a86913
commit
c03f408ba5
157 changed files with 33489 additions and 10407 deletions
|
|
@ -239,6 +239,14 @@ input[type=range].md-slider::-webkit-slider-runnable-track {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1133px) and (max-width: 1233px) {
|
||||
.about-page {
|
||||
.row .col-auto {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.33333333%;
|
||||
|
|
|
|||
13
src/renderer/less/bootstrap.less
vendored
13
src/renderer/less/bootstrap.less
vendored
|
|
@ -2432,10 +2432,9 @@ fieldset:disabled .btn {
|
|||
.nav-pills .nav-link {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 50px;
|
||||
border-radius: 6px;
|
||||
color: #eee;
|
||||
-webkit-user-drag: none;
|
||||
// transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
|
||||
font-weight: 500;
|
||||
margin: 0px 4px;
|
||||
&:hover {
|
||||
|
|
@ -2447,7 +2446,7 @@ fieldset:disabled .btn {
|
|||
.nav-pills .show > .nav-link {
|
||||
color: #fff;
|
||||
background-color: var(--selected);
|
||||
outline:2px solid var(--keyColor);
|
||||
// outline:2px solid var(--keyColor);
|
||||
}
|
||||
|
||||
.nav-fill > .nav-link,
|
||||
|
|
@ -2643,6 +2642,14 @@ fieldset:disabled .btn {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1133px) and (max-width: 1233px) {
|
||||
.about-page {
|
||||
.row .col-auto {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
flex : 0 0 auto;
|
||||
width: 8.33333333%;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,11 @@
|
|||
margin : 0px;
|
||||
height : 100%;
|
||||
position : relative;
|
||||
white-space: nowrap;
|
||||
|
||||
._svg-icon {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&:before {
|
||||
--dist : 1px;
|
||||
|
|
@ -338,7 +343,9 @@
|
|||
|
||||
#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
|
||||
min-width: 110px;
|
||||
font-size: 0em;
|
||||
.sidebar-item-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
margin: 0px;
|
||||
|
|
@ -353,7 +360,9 @@
|
|||
|
||||
#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
|
||||
min-width: 60px;
|
||||
font-size: 0em;
|
||||
.sidebar-item-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
margin: 0px;
|
||||
|
|
|
|||
|
|
@ -162,6 +162,33 @@
|
|||
align-self: center;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
align-self: center;
|
||||
height: 32px;
|
||||
width:max-content;
|
||||
}
|
||||
|
||||
.page-btn img {
|
||||
height: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.md-ico-first {
|
||||
content: url('./assets/angles-left.svg');
|
||||
}
|
||||
|
||||
.md-ico-prev {
|
||||
content: url('./assets/chevron-left.svg');
|
||||
}
|
||||
|
||||
.md-ico-next {
|
||||
content: url('./assets/chevron-right.svg');
|
||||
}
|
||||
|
||||
.md-ico-last {
|
||||
content: url('./assets/angles-right.svg');
|
||||
}
|
||||
|
||||
.reload-btn {
|
||||
background: rgb(86 86 86 / 52%);
|
||||
border-radius: 100%;
|
||||
|
|
@ -398,6 +425,19 @@
|
|||
border-radius: var(--mediaItemRadius);
|
||||
position: relative;
|
||||
|
||||
.listitem-content {
|
||||
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);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.heart-icon {
|
||||
display: none;
|
||||
|
|
@ -431,6 +471,7 @@
|
|||
.mediaitem-artwork {
|
||||
border-radius: var(--mediaItemRadiusSmall);
|
||||
}
|
||||
|
||||
.overlay-play {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
|
|
@ -944,10 +985,11 @@
|
|||
|
||||
/* mediaitem-square */
|
||||
.cd-mediaitem-square {
|
||||
--transitionDuration: .5s;
|
||||
--scaleRate: 1.25;
|
||||
--scaleRateArtwork: 1;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
width: calc(160px * var(--windowRelativeScale));
|
||||
height: calc(200px * var(--windowRelativeScale));
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
|
|
@ -960,8 +1002,8 @@
|
|||
position: relative;
|
||||
|
||||
.artwork {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
height: calc(140px * var(--windowRelativeScale));
|
||||
width: calc(140px * var(--windowRelativeScale));
|
||||
background: blue;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
background: var(--artwork);
|
||||
|
|
@ -1042,15 +1084,32 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
width: calc(200px * var(--scaleRate));
|
||||
height: calc(200px * var(--scaleRate));
|
||||
// &:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
|
||||
// @media (min-width: 1460px) {
|
||||
// --scaleRate: 1.1;
|
||||
// --scaleRateArtwork: 0.9;
|
||||
// width: calc(200px * var(--scaleRate));
|
||||
// height: calc(200px * var(--scaleRate));
|
||||
|
||||
// .artwork-container > .artwork {
|
||||
// width: calc(190px * var(--scaleRateArtwork));
|
||||
// height: calc(190px * var(--scaleRateArtwork));
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media (min-width: 1550px) {
|
||||
// --scaleRate: 1.25;
|
||||
// --scaleRateArtwork: 1;
|
||||
// width: calc(200px * var(--scaleRate));
|
||||
// height: calc(200px * var(--scaleRate));
|
||||
|
||||
// .artwork-container > .artwork {
|
||||
// width: calc(190px * var(--scaleRateArtwork));
|
||||
// height: calc(190px * var(--scaleRateArtwork));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.artwork-container > .artwork {
|
||||
width: calc(190px * var(--scaleRateArtwork));
|
||||
height: calc(190px * var(--scaleRateArtwork));
|
||||
}
|
||||
}
|
||||
|
||||
.info-rect {
|
||||
width: 90%;
|
||||
|
|
@ -1099,23 +1158,39 @@
|
|||
}
|
||||
|
||||
&.mediaitem-video {
|
||||
--scaleRate: 1.25;
|
||||
--scaleRateArtwork: 1.25;
|
||||
height: 200px;
|
||||
width: 240px;
|
||||
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||
|
||||
.artwork {
|
||||
height: 120px;
|
||||
width: 212px;
|
||||
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
width: calc(240px * var(--scaleRate));
|
||||
height: calc(200px * var(--scaleRate));
|
||||
|
||||
.artwork-container > .artwork {
|
||||
width: calc(212px * var(--scaleRateArtwork));
|
||||
height: calc(120px * var(--scaleRateArtwork));
|
||||
&:not(.noscale) {
|
||||
@media (min-width: 1460px) {
|
||||
--scaleRate: 1.1;
|
||||
--scaleRateArtwork: 1.1;
|
||||
width: calc(240px * var(--scaleRate));
|
||||
height: calc(200px * var(--scaleRate));
|
||||
|
||||
.artwork-container > .artwork {
|
||||
width: calc(220px * var(--scaleRateArtwork));
|
||||
height: calc(123px * var(--scaleRateArtwork));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1550px) {
|
||||
--scaleRate: 1.25;
|
||||
--scaleRateArtwork: 1.25;
|
||||
width: calc(240px * var(--scaleRate));
|
||||
height: calc(200px * var(--scaleRate));
|
||||
|
||||
.artwork-container > .artwork {
|
||||
width: calc(220px * var(--scaleRateArtwork));
|
||||
height: calc(123px * var(--scaleRateArtwork));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1123,20 +1198,50 @@
|
|||
&.mediaitem-brick {
|
||||
height: 200px;
|
||||
width: 240px;
|
||||
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||
|
||||
.artwork {
|
||||
height: 123px;
|
||||
width: 220px;
|
||||
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||
}
|
||||
|
||||
&:not(.noscale) {
|
||||
@media (min-width: 1460px) {
|
||||
--scaleRate: 1.1;
|
||||
--scaleRateArtwork: 1.1;
|
||||
width: calc(240px * var(--scaleRate));
|
||||
height: calc(200px * var(--scaleRate));
|
||||
|
||||
.artwork-container > .artwork {
|
||||
width: calc(220px * var(--scaleRateArtwork));
|
||||
height: calc(123px * var(--scaleRateArtwork));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1550px) {
|
||||
--scaleRate: 1.25;
|
||||
--scaleRateArtwork: 1.25;
|
||||
width: calc(240px * var(--scaleRate));
|
||||
height: calc(200px * var(--scaleRate));
|
||||
|
||||
.artwork-container > .artwork {
|
||||
width: calc(220px * var(--scaleRateArtwork));
|
||||
height: calc(123px * var(--scaleRateArtwork));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mediaitem-small {
|
||||
width: 140px;
|
||||
height: 180px;
|
||||
width: calc(140px, var(--windowRelativeScale));
|
||||
height: calc(180px, var(--windowRelativeScale));
|
||||
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||
|
||||
.artwork {
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
height: calc(128px, var(--windowRelativeScale));
|
||||
width: calc(128px, var(--windowRelativeScale));
|
||||
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1149,6 +1254,7 @@
|
|||
position: relative;
|
||||
border-radius: calc(var(--mediaItemRadius) * 2);
|
||||
box-shadow: var(--mediaItemShadow-ShadowSubtle);
|
||||
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||
|
||||
.artwork {
|
||||
width: 230px;
|
||||
|
|
@ -1156,7 +1262,7 @@
|
|||
overflow: hidden;
|
||||
border-radius: 0px;
|
||||
margin: 0;
|
||||
|
||||
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear, filter 0.2s ease-in-out;
|
||||
.mediaitem-artwork {
|
||||
border-radius: 0px;
|
||||
|
||||
|
|
@ -1170,6 +1276,8 @@
|
|||
padding: 10px 10px 14px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
|
||||
&::before {
|
||||
background: var(--bgartwork);
|
||||
|
|
@ -1184,6 +1292,7 @@
|
|||
z-index: 0;
|
||||
opacity: 1;
|
||||
filter: brightness(0.5) blur(50px) saturate(180%);
|
||||
transition: filter 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1198,7 +1307,7 @@
|
|||
|
||||
& + .subtitle {
|
||||
max-height: none !important;
|
||||
margin-top: -0.5em;
|
||||
// margin-top: -0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1228,14 +1337,34 @@
|
|||
border-radius: inherit;
|
||||
}
|
||||
|
||||
//@media (min-width: 1600px) {
|
||||
// width: calc(230px * 1.25);
|
||||
// height: calc(298px * 1.25);
|
||||
// .artwork-container>.artwork {
|
||||
// width: calc(230px * 1.25);
|
||||
// height: calc(230px * 1.25);
|
||||
// }
|
||||
//}
|
||||
&:hover {
|
||||
.artwork{
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
.info-rect-card::before {
|
||||
filter: brightness(0.3) blur(50px) saturate(180%);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.noscale) {
|
||||
@media (min-width: 1200px) {
|
||||
width: calc(230px * 1.1);
|
||||
height: calc(298px * 1.1);
|
||||
.artwork-container > .artwork {
|
||||
width: calc(230px * 1.1);
|
||||
height: calc(230px * 1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
width: calc(230px * 1.25);
|
||||
height: calc(298px * 1.25);
|
||||
.artwork-container > .artwork {
|
||||
width: calc(230px * 1.25);
|
||||
height: calc(230px * 1.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1776,7 +1905,7 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
align-items: center;
|
||||
color: white;
|
||||
|
||||
> svg {
|
||||
> ._svg-icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
pointer-events: none;
|
||||
|
|
@ -1967,6 +2096,7 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
flex: 0 0 32px;
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
|
||||
&:hover {
|
||||
background: var(--selected);
|
||||
|
|
@ -2071,107 +2201,116 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
}
|
||||
|
||||
// fancy pills
|
||||
.nav-pills {
|
||||
position: relative;
|
||||
|
||||
.nav-link {
|
||||
transition: transform .3s var(--appleEase);
|
||||
.fancy-pills {
|
||||
.nav-pills {
|
||||
position: relative;
|
||||
|
||||
|
||||
&:after {
|
||||
--dist: 1px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: var(--dist);
|
||||
bottom: var(--dist);
|
||||
left: var(--dist);
|
||||
right: var(--dist);
|
||||
// width : 100%;
|
||||
// height : 100%;
|
||||
|
||||
.nav-link {
|
||||
transition: transform .3s var(--appleEase);
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 50px;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: background-color .5s var(--appleEase), opacity 0.25s var(--appleEase), border-radius .32s var(--appleEase);
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
outline: none;
|
||||
transform: scale(1.1);
|
||||
// background: #eee;
|
||||
background: transparent;
|
||||
color: #333;
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
background-color: #eee;
|
||||
transition: background-color .25s var(--appleEase),
|
||||
border-radius .25s var(--appleEase),
|
||||
color .0s var(--appleEase),
|
||||
opacity 0.0s var(--appleEase);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
outline: none;
|
||||
transform: scale(1.1);
|
||||
// background: #eee;
|
||||
background: transparent;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.nav-link.active {
|
||||
outline: none;
|
||||
transform: scale(1.0);
|
||||
background: transparent;
|
||||
color: #eee;
|
||||
transform: scale(1.0);
|
||||
|
||||
-webkit-user-drag: none;
|
||||
font-weight: 500;
|
||||
margin: 0px 4px;
|
||||
|
||||
|
||||
&:after {
|
||||
background: rgb(200 200 200 / 15%);
|
||||
opacity: 1;
|
||||
transition: color 0s;
|
||||
// border-radius: 5px;
|
||||
--dist: 4px;
|
||||
--dist: 1px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: var(--dist);
|
||||
bottom: var(--dist);
|
||||
left: var(--dist);
|
||||
right: var(--dist);
|
||||
// width : 100%;
|
||||
// height : 100%;
|
||||
background-color: transparent;
|
||||
border-radius: 50px;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: background-color .5s var(--appleEase), opacity 0.25s var(--appleEase), border-radius .32s var(--appleEase);
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:hover {
|
||||
outline: none;
|
||||
transform: scale(1.1);
|
||||
z-index: 1;
|
||||
// background: #eee;
|
||||
background: transparent;
|
||||
color: #333;
|
||||
|
||||
|
||||
&:after {
|
||||
background: #eee;
|
||||
border-radius: inherit;
|
||||
--dist: 1px;
|
||||
opacity: 1;
|
||||
background-color: #eee;
|
||||
transition: background-color .25s var(--appleEase),
|
||||
border-radius .25s var(--appleEase),
|
||||
color .0s var(--appleEase),
|
||||
opacity 0.0s var(--appleEase);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
outline: none;
|
||||
transform: scale(1.1);
|
||||
// background: #eee;
|
||||
background: transparent;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.nav-link.active {
|
||||
outline: none;
|
||||
transform: scale(1.0);
|
||||
background: transparent;
|
||||
color: #eee;
|
||||
transform: scale(1.0);
|
||||
|
||||
&:after {
|
||||
background: rgb(200 200 200 / 15%);
|
||||
opacity: 1;
|
||||
transition: color 0s;
|
||||
// border-radius: 5px;
|
||||
--dist: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
z-index: 1;
|
||||
color: #333;
|
||||
|
||||
&:after {
|
||||
background: #eee;
|
||||
border-radius: inherit;
|
||||
--dist: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgb(200 200 200 / 10%);
|
||||
border-radius: 50px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgb(200 200 200 / 10%);
|
||||
border-radius: 50px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2242,4 +2381,25 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listennow-chip.circle {
|
||||
border-radius: 50%;
|
||||
div {
|
||||
border-radius: 50%;
|
||||
}
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 16px;
|
||||
.md-input-number{
|
||||
min-width: 12em;
|
||||
}
|
||||
}
|
||||
604
src/renderer/less/fullscreen.less
Normal file
604
src/renderer/less/fullscreen.less
Normal file
|
|
@ -0,0 +1,604 @@
|
|||
.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;
|
||||
--chromeHeight1: 70px;
|
||||
|
||||
.app-content-container {
|
||||
width:100%;
|
||||
height:100%;
|
||||
#app-content {
|
||||
width:100%;
|
||||
height:100%;
|
||||
|
||||
.fs-search {
|
||||
|
||||
.search-input--icon {
|
||||
width: 4em;
|
||||
background-size: 40%;
|
||||
background-position: center;
|
||||
}
|
||||
input {
|
||||
padding-left: 2em;
|
||||
font-size: 2em;
|
||||
border-radius: var(--mediaItemRadius)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fs-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: var(--chromeHeight1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
|
||||
.top-nav-group {
|
||||
background : #1e1e1e99;
|
||||
border : 1px solid lighten(@baseColor, 8);
|
||||
border-radius: 12px;
|
||||
display : flex;
|
||||
height : 55px;
|
||||
width: 90%;
|
||||
backdrop-filter: var(--glassFilter);
|
||||
|
||||
|
||||
.app-sidebar-item {
|
||||
background-color: #1e1e1e00;
|
||||
border-radius : 10px !important;
|
||||
border : 0px;
|
||||
min-width : 120px;
|
||||
padding : 6px;
|
||||
justify-content : center;
|
||||
align-items : center;
|
||||
margin : 0px;
|
||||
height : 100%;
|
||||
position : relative;
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
|
||||
&:before {
|
||||
--dist : 1px;
|
||||
content : '';
|
||||
position : absolute;
|
||||
top : var(--dist);
|
||||
left : var(--dist);
|
||||
right : var(--dist);
|
||||
bottom : var(--dist);
|
||||
background-color: #fff;
|
||||
opacity : 0;
|
||||
border-radius : 10px;
|
||||
transform : scale(0.5);
|
||||
transition : transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
|
||||
&:before {
|
||||
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
|
||||
opacity : .1;
|
||||
transform : scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: transparent;
|
||||
|
||||
&:before {
|
||||
opacity : .2;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.md-btn-primary {
|
||||
box-shadow : 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
|
||||
background-color: lighten(@baseColor, @colorMixRate * 5);
|
||||
z-index : 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fs-row {
|
||||
flex-grow: 0.5;
|
||||
}
|
||||
|
||||
.playback-button--small.active {
|
||||
background-color: rgb(200 200 200 / 25%);
|
||||
}
|
||||
|
||||
.playback-button--small {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.right-col {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.bg-artwork-container {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1121px) {
|
||||
.display--large {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.display--large {
|
||||
display: flex;
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.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.70;
|
||||
background-image: url("./assets/feather/volume-2.svg");
|
||||
}
|
||||
|
||||
.volume-button--small:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.volume-button--small.active {
|
||||
background-image: url("./assets/feather/volume.svg");
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: rgb(50 50 50);
|
||||
cursor: default;
|
||||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
transition: all var(--appleTransition);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:hover {
|
||||
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:active {
|
||||
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bgArtworkMaterial {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bg-artwork-container {
|
||||
z-index: unset;
|
||||
}
|
||||
|
||||
.bg-artwork-container .bg-artwork {
|
||||
filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.lyrics-col {
|
||||
|
||||
height: 62vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 80%;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
|
||||
.no-lyrics {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lyric-line {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.queue-col {
|
||||
|
||||
width: 60vh;
|
||||
height: 62vh;
|
||||
|
||||
.queue-title {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.queue-panel > * {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-toggles {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 15vh;
|
||||
height: 5vh;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.volume {
|
||||
background-image: url("./assets/feathers/volume.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.queue {
|
||||
background-image: url("./assets/list.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba(200, 200, 200, 0.7);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.artwork-col {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.artwork {
|
||||
width: 50vh;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.controls-parents {
|
||||
width: 50vh;
|
||||
}
|
||||
|
||||
.app-playback-controls {
|
||||
.song-artist, .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;
|
||||
|
||||
.song-name-normal {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
&.song-artist-marquee {
|
||||
> marquee {
|
||||
//margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
font-size: 0.875em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.song-name {
|
||||
width: unset !important;
|
||||
margin-top: 0.15vh;
|
||||
display: -webkit-box;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-playback-controls .playback-info {
|
||||
margin-top: 0.5vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.app-playback-controls .song-progress {
|
||||
@bgColor: transparent;
|
||||
//height: 16px;
|
||||
position: absolute;
|
||||
bottom: -1.5vh;
|
||||
left: 0px;
|
||||
background: @bgColor;
|
||||
|
||||
.song-duration p {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
height: 1.2em;
|
||||
line-height: 1.3em;
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 0.25em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> input[type=range] {
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: rgb(200 200 200 / 10%);
|
||||
border-radius: 2px;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
margin-top: 2vh;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cd-mediaitem-square {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square .artwork-container .artwork {
|
||||
box-shadow: var(--mediaItemShadow-Shadow);
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .title {
|
||||
font-size: 1.2em;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .subtitle {
|
||||
font-size: 1.1em;
|
||||
font-weight: 380;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .duration {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .artwork {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.cd-btn-seeall {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.home-page .well.artistfeed-well {
|
||||
height: 512px;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
font-size: 3em;
|
||||
height: 3em;
|
||||
padding-left: 0.2em;
|
||||
}
|
||||
|
||||
.grouping-container .grouping-btn {
|
||||
font-size: 1.3em;
|
||||
color: var(--textColor);
|
||||
background-color: var(--sidebarColor);
|
||||
font-weight: 600;
|
||||
padding: 32px;
|
||||
//box-shadow: var(--ciderShadow-Generic);
|
||||
}
|
||||
|
||||
.content-inner.playlist-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.playlist-page .playlist-display {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
flex:1;
|
||||
text-align: center;
|
||||
|
||||
.playlistInfo {
|
||||
>.row {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-controls {
|
||||
div {
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.playlist-page .mediaContainer {
|
||||
width: 30vh;
|
||||
height: 30vh;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
.playlist-page .playlist-display .playlistInfo .playlist-info {
|
||||
gap: 16px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.playlist-page .playlist-display .playlistInfo .playlist-hero {
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.artist-page .artist-header {
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.artist-page .artist-image {
|
||||
width: 20vh;
|
||||
height: 20vh;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.artist-page.animated .artist-header {
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.playlist-page .playlist-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
481
src/renderer/less/helpers.css
Normal file
481
src/renderer/less/helpers.css
Normal file
|
|
@ -0,0 +1,481 @@
|
|||
.notyf__toast {
|
||||
-webkit-app-region: no-drag;
|
||||
cursor: pointer;
|
||||
}
|
||||
.notyf-info {
|
||||
background: var(--keyColor);
|
||||
}
|
||||
.tooltip-inner {
|
||||
background: #2f2f2f;
|
||||
opacity: 1;
|
||||
border: 1px solid rgba(0, 0, 0, 0.35);
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.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 {
|
||||
overflow: hidden;
|
||||
}
|
||||
.spatialproperties-panel .modal-window:not(.airplay-modal) {
|
||||
height: 700px;
|
||||
max-height: 700px;
|
||||
width: 800px;
|
||||
max-width: 800px;
|
||||
}
|
||||
.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: 36px;
|
||||
height: 36px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border-radius: 50px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
}
|
||||
.spatialproperties-panel .modal-window .modal-header .close-btn:before {
|
||||
content: "";
|
||||
font-family: "codicon";
|
||||
color: var(--textColor);
|
||||
font-size: 20px;
|
||||
}
|
||||
.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: 36px;
|
||||
height: 36px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border-radius: 50px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
}
|
||||
.addtoplaylist-panel .modal-window .modal-header .close-btn:before {
|
||||
content: "";
|
||||
font-family: "codicon";
|
||||
color: var(--textColor);
|
||||
font-size: 20px;
|
||||
}
|
||||
.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: rgba(30, 30, 30, 0.45);
|
||||
backdrop-filter: blur(32px) saturate(180%);
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
border-radius: var(--panelRadius);
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
}
|
||||
.menu-panel .menu-panel-body .menu-option {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
appearance: none;
|
||||
border: 0px;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 9px 14px;
|
||||
align-items: center;
|
||||
}
|
||||
.menu-panel .menu-panel-body .menu-option::before {
|
||||
background: var(--hover);
|
||||
border-radius: 6px;
|
||||
content: "";
|
||||
--sizeY: 3px;
|
||||
--sizeX: 4px;
|
||||
top: var(--sizeY);
|
||||
left: var(--sizeX);
|
||||
bottom: var(--sizeY);
|
||||
right: var(--sizeX);
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform: scale(0.98);
|
||||
z-index: -1;
|
||||
transition: transform 0.25s ease-out, opacity 0.25s ease-out;
|
||||
}
|
||||
.menu-panel .menu-panel-body .menu-option:hover::before {
|
||||
transition: transform 0s ease-in, opacity 0s ease-in;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
.menu-panel .menu-panel-body .menu-option:active::before {
|
||||
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
|
||||
opacity: 1;
|
||||
transform: scale(0.98);
|
||||
background: var(--selected-click);
|
||||
}
|
||||
.menu-panel .menu-header-text {
|
||||
margin: 18px 6px;
|
||||
}
|
||||
.menu-panel .menu-header-text .close-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border-radius: 50px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
}
|
||||
.menu-panel .menu-header-text .close-btn:before {
|
||||
content: "";
|
||||
font-family: "codicon";
|
||||
color: var(--textColor);
|
||||
font-size: 20px;
|
||||
}
|
||||
.menu-panel .menu-header-text .close-btn:hover {
|
||||
background-color: #c42b1c;
|
||||
}
|
||||
.menu-panel .menu-body {
|
||||
overflow: overlay;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.moreinfo-modal .modal-window {
|
||||
height: 70%;
|
||||
max-height: 100%;
|
||||
width: 45%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.moreinfo-modal .modal-content {
|
||||
padding: 1em;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.moreinfo-modal .modal-content br {
|
||||
display: block;
|
||||
/* makes it have a width */
|
||||
content: "";
|
||||
/* clears default height */
|
||||
margin: 2em;
|
||||
margin-bottom: -0.6rem;
|
||||
}
|
||||
.moreinfo-modal .modal-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
.moreinfo-modal .modal-header .modal-title {
|
||||
text-align: unset !important;
|
||||
width: 100%;
|
||||
}
|
||||
.moreinfo-modal .modal-header .modal-title:not(.modal-subtitle) {
|
||||
font-size: 25px;
|
||||
}
|
||||
.mediainfo-popover {
|
||||
user-select: none;
|
||||
background-color: #000000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mediainfo-popover .content .shadow-artwork {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
filter: blur(32px) brightness(50%) saturate(280%);
|
||||
}
|
||||
.mediainfo-popover .content .popover-artwork {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mediainfo-popover .content .song-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
.mediainfo-popover .content .song-artist,
|
||||
.mediainfo-popover .content .song-album {
|
||||
opacity: 0.75;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mediainfo-popover .content .song-artist:hover,
|
||||
.mediainfo-popover .content .song-album:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
._svg-icon {
|
||||
--icon: url("assets/chevron-left.svg");
|
||||
--size: 1em;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
-webkit-mask-image: var(--icon);
|
||||
-webkit-mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
}
|
||||
._svg-icon.svg-md {
|
||||
--size: 1.2em;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.notyf__toast {
|
||||
-webkit-app-region: no-drag;
|
||||
cursor : pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notyf-info {
|
||||
|
|
@ -9,142 +9,145 @@
|
|||
|
||||
.tooltip-inner {
|
||||
background: #2f2f2f;
|
||||
opacity : 1;
|
||||
border : 1px solid rgb(0 0 0 / 35%);
|
||||
opacity: 1;
|
||||
border: 1px solid rgb(0 0 0 / 35%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.modal-fullscreen {
|
||||
display : flex;
|
||||
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;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
|
||||
.modal-window {
|
||||
background : #333;
|
||||
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;
|
||||
box-shadow: var(--mediaItemShadow-Shadow);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
max-height: 500px;
|
||||
max-width: 360px;
|
||||
background: #121212;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content : "";
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
box-shadow : var(--mediaItemShadow);
|
||||
z-index : 1;
|
||||
border-radius : inherit;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
z-index: 1;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
width : 100%;
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
overflow : hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
|
||||
.modal-footer {}
|
||||
.modal-footer {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spatialproperties-panel {
|
||||
.modal-window {
|
||||
&:not(.airplay-modal){
|
||||
height : 700px;
|
||||
max-height: 700px;
|
||||
width : 800px;
|
||||
max-width : 800px;}
|
||||
overflow : hidden;
|
||||
&:not(.airplay-modal) {
|
||||
height: 700px;
|
||||
max-height: 700px;
|
||||
width: 800px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.info-header {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.visual-container {
|
||||
display : flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
overflow : hidden;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visual {
|
||||
position : relative;
|
||||
height : 250px;
|
||||
width : 300px;
|
||||
display : inline-flex;
|
||||
align-items : flex-end;
|
||||
position: relative;
|
||||
height: 250px;
|
||||
width: 300px;
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
filter : drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
|
||||
margin : 0 auto;
|
||||
filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
|
||||
margin: 0 auto;
|
||||
|
||||
.face {
|
||||
position : absolute;
|
||||
width : calc(12px * 6);
|
||||
height : calc(12px * 6);
|
||||
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;
|
||||
transform: rotateX(60deg) rotateZ(-45deg);
|
||||
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
}
|
||||
|
||||
.listener {
|
||||
position : absolute;
|
||||
width : 32px;
|
||||
height : 32px;
|
||||
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;
|
||||
transform: rotateX(60deg) rotateZ(-45deg);
|
||||
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
background: white;
|
||||
color: black;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.audiosource {
|
||||
position : absolute;
|
||||
width : 32px;
|
||||
height : 32px;
|
||||
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;
|
||||
transform: rotateX(60deg) rotateZ(-45deg);
|
||||
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
background: yellow;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.face:nth-of-type(1) {
|
||||
background: linear-gradient(45deg, #28223a, #1f2038);
|
||||
z-index : 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face:nth-of-type(2) {
|
||||
background: linear-gradient(45deg, #7d53ad, #5763ff);
|
||||
transform : rotateX(60deg) rotateZ(-45deg) translateZ(30px);
|
||||
opacity : 0.7;
|
||||
z-index : 3;
|
||||
transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
|
||||
opacity: 0.7;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding : 16px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -153,22 +156,8 @@
|
|||
}
|
||||
|
||||
.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;
|
||||
.menu-panel.menu-header-text.close-btn
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(196, 43, 28)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -176,14 +165,14 @@
|
|||
|
||||
.addtoplaylist-panel {
|
||||
.modal-window {
|
||||
max-height : 600px;
|
||||
max-width : 400px;
|
||||
background : rgb(18 18 18 / 90%);
|
||||
overflow : hidden;
|
||||
max-height: 600px;
|
||||
max-width: 400px;
|
||||
background: rgb(18 18 18 / 90%);
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
|
||||
.modal-header {
|
||||
padding : 16px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
|
||||
.modal-title {
|
||||
|
|
@ -191,54 +180,39 @@
|
|||
}
|
||||
|
||||
.close-btn {
|
||||
width : 50px;
|
||||
height : 100%;
|
||||
background-image : var(--gfx-closeBtn);
|
||||
background-position: center;
|
||||
background-repeat : no-repeat;
|
||||
-webkit-app-region : no-drag;
|
||||
appearance : none;
|
||||
border : 0;
|
||||
background-color : transparent;
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(196, 43, 28)
|
||||
}
|
||||
.menu-panel.menu-header-text.close-btn
|
||||
}
|
||||
}
|
||||
|
||||
.modal-search {
|
||||
width : 100%;
|
||||
padding : 0px 16px;
|
||||
width: 100%;
|
||||
padding: 0px 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.playlist-item {
|
||||
appearance : none;
|
||||
border : 0px;
|
||||
text-align : left;
|
||||
width : 100%;
|
||||
margin : 0;
|
||||
display : flex;
|
||||
background : rgba(32, 32, 32, 0.46);
|
||||
color : #eee;
|
||||
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;
|
||||
font-size: 0.98em;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
flex-flow : row;
|
||||
flex-flow: row;
|
||||
|
||||
.icon {
|
||||
pointer-events : none;
|
||||
width : 32px;
|
||||
height : 32px;
|
||||
display : flex;
|
||||
pointer-events: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
margin-right : 6px;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.name {
|
||||
|
|
@ -265,35 +239,35 @@
|
|||
}
|
||||
|
||||
.menu-panel {
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
position : fixed;
|
||||
top : 0;
|
||||
left : 0;
|
||||
z-index : 100001;
|
||||
display : flex;
|
||||
justify-content : center;
|
||||
align-items : center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100001;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-app-region: no-drag;
|
||||
|
||||
.menu-header-body {
|
||||
padding : 6px;
|
||||
display : flex;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
background: rgb(200 200 200 / 10%);
|
||||
|
||||
.menu-option-header {
|
||||
width : 40px;
|
||||
height : 40px;
|
||||
display : flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
border-radius : var(--mediaItemRadius);
|
||||
appearance : none;
|
||||
border : 0;
|
||||
background : transparent;
|
||||
align-items: center;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
&.active {
|
||||
.sidebar-icon>.svg-icon {
|
||||
.sidebar-icon > .svg-icon {
|
||||
--color: var(--keyColor);
|
||||
}
|
||||
}
|
||||
|
|
@ -309,85 +283,93 @@
|
|||
}
|
||||
|
||||
.menu-panel-body {
|
||||
display : flex;
|
||||
flex-flow : column;
|
||||
background : rgb(30 30 30 / 45%);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
background: rgb(30 30 30 / 45%);
|
||||
backdrop-filter: blur(32px) saturate(180%);
|
||||
position : relative;
|
||||
min-width : 200px;
|
||||
box-shadow : var(--ciderShadow-Generic);
|
||||
border-radius : var(--panelRadius);
|
||||
overflow : hidden;
|
||||
font-size : 13px;
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
border-radius: var(--panelRadius);
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
|
||||
|
||||
.menu-option {
|
||||
text-align: left;
|
||||
display : flex;
|
||||
display: flex;
|
||||
appearance: none;
|
||||
border : 0px;
|
||||
font : inherit;
|
||||
border: 0px;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
color : inherit;
|
||||
margin : 0 auto;
|
||||
position : relative;
|
||||
width : 100%;
|
||||
padding : 9px 14px;
|
||||
color: inherit;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 9px 14px;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
background : var(--hover);
|
||||
background: var(--hover);
|
||||
border-radius: 6px;
|
||||
content : "";
|
||||
--sizeY : 3px;
|
||||
--sizeX : 4px;
|
||||
top : var(--sizeY);
|
||||
left : var(--sizeX);
|
||||
bottom : var(--sizeY);
|
||||
right : var(--sizeX);
|
||||
position : absolute;
|
||||
opacity : 0;
|
||||
transform : scale(0.98);
|
||||
z-index : -1;
|
||||
transition : transform .25s ease-out, opacity .25s ease-out;
|
||||
content: "";
|
||||
--sizeY: 3px;
|
||||
--sizeX: 4px;
|
||||
top: var(--sizeY);
|
||||
left: var(--sizeX);
|
||||
bottom: var(--sizeY);
|
||||
right: var(--sizeX);
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform: scale(0.98);
|
||||
z-index: -1;
|
||||
transition: transform .25s ease-out, opacity .25s ease-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transition: transform 0s ease-in, opacity 0s ease-in;
|
||||
opacity : 1;
|
||||
transform : scale(1);
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&::before {
|
||||
transition: transform .1s ease-in-out, opacity .1s ease-in-out;
|
||||
opacity : 1;
|
||||
transform : scale(0.98);
|
||||
opacity: 1;
|
||||
transform: scale(0.98);
|
||||
background: var(--selected-click);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-header-text {
|
||||
margin: 18px 6px;
|
||||
|
||||
.close-btn {
|
||||
width : 50px;
|
||||
height : 42px;
|
||||
background-image : var(--gfx-closeBtn);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-position: center;
|
||||
background-repeat : no-repeat;
|
||||
-webkit-app-region : no-drag;
|
||||
appearance : none;
|
||||
border : 0;
|
||||
background-color : transparent;
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border-radius: 50px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
font-family: "codicon";
|
||||
color: var(--textColor);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(196, 43, 28)
|
||||
|
|
@ -396,25 +378,25 @@
|
|||
}
|
||||
|
||||
.menu-body {
|
||||
overflow : overlay;
|
||||
height : 100%;
|
||||
display : flex;
|
||||
overflow: overlay;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap : 0px;
|
||||
padding : 0px;
|
||||
position : relative;
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-footer {
|
||||
width : 100%;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.queue-panel {
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
display : flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
.queue-header-text {
|
||||
|
|
@ -423,52 +405,52 @@
|
|||
|
||||
.queue-body {
|
||||
overflow: overlay;
|
||||
height : 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.queue-footer {
|
||||
width : 100%;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.autoplay {
|
||||
background : rgb(200 200 200 / 15%);
|
||||
display : flex;
|
||||
background: rgb(200 200 200 / 15%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
appearance : none;
|
||||
border : 0;
|
||||
border-radius : 6px;
|
||||
height : 32px;
|
||||
width : 32px;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.infinity {
|
||||
content: url("./assets/infinity.svg");
|
||||
margin : auto;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.moreinfo-modal {
|
||||
.modal-window {
|
||||
height : 70%;
|
||||
max-height : 100%;
|
||||
width : 45%;
|
||||
max-width : 100%;
|
||||
overflow : hidden;
|
||||
height: 70%;
|
||||
max-height: 100%;
|
||||
width: 45%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding : 1em;
|
||||
padding: 1em;
|
||||
font-size: 0.8rem;
|
||||
|
||||
br {
|
||||
display : block;
|
||||
display: block;
|
||||
/* makes it have a width */
|
||||
content : "";
|
||||
content: "";
|
||||
/* clears default height */
|
||||
margin : 2em;
|
||||
margin: 2em;
|
||||
margin-bottom: -0.6rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -478,7 +460,7 @@
|
|||
|
||||
.modal-title {
|
||||
text-align: unset !important;
|
||||
width : 100%;
|
||||
width: 100%;
|
||||
|
||||
&:not(.modal-subtitle) {
|
||||
font-size: 25px;
|
||||
|
|
@ -500,18 +482,21 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
filter:blur(32px) brightness(50%) saturate(280%);
|
||||
filter: blur(32px) brightness(50%) saturate(280%);
|
||||
}
|
||||
|
||||
.popover-artwork {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 0 20px 0;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.song-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
.song-artist,.song-album {
|
||||
|
||||
.song-artist, .song-album {
|
||||
opacity: 0.75;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -520,4 +505,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._svg-icon {
|
||||
--icon: url("./assets/chevron-left.svg");
|
||||
--size: 1em;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
-webkit-mask-image: var(--icon);
|
||||
-webkit-mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
background: rgb(255 255 255 / 76%);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
|
||||
&.svg-md {
|
||||
--size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,4 +3,57 @@ body[platform="linux"] {
|
|||
#window-controls-container {
|
||||
//display: none;
|
||||
}
|
||||
|
||||
.window-controls {
|
||||
justify-content: flex-end;
|
||||
align-items : center;
|
||||
padding-right : 6px;
|
||||
|
||||
>div {
|
||||
--iconSize: 16px;
|
||||
|
||||
&.close,
|
||||
&.minmax,
|
||||
&.minimize,
|
||||
&.minmax.restore {
|
||||
background-image: unset!important;
|
||||
position : relative;
|
||||
display : grid;
|
||||
align-content : center;
|
||||
text-align : center;
|
||||
height : 36px!important;
|
||||
width : 36px!important;
|
||||
border-radius : 50px;
|
||||
transition: background-color .1s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: rgb(200 200 200 / 10%)!important;
|
||||
}
|
||||
}
|
||||
|
||||
&.close::before {
|
||||
font-family: "codicon";
|
||||
font-size : var(--iconSize);
|
||||
content : "";
|
||||
}
|
||||
|
||||
&.minmax::before {
|
||||
font-family: "codicon";
|
||||
font-size : var(--iconSize);
|
||||
content : "";
|
||||
}
|
||||
|
||||
&.minimize::before {
|
||||
font-family: "codicon";
|
||||
font-size : var(--iconSize);
|
||||
content : "";
|
||||
}
|
||||
|
||||
&.restore::before {
|
||||
font-family: "codicon";
|
||||
font-size : var(--iconSize);
|
||||
content : "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,17 @@
|
|||
body[platform="darwin"] {
|
||||
html {
|
||||
background: transparent!important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
&.notransparency::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
&.simplebg {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -25,6 +27,7 @@ body[platform="darwin"] {
|
|||
.app-chrome .app-chrome-item.search {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.app-chrome .app-mainmenu {
|
||||
width: 46px;
|
||||
}
|
||||
|
|
@ -33,6 +36,21 @@ body[platform="darwin"] {
|
|||
background-color: var(--macOSChromeColor);
|
||||
}
|
||||
}
|
||||
|
||||
&[window-state="normal"] {
|
||||
&::after {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-shadow: inset 0px 0px .5px 1px rgb(200 200 200 / 40%);
|
||||
border-radius: 10px;
|
||||
content: " ";
|
||||
z-index: 999999;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#app-main {
|
||||
|
|
@ -43,7 +61,19 @@ body[platform="darwin"] {
|
|||
}
|
||||
|
||||
#app-content {
|
||||
background-color: var(--baseColor);
|
||||
background-color: #1e1e1e6b;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-window.maxed {
|
||||
.tabs>.col-auto {
|
||||
transition: padding-top .3s linear;
|
||||
padding-top: var(--chromeHeight1);
|
||||
}
|
||||
}
|
||||
|
||||
#apple-music-video-player-controls #player-exit {
|
||||
margin-top: 18px;
|
||||
left: 70px;
|
||||
}
|
||||
}
|
||||
410
src/renderer/less/miniplayer.less
Normal file
410
src/renderer/less/miniplayer.less
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
.mini-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.fs-row {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.playback-button--small.active {
|
||||
background-color: rgb(200 200 200 / 25%);
|
||||
}
|
||||
|
||||
.player-exit {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.player-pin {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
top: 5px;
|
||||
right: 30px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
#mini-pin {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.player-pin:hover #mini-pin {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playback-button--small {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.right-col {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1121px) {
|
||||
.display--large {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.display--large {
|
||||
display: flex;
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.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.70;
|
||||
background-image: url("./assets/feather/volume-2.svg");
|
||||
}
|
||||
|
||||
.volume-button--small:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.volume-button--small.active {
|
||||
background-image: url("./assets/feather/volume.svg");
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: rgb(50 50 50);
|
||||
cursor: default;
|
||||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
transition: all var(--appleTransition);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:hover {
|
||||
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:active {
|
||||
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-user-select: none;
|
||||
-webkit-app-region: drag;
|
||||
|
||||
.bgArtworkMaterial {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bg-artwork-container {
|
||||
z-index: unset;
|
||||
}
|
||||
|
||||
.bg-artwork-container .bg-artwork {
|
||||
filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
|
||||
}
|
||||
|
||||
.no-animation {
|
||||
animation: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.lyrics-col {
|
||||
|
||||
height: 62vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 80%;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
|
||||
.no-lyrics {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lyric-line {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.queue-col {
|
||||
|
||||
width: 60vh;
|
||||
height: 50vh;
|
||||
|
||||
.queue-title {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.queue-panel > * {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover ::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-toggles {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 15vh;
|
||||
height: 5vh;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.volume {
|
||||
background-image: url("./assets/feathers/volume.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.queue {
|
||||
background-image: url("./assets/list.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba(200, 200, 200, 0.7);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.artwork-col {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.artwork {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.mediaitem-artwork {
|
||||
border-radius: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.controls-parents {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: #0000009e;
|
||||
backdrop-filter: blur(10px);
|
||||
bottom: 0px;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
padding: 3%;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.app-playback-controls {
|
||||
-webkit-app-region: no-drag;
|
||||
|
||||
.song-artist, .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;
|
||||
|
||||
.song-name-normal {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
&.song-artist-marquee {
|
||||
> marquee {
|
||||
//margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
font-size: 0.875em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.song-name {
|
||||
width: unset !important;
|
||||
margin-top: 0.15vh;
|
||||
display: -webkit-box;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-playback-controls .playback-info {
|
||||
margin-top: 0.5vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.app-playback-controls .song-progress {
|
||||
@bgColor: transparent;
|
||||
//height: 16px;
|
||||
position: absolute;
|
||||
bottom: -3.5vh;
|
||||
left: 0px;
|
||||
background: @bgColor;
|
||||
|
||||
.song-duration p {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
height: 1.2em;
|
||||
line-height: 1.3em;
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 0.25em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> input[type=range] {
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: rgb(200 200 200 / 10%);
|
||||
border-radius: 2px;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
margin-top: 3.5vh;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
1886
src/renderer/less/pages.css
Normal file
1886
src/renderer/less/pages.css
Normal file
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue