8ee22f615d
* Added update check if using MSS or MAS builds. need help implementing * fix locale / allow pl to show before list loading is fully done * oops * Also copy blockmap for partial download `[2022-02-15 17:28:30.126] [error] Cannot download differentially, fallback to full download: Error: Cannot download "https://478-429851205-gh.circle-artifacts.com/0/%7E/Cider/dist/artifacts/Cider-Setup-1.1.428.exe.blockmap", status 404: Not Found at ClientRequest.<anonymous> (C:\Program Files\Cider\resources\app.asar\node_modules\builder-util-runtime\src\httpExecutor.ts:288:11) at ClientRequest.emit (node:events:394:28) at ClientRequest.emit (node:domain:475:12) at SimpleURLLoaderWrapper.<anonymous> (node:electron/js2c/browser_init:105:6829) at SimpleURLLoaderWrapper.emit (node:events:394:28) at SimpleURLLoaderWrapper.emit (node:domain:475:12)` * more lang fix * Removed Discord clear on pause * Linux frame * fix #459 * Fix * exposed --songProgressColor and --songProgressBackground * revert * Revert "revert" This reverts commit24313b53cf. * ok? * Revert "ok?" This reverts commit9218ccc887. * ok * fix adding/remove mvs from library * Created audio controls menu * Added start-renderer command for easier testing * shitty floats shitty shitty * LastFM can be unique and have its own call * Revert "LastFM can be unique and have its own call" This reverts commitd36e1b19f6. * Revert "Merge branch 'develop' into develop" This reverts commit5fa345e6c8, reversing changes made toa02b633f49. * Revert "Revert "LastFM can be unique and have its own call"" This reverts commitf156083d48. * Revert "Merge branch 'ciderapp:develop' into develop" This reverts commit20fd0c05da, reversing changes made to4937e29fcf. * lastfm changes * i hate lastfm like really really hate it * Revert "Merge remote-tracking branch 'origin/develop' into develop" This reverts commit5b360e74fa, reversing changes made to548688341d. * Revert "Revert "Merge remote-tracking branch 'origin/develop' into develop"" This reverts commit0fb6802ff3. * Revert "Merge branch 'develop' of https://github.com/ciderapp/Cider into develop" This reverts commitbd3a2b6172, reversing changes made to0fb6802ff3. * volume step i18n * and git can go in the bin too * Added OpenAppData button in settings and updated layout/translations * change in translation README.md * margin: 0 on song-progress * fix np navigation on some songs * enables native linux chrome * replay wip * replay, added this year * fix for library status * added attributes.playparams.id * replay banner * changed colors * fancy animations * more fancy * some changes * add play button in library-songs page * fix * improve drag on topbar * Generating top genres, made buttons nicer on replay * changes to replay graphs * Revert "Merge branch 'innolab' into develop" This reverts commitb740f76e3c, reversing changes made toa5746f08fa. Co-authored-by: child_duckling <19170969+quacksire@users.noreply.github.com> Co-authored-by: vapormusic <vietanhfat@gmail.com> Co-authored-by: JYW0803 <74043061+JYW0803@users.noreply.github.com> Co-authored-by: Core <64542347+coredev-uk@users.noreply.github.com> Co-authored-by: booploops <49113086+booploops@users.noreply.github.com>
998 lines
No EOL
19 KiB
Text
998 lines
No EOL
19 KiB
Text
// Helpers
|
|
.content-inner {
|
|
position: absolute;
|
|
top: var(--navigationBarHeight);
|
|
left: 0;
|
|
padding: 32px;
|
|
width: 100%;
|
|
transition: zoom 1s;
|
|
zoom: 1;
|
|
}
|
|
|
|
.content-inner.centered {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
// End Helpers
|
|
|
|
// GitHub Themes
|
|
.github-themes-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0px;
|
|
height: calc(100% - var(--navigationBarHeight));
|
|
|
|
.github-avatar {
|
|
height: 42px;
|
|
width: 42px;
|
|
margin: 6px;
|
|
border-radius: 32px;
|
|
}
|
|
|
|
.repo-name {
|
|
margin:0px;
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.repo-url {
|
|
color: var(--textColor);
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.repo-preview-name {
|
|
margin:0px;
|
|
}
|
|
|
|
.repos-list {
|
|
height: 100%;
|
|
overflow-y: overlay;
|
|
width: 320px;
|
|
font-size: 14px;
|
|
|
|
>.list-group {
|
|
margin:0px;
|
|
}
|
|
.list-group-item {
|
|
padding: 12px 6px;
|
|
|
|
&:hover {
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
&:active {
|
|
filter: brightness(0.8);
|
|
}
|
|
}
|
|
}
|
|
|
|
.github-preview {
|
|
height: 100%;
|
|
flex: 1;
|
|
background: var(--color2);
|
|
padding: 16px 32px;
|
|
overflow-y:overlay;
|
|
}
|
|
|
|
.gh-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gh-header {
|
|
padding: 16px;
|
|
}
|
|
}
|
|
|
|
// Library - Songs page
|
|
.library-page {
|
|
padding: 0px;
|
|
|
|
.library-header {
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
border-bottom: 1px solid rgba(200, 200, 200, 0.05);
|
|
z-index: 6;
|
|
background: black;
|
|
padding: 0px 2em;
|
|
backdrop-filter: blur(32px);
|
|
background: rgba(0, 0, 0, 0.25);
|
|
top: var(--navigationBarHeight);
|
|
}
|
|
|
|
.well {
|
|
margin: 2em;
|
|
}
|
|
}
|
|
|
|
// Podcast Page
|
|
.content-inner.podcasts-page {
|
|
display: flex;
|
|
height: calc(100% - var(--navigationBarHeight));
|
|
padding: 0px;
|
|
|
|
.list-flat {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.podcast-artwork {
|
|
width: 200px;
|
|
margin: 16px auto;
|
|
height: 200px;
|
|
}
|
|
|
|
.podcasts-list {
|
|
height: 100%;
|
|
width: 280px;
|
|
background: rgb(200 200 200 / 10%);
|
|
overflow-y: overlay;
|
|
border-right: 1px solid var(--color2);
|
|
flex: none;
|
|
overflow-x: hidden;
|
|
|
|
.podcast-list-header {
|
|
border-bottom: 1px solid var(--color2);
|
|
font-size: 0.7em;
|
|
padding: 6px;
|
|
background: #ffffff17;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.podcasts-search {
|
|
padding: 10px;
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
border-bottom: 1px solid var(--color2);
|
|
z-index: 2;
|
|
background: #303030;
|
|
}
|
|
}
|
|
|
|
.episodes-list {
|
|
height: 100%;
|
|
width: 100%;
|
|
background: rgb(200 200 200 / 6%);
|
|
overflow-y: overlay;
|
|
overflow-x: hidden;
|
|
|
|
.episodes-inline-info {
|
|
padding: 14px 14px 0px 14px;
|
|
|
|
.podcast-show-info {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.podcast-show-description {
|
|
margin: 32px 6px;
|
|
font-size: 0.8rem;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
}
|
|
|
|
.podcast-artwork {
|
|
width: 120px;
|
|
margin: 0px auto;
|
|
height: 120px;
|
|
}
|
|
}
|
|
|
|
.podcast-no-search-results {
|
|
text-align: center;
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
.podcasts-details {
|
|
width: 300px;
|
|
flex: none;
|
|
background: rgb(255 255 255 / 5%);
|
|
overflow-y: overlay;
|
|
overflow-x: hidden;
|
|
top: 2%;
|
|
z-index: 2;
|
|
border-left: 1px solid var(--color2);
|
|
padding-bottom: 1em;
|
|
|
|
.meta-btn {
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.podcasts-details-header {
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 50px;
|
|
height: 42px;
|
|
background-image: var(--gfx-closeBtn);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-app-region: no-drag;
|
|
appearance: none;
|
|
border: 0;
|
|
background-color: transparent;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
&:hover {
|
|
background-color: rgb(196, 43, 28)
|
|
}
|
|
}
|
|
|
|
.podcast-genre {
|
|
text-align: center;
|
|
margin: 6px;
|
|
font-size: 0.8em;
|
|
font-weight: 500;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.podcast-metainfo {
|
|
text-align: center;
|
|
font-size: 0.7em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.podcast-header {
|
|
text-align: center;
|
|
}
|
|
|
|
.podcast-play-btn {
|
|
width: 50%;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.podcast-description {
|
|
margin: 12px;
|
|
font-size: 0.75em;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
line-break: anywhere;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 1230px) {
|
|
.content-inner.podcasts-page {
|
|
.podcasts-details {
|
|
height: 96%;
|
|
width: 300px;
|
|
flex: none;
|
|
background: rgb(20 20 20 / 97%);
|
|
overflow-y: overlay;
|
|
overflow-x: hidden;
|
|
position: absolute;
|
|
right: 2%;
|
|
top: 2%;
|
|
border-radius: 10px;
|
|
box-shadow: var(--ciderShadow-Generic);
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Album / Playlist Page */
|
|
.playlist-page {
|
|
--bgColor: transparent;
|
|
padding: 0px;
|
|
//background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%);
|
|
top: 0;
|
|
padding-top: var(--navigationBarHeight);
|
|
|
|
.playlist-body {
|
|
padding: var(--contentInnerPadding) 2em;
|
|
margin-top: -75px;
|
|
}
|
|
|
|
.floating-header {
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
border-bottom: 1px solid rgba(200, 200, 200, 0.05);
|
|
z-index: 6;
|
|
padding: 0px 1em;
|
|
backdrop-filter: blur(32px);
|
|
background: rgba(0, 0, 0, 0.25);
|
|
top: var(--navigationBarHeight);
|
|
transition: opacity 0.1s var(--appleEase);
|
|
}
|
|
|
|
.playlist-display {
|
|
padding: var(--contentInnerPadding);
|
|
min-height: 300px;
|
|
position: relative;
|
|
|
|
.artworkContainer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
margin-top: calc(var(--navigationBarHeight) * -1);
|
|
margin-bottom: -10px;
|
|
padding: 0;
|
|
-webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%);
|
|
opacity: .7;
|
|
animation: playlistArtworkFadeIn 1s var(--appleEase);
|
|
|
|
.artworkMaterial > img {
|
|
filter: brightness(100%) blur(80px) saturate(100%) contrast(1);
|
|
object-position: center;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: unset;
|
|
}
|
|
}
|
|
|
|
.playlistInfo {
|
|
z-index: 1;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
> .row {
|
|
width: calc(100% - 32px);
|
|
}
|
|
|
|
.playlist-info {
|
|
flex-shrink: unset;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: flex-end;
|
|
|
|
.playlist-name {
|
|
font-weight: 700;
|
|
font-size: 1.6rem;
|
|
margin-bottom: 6px;
|
|
margin-right: 6px;
|
|
flex-shrink: unset;
|
|
}
|
|
|
|
.nameEdit {
|
|
font-weight: 700;
|
|
font-size: 1.6rem;
|
|
margin-bottom: 6px;
|
|
margin-right: 6px;
|
|
flex-shrink: unset;
|
|
background: transparent;
|
|
border: 0px;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.playlist-artist {
|
|
font-size: 20px;
|
|
margin-bottom: 6px;
|
|
margin-right: 6px;
|
|
flex-shrink: unset;
|
|
}
|
|
|
|
.playlist-desc {
|
|
box-sizing: border-box;
|
|
font-size: 14px;
|
|
flex-shrink: unset;
|
|
margin-right: 5px;
|
|
max-height: 100px;
|
|
position: relative;
|
|
|
|
.content {
|
|
height: 100px;
|
|
-webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
|
|
}
|
|
|
|
.more-btn {
|
|
appearance: none;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0 5px;
|
|
font-size: 14px;
|
|
color: var(--keyColor);
|
|
background-color: transparent;
|
|
border: 0px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.playlist-desc-expanded {
|
|
box-sizing: border-box;
|
|
font-size: 14px;
|
|
position: relative;
|
|
|
|
.more-btn {
|
|
appearance: none;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0 5px;
|
|
font-size: 14px;
|
|
color: var(--keyColor);
|
|
background-color: transparent;
|
|
border: 0px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.friends-info {
|
|
display: flex;
|
|
flex-flow: column;
|
|
|
|
.badge-container {
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
|
|
.socialBadge {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
box-shadow: var(--mediaItemShadow-ShadowSubtle);
|
|
transition: transform .2s var(--appleEase);
|
|
margin: 6px;
|
|
|
|
&:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.friends-name {
|
|
text-align: center;
|
|
font-size: 0.9em;
|
|
margin: 8px;
|
|
}
|
|
}
|
|
|
|
.playlist-time {
|
|
font-size: 0.9em;
|
|
margin: 6px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&.inline-playlist {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 6;
|
|
position: sticky;
|
|
margin-top: calc(var(--navigationBarHeight) * -1);
|
|
|
|
.floating-header {
|
|
opacity: 1;
|
|
top: 0px;
|
|
z-index: 6;
|
|
padding: 1em;
|
|
backdrop-filter: unset;
|
|
background: black;
|
|
h3 {
|
|
display: none;
|
|
}
|
|
}
|
|
.playlist-inner {
|
|
background: black;
|
|
width: 80%;
|
|
height: 100%;
|
|
overflow: overlay;
|
|
box-shadow: var(--ciderShadow-Generic);
|
|
border-radius: var(--mediaItemRadius) var(--mediaItemRadius) 0px 0px;
|
|
|
|
.close-btn {
|
|
position: sticky;
|
|
top: 16px;
|
|
left: 16px;
|
|
margin-left: 16px;
|
|
z-index: 7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes playlistArtworkFadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
// Collection Page
|
|
.collection-page {
|
|
padding-bottom: 128px;
|
|
|
|
.top-fab {
|
|
height: 52px;
|
|
width: 52px;
|
|
position: fixed;
|
|
bottom: 32px;
|
|
right: 32px;
|
|
border-radius: 100%;
|
|
background: rgb(60 60 60);
|
|
border: 0px;
|
|
appearance: none;
|
|
box-shadow: var(--ciderShadow-Generic);
|
|
|
|
> svg {
|
|
height: 50%;
|
|
color: #eee;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover {
|
|
background: rgb(100 100 100);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--keyColor);
|
|
}
|
|
}
|
|
|
|
.header-text {
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
|
|
/* Artist Page */
|
|
|
|
.artist-page {
|
|
padding: 0px;
|
|
top: 0;
|
|
|
|
.floating-header {
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
border-bottom: 1px solid rgba(200, 200, 200, 0.05);
|
|
z-index: 6;
|
|
padding: 0px 1em;
|
|
backdrop-filter: blur(32px);
|
|
background: rgba(0, 0, 0, 0.25);
|
|
top: var(--navigationBarHeight);
|
|
transition: opacity 0.1s var(--appleEase);
|
|
}
|
|
|
|
&.animated .artist-header .more-btn-round {
|
|
position: absolute;
|
|
bottom: 22px !important;
|
|
right: 28px;
|
|
}
|
|
|
|
.artist-header {
|
|
//background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 400px;
|
|
position: relative;
|
|
pointer-events: none;
|
|
|
|
.header-content {
|
|
z-index: 1;
|
|
margin-top: -16px;
|
|
}
|
|
|
|
|
|
.artworkContainer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%);
|
|
opacity: .7;
|
|
animation: playlistArtworkFadeIn 1s var(--appleEase);
|
|
|
|
.artworkMaterial > img {
|
|
filter: brightness(100%) blur(80px) saturate(100%) contrast(1);
|
|
object-position: center;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: unset;
|
|
}
|
|
}
|
|
|
|
.more-btn-round {
|
|
position: absolute;
|
|
bottom: 82px;
|
|
right: 28px;
|
|
}
|
|
|
|
.animated {
|
|
width: 100%;
|
|
height: 100%;
|
|
align-self: center;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
|
|
|
|
video {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
width: 100%;
|
|
min-height: 56.25vw;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.row .col.flex-center {
|
|
z-index: 4;
|
|
}
|
|
}
|
|
|
|
.artist-image {
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 32px;
|
|
position: relative;
|
|
|
|
.overlay-play {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
background: rgb(0 0 0 / 50%);
|
|
transition: opacity 0.1s var(--appleEase);
|
|
border-radius: 100%;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
border: 0px;
|
|
padding: 0px;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:active {
|
|
background: var(--selected-click);
|
|
}
|
|
|
|
> svg {
|
|
width: 70%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.artist-play {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: rgba(100, 100, 100, 0.5);
|
|
box-shadow: var(--ciderShadow-Generic);
|
|
border-radius: 100%;
|
|
box-shadow: var(--mediaItemShadow);
|
|
display: none;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
border: 0px;
|
|
padding: 0px;
|
|
|
|
&:hover {
|
|
filter: brightness(125%);
|
|
}
|
|
|
|
&:active {
|
|
filter: brightness(75%);
|
|
transform: scale(0.98);
|
|
transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
|
|
}
|
|
}
|
|
|
|
.artist-title {
|
|
|
|
.artist-play {
|
|
transform: translateY(3px);
|
|
margin: 14px;
|
|
}
|
|
|
|
&.artist-animation-on {
|
|
width: 100%;
|
|
flex: unset;
|
|
margin-left: 0.5em;
|
|
color: whitesmoke;
|
|
position: absolute;
|
|
bottom: 0;
|
|
|
|
.artist-play {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.artist-body {
|
|
padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
|
|
margin: -140px 20px;
|
|
}
|
|
|
|
&.animated > .artist-body {
|
|
padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
|
|
margin-top: -57px;
|
|
}
|
|
|
|
.showmoreless {
|
|
font-family: inherit;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
background: transparent;
|
|
border: 0px;
|
|
border-radius: 6px;
|
|
appearance: none;
|
|
color: var(--keyColor);
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
margin-top: 12px;
|
|
float: right;
|
|
}
|
|
|
|
.showmoreless:hover {
|
|
background: rgb(200 200 200 / 10%);
|
|
}
|
|
}
|
|
|
|
/* Artist Page End */
|
|
|
|
// Settings page
|
|
.settings-page {
|
|
padding: 0px;
|
|
|
|
.md-option-header {
|
|
padding: 1.25em 1.25em;
|
|
border-bottom: unset;
|
|
border-top: unset;
|
|
font-weight: 600;
|
|
font-size: 1.0em;
|
|
background: rgb(255 255 255 / 3%);
|
|
}
|
|
|
|
.settings-option-body {
|
|
margin: 16px;
|
|
}
|
|
}
|
|
|
|
//Home
|
|
.home-page {
|
|
top: 0;
|
|
padding-top: var(--navbarHeight);
|
|
|
|
.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;
|
|
}
|
|
.md-btn-replay--hero {
|
|
font-size: 1em;
|
|
padding: 16px;
|
|
background: var(--replayGradient);
|
|
border: 0px;
|
|
box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
|
|
margin-top: 1em;
|
|
font-size: 0.9em;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.artist-feed-card {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 10%;
|
|
z-index: 1;
|
|
background: black;
|
|
width: 80%;
|
|
height: 96%;
|
|
overflow: scroll;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.col.madeforyou-col {
|
|
width: 420px;
|
|
min-width: 0px;
|
|
max-width: 420px;
|
|
}
|
|
|
|
.well.artistfeed-well {
|
|
margin-top: 0px;
|
|
height: 392px;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.hint-text {
|
|
font-size: 0.9rem;
|
|
color: rgb(200 200 200 / 70%);
|
|
}
|
|
|
|
.user-icon {
|
|
border-radius: 100%;
|
|
width: 128px;
|
|
height: 128px;
|
|
overflow: hidden;
|
|
box-shadow: var(--mediaItemShadow-Shadow);
|
|
margin: 16px;
|
|
}
|
|
|
|
.well.profile-well {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.name {
|
|
margin: 4px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.handle {
|
|
margin: 4px;
|
|
opacity: 0.7;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Replay
|
|
.replay-page {
|
|
--replayTextShadow: 0px 3px 2px #6f3f52;
|
|
|
|
.replay-period {
|
|
height: 200px;
|
|
width: 200px;
|
|
margin: 6px;
|
|
border-radius: var(--mediaItemRadius);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: transform .2s var(--appleEase);
|
|
transition-delay: .1s;
|
|
align-self: center;
|
|
&:hover {
|
|
transform: translateY(-6px);
|
|
transition-delay: 0s;
|
|
}
|
|
.artwork-container {
|
|
height:200px;
|
|
width:200px;
|
|
}
|
|
}
|
|
|
|
.top-genres-container {
|
|
|
|
.genre-name {
|
|
font-size: 0.9em;
|
|
margin: 6px 0px;
|
|
font-weight: 500;
|
|
}
|
|
.genre-count {
|
|
width: 100%;
|
|
height: 32px;
|
|
background: #ffffff14;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cd-mediaitem-square {
|
|
.mediaitem-artwork {
|
|
animation: replayFadeIn .5s var(--appleEase);
|
|
}
|
|
transition: transform .2s var(--appleEase);
|
|
transition-delay: .1s;
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
transition-delay: 0s;
|
|
}
|
|
}
|
|
|
|
@keyframes replayFadeIn {
|
|
0% {
|
|
//border-radius: 100%;
|
|
transform: translateY(10px) scale(0.9);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
//border-radius: var(--mediaItemRadius);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.replay-viewport {
|
|
background: var(--replayGradient);
|
|
padding: 16px 40px;
|
|
border-radius: 10px;
|
|
box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
|
|
color: rgb(238 238 238 / 86%);
|
|
|
|
.replay-header {
|
|
text-align: center;
|
|
font-size: 3em;
|
|
text-shadow: var(--replayTextShadow);
|
|
}
|
|
}
|
|
.replay-card {
|
|
background: transparent;
|
|
border:0px;
|
|
}
|
|
} |