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

pilllssssss

Browse source
This commit is contained in:
booploops 2022-04-21 02:40:55 -07:00
parent 20e7f17386
commit 5bdacf6911
3 changed files with 112 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1861,4 +1861,107 @@ input[type=checkbox][switch]:checked:active::before {
.search-tab.active {
background: var(--keyColor);
}
// fancy pills
.nav-pills {
position : relative;
.nav-link {
transition: transform .3s var(--appleEase);
position : relative;
&:after {
--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);
// 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;
&: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;
}
}