ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

added pixelated navigation bar

Browse Source
This commit is contained in:
8BitBiscotti
2024-12-09 14:50:45 +01:00
parent fa50845bbc
commit 05f971fa8d
5 changed files with 88 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
navBar.css
+41
View File
@@ -0,0 +1,41 @@
li {
list-style-type: none;
display: inline;
margin: calc(1px * var(--pxDensity));
}
ul {
padding: calc(1px * var(--pxDensity)) 0px;
}
.navBar {
background-color: var(--navBar_Inner);
width: calc(128px * var(--pxDensity));
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border),
calc(-1px * var(--pxDensity)) 0px var(--navBar_Border),
0px calc(1px * var(--pxDensity)) var(--navBar_Border),
0px calc(-1px * var(--pxDensity)) var(--navBar_Border),
0px calc(2px * var(--pxDensity)) 0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5);
}
.navBtn {
background-color: transparent;
width: calc(12px * var(--pxDensity));
height: calc(12px * var(--pxDensity));
display: inline-block;
padding: 0%;
border: none;
}
.navBtnImg {
width: 100%;
height: 100%;
image-rendering: pixelated;
margin: 0%;
filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
}
.navBtnImg:hover {
filter: brightness(1.35) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
cursor: pointer;
}
.navBtnImg:active {
filter: brightness(0.75);
transform: translateY(calc(1px * var(--pxDensity)));
}