Files
scratch-gui/src/components/monitor/monitor.css
T
Paul Kaplan 024db1af66 Fix flickering of monitor value in Safari with CSS hack.
Root cause is probably the flex implementation on Safari.
2018-05-07 14:00:30 -04:00

56 lines
1.1 KiB
CSS

@import "../../css/units.css";
@import "../../css/colors.css";
.monitor-container {
position: absolute;
background: $ui-primary;
z-index: 100;
border: 1px solid $ui-black-transparent;
border-radius: calc($space / 2);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.75rem;
transition: box-shadow 0.2s;
pointer-events: all;
overflow: hidden;
}
.monitor:hover {
cursor: pointer;
}
.dragging {
z-index: 101;
box-shadow: 3px 3px 5px #888888;
}
.default-monitor {
display: flex;
padding: 3px;
}
.label {
font-weight: bold;
text-align: center;
margin: 0 5px;
}
.value {
min-width: 40px;
text-align: center;
color: white;
margin: 0 5px;
border-radius: calc($space / 2);
padding: 0 2px;
transform: translateZ(0); /* Fixes flickering in Safari */
}
.large-value {
min-height: 1.5rem;
min-width: 3rem;
padding: 0.25rem;
text-align: center;
color: white;
font-size: 1rem;
transform: translateZ(0); /* Fixes flickering in Safari */
}