bind some menu items. add loading screen. use vars in css

This commit is contained in:
Stewart Allen 2020-06-06 16:02:04 -04:00
commit 48f918b177
4 changed files with 79 additions and 46 deletions

View file

@ -1,3 +1,7 @@
:root {
--fg-blue-gray: #89a;
--bg-blue-gray: #abc;
}
setpopsetpopa, a:hover, a:visited {
border: none;
outline: none;
@ -88,6 +92,9 @@ th, tr, td {
user-select: none;
}
.noshow {
display: none;
}
.row {
flex-direction: row;
}
@ -133,9 +140,20 @@ th, tr, td {
margin-bottom: -14px !important;
}
#curtain {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
background-color: #fff;
font-family: 'Russo One', sans-serif;
z-index: 100;
}
#container {
position: fixed;
z-index: -1000;
z-index: -1;
width: 100%;
height: 100%;
}
@ -154,7 +172,7 @@ th, tr, td {
margin: 0 5px 0 5px;
}
#app-vers, #app-acct {
#app-mode, #app-acct {
width: 125px;
}
@ -178,14 +196,20 @@ th, tr, td {
#lt-top {
height: 10px;
border-top-right-radius: 10px;
background-color: #abc;
background-color: var(--bg-blue-gray);
left: -5px;
}
#lt-sep {
background-color: var(--bg-blue-gray);
height: 10px;
left: -5px;
}
#lt-end {
height: 10px;
border-bottom-right-radius: 10px;
background-color: #abc;
background-color: var(--bg-blue-gray);
left: -5px;
}
@ -206,7 +230,7 @@ th, tr, td {
border: 1px solid rgba(0,0,0,0);
border-radius: 3px;
width: 60px;
color: #89a;
color: var(--fg-blue-gray);
}
.pop-lcol > div:hover {
@ -222,7 +246,7 @@ th, tr, td {
padding: 5px 5px 5px 10px;
border: 1px solid rgba(0,0,0,0);
border-radius: 3px;
color: #89a;
color: var(--fg-blue-gray);
left: -5px;
background-color: rgba(255,255,255,0.75);
}
@ -246,7 +270,7 @@ th, tr, td {
display: flex;
}
#bot {
#end {
text-align: center;
font-size: smaller;
height: 25px;
@ -282,7 +306,7 @@ th, tr, td {
#modal {
display: none;
position: fixed;
z-index: 10000;
z-index: 20;
transform: translateY(-50%);
top: 50%;
left: 0px;
@ -303,6 +327,7 @@ th, tr, td {
.mdialog {
display: none;
padding: 10px;
min-height: 20px;
font-size: smaller;
font-family: monospace;
background-color: rgba(255,255,255,0.75);
@ -315,7 +340,7 @@ th, tr, td {
}
#mod-x {
position: absolute;
z-index: 30000;
z-index: 30;
bottom: -20px;
right: 5px;
}
@ -406,14 +431,14 @@ th, tr, td {
padding: 1px 10px 2px 2px;
border-top-left-radius: 10px;
border-bottom-left-radius: 0;
background-color: #abc;
background-color: var(--bg-blue-gray);
}
#set-end {
color: black;
padding: 1px 10px 2px 2px;
border-top-left-radius: 0;
border-bottom-left-radius: 10px;
background-color: #abc;
background-color: var(--bg-blue-gray);
height: 10px;
}
.set-group {
@ -424,7 +449,7 @@ th, tr, td {
border-radius: 3px;
margin: 2px 0 2px 4px;
padding: 8px 10px 8px 5px;
color: #89a;
color: var(--fg-blue-gray);
right: -5px;
}
.set-group:hover {

View file

@ -23,7 +23,7 @@
<body class="col">
<div id="container"></div>
<div id="top" class="row">
<div id="app-vers">version</div>
<div id="app-mode"></div>
<div class="grow"></div>
<div id="app-name">Kiri:Moto</div>
<div class="grow"></div>
@ -31,6 +31,7 @@
</div>
<div id="mid-sep"></div>
<div id="mid" class="grow row">
<div id="curtain" class="j-center a-center">loading...</div>
<div id="mid-lcol" class="col j-center">
<div id="lt-top"></div>
<div id="lt-setup" class="lt-menu">
@ -45,7 +46,7 @@
<i class="fas fa-list"></i>
<label>recent</label>
</div>
<div id="file-recent">
<div id="file-import">
<i class="fas fa-file-upload"></i>
<label>import<label>
</div>
@ -87,14 +88,15 @@
</div>
</div>
</div>
<div id="lt-rotate" class="lt-menu">
<div id="lt-sep" class="noshow"></div>
<div id="lt-rotate" class="lt-menu noshow">
<i class="fas fa-sync-alt"></i>
<label>rotate</label>
<div id="pop-view" class="pop-lcol row">
</div>
</div>
<div id="lt-scale" class="lt-menu">
<div id="lt-scale" class="lt-menu noshow">
<i class="fas fa-expand"></i>
<label>scale</label>
<div id="pop-view" class="pop-lcol row">
@ -115,7 +117,7 @@
<a href="https://sienci.com/2016/08/24/the-story-of-kirimoto/">Sienci Labs</a>
<a href="https://www.youtube.com/watch?v=IZ1VG07oFCo">Teaching Tech</a>
</div>
<div id="mod-setup" class="mdialog">
<div id="mod-setup" class="mdialog col">
<div id="device">temp device</div>
<div id="layers">temp layers</div>
<div id="langpop">temp language</div>
@ -148,7 +150,7 @@
</div>
</div>
</div>
<div id="bot" class="col a-center">
<div id="end" class="col a-center">
<div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
<div id="bottom"></div>
<div id="alert-area">