2022-02-28 07:40:38 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>Four-Line Dropper</title>
|
|
|
|
|
<style>
|
|
|
|
|
div.wrapper {
|
|
|
|
|
display: grid;
|
2022-03-02 08:51:14 +00:00
|
|
|
grid-template-columns: repeat(7, 50px) 400px;
|
2022-02-28 07:40:38 +00:00
|
|
|
gap: 2px;
|
|
|
|
|
grid-auto-rows: 50px;
|
|
|
|
|
border: 0px;
|
|
|
|
|
}
|
2022-03-01 07:02:59 +00:00
|
|
|
div.info_text_wrapper {
|
|
|
|
|
grid-row: 9;
|
|
|
|
|
grid-column: 1 / 8;
|
|
|
|
|
}
|
2022-03-02 08:51:14 +00:00
|
|
|
div.info_text_side_wrapper {
|
|
|
|
|
grid-row: 1 / 9;
|
|
|
|
|
grid-column: 8;
|
|
|
|
|
}
|
|
|
|
|
div.info_text0 {
|
2022-03-01 07:02:59 +00:00
|
|
|
background-color: #DDD;
|
2022-03-02 08:51:14 +00:00
|
|
|
width: 100%;
|
2022-03-01 07:02:59 +00:00
|
|
|
height: 400px;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
word-wrap: break-word;
|
2022-03-02 06:38:24 +00:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column-reverse;
|
2022-03-01 07:02:59 +00:00
|
|
|
}
|
2022-03-02 08:51:14 +00:00
|
|
|
div.info_text1 {
|
|
|
|
|
background-color: #DDD;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column-reverse;
|
|
|
|
|
}
|
2022-02-28 07:40:38 +00:00
|
|
|
button.slot {
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
}
|
|
|
|
|
button.r0 {
|
|
|
|
|
grid-row: 1;
|
|
|
|
|
}
|
|
|
|
|
button.r1 {
|
|
|
|
|
grid-row: 2;
|
|
|
|
|
}
|
|
|
|
|
button.r2 {
|
|
|
|
|
grid-row: 3;
|
|
|
|
|
}
|
|
|
|
|
button.r3 {
|
|
|
|
|
grid-row: 4;
|
|
|
|
|
}
|
|
|
|
|
button.r4 {
|
|
|
|
|
grid-row: 5;
|
|
|
|
|
}
|
|
|
|
|
button.r5 {
|
|
|
|
|
grid-row: 6;
|
|
|
|
|
}
|
|
|
|
|
button.r6 {
|
|
|
|
|
grid-row: 7;
|
|
|
|
|
}
|
|
|
|
|
button.r7 {
|
|
|
|
|
grid-row: 8;
|
|
|
|
|
}
|
|
|
|
|
button.c0 {
|
|
|
|
|
grid-column: 1;
|
|
|
|
|
}
|
|
|
|
|
button.c1 {
|
|
|
|
|
grid-column: 2;
|
|
|
|
|
}
|
|
|
|
|
button.c2 {
|
|
|
|
|
grid-column: 3;
|
|
|
|
|
}
|
|
|
|
|
button.c3 {
|
|
|
|
|
grid-column: 4;
|
|
|
|
|
}
|
|
|
|
|
button.c4 {
|
|
|
|
|
grid-column: 5;
|
|
|
|
|
}
|
|
|
|
|
button.c5 {
|
|
|
|
|
grid-column: 6;
|
|
|
|
|
}
|
|
|
|
|
button.c6 {
|
|
|
|
|
grid-column: 7;
|
|
|
|
|
}
|
|
|
|
|
button.open {
|
|
|
|
|
background: #FFF;
|
|
|
|
|
}
|
|
|
|
|
button.cyan {
|
|
|
|
|
background: #0FF;
|
|
|
|
|
}
|
|
|
|
|
button.magenta {
|
|
|
|
|
background: #F0F;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
<!-- vim: et ts=2 sts=2 sw=2
|
|
|
|
|
-->
|
