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

pulled colors into css variables for easy theming

Browse Source
This commit is contained in:
bluesaxman
2025-08-18 15:20:51 -06:00
parent ae650db3f9
commit 056d6fd282
2 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -17,7 +17,7 @@ A free open source Picture Exchange Communication System or PECS
### Initial goals ### Initial goals
[ ] Basic web app UI [X] Basic web app UI
[ ] Add/Remove custom PEC's [ ] Add/Remove custom PEC's
[ ] Multipul PEC boards [X] Multipul PEC boards
[ ] Convert to android app [ ] Convert to android app

41
main.css
View File

@@ -1,3 +1,13 @@
:root {
--foreground-high: rgba(10,10,10,1);
--foreground-low: rgba(40,40,40,1);
--background-high: rgba(200,200,200,0.5);
--background-low: rgba(250,250,250,0.5);
--middle-accent: rgba(128,128,128,0.1);
--middle-shade: rgba(128,128,128,0.5);
--shadows-color: rgba(138,138,138,1);
}
body { body {
margin:0; margin:0;
} }
@@ -13,8 +23,9 @@ body {
} }
#navigation { #navigation {
height: 50px; padding-top:25px;
box-shadow: inset 0 -2px 3px 0 #888; height: 25px;
box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
} }
#view { #view {
@@ -27,8 +38,25 @@ body {
padding: 5%; padding: 5%;
} }
.board_tab {
display: inline-block;
height: 24px;
width: 100px;
border: solid 1px var(--foreground-low);
color: var(--foreground-high);
border-bottom: unset;
border-radius: 15px 15px 0 0;
background: var(--background-low);
text-align: center;
}
.active_board {
color: var(--foreground-low);
background: var(--background-high);
}
.libSlot, .pecSlot { .libSlot, .pecSlot {
border: solid 3px #666; border: solid 3px var(--foreground-low);
border-radius: 6px; border-radius: 6px;
user-select: none; user-select: none;
position: relative; position: relative;
@@ -41,7 +69,7 @@ body {
} }
.empty { .empty {
color: #666; color: var(--forground-low);
font-size: 100%; font-size: 100%;
text-align: center; text-align: center;
} }
@@ -59,7 +87,7 @@ body {
.title_bar { .title_bar {
height: 50px; height: 50px;
box-shadow: inset 0 -2px 3px 0 #888; box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
display: flex; display: flex;
justify-content: stretch; justify-content: stretch;
font-size: 32pt; font-size: 32pt;
@@ -114,5 +142,6 @@ body {
bottom: 0; bottom: 0;
left: 0; left: 0;
text-align: center; text-align: center;
background: rgba(255,255,255,0.3); color: var(--foreground-high);
background: var(--background-high);
} }