mirror of
https://github.com/DeviceFarmer/stf.git
synced 2026-04-18 06:53:20 +02:00
Regressions: 1) Flicker badly in Chrome 2) Image gets very blurry because the image is uploaded to the GPU and there are rounding errors 3) Resizing is not smooth again This needs another way of fixing. This reverts commit 9fc1a9c7939b9f464c87a2f99cb06000f5aedcbc.
193 lines
3.4 KiB
CSS
193 lines
3.4 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 canvas {
|
|
transition: width 100ms linear, -webkit-transform 250ms ease-in-out;
|
|
-webkit-transform-origin: 50% 50%;
|
|
transform-origin: 50% 50%;
|
|
-webkit-transform: width, rotate(0deg);
|
|
transform: width, rotate(0deg);
|
|
}
|
|
|
|
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;
|
|
margin: auto;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
pointer-events: none; /* MUST HAVE */
|
|
}
|
|
|
|
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;
|
|
}
|