Files
stf/res/app/control-panes/device-control/device-control.css
Gunther Brunner f73cac8b24 Revert "Fix canvas rotation being off on devices which are naturally landscape."
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.
2014-09-11 20:59:17 +09:00

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;
}