added built in styles, reduce visuals and inline drawer
This commit is contained in:
parent
b62bf9023c
commit
9eb1b408c9
6 changed files with 166 additions and 16 deletions
0
src/renderer/themes/compactui.less
Normal file
0
src/renderer/themes/compactui.less
Normal file
|
@ -1 +0,0 @@
|
||||||
//
|
|
|
@ -1,15 +0,0 @@
|
||||||
{
|
|
||||||
"name": "Groovy",
|
|
||||||
"description": "Inspired by Groove Music and Media Player found on Windows",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"author": "ciderapp",
|
|
||||||
"github_repo": "ciderapp/Groovy",
|
|
||||||
"directives": {
|
|
||||||
"windowLayout": {
|
|
||||||
"value": "twopanel"
|
|
||||||
},
|
|
||||||
"lcdArtworkSize": {
|
|
||||||
"value": 70
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
41
src/renderer/themes/inline_drawer.less
Normal file
41
src/renderer/themes/inline_drawer.less
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
&:not(.modular-fs) {
|
||||||
|
.app-drawer {
|
||||||
|
border-radius: 0px;
|
||||||
|
top : 0;
|
||||||
|
right : 0;
|
||||||
|
height : 100%;
|
||||||
|
box-shadow : unset;
|
||||||
|
border-left : 1px solid var(--color2);
|
||||||
|
background : var(--color1);
|
||||||
|
margin-right : 0px;
|
||||||
|
position : relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawertransition-enter-active,
|
||||||
|
.drawertransition-leave-active {
|
||||||
|
transition: margin .25s var(--appleEase), opacity .25s var(--appleEase);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawertransition-enter,
|
||||||
|
.drawertransition-leave-to {
|
||||||
|
margin-right: -300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1120px) {
|
||||||
|
.app-drawer {
|
||||||
|
margin-right: 0px;
|
||||||
|
position : absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawertransition-enter-active,
|
||||||
|
.drawertransition-leave-active {
|
||||||
|
transition: right .25s var(--appleEase), opacity .25s var(--appleEase);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawertransition-enter,
|
||||||
|
.drawertransition-leave-to {
|
||||||
|
right: -300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
115
src/renderer/themes/reduce_visuals.less
Normal file
115
src/renderer/themes/reduce_visuals.less
Normal file
|
@ -0,0 +1,115 @@
|
||||||
|
body {
|
||||||
|
--ciderShadow-Generic : var(--mediaItemShadow);
|
||||||
|
--mediaItemShadow-Shadow : var(--mediaItemShadow);
|
||||||
|
--mediaItemShadow-ShadowSubtle: var(--mediaItemShadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-artwork-container {
|
||||||
|
display : none;
|
||||||
|
animation: none !important;
|
||||||
|
|
||||||
|
.bg-artwork {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.replaycard-enter-active,
|
||||||
|
.replaycard-leave-active {
|
||||||
|
transition: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.replaycard-enter,
|
||||||
|
.replaycard-leave-to {
|
||||||
|
opacity : 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-enter-active,
|
||||||
|
.modal-leave-active {
|
||||||
|
transition: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-enter,
|
||||||
|
.modal-leave-to {
|
||||||
|
opacity : 0;
|
||||||
|
transform: scale(1.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wpfade-enter-active,
|
||||||
|
.wpfade-leave-active {
|
||||||
|
transition: opacity .1s var(--appleEase);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wpfade-enter,
|
||||||
|
.wpfade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wpfade_transform-enter-active,
|
||||||
|
.wpfade_transform-leave-active {
|
||||||
|
transition : unset;
|
||||||
|
will-change: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wpfade_transform-enter {
|
||||||
|
opacity : 0;
|
||||||
|
transform : unset;
|
||||||
|
will-change: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wpfade_transform-leave-to {
|
||||||
|
opacity : 0;
|
||||||
|
transform : unset;
|
||||||
|
will-change: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.wpfade_transform_backwards-enter-active,
|
||||||
|
.wpfade_transform_backwards-leave-active {
|
||||||
|
transition: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wpfade_transform_backwards-enter {
|
||||||
|
opacity : 0;
|
||||||
|
transform : unset;
|
||||||
|
will-change: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wpfade_transform_backwards-leave-to {
|
||||||
|
opacity : 0;
|
||||||
|
transform : unset;
|
||||||
|
will-change: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fabfade-enter-active,
|
||||||
|
.fabfade-leave-active {
|
||||||
|
transition: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fabfade-enter,
|
||||||
|
.fabfade-leave-to {
|
||||||
|
opacity : 0;
|
||||||
|
transform: scale(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fsModeSwitch-enter-active,
|
||||||
|
.fsModeSwitch-leave-active {
|
||||||
|
transition: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fsModeSwitch-enter,
|
||||||
|
.fsModeSwitch-leave-to {
|
||||||
|
transform: scale(1.10);
|
||||||
|
opacity : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.drawertransition-enter-active,
|
||||||
|
.drawertransition-leave-active {
|
||||||
|
transition: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawertransition-enter,
|
||||||
|
.drawertransition-leave-to {
|
||||||
|
right: -300px;
|
||||||
|
}
|
|
@ -991,6 +991,16 @@
|
||||||
newTheme: null
|
newTheme: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
this.themes.unshift({
|
||||||
|
name: "Reduce Visuals",
|
||||||
|
file: "reduce_visuals.less"
|
||||||
|
})
|
||||||
|
this.themes.unshift({
|
||||||
|
name: "Inline Drawer",
|
||||||
|
file: "inline_drawer.less"
|
||||||
|
})
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
gitHubExplore() {
|
gitHubExplore() {
|
||||||
this.$root.appRoute("themes-github")
|
this.$root.appRoute("themes-github")
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue