slaguru666/roll20-character-sheets-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #11290 from Kurohyou/FIX/bladerunner-render

Browse Source 
Blade Runner RPG: Fix render issues on chrome/firefox
This commit is contained in:
Nic Bradley
2022-12-12 09:18:42 -08:00
committed by GitHub
parent 27df76544f 925aef9a72
commit a784d34620
3 changed files with 64 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blade_runner_rpg/bladerunner_rpg.css
+63 -94
View File
@@ -878,8 +878,8 @@
-webkit-filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow));
filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow));
}
.sheet-rolltemplate-bladerunner-push .sheet-successes span,
.sheet-rolltemplate-bladerunner .sheet-successes span {
.sheet-rolltemplate-bladerunner-push .sheet-successes span.inlinerollresult,
.sheet-rolltemplate-bladerunner .sheet-successes span.inlinerollresult {
position: absolute;
top: 50%;
left: 50%;
@@ -976,17 +976,23 @@
justify-content: space-between;
position: relative;
grid-area: push;
border: 1px solid var(--col-blue);
border-width: 0 0 2px;
border-bottom: 1px solid var(--col-blue);
padding: 4px;
color: var(--col-blue);
font-size: 18px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%, 0 calc(100% - 2rem));
clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%, 0 calc(100% - 2rem));
}
.sheet-rolltemplate-bladerunner-push .sheet-push a,
.sheet-rolltemplate-bladerunner .sheet-push a {
border: none;
background: rgba(85, 157, 175, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 2rem;
gap: 0.25rem;
width: 100%;
-webkit-box-sizing: border-box;
@@ -1002,6 +1008,10 @@
color: var(--col-blue);
font-size: 20px;
}
.sheet-rolltemplate-bladerunner-push .sheet-push a:hover,
.sheet-rolltemplate-bladerunner .sheet-push a:hover {
background: rgba(85, 157, 175, 0.4);
}
.sheet-rolltemplate-bladerunner-push .sheet-choice-table,
.sheet-rolltemplate-bladerunner .sheet-choice-table {
display: -ms-grid;
@@ -1013,7 +1023,11 @@
-ms-grid-rows: auto 0.25rem auto 0.25rem auto;
grid-template-rows: repeat(3, auto);
grid-column: 1/-1;
-ms-grid-row-span: 2;
grid-row: span 2;
min-height: 105px;
gap: 0.25rem;
border-left: 1rem solid var(--col-schematic-glow);
color: white;
position: relative;
}
@@ -1156,6 +1170,9 @@
}
.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-toRoll > a,
.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-toRoll > a {
border-color: var(--col-alt);
-webkit-filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow));
filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow));
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -1175,83 +1192,49 @@
}
.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-corner-label > a,
.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-corner-label > a {
border-color: var(--col-alt);
-webkit-filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow));
filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow));
font-size: 12px;
}
.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-top-label, .sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-side-label,
.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-top-label,
.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-side-label {
background: var(--col-schematic);
border: none;
display: -ms-grid;
display: grid;
place-items: center;
-ms-grid-row-align: stretch !important;
-ms-grid-column-align: stretch !important;
place-self: stretch !important;
font-size: 16px;
}
.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-top-label,
.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-top-label {
display: -ms-grid;
display: grid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
place-items: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
place-self: center;
background: var(--col-schematic);
background: none;
min-width: 35px;
min-height: 30px;
border: 2px solid var(--col-blue);
font-size: 16px;
line-height: 1;
text-align: center;
color: white;
-webkit-filter: drop-shadow(0 0 2px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow));
filter: drop-shadow(0 0 2px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow));
mix-blend-mode: color-dodge;
-ms-grid-row: 1;
grid-row: 1;
place-self: stretch;
display: grid;
place-items: center;
font-size: 16px;
}
.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-top-label.fullfail,
.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-top-label.fullfail {
-webkit-box-shadow: 0 0 4px var(--col-red-glow), inset 0 0 4px var(--col-red-glow);
box-shadow: 0 0 4px var(--col-red-glow), inset 0 0 4px var(--col-red-glow);
color: var(--col-red-glow);
}
.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-side-label,
.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-side-label {
display: -ms-grid;
display: grid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
place-items: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
place-self: center;
background: var(--col-schematic);
background: none;
min-width: 35px;
min-height: 30px;
border: 2px solid var(--col-blue);
font-size: 16px;
line-height: 1;
text-align: center;
color: white;
-webkit-filter: drop-shadow(0 0 2px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow));
filter: drop-shadow(0 0 2px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow));
mix-blend-mode: color-dodge;
-ms-grid-column: 1;
grid-column: 1;
place-self: stretch;
display: grid;
place-items: center;
font-size: 16px;
min-width: 35px;
}
.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-side-label.fullfail,
.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-side-label.fullfail {
-webkit-box-shadow: 0 0 4px var(--col-red-glow), inset 0 0 4px var(--col-red-glow);
box-shadow: 0 0 4px var(--col-red-glow), inset 0 0 4px var(--col-red-glow);
color: var(--col-red-glow);
.sheet-rolltemplate-bladerunner-push .sheet-choice-table::before,
.sheet-rolltemplate-bladerunner .sheet-choice-table::before {
background: var(--dark-back-gradient);
position: absolute;
content: "Push matrix";
font-family: var(--font-header);
font-size: 18px;
text-transform: uppercase;
color: var(--col-blue);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
rotate: 90deg;
top: 0;
left: 2rem;
}
.sheet-rolltemplate-bladerunner-push .sheet-span-all,
.sheet-rolltemplate-bladerunner .sheet-span-all {
@@ -1274,12 +1257,12 @@
}
.sheet-darkmode .charsheet .bladerunner {
--col-background: rgb(50, 125, 138);
background: url(https://i.imgur.com/fSUUdPc.gif), url(https://i.imgur.com/heNEJ1D.gif), radial-gradient(ellipse 400px 400% at right center, var(--col-background), transparent 20%), radial-gradient(ellipse 400px 400% at left center, var(--col-background), transparent 20%), -webkit-gradient(linear, left top, right top, from(var(--col-background)), color-stop(black), to(var(--col-background))), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), -webkit-gradient(linear, left top, left bottom, from(black), to(black));
background: url(https://i.imgur.com/fSUUdPc.gif), url(https://i.imgur.com/heNEJ1D.gif), radial-gradient(ellipse 400px 400% at right center, var(--col-background), transparent 20%), radial-gradient(ellipse 400px 400% at left center, var(--col-background), transparent 20%), linear-gradient(to right, var(--col-background), black, var(--col-background)), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), linear-gradient(black 0%, black 100%);
background: radial-gradient(ellipse 400px 400% at right center, var(--col-background), transparent 20%), radial-gradient(ellipse 400px 400% at left center, var(--col-background), transparent 20%), -webkit-gradient(linear, left top, right top, from(var(--col-background)), color-stop(black), to(var(--col-background))), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), -webkit-gradient(linear, left top, left bottom, from(black), to(black));
background: radial-gradient(ellipse 400px 400% at right center, var(--col-background), transparent 20%), radial-gradient(ellipse 400px 400% at left center, var(--col-background), transparent 20%), linear-gradient(to right, var(--col-background), black, var(--col-background)), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), linear-gradient(black 0%, black 100%);
-webkit-box-shadow: 0 0 20px var(--col-deep), 0 0 12px var(--col-background), 0 0 2px var(--col-background);
box-shadow: 0 0 20px var(--col-deep), 0 0 12px var(--col-background), 0 0 2px var(--col-background);
background-size: contain, 700px, cover, cover, cover, cover, cover, cover;
background-blend-mode: screen, screen, lighten, lighten, multiply, lighten, lighten, lighten, normal;
background-size: cover, cover, cover, cover, cover, cover;
background-blend-mode: lighten, lighten, multiply, lighten, lighten, lighten, normal;
background-repeat: no-repeat;
}
@@ -1353,10 +1336,10 @@
}
.charsheet .bladerunner {
background-image: radial-gradient(ellipse 400px 400% at right center, var(--col-background), transparent 10%), radial-gradient(ellipse 400px 400% at left center, var(--col-background), transparent 10%), url(https://i.imgur.com/heNEJ1D.gif), -webkit-gradient(linear, left top, right top, from(var(--col-background)), color-stop(30%, var(--col-deep)), color-stop(70%, var(--col-deep)), to(var(--col-background))), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), -webkit-gradient(linear, left top, left bottom, from(var(--col-background)), to(var(--col-background)));
background-image: radial-gradient(ellipse 400px 400% at right center, var(--col-background), transparent 10%), radial-gradient(ellipse 400px 400% at left center, var(--col-background), transparent 10%), url(https://i.imgur.com/heNEJ1D.gif), linear-gradient(to right, var(--col-background), var(--col-deep) 30%, var(--col-deep) 70%, var(--col-background)), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), linear-gradient(var(--col-background), var(--col-background));
background-size: cover, cover, 700px, cover, cover, cover, cover, cover;
background-blend-mode: screen, screen, screen, multiply, overlay, overlay, overlay, normal;
background-image: radial-gradient(ellipse 400px 400% at right center, var(--col-background), transparent 10%), radial-gradient(ellipse 400px 400% at left center, var(--col-background), transparent 10%), -webkit-gradient(linear, left top, right top, from(var(--col-background)), color-stop(30%, var(--col-deep)), color-stop(70%, var(--col-deep)), to(var(--col-background))), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), -webkit-gradient(linear, left top, left bottom, from(var(--col-background)), to(var(--col-background)));
background-image: radial-gradient(ellipse 400px 400% at right center, var(--col-background), transparent 10%), radial-gradient(ellipse 400px 400% at left center, var(--col-background), transparent 10%), linear-gradient(to right, var(--col-background), var(--col-deep) 30%, var(--col-deep) 70%, var(--col-background)), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), linear-gradient(var(--col-background), var(--col-background));
background-size: cover, cover, cover, cover, cover, cover, cover;
background-blend-mode: screen, screen, multiply, overlay, overlay, overlay, normal;
background-repeat: no-repeat, repeat;
background-position: 20% 10%;
-webkit-box-shadow: inset 0 0 12px white, inset 0 0 6px white, inset 0 0 2px white;
@@ -1372,8 +1355,6 @@
}
.charsheet .bladerunner .tabs__container > *:nth-child(even) {
position: relative;
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
-webkit-animation: spawn-left 500ms ease-in-out;
animation: spawn-left 500ms ease-in-out;
-webkit-animation-fill-mode: forwards;
@@ -1381,8 +1362,6 @@
}
.charsheet .bladerunner .tabs__container > *:nth-child(odd) {
position: relative;
-webkit-transform: translateX(200%);
transform: translateX(200%);
-webkit-animation: spawn-right 500ms ease-in-out forwards;
animation: spawn-right 500ms ease-in-out forwards;
-webkit-animation-fill-mode: forward;
@@ -1441,8 +1420,7 @@
z-index: 99;
}
.charsheet .bladerunner nav button, .charsheet .bladerunner .container__shifts button {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
background-color: #010302 !important;
}
.charsheet .bladerunner .inputRow {
display: -webkit-box;
@@ -1662,7 +1640,7 @@
-ms-flex-direction: column;
flex-direction: column;
padding: 1rem;
background: linear-gradient(12deg, rgba(44, 39, 61, 0.2), rgba(14, 179, 179, 0.2));
background: linear-gradient(90deg, rgb(24, 74, 82), rgb(7, 17, 21) 60px, rgb(7, 17, 21) calc(100% - 60px), rgb(24, 74, 82));
background-attachment: fixed;
-webkit-box-shadow: -4px 4px 4px rgba(248, 0, 255, 0.1803921569), 0px 4px 4px rgba(255, 212, 0, 0.1803921569), 4px 4px 4px rgba(0, 194, 255, 0.1803921569);
box-shadow: -4px 4px 4px rgba(248, 0, 255, 0.1803921569), 0px 4px 4px rgba(255, 212, 0, 0.1803921569), 4px 4px 4px rgba(0, 194, 255, 0.1803921569);
@@ -1671,8 +1649,6 @@
outline-offset: 1rem;
-webkit-transition: all 400ms ease-in;
transition: all 400ms ease-in;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.charsheet .bladerunner :where([class*=section]):hover {
outline-offset: 2rem;
@@ -1723,8 +1699,6 @@
inset: 0;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%, 0 calc(100% - 2rem));
clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%, 0 calc(100% - 2rem));
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
z-index: -1;
@@ -2047,8 +2021,7 @@
top: 4rem;
grid-area: advantage;
z-index: 99;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background-color: #071115 !important;
}
.charsheet .bladerunner .tabs > img {
-ms-grid-row: 1;
@@ -2176,8 +2149,6 @@
color: var(--col-blue);
text-shadow: 1px 1px 0px var(--col-blue-glow);
z-index: 1;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.charsheet .bladerunner .attribute_wrapper .attribute span::first-letter {
font-size: 0.75em;
@@ -2368,8 +2339,6 @@
background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(30%, var(--col-deep)), color-stop(70%, var(--col-deep)), to(transparent));
background: linear-gradient(to right, transparent, var(--col-deep) 30%, var(--col-deep) 70%, transparent);
border: 0px solid var(--col-alt);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: -1;
}
@supports selector(:has(input[type=hidden][value="advantage"])::after) {
blade_runner_rpg/bladerunner_rpgpreview.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 967 KiB

After

Width:  |  Height:  |  Size: 543 KiB

blade_runner_rpg/sheet.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"html": "bladerunner_rpg.html",
"css": "bladerunner_rpg.css",
"authors": ["Medieve","Scott Casey","Sigil Services"],
"authors": "Medieve, Scott Casey, Sigil Services",
"roll20userid": ["23472","459831"],
"preview": "bladerunner_rpgpreview.png",
"instructions": "This is the official Bladerunner RPG Roll20 character sheet. It includes drag and drop integration with the [Bladerunner RPG Compendium](https://roll20.net/compendium/Blade%20Runner%20RPG).",