improvements to style editor
This commit is contained in:
booploops
parent
cbbeb8009f
commit
605360360d
2 changed files with 149 additions and 107 deletions
|
|
@ -281,13 +281,14 @@
|
||||||
// Podcast Page
|
// Podcast Page
|
||||||
.content-inner.library-artists-page {
|
.content-inner.library-artists-page {
|
||||||
// top: 0;
|
// top: 0;
|
||||||
height: calc(100% - 60px - var(--navigationBarHeight));
|
height : calc(100% - 60px - var(--navigationBarHeight));
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
|
||||||
.inner-container {
|
.inner-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
height : calc(100% - var(--navigationBarHeight));
|
height : calc(100% - var(--navigationBarHeight));
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
height: 100%;
|
height : 100%;
|
||||||
|
|
||||||
.list-flat {
|
.list-flat {
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
|
|
@ -331,7 +332,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.episodes-list {
|
.episodes-list {
|
||||||
height: calc(100% + 60px);
|
height : calc(100% + 60px);
|
||||||
width : 100%;
|
width : 100%;
|
||||||
background: rgb(200 200 200 / 6%);
|
background: rgb(200 200 200 / 6%);
|
||||||
overflow-y: overlay;
|
overflow-y: overlay;
|
||||||
|
|
@ -568,7 +569,7 @@
|
||||||
font-size : 1.6rem;
|
font-size : 1.6rem;
|
||||||
//margin-bottom: 6px;
|
//margin-bottom: 6px;
|
||||||
margin-right : 6px;
|
margin-right : 6px;
|
||||||
margin-bottom: 6px;
|
margin-bottom : 6px;
|
||||||
flex-shrink : unset;
|
flex-shrink : unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -972,9 +973,11 @@
|
||||||
display : flex;
|
display : flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding : 16px 32px;
|
padding : 16px 32px;
|
||||||
|
|
||||||
>.latestRelease {
|
>.latestRelease {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
>.topSongs {
|
>.topSongs {
|
||||||
width: calc(100% - 250px);
|
width: calc(100% - 250px);
|
||||||
}
|
}
|
||||||
|
|
@ -1016,18 +1019,49 @@
|
||||||
.settings-page {
|
.settings-page {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
|
||||||
|
.stylestack-editor {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.btn,
|
||||||
|
.btn-group {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.themeLabel {
|
||||||
|
display:flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.removeItem {
|
||||||
|
border: 0px;
|
||||||
|
background: transparent;
|
||||||
|
height: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--textColor);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stylesDropdown {
|
||||||
|
>.dropdown-menu {
|
||||||
|
height : 300px;
|
||||||
|
overflow-y: overlay;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
width: 90%;
|
width : 90%;
|
||||||
margin: 16px auto 0px;
|
margin: 16px auto 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md-option-header {
|
.md-option-header {
|
||||||
padding: 0px 26px;
|
padding : 0px 26px;
|
||||||
border-bottom: unset;
|
border-bottom: unset;
|
||||||
border-top: unset;
|
border-top : unset;
|
||||||
font-weight: 600;
|
font-weight : 600;
|
||||||
background: rgb(255 255 255 / 0%);
|
background : rgb(255 255 255 / 0%);
|
||||||
font-size: 2em;
|
font-size : 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-option-body {
|
.settings-option-body {
|
||||||
|
|
@ -1050,36 +1084,38 @@
|
||||||
|
|
||||||
.carousel-item>img {
|
.carousel-item>img {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
width:100%;
|
width : 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spprofile-line {
|
.spprofile-line {
|
||||||
height: 300px;
|
height : 300px;
|
||||||
width: 100%;
|
width : 100%;
|
||||||
max-width: 1024px;
|
max-width: 1024px;
|
||||||
padding: 16px;
|
padding : 16px;
|
||||||
margin: 0 auto;
|
margin : 0 auto;
|
||||||
|
|
||||||
.spprofile-viewport {
|
.spprofile-viewport {
|
||||||
height: 100%;
|
height : 100%;
|
||||||
position: relative;
|
position : relative;
|
||||||
border-radius: var(--mediaItemRadius);
|
border-radius: var(--mediaItemRadius);
|
||||||
overflow: hidden;
|
overflow : hidden;
|
||||||
box-shadow: var(--mediaItemShadow-Shadow);
|
box-shadow : var(--mediaItemShadow-Shadow);
|
||||||
background: black;
|
background : black;
|
||||||
|
|
||||||
.spprev, .nextprev {
|
.spprev,
|
||||||
position: absolute;
|
.nextprev {
|
||||||
height: 100%;
|
position : absolute;
|
||||||
width: 64px;
|
height : 100%;
|
||||||
top: 0;
|
width : 64px;
|
||||||
|
top : 0;
|
||||||
background: rgb(0 0 0 / 20%);
|
background: rgb(0 0 0 / 20%);
|
||||||
z-index: 1;
|
z-index : 1;
|
||||||
border: 0px;
|
border : 0px;
|
||||||
transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase);
|
transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--selected);
|
background: var(--selected);
|
||||||
transform: scale(1.1);
|
transform : scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
|
|
@ -1088,22 +1124,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
content: '';
|
content : '';
|
||||||
position: absolute;
|
position : absolute;
|
||||||
top: 0;
|
top : 0;
|
||||||
left: 0;
|
left : 0;
|
||||||
width: 100%;
|
width : 100%;
|
||||||
height: 100%;
|
height : 100%;
|
||||||
background: #eee;
|
background : #eee;
|
||||||
opacity: 1;
|
opacity : 1;
|
||||||
-webkit-mask-position: center;
|
-webkit-mask-position: center;
|
||||||
-webkit-mask-repeat: no-repeat;
|
-webkit-mask-repeat : no-repeat;
|
||||||
-webkit-mask-size: 1em;
|
-webkit-mask-size : 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.spprev {
|
.spprev {
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
-webkit-mask-image: url("./views/svg/chevron-left.svg");
|
-webkit-mask-image: url("./views/svg/chevron-left.svg");
|
||||||
}
|
}
|
||||||
|
|
@ -1112,6 +1149,7 @@
|
||||||
|
|
||||||
.nextprev {
|
.nextprev {
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
-webkit-mask-image: url("./views/svg/chevron-right.svg");
|
-webkit-mask-image: url("./views/svg/chevron-right.svg");
|
||||||
}
|
}
|
||||||
|
|
@ -1119,25 +1157,25 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.spslide {
|
.spslide {
|
||||||
position: absolute;
|
position : absolute;
|
||||||
width: 100%;
|
width : 100%;
|
||||||
height: 100%;
|
height : 100%;
|
||||||
overflow: hidden;
|
overflow : hidden;
|
||||||
background: black;
|
background: black;
|
||||||
|
|
||||||
>img {
|
>img {
|
||||||
WIDTH: 100%;
|
WIDTH : 100%;
|
||||||
height: 100%;
|
height : 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sptitle {
|
.sptitle {
|
||||||
position: absolute;
|
position : absolute;
|
||||||
bottom: 0px;
|
bottom : 0px;
|
||||||
left: 0;
|
left : 0;
|
||||||
width: 100%;
|
width : 100%;
|
||||||
text-align: center;
|
text-align : center;
|
||||||
font-size: 18px;
|
font-size : 18px;
|
||||||
text-shadow: 0px 2px 4px #00000033;
|
text-shadow: 0px 2px 4px #00000033;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1145,18 +1183,19 @@
|
||||||
.spfade-enter-active,
|
.spfade-enter-active,
|
||||||
.spfade-leave-active {
|
.spfade-leave-active {
|
||||||
--transitionTime: 0.2s;
|
--transitionTime: 0.2s;
|
||||||
transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
|
transition : opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
|
||||||
will-change: opacity, transform;
|
will-change : opacity, transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spfade-enter {
|
.spfade-enter {
|
||||||
opacity: 0;
|
opacity : 0;
|
||||||
transform: scale(1.2) translate3d(0,0,0);
|
transform : scale(1.2) translate3d(0, 0, 0);
|
||||||
will-change: opacity, transform;
|
will-change: opacity, transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spfade-leave-to {
|
.spfade-leave-to {
|
||||||
opacity: 1;
|
opacity : 1;
|
||||||
transform: scale(1) translate3d(0,0,0);
|
transform : scale(1) translate3d(0, 0, 0);
|
||||||
will-change: opacity, transform;
|
will-change: opacity, transform;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1171,9 +1210,11 @@
|
||||||
0% {
|
0% {
|
||||||
background-position: 0% 0%;
|
background-position: 0% 0%;
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
background-position: 100% 0%;
|
background-position: 100% 0%;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
background-position: 0% 0%;
|
background-position: 0% 0%;
|
||||||
}
|
}
|
||||||
|
|
@ -1186,11 +1227,11 @@
|
||||||
|
|
||||||
.md-btn-replay {
|
.md-btn-replay {
|
||||||
background-image: linear-gradient(-45deg, #2e2173, #925042);
|
background-image: linear-gradient(-45deg, #2e2173, #925042);
|
||||||
animation: gradient-animation 5s ease-in-out infinite;
|
animation : gradient-animation 5s ease-in-out infinite;
|
||||||
background-size: 400% 400%;
|
background-size : 400% 400%;
|
||||||
border : 0px;
|
border : 0px;
|
||||||
box-shadow : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
|
box-shadow : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
|
||||||
text-transform: uppercase;
|
text-transform : uppercase;
|
||||||
font-weight : bold;
|
font-weight : bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1198,13 +1239,13 @@
|
||||||
font-size : 1em;
|
font-size : 1em;
|
||||||
padding : 16px;
|
padding : 16px;
|
||||||
background-image: linear-gradient(-45deg, #2e2173, #925042);
|
background-image: linear-gradient(-45deg, #2e2173, #925042);
|
||||||
animation: gradient-animation 5s ease-in-out infinite;
|
animation : gradient-animation 5s ease-in-out infinite;
|
||||||
background-size: 400% 400%;
|
background-size : 400% 400%;
|
||||||
border : 0px;
|
border : 0px;
|
||||||
box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
|
box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
|
||||||
margin-top : 1em;
|
margin-top : 1em;
|
||||||
font-size : 0.9em;
|
font-size : 0.9em;
|
||||||
text-transform: uppercase;
|
text-transform : uppercase;
|
||||||
font-weight : bold;
|
font-weight : bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1375,10 +1416,10 @@
|
||||||
|
|
||||||
.replay-viewport {
|
.replay-viewport {
|
||||||
background-image: linear-gradient(-45deg, #2e2173, #925042);
|
background-image: linear-gradient(-45deg, #2e2173, #925042);
|
||||||
animation: gradient-animation 5s ease-in-out infinite;
|
animation : gradient-animation 5s ease-in-out infinite;
|
||||||
background-size: 400% 400%;
|
background-size : 400% 400%;
|
||||||
padding : 16px 40px;
|
padding : 16px 40px;
|
||||||
border-radius: 10px;
|
border-radius : 10px;
|
||||||
box-shadow : var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
|
box-shadow : var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
|
||||||
color : rgb(238 238 238 / 86%);
|
color : rgb(238 238 238 / 86%);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -843,13 +843,13 @@
|
||||||
<div class="md-option-line">
|
<div class="md-option-line">
|
||||||
<!-- Do not translate -->
|
<!-- Do not translate -->
|
||||||
<div class="md-option-segment">
|
<div class="md-option-segment">
|
||||||
Style Stack Editor
|
Style Editor<br>
|
||||||
|
<small>Mix and match various theme components to get Cider looking exactly how you want.</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="md-option-segment">
|
||||||
|
|
||||||
<div class="md-option-line">
|
|
||||||
<stylestack-editor :themes="themes"/>
|
<stylestack-editor :themes="themes"/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="md-option-line">
|
<div class="md-option-line">
|
||||||
<div class="md-option-segment">
|
<div class="md-option-segment">
|
||||||
|
|
@ -954,24 +954,23 @@
|
||||||
Vue.component('stylestack-editor', {
|
Vue.component('stylestack-editor', {
|
||||||
/*html*/
|
/*html*/
|
||||||
template: `
|
template: `
|
||||||
|
<div class="stylestack-editor">
|
||||||
|
<draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
|
||||||
|
<b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col>
|
<b-col class="themeLabel">{{getThemeName(theme)}}</b-col>
|
||||||
<select size="6" v-model="selected" style="width:100%;">
|
<b-col sm="auto">
|
||||||
<option v-for="theme in $root.cfg.visual.styles" :value="theme">{{theme}}</option>
|
<button class="removeItem codicon codicon-close" @click="remove(theme)"></button>
|
||||||
</select>
|
|
||||||
<div class="btn-group" style="width: 100%">
|
|
||||||
<button @click="moveUp" class="md-btn md-btn-small">Up</button>
|
|
||||||
<button @click="remove" class="md-btn md-btn-small">Remove</button>
|
|
||||||
<button @click="moveDown" class="md-btn md-btn-small">Down</button>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
<b-col>
|
|
||||||
<select class="md-select" style="width:100%;" v-model="newTheme">
|
|
||||||
<option v-for="theme in themes" :value="theme.file">{{theme.name}}</option>
|
|
||||||
</select>
|
|
||||||
<button class="md-btn" @click="addStyle()">Add</button>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
|
</b-list-group-item>
|
||||||
|
<b-list-group-item variant="dark">
|
||||||
|
<b-dropdown class="stylesDropdown" variant="primary" text="Add Style...">
|
||||||
|
<b-dropdown-item v-for="theme in themes" @click="addStyle(theme.file)">{{theme.name}}</b-dropdown-item>
|
||||||
|
</b-dropdown>
|
||||||
|
</b-list-group-item>
|
||||||
|
</draggable>
|
||||||
|
</div>
|
||||||
`,
|
`,
|
||||||
props: {
|
props: {
|
||||||
themes: {
|
themes: {
|
||||||
|
|
@ -986,6 +985,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getThemeName(filename) {
|
||||||
|
return this.themes.find(theme => theme.file === filename).name;
|
||||||
|
},
|
||||||
moveUp() {
|
moveUp() {
|
||||||
const styles = this.$root.cfg.visual.styles
|
const styles = this.$root.cfg.visual.styles
|
||||||
const index = styles.indexOf(this.selected)
|
const index = styles.indexOf(this.selected)
|
||||||
|
|
@ -1004,16 +1006,15 @@
|
||||||
}
|
}
|
||||||
this.$root.reloadStyles()
|
this.$root.reloadStyles()
|
||||||
},
|
},
|
||||||
remove() {
|
remove(style) {
|
||||||
const styles = this.$root.cfg.visual.styles
|
const styles = this.$root.cfg.visual.styles
|
||||||
const index = styles.indexOf(this.selected)
|
const index = styles.indexOf(style)
|
||||||
styles.splice(index, 1)
|
styles.splice(index, 1)
|
||||||
this.$root.reloadStyles()
|
this.$root.reloadStyles()
|
||||||
},
|
},
|
||||||
addStyle() {
|
addStyle(style) {
|
||||||
const styles = this.$root.cfg.visual.styles
|
const styles = this.$root.cfg.visual.styles
|
||||||
styles.push(this.newTheme)
|
styles.push(style)
|
||||||
this.newTheme = null
|
|
||||||
this.$root.reloadStyles()
|
this.$root.reloadStyles()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue