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

testing css things with a theme called sweetener

Browse source
This commit is contained in:
booploops 2022-02-23 03:01:17 -08:00
parent 660a12423e
commit 9e52541ecf
2 changed files with 69 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/renderer/themes/sweetener.less Normal file
View file

@ -0,0 +1,68 @@
@panelColorsFallback: rgb(30 30 30);
@panelColors : rgb(30 30 30 / 45%);
.menu-panel {
.menu-panel-body {
background-color: @panelColors;
backdrop-filter : blur(32px) saturate(180%);
animation: menuIn .10s var(--appleEase);
}
@keyframes menuIn {
0% {
opacity : 0;
transform : translateY(-10px);
background: @panelColorsFallback;
}
100% {
opacity : 1;
transform : translateY(0);
background: @panelColors;
}
}
}
.cd-mediaitem-square:not(.mediaitem-card) {
transition : transform .2s var(--appleEase);
transition-delay: .1s;
padding : 12px;
// background-color: red;
height: 250px;
.artwork-container {}
.info-rect {}
.artwork-container,
.info-rect {
transition : transform .22s var(--appleEase);
transition-delay: .05s;
}
&:hover {
.artwork-container {
transform : scale(1.1) ;
transition : transform .1s var(--appleEase);
transition-delay: 0s;
transform-origin: center;
}
.info-rect {
z-index : 1;
transition : transform .1s var(--appleEase);
transition-delay: 0s;
transform : translateY(8px);
}
}
&:active {
}
}

1
src/renderer/views/pages/settings.ejs
View file

@ -135,6 +135,7 @@
<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">