Commit 344968df3e5e96408746e21419cfaf6776653eeb
1 parent
600926a0fe
Exists in
master
Cambiado clase css del teclado virtual para que aparezca siempre debajo de la pantalla.
Showing
1 changed file
with
17 additions
and
12 deletions
Show diff stats
src/sass/_teclado.scss
| 1 | .keyboard { | 1 | .keyboard { |
| 2 | -webkit-touch-callout: none; | 2 | -webkit-touch-callout: none; |
| 3 | -webkit-user-select: none; | 3 | -webkit-user-select: none; |
| 4 | -khtml-user-select: none; | 4 | -khtml-user-select: none; |
| 5 | -moz-user-select: none; | 5 | -moz-user-select: none; |
| 6 | -ms-user-select: none; | 6 | -ms-user-select: none; |
| 7 | user-select: none; | 7 | user-select: none; |
| 8 | margin: auto; | 8 | margin: auto; |
| 9 | width: 855px; | 9 | width: 60%; |
| 10 | position: inherit; | 10 | position: absolute; |
| 11 | height: auto; | 11 | height: auto; |
| 12 | border: 1px solid rgba(255, 128, 0, .4); | 12 | border: 1px solid rgba(255, 128, 0, .4); |
| 13 | background-color: rgba(0, 0, 0, .3); | 13 | background-color: rgba(0, 0, 0, .3); |
| 14 | bottom: 5px; | 14 | bottom: 5px; |
| 15 | z-index: 100000; | ||
| 15 | table { | 16 | table { |
| 17 | width: auto; | ||
| 18 | height: auto; | ||
| 19 | margin: 0px auto; | ||
| 16 | border-spacing: 10px; | 20 | border-spacing: 10px; |
| 17 | border-collapse: separate; | 21 | border-collapse: separate; |
| 18 | z-index: 100000; | ||
| 19 | td { | 22 | td { |
| 20 | touch-action: none; | 23 | touch-action: none; |
| 21 | } | 24 | } |
| 22 | } | 25 | } |
| 23 | 26 | ||
| 24 | .letter { | 27 | .letter { |
| 25 | background-color: #bdbdbd; | 28 | background-color: #bdbdbd; |
| 26 | box-shadow: 2px 2px 3px #555555; | 29 | box-shadow: 2px 2px 3px #555555; |
| 27 | width: 47px; | 30 | padding: 10px; |
| 28 | height: 50px; | 31 | width: auto; |
| 32 | height: auto; | ||
| 29 | text-align: center; | 33 | text-align: center; |
| 30 | font-family: "arial"; | 34 | font-family: "arial"; |
| 31 | cursor: pointer; | 35 | cursor: pointer; |
| 32 | color: #000; | 36 | color: #000; |
| 33 | font-size: 22px; | 37 | font-size: 80%; |
| 34 | 38 | ||
| 35 | &:hover { | 39 | &:hover { |
| 36 | background-color: #fafafa; | 40 | background-color: #fafafa; |
| 37 | } | 41 | } |
| 38 | &:active { | 42 | &:active { |
| 39 | background-color: #999; | 43 | background-color: #999; |
| 40 | color: #fff; | 44 | color: #fff; |
| 41 | } | 45 | } |
| 42 | } | 46 | } |
| 43 | .number { | 47 | .number { |
| 44 | background-color: #bdbdbd; | 48 | background-color: #bdbdbd; |
| 45 | box-shadow: 2px 2px 3px #555555; | 49 | box-shadow: 2px 2px 3px #555555; |
| 46 | width: 47px; | 50 | padding: 10px; |
| 47 | height: 35px; | 51 | width: auto; |
| 52 | height: auto; | ||
| 48 | text-align: center; | 53 | text-align: center; |
| 49 | font-family: "arial"; | 54 | font-family: "arial"; |
| 50 | cursor: pointer; | 55 | cursor: pointer; |
| 51 | color: #000; | 56 | color: #000; |
| 52 | font-size: 22px; | 57 | font-size: 80%; |
| 53 | 58 | ||
| 54 | &:hover { | 59 | &:hover { |
| 55 | background-color: #fafafa; | 60 | background-color: #fafafa; |
| 56 | } | 61 | } |
| 57 | &:active { | 62 | &:active { |
| 58 | background-color: #999; | 63 | background-color: #999; |
| 59 | color: #fff; | 64 | color: #fff; |
| 60 | } | 65 | } |
| 61 | } | 66 | } |
| 62 | 67 | ||
| 63 | .margin { | 68 | .margin { |
| 64 | width: 40px; | 69 | width: 5%; |
| 65 | height: 50px; | 70 | height: 5%; |
| 66 | } | 71 | } |
| 67 | } | 72 | } |