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

fixed a bug where the navBar was a lot bigger than the buttons

Browse Source
This commit is contained in:
8BitBiscotti
2024-12-09 15:06:09 +01:00
parent e1f9dd84b0
commit f767e7c2ad
2 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+15
View File
@@ -22,6 +22,21 @@
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png"> <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
</button> </button>
</li> </li>
<li>
<button class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
</button>
</li>
<li>
<button class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
</button>
</li>
<li>
<button class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
</button>
</li>
</ul> </ul>
<script src="/pxDensity.js"></script> <script src="/pxDensity.js"></script>
navBar.css
+6 -5
View File
@@ -3,9 +3,6 @@ li {
display: inline; display: inline;
margin: calc(1px * var(--pxDensity)); margin: calc(1px * var(--pxDensity));
} }
ul {
padding: calc(1px * var(--pxDensity)) 0px;
}
.navBar { .navBar {
background-color: var(--navBar_Inner); background-color: var(--navBar_Inner);
@@ -13,8 +10,12 @@ ul {
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border), box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border),
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(-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);
filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
padding: calc(1px * var(--pxDensity)) 0px;
display: inline-block;
width: auto;
} }
.navBtn { .navBtn {
background-color: transparent; background-color: transparent;