Merge branch 'ciderapp:develop' into develop
This commit is contained in:
Gabriel Davila
GitHub
commit
2032e280bc
10 changed files with 224 additions and 39 deletions
27
src/renderer/less/bootstrap.less
vendored
27
src/renderer/less/bootstrap.less
vendored
|
|
@ -35,10 +35,12 @@
|
|||
color: #212529;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
background-color: var(--color1);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-ShadowSubtle);
|
||||
backdrop-filter: var(--glassFilter);
|
||||
}
|
||||
.dropdown-menu[data-bs-popper] {
|
||||
top: 100%;
|
||||
|
|
@ -1388,23 +1390,24 @@ fieldset:disabled .btn {
|
|||
|
||||
.btn-secondary {
|
||||
color : #fff;
|
||||
background-color: #6c757d;
|
||||
border-color : #6c757d;
|
||||
border-color : 1px solid rgba(100, 100, 100, 0.35);
|
||||
background-color: rgba(100, 100, 100, 0.25);
|
||||
border-top-color: 1px solid rgba(100, 100, 100, 0.5);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
color : #fff;
|
||||
background-color: #5c636a;
|
||||
border-color : #565e64;
|
||||
// background-color: #5c636a;
|
||||
// border-color : #565e64;
|
||||
}
|
||||
|
||||
.btn-check:focus+.btn-secondary,
|
||||
.btn-secondary:focus {
|
||||
color : #fff;
|
||||
background-color: #5c636a;
|
||||
border-color : #565e64;
|
||||
box-shadow : 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
|
||||
}
|
||||
// .btn-check:focus+.btn-secondary,
|
||||
// .btn-secondary:focus {
|
||||
// color : #fff;
|
||||
// background-color: #5c636a;
|
||||
// border-color : #565e64;
|
||||
// box-shadow : 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
|
||||
// }
|
||||
|
||||
.btn-check:checked+.btn-secondary,
|
||||
.btn-check:active+.btn-secondary,
|
||||
|
|
|
|||
|
|
@ -581,6 +581,9 @@ const app = new Vue({
|
|||
if (this.cfg.visual.theme != "default.less" && this.cfg.visual.theme != "") {
|
||||
this.setTheme(this.cfg.visual.theme)
|
||||
}
|
||||
if (this.cfg.visual.styles.length != 0) {
|
||||
await this.reloadStyles()
|
||||
}
|
||||
|
||||
if (this.platform == "darwin") {
|
||||
this.chrome.windowControlPosition = "left"
|
||||
|
|
@ -762,6 +765,9 @@ const app = new Vue({
|
|||
ipcRenderer.on('theme-update', (event, arg) => {
|
||||
less.refresh(true, true, true)
|
||||
self.setTheme(self.cfg.visual.theme, true)
|
||||
if (app.cfg.visual.styles.length != 0) {
|
||||
app.reloadStyles()
|
||||
}
|
||||
})
|
||||
|
||||
ipcRenderer.on('SoundCheckTag', (event, tag) => {
|
||||
|
|
@ -899,9 +905,6 @@ const app = new Vue({
|
|||
this.$forceUpdate()
|
||||
}, 500)
|
||||
ipcRenderer.invoke("renderer-ready", true)
|
||||
if (this.cfg.visual.styles.length != 0) {
|
||||
this.reloadStyles()
|
||||
}
|
||||
document.querySelector("#LOADER").remove()
|
||||
if (this.cfg.general.themeUpdateNotification) {
|
||||
this.checkForThemeUpdates()
|
||||
|
|
@ -986,6 +989,7 @@ const app = new Vue({
|
|||
less.registerStylesheetsImmediately()
|
||||
less.refresh(true, true, true)
|
||||
this.$forceUpdate()
|
||||
return
|
||||
},
|
||||
macOSEmu() {
|
||||
this.chrome.forceDirectives["macosemu"] = {
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@
|
|||
--songProgressBackground: #333;
|
||||
--textColor: #eee;
|
||||
--replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
|
||||
--glassFilter: blur(16px) saturate(180%);
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
|
|
@ -238,6 +239,17 @@ input[type="text"], input[type="number"] {
|
|||
opacity: 0.70;
|
||||
}
|
||||
|
||||
a.dropdown-item {
|
||||
color: var(--textColor);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--selected);
|
||||
color: var(--textColor);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--selected-click);
|
||||
}
|
||||
}
|
||||
|
||||
.bg-artwork {
|
||||
position: absolute;
|
||||
|
|
|
|||
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;
|
||||
}
|
||||
|
|
@ -226,7 +226,6 @@
|
|||
<select class="md-select" @change="$root.setTheme($root.cfg.visual.theme)" v-model="$root.cfg.visual.theme">
|
||||
<option value="default.less">{{$root.getLz('settings.option.visual.theme.default')}}</option>
|
||||
<option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}</option>
|
||||
<option value="sweetener.less">Sweetener</option>
|
||||
<option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
|
||||
</select>
|
||||
<button class="md-btn md-btn-small md-btn-block" @click="gitHubExplore()" style="margin-top: 8px">
|
||||
|
|
@ -964,10 +963,17 @@
|
|||
</b-col>
|
||||
</b-row>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item variant="dark">
|
||||
<b-list-group-item slot="footer" style="-webkit-user-drag: none" variant="dark">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<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-col>
|
||||
<b-col>
|
||||
<b-btn @click="gitHubExplore()">{{$root.getLz('settings.option.visual.theme.github.explore')}}</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-list-group-item>
|
||||
</draggable>
|
||||
</div>
|
||||
|
|
@ -984,9 +990,30 @@
|
|||
newTheme: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.themes.unshift({
|
||||
name: "Sweetener",
|
||||
file: "sweetener.less"
|
||||
})
|
||||
this.themes.unshift({
|
||||
name: "Reduce Visuals",
|
||||
file: "reduce_visuals.less"
|
||||
})
|
||||
this.themes.unshift({
|
||||
name: "Inline Drawer",
|
||||
file: "inline_drawer.less"
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
gitHubExplore() {
|
||||
this.$root.appRoute("themes-github")
|
||||
},
|
||||
getThemeName(filename) {
|
||||
try {
|
||||
return this.themes.find(theme => theme.file === filename).name;
|
||||
}catch(e) {
|
||||
return filename;
|
||||
}
|
||||
},
|
||||
moveUp() {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
v-model="$root.cfg.visual.theme">
|
||||
<option value="default.less">{{$root.getLz('settings.option.visual.theme.default')}}</option>
|
||||
<option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}</option>
|
||||
<option value="sweetener.less">Sweetener</option>
|
||||
<option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue