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