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

WIP settings panel, added #app[window-state]

Browse source
This commit is contained in:
booploops 2022-06-28 01:30:39 -07:00
parent c54b1ac363
commit f71ca88298
14 changed files with 2762 additions and 1019 deletions
Download patch file Download diff file Expand all files Collapse all files

185
src/renderer/less/elements.less
View file

@ -2168,107 +2168,116 @@ input[type=checkbox][switch]:checked:active::before {
}
// fancy pills
.nav-pills {
position: relative;
.nav-link {
transition: transform .3s var(--appleEase);
.fancy-pills {
.nav-pills {
position: relative;
&:after {
--dist: 1px;
content: "";
position: absolute;
top: var(--dist);
bottom: var(--dist);
left: var(--dist);
right: var(--dist);
// width : 100%;
// height : 100%;
.nav-link {
transition: transform .3s var(--appleEase);
position: relative;
background-color: transparent;
border: 0;
border-radius: 50px;
z-index: -1;
opacity: 0;
transition: background-color .5s var(--appleEase), opacity 0.25s var(--appleEase), border-radius .32s var(--appleEase);
}
&:hover {
outline: none;
transform: scale(1.1);
// background: #eee;
background: transparent;
color: #333;
&:after {
opacity: 1;
background-color: #eee;
transition: background-color .25s var(--appleEase),
border-radius .25s var(--appleEase),
color .0s var(--appleEase),
opacity 0.0s var(--appleEase);
}
}
&.active {
outline: none;
transform: scale(1.1);
// background: #eee;
background: transparent;
color: #333;
font-weight: 600;
&:after {
opacity: 1;
background-color: #eee;
}
}
}
&:hover {
.nav-link.active {
outline: none;
transform: scale(1.0);
background: transparent;
color: #eee;
transform: scale(1.0);
-webkit-user-drag: none;
font-weight: 500;
margin: 0px 4px;
&:after {
background: rgb(200 200 200 / 15%);
opacity: 1;
transition: color 0s;
// border-radius: 5px;
--dist: 4px;
--dist: 1px;
content: "";
position: absolute;
top: var(--dist);
bottom: var(--dist);
left: var(--dist);
right: var(--dist);
// width : 100%;
// height : 100%;
background-color: transparent;
border-radius: 50px;
z-index: -1;
opacity: 0;
transition: background-color .5s var(--appleEase), opacity 0.25s var(--appleEase), border-radius .32s var(--appleEase);
}
&:hover {
outline: none;
transform: scale(1.1);
z-index: 1;
// background: #eee;
background: transparent;
color: #333;
&:after {
background: #eee;
border-radius: inherit;
--dist: 1px;
opacity: 1;
background-color: #eee;
transition: background-color .25s var(--appleEase),
border-radius .25s var(--appleEase),
color .0s var(--appleEase),
opacity 0.0s var(--appleEase);
}
}
&.active {
outline: none;
transform: scale(1.1);
// background: #eee;
background: transparent;
color: #333;
font-weight: 600;
&:after {
opacity: 1;
background-color: #eee;
}
}
}
&:hover {
.nav-link.active {
outline: none;
transform: scale(1.0);
background: transparent;
color: #eee;
transform: scale(1.0);
&:after {
background: rgb(200 200 200 / 15%);
opacity: 1;
transition: color 0s;
// border-radius: 5px;
--dist: 4px;
}
&:hover {
transform: scale(1.1);
z-index: 1;
color: #333;
&:after {
background: #eee;
border-radius: inherit;
--dist: 1px;
}
}
}
}
}
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgb(200 200 200 / 10%);
border-radius: 50px;
z-index: 0;
pointer-events: none;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgb(200 200 200 / 10%);
border-radius: 50px;
z-index: 0;
pointer-events: none;
}
}
}