piwalker/FCLauncher
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 5 Wiki Activity

Fixed navbar flicker on windows

Browse Source
This commit is contained in:
Cuptain 2024-11-05 11:56:10 +11:00
parent 3e667f004d
commit 24f32cdba5
2 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
fclauncher/frontend/src/App.svelte
View File

@ -19,10 +19,10 @@
r = document.getElementById('wrapper'); r = document.getElementById('wrapper');
}) })
function setMargin(){ function setMargin(){
document.documentElement.style.setProperty('--navMargin', '17rem'); r.style.setProperty('--navMargin', '17rem');
} }
function unsetMargin(){ function unsetMargin(){
document.documentElement.style.setProperty('--navMargin', '5rem'); r.style.setProperty('--navMargin', '5rem');
} }
function initialColor() { function initialColor() {
@ -70,12 +70,13 @@
--text-secondary: #ececec; --text-secondary: #ececec;
--bg-secondary: #2c2c33; --bg-secondary: #2c2c33;
--bg-primary: #141418; --bg-primary: #141418;
--navMargin: 5rem;
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
} }
#wrapper{ #wrapper{
--accent-color: purple; --accent-color: purple;
--navMargin: 5rem;
} }
.navbar{ .navbar{
z-index: 5; z-index: 5;

12
fclauncher/frontend/src/Navbar.svelte
View File

@ -91,11 +91,12 @@ function unextend(){
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
height: 100%; height: 100%;
} }
.nav-item{ .nav-item{
width: 100%; width: 100%;
display: flex;
white-space: nowrap;
} }
.nav-item:last-child{ .nav-item:last-child{
margin-top: auto; margin-top: auto;
@ -120,13 +121,16 @@ function unextend(){
fill: var(--text-primary); fill: var(--text-primary);
transition: 300ms; transition: 300ms;
text-decoration: none; text-decoration: none;
width: 17rem;
} }
.nav-icon{ .nav-icon{
width: 3rem; width: 3rem;
margin: 0 1rem; margin: 0 1rem;
white-space: nowrap;
align-self: left;
} }
.nav-link:hover{ .nav-link:hover{
fill: purple; fill:var(--accent-color);
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
} }
@ -150,14 +154,14 @@ function unextend(){
} }
.navbar:hover .logo svg { .navbar:hover .logo svg {
transform: rotate(-180deg); transform: rotate(-180deg);
fill: purple; fill:var(--accent-color);
} }
.logo .link-text{ .logo .link-text{
color: var(--text-secondary); color: var(--text-secondary);
transition: 300ms; transition: 300ms;
} }
.navbar:hover .logo .link-text{ .navbar:hover .logo .link-text{
color:purple; color:var(--accent-color);
transition: 300ms; transition: 300ms;
} }
</style> </style>