AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #147 from AlbertMN/master

Browse source 
Styling updates to match the coming frontpage & small "fix" of device search
This commit is contained in:
Stewart Allen 2021-03-23 13:58:10 -04:00 • committed by GitHub
commit cbc0227382
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/kiri/init.js
View file

@ -1951,13 +1951,13 @@
} else { } else {
style.display = 'flex'; style.display = 'flex';
UI.dev.filter.focus(); UI.dev.filter.focus();
deviceFilter = UI.dev.filter.value; deviceFilter = UI.dev.filter.value.toLowerCase();
updateDeviceList(); updateDeviceList();
} }
}; };
UI.dev.filter.onkeyup = (ev) => { UI.dev.filter.onkeyup = (ev) => {
deviceFilter = UI.dev.filter.value; deviceFilter = UI.dev.filter.value.toLowerCase();
updateDeviceList(); updateDeviceList();
}; };

65
web/kiri/index.css
View file

@ -5,6 +5,7 @@
--holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1)); --holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
--holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important; --holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important;
--highlight: rgba(200,220,220,0.9); --highlight: rgba(200,220,220,0.9);
--main-color: #7E99B7
} }
a, a:hover, a:visited { a, a:hover, a:visited {
border: none; border: none;
@ -22,11 +23,20 @@ a, a:hover, a:visited {
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
#app-name, #app-mode-name, #app-acct {
cursor: pointer;
}
#app-mode-name {
border-bottom: 2px dotted grey;
}
#app,div { #app,div {
display: flex; display: flex;
padding: 0px; padding: 0;
border: 0px; border: 0;
margin: 0px; margin: 0;
}
#device-list, #device-my {
background: rgba(0,0,0,0.1);
} }
#gsbox { #gsbox {
width: 40px; width: 40px;
@ -51,8 +61,9 @@ button {
border-radius: 3px; border-radius: 3px;
background-color: #eee; background-color: #eee;
padding: 2px 7px 3px 7px; padding: 2px 7px 3px 7px;
margin: 1px; margin: 1px 1px 2px;
margin-bottom: 2px; cursor: pointer;
text-transform: capitalize;
} }
button:hover { button:hover {
background-color: #aaa; background-color: #aaa;
@ -66,18 +77,21 @@ button[del] {
margin-left: 5px; margin-left: 5px;
} }
input { input {
background-color: #eee; background-color: #eeeeeed6;
margin-bottom: 1px; margin-bottom: 1px;
text-align: right; text-align: right;
border: 1px solid #bbb; border: 1px solid #bbb;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
margin-top: 1px; margin-top: 1px;
margin-bottom: 1px;
position: relative; position: relative;
} }
input:focus { input:focus {
background-color: #fec; color: #495057;
background-color: #fff;
border-color: #6C7F94;
outline: 0;
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 10%);
} }
input[disabled] { input[disabled] {
background-color: #ddd; background-color: #ddd;
@ -384,6 +398,11 @@ th, tr, td, label {
#mid-lcol, #mid-rcol, #modal { #mid-lcol, #mid-rcol, #modal {
pointer-events: visible; pointer-events: visible;
text-transform: capitalize;
}
#acct-pop {
text-transform: capitalize;
} }
#top-sep { #top-sep {
@ -398,7 +417,7 @@ th, tr, td, label {
#lt-top { #lt-top {
height: 10px; height: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
background-color: var(--bg-gray); background-color: var(--main-color);
left: -5px; left: -5px;
} }
@ -408,7 +427,7 @@ th, tr, td, label {
top: 0; top: 0;
} }
#act-sep, #lt-sep { #act-sep, #lt-sep {
background-color: var(--bg-gray); background-color: var(--main-color);
height: 10px; height: 10px;
left: -5px; left: -5px;
} }
@ -416,7 +435,7 @@ th, tr, td, label {
#lt-end { #lt-end {
height: 10px; height: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
background-color: var(--bg-gray); background-color: var(--main-color);
left: -5px; left: -5px;
} }
#act-animate.disabled { #act-animate.disabled {
@ -509,6 +528,9 @@ th, tr, td, label {
margin-left: 2px; margin-left: 2px;
margin-right: 2px; margin-right: 2px;
} }
#dg .ext-buttons button {
cursor: pointer;
}
.ext-buttons button { .ext-buttons button {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -569,14 +591,14 @@ th, tr, td, label {
width: 12px; width: 12px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
background-color: var(--bg-gray); background-color: var(--main-color);
margin-right: 1px; margin-right: 1px;
} }
#camops .right { #camops .right {
width: 12px; width: 12px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
background-color: var(--bg-gray); background-color: var(--main-color);
margin-left: 1px; margin-left: 1px;
} }
.cam-pop-op { .cam-pop-op {
@ -726,14 +748,14 @@ th, tr, td, label {
padding: 10px; padding: 10px;
min-height: 20px; min-height: 20px;
font-size: smaller; font-size: smaller;
background-color: rgba(255,255,255,0.75); background-color: #fff;
} }
.mod-top { .mod-top {
height: 10px; height: 10px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
background-color: var(--bg-gray); background-color: var(--main-color);
} }
#mod-x { #mod-x {
position: absolute; position: absolute;
@ -881,7 +903,7 @@ th, tr, td, label {
height: 10px; height: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
background-color: var(--bg-gray); background-color: var(--main-color);
} }
#settingsList button.selected { #settingsList button.selected {
font-weight: bold; font-weight: bold;
@ -1054,6 +1076,7 @@ th, tr, td, label {
background-color: rgba(255,255,255,0.75); background-color: rgba(255,255,255,0.75);
border-radius: 5px; border-radius: 5px;
margin: 5px; margin: 5px;
cursor: pointer;
} }
.dev-type svg { .dev-type svg {
width: 60px; width: 60px;
@ -1324,13 +1347,17 @@ th, tr, td, label {
#settings { #settings {
align-items: stretch; align-items: stretch;
text-transform: capitalize;
}
#settings .set-group {
cursor: pointer;
} }
#set-top { #set-top {
color: black; color: black;
padding: 1px 10px 2px 2px; padding: 1px 10px 2px 2px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
background-color: var(--bg-gray); background-color: var(--main-color);
min-height: 10px; min-height: 10px;
} }
#set-end { #set-end {
@ -1338,7 +1365,7 @@ th, tr, td, label {
padding: 1px 10px 2px 2px; padding: 1px 10px 2px 2px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
background-color: var(--bg-gray); background-color: var(--main-color);
height: 10px; height: 10px;
} }
.pop-sep { .pop-sep {
@ -1385,7 +1412,7 @@ th, tr, td, label {
white-space: nowrap; white-space: nowrap;
flex-direction: column; flex-direction: column;
transform: translateY(-50%); transform: translateY(-50%);
background-color: rgba(255,255,255,0.8); background-color: #fff;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 5px; border-radius: 5px;
margin-right: 5px; margin-right: 5px;