sam/Hyperia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style improvements

Browse Source
This commit is contained in:
metacryst
2025-06-23 15:28:04 -05:00
parent 760563167c
commit fd30ad1773
5 changed files with 41 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
ui/nav/header.js
View File

@@ -15,13 +15,12 @@ class Header extends Shadow {
VStack(() => {
input("", {width: "60vw", height: "35px"})
.background(Colors.searchBackground)
.background(darkMode ? "rgb(194, 200, 228)" : "rgb(255, 240, 220)")
.borderRadius(6, px)
.border(`1px solid ${Colors.searchBorder}`)
.paddingLeft(1, "em")
.color(darkMode ? Colors.accent : Colors.oak)
.fontSize("l")
.marginTop(47, px)
.outline("none")
.transition("border .2s")
.onFocus(function () {
@@ -42,68 +41,92 @@ class Header extends Shadow {
img("_/all.svg", 20, 20)
.backgroundColor(window.location.pathname === "/" ? Colors.base : Colors.oak)
.padding("horizontal", 10)
.paddingTop(1)
.paddingTop(3)
})
.borderRadius(12, px)
.borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/" ? Colors.oak : "none")
.marginRight("20", "px")
.onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
a("Images", () => {
img("_/picture.svg", 20, 20)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(1)
})
.borderRadius(12, px)
.borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/Images" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
.onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
a("Videos", () => {
img("_/video.svg", 20, 20)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(1)
})
.borderRadius(12, px)
.borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/Videos" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
.onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
a("Products", () => {
img("_/shopping.svg", 17, 17)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(3)
})
.borderRadius(12, px)
.borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/Producrs" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
.onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
a("Jobs", () => {
img("_/jobs.svg", 24, 24)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
})
.borderRadius(12, px)
.borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/Jobs" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
.onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
a("Files", () => {
img("_/doc.svg", 18, 18)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(3)
})
.borderRadius(12, px)
.borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/Files" ? Colors.oak : "none")
.marginRight("30", "px")
.color(Colors.ash)
.onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
})
.marginTop(20, px)
.justifyContent("center")
})
.flex(1)
.marginTop(56, px)
HStack(() => {
button(() => {