Merge branch 'main' of https://github.com/ciderapp/Cider into main
This commit is contained in:
Jason Chen
commit
90dcde279a
137 changed files with 8653 additions and 4265 deletions
|
|
@ -114,23 +114,35 @@
|
|||
margin: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Search Page
|
||||
&.search-page {
|
||||
|
||||
.searchToggle {
|
||||
float: right;
|
||||
|
||||
>button {
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-mediaitem-square.mediaitem-brick {
|
||||
width: 530px !important;
|
||||
.artwork-container .artwork{
|
||||
height:168px !important;
|
||||
width:507px !important;
|
||||
z-index: 1;
|
||||
}
|
||||
.title{
|
||||
font-weight: bold;
|
||||
justify-content: left;
|
||||
font-size: 18px;
|
||||
margin-top: -40px;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
width: 530px !important;
|
||||
|
||||
.artwork-container .artwork {
|
||||
height : 168px !important;
|
||||
width : 507px !important;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight : bold;
|
||||
justify-content: left;
|
||||
font-size : 18px;
|
||||
margin-top : -40px;
|
||||
z-index : 5;
|
||||
pointer-events : none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -553,7 +565,7 @@
|
|||
overflow-y : overlay;
|
||||
height : 100%;
|
||||
padding : 0px;
|
||||
background-color: var(--color1);
|
||||
background-color: var(--color3);
|
||||
|
||||
&.scrollbody {
|
||||
.tabs {
|
||||
|
|
@ -622,7 +634,7 @@
|
|||
opacity : .7;
|
||||
animation : playlistArtworkFadeIn 1s var(--appleEase);
|
||||
|
||||
.artworkMaterial>img {
|
||||
.artworkMaterial img {
|
||||
filter : brightness(100%) blur(80px) saturate(100%) contrast(1);
|
||||
object-position: center;
|
||||
object-fit : cover;
|
||||
|
|
@ -665,13 +677,23 @@
|
|||
}
|
||||
|
||||
.nameEdit {
|
||||
font-weight : 700;
|
||||
font-size : 1.6rem;
|
||||
flex-shrink : unset;
|
||||
background : transparent;
|
||||
border : 0px;
|
||||
color : inherit;
|
||||
font-family : inherit;
|
||||
font-weight: 700;
|
||||
font-size : 1.6rem;
|
||||
flex-shrink: unset;
|
||||
background : transparent;
|
||||
border : 0px;
|
||||
color : inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.descriptionEdit {
|
||||
font-size : 14px;
|
||||
flex-shrink: unset;
|
||||
background : transparent;
|
||||
border : 0px;
|
||||
color : inherit;
|
||||
font-family: inherit;
|
||||
width : 60vw;
|
||||
}
|
||||
|
||||
.descriptionEdit {
|
||||
|
|
@ -950,6 +972,10 @@
|
|||
right : 28px;
|
||||
}
|
||||
|
||||
&.animated .artist-header {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.artist-header {
|
||||
//background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
|
||||
color : white;
|
||||
|
|
@ -965,6 +991,19 @@
|
|||
// margin-top: -16px;
|
||||
}
|
||||
|
||||
.artist-hero {
|
||||
height:100%;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
|
||||
.mediaitem-artwork {
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.artworkContainer {
|
||||
position : absolute;
|
||||
|
|
@ -978,7 +1017,7 @@
|
|||
opacity : .7;
|
||||
animation : playlistArtworkFadeIn 1s var(--appleEase);
|
||||
|
||||
.artworkMaterial>img {
|
||||
.artworkMaterial img {
|
||||
filter : brightness(100%) blur(80px) saturate(100%) contrast(1);
|
||||
object-position: center;
|
||||
object-fit : cover;
|
||||
|
|
@ -1001,6 +1040,7 @@
|
|||
position : absolute;
|
||||
overflow : hidden;
|
||||
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
|
||||
z-index: 1;
|
||||
|
||||
video {
|
||||
overflow : hidden;
|
||||
|
|
@ -1166,8 +1206,9 @@
|
|||
&.addon {
|
||||
background: rgb(86 86 86 / 20%);
|
||||
}
|
||||
|
||||
&.applied {
|
||||
background: var(--keyColor-disabled);
|
||||
background : var(--keyColor-disabled);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1218,10 +1259,10 @@
|
|||
}
|
||||
|
||||
.handle {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
height : 100%;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-items : center;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
|
|
@ -1229,6 +1270,7 @@
|
|||
&:hover {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
|
@ -1645,26 +1687,223 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content-inner.cider-multiroom{
|
||||
.content-inner.oobe {
|
||||
position : absolute;
|
||||
overflow : hidden;
|
||||
top : 0;
|
||||
left : 0;
|
||||
bottom : 0;
|
||||
right : 0;
|
||||
display : grid;
|
||||
place-items: center;
|
||||
width : 100%;
|
||||
background : #1e1e1e;
|
||||
|
||||
.oobe-view {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
gap : 32px;
|
||||
max-width : 1280px;
|
||||
max-height : 720px;
|
||||
align-self : center;
|
||||
justify-self : center;
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
|
||||
|
||||
.oobe-header {
|
||||
font-size : 3em;
|
||||
text-shadow: var(--replayTextShadow);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.oobe-body {
|
||||
flex : 1;
|
||||
width : 100%;
|
||||
background : #ffffff0d;
|
||||
border-radius: 20px;
|
||||
padding : 3em;
|
||||
overflow-y : scroll;
|
||||
overflow-x : hidden;
|
||||
|
||||
@media screen and (max-width: 1161px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.text {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.blurb {
|
||||
white-space: pre-wrap;
|
||||
margin : 16px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
&.visual {
|
||||
padding: 1em;
|
||||
|
||||
.stylePicker {
|
||||
border-radius: 10px;
|
||||
overflow : hidden;
|
||||
cursor : pointer;
|
||||
transition : 0.25s all;
|
||||
box-shadow : 0px 2px 6px rgba(0, 0, 0, 0.25);
|
||||
width : 450px;
|
||||
margin : 0 auto;
|
||||
|
||||
.visualPreview {
|
||||
pointer-events: none;
|
||||
transition : .25s all;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding : 0;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
font-size : 1.25em;
|
||||
font-weight: 500;
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
border : 0px;
|
||||
text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.style-active {
|
||||
outline: 4px solid var(--keyColor);
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:hover {
|
||||
transform : scale(1.10) translateZ(-1px) translateY(10px);
|
||||
z-index : 1;
|
||||
box-shadow: 0px 12px 16px rgb(0 0 0 / 25%);
|
||||
}
|
||||
|
||||
@media screen and (max-height: 688px) {
|
||||
width: 270px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oobe-footer {
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
padding : 16px;
|
||||
|
||||
.md-btn {
|
||||
font-size : 18px;
|
||||
min-width : 128px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.oobe-titlebar {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
height : 46px;
|
||||
width : 100%;
|
||||
align-items : center;
|
||||
justify-content : right;
|
||||
display : flex;
|
||||
-webkit-app-region: drag;
|
||||
|
||||
.button-group {
|
||||
-webkit-app-region: no-drag;
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
width : 100px;
|
||||
height : 100%;
|
||||
justify-content : center;
|
||||
align-items : center;
|
||||
gap : 16px;
|
||||
|
||||
>button {
|
||||
height : 32px;
|
||||
width : 32px;
|
||||
font-size : 16px;
|
||||
border-radius : 0px;
|
||||
border : 0;
|
||||
appearance : none;
|
||||
position : relative;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
border-radius : 100%;
|
||||
|
||||
&.close {
|
||||
background-color: #fc3c44aa;
|
||||
&:hover {
|
||||
background-color: #fc3c44;
|
||||
}
|
||||
}
|
||||
|
||||
&.min {
|
||||
background-color: rgb(200 200 200 / 5%);
|
||||
&:hover {
|
||||
background-color: rgb(200 200 200 / 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.close::before {
|
||||
font-family: "codicon";
|
||||
content : "";
|
||||
color : white;
|
||||
}
|
||||
|
||||
&.min::before {
|
||||
font-family: "codicon";
|
||||
content : "";
|
||||
color : white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-inner.cider-multiroom {
|
||||
padding: 0px;
|
||||
.detail{
|
||||
|
||||
.detail {
|
||||
padding: 32px;
|
||||
}
|
||||
.header-desc{
|
||||
font-size: 1em;
|
||||
|
||||
.header-desc {
|
||||
font-size : 1em;
|
||||
font-weight: 400;
|
||||
}
|
||||
.artworkContainer{
|
||||
|
||||
.artworkContainer {
|
||||
height: 300px;
|
||||
width : 100%;
|
||||
img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
overflow : hidden;
|
||||
object-fit: cover;
|
||||
filter: unset;
|
||||
&:last-child{
|
||||
transform: unset;
|
||||
filter : unset;
|
||||
|
||||
&:last-child {
|
||||
transform: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue