mirror of
https://github.com/seigler/dash-visualizer
synced 2025-07-27 09:46:09 +00:00
publish: 🐛 Fix webkit rendering issues
generated from commit 7ff2852360
This commit is contained in:
Joshua Seigler
parent
a0b9b6ab66
commit
fca83a27ed
4 changed files with 2729 additions and 533 deletions
23
bundle.css
23
bundle.css
|
|
@ -1,6 +1,7 @@
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 140%;
|
font-size: 140%;
|
||||||
|
|
@ -15,6 +16,7 @@ body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
|
-webkit-box-sizing: inherit;
|
||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
|
|
@ -38,6 +40,8 @@ a {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 77.5vw;
|
width: 77.5vw;
|
||||||
height: 77.5vw;
|
height: 77.5vw;
|
||||||
|
-webkit-transform: translate(-50%,-50%);
|
||||||
|
-ms-transform: translate(-50%,-50%);
|
||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%,-50%);
|
||||||
}
|
}
|
||||||
@media (max-height: 77.5vw) {
|
@media (max-height: 77.5vw) {
|
||||||
|
|
@ -49,6 +53,7 @@ a {
|
||||||
.block {
|
.block {
|
||||||
width: 15vw;
|
width: 15vw;
|
||||||
height: 15vw;
|
height: 15vw;
|
||||||
|
-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);
|
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;
|
||||||
|
|
@ -73,11 +78,16 @@ 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%);
|
||||||
|
-webkit-transform: translate(-50%, -50%) rotate(var(--rotation));
|
||||||
|
-ms-transform: translate(-50%, -50%) rotate(var(--rotation));
|
||||||
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%);
|
||||||
|
-webkit-mask-size: contain;
|
||||||
mask-size: contain;
|
mask-size: contain;
|
||||||
|
-webkit-mask-repeat: no-repeat;
|
||||||
mask-repeat: no-repeat;
|
mask-repeat: no-repeat;
|
||||||
|
-webkit-mask-position: center;
|
||||||
mask-position: center;
|
mask-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -99,7 +109,13 @@ 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;
|
||||||
|
transition: transform 0.5s, -webkit-transform 0.5s;
|
||||||
|
-webkit-transform: none;
|
||||||
|
-ms-transform: none;
|
||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
#connectionStatus.is-disconnected:before {
|
#connectionStatus.is-disconnected:before {
|
||||||
|
|
@ -115,8 +131,15 @@ 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: transform 0.5s, -webkit-transform 0.5s;
|
||||||
|
-webkit-transition-delay: 2s;
|
||||||
|
-o-transition-delay: 2s;
|
||||||
transition-delay: 2s;
|
transition-delay: 2s;
|
||||||
|
-webkit-transform: translate3d(0, -100%, 0);
|
||||||
transform: translate3d(0, -100%, 0);
|
transform: translate3d(0, -100%, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
{"version":3,"sources":["app/styles/main.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"public/bundle.css","sourcesContent":["body {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n font-family: sans-serif;\n font-size: 140%;\n background-image: url('assets/Dash-logo.svg');\n background-size: 50vmin auto, cover;\n background-position: center;\n background-attachment: fixed;\n background-repeat: no-repeat;\n background-color: #bbb;\n color: black;\n height: 100vh;\n overflow: hidden;\n}\n* {\n box-sizing: inherit;\n}\na {\n color: inherit;\n text-decoration: none;\n}\n#connectionStatus.is-connected ~ #transactionList:empty:before {\n content: 'Waiting for first transaction...';\n display: block;\n text-align: center;\n font-size: 2em;\n opacity: 0.5;\n}\n#blockList {\n margin-left: 80vw;\n padding-top: 2.5vw;\n}\n.block:first-child {\n position: absolute;\n left: 41.125%;\n top: 50%;\n width: 77.5vw;\n height: 77.5vw;\n transform: translate(-50%,-50%);\n}\n@media (max-height: 77.5vw) {\n .block:first-child {\n width: calc(100vh - 5vw);\n height: calc(100vh - 5vw);\n }\n}\n.block {\n width: 15vw;\n height: 15vw;\n box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);\n background-color: #eee;\n margin: 0 auto 1em;\n position: relative;\n overflow: hidden;\n}\n.explorer-link {\n display: none;\n position: absolute;\n z-index: 1;\n font-size: 1.9vmin;\n text-align: center;\n background-color: hsla(0, 0%, 100%, 0.5);\n color: transparent;\n height: 100%;\n width: 100%;\n}\n.block:hover .explorer-link {\n display: block;\n}\n.paint {\n position: absolute;\n left: calc(var(--x) * 90% + 5%);\n top: calc(var(--y) * 90% + 5%);\n transform: translate(-50%, -50%) rotate(var(--rotation));\n height: calc(var(--size) * 20% + 20%);\n width: calc(var(--size) * 20% + 20%);\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n}\n\n#muteToggle, #connectionStatus {\n position: fixed;\n top: 0;\n width: 8em;\n background: white;\n border: solid black;\n padding: 0.5em;\n font-size: 0.8em;\n text-transform: uppercase;\n font-weight: bold;\n text-align: center;\n color: black;\n}\n\n#connectionStatus {\n right: 0;\n border-radius: 0 0 0 0.5em;\n border-width: 0 0 0.1em 0.1em;\n transition: transform 0.5s;\n transform: none;\n}\n#connectionStatus.is-disconnected:before {\n content: 'Disconnected';\n color: red;\n}\n#connectionStatus.is-connecting:before {\n content: 'Connecting...';\n color: black;\n}\n#connectionStatus.is-connected:before {\n content: 'Connected';\n color: green;\n}\n#connectionStatus.is-connected {\n transition: transform 0.5s;\n transition-delay: 2s;\n transform: translate3d(0, -100%, 0);\n}\n"]}
|
{"version":3,"sources":["app/styles/main.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"public/bundle.css","sourcesContent":["body {\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n font-family: sans-serif;\n font-size: 140%;\n background-image: url('assets/Dash-logo.svg');\n background-size: 50vmin auto, cover;\n background-position: center;\n background-attachment: fixed;\n background-repeat: no-repeat;\n background-color: #bbb;\n color: black;\n height: 100vh;\n overflow: hidden;\n}\n* {\n -webkit-box-sizing: inherit;\n box-sizing: inherit;\n}\na {\n color: inherit;\n text-decoration: none;\n}\n#connectionStatus.is-connected ~ #transactionList:empty:before {\n content: 'Waiting for first transaction...';\n display: block;\n text-align: center;\n font-size: 2em;\n opacity: 0.5;\n}\n#blockList {\n margin-left: 80vw;\n padding-top: 2.5vw;\n}\n.block:first-child {\n position: absolute;\n left: 41.125%;\n top: 50%;\n width: 77.5vw;\n height: 77.5vw;\n -webkit-transform: translate(-50%,-50%);\n -ms-transform: translate(-50%,-50%);\n transform: translate(-50%,-50%);\n}\n@media (max-height: 77.5vw) {\n .block:first-child {\n width: calc(100vh - 5vw);\n height: calc(100vh - 5vw);\n }\n}\n.block {\n width: 15vw;\n height: 15vw;\n -webkit-box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);\n box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);\n background-color: #eee;\n margin: 0 auto 1em;\n position: relative;\n overflow: hidden;\n}\n.explorer-link {\n display: none;\n position: absolute;\n z-index: 1;\n font-size: 1.9vmin;\n text-align: center;\n background-color: hsla(0, 0%, 100%, 0.5);\n color: transparent;\n height: 100%;\n width: 100%;\n}\n.block:hover .explorer-link {\n display: block;\n}\n.paint {\n position: absolute;\n left: calc(var(--x) * 90% + 5%);\n top: calc(var(--y) * 90% + 5%);\n -webkit-transform: translate(-50%, -50%) rotate(var(--rotation));\n -ms-transform: translate(-50%, -50%) rotate(var(--rotation));\n transform: translate(-50%, -50%) rotate(var(--rotation));\n height: calc(var(--size) * 20% + 20%);\n width: calc(var(--size) * 20% + 20%);\n -webkit-mask-size: contain;\n mask-size: contain;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n}\n\n#muteToggle, #connectionStatus {\n position: fixed;\n top: 0;\n width: 8em;\n background: white;\n border: solid black;\n padding: 0.5em;\n font-size: 0.8em;\n text-transform: uppercase;\n font-weight: bold;\n text-align: center;\n color: black;\n}\n\n#connectionStatus {\n right: 0;\n border-radius: 0 0 0 0.5em;\n border-width: 0 0 0.1em 0.1em;\n -webkit-transition: -webkit-transform 0.5s;\n transition: -webkit-transform 0.5s;\n -o-transition: transform 0.5s;\n transition: transform 0.5s;\n transition: transform 0.5s, -webkit-transform 0.5s;\n -webkit-transform: none;\n -ms-transform: none;\n transform: none;\n}\n#connectionStatus.is-disconnected:before {\n content: 'Disconnected';\n color: red;\n}\n#connectionStatus.is-connecting:before {\n content: 'Connecting...';\n color: black;\n}\n#connectionStatus.is-connected:before {\n content: 'Connected';\n color: green;\n}\n#connectionStatus.is-connected {\n -webkit-transition: -webkit-transform 0.5s;\n transition: -webkit-transform 0.5s;\n -o-transition: transform 0.5s;\n transition: transform 0.5s;\n transition: transform 0.5s, -webkit-transform 0.5s;\n -webkit-transition-delay: 2s;\n -o-transition-delay: 2s;\n transition-delay: 2s;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n}\n"]}
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue