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

added sticky bar to artist page, added .more-btn-round css class

Browse source
This commit is contained in:
booploops 2022-01-18 05:00:06 -08:00
parent d5013a9c15
commit 0d9e22b711
4 changed files with 99 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

126
src/renderer/style.less
View file

@ -1898,6 +1898,36 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* Cider */
.more-btn-round {
border-radius: 100%;
background: rgba(100, 100, 100, 0.5);
box-shadow: var(--ciderShadow-Generic);
width: 32px;
height: 32px;
border: 0px;
cursor: pointer;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
&:hover {
filter: brightness(125%);
}
&:active {
filter: brightness(75%);
transform: scale(0.98);
transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
}
.svg-icon {
width: 100%;
background: #eee;
--url: url("./views/svg/more.svg");
}
}
.about-page {
.teamBtn {
display: flex;
@ -2416,7 +2446,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
}
.playlist-floating-header {
.floating-header {
position: sticky;
top: 0;
left: 0;
@ -2608,25 +2638,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
}
.playlist-more {
border-radius: 100%;
background: var(--keyColor);
box-shadow: var(--ciderShadow-Generic);
width: 36px;
height: 36px;
border: 0px;
cursor: pointer;
z-index: 5;
&:hover {
background: var(--keyColor-rollover);
}
&:active {
background: var(--keyColor-pressed);
}
}
.playlist-time {
font-size: 0.9em;
margin: 6px;
@ -2684,6 +2695,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
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(24, 24, 24, 0.15);
top: var(--navigationBarHeight);
transition: opacity 0.1s var(--appleEase);
}
.artist-header {
background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
color: white;
@ -2693,26 +2717,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
min-height: 400px;
position: relative;
.artist-more {
border-radius: 100%;
background: var(--keyColor);
box-shadow: var(--ciderShadow-Generic);
width: 36px;
height: 36px;
.more-btn-round {
position: absolute;
bottom: 26px;
right: 32px;
border: 0px;
cursor: pointer;
z-index: 5;
&:hover {
background: var(--keyColor-rollover);
}
&:active {
background: var(--keyColor-pressed);
}
}
.animated {
@ -2779,28 +2787,31 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
}
.artist-play {
width: 36px;
height: 36px;
background: var(--keyColor);
border-radius: 100%;
box-shadow: var(--mediaItemShadow);
display: none;
cursor: pointer;
appearance: none;
border: 0px;
padding: 0px;
&:hover {
background: var(--keyColor-rollover);
}
&:active {
background: var(--keyColor-pressed);
}
}
.artist-title {
.artist-play {
width: 36px;
height: 36px;
background: var(--keyColor);
border-radius: 100%;
margin: 14px;
box-shadow: var(--mediaItemShadow);
display: none;
cursor: pointer;
appearance: none;
border: 0px;
padding: 0px;
transform: translateY(3px);
&:hover {
background: var(--keyColor-rollover);
}
&:active {
background: var(--keyColor-pressed);
}
margin: 14px;
}
&.artist-animation-on {
@ -2818,7 +2829,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
.artist-body {
padding: var(--contentInnerPadding);
padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
margin-top: -48px;
}
.showmoreless {