diff --git a/blade_runner_rpg/bladerunner_rpg.css b/blade_runner_rpg/bladerunner_rpg.css index 47582743f8..bc7f70afd4 100644 --- a/blade_runner_rpg/bladerunner_rpg.css +++ b/blade_runner_rpg/bladerunner_rpg.css @@ -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) { diff --git a/blade_runner_rpg/bladerunner_rpgpreview.png b/blade_runner_rpg/bladerunner_rpgpreview.png index f7f5fa8e1c..c105c3d0d3 100644 Binary files a/blade_runner_rpg/bladerunner_rpgpreview.png and b/blade_runner_rpg/bladerunner_rpgpreview.png differ diff --git a/blade_runner_rpg/sheet.json b/blade_runner_rpg/sheet.json index f43faaf911..61ffbe073e 100644 --- a/blade_runner_rpg/sheet.json +++ b/blade_runner_rpg/sheet.json @@ -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).",