okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

some CSS cleanup

Browse source
This commit is contained in:
booploops 2022-02-13 21:34:25 -08:00
parent 9c28719881
commit 7a45d1c6e7
4 changed files with 2907 additions and 2915 deletions
Download patch file Download diff file Expand all files Collapse all files

1752
src/renderer/less/elements.less Normal file
View file

File diff suppressed because it is too large Load diff

396
src/renderer/less/helpers.less Normal file
View file

@ -0,0 +1,396 @@
.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-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;
&: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-header {
width: 100%;
padding: 6px;
}
.modal-content {
width: 100%;
height: 100%;
overflow: hidden;
overflow-y: overlay;
}
.modal-footer {
}
}
}
.spatialproperties-panel {
.modal-window {
height: 700px;
max-height: 700px;
width: 800px;
max-width: 800px;
overflow: hidden;
.info-header {
padding-left: 12px;
}
.visual-container {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.visual {
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;
.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;
}
.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;
}
.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;
}
.face:nth-of-type(1) {
background: linear-gradient(45deg, #28223a, #1f2038);
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;
}
}
.modal-header {
padding: 16px;
position: relative;
overflow: hidden;
.modal-title {
text-align: center;
}
.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)
}
}
}
}
}
.addtoplaylist-panel {
.modal-window {
max-height: 600px;
max-width: 400px;
background: rgb(18 18 18 / 90%);
overflow: hidden;
backdrop-filter: blur(16px) saturate(180%);
.modal-header {
padding: 16px;
position: relative;
.modal-title {
text-align: center;
}
.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)
}
}
}
.modal-search {
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;
font-family: inherit;
font-size: 0.98em;
padding: 6px 12px;
align-items: center;
flex-flow: row;
.icon {
pointer-events: none;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 6px;
}
.name {
}
&:hover {
background: var(--selected);
}
&:active {
background: var(--selected-click);
}
&.focused {
background: var(--keyColor);
}
}
.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-header-body {
padding: 6px;
display: flex;
background: rgb(200 200 200 / 10%);
.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;
&.active {
.sidebar-icon > .svg-icon {
--color: var(--keyColor);
}
}
&:hover {
background: var(--selected);
}
&:active {
background: var(--selected-click);
}
}
}
.menu-panel-body {
display: flex;
flex-flow: column;
background: rgb(38 38 38);
position: relative;
min-width: 200px;
box-shadow: var(--ciderShadow-Generic);
border-radius: var(--mediaItemRadius);
overflow: hidden;
font-size: 14px;
.menu-option {
text-align: left;
display: flex;
width: 100%;
padding: 12px 16px;
appearance: none;
border: 0px;
font: inherit;
background: transparent;
color: inherit;
&:hover {
background: var(--selected);
}
&:active {
background: var(--selected-click);
}
}
}
.menu-header-text {
margin: 18px 6px;
.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)
}
}
}
.menu-body {
overflow: overlay;
height: 100%;
}
.menu-footer {
width: 100%;
padding: 12px;
}
}
.queue-panel {
height: 100%;
width: 100%;
display: flex;
flex-flow: column;
.queue-header-text {
margin: 18px 6px;
}
.queue-body {
overflow: overlay;
height: 100%;
}
.queue-footer {
width: 100%;
padding: 12px;
}
.autoplay {
background: rgb(200 200 200 / 15%);
display: flex;
justify-content: center;
appearance: none;
border: 0;
border-radius: 6px;
height: 32px;
width: 32px;
}
.infinity {
content: url("./assets/infinity.svg");
margin: auto;
}
}

749
src/renderer/less/pages.less Normal file
View file

@ -0,0 +1,749 @@
// 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
// 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;
}
}

2925
src/renderer/style.less
View file

File diff suppressed because it is too large Load diff