3fd2748f3f9b9f2564dae2aa10f69200565a2c0e
[redakcja.git] / src / toolbar / templates / toolbar / keyboard.html
1 <style>
2 #keyboard {
3         display: none;
4         position: absolute;
5         left: 5vw;
6         right: 5vw;
7         top: calc((100vh - 31vw) / 2);
8         z-index: 1000;
9         background: #ddd;
10         padding: 3vw 2.25vw 2.5vw 2.75vw;
11
12 }
13 #keyboard .keyboard-row {
14         display: flex;
15         direction: row;
16         margin-bottom: .5vw;
17 }
18 #keyboard .keyboard-row:nth-child(2) {
19         margin-left: 3vw;
20 }
21 #keyboard .keyboard-row:nth-child(3) {
22         margin-left: 6vw;
23 }
24 #keyboard .keyboard-row div {
25         width: 8vw;
26         height: 8vw;
27         margin-right: .5vw;
28         background: white;
29         border: 1px solid black;
30         border-radius: 10px;
31         font-size: 3vw;
32         padding-left: 1vw;
33         padding-top: 1.5vw;
34         position: relative;
35 }
36 #keyboard .keyboard-row .lower, #keyboard .keyboard-row .upper {
37         position: absolute;
38         font-size: 1vw;
39         bottom: 1vw;
40         right: 1vw;
41         left: 1vw;
42         white-space: nowrap;
43         overflow: hidden;
44         text-overflow: ellipsis;
45         text-align: right;
46 }
47 #keyboard .keyboard-row .upper {
48         bottom: auto;
49         top: 1vw;
50 }
51         #keyboard-close {
52                 position: absolute;
53                 right: 0;
54                 top: 0;
55                 width: 3vw;
56                 height: 3vw;
57                 font-size: 2.5vw;
58                 line-height: 3vw;
59                 text-align: center;
60                 cursor: pointer;
61                 border: none;
62                 background: none;
63         }
64
65
66 </style>
67
68
69 <div id="keyboard">
70         {% for row in rows %}
71         <div class="keyboard-row">
72                 {% for key in row %}
73                 <div>
74                         {% if key.upper %}
75                         <span class="upper" title="{{ key.upper.full_tooltip }}">{{ key.upper.label|safe }}</span>
76                         {% endif %}
77                         {% if key.lower %}
78                         <span class="lower" title="{{ key.lower.full_tooltip }}">{{ key.lower.label|safe }}</span>
79                         {% endif %}
80                         {{ key.symbol }}
81                 </div>
82                 {% endfor %}
83         </div>
84         {% endfor %}
85         <button id="keyboard-close" data-ui-accesskey="?">🞪</button>
86
87 </div>
88