Initial (overdue) commit

TODO:
- enable dynamic loading of button labels and actions
This commit is contained in:
2020-08-27 17:21:17 -07:00
parent 6e83bfb9c5
commit c5b61eee0a
42 changed files with 2739 additions and 1 deletions

View File

@@ -0,0 +1,113 @@
.header-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 3px;
height: 8%;
width: 100%;
grid-auto-flow: row;
margin-bottom: 1%;
}
.header-button {
align-self: stretch;
background-color: #210c0c;
border: 1px solid #ff7200;
color: #ff7200;
font-weight: bold;
height: 100%;
width: 100%;
font-size: large;
font-weight: bold;
}
.button-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 3px;
height: 90%;
width: 100%;
grid-auto-flow: row;
}
.grid-button {
text-align: center;
align-self: stretch;
background-color: #210c0c;
border: 1px solid #ff7200;
color: #ff7200;
font-weight: bold;
font-size: x-large;
height: 100%;
width: 100%;
}
.key-container {
display: grid;
grid-template-columns: repeat(59, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 3px;
height: 50%;
width: 100%;
grid-auto-flow: row;
}
.track-container {
height: 40%;
width: 100%;
}
.track-button {
align-self: stretch;
background-color: #210c0c;
border: 1px solid #ff7200;
color: #ff7200;
height: 100%;
width: 100%;
}
.grid-key {
text-align: center;
align-self: stretch;
grid-column-end: span 4;
background-color: #210c0c;
border: 1px solid #ff7200;
color: #ff7200;
font-weight: bold;
height: 100%;
width: 100%;
font-size: large;
font-weight: bold;
}
.grid-key-empty {
text-align: center;
align-self: stretch;
grid-column-end: span 4;
height: 100%;
width: 100%;
background: #0c0c0c;
border: 0px;
visibility: hidden;
}
.grid-key:active {
background-color: #ff7200;
color: #210c0c;
}
body, .content, .container {
height: 100%;
width: 100%;
background: #0c0c0c;
}
body, html {
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
margin:0;
padding:0;
position: fixed;
}