| .enter-fade { |
| -webkit-transition: 1s linear opacity; |
| -moz-transition: 1s linear opacity; |
| -o-transition: 1s linear opacity; |
| transition: 1s linear opacity; |
| opacity: 0; |
| } |
| |
| .enter-fade.enter-fade-active { |
| opacity: 1; |
| } |
| |
| device-screen { |
| width: 100%; |
| height: 100%; |
| background: gray; |
| position: relative; |
| display: block; |
| overflow: hidden; |
| /*cursor: pointer;*/ |
| text-align: center; /* needed for centering after rotating to 270 */ |
| |
| -webkit-touch-callout: none; |
| -webkit-user-select: none; |
| -khtml-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| |
| device-screen .positioner { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| margin: auto; |
| pointer-events: none; |
| transform: rotate(0deg); |
| } |
| |
| device-screen canvas.screen { |
| position: absolute; |
| width: 100%; |
| height: auto; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| margin: auto; |
| |
| pointer-events: none; /* MUST HAVE or touch coordinates will be off */ |
| transition: -webkit-transform 250ms ease-in-out; |
| -webkit-transform-origin: 50% 50%; |
| transform-origin: 50% 50%; |
| -webkit-transform: rotate(0deg); |
| transform: rotate(0deg); |
| } |
| |
| device-screen .positioner .hacky-stretcher { |
| outline: 1px solid red; |
| height: 100%; |
| width: auto; |
| margin: 0; |
| padding: 0; |
| pointer-events: none; |
| } |
| |
| /* screen is in default rotation or upside down, possibly with empty space on left/right */ |
| |
| device-screen/*.portrait*/ .positioner { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| } |
| |
| device-screen/*.portrait*/ canvas.screen { |
| width: auto; |
| height: 100%; |
| } |
| |
| /* screen is in default rotation or upside down, possibly with empty space on top/bottom */ |
| |
| device-screen/*.portrait*/.letterboxed .positioner { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| } |
| |
| device-screen/*.portrait*/.letterboxed canvas.screen { |
| width: 100%; |
| height: auto; |
| } |
| |
| /* screen is rotated sideways, possibly with empty space on left/right */ |
| |
| device-screen.rotated .positioner { |
| position: relative; |
| display: inline-block; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| height: 100%; |
| } |
| |
| device-screen.rotated canvas.screen { |
| width: 100%; |
| height: auto; |
| } |
| |
| /* screen is rotated sideways, possibly with empty space on top/bottom */ |
| |
| device-screen.rotated.letterboxed .positioner { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| margin: auto; |
| width: 100%; |
| padding-top: 100%; |
| height: 0; |
| } |
| |
| device-screen.rotated.letterboxed canvas.screen { |
| height: 100%; |
| width: auto; |
| } |
| |
| device-screen .finger { |
| position: absolute; |
| border-radius: 50%; |
| background: #7c7c7c; |
| opacity: 0.5; |
| width: 8mm; |
| height: 8mm; |
| top: -4mm; |
| left: -4mm; |
| pointer-events: none; |
| display: none; |
| border-style: solid; |
| border-width: 1px; |
| border-color: #464646; |
| } |
| |
| device-screen .finger.active { |
| display: block; |
| } |
| |
| device-screen input { |
| position: absolute; |
| z-index: 10; |
| outline: none; |
| pointer-events: none; |
| opacity: 0; |
| ime-mode: disabled; |
| inputmode: verbatim; |
| } |
| |
| .stf-device-control .dragover { |
| opacity: 0.7; |
| } |
| |
| .stf-device-control .dropdown-menu { |
| top: auto; |
| } |
| |
| .stf-device-control .device-small-image { |
| width: 14px; |
| height: 14px; |
| display: inline-block; |
| margin-right: 7px; |
| } |
| |
| .stf-device-control .device-small-image img { |
| width: 100%; |
| } |
| |
| .stf-device-control .kick-device { |
| color: #9c9c9c; |
| } |
| |
| .stf-device-control .kick-device:hover { |
| color: #d9534f; |
| } |
| |
| .stf-device-control .kick-device i { |
| margin-right: 0; |
| } |
| |
| .stf-device-control .orientation-degree { |
| min-width: 34px; |
| display: inline-block; |
| } |
| |
| /* VNC buttons */ |
| .stf-vnc-bottom .btn-primary:hover { |
| background: rgba(255, 255, 255, 1.0); |
| border: none; |
| } |
| |
| .stf-vnc-bottom .btn { |
| border-radius: 0; |
| } |
| |
| .stf-vnc-bottom .btn-primary:active { |
| background: rgba(250, 250, 250, 0.75); |
| border: none; |
| color: #0d3fa4; |
| } |
| |
| .stf-vnc-navbar-buttons { |
| padding-top: 2px; |
| padding-bottom: 32px; |
| } |
| |
| .stf-vnc-navbar-buttons .btn { |
| margin-bottom: 0; |
| min-width: 37px; |
| } |
| |
| .stf-device-control .stf-vnc-device-name { |
| font-size: 16px; |
| line-height: 20px; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| white-space: nowrap; |
| color: #858585; |
| } |
| |
| .stf-device-control .device-name-container { |
| text-overflow: ellipsis; |
| } |
| |
| .stf-device-control .stf-vnc-device-name .device-small-image { |
| margin-left: 10px; |
| } |
| |
| .stf-device-control .current-device { |
| font-weight: bold; |
| } |
| |
| .stf-vnc-navbar { |
| background: #fff; |
| margin-bottom: 2px; |
| } |
| |
| .stf-vnc-fps { |
| line-height: 28px; |
| color: #D1D1D1; |
| font-family: monospace; |
| display: inline-block; |
| width: 28px; |
| min-height: 10px; |
| text-align: center; |
| } |
| |
| .stf-vnc-right-buttons { |
| margin-top: 6px; |
| } |
| |
| .stf-vnc-right-buttons .button-spacer { |
| width: 12px; |
| } |
| |
| .stf-device-control > .device-name-menu-element { |
| margin-left: 7px; |
| } |
| |
| .no-transition { |
| -webkit-transition: none !important; |
| -moz-transition: none !important; |
| -o-transition: none !important; |
| -ms-transition: none !important; |
| transition: none !important; |
| } |
| |
| .exitSession { |
| background-color: #5cb85c; |
| border-color: #5cb85c; |
| border-radius: 3px; |
| text-decoration: none; |
| color: white; |
| padding: .375rem 1rem; |
| float: right; |
| } |
| |
| .remote-debug-textarea { |
| overflow: hidden; |
| word-wrap: break-word; |
| resize: none; |
| height: 31px; |
| } |
| |
| .widget-bolder { |
| font-weight: bold; |
| } |
| |
| .app-header { |
| color: green; |
| } |
| |
| .submit-area.hit { |
| height: 39px; |
| padding-right: 16px; |
| } |