Files
stf-DeviceFarmer/res/app/control-panes/device-control/device-control.css
Gunther Brunner 38d20eba9a Revert "Revert "Fix canvas rotation being off on devices which are naturally landscape.""
Reverting the Revert because we found the reason for the blurry image.

This reverts commit 7afd816cf918ed94b2ebf7671f804ae0f769fcb9.
2014-09-12 15:59:13 +09:00

186 lines
3.3 KiB
CSS

.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 {
position: relative;
display: block;
overflow: hidden;
/*cursor: pointer;*/
-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 canvas {
position: absolute;
top: 50%;
left: 50%;
pointer-events: none; /* MUST HAVE or touch coordinates will be off */
transition: width 100ms linear, -webkit-transform 250ms ease-in-out;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
device-screen .finger {
position: absolute;
border-radius: 50%;
background: lime;
opacity: 0.5;
width: 6mm;
height: 6mm;
top: -3mm;
left: -3mm;
pointer-events: none;
display: none;
}
device-screen.fingering .finger {
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;
margin-left: 25px;
}
.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-color: rgba(255, 255, 255, 1.0);*/
border: none;
}
.stf-vnc-bottom .btn {
border-radius: 0;
}
/*.stf-vnc-bottom .btn-primary:active,*/
.stf-vnc-bottom .btn-primary:active {
background: rgba(250, 250, 250, 0.75);
border: none;
color: #0d3fa4;
/*border-color: rgba(255, 255, 255, 0.7);*/
}
.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 {
/*padding: 6px 2px 6px 15px;*/
/*float: left;*/
font-size: 16px;
line-height: 20px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #858585;
}
.stf-device-control .device-name-container {
overflow: hidden;
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;
}
.no-transition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}