bluesaxman/librePECS
1
0
Fork 0
mirror of https://forge.murkfall.net/bluesaxman/librePECS.git synced 2026-03-13 10:14:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

added additional styling

Browse Source
This commit is contained in:
bluesaxman
2025-08-12 16:08:02 -06:00
parent 460a6128c3
commit 7930b61be6
2 changed files with 63 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
main.css
View File

@@ -37,3 +37,54 @@ body {
font-size: 300%; font-size: 300%;
text-align: center; text-align: center;
} }
.dialog {
display: block;
position: absolute;
top: 0;
left: -100vw;
height: 100vh;
width: 100vw;
backdrop-filter: blur(0px);
transition: left 500ms, backdrop-filter 500ms;
}
.title_bar {
height: 50px;
box-shadow: inset 0 -2px 3px 0 #888;
display: flex;
justify-content: stretch;
font-size: 32pt;
user-select: none;
}
.title_text {
text-align: center;
flex: 1;
}
.close {
display: inline-block;
background: rgba(128,128,128,0.01);
box-shadow: inset 2px 2px 2px 0 rgba(128,128,128,0.5);
width: 50px;
text-align: center;
cursor: pointer;
}
.focused {
left: 0vw;
backdrop-filter: blur(5px);
transition: left 500ms, backdrop-filter 500ms;
}
.library_body {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 5%;
padding: 5%;
}
.pec {
text-align: center;
}

16
main.js
View File

@@ -7,7 +7,11 @@ class auxillery_dialog {
this.root.classList.add("dialog"); this.root.classList.add("dialog");
this.title = "string" == typeof title ? title : ""; this.title = "string" == typeof title ? title : "";
var title_bar = document.createElement("div"); var title_bar = document.createElement("div");
title_bar.innerText = this.title; title_bar.classList.add("title_bar");
var titleText = document.createElement("span");
titleText.innerText = this.title;
titleText.classList.add("title_text");
title_bar.appendChild(titleText);
this.root.appendChild(title_bar); this.root.appendChild(title_bar);
this.body = document.createElement("div"); this.body = document.createElement("div");
this.root.appendChild(me.body); this.root.appendChild(me.body);
@@ -36,14 +40,18 @@ app.gui.view.id = "view";
app.gui.main.appendChild(app.gui.view); app.gui.main.appendChild(app.gui.view);
// Library popup // Library popup
app.gui.library = new auxillery_dialog("Library"); app.gui.library = new auxillery_dialog("Library");
app.gui.library.body.classList.add("library_body");
app.gui.main.append(app.gui.library.root);
// Options popup // Options popup
app.gui.options = new auxillery_dialog("Options"); app.gui.options = new auxillery_dialog("Options");
// pre-populate grid with emptys // pre-populate grid with emptys
for (var x = 0; x < 16; x++) { for (var x = 0; x < 16; x++) {
var name = "pec"+x; var name = "pec"+x;
var thisPec = app.gui[name] = document.createElement("span"); var thisPec = document.createElement("span");
thisPec.classList.add("pecSlot","empty"); app.gui[name] = thisPec;
thisPec.innerHTML = "<p>+</p>"; thisPec.classList.add("pecSlot");
thisPec.id = name;
clearPec(x);
app.gui.view.appendChild(thisPec); app.gui.view.appendChild(thisPec);
thisPec.addEventListener("click", (p,x)=>{ thisPec.addEventListener("click", (p,x)=>{
app.currentPec = p; app.currentPec = p;