joshua/dash-visualizer
1
0
Fork 0
mirror of https://github.com/seigler/dash-visualizer synced 2025-07-27 09:46:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

🐛 Fix webkit rendering issues

Browse source
This commit is contained in:
Joshua Seigler 2019-04-04 11:29:16 -04:00
parent 0db7dec44a
commit 7ff2852360
4 changed files with 939 additions and 304 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/styles/main.css
View file

@ -1,7 +1,8 @@
body {
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
font-size: 140%;
background-image: url('assets/Dash-logo.svg');
@ -15,7 +16,8 @@ body {
overflow: hidden;
}
* {
box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
a {
color: inherit;
@ -38,7 +40,9 @@ a {
top: 50%;
width: 77.5vw;
height: 77.5vw;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
@media (max-height: 77.5vw) {
.block:first-child {
@ -49,7 +53,8 @@ a {
.block {
width: 15vw;
height: 15vw;
box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
-webkit-box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
background-color: #eee;
margin: 0 auto 1em;
position: relative;
@ -73,12 +78,17 @@ a {
position: absolute;
left: calc(var(--x) * 90% + 5%);
top: calc(var(--y) * 90% + 5%);
transform: translate(-50%, -50%) rotate(var(--rotation));
-webkit-transform: translate(-50%, -50%) rotate(var(--rotation));
-ms-transform: translate(-50%, -50%) rotate(var(--rotation));
transform: translate(-50%, -50%) rotate(var(--rotation));
height: calc(var(--size) * 20% + 20%);
width: calc(var(--size) * 20% + 20%);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
#muteToggle, #connectionStatus {
@ -99,8 +109,14 @@ a {
right: 0;
border-radius: 0 0 0 0.5em;
border-width: 0 0 0.1em 0.1em;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
-o-transition: transform 0.5s;
transition: transform 0.5s;
transform: none;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
#connectionStatus.is-disconnected:before {
content: 'Disconnected';
@ -115,7 +131,14 @@ a {
color: green;
}
#connectionStatus.is-connected {
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
-o-transition: transform 0.5s;
transition: transform 0.5s;
transition-delay: 2s;
transform: translate3d(0, -100%, 0);
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}