diff --git a/blade_runner_rpg/assets/LAPD.png b/blade_runner_rpg/assets/LAPD.png new file mode 100644 index 0000000000..34060e6717 Binary files /dev/null and b/blade_runner_rpg/assets/LAPD.png differ diff --git a/blade_runner_rpg/assets/digital1.gif b/blade_runner_rpg/assets/digital1.gif new file mode 100644 index 0000000000..3dd5d11012 Binary files /dev/null and b/blade_runner_rpg/assets/digital1.gif differ diff --git a/blade_runner_rpg/assets/digital_circle.gif b/blade_runner_rpg/assets/digital_circle.gif new file mode 100644 index 0000000000..27aba2551c Binary files /dev/null and b/blade_runner_rpg/assets/digital_circle.gif differ diff --git a/blade_runner_rpg/assets/header.png b/blade_runner_rpg/assets/header.png new file mode 100644 index 0000000000..741350ef41 Binary files /dev/null and b/blade_runner_rpg/assets/header.png differ diff --git a/blade_runner_rpg/bladerunner_rpg.css b/blade_runner_rpg/bladerunner_rpg.css new file mode 100644 index 0000000000..47582743f8 --- /dev/null +++ b/blade_runner_rpg/bladerunner_rpg.css @@ -0,0 +1,2518 @@ +@import url("https://fonts.googleapis.com/css?family=Homenaje|Play|Material+Symbols+Outlined|material+icons|Wallpoet|Saira+Extra+Condensed&display=swap"); +.tabs .tabs__body .tabs__container:not(.k-active-tab) { + display: none !important; +} + +.charsheet .bladerunner [class*=container--character] { + display: -ms-grid; + display: grid; + gap: 1rem; +} +.charsheet .bladerunner [class*=container--character] .container__top { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 1rem 1fr; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} +.charsheet .bladerunner [class*=container--character] .container__top .section__home { + gap: 5px; +} +@media (max-width: 760px) { + .charsheet .bladerunner [class*=container--character] .container__top { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; + } +} +.charsheet .bladerunner [class*=container--character] .section__basic { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 5px 1fr 5px auto; + grid-template-columns: 1fr 1fr auto; + grid-auto-flow: column; + gap: 5px; +} +.charsheet .bladerunner [class*=container--character] .section__basic h1 { + -ms-grid-row-span: 2; + grid-row: span 2; +} +.charsheet .bladerunner [class*=container--character] .section__basic .option_replicant { + -ms-grid-row-span: 2; + grid-row: span 2; + -ms-grid-column: 3; + grid-column: 3; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 5px; +} +.charsheet .bladerunner [class*=container--character] .section__basic .option_replicant label { + position: relative; + text-align: center; + color: var(--col-accent); + border-radius: 5px; + padding: 5px 1rem; + cursor: pointer; +} +.charsheet .bladerunner [class*=container--character] .section__basic .option_replicant label:hover { + outline: 2px solid var(--col-alt); +} +.charsheet .bladerunner [class*=container--character] .section__basic .option_replicant input { + display: none; +} +.charsheet .bladerunner [class*=container--character] .section__basic .option_replicant label:first-of-type::after { + position: absolute; + content: ""; + inset: 0; + border-radius: 5px; + background: var(--col-deep); + -webkit-transition: all 100ms ease-in-out; + transition: all 100ms ease-in-out; + z-index: -1; +} +.charsheet .bladerunner [class*=container--character] .section__basic .option_replicant input[type=hidden][value=human] ~ label:first-of-type { + color: var(--col-alt); +} +.charsheet .bladerunner [class*=container--character] .section__basic .option_replicant input[type=hidden][value=replicant] ~ label:last-of-type { + color: var(--col-alt); +} +.charsheet .bladerunner [class*=container--character] .section__basic .option_replicant input[type=hidden][value=replicant] ~ label:first-of-type::after { + -webkit-transform: translateY(100%); + transform: translateY(100%); +} +@media (max-width: 760px) { + .charsheet .bladerunner [class*=container--character] .section__basic { + -ms-grid-columns: 1fr auto; + grid-template-columns: 1fr auto; + } +} +.charsheet .bladerunner [class*=container--character] .container__shifts { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-line-pack: center; + align-content: center; + gap: 1rem; + z-index: 5; +} +.charsheet .bladerunner [class*=container--character] .container__shifts::before { + display: inline-block; + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 30px; + width: 30px; + border: 2px solid var(--col-blue); + border-radius: 4px; + content: "hourglass_empty"; + font-family: var(--font-icon); + font-size: 2rem; + color: var(--col-blue); + text-align: center; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + -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)); +} +.charsheet .bladerunner [class*=container--character] .container__shifts button::before { + display: inline-block; + content: "double_arrow"; + font-family: var(--font-icon); + -webkit-transform: translateY(1px); + transform: translateY(1px); +} +.charsheet .bladerunner [class*=container--character] .container__middle { + display: -ms-grid; + display: grid; + grid-auto-flow: column; + -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr; + grid-template-columns: 1fr 1fr 1fr; + -ms-grid-rows: auto 1rem auto 1rem auto 1rem 1fr; + grid-template-rows: auto auto auto 1fr; + gap: 1rem; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(1) { + -ms-grid-row: 1; + -ms-grid-column: 1; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(2) { + -ms-grid-row: 3; + -ms-grid-column: 1; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(3) { + -ms-grid-row: 5; + -ms-grid-column: 1; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(4) { + -ms-grid-row: 7; + -ms-grid-column: 1; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(5) { + -ms-grid-row: 1; + -ms-grid-column: 3; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(6) { + -ms-grid-row: 3; + -ms-grid-column: 3; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(7) { + -ms-grid-row: 5; + -ms-grid-column: 3; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(8) { + -ms-grid-row: 7; + -ms-grid-column: 3; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(9) { + -ms-grid-row: 1; + -ms-grid-column: 5; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(10) { + -ms-grid-row: 3; + -ms-grid-column: 5; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(11) { + -ms-grid-row: 5; + -ms-grid-column: 5; +} +.charsheet .bladerunner [class*=container--character] .container__middle > *:nth-child(12) { + -ms-grid-row: 7; + -ms-grid-column: 5; +} +.charsheet .bladerunner [class*=container--character] .container__middle .repcontrol { + margin-top: 1rem; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__specialties { + -ms-grid-row-span: 3; + grid-row: span 3; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__specialties .repcontainer { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 5px; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__specialties .repcontainer .repitem { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 5px 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; + -ms-grid-row: 1; + grid-row: 1; + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 3rem; + grid-template-columns: 1fr 3rem; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__weapons h2, .charsheet .bladerunner [class*=container--character] .container__middle .section__weapons h3 { + grid-column: 1/-1; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .repcontainer { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 5px; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .inputRow { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +@media (max-width: 860px) { + .charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .inputRow { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .inputRow input { + width: 60px; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .inputRow input:nth-of-type(1) { + -webkit-box-flex: 2; + -ms-flex: 2; + flex: 2; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .inputRow input:nth-of-type(2) { + width: 6rem; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .inputRow button.roller { + font-family: var(--font-icon); + width: 4rem; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .inputRow button.roller::after { + content: "sendsendsend"; + position: relative; + -webkit-clip-path: none; + clip-path: none; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .inputRow button.roller:hover::after { + letter-spacing: -10px; + left: 10px; + -webkit-transition: 50ms ease-out; + transition: 50ms ease-out; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .repcontrol { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin: 0 5px; + gap: 5px; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .repcontrol button { + float: unset; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__armor { + display: -ms-grid; + display: grid; + gap: 5px; + -ms-grid-columns: 1fr 5px 3.5em; + grid-template-columns: 1fr 3.5em; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__armor h2 { + grid-column: 1/-1; +} +.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 textarea { + -ms-grid-column-span: 2; + grid-column: span 2; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__injuries { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 1rem; + -ms-grid-row-span: 3; + grid-row: span 3; +} +.charsheet .bladerunner [class*=container--character] .container__middle .section__injuries > div { + gap: 1rem; +} +@media (max-width: 860px) { + .charsheet .bladerunner [class*=container--character] .container__middle { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + -ms-grid-rows: auto; + grid-template-rows: auto; + grid-auto-flow: dense; + } + .charsheet .bladerunner [class*=container--character] .container__middle > div { + grid-row: auto !important; + } +} +.charsheet .bladerunner [class*=container--character] .section__attributes { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr 1rem 1fr; + grid-template-columns: repeat(4, 1fr); + gap: 1rem; +} +.charsheet .bladerunner [class*=container--character] .section__attributes h2 { + grid-column: 1/-2; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.charsheet .bladerunner [class*=container--character] .section__attributes .driving { + -ms-grid-column: 4; + grid-column: 4; + -ms-grid-row: 1; + grid-row: 1; +} +@media (max-width: 860px) { + .charsheet .bladerunner [class*=container--character] .section__attributes { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + } + .charsheet .bladerunner [class*=container--character] .section__attributes h2 { + grid-column: 1/-1; + } + .charsheet .bladerunner [class*=container--character] .section__attributes .driving { + grid-column: auto; + grid-row: unset; + -webkit-box-ordinal-group: 100; + -ms-flex-order: 99; + order: 99; + } +} +.charsheet .bladerunner [class*=container--character] .content__attribute { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 5px; +} +.charsheet .bladerunner [class*=container--character] .content__attribute:hover { + z-index: 5; +} +.charsheet .bladerunner [class*=container--character] .repeating_weapons + .repcontainer .inputRow input:first-of-type { + -webkit-box-flex: 2; + -ms-flex: 2; + flex: 2; +} +.charsheet .bladerunner [class*=container--character] .container__bottom { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr; + grid-template-columns: 1fr 1fr 1fr; + gap: 1rem; +} +.charsheet .bladerunner [class*=container--character] .container__bottom .section__promotion, .charsheet .bladerunner [class*=container--character] .container__bottom .section__chinyen, .charsheet .bladerunner [class*=container--character] .container__bottom .section__humanity { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.charsheet .bladerunner [class*=container--character] .container__bottom .section__promotion h2, .charsheet .bladerunner [class*=container--character] .container__bottom .section__chinyen h2, .charsheet .bladerunner [class*=container--character] .container__bottom .section__humanity h2 { + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + grid-column: 1/-1; +} +.charsheet .bladerunner [class*=container--character] .container__bottom .section__promotion .fill-left, .charsheet .bladerunner [class*=container--character] .container__bottom .section__chinyen .fill-left, .charsheet .bladerunner [class*=container--character] .container__bottom .section__humanity .fill-left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-grid-columns: (auto)[11]; + grid-template-columns: repeat(11, auto); + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.charsheet .bladerunner [class*=container--character] .container__bottom .section__promotion .fill-left input:not(:checked), .charsheet .bladerunner [class*=container--character] .container__bottom .section__chinyen .fill-left input:not(:checked), .charsheet .bladerunner [class*=container--character] .container__bottom .section__humanity .fill-left input:not(:checked) { + width: 18px; + -webkit-box-flex: 1; + -ms-flex: 1 1 18px; + flex: 1 1 18px; +} +.charsheet .bladerunner [class*=container--character] .container__bottom .section__promotion .fill-left input:checked, .charsheet .bladerunner [class*=container--character] .container__bottom .section__chinyen .fill-left input:checked, .charsheet .bladerunner [class*=container--character] .container__bottom .section__humanity .fill-left input:checked { + -ms-grid-column-span: 2; + grid-column: span 2; + -webkit-box-flex: 2; + -ms-flex: 2 1 18px; + flex: 2 1 18px; +} +.charsheet .bladerunner [class*=container--character] .container__bottom .section__promotion .fill-left input:nth-of-type(n+11), .charsheet .bladerunner [class*=container--character] .container__bottom .section__chinyen .fill-left input:nth-of-type(n+11), .charsheet .bladerunner [class*=container--character] .container__bottom .section__humanity .fill-left input:nth-of-type(n+11) { + -ms-grid-row: 2; + grid-row: 2; +} +@media (max-width: 800px) { + .charsheet .bladerunner [class*=container--character] .container__bottom { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; + } +} + +.charsheet .bladerunner [class*=container--shift-log] { + display: -ms-grid; + display: grid; + gap: 1rem; +} +.charsheet .bladerunner [class*=container--shift-log] .section__basic { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 1rem 1fr; + grid-template-columns: auto 1fr; + gap: 1rem; +} +.charsheet .bladerunner [class*=container--shift-log] .section__basic h1 { + -ms-grid-row-span: 2; + grid-row: span 2; +} +.charsheet .bladerunner [class*=container--shift-log] .section__shifts { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 1rem 1fr; + grid-template-columns: 1fr 1fr; + -ms-grid-rows: auto 1rem auto 1rem auto; + grid-template-rows: auto auto auto; + grid-template-areas: "header header" "calendar details" "controls ."; + grid-auto-flow: column; + gap: 1rem; +} +.charsheet .bladerunner [class*=container--shift-log] .section__shifts > h2 { + grid-column: 1/-1; +} +.charsheet .bladerunner [class*=container--shift-log] .section__shifts .repcontrol, .charsheet .bladerunner [class*=container--shift-log] .section__shifts .repcontrol-button { + -ms-grid-row: 5; + -ms-grid-column: 1; + grid-area: controls; +} +.charsheet .bladerunner [class*=container--shift-log] .section__shifts .repcontrol { + -ms-grid-row-align: center; + -ms-grid-column-align: end; + place-self: center end; +} +.charsheet .bladerunner [class*=container--shift-log] .section__shifts .repcontrol-button { + -ms-grid-row-align: center; + -ms-grid-column-align: start; + place-self: center start; +} +.charsheet .bladerunner [class*=container--shift-log] .shifts_calendar + fieldset + .repcontainer { + display: -ms-grid; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + -ms-flex-line-pack: start; + align-content: flex-start; + padding: 1rem; + border: 1px solid var(--col-schematic); + gap: 1rem; +} +.charsheet .bladerunner [class*=container--shift-log] .shifts_calendar + fieldset + .repcontainer .repitem { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.charsheet .bladerunner [class*=container--shift-log] .shifts_calendar + fieldset + .repcontainer button:not(.repcontrol_del) { + display: -ms-grid; + display: grid; + place-items: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100px; + height: 50px; + padding: 0; + border: 1px solid var(--col-schematic); +} +.charsheet .bladerunner [class*=container--shift-log] .shifts_calendar + fieldset + .repcontainer button:not(.repcontrol_del)::after { + display: block; + position: relative; + -webkit-clip-path: none; + clip-path: none; + font-family: var(--font-icon); + font-size: 3rem; + line-height: 1; + content: "description"; +} +.charsheet .bladerunner [class*=container--shift-log] .shifts_calendar + fieldset + .repcontainer input { + font-size: 10px; + width: 100px; + text-align: center; +} +.charsheet .bladerunner [class*=container--shift-log] .shifts_calendar + fieldset + .repcontainer input:not(:-moz-placeholder-shown) { + border: none; + box-shadow: none; + background: none; + border-bottom: 1px solid var(--col-schematic); + border-bottom: 1px solid var(--col-schematic); +} +.charsheet .bladerunner [class*=container--shift-log] .shifts_calendar + fieldset + .repcontainer input:not(:-ms-input-placeholder) { + border: none; + box-shadow: none; + background: none; + border-bottom: 1px solid var(--col-schematic); + border-bottom: 1px solid var(--col-schematic); +} +.charsheet .bladerunner [class*=container--shift-log] .shifts_calendar + fieldset + .repcontainer input:not(:placeholder-shown) { + border: none; + -webkit-box-shadow: none; + box-shadow: none; + background: none; + border-bottom: 1px solid var(--col-schematic); + border-bottom: 1px solid var(--col-schematic); +} +.charsheet .bladerunner [class*=container--shift-log] .shift_display { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 0.5rem; +} +.charsheet .bladerunner [class*=container--shift-log] .shift_display h3:first-of-type { + text-align: right; + color: var(--col-blue); + border-bottom: 1px solid var(--col-schematic-glow); +} +.charsheet .bladerunner [class*=container--shift-log] .shift_display h3:first-of-type span { + color: var(--col-red); + font-size: 1.5rem; +} +.charsheet .bladerunner [class*=container--shift-log] .shift_display h3:first-of-type span::before { + content: "signal_cellular_alt_1_bar"; + font-family: var(--font-icon); + margin-right: 5px; +} +.charsheet .bladerunner [class*=container--shift-log] .shift-panel { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr auto; + grid-template-columns: 1fr auto; +} +.charsheet .bladerunner [class*=container--shift-log] .shift-panel h3 { + -ms-grid-column-align: start; + justify-self: start; +} + +.charsheet .bladerunner [class*=container--vehicle] { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 1rem; +} +.charsheet .bladerunner [class*=container--vehicle] .section__basic { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 1rem 1fr; + grid-template-columns: auto 1fr; + gap: 1rem; +} +.charsheet .bladerunner [class*=container--vehicle] .section__basic h1 { + -ms-grid-row-span: 2; + grid-row: span 2; +} +.charsheet .bladerunner [class*=container--vehicle] .section__stats { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 5px 1.2fr; + grid-template-columns: 1fr 1.2fr; + -ms-grid-rows: auto 5px auto; + grid-template-rows: auto auto; + grid-auto-flow: column; + gap: 5px; +} +.charsheet .bladerunner [class*=container--vehicle] .section__stats > *:nth-child(1) { + -ms-grid-row: 1; + -ms-grid-column: 1; +} +.charsheet .bladerunner [class*=container--vehicle] .section__stats > *:nth-child(2) { + -ms-grid-row: 3; + -ms-grid-column: 1; +} +.charsheet .bladerunner [class*=container--vehicle] .section__stats > *:nth-child(3) { + -ms-grid-row: 1; + -ms-grid-column: 3; +} +.charsheet .bladerunner [class*=container--vehicle] .section__stats > *:nth-child(4) { + -ms-grid-row: 3; + -ms-grid-column: 3; +} +.charsheet .bladerunner [class*=container--vehicle] .section__stats .content__attribute { + -ms-grid-row-span: 2; + grid-row: span 2; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 1rem; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +@media (max-width: 860px) { + .charsheet .bladerunner [class*=container--vehicle] .section__stats { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; + -ms-grid-rows: auto auto; + grid-template-rows: auto auto; + grid-auto-flow: row; + } + .charsheet .bladerunner [class*=container--vehicle] .section__stats > *:nth-child(1) { + -ms-grid-row: 1; + -ms-grid-column: 1; + } + .charsheet .bladerunner [class*=container--vehicle] .section__stats > *:nth-child(2) { + -ms-grid-row: 2; + -ms-grid-column: 1; + } + .charsheet .bladerunner [class*=container--vehicle] .section__stats .content__attribute { + grid-row: unset; + -ms-grid-column: 1; + grid-column: 1; + } +} + +.sheet-rolltemplate-bladerunner-push, +.sheet-rolltemplate-bladerunner { + --font-main: "Play", sans-serif; + --font-title: "Saira Extra Condensed", sans-serif; + --font-header: "Homenaje"; + --font-icon: "Material Symbols Outlined"; + --font-filled: "material icons"; + --col-deep: #071e29; + --col-tone: rgb(174, 202, 201); + --col-accent: rgb(183, 223, 167); + --col-alt: rgb(235, 191, 95); + --col-alt-glow: rgba(201, 236, 41, 0.7); + --col-red: rgb(253, 128, 55); + --col-red-glow: rgba(248, 14, 14, 0.7); + --col-blue: rgb(88, 202, 255); + --col-blue-glow: rgba(27, 87, 216, .7); + --col-schematic: rgb(112, 148, 146); + --col-schematic-glow: rgba(112, 148, 146, 0.5); + --col-background: rgb(128, 160, 157); + --dark-back-gradient-stops: transparent 1.5rem, rgb(57 72 95 / 15%) 6rem; + --dark-back-gradient: linear-gradient(70deg,var(--dark-back-gradient-stops)); + --veritcal-dark-back-gradient: linear-gradient(160deg,var(--dark-back-gradient-stops)); + margin-left: -30px; + margin-bottom: 10px; + display: -ms-grid; + display: grid; + gap: 5px; + grid-template-areas: ". ." ". ." "successes rolls" "successes push"; + background: linear-gradient(12deg, rgba(44, 39, 61, 0.5), rgba(27, 177, 177, 0.5)); + -webkit-box-shadow: -4px 4px 4px rgba(248, 0, 255, 0.18), 0px 4px 4px rgba(255, 212, 0, 0.18), 4px 4px 4px rgba(0, 194, 255, 0.18); + box-shadow: -4px 4px 4px rgba(248, 0, 255, 0.18), 0px 4px 4px rgba(255, 212, 0, 0.18), 4px 4px 4px rgba(0, 194, 255, 0.18); + border: 2px solid var(--col-schematic); + outline: 1px solid var(--col-schematic); + outline-offset: 1rem; + font-family: var(--font-main); + padding: 1rem; + -webkit-transition: all 400ms ease-in; + transition: all 400ms ease-in; +} +.sheet-rolltemplate-bladerunner-push:not(:first-child), +.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 h1, +.sheet-rolltemplate-bladerunner h1 { + font-family: var(--font-title); + text-align: right; + font-size: 18px; + font-weight: normal; + line-height: 1; + color: var(--col-alt); + mix-blend-mode: exclusion; + grid-column: 1/-1; +} +.sheet-rolltemplate-bladerunner-push h2, +.sheet-rolltemplate-bladerunner h2 { + padding-left: 1rem; + background: var(--col-alt); + width: calc(100% + 1rem); + -webkit-transform: translateX(-1rem); + transform: translateX(-1rem); + font-family: var(--font-header); + text-transform: uppercase; + color: var(--col-schematic); + font-size: 32px; + grid-column: 1/-1; + overflow: hidden; +} +.sheet-rolltemplate-bladerunner-push h3, +.sheet-rolltemplate-bladerunner h3 { + color: inherit; + font-family: inherit; + text-transform: uppercase; +} +.sheet-rolltemplate-bladerunner-push .sheet-damage-buttons, +.sheet-rolltemplate-bladerunner .sheet-damage-buttons { + grid-column: 1/-1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 0.25rem; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.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[href^="~"], .sheet-rolltemplate-bladerunner-push a[href^="!"], +.sheet-rolltemplate-bladerunner a[href^="~"], +.sheet-rolltemplate-bladerunner a[href^="!"] { + 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)); +} +.sheet-rolltemplate-bladerunner-push a[href^="~"].fullfail, .sheet-rolltemplate-bladerunner-push a[href^="!"].fullfail, +.sheet-rolltemplate-bladerunner a[href^="~"].fullfail, +.sheet-rolltemplate-bladerunner a[href^="!"].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 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; + 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)); +} +.sheet-rolltemplate-bladerunner-push .inlinerollresult.inlinerollresult.fullfail, +.sheet-rolltemplate-bladerunner .inlinerollresult.inlinerollresult.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 .inlinerollresult.inlinerollresult[title*="computed value"], .sheet-rolltemplate-bladerunner-push .inlinerollresult.inlinerollresult[original-title*="computed value"], +.sheet-rolltemplate-bladerunner .inlinerollresult.inlinerollresult[title*="computed value"], +.sheet-rolltemplate-bladerunner .inlinerollresult.inlinerollresult[original-title*="computed value"] { + pointer-events: none; +} +.sheet-rolltemplate-bladerunner-push .sheet-successes, +.sheet-rolltemplate-bladerunner .sheet-successes { + -ms-grid-row: 5; + -ms-grid-row-span: 3; + -ms-grid-column: 1; + position: relative; + display: -ms-grid; + display: grid; + grid-area: successes; + height: 60px; + width: 60px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + background: none; + background: linear-gradient(12deg, rgba(44, 39, 61, 0.3), rgba(27, 177, 177, 0.3)); + border: 2px solid var(--col-alt); + border-radius: 50%; + -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 { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background: none; + border: none; + 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, +.sheet-rolltemplate-bladerunner .sheet-successes .fullfail { + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 50%; + border: none; +} +.sheet-rolltemplate-bladerunner-push .sheet-rolls, +.sheet-rolltemplate-bladerunner .sheet-rolls { + -ms-grid-row: 5; + -ms-grid-column: 3; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: end; + gap: 1rem; + grid-area: rolls; +} +.sheet-rolltemplate-bladerunner-push .sheet-rolls::before, +.sheet-rolltemplate-bladerunner .sheet-rolls::before { + background: var(--dark-back-gradient); + position: absolute; + content: ""; + top: 0; + bottom: 0; + right: 0; + left: -4rem; +} +.sheet-rolltemplate-bladerunner-push .sheet-rolls .inlinerollresult, +.sheet-rolltemplate-bladerunner .sheet-rolls .inlinerollresult { + 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 { + 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; + border: 0px; +} +.sheet-rolltemplate-bladerunner-push .sheet-rolls h3.fullfail, +.sheet-rolltemplate-bladerunner .sheet-rolls h3.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-push, +.sheet-rolltemplate-bladerunner .sheet-push { + -ms-grid-row: 7; + -ms-grid-column: 3; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + position: relative; + grid-area: push; + border: 1px solid var(--col-blue); + border-width: 0 0 2px; + padding: 4px; + color: var(--col-blue); + font-size: 18px; +} +.sheet-rolltemplate-bladerunner-push .sheet-push a, +.sheet-rolltemplate-bladerunner .sheet-push a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 0.25rem; + width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.sheet-rolltemplate-bladerunner-push .sheet-push a::after, +.sheet-rolltemplate-bladerunner .sheet-push a::after { + font-family: var(--font-icon); + content: "arrow_circle_right"; + color: var(--col-blue); + font-size: 20px; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table, +.sheet-rolltemplate-bladerunner .sheet-choice-table { + display: -ms-grid; + display: grid; + place-content: center; + place-items: center; + -ms-grid-columns: auto 0.25rem auto 0.25rem auto; + grid-template-columns: repeat(3, auto); + -ms-grid-rows: auto 0.25rem auto 0.25rem auto; + grid-template-rows: repeat(3, auto); + grid-column: 1/-1; + gap: 0.25rem; + color: white; + position: relative; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table > *:nth-child(1), .sheet-rolltemplate-bladerunner .sheet-choice-table > *:nth-child(1) { + -ms-grid-row: 1; + -ms-grid-column: 1; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table > *:nth-child(2), .sheet-rolltemplate-bladerunner .sheet-choice-table > *:nth-child(2) { + -ms-grid-row: 1; + -ms-grid-column: 3; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table > *:nth-child(3), .sheet-rolltemplate-bladerunner .sheet-choice-table > *:nth-child(3) { + -ms-grid-row: 1; + -ms-grid-column: 5; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table > *:nth-child(4), .sheet-rolltemplate-bladerunner .sheet-choice-table > *:nth-child(4) { + -ms-grid-row: 3; + -ms-grid-column: 1; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table > *:nth-child(5), .sheet-rolltemplate-bladerunner .sheet-choice-table > *:nth-child(5) { + -ms-grid-row: 3; + -ms-grid-column: 3; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table > *:nth-child(6), .sheet-rolltemplate-bladerunner .sheet-choice-table > *:nth-child(6) { + -ms-grid-row: 3; + -ms-grid-column: 5; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table > *:nth-child(7), .sheet-rolltemplate-bladerunner .sheet-choice-table > *:nth-child(7) { + -ms-grid-row: 5; + -ms-grid-column: 1; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table > *:nth-child(8), .sheet-rolltemplate-bladerunner .sheet-choice-table > *:nth-child(8) { + -ms-grid-row: 5; + -ms-grid-column: 3; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table > *:nth-child(9), .sheet-rolltemplate-bladerunner .sheet-choice-table > *:nth-child(9) { + -ms-grid-row: 5; + -ms-grid-column: 5; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-head-back, +.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-side-back, +.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-head-back, +.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-side-back { + position: absolute; + width: 100%; + height: 100%; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-head-back, +.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-head-back { + grid-column: 2/-1; + -ms-grid-row: 1; + -ms-grid-row-span: 1; + grid-row: 1/2; + background-image: var(--dark-back-gradient); +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-side-back, +.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-side-back { + grid-row: 2/-1; + -ms-grid-column: 1; + -ms-grid-column-span: 1; + grid-column: 1/2; + background-image: var(--veritcal-dark-back-gradient); +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3, +.sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 { + -ms-grid-columns: (auto)[4]; + grid-template-columns: repeat(4, auto); + -ms-grid-rows: (auto)[4]; + grid-template-rows: repeat(4, auto); +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(1), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(1) { + -ms-grid-row: 1; + -ms-grid-column: 1; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(2), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(2) { + -ms-grid-row: 1; + -ms-grid-column: 2; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(3), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(3) { + -ms-grid-row: 1; + -ms-grid-column: 3; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(4), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(4) { + -ms-grid-row: 1; + -ms-grid-column: 4; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(5), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(5) { + -ms-grid-row: 2; + -ms-grid-column: 1; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(6), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(6) { + -ms-grid-row: 2; + -ms-grid-column: 2; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(7), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(7) { + -ms-grid-row: 2; + -ms-grid-column: 3; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(8), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(8) { + -ms-grid-row: 2; + -ms-grid-column: 4; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(9), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(9) { + -ms-grid-row: 3; + -ms-grid-column: 1; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(10), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(10) { + -ms-grid-row: 3; + -ms-grid-column: 2; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(11), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(11) { + -ms-grid-row: 3; + -ms-grid-column: 3; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(12), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(12) { + -ms-grid-row: 3; + -ms-grid-column: 4; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(13), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(13) { + -ms-grid-row: 4; + -ms-grid-column: 1; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(14), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(14) { + -ms-grid-row: 4; + -ms-grid-column: 2; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(15), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(15) { + -ms-grid-row: 4; + -ms-grid-column: 3; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table.sheet-grid-3 > *:nth-child(16), .sheet-rolltemplate-bladerunner .sheet-choice-table.sheet-grid-3 > *:nth-child(16) { + -ms-grid-row: 4; + -ms-grid-column: 4; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-toRoll, +.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-toRoll { + -ms-grid-row-align: stretch; + -ms-grid-column-align: stretch; + place-self: stretch; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-toRoll > a, +.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-toRoll > a { + width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; + text-align: center; + height: 100%; + display: -ms-grid; + display: grid; + place-items: center; + font-size: 12px; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-corner-label, +.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-corner-label { + -ms-grid-column: 1; + grid-column: 1; + -ms-grid-row: 1; + grid-row: 1; +} +.sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-corner-label > a, +.sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-corner-label > a { + font-size: 12px; +} +.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; +} +.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-span-all, +.sheet-rolltemplate-bladerunner .sheet-span-all { + grid-column: 1/-1; +} +.sheet-rolltemplate-bladerunner-push .sheet-description, +.sheet-rolltemplate-bladerunner .sheet-description { + color: white; + font-family: inherit; + text-align: center; +} + +.sheet-darkmode .ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet]:before, +.sheet-darkmode .ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet]:is(:focus, :hover):before { + -webkit-filter: invert(0%); + filter: invert(0%); +} +.sheet-darkmode .sheetform { + background-color: unset; +} +.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%); + -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-repeat: no-repeat; +} + +.ui-dialog { + --font-main: "Play", sans-serif; + --font-title: "Saira Extra Condensed", sans-serif; + --font-header: "Homenaje"; + --font-icon: "Material Symbols Outlined"; + --font-filled: "material icons"; + --col-deep: #071e29; + --col-tone: rgb(174, 202, 201); + --col-accent: rgb(183, 223, 167); + --col-alt: rgb(235, 191, 95); + --col-alt-glow: rgba(201, 236, 41, 0.7); + --col-red: rgb(253, 128, 55); + --col-red-glow: rgba(248, 14, 14, 0.7); + --col-blue: rgb(88, 202, 255); + --col-blue-glow: rgba(27, 87, 216, .7); + --col-schematic: rgb(112, 148, 146); + --col-schematic-glow: rgba(90, 141, 138, 0.5); + --col-background: rgb(128, 160, 157); + --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( + 45deg, + var(--col-option1, var(--col-schematic-glow)), + var(--col-option1, var(--col-schematic-glow)) 10px, + var(--col-option2, transparent) 10px, + var(--col-option2, transparent) 20px + ); +} +.ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet], +.ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet]:is(:focus, :hover) { + color: transparent; + position: relative; + width: 120px; + text-decoration: none; +} +.ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet] > *, +.ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet]:is(:focus, :hover) > * { + grid-area: content; +} +.ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet]:before, +.ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet]:is(:focus, :hover):before { + position: absolute; + inset: 0; + content: ""; + background-image: var(--img-bladerunner); + background-size: 120px; + background-repeat: no-repeat; + background-position: center; + -webkit-filter: invert(100%); + filter: invert(100%); +} +.ui-dialog .charsheet { + padding: 0; +} +.ui-dialog .charsheet .fit-grid { + width: 100%; + -ms-grid-row-align: stretch; + -ms-grid-column-align: stretch; + place-self: stretch; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +.ui-dialog .charsheet .center-text { + text-align: center; +} +.ui-dialog .charsheet .uppercase { + text-transform: uppercase; +} + +.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-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; + box-shadow: inset 0 0 12px white, inset 0 0 6px white, inset 0 0 2px white; + padding: 2rem; + outline: 2px solid var(--col-schematic); + outline-offset: -1rem; + position: relative; + font-family: var(--font-main); + z-index: 1; + /* Chrome, Safari, Edge, Opera */ + /* Firefox */ +} +.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; + animation-fill-mode: forwards; +} +.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; + animation-fill-mode: forward; +} +@-webkit-keyframes spawn-left { + 0% { + -webkit-transform: translateX(-200%); + transform: translateX(-200%); + } + 99% { + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@keyframes spawn-left { + 0% { + -webkit-transform: translateX(-200%); + transform: translateX(-200%); + } + 99% { + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@-webkit-keyframes spawn-right { + 0% { + -webkit-transform: translateX(200%); + transform: translateX(200%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes spawn-right { + 0% { + -webkit-transform: translateX(200%); + transform: translateX(200%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +.charsheet .bladerunner nav { + position: relative; + z-index: 99; +} +.charsheet .bladerunner nav button, .charsheet .bladerunner .container__shifts button { + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); +} +.charsheet .bladerunner .inputRow { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + gap: 5px; + margin: 0; +} +.charsheet .bladerunner .inputRow h2 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.charsheet .bladerunner .inputRow input[type=text] { + width: 100px; + -webkit-box-flex: 1; + -ms-flex: 1 1 200px; + flex: 1 1 200px; + min-width: 100px; +} +.charsheet .bladerunner textarea { + width: calc(100% - 1rem); + margin: auto; + resize: none; + height: auto; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.charsheet .bladerunner textarea::-webkit-scrollbar { + width: 5px; +} +.charsheet .bladerunner textarea::-webkit-scrollbar-track { + background-color: var(--col-deep); +} +.charsheet .bladerunner textarea::-webkit-scrollbar-thumb { + background-color: var(--col-tone); +} +.charsheet .bladerunner textarea:hover::-webkit-scrollbar-thumb { + background-color: var(--col-alt); + -webkit-box-shadow: 0 0 5px var(--col-deep); + box-shadow: 0 0 5px var(--col-deep); +} +.charsheet .bladerunner ::-moz-selection { + background: var(--col-alt-glow); + color: var(--col-deep); +} +.charsheet .bladerunner ::selection { + background: var(--col-alt-glow); + color: var(--col-deep); +} +.charsheet .bladerunner label { + margin: 0; + padding: 0; + width: auto; +} +.charsheet .bladerunner :where(input):focus { + outline: none; +} +.charsheet .bladerunner input::-webkit-outer-spin-button, +.charsheet .bladerunner input::-webkit-inner-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; +} +.charsheet .bladerunner input[type=number] { + -moz-appearance: textfield; + -webkit-appearance: textfield; + appearance: textfield; + text-align: center; +} +.charsheet .bladerunner textarea, .charsheet .bladerunner input[type=text], .charsheet .bladerunner input[type=number], .charsheet .bladerunner select { + background: rgba(171, 186, 187, 0.2); + border-color: var(--col-schematic); + -webkit-box-shadow: 0 0 2px var(--col-schematic), 0 0 4px var(--col-schematic); + box-shadow: 0 0 2px var(--col-schematic), 0 0 4px var(--col-schematic); + border-radius: 0; + color: var(--col-tone); + outline: none; +} +.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); +} +.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); +} +.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); +} +.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); +} +.charsheet .bladerunner textarea:placeholder-shown::-moz-placeholder, .charsheet .bladerunner input[type=text]:placeholder-shown::-moz-placeholder, .charsheet .bladerunner input[type=number]:placeholder-shown::-moz-placeholder, .charsheet .bladerunner select:placeholder-shown::-moz-placeholder { + color: var(--col-red); +} +.charsheet .bladerunner textarea:placeholder-shown:-ms-input-placeholder, .charsheet .bladerunner input[type=text]:placeholder-shown:-ms-input-placeholder, .charsheet .bladerunner input[type=number]:placeholder-shown:-ms-input-placeholder, .charsheet .bladerunner select:placeholder-shown:-ms-input-placeholder { + color: var(--col-red); +} +.charsheet .bladerunner textarea:placeholder-shown::-ms-input-placeholder, .charsheet .bladerunner input[type=text]:placeholder-shown::-ms-input-placeholder, .charsheet .bladerunner input[type=number]:placeholder-shown::-ms-input-placeholder, .charsheet .bladerunner select:placeholder-shown::-ms-input-placeholder { + color: var(--col-red); +} +.charsheet .bladerunner textarea:-moz-placeholder-shown::placeholder, .charsheet .bladerunner input[type=text]:-moz-placeholder-shown::placeholder, .charsheet .bladerunner input[type=number]:-moz-placeholder-shown::placeholder, .charsheet .bladerunner select:-moz-placeholder-shown::placeholder { + color: var(--col-red); +} +.charsheet .bladerunner textarea:-ms-input-placeholder::placeholder, .charsheet .bladerunner input[type=text]:-ms-input-placeholder::placeholder, .charsheet .bladerunner input[type=number]:-ms-input-placeholder::placeholder, .charsheet .bladerunner select:-ms-input-placeholder::placeholder { + color: var(--col-red); +} +.charsheet .bladerunner textarea:placeholder-shown::placeholder, .charsheet .bladerunner input[type=text]:placeholder-shown::placeholder, .charsheet .bladerunner input[type=number]:placeholder-shown::placeholder, .charsheet .bladerunner select:placeholder-shown::placeholder { + 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-keyframes pulse { + 0% { + background: rgba(171, 186, 187, 0.2); + } + 50% { + background: rgba(171, 186, 187, 0.4); + } + 100% { + background: rgba(171, 186, 187, 0.2); + } +} +@keyframes pulse { + 0% { + background: rgba(171, 186, 187, 0.2); + } + 50% { + background: rgba(171, 186, 187, 0.4); + } + 100% { + background: rgba(171, 186, 187, 0.2); + } +} +.charsheet .bladerunner select { + height: auto; + width: 90px; + margin: 0; +} +.charsheet .bladerunner select option { + background: var(--col-background); + color: var(--col-deep); +} +.charsheet .bladerunner select option:hover { + background: var(--col-alt); +} +.charsheet .bladerunner .title_input.title_input.title_input:not(:-moz-placeholder-shown) { + border: none; + background: none; + box-shadow: none; + color: var(--col-alt); + font-weight: bold; + font-size: 16px; +} +.charsheet .bladerunner .title_input.title_input.title_input:not(:-ms-input-placeholder) { + border: none; + background: none; + box-shadow: none; + color: var(--col-alt); + font-weight: bold; + font-size: 16px; +} +.charsheet .bladerunner .title_input.title_input.title_input:not(:placeholder-shown) { + border: none; + background: none; + -webkit-box-shadow: none; + box-shadow: none; + color: var(--col-alt); + font-weight: bold; + font-size: 16px; +} +.charsheet .bladerunner h1 { + color: var(--col-accent); +} +.charsheet .bladerunner h2 { + background: var(--col-deep); + padding: 0 1rem; + font-family: var(--font-title); + font-size: 1.5rem; + font-weight: normal; + color: var(--col-tone); + text-transform: uppercase; + margin: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.charsheet .bladerunner h3 { + font-family: var(--font-main); + font-size: 1.25rem; + font-weight: normal; + line-height: 1; + color: var(--col-accent); + text-transform: uppercase; + text-align: left; + padding: 0 5px; + margin: 5px; +} +.charsheet .bladerunner :where([class*=section]) { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -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-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); + border: 2px solid var(--col-schematic); + outline: 1px solid var(--col-schematic); + 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; + -webkit-transition: all 200ms ease-out; + transition: all 200ms ease-out; +} +.charsheet .bladerunner :where([class*=section])::before { + position: absolute; + inset: 0; + content: ""; + -webkit-box-shadow: -10px 20px 20px rgba(10, 65, 117, 0.1); + box-shadow: -10px 20px 20px rgba(10, 65, 117, 0.1); + z-index: -1; +} +.charsheet .bladerunner button { + cursor: pointer; + -webkit-transition: all 200ms ease-in-out; + transition: all 200ms ease-in-out; +} +.charsheet .bladerunner button:hover { + background: none; + -webkit-transition: all 200ms ease-in-out; + transition: all 200ms ease-in-out; + border-color: var(--col-red); + color: var(--col-red); + -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)); +} +.charsheet .bladerunner button, .charsheet .bladerunner button[type=roll], .charsheet .bladerunner button[type=action], .charsheet .bladerunner .button { + position: relative; + background: none; + border: 1px solid var(--col-alt); + outline: none; + padding: 0.5rem 1rem; + margin: 0; + -webkit-filter: drop-shadow(0 0 2px var(--col-alt-glow)); + filter: drop-shadow(0 0 2px var(--col-alt-glow)); + font-family: var(--font-main); + font-size: 1rem; + font-weight: normal; + color: var(--col-alt); + text-transform: uppercase; +} +.charsheet .bladerunner button::after, .charsheet .bladerunner button[type=roll]::after, .charsheet .bladerunner button[type=action]::after, .charsheet .bladerunner .button::after { + content: ""; + position: absolute; + background: rgba(44, 107, 99, 0.1); + 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; +} +.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; + transition: background 50ms; +} +.charsheet .bladerunner button.subtle-button { + border: none; + padding: 2px; + color: var(--col-schematic); + -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; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: -ms-grid; + display: grid; + place-content: center; + height: 3rem; + width: 3rem; + margin: 4px; + border: 2px solid var(--col-alt); + border-radius: 100% !important; + aspect-ratio: 1; + font-size: 2rem; + text-align: center; + text-transform: uppercase; + vertical-align: bottom; + line-height: normal; + color: var(--col-alt); + -webkit-filter: drop-shadow(0 0 2px var(--col-alt-glow)); + filter: drop-shadow(0 0 2px var(--col-alt-glow)); +} +.charsheet .bladerunner input.grade::after, .charsheet .bladerunner .gradeMenu input::after { + content: attr(value); + position: absolute; + inset: 0; +} +.charsheet .bladerunner input.grade { + line-height: 2; +} +.charsheet .bladerunner .attribute_wrapper { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.charsheet .bladerunner .attribute_wrapper > div { + border: 0px; +} +.charsheet .bladerunner .attribute_wrapper button, .charsheet .bladerunner .attribute_wrapper .button { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + height: 36px; +} +.charsheet .bladerunner .attribute__value { + position: absolute; + right: 40px; +} +.charsheet .bladerunner .attribute__value input[type=hidden][value=B] ~ .gradeMenu { + left: calc(-100% - 1px); +} +.charsheet .bladerunner .attribute__value input[type=hidden][value=C] ~ .gradeMenu { + left: calc(-200% - 1px); +} +.charsheet .bladerunner .attribute__value input[type=hidden][value=D] ~ .gradeMenu { + left: calc(-300% - 1px); +} +.charsheet .bladerunner .attribute__value .gradeMenu { + position: absolute; + left: 0px; + top: 0px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + opacity: 0; + pointer-events: none; + border: 1px solid var(--col-blue); + background: var(--col-deep); + border-radius: 50px; + -webkit-transform: scaleY(0) scaleX(1.2); + transform: scaleY(0) scaleX(1.2); + -webkit-filter: blur(12px) brightness(2) hue-rotate(-30deg); + filter: blur(12px) brightness(2) hue-rotate(-30deg); + -webkit-transition: all 200ms ease-out, opacity 0ms ease-in-out; + transition: all 200ms ease-out, opacity 0ms ease-in-out; + z-index: 99; +} +.charsheet .bladerunner .attribute__value .gradeMenu input { + position: relative; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: -ms-grid; + display: grid; + place-content: center; + border-color: var(--col-blue); + color: var(--col-blue); + -webkit-filter: drop-shadow(0 0 2px var(--col-blue-glow)); + filter: drop-shadow(0 0 2px var(--col-blue-glow)); +} +.charsheet .bladerunner .attribute__value .gradeMenu input::after { + content: attr(value); + position: absolute; + inset: 0; +} +.charsheet .bladerunner .attribute__value .gradeMenu input:hover { + color: var(--col-red); + border-color: var(--col-red); + -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)); +} +.charsheet .bladerunner .attribute__value .gradeMenu input:active { + background: var(--col-red-glow); +} +.charsheet .bladerunner .attribute__value:hover .gradeMenu { + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-filter: blur(0px) drop-shadow(0 0 4px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow)); + filter: blur(0px) drop-shadow(0 0 4px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow)); + opacity: 0.8; + pointer-events: auto; + -webkit-transition: all 200ms ease-out, opacity 0ms ease-in-out, -webkit-filter 400ms ease; + transition: all 200ms ease-out, opacity 0ms ease-in-out, -webkit-filter 400ms ease; + transition: all 200ms ease-out, opacity 0ms ease-in-out, filter 400ms ease; + transition: all 200ms ease-out, opacity 0ms ease-in-out, filter 400ms ease, -webkit-filter 400ms ease; + -webkit-transition-delay: 0ms; + transition-delay: 0ms; +} +.charsheet .bladerunner .repcontrol-button { + -ms-flex-item-align: start; + -ms-grid-row-align: start; + align-self: start; +} +.charsheet .bladerunner .repcontrol-button ~ .repcontrol { + -ms-grid-column-align: end; + justify-self: end; + z-index: 100; +} +.charsheet .bladerunner .repcontrol-button ~ .repcontrol > .repcontrol_add { + display: none !important; +} +.charsheet .bladerunner .repcontrol_move { + display: none; +} +.charsheet .bladerunner .repcontrol-button--add { + -ms-grid-column-align: start; + justify-self: start; + width: 15px; + height: 15px; + padding: 4px; + font-size: 0; + color: var(--col-alt); + border: 1px solid var(--col-alt); +} +.charsheet .bladerunner .repcontrol-button--add::before { + inset: 0; + -ms-grid-row-align: center; + -ms-grid-column-align: center; + place-self: center; + font-family: var(--font-icon); + font-size: 12px; + content: "add"; +} +.charsheet .bladerunner .repcontrol { + margin: 1rem 0; +} +.charsheet .bladerunner .repcontrol button, .charsheet .bladerunner .itemcontrol button { + width: 15px; + height: 15px; + padding: 4px; + font-size: 0; + color: var(--col-alt); + border: 1px solid var(--col-alt); +} +.charsheet .bladerunner .repcontrol button::before, .charsheet .bladerunner .itemcontrol button::before { + inset: 0; + -ms-grid-row-align: center; + -ms-grid-column-align: center; + place-self: center; +} +.charsheet .bladerunner .repcontrol button.repcontrol_add::before, .charsheet .bladerunner .itemcontrol button.repcontrol_add::before { + font-family: var(--font-icon); + font-size: 12px; + content: "add"; +} +.charsheet .bladerunner .repcontrol button.repcontrol_edit::before, .charsheet .bladerunner .itemcontrol button.repcontrol_edit::before { + font-family: var(--font-icon); + font-size: 12px; + content: "edit"; +} +.charsheet .bladerunner .repcontrol button #text, .charsheet .bladerunner .itemcontrol button #text { + display: none; +} +.charsheet .bladerunner .repitem { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.charsheet .bladerunner .itemcontrol { + border: 1px solid var(--col-blue); +} +.charsheet .bladerunner .repcontainer .repitem .itemcontrol { + background: radial-gradient(transparent, var(--col-blue-glow)); + z-index: 99; +} +.charsheet .bladerunner .repcontainer .repitem .itemcontrol a.repcontrol_move { + position: relative; + float: left; + width: 25px; + aspect-ratio: 1; + padding: 0; + font-size: 0; + color: var(--col-red); + border: 2px solid var(--col-red); + text-shadow: none; + background: var(--col-red-glow); +} +.charsheet .bladerunner .repcontainer .repitem .itemcontrol a.repcontrol_move::before { + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + -ms-grid-row-align: center; + -ms-grid-column-align: center; + place-self: center; + font-family: var(--font-icon); + font-size: 18px; + content: "open_with"; +} +.charsheet .bladerunner .repcontainer .repitem .itemcontrol .repcontrol_del { + -ms-grid-columns: auto auto; + grid-template-columns: auto auto; + border: 2px solid var(--col-red); + background: var(--col-red-glow); +} +.charsheet .bladerunner .repcontainer .repitem .itemcontrol .repcontrol_del::before { + font-family: var(--font-icon); + font-size: 18px; + color: var(--col-red); + content: "remove"; +} +.charsheet .bladerunner .repcontainer .repitem .itemcontrol > * { + cursor: pointer; +} +.charsheet .bladerunner .repcontainer .repitem .itemcontrol > *:hover { + color: var(--col-red) !important; + border-color: var(--col-red) !important; + -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)); +} +.charsheet .bladerunner .repcontainer .repitem .itemcontrol > *:active { + outline: none !important; +} +.charsheet .bladerunner .tabs { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 1rem 1fr; + grid-template-columns: auto 1fr; + grid-gap: 1rem; + -ms-grid-rows: auto 1rem auto; + grid-template-areas: "menu logo" "advantage logo"; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; +} +.charsheet .bladerunner .tabs .skill_toggle { + -ms-grid-row: 3; + -ms-grid-column: 1; + position: sticky; + top: 4rem; + grid-area: advantage; + z-index: 99; + -webkit-backdrop-filter: blur(4px); + backdrop-filter: blur(4px); +} +.charsheet .bladerunner .tabs > img { + -ms-grid-row: 1; + -ms-grid-row-span: 3; + -ms-grid-column: 3; + grid-area: logo; + justify-self: flex-end; +} +.charsheet .bladerunner .tabs .tabs--tabs__header { + -ms-grid-row: 1; + -ms-grid-column: 1; + grid-area: menu; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: sticky; + top: 1rem; +} +.charsheet .bladerunner .tabs .tabs--tabs__header button { + padding: 0 2rem 0 1rem; +} +.charsheet .bladerunner .tabs .tabs--tabs__header button::before { + display: inline-block; + font-family: var(--font-icon); + font-size: 12px; + content: "apps"; + -webkit-transform: translateY(2px); + transform: translateY(2px); +} +@media (max-width: 600px) { + .charsheet .bladerunner .tabs .tabs--tabs__header button::before { + display: none; + } +} +.charsheet .bladerunner .tabs .tabs__body { + grid-column: 1/-1; +} +@media (max-width: 740px) { + .charsheet .bladerunner .tabs { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; + -ms-grid-rows: auto 1rem auto 1rem auto; + grid-template-areas: "logo" "menu" "advantage"; + } + .charsheet .bladerunner .tabs .skill_toggle { + top: 4rem; + } + .charsheet .bladerunner .tabs .skill_toggle::before { + 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); + } + .charsheet .bladerunner .tabs .skill_toggle { + -ms-grid-row: 5; + -ms-grid-column: 1; + } + .charsheet .bladerunner .tabs > img { + -ms-grid-row: 1; + -ms-grid-row-span: 1; + -ms-grid-column: 1; + } + .charsheet .bladerunner .tabs .tabs--tabs__header { + -ms-grid-row: 3; + -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; + -webkit-backdrop-filter: blur(4px); + backdrop-filter: blur(4px); +} +.charsheet .bladerunner .attribute_wrapper .attribute span::first-letter { + font-size: 0.75em; +} +.charsheet .bladerunner .logo-lapd { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + text-transform: uppercase; + color: var(--col-schematic); + font-size: 20px; +} +.charsheet .bladerunner .logo-lapd::before { + display: inline-block; + content: ""; + height: 50px; + width: 160px; + margin: 5px; + margin-bottom: 10px; + background-image: url("https://i.imgur.com/yNsdOUr.png"); + background-repeat: no-repeat; + background-size: contain; +} +@media (max-width: 760px) { + .charsheet .bladerunner .logo-lapd { + display: none; + } +} +.charsheet .bladerunner .fill-left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 2px; + min-width: 212px; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.charsheet .bladerunner .fill-left input[type=radio] { + position: relative; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: -webkit-gradient(linear, right bottom, left top, from(var(--col-alt)), to(var(--col-alt-glow))); + background: linear-gradient(to top left, var(--col-alt), var(--col-alt-glow)); + border: 1px solid var(--col-schematic-glow); + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: 0 0 2px var(--col-alt-glow); + box-shadow: 0 0 2px var(--col-alt-glow); + min-width: 15px; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + height: 28px; +} +.charsheet .bladerunner .fill-left input[type=radio]:checked { + background: var(--col-deep); + border: 2px solid var(--col-alt); + -webkit-box-sizing: border-box; + box-sizing: border-box; + min-width: 25px; + -webkit-box-flex: 2; + -ms-flex: 2; + flex: 2; +} +.charsheet .bladerunner .fill-left input[type=radio]:checked::before { + position: absolute; + display: -ms-grid; + display: grid; + place-items: center; + content: attr(value); + font-size: 16px; + color: var(--col-alt); + inset: 0; +} +.charsheet .bladerunner .fill-left input[type=radio]:checked ~ input[type=radio] { + background: none; + border-color: var(--col-schematic); + -webkit-box-shadow: none; + box-shadow: none; +} +.charsheet .bladerunner .fill-left input[type=radio]:checked ~ input[type=radio]:hover::before { + color: var(--col-alt); +} +.charsheet .bladerunner .fill-left input[type=radio]:hover:not(:checked) { + border-color: var(--col-accent) !important; + border-width: 2px; + color: var(--col-deep); +} +.charsheet .bladerunner .fill-left input[type=radio]:hover:not(:checked)::before { + position: absolute; + display: -ms-grid; + display: grid; + place-items: center; + content: attr(value); + font-size: 10px; + font-weight: bold; + color: var(--col-deep); + inset: 0; +} +.charsheet .bladerunner .fill-left input[type=radio]:active, .charsheet .bladerunner .fill-left input[type=radio]:focus { + outline: none; +} +.charsheet .bladerunner .fill-left input[type=radio].fill-left__radio--clearer:first-of-type { + background: none; + border: 1px solid var(--col-red-glow); +} +.charsheet .bladerunner .fill-left input[type=radio].fill-left__radio--clearer:first-of-type::before { + position: absolute; + display: -ms-grid; + display: grid; + place-items: center; + content: attr(value); + font-size: 16px; + color: var(--col-red-glow); + inset: 0; +} +.charsheet .bladerunner .fill-left input[type=radio].fill-left__radio--clearer:first-of-type:checked { + background: var(--col-red-glow); +} +.charsheet .bladerunner .fill-left input[type=radio].fill-left__radio--clearer:first-of-type:checked::before { + color: var(--col-tone); +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="0"] + .fill-left input:nth-child(2), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="0"] + .fill-left input:nth-child(2) ~ input { + display: none; +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="1"] + .fill-left input:nth-child(3), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="1"] + .fill-left input:nth-child(3) ~ input { + display: none; +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="2"] + .fill-left input:nth-child(4), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="2"] + .fill-left input:nth-child(4) ~ input { + display: none; +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="3"] + .fill-left input:nth-child(5), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="3"] + .fill-left input:nth-child(5) ~ input { + display: none; +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="4"] + .fill-left input:nth-child(6), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="4"] + .fill-left input:nth-child(6) ~ input { + display: none; +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="5"] + .fill-left input:nth-child(7), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="5"] + .fill-left input:nth-child(7) ~ input { + display: none; +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="6"] + .fill-left input:nth-child(8), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="6"] + .fill-left input:nth-child(8) ~ input { + display: none; +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="7"] + .fill-left input:nth-child(9), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="7"] + .fill-left input:nth-child(9) ~ input { + display: none; +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="8"] + .fill-left input:nth-child(10), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="8"] + .fill-left input:nth-child(10) ~ input { + display: none; +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="9"] + .fill-left input:nth-child(11), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="9"] + .fill-left input:nth-child(11) ~ input { + display: none; +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="10"] + .fill-left input:nth-child(12), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="10"] + .fill-left input:nth-child(12) ~ input { + display: none; +} +.charsheet .bladerunner input.dynamic_fill[type=hidden][value="11"] + .fill-left input:nth-child(13), .charsheet .bladerunner input.dynamic_fill[type=hidden][value="11"] + .fill-left input:nth-child(13) ~ input { + display: none; +} +.charsheet .bladerunner .skill_toggle { + --spacer_left: 4rem; + --width: calc(25% - 12px); + --gap: 2px; + position: relative; + display: -ms-grid; + display: grid; + padding-left: var(--spacer_left); + -ms-grid-columns: 1fr var(--gap) 1fr var(--gap) 1fr var(--gap) 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: var(--gap); + justify-items: center; +} +.charsheet .bladerunner .skill_toggle::before { + content: "casino"; + font-family: var(--font-icon); + font-size: 28px; + line-height: 1; + padding-left: 2rem; + color: var(--col-blue); + text-shadow: 0 0 2px var(--col-blue-glow), 0 0 8px var(--col-blue-glow); + position: absolute; + inset: -2rem; + top: -5px; + bottom: -5px; + 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) { + .charsheet .bladerunner .skill_toggle::after { + position: absolute; + display: block; + content: ""; + width: var(--width); + height: 100%; + top: 0; + left: 0; + background: -webkit-gradient(linear, right bottom, left top, from(var(--col-blue-glow)), to(transparent)); + background: linear-gradient(to top left, var(--col-blue-glow), transparent); + border: 1px solid var(--col-blue-glow); + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 0px; + -webkit-transition: left 200ms ease-in-out; + transition: left 200ms ease-in-out; + mix-blend-mode: lighten; + } +} +.charsheet .bladerunner .skill_toggle:has(input[type=hidden][value=advantage])::after { + left: var(--spacer_left); +} +.charsheet .bladerunner .skill_toggle:has(input[type=hidden][value=normal])::after { + left: calc(var(--width) + var(--gap) + var(--spacer_left)); +} +.charsheet .bladerunner .skill_toggle:has(input[type=hidden][value=disadvantage])::after { + left: calc((var(--width) + var(--gap)) * 2 + var(--spacer_left)); +} +.charsheet .bladerunner .skill_toggle:has(input[type=hidden][value=helping])::after { + left: calc((var(--width) + var(--gap)) * 3 + var(--spacer_left)); +} +.charsheet .bladerunner .skill_toggle input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: none; +} +.charsheet .bladerunner .skill_toggle label { + -webkit-box-sizing: border-box; + box-sizing: border-box; + cursor: pointer; + width: 100%; + background: rgba(177, 125, 58, 0.1); + padding: 0 5px; + font-family: var(--font-main); + font-size: 10px; + text-align: center; + color: var(--col-schematic); + border: 2px solid var(--col-schematic); + border-width: 2px 2px 0 2px; + -o-border-image: linear-gradient(to bottom, var(--col-alt) 20%, transparent 20%) 1; + border-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--col-alt)), color-stop(20%, transparent)) 1; + border-image: linear-gradient(to bottom, var(--col-alt) 20%, transparent 20%) 1; + border-image-outset: 4px; + -webkit-transition: background 200ms ease-in-out; + transition: background 200ms ease-in-out; +} +.charsheet .bladerunner .skill_toggle label:hover { + color: var(--col-alt); + -webkit-filter: drop-shadow(0 0 2px var(--col-alt-glow)); + filter: drop-shadow(0 0 2px var(--col-alt-glow)); +} +.charsheet .bladerunner .skill_toggle input[type=hidden][value=advantage] ~ label:nth-of-type(1), +.charsheet .bladerunner .skill_toggle input[type=hidden][value=disadvantage] ~ label:nth-of-type(3), +.charsheet .bladerunner .skill_toggle input[type=hidden][value=helping] ~ label:nth-of-type(4) { + background: var(--col-red-glow); + -webkit-transition: background 200ms ease-in-out 100ms; + transition: background 200ms ease-in-out 100ms; + color: var(--col-alt); +} +.charsheet .bladerunner .skill_toggle:hover::before { + right: -100%; + background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(30%, var(--col-schematic-glow)), color-stop(70%, var(--col-schematic-glow)), to(transparent)); + background: linear-gradient(to right, transparent, var(--col-schematic-glow) 30%, var(--col-schematic-glow) 70%, transparent); + -webkit-transition: all 300ms ease-out; + transition: all 300ms ease-out; + border-bottom-width: 2px; +} +.charsheet .bladerunner .skill_toggle:hover label { + background: var(--col-deep); +} +.charsheet .bladerunner .critical_menu { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 1rem; + justify-items: center; +} +.charsheet .bladerunner .critical_menu button { + border-radius: 0; +} +.charsheet .bladerunner .critical_menu button::before { + display: inline-block; + position: relative; + content: "double_arrow"; + font-family: var(--font-icon); + -webkit-transform: translateY(1px); + transform: translateY(1px); +} +.charsheet .bladerunner .critical_menu::before { + display: inline-block; + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 30px; + aspect-ratio: 1; + border: 2px solid var(--col-blue); + border-radius: 4px; + content: "emergency_home"; + font-size: 2rem; + font-family: var(--font-icon); + font-weight: normal; + color: var(--col-blue); + text-align: center; + line-height: 1.3em; + -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)); +} +.charsheet .bladerunner .br-checkbox { + height: 2rem !important; + width: 3rem !important; + -webkit-appearance: none; + -moz-appearance: none; + 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-transition: background 100ms ease-out; + transition: background 100ms ease-out; +} +.charsheet .bladerunner .br-checkbox:checked { + background: var(--col-red); + 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)); +} +.charsheet .bladerunner .span-all { + grid-column: 1/-1; +} \ No newline at end of file diff --git a/blade_runner_rpg/bladerunner_rpg.html b/blade_runner_rpg/bladerunner_rpg.html new file mode 100644 index 0000000000..d2563c34aa --- /dev/null +++ b/blade_runner_rpg/bladerunner_rpg.html @@ -0,0 +1,2672 @@ + + + +
+ + + +
+
+ + + + + +
+ +
+
+
+

Profile Database

+ + +
+ + + +
+
+
+
+

Key Memory

+ +
+
+

Key Relationship

+ +
+
+

Home

+ + +
+
+

Appearance

+ +
+
+
+

Attributes & Skills

+
+
+
+

strength

d6 +
+
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+
+
+
+

agility

d6 +
+
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+
+
+
+

intelligence

d6 +
+
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+
+
+
+

empathy

d6 +
+
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+
+
+
+

driving

d6 +
+
+ + + +
+ + + + +
+
+
+
+
+
+ + +
+
+
+

Weapons

+

Hand to Hand

+
+
+ + + + + + + + + + + +
+
+

Firearms

+
+
+ + + + + + + + + + + +
+
+
+
+

Specialties

+
+ + + +
+
+
+

Armor

+ + + +
+
+

Signature Item

+
+ +
+
+
+

Gear

+
+
+ +
+
+
+
+
+

Health

+
+

Maximum Health

+ +
+ +
+ + + + + + + + + + + + +
+ +
+
+

Resolve

+
+

Maximum Resolve

+ +
+ +
+ + + + + + + + + + + + +
+ +
+
+
+
+
+

Promotion Points

+
+ + + + + + + + + + + + + + + + + + + + + +
+
+
+

Humanity Points

+
+ + + + + + + + + + + + + + + + + + + + + +
+
+
+

Chinyen Points

+
+ + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+

Shift Log

+ + +
+
+

Shifts

+ +
+ + + + + + +
+
+ + +

Log File

+
+

Morning

+ + +
+
+

Day

+ + +
+
+

Evening

+ + +
+
+

Night

+ + +
+
+
+
+ +
+

Vehicle

+ + +
+
+
+

Passengers

+ +
+
+

Hull

+ +
+ + + + + + + + + + + +
+ +
+
+
+
+

Armor

d6 +
+
+ + + +
+ + + + +
+
+
+
+ + + +
+ + + +
+ + + + +
+
+
+
+
+ +
+
+
+{{#character_name}}{{#character_id}} +

[{{character_name}}](http://journal.roll20.net/character/{{character_id}})

{{/character_id}}{{^character_id}} +

{{character_name}}

{{/character_id}}{{/character_name}} +

{{label}}

{{#successes}} +
{{computed::successes}}
{{/successes}} +
+ {{computed::roll1}} + {{computed::roll2}}{{#roll3}}{{computed::roll3}}{{/roll3}}{{#damage}} +

damage

{{damage}}{{/damage}} +
{{#push}} +
[Push](~{{character_name}}|push||{{computed::push}})
{{/push}}{{#character_name}}{{#attack_id}} +
[Damage](~{{character_name}}|{{attack_id}}_damage)[Critical](~{{character_name}}|{{attack_id}}_crit)
{{/attack_id}}{{/character_name}}{{#description}} +

{{description}}

{{/description}} + +{{#character_name}}{{#character_id}} +

[{{character_name}}](http://journal.roll20.net/character/{{character_id}})

{{/character_id}}{{^character_id}} +

{{character_name}}

{{/character_id}}{{/character_name}} +

{{label}}

+
+
+
{{#push_all}}[All](~{{character_name}}|execute-push||{{computed::push_all}}){{/push_all}}{{^push_all}}{{/push_all}}{{#result1}} +

{{result1}}

+

{{result1}}

{{#result1}}{{#roll1}}[{{roll1}}](~{{character_name}}|execute-push||{{computed::push1_1}}){{/roll1}}{{/result1}}{{#result2}}{{/result2}}{{#result3}}{{/result3}}{{/result1}}{{#result2}} +

{{result2}}

+

{{result2}}

{{#result1}}{{#roll2}}{{#roll1}}[{{roll2}} + {{roll1}}](~{{character_name}}|execute-push||{{computed::push2_1}}){{/roll1}}{{/roll2}}{{/result1}}{{#result2}}{{#roll2}}[{{roll2}}](~{{character_name}}|execute-push||{{computed::push2_2}}){{/roll2}}{{/result2}}{{#result3}}{{/result3}}{{/result2}}{{#result3}} +

{{result3}}

+

{{result3}}

{{#result1}}{{#roll3}}{{#roll1}}[{{roll3}} + {{roll1}}](~{{character_name}}|execute-push||{{computed::push3_1}}){{/roll1}}{{/roll3}}{{/result1}}{{#result2}}{{#roll3}}{{#roll2}}[{{roll3}} + {{roll2}}](~{{character_name}}|execute-push||{{computed::push3_2}}){{/roll2}}{{/roll3}}{{/result2}}{{#result3}}{{#roll3}}[{{roll3}}](~{{character_name}}|execute-push||{{computed::push3_3}}){{/roll3}}{{/result3}}{{/result3}} +
+ + + + \ No newline at end of file diff --git a/blade_runner_rpg/bladerunner_rpgpreview.png b/blade_runner_rpg/bladerunner_rpgpreview.png new file mode 100644 index 0000000000..f7f5fa8e1c Binary files /dev/null and b/blade_runner_rpg/bladerunner_rpgpreview.png differ diff --git a/blade_runner_rpg/sheet.json b/blade_runner_rpg/sheet.json new file mode 100644 index 0000000000..fd3e55634a --- /dev/null +++ b/blade_runner_rpg/sheet.json @@ -0,0 +1,9 @@ +{ + "html": "bladerunner_rpg.html", + "css": "bladerunner_rpg.css", + "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).", + "compendium":"Blade Runner RPG" +} \ No newline at end of file diff --git a/blade_runner_rpg/translation.json b/blade_runner_rpg/translation.json new file mode 100644 index 0000000000..1280d4f01a --- /dev/null +++ b/blade_runner_rpg/translation.json @@ -0,0 +1,5 @@ +{ + "tabs-tabs-character": "Blade Runner", + "tabs-tabs-shift-log": "Shift Log", + "tabs-tabs-vehicle": "Vehicle" +} \ No newline at end of file