From 656cc7e76d270f6f7064dae45e12a1f64b1d49be Mon Sep 17 00:00:00 2001 From: Kurohyou Date: Sun, 18 Dec 2022 13:26:14 -0700 Subject: [PATCH] Fix several errors and add missing features --- blade_runner_rpg/bladerunner_rpg.css | 475 ++++++++++++------ blade_runner_rpg/bladerunner_rpg.html | 671 +++++++++++++++----------- blade_runner_rpg/translation.json | 97 +++- 3 files changed, 813 insertions(+), 430 deletions(-) diff --git a/blade_runner_rpg/bladerunner_rpg.css b/blade_runner_rpg/bladerunner_rpg.css index bc7f70afd4..b83639c045 100644 --- a/blade_runner_rpg/bladerunner_rpg.css +++ b/blade_runner_rpg/bladerunner_rpg.css @@ -206,17 +206,8 @@ gap: 5px; } .charsheet .bladerunner [class*=container--character] .container__middle .section__specialties .repcontainer .repitem { - display: -ms-grid; - display: grid; - -ms-grid-columns: 1fr 5px auto; + -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; - gap: 5px; -} -.charsheet .bladerunner [class*=container--character] .container__middle .section__specialties .repcontainer .repitem input { - width: auto; -} -.charsheet .bladerunner [class*=container--character] .container__middle .section__specialties .repcontainer .repitem textarea { - grid-column: 1/-1; } .charsheet .bladerunner [class*=container--character] .container__middle .section__weapons { grid-column: 1/-1; @@ -239,6 +230,9 @@ -ms-flex-direction: column; flex-direction: column; gap: 5px; + -ms-flex-item-align: start; + -ms-grid-row-align: start; + align-self: start; } .charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .inputRow { display: -webkit-box; @@ -308,11 +302,16 @@ .charsheet .bladerunner [class*=container--character] .container__middle .section__armor input[name=attr_armor_name] { width: auto; } +.charsheet .bladerunner [class*=container--character] .container__middle .section__armor .attribute__value { + -ms-grid-row-align: center; + -ms-grid-column-align: center; + place-self: center; +} .charsheet .bladerunner [class*=container--character] .container__middle .section__armor textarea { -ms-grid-column-span: 2; grid-column: span 2; } -.charsheet .bladerunner [class*=container--character] .container__middle .section__injuries { +.charsheet .bladerunner [class*=container--character] .container__middle .injuries { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -324,7 +323,7 @@ -ms-grid-row-span: 3; grid-row: span 3; } -.charsheet .bladerunner [class*=container--character] .container__middle .section__injuries > div { +.charsheet .bladerunner [class*=container--character] .container__middle .injuries > div { gap: 1rem; } @media (max-width: 860px) { @@ -728,13 +727,9 @@ .sheet-rolltemplate-bladerunner:not(:first-child) { margin-top: 20px; } -.sheet-rolltemplate-bladerunner-push.sheet-rolltemplate-darkmode h1, -.sheet-rolltemplate-bladerunner.sheet-rolltemplate-darkmode h1 { - color: var(--col-tone); -} -.sheet-rolltemplate-bladerunner-push.sheet-rolltemplate-darkmode h2, -.sheet-rolltemplate-bladerunner.sheet-rolltemplate-darkmode h2 { - background: var(--col-deep); +.sheet-rolltemplate-bladerunner-push .sheet-push, +.sheet-rolltemplate-bladerunner .sheet-push { + text-transform: capitalize; } .sheet-rolltemplate-bladerunner-push h1, .sheet-rolltemplate-bladerunner h1 { @@ -744,9 +739,12 @@ font-weight: normal; line-height: 1; color: var(--col-alt); - mix-blend-mode: exclusion; grid-column: 1/-1; } +.sheet-rolltemplate-bladerunner-push h1 a, +.sheet-rolltemplate-bladerunner h1 a { + color: var(--col-schematic); +} .sheet-rolltemplate-bladerunner-push h2, .sheet-rolltemplate-bladerunner h2 { padding-left: 1rem; @@ -777,11 +775,16 @@ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; + text-transform: capitalize; } .sheet-rolltemplate-bladerunner-push .sheet-name, .sheet-rolltemplate-bladerunner .sheet-name { background: linear-gradient(12deg, rgba(44, 39, 61, 0.2), rgba(27, 177, 177, 0.2)); } +.sheet-rolltemplate-bladerunner-push a, +.sheet-rolltemplate-bladerunner a { + color: white; +} .sheet-rolltemplate-bladerunner-push a[href^="~"], .sheet-rolltemplate-bladerunner-push a[href^="!"], .sheet-rolltemplate-bladerunner a[href^="~"], .sheet-rolltemplate-bladerunner a[href^="!"] { @@ -815,10 +818,6 @@ 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 a:hover, -.sheet-rolltemplate-bladerunner a:hover { - mix-blend-mode: color-dodge; -} .sheet-rolltemplate-bladerunner-push .inlinerollresult.inlinerollresult, .sheet-rolltemplate-bladerunner .inlinerollresult.inlinerollresult { display: -ms-grid; @@ -855,6 +854,12 @@ .sheet-rolltemplate-bladerunner .inlinerollresult.inlinerollresult[original-title*="computed value"] { pointer-events: none; } +.sheet-rolltemplate-bladerunner-push .sheet-force-fumble .inlinerollresult, +.sheet-rolltemplate-bladerunner .sheet-force-fumble .inlinerollresult { + -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-successes, .sheet-rolltemplate-bladerunner .sheet-successes { -ms-grid-row: 5; @@ -890,7 +895,6 @@ font-family: var(--font-main); font-size: 4rem; color: var(--col-alt); - mix-blend-mode: color-dodge; } .sheet-rolltemplate-bladerunner-push .sheet-successes .fullcrit, .sheet-rolltemplate-bladerunner-push .sheet-successes .fullfail, .sheet-rolltemplate-bladerunner .sheet-successes .fullcrit, @@ -929,7 +933,6 @@ position: relative; -webkit-perspective: 1000px; perspective: 1000px; - mix-blend-mode: color-dodge; } .sheet-rolltemplate-bladerunner-push .sheet-rolls h3, .sheet-rolltemplate-bladerunner .sheet-rolls h3 { @@ -955,7 +958,6 @@ 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; border: 0px; } .sheet-rolltemplate-bladerunner-push .sheet-rolls h3.fullfail, @@ -1229,7 +1231,7 @@ font-family: var(--font-header); font-size: 18px; text-transform: uppercase; - color: var(--col-blue); + color: var(--col-tone); -webkit-transform-origin: 0 0; transform-origin: 0 0; rotate: 90deg; @@ -1240,11 +1242,31 @@ .sheet-rolltemplate-bladerunner .sheet-span-all { grid-column: 1/-1; } +.sheet-rolltemplate-bladerunner-push .sheet-effect, +.sheet-rolltemplate-bladerunner .sheet-effect { + text-transform: capitalize; + text-align: center; +} .sheet-rolltemplate-bladerunner-push .sheet-description, .sheet-rolltemplate-bladerunner .sheet-description { color: white; font-family: inherit; - text-align: center; +} +.sheet-rolltemplate-bladerunner-push.sheet-rolltemplate-darkmode h1, +.sheet-rolltemplate-bladerunner.sheet-rolltemplate-darkmode h1 { + color: var(--col-tone); +} +.sheet-rolltemplate-bladerunner-push.sheet-rolltemplate-darkmode h1 a, +.sheet-rolltemplate-bladerunner.sheet-rolltemplate-darkmode h1 a { + color: var(--col-alt); +} +.sheet-rolltemplate-bladerunner-push.sheet-rolltemplate-darkmode h2, +.sheet-rolltemplate-bladerunner.sheet-rolltemplate-darkmode h2 { + background: var(--col-deep); +} +.sheet-rolltemplate-bladerunner-push.sheet-rolltemplate-darkmode .sheet-choice-table::before, +.sheet-rolltemplate-bladerunner.sheet-rolltemplate-darkmode .sheet-choice-table::before { + color: var(--col-blue); } .sheet-darkmode .ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet]:before, @@ -1284,6 +1306,8 @@ --col-schematic: rgb(112, 148, 146); --col-schematic-glow: rgba(90, 141, 138, 0.5); --col-background: rgb(128, 160, 157); + --selectedColor:var(--col-blue); + --unselectedColor1:var(--col-background); --col-option2: rgba(133, 90, 90, 0.0); --img-bladerunner: url("https://s3.amazonaws.com/files.d20.io/images/304284738/jAqK_uR6cB2p2lCFKoDTOA/max.png?1663001456"); --img-caution: repeating-linear-gradient( @@ -1303,6 +1327,8 @@ } .ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet] > *, .ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet]:is(:focus, :hover) > * { + -ms-grid-row: 1; + -ms-grid-column: 1; grid-area: content; } .ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet]:before, @@ -1317,6 +1343,130 @@ -webkit-filter: invert(100%); filter: invert(100%); } +.ui-dialog .tab-content .charsheet .flex-box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.ui-dialog .tab-content .charsheet .gap { + gap: 5px; +} +.ui-dialog .tab-content .charsheet .capitalize { + text-transform: capitalize; +} +.ui-dialog .tab-content .charsheet .adaptive { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto; + grid-template-columns: auto; + -ms-grid-rows: auto; + grid-template-rows: auto; + grid-template-areas: "content"; + position: relative; +} +.ui-dialog .tab-content .charsheet .adaptive > * { + -ms-grid-row: 1; + -ms-grid-column: 1; + grid-area: content; +} +.ui-dialog .tab-content .charsheet .adaptive > span { + opacity: 0; + z-index: -10; + text-transform: initial; + border-radius: 0px; +} +.ui-dialog .tab-content .charsheet .adaptive--text { + min-height: 4rem; +} +.ui-dialog .tab-content .charsheet .adaptive--text__span { + white-space: pre-wrap; + padding: 4px; + border: 1px solid transparent; +} +.ui-dialog .tab-content .charsheet .adaptive--text__textarea { + width: 100%; + height: 100%; + resize: none; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +.ui-dialog .tab-content .charsheet .adaptive--text__textarea, +.ui-dialog .tab-content .charsheet .adaptive--input__input { + position: absolute; +} +.ui-dialog .tab-content .charsheet .adaptive--input__input { + width: 100%; +} +.ui-dialog .tab-content .charsheet .adaptive--input__span { + padding: 2px; + min-height: 1.5rem; +} +.ui-dialog .tab-content .charsheet .collapse-container { + position: relative; +} +.ui-dialog .tab-content .charsheet .repitem:hover .collapse, .ui-dialog .tab-content .charsheet .repitem:hover .roll-container, +.ui-dialog .tab-content .charsheet .collapse-container:hover .collapse, +.ui-dialog .tab-content .charsheet .collapse-container:hover .roll-container { + opacity: 1; +} +.ui-dialog .tab-content .charsheet .repitem .collapse, +.ui-dialog .tab-content .charsheet .collapse-container .collapse { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + opacity: 0; + position: absolute; + right: 0px; + top: 0px; + border: 0px solid black; + border-radius: 0; + color: var(--selectedColor); + text-transform: none; + background-color: transparent; + display: inline; + font-size: 16px; + z-index: 100; +} +.ui-dialog .tab-content .charsheet .repitem .collapse:before, +.ui-dialog .tab-content .charsheet .collapse-container .collapse:before { + content: "y"; + font-family: pictos; +} +.ui-dialog .tab-content .charsheet .repitem .collapse:checked, +.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked { + color: var(--unselectedColor1); +} +.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded, +.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container .expanded, +.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded, +.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container .expanded { + display: none !important; +} +.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, +.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *, +.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, +.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + * { + display: none !important; +} +.ui-dialog .tab-content .charsheet .repitem .collapse:not(:checked) ~ .collapsed, +.ui-dialog .tab-content .charsheet .repitem .collapse:not(:checked) ~ .collapse-container .collapsed, +.ui-dialog .tab-content .charsheet .collapse-container .collapse:not(:checked) ~ .collapsed, +.ui-dialog .tab-content .charsheet .collapse-container .collapse:not(:checked) ~ .collapse-container .collapsed { + display: none !important; +} +.ui-dialog .tab-content .charsheet .repitem .collapse:hover, +.ui-dialog .tab-content .charsheet .collapse-container .collapse:hover { + color: var(--selectedColor); +} +.ui-dialog .tab-content .charsheet .repitem .collapse { + right: -15px; +} +.ui-dialog .tab-content .charsheet .repcontainer.editmode .collapse { + display: none; +} +.ui-dialog .tab-content .charsheet .section-control:not(:checked) + .section-display { + display: none !important; +} .ui-dialog .charsheet { padding: 0; } @@ -1362,10 +1512,10 @@ } .charsheet .bladerunner .tabs__container > *:nth-child(odd) { position: relative; - -webkit-animation: spawn-right 500ms ease-in-out forwards; - animation: spawn-right 500ms ease-in-out forwards; - -webkit-animation-fill-mode: forward; - animation-fill-mode: forward; + -webkit-animation: spawn-right 500ms ease-in-out; + animation: spawn-right 500ms ease-in-out; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; } @-webkit-keyframes spawn-left { 0% { @@ -1506,12 +1656,15 @@ } .charsheet .bladerunner textarea:-moz-placeholder-shown, .charsheet .bladerunner input[type=text]:-moz-placeholder-shown, .charsheet .bladerunner input[type=number]:-moz-placeholder-shown, .charsheet .bladerunner select:-moz-placeholder-shown { background: var(--img-caution); + text-transform: capitalize; } .charsheet .bladerunner textarea:-ms-input-placeholder, .charsheet .bladerunner input[type=text]:-ms-input-placeholder, .charsheet .bladerunner input[type=number]:-ms-input-placeholder, .charsheet .bladerunner select:-ms-input-placeholder { background: var(--img-caution); + text-transform: capitalize; } .charsheet .bladerunner textarea:placeholder-shown, .charsheet .bladerunner input[type=text]:placeholder-shown, .charsheet .bladerunner input[type=number]:placeholder-shown, .charsheet .bladerunner select:placeholder-shown { background: var(--img-caution); + text-transform: capitalize; } .charsheet .bladerunner textarea:placeholder-shown::-webkit-input-placeholder, .charsheet .bladerunner input[type=text]:placeholder-shown::-webkit-input-placeholder, .charsheet .bladerunner input[type=number]:placeholder-shown::-webkit-input-placeholder, .charsheet .bladerunner select:placeholder-shown::-webkit-input-placeholder { color: var(--col-red); @@ -1535,8 +1688,8 @@ color: var(--col-red); } .charsheet .bladerunner textarea:hover, .charsheet .bladerunner textarea:focus-within, .charsheet .bladerunner input[type=text]:hover, .charsheet .bladerunner input[type=text]:focus-within, .charsheet .bladerunner input[type=number]:hover, .charsheet .bladerunner input[type=number]:focus-within, .charsheet .bladerunner select:hover, .charsheet .bladerunner select:focus-within { - -webkit-animation: pulse 1s ease-in-out infinite; - animation: pulse 1s ease-in-out infinite; + -webkit-animation: pulse 2s ease infinite; + animation: pulse 2s ease infinite; } @-webkit-keyframes pulse { 0% { @@ -1640,6 +1793,7 @@ -ms-flex-direction: column; flex-direction: column; padding: 1rem; + gap: 5px; 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); @@ -1706,11 +1860,6 @@ .charsheet .bladerunner button[type=roll]::before, .charsheet .bladerunner button[type=roll][type=roll]::before, .charsheet .bladerunner button[type=action][type=roll]::before, .charsheet .bladerunner .button[type=roll]::before { content: none; } -.charsheet .bladerunner button span, .charsheet .bladerunner button[type=roll] span, .charsheet .bladerunner button[type=action] span, .charsheet .bladerunner .button span { - margin: 0 5px; - padding: 2px; - border: 1px solid var(--col-alt); -} .charsheet .bladerunner button:active:not(.subtle-button), .charsheet .bladerunner button[type=roll]:active:not(.subtle-button), .charsheet .bladerunner button[type=action]:active:not(.subtle-button), .charsheet .bladerunner .button:active:not(.subtle-button) { background: var(--col-red-glow); -webkit-transition: background 50ms; @@ -1723,32 +1872,6 @@ -webkit-filter: none; filter: none; } -.charsheet .bladerunner button.subtle-button:hover { - border-color: var(--col-alt); - color: var(--col-alt); - -webkit-filter: drop-shadow(0 0 4px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)); - filter: drop-shadow(0 0 4px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)); -} -.charsheet .bladerunner button.subtle-button:hover::after { - background: var(--col-accent); -} -.charsheet .bladerunner button.subtle-button:hover h3 { - color: var(--col-deep); -} -.charsheet .bladerunner button.subtle-button:hover .grade { - color: var(--col-deep); - border-color: var(--col-deep); -} -.charsheet .bladerunner button.subtle-button:active { - -webkit-filter: drop-shadow(0 0 4px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); - filter: drop-shadow(0 0 4px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); - color: white; -} -.charsheet .bladerunner button.subtle-button:active::after { - background: var(--col-red-glow) !important; - -webkit-transition: background 50ms; - transition: background 50ms; -} .charsheet .bladerunner input.grade, .charsheet .bladerunner .gradeMenu input { background: none; position: relative; @@ -1782,29 +1905,150 @@ line-height: 2; } .charsheet .bladerunner .attribute_wrapper { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; + display: -ms-grid; + display: grid; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; + -ms-grid-columns: [button-start] 1fr auto minmax(auto, 40px) [button-end]; + grid-template-columns: [button-start] 1fr auto minmax(auto, 40px) [button-end]; + grid-template-areas: "header select dice"; +} +.charsheet .bladerunner .attribute_wrapper:first-child:not(.button-wrapper) { + -ms-grid-rows: [button-start] 46px [button-end]; + grid-template-rows: [button-start] 46px [button-end]; +} +.charsheet .bladerunner .attribute_wrapper.button-wrapper, .charsheet .bladerunner .attribute_wrapper:not(:first-child) { + -ms-grid-rows: [button-start] 40px [button-end]; + grid-template-rows: [button-start] 40px [button-end]; } .charsheet .bladerunner .attribute_wrapper > div { border: 0px; } +.charsheet .bladerunner .attribute_wrapper:hover button { + border-color: var(--col-alt); + color: var(--col-alt); + -webkit-filter: drop-shadow(0 0 4px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)); + filter: drop-shadow(0 0 4px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)); +} +.charsheet .bladerunner .attribute_wrapper:hover button::after { + background: var(--col-accent); +} +.charsheet .bladerunner .attribute_wrapper:hover h3 { + color: var(--col-deep); +} +.charsheet .bladerunner .attribute_wrapper:hover:not(:first-child) .grade { + color: var(--col-deep); + border-color: var(--col-deep); +} +.charsheet .bladerunner .attribute_wrapper:active button { + -webkit-filter: drop-shadow(0 0 4px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); + filter: drop-shadow(0 0 4px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); + color: white; +} +.charsheet .bladerunner .attribute_wrapper:active button::after { + background: var(--col-red-glow) !important; + -webkit-transition: background 50ms; + transition: background 50ms; +} .charsheet .bladerunner .attribute_wrapper button, .charsheet .bladerunner .attribute_wrapper .button { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; - height: 36px; + grid-area: button; +} +.charsheet .bladerunner .attribute_wrapper .attribute__value { + -ms-grid-row: 1; + -ms-grid-column: 2; + grid-area: select; + -ms-grid-row-align: center; + align-self: center; +} +.charsheet .bladerunner .attribute_wrapper .attribute__name { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-column-span: 1; + grid-area: header; + z-index: 10; + place-self: stretch; + padding: 5px 10px; + margin: 0; + overflow: hidden; +} +.charsheet .bladerunner .attribute_wrapper .attribute__name > span { + height: 100%; + overflow: hidden; + display: inline; +} +.charsheet .bladerunner .attribute_wrapper .attribute__name, .charsheet .bladerunner .attribute_wrapper .attribute__dice { + pointer-events: none; +} +.charsheet .bladerunner .attribute_wrapper .attribute__dice { + -ms-grid-row: 1; + -ms-grid-column: 3; + grid-area: dice; + display: inline-block; + -webkit-mask-image: linear-gradient(-60deg, var(--col-blue), transparent 80%); + mask-image: linear-gradient(-60deg, var(--col-blue), transparent 80%); + padding: 0 5px 5px; + -ms-grid-row-align: end; + align-self: end; + border: none; + font-size: 16px; + text-align: right; + color: var(--col-blue); + text-shadow: 1px 1px 0px var(--col-blue-glow); + z-index: 1; +} +.charsheet .bladerunner .attribute_wrapper .attribute__dice::first-letter { + font-size: 0.75em; +} +.charsheet .bladerunner .attribute_wrapper:not(.button-wrapper):first-of-type { + border: 2px solid black; + -o-border-image: linear-gradient(190deg, var(--col-blue), transparent 70%) 1; + border-image: linear-gradient(190deg, var(--col-blue), transparent 70%) 1; + border-width: 2px 2px 0 2px; + -webkit-filter: drop-shadow(0 0 4px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow)); + filter: drop-shadow(0 0 4px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow)); +} +.charsheet .bladerunner .attribute_wrapper:not(.button-wrapper):first-of-type .attribute__name { + text-transform: uppercase !important; + color: var(--col-blue); + text-shadow: none; + text-shadow: 1px 1px var(--col-blue-glow); +} +.charsheet .bladerunner .attribute_wrapper .attribute { + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +.charsheet .bladerunner .attribute_wrapper .attribute .attribute__value { + z-index: 2; +} +.charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::before, .charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::after { + position: absolute; + content: ""; + background: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(var(--col-red)), to(transparent)); + background: linear-gradient(to top, transparent, var(--col-red), transparent); + width: 2px; + height: 200%; + top: 50%; + translate: 0 -50%; + -webkit-filter: drop-shadow(0 0 2px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); + filter: drop-shadow(0 0 2px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); + z-index: 5; +} +.charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::before { + left: 0; +} +.charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::after { + right: 0; } .charsheet .bladerunner .attribute__value { - position: absolute; - right: 40px; + position: relative; } .charsheet .bladerunner .attribute__value input[type=hidden][value=B] ~ .gradeMenu { left: calc(-100% - 1px); @@ -1815,6 +2059,9 @@ .charsheet .bladerunner .attribute__value input[type=hidden][value=D] ~ .gradeMenu { left: calc(-300% - 1px); } +.charsheet .bladerunner .attribute__value input[type=hidden][value="-"] ~ .gradeMenu { + left: calc(-400% - 1px); +} .charsheet .bladerunner .attribute__value .gradeMenu { position: absolute; left: 0px; @@ -2087,72 +2334,6 @@ -ms-grid-column: 1; } } -.charsheet .bladerunner .attribute_wrapper:first-of-type { - border: 2px solid black; - -o-border-image: linear-gradient(190deg, var(--col-blue), transparent 70%) 1; - border-image: linear-gradient(190deg, var(--col-blue), transparent 70%) 1; - border-width: 2px 2px 0 2px; - -webkit-filter: drop-shadow(0 0 4px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow)); - filter: drop-shadow(0 0 4px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow)); -} -.charsheet .bladerunner .attribute_wrapper:first-of-type .attribute__name { - text-transform: uppercase !important; - color: var(--col-blue); - text-shadow: none; - text-shadow: 1px 1px var(--col-blue-glow); -} -.charsheet .bladerunner .attribute_wrapper .attribute { - position: relative; - display: -ms-grid; - display: grid; - -ms-grid-columns: 1fr auto 40px; - grid-template-columns: 1fr auto 40px; -} -.charsheet .bladerunner .attribute_wrapper .attribute .attribute__value { - z-index: 2; -} -.charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::before, .charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::after { - position: absolute; - content: ""; - background: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(var(--col-red)), to(transparent)); - background: linear-gradient(to top, transparent, var(--col-red), transparent); - width: 2px; - height: 200%; - top: 50%; - translate: 0 -50%; - -webkit-filter: drop-shadow(0 0 2px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); - filter: drop-shadow(0 0 2px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); - z-index: 5; -} -.charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::before { - left: 0; -} -.charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::after { - right: 0; -} -.charsheet .bladerunner .attribute_wrapper .attribute span { - position: absolute; - margin: 0; - padding: 0 5px; - right: 1rem; - bottom: 5px; - width: 30%; - display: inline-block; - -webkit-mask-image: linear-gradient(-60deg, var(--col-blue), transparent 80%); - mask-image: linear-gradient(-60deg, var(--col-blue), transparent 80%); - -ms-flex-item-align: end; - -ms-grid-row-align: end; - align-self: end; - border: none; - font-size: 16px; - text-align: right; - color: var(--col-blue); - text-shadow: 1px 1px 0px var(--col-blue-glow); - z-index: 1; -} -.charsheet .bladerunner .attribute_wrapper .attribute span::first-letter { - font-size: 0.75em; -} .charsheet .bladerunner .logo-lapd { display: -webkit-box; display: -ms-flexbox; @@ -2469,8 +2650,8 @@ appearance: none; background: none; border: 2px solid var(--col-alt); - -webkit-filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)) drop-shadow(0px 8px 1px var(--col-schematic)); - filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)) drop-shadow(0px 8px 1px var(--col-schematic)); + -webkit-filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)) drop-shadow(0px 4px 1px var(--col-schematic)); + filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)) drop-shadow(0px 4px 1px var(--col-schematic)); -webkit-transition: background 100ms ease-out; transition: background 100ms ease-out; } @@ -2479,9 +2660,17 @@ border-color: var(--col-red-glow); outline: 2px solid var(--col-alt); outline-offset: -4px; - -webkit-filter: drop-shadow(0 0 2px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)) drop-shadow(0px 8px 1px var(--col-accent)); - filter: drop-shadow(0 0 2px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)) drop-shadow(0px 8px 1px var(--col-accent)); + -webkit-filter: drop-shadow(0 0 2px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)) drop-shadow(0px 4px 1px var(--col-accent)); + filter: drop-shadow(0 0 2px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)) drop-shadow(0px 4px 1px var(--col-accent)); } .charsheet .bladerunner .span-all { grid-column: 1/-1; +} +.charsheet .bladerunner .repitem { + display: -ms-grid; + display: grid; + gap: 5px; +} +.charsheet .bladerunner .repitem input { + width: auto; } \ No newline at end of file diff --git a/blade_runner_rpg/bladerunner_rpg.html b/blade_runner_rpg/bladerunner_rpg.html index d2563c34aa..a7b39da205 100644 --- a/blade_runner_rpg/bladerunner_rpg.html +++ b/blade_runner_rpg/bladerunner_rpg.html @@ -26,389 +26,401 @@
-
+

Profile Database

-
-

Key Memory

- +

+
-

Key Relationship

- +

+
-

Home

+

-

Appearance

+

-

Attributes & Skills

-
+

+
-
-

strength

d6 -
+
+

+

- + -
+
- - + +
-
+
d8
+

+

-
+
- +
-
+
d6
+

+

-
+
- +
-
+
d6
+

+

-
+
- +
-
+
d6
-
+
-
-

agility

d6 -
+
+

+

- + -
+
- - + +
-
+
d8
+

+

-
+
- +
-
+
d6
+

+

-
+
- +
-
+
d6
+

+

-
+
- +
-
+
d6
-
+
-
-

intelligence

d6 -
+
+

+

- + -
+
- - + +
-
+
d8
+

+

-
+
- +
-
+
d6
+

+

-
+
- +
-
+
d6
+

+

-
+
- +
-
+
d6
-
+
-
-

empathy

d6 -
+
+

+

- + -
+
- - + +
-
+
d8
+

+

-
+
- +
-
+
d6
+

+

-
+
- +
-
+
d6
+

+

-
+
- +
-
+
d6
-
-

driving

d6 -
+
+

+

-
+
- +
-
+
d6
- -
-

Weapons

-

Hand to Hand

+

+

- + - + - - + +

Firearms

- + - + - - + +

Specialties

- + + - +
+ +
-
+
+

Armor

- - - + + +
+ + + +
+ + + + + +
+
+
+ +
-
+
+

Signature Item

-
- +
+ + +
+
+

Gear

+
- + +
+
+
-
+
-

Health

+

-

Maximum Health

+

@@ -527,9 +588,9 @@
-

Resolve

+

-

Maximum Resolve

+

@@ -553,7 +614,7 @@
-

Promotion Points

+

@@ -579,7 +640,7 @@
-

Humanity Points

+

@@ -605,7 +666,7 @@
-

Chinyen Points

+

@@ -632,20 +693,20 @@
-
+
-

Shift Log

+

-

Shifts

+

@@ -660,49 +721,49 @@
-

Log File

+

-

Morning

+

-

Day

+

-

Evening

+

-

Night

+

- -
-

Vehicle

-