| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <script src="main.js"></script> |
| <style> |
| #b { |
| margin: 0; |
| padding: 0; |
| background: -webkit-linear-gradient(#131925, #04070B); |
| color: white; |
| -webkit-user-select: none; |
| } |
| |
| div.row { |
| margin-top: 5px; |
| } |
| |
| .key { |
| color: #dbdbdb; |
| -webkit-border-radius: 4px; |
| text-align: center; |
| font-family: sans-serif; |
| border-style: solid; |
| border-color: gray; |
| border-width: 1px; |
| float: left; |
| } |
| |
| .r0 { |
| background: -webkit-linear-gradient(#5a616f, #505662); |
| } |
| .r0:active { |
| background: -webkit-linear-gradient(#505662, #5a616f); |
| } |
| |
| .r1 { |
| background: -webkit-linear-gradient(#505662, #41464f); |
| } |
| .r1:active { |
| background: -webkit-linear-gradient(#41464f, #505662); |
| } |
| |
| .r2 { |
| background: -webkit-linear-gradient(#41464f, #32373d); |
| } |
| .r2:active { |
| background: -webkit-linear-gradient(#32373d, #41464f); |
| } |
| |
| div.moddown { |
| border-color: #304a9b; |
| background: -webkit-linear-gradient(#0d0d0d, #1e2026); |
| } |
| |
| .ncr0, |
| .ncr1, |
| .ncr2, |
| .ncr3 { |
| background: -webkit-linear-gradient(#1f2127, #1b1e22); |
| } |
| |
| .ncr0:active, |
| .ncr1:active, |
| .ncr2:active, |
| .ncr3:active { |
| background: -webkit-linear-gradient(#0d0d0d, #1e2026); |
| } |
| |
| .image-key { |
| width: 100%; |
| height: 100%; |
| background-size: contain; |
| background-repeat: no-repeat; |
| background-position: center center; |
| } |
| |
| .backspace { |
| background-image: url("del.svg"); |
| } |
| |
| .tab { |
| background-image: url("tab.svg"); |
| } |
| |
| .return { |
| background-image: url("ret.svg"); |
| } |
| |
| .mic { |
| background-image: url("mic.svg"); |
| } |
| |
| .shift { |
| background-image: url("shift.svg"); |
| } |
| |
| .hide { |
| background-image: url("keyboard.svg"); |
| } |
| </style> |
| </head> |
| <body id="b"></body> |
| </html> |
