50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
css(`
|
|
messages- input::placeholder {
|
|
font-size: 0.9em;
|
|
color: var(--accent);
|
|
}
|
|
`)
|
|
|
|
class Messages extends Shadow {
|
|
|
|
render() {
|
|
ZStack(() => {
|
|
p("Coming Soon!")
|
|
.position("absolute")
|
|
.x(50, vw).y(50, vh)
|
|
.transform("translate(-50%, -50%)")
|
|
|
|
HStack(() => {
|
|
input("Search...", "50vw")
|
|
.attr({
|
|
"type": "text"
|
|
})
|
|
.fontSize(1.1, em)
|
|
.paddingLeft(1.3, em)
|
|
.background("transparent")
|
|
.border("1px solid var(--accent)")
|
|
.outline("none")
|
|
.color("var(--accent)")
|
|
.borderRadius(10, px)
|
|
button("Search")
|
|
.marginLeft(2, em)
|
|
.borderRadius(10, px)
|
|
.background("transparent")
|
|
.border("1px solid var(--accent)")
|
|
.color("var(--accent)")
|
|
})
|
|
.x(50, vw).y(5, vh)
|
|
.position("absolute")
|
|
.transform("translateX(-50%)")
|
|
})
|
|
.width(100, "%")
|
|
.height(100, "%")
|
|
}
|
|
|
|
connectedCallback() {
|
|
// Optional additional logic
|
|
}
|
|
}
|
|
|
|
registerShadow(Messages)
|