blinker / firefox.plugin / data / style / modules / onscreen.css @ master
History | View | Annotate | Download (4.471 KB)
| 1 | 76dd22bd | KevinTaron | .gaze-onscreen {
|
|---|---|---|---|
| 2 | /* adjust overall keyboard size using "font-size" */
|
||
| 3 | font-size: 14px; |
||
| 4 | text-align: center; |
||
| 5 | background: #fefefe; |
||
| 6 | background: rgba(240, 240, 240, 0.4); |
||
| 7 | border: 1px solid #aaa; |
||
| 8 | padding: 4px; |
||
| 9 | |||
| 10 | /* include the following setting to place the
|
||
| 11 | keyboard at the bottom of the browser window */
|
||
| 12 | width: 100%; |
||
| 13 | height: auto; |
||
| 14 | left: 0px !important; |
||
| 15 | right: 0px !important; |
||
| 16 | top: auto; |
||
| 17 | top: 45%; |
||
| 18 | position: fixed; |
||
| 19 | white-space: nowrap; |
||
| 20 | overflow-x: auto; |
||
| 21 | /* see issue #484 */
|
||
| 22 | -ms-touch-action: manipulation; |
||
| 23 | touch-action: manipulation; |
||
| 24 | display: none; |
||
| 25 | z-index: 2000000135; |
||
| 26 | } |
||
| 27 | |||
| 28 | .gaze-onscreen.onScreenKeyboard { top: 115px !important; } |
||
| 29 | |||
| 30 | .gaze-onscreen .gaze-onscreen-content { |
||
| 31 | display: flex; |
||
| 32 | justify-content: space-between; |
||
| 33 | flex-wrap: wrap; |
||
| 34 | padding: 0 10%; |
||
| 35 | } |
||
| 36 | .gaze-onscreen.onScreenKeyboard .gaze-onscreen-content { padding: 0 8%; } |
||
| 37 | |||
| 38 | .onscreen-option {
|
||
| 39 | color: white; |
||
| 40 | background: #4bc970; |
||
| 41 | margin-right: 15px; |
||
| 42 | padding: 65px; |
||
| 43 | display: inline-block; |
||
| 44 | min-width: 50px; |
||
| 45 | position: relative; |
||
| 46 | margin-bottom: 35px; |
||
| 47 | margin-top: 35px; |
||
| 48 | } |
||
| 49 | |||
| 50 | .onscreen-option > div { |
||
| 51 | display: flex; |
||
| 52 | justify-content: center; |
||
| 53 | align-items: center; |
||
| 54 | position: absolute; |
||
| 55 | top:0; |
||
| 56 | left: 0; |
||
| 57 | right: 0; |
||
| 58 | bottom: 0; |
||
| 59 | } |
||
| 60 | |||
| 61 | .onscreen-option:nth-of-type(7n + 0) > div { background: #6b14e7; } |
||
| 62 | .onscreen-option:nth-of-type(7n + 1) > div { background: #ffa200; } |
||
| 63 | .onscreen-option:nth-of-type(7n + 2) > div { background: #4bc970; } |
||
| 64 | .onscreen-option:nth-of-type(7n + 3) > div { background: #4bc9c5; } |
||
| 65 | .onscreen-option:nth-of-type(7n + 4) > div { background: #0216f8; } |
||
| 66 | .onscreen-option:nth-of-type(7n + 5) > div { background: #764bc9; } |
||
| 67 | .onscreen-option:nth-of-type(7n + 6) > div { background: #c24bc9; } |
||
| 68 | |||
| 69 | .onscreen-option.onscreen-option-3-1 > div { background: #ffa200; } |
||
| 70 | .onscreen-option.onscreen-option-3-2 > div { background: #4bc970; } |
||
| 71 | .onscreen-option.onscreen-option-3-3 > div { background: #0216f8; } |
||
| 72 | |||
| 73 | .onscreen-option > div#choicebox-check, .onscreen-option.onscreen-option-2-2 > div.gazeOk, |
||
| 74 | .onscreen-option > div.gazeOk.gazeMultimedia { |
||
| 75 | background: #4bc970; |
||
| 76 | text-indent: 100%; |
||
| 77 | white-space: nowrap; |
||
| 78 | } |
||
| 79 | .onscreen-option > div.gazeOk.gazeMultimedia.gazeMultiPause { background: #ffa200; } |
||
| 80 | .onscreen-option > div.gazeOk.gazeMultimedia.gazeMultiSkipTime { background: #008b96; } |
||
| 81 | .onscreen-option > div.gazeOk.gazeMultimedia.gazeMultiVolume { background: #6b14e7; } |
||
| 82 | .onscreen-option > div.gazeOk.gazeMultimedia.gazeFullScreen { background: #0216f8; } |
||
| 83 | |||
| 84 | .onscreen-option > div#choicebox-check:after , .onscreen-option.onscreen-option-2-2 > div.gazeOk:after, |
||
| 85 | .onscreen-option > div.gazeOk.gazeMultimedia:after { |
||
| 86 | content: "\2611"; |
||
| 87 | font-size: 5em; |
||
| 88 | position: absolute; |
||
| 89 | text-indent: 0; |
||
| 90 | white-space: wrap; |
||
| 91 | top: 0; |
||
| 92 | left: 0; |
||
| 93 | right: 0; |
||
| 94 | bottom: 0; |
||
| 95 | display: flex; |
||
| 96 | justify-content: center; |
||
| 97 | align-items: center; |
||
| 98 | } |
||
| 99 | |||
| 100 | .onscreen-option > div.gazeOk.gazeMultimedia.gazeMultiSkipTime:after { content: "\27a5"; } |
||
| 101 | .onscreen-option > div.gazeOk.gazeMultimedia.gazeMultiPlay:after { content: "\23f5"; } |
||
| 102 | .onscreen-option > div.gazeOk.gazeMultimedia.gazeMultiPause:after { content: "\23f8"; } |
||
| 103 | .onscreen-option > div.gazeOk.gazeMultimedia.gazeMultiVolume:after { content: "\1F56A"; } |
||
| 104 | .onscreen-option > div.gazeOk.gazeMultimedia.gazeFullScreen:after { content: "\2928"; } |
||
| 105 | .onscreen-option > div.gazeOk.keyboardOpenButton:after { content: "\2328"; } |
||
| 106 | |||
| 107 | .onscreen-option > div.gazeCancel, .onscreen-option > div#choicebox-uncheck { |
||
| 108 | background: #f00; |
||
| 109 | text-indent: 100%; |
||
| 110 | white-space: nowrap; |
||
| 111 | } |
||
| 112 | |||
| 113 | .onscreen-option > div.gazeCancel:after, .onscreen-option > div#choicebox-uncheck:after { |
||
| 114 | content: "\2612"; |
||
| 115 | font-size: 5em; |
||
| 116 | position: absolute; |
||
| 117 | text-indent: 0; |
||
| 118 | white-space: wrap; |
||
| 119 | top: 0; |
||
| 120 | left: 0; |
||
| 121 | right: 0; |
||
| 122 | bottom: 0; |
||
| 123 | display: flex; |
||
| 124 | justify-content: center; |
||
| 125 | align-items: center; |
||
| 126 | } |
||
| 127 | |||
| 128 | .onscreen-option.posBottonLeft { |
||
| 129 | position: fixed; |
||
| 130 | left: 30px; |
||
| 131 | bottom: 30px; |
||
| 132 | } |
||
| 133 | |||
| 134 | .gazeKeyBoardOk {
|
||
| 135 | font-size: 1.7rem; |
||
| 136 | } |
||
| 137 | |||
| 138 | .onscreen-option:nth-of-type(n+24) { display: none; } |
||
| 139 | |||
| 140 | .onscreenPagination {
|
||
| 141 | position: absolute; |
||
| 142 | bottom: 15px; |
||
| 143 | left: 15px; |
||
| 144 | padding: 25px; |
||
| 145 | background: #ff7e00; |
||
| 146 | color: white; |
||
| 147 | } |
||
| 148 | |||
| 149 | .onscreenPagination.next { |
||
| 150 | right: 15px; |
||
| 151 | left: auto; |
||
| 152 | } |
||
| 153 | |||
| 154 | .onscreenPagination.prev { display: none; } |