mirror of
https://github.com/seigler/dash-visualizer
synced 2025-07-27 01:36:10 +00:00
🐛 Fix webkit rendering issues
This commit is contained in:
Joshua Seigler
parent
0db7dec44a
commit
7ff2852360
4 changed files with 939 additions and 304 deletions
|
|
@ -110,6 +110,7 @@ var App = {
|
||||||
PAINT.big[Math.floor(tx.paintIndex * 12)] :
|
PAINT.big[Math.floor(tx.paintIndex * 12)] :
|
||||||
PAINT.small[Math.floor(tx.paintIndex * 11)]
|
PAINT.small[Math.floor(tx.paintIndex * 11)]
|
||||||
) + ')';
|
) + ')';
|
||||||
|
paint.style.setProperty('-webkit-mask-image', paint.style.maskImage);
|
||||||
paint.style.setProperty('--x', tx.x);
|
paint.style.setProperty('--x', tx.x);
|
||||||
paint.style.setProperty('--y', tx.y);
|
paint.style.setProperty('--y', tx.y);
|
||||||
paint.style.setProperty('--size', Math.log(1 + tx.value)/Math.log(2));
|
paint.style.setProperty('--size', Math.log(1 + tx.value)/Math.log(2));
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 140%;
|
font-size: 140%;
|
||||||
background-image: url('assets/Dash-logo.svg');
|
background-image: url('assets/Dash-logo.svg');
|
||||||
|
|
@ -15,7 +16,8 @@ body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
box-sizing: inherit;
|
-webkit-box-sizing: inherit;
|
||||||
|
box-sizing: inherit;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -38,7 +40,9 @@ a {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 77.5vw;
|
width: 77.5vw;
|
||||||
height: 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) {
|
@media (max-height: 77.5vw) {
|
||||||
.block:first-child {
|
.block:first-child {
|
||||||
|
|
@ -49,7 +53,8 @@ a {
|
||||||
.block {
|
.block {
|
||||||
width: 15vw;
|
width: 15vw;
|
||||||
height: 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;
|
background-color: #eee;
|
||||||
margin: 0 auto 1em;
|
margin: 0 auto 1em;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -73,12 +78,17 @@ a {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(var(--x) * 90% + 5%);
|
left: calc(var(--x) * 90% + 5%);
|
||||||
top: calc(var(--y) * 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%);
|
height: calc(var(--size) * 20% + 20%);
|
||||||
width: calc(var(--size) * 20% + 20%);
|
width: calc(var(--size) * 20% + 20%);
|
||||||
mask-size: contain;
|
-webkit-mask-size: contain;
|
||||||
mask-repeat: no-repeat;
|
mask-size: contain;
|
||||||
mask-position: center;
|
-webkit-mask-repeat: no-repeat;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
-webkit-mask-position: center;
|
||||||
|
mask-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#muteToggle, #connectionStatus {
|
#muteToggle, #connectionStatus {
|
||||||
|
|
@ -99,8 +109,14 @@ a {
|
||||||
right: 0;
|
right: 0;
|
||||||
border-radius: 0 0 0 0.5em;
|
border-radius: 0 0 0 0.5em;
|
||||||
border-width: 0 0 0.1em 0.1em;
|
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;
|
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 {
|
#connectionStatus.is-disconnected:before {
|
||||||
content: 'Disconnected';
|
content: 'Disconnected';
|
||||||
|
|
@ -115,7 +131,14 @@ a {
|
||||||
color: green;
|
color: green;
|
||||||
}
|
}
|
||||||
#connectionStatus.is-connected {
|
#connectionStatus.is-connected {
|
||||||
|
-webkit-transition: -webkit-transform 0.5s;
|
||||||
|
transition: -webkit-transform 0.5s;
|
||||||
|
-o-transition: transform 0.5s;
|
||||||
transition: transform 0.5s;
|
transition: transform 0.5s;
|
||||||
transition-delay: 2s;
|
transition: transform 0.5s, -webkit-transform 0.5s;
|
||||||
transform: translate3d(0, -100%, 0);
|
-webkit-transition-delay: 2s;
|
||||||
|
-o-transition-delay: 2s;
|
||||||
|
transition-delay: 2s;
|
||||||
|
-webkit-transform: translate3d(0, -100%, 0);
|
||||||
|
transform: translate3d(0, -100%, 0);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,8 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"private": false,
|
"private": false,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"autoprefixer": "^7.1.4",
|
|
||||||
"less": "^2.7.2",
|
"less": "^2.7.2",
|
||||||
"socket.io": "^2.0.3"
|
"socket.io": "^2.2.0"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"watch": "brunch watch -s",
|
"watch": "brunch watch -s",
|
||||||
|
|
@ -19,7 +18,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"browser-sync-brunch": "^0.0.9",
|
"browser-sync-brunch": "^0.0.9",
|
||||||
"brunch": "^2.10.10",
|
"brunch": "^2.10.17",
|
||||||
"git-directory-deploy": "^1.5.1",
|
"git-directory-deploy": "^1.5.1",
|
||||||
"less-brunch": "^2.10.0"
|
"less-brunch": "^2.10.0"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue