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: .5vw;
  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: 0;
  40         right: 0;
  41         left: 0;
  42         white-space: nowrap;
  43         overflow: hidden;
  44         text-overflow: ellipsis;
  45         text-align: right;
  46         padding: 1vw;
  47         border-radius: .5vw;
  48 }
  49 #keyboard .keyboard-row .upper {
  50         bottom: auto;
  51         top: 0;
  52 }
  53 #keyboard .keyboard-row div:hover .lower, #keyboard .keyboard-row div:hover .upper {
  54         background: #ddd;
  55         left: auto;
  56         overflow: auto;
  57 }
  58
  59         #keyboard-close {
  60                 position: absolute;
  61                 right: 0;
  62                 top: 0;
  63                 width: 3vw;
  64                 height: 3vw;
  65                 font-size: 2.5vw;
  66                 line-height: 3vw;
  67                 text-align: center;
  68                 cursor: pointer;
  69                 border: none;
  70                 background: none;
  71         }
  72
  73
  74 </style>
  75
  76
  77 <div id="keyboard">
  78         {% for row in rows %}
  79         <div class="keyboard-row">
  80                 {% for key in row %}
  81                 <div>
  82                         {% if key.upper %}
  83                         <span class="upper" title="{{ key.upper.full_tooltip }}">{{ key.upper.label|safe }}</span>
  84                         {% endif %}
  85                         {% if key.lower %}
  86                         <span class="lower" title="{{ key.lower.full_tooltip }}">{{ key.lower.label|safe }}</span>
  87                         {% endif %}
  88                         {{ key.symbol }}
  89                 </div>
  90                 {% endfor %}
  91         </div>
  92         {% endfor %}
  93         <button id="keyboard-close" data-ui-accesskey="?">🞪</button>
  94
  95 </div>
  96