matemat/static/css/matemat.css

334 lines
5 KiB
CSS

* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
nav div {
display: inline-block;
}
.thumblist-item {
display: inline-block;
margin: 5px 5px 10px 10px;
padding: 15px;
background: #f0f0f0;
text-decoration: none;
}
.thumblist-item a {
text-decoration: none;
}
.thumblist-item .imgcontainer {
width: 100px;
height: 100px;
position: relative;
}
.thumblist-item .imgcontainer img {
max-width: 100px;
max-height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.thumblist-title {
display: block;
font-weight: bolder;
}
.thumblist-stock {
position: absolute;
z-index: 10;
bottom: 0;
right: 0;
background: #f0f0f0;
padding: 10px;
}
@media print {
footer {
position: fixed;
bottom: 0;
font-size: 0.8em;
}
footer li {
display: inline-block;
margin-right: 40px;
}
}
#depositlist {
display: inline;
}
#deposit-wrapper {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.75);
z-index: 100;
}
#deposit-input {
display: grid;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 320px;
height: 540px;
grid-template-columns: 100px 100px 100px 200px;
grid-template-rows: 100px 100px 100px 100px 100px;
column-gap: 10px;
row-gap: 10px;
}
#deposit-wrapper.show {
display: block;
}
.fakelink {
cursor: pointer;
color: blue;
}
#deposit-output {
grid-column-start: 1;
grid-column-end: 4;
grid-row: 1;
background: #ffffff;
}
#deposit-title {
display: block;
font-family: sans-serif;
padding: 0 10px;
line-height: 30px;
font-size: 25px;
height: 30px;
}
#deposit-amount {
display: block;
text-align: right;
font-size: 50px;
line-height: 70px;
height: 70px;
padding: 0 10px;
font-family: monospace;
}
.numpad {
background: #f0f0f0;
text-decoration: none;
font-size: 50px;
font-family: sans-serif;
line-height: 100px;
text-align: center;
}
#numpad-1 {
grid-column: 1;
grid-row: 2;
}
#numpad-2 {
grid-column: 2;
grid-row: 2;
}
#numpad-3 {
grid-column: 3;
grid-row: 2;
}
#numpad-4 {
grid-column: 1;
grid-row: 3;
}
#numpad-5 {
grid-column: 2;
grid-row: 3;
}
#numpad-6 {
grid-column: 3;
grid-row: 3;
}
#numpad-7 {
grid-column: 1;
grid-row: 4;
}
#numpad-8 {
grid-column: 2;
grid-row: 4;
}
#numpad-9 {
grid-column: 3;
grid-row: 4;
}
#numpad-del {
grid-column: 1;
grid-row: 5;
background: #f06060;
}
#numpad-0 {
grid-column: 2;
grid-row: 5;
}
#numpad-ok {
grid-column: 3;
grid-row: 5;
background: #60f060;
}
#numpad-ok.disabled {
background: #606060;
}
#transfer-userlist {
display: none;
flex-direction: column;
column-gap: 10px;
padding: 0;
margin: 0;
grid-column: 4;
grid-row-start: 1;
grid-row-end: 6;
}
#transfer-userlist.show {
display: flex;
}
#transfer-userlist-list {
margin: 10px 0;
padding: 0;
overflow-y: hidden;
flex-grow: 1;
}
#transfer-userlist-list > li {
display: block;
background: #f0f0f0;
padding: 15px 20px;
margin-bottom: 10px;
list-style-type: none;
font-family: sans-serif;
line-height: 20px;
font-size: 20px;
height: 20px;
}
#transfer-userlist > #scroll-up, #transfer-userlist > #scroll-down {
left: 0;
right: 0;
height: 25px;
text-align: center;
background: #f0f0f0;
padding: 20px;
font-family: sans-serif;
line-height: 25px;
font-size: 25px;
}
#transfer-userlist-list > li.active {
background: #60f060;
}
div.osk-kbd {
display: none;
font-family: sans-serif;
position: fixed;
left: 0;
bottom: 0;
right: 0;
flex-direction: column;
z-index: 100;
background: white;
font-size: 5vh;
}
div.osk-kbd.visible {
display: flex;
}
div.osk-kbd-row {
width: 100%;
height: 10vh;
flex-grow: 1;
display: flex;
flex-direction: row;
}
div.osk-button {
flex: 1 0 1px;
background: #f0f0f0;
padding: 5px;
margin: 2px;
text-align: center;
line-height: calc(10vh - 10px);
}
div.osk-button:active, div.osk-button.osk-locked {
background: #606060;
}
div.osk-button.osk-button-space {
flex: 5 0 1px;
color: #606060;
}
aside#overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #88ff88;
text-align: center;
z-index: 1000;
padding: 5%;
font-family: sans-serif;
display: none;
transition: opacity 700ms;
opacity: 0;
}
aside#overlay.fade {
opacity: 100%;
}
aside#overlay > h2 {
font-size: 3em;
}
aside#overlay > img {
width: 30%;
height: auto;
}
aside#overlay > div.price {
padding-top: 30px;
font-size: 2em;
}