mirror of
https://github.com/seigler/dash-visualizer
synced 2025-07-27 01:36:10 +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
45
bundle.css
45
bundle.css
|
|
@ -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,9 +131,16 @@ 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);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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