@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 { -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; } .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; -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; } .charsheet .bladerunner [class*=container--character] .container__middle .section__weapons .inputRow { display: -webkit-box; 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 .attribute__value { -ms-grid-row-align: center; -ms-grid-column-align: center; place-self: center; } .charsheet .bladerunner [class*=container--character] .container__middle .section__armor textarea { -ms-grid-column-span: 2; grid-column: span 2; } .charsheet .bladerunner [class*=container--character] .container__middle .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 .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-push, .sheet-rolltemplate-bladerunner .sheet-push { text-transform: capitalize; } .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); grid-column: 1/-1; } .sheet-rolltemplate-bladerunner-push h1 a, .sheet-rolltemplate-bladerunner h1 a { color: var(--col-schematic); } .sheet-rolltemplate-bladerunner-push h2, .sheet-rolltemplate-bladerunner h2 { padding-left: 1rem; 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; text-transform: capitalize; } .sheet-rolltemplate-bladerunner-push .sheet-name, .sheet-rolltemplate-bladerunner .sheet-name { background: linear-gradient(12deg, rgba(44, 39, 61, 0.2), rgba(27, 177, 177, 0.2)); } .sheet-rolltemplate-bladerunner-push a, .sheet-rolltemplate-bladerunner a { color: white; } .sheet-rolltemplate-bladerunner-push a[href^="~"], .sheet-rolltemplate-bladerunner-push a[href^="!"], .sheet-rolltemplate-bladerunner a[href^="~"], .sheet-rolltemplate-bladerunner a[href^="!"] { 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 .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-force-fumble .inlinerollresult, .sheet-rolltemplate-bladerunner .sheet-force-fumble .inlinerollresult { -webkit-box-shadow: 0 0 4px var(--col-red-glow), inset 0 0 4px var(--col-red-glow); box-shadow: 0 0 4px var(--col-red-glow), inset 0 0 4px var(--col-red-glow); color: var(--col-red-glow); } .sheet-rolltemplate-bladerunner-push .sheet-successes, .sheet-rolltemplate-bladerunner .sheet-successes { -ms-grid-row: 5; -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.inlinerollresult, .sheet-rolltemplate-bladerunner .sheet-successes span.inlinerollresult { 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); } .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; } .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)); 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-bottom: 1px solid var(--col-blue); padding: 4px; color: var(--col-blue); font-size: 18px; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%, 0 calc(100% - 2rem)); clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%, 0 calc(100% - 2rem)); } .sheet-rolltemplate-bladerunner-push .sheet-push a, .sheet-rolltemplate-bladerunner .sheet-push a { border: none; background: rgba(85, 157, 175, 0.2); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 2rem; gap: 0.25rem; width: 100%; -webkit-box-sizing: border-box; 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-push a:hover, .sheet-rolltemplate-bladerunner .sheet-push a:hover { background: rgba(85, 157, 175, 0.4); } .sheet-rolltemplate-bladerunner-push .sheet-choice-table, .sheet-rolltemplate-bladerunner .sheet-choice-table { display: -ms-grid; 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; -ms-grid-row-span: 2; grid-row: span 2; min-height: 105px; gap: 0.25rem; border-left: 1rem solid var(--col-schematic-glow); color: white; position: relative; } .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 { border-color: var(--col-alt); -webkit-filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)); filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; 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 { border-color: var(--col-alt); -webkit-filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)); filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)); font-size: 12px; } .sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-top-label, .sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-side-label, .sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-top-label, .sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-side-label { background: var(--col-schematic); border: none; display: -ms-grid; display: grid; place-items: center; -ms-grid-row-align: stretch !important; -ms-grid-column-align: stretch !important; place-self: stretch !important; font-size: 16px; } .sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-top-label, .sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-top-label { -ms-grid-row: 1; grid-row: 1; } .sheet-rolltemplate-bladerunner-push .sheet-choice-table .sheet-side-label, .sheet-rolltemplate-bladerunner .sheet-choice-table .sheet-side-label { -ms-grid-column: 1; grid-column: 1; min-width: 35px; } .sheet-rolltemplate-bladerunner-push .sheet-choice-table::before, .sheet-rolltemplate-bladerunner .sheet-choice-table::before { background: var(--dark-back-gradient); position: absolute; content: "Push matrix"; font-family: var(--font-header); font-size: 18px; text-transform: uppercase; color: var(--col-tone); -webkit-transform-origin: 0 0; transform-origin: 0 0; rotate: 90deg; top: 0; left: 2rem; } .sheet-rolltemplate-bladerunner-push .sheet-span-all, .sheet-rolltemplate-bladerunner .sheet-span-all { grid-column: 1/-1; } .sheet-rolltemplate-bladerunner-push .sheet-effect, .sheet-rolltemplate-bladerunner .sheet-effect { text-transform: capitalize; text-align: center; } .sheet-rolltemplate-bladerunner-push .sheet-description, .sheet-rolltemplate-bladerunner .sheet-description { color: white; font-family: inherit; } .sheet-rolltemplate-bladerunner-push.sheet-rolltemplate-darkmode h1, .sheet-rolltemplate-bladerunner.sheet-rolltemplate-darkmode h1 { color: var(--col-tone); } .sheet-rolltemplate-bladerunner-push.sheet-rolltemplate-darkmode h1 a, .sheet-rolltemplate-bladerunner.sheet-rolltemplate-darkmode h1 a { color: var(--col-alt); } .sheet-rolltemplate-bladerunner-push.sheet-rolltemplate-darkmode h2, .sheet-rolltemplate-bladerunner.sheet-rolltemplate-darkmode h2 { background: var(--col-deep); } .sheet-rolltemplate-bladerunner-push.sheet-rolltemplate-darkmode .sheet-choice-table::before, .sheet-rolltemplate-bladerunner.sheet-rolltemplate-darkmode .sheet-choice-table::before { color: var(--col-blue); } .sheet-darkmode .ui-dialog .dialog .nav.nav-tabs a[data-tab=charsheet]:before, .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: radial-gradient(ellipse 400px 400% at right center, var(--col-background), transparent 20%), radial-gradient(ellipse 400px 400% at left center, var(--col-background), transparent 20%), -webkit-gradient(linear, left top, right top, from(var(--col-background)), color-stop(black), to(var(--col-background))), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), -webkit-gradient(linear, left top, left bottom, from(black), to(black)); background: radial-gradient(ellipse 400px 400% at right center, var(--col-background), transparent 20%), radial-gradient(ellipse 400px 400% at left center, var(--col-background), transparent 20%), linear-gradient(to right, var(--col-background), black, var(--col-background)), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), linear-gradient(black 0%, black 100%); -webkit-box-shadow: 0 0 20px var(--col-deep), 0 0 12px var(--col-background), 0 0 2px var(--col-background); box-shadow: 0 0 20px var(--col-deep), 0 0 12px var(--col-background), 0 0 2px var(--col-background); background-size: cover, cover, cover, cover, cover, cover; background-blend-mode: 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); --selectedColor:var(--col-blue); --unselectedColor1:var(--col-background); --col-option2: rgba(133, 90, 90, 0.0); --img-bladerunner: url("https://s3.amazonaws.com/files.d20.io/images/304284738/jAqK_uR6cB2p2lCFKoDTOA/max.png?1663001456"); --img-caution: repeating-linear-gradient( 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) > * { -ms-grid-row: 1; -ms-grid-column: 1; 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 .tab-content .charsheet .flex-box { display: -webkit-box; display: -ms-flexbox; display: flex; } .ui-dialog .tab-content .charsheet .gap { gap: 5px; } .ui-dialog .tab-content .charsheet .capitalize { text-transform: capitalize; } .ui-dialog .tab-content .charsheet .adaptive { display: -ms-grid; display: grid; -ms-grid-columns: auto; grid-template-columns: auto; -ms-grid-rows: auto; grid-template-rows: auto; grid-template-areas: "content"; position: relative; } .ui-dialog .tab-content .charsheet .adaptive > * { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: content; } .ui-dialog .tab-content .charsheet .adaptive > span { opacity: 0; z-index: -10; text-transform: initial; border-radius: 0px; } .ui-dialog .tab-content .charsheet .adaptive--text { min-height: 4rem; } .ui-dialog .tab-content .charsheet .adaptive--text__span { white-space: pre-wrap; padding: 4px; border: 1px solid transparent; } .ui-dialog .tab-content .charsheet .adaptive--text__textarea { width: 100%; height: 100%; resize: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dialog .tab-content .charsheet .adaptive--text__textarea, .ui-dialog .tab-content .charsheet .adaptive--input__input { position: absolute; } .ui-dialog .tab-content .charsheet .adaptive--input__input { width: 100%; } .ui-dialog .tab-content .charsheet .adaptive--input__span { padding: 2px; min-height: 1.5rem; } .ui-dialog .tab-content .charsheet .collapse-container { position: relative; } .ui-dialog .tab-content .charsheet .repitem:hover .collapse, .ui-dialog .tab-content .charsheet .repitem:hover .roll-container, .ui-dialog .tab-content .charsheet .collapse-container:hover .collapse, .ui-dialog .tab-content .charsheet .collapse-container:hover .roll-container { opacity: 1; } .ui-dialog .tab-content .charsheet .repitem .collapse, .ui-dialog .tab-content .charsheet .collapse-container .collapse { -webkit-appearance: none; -moz-appearance: none; appearance: none; opacity: 0; position: absolute; right: 0px; top: 0px; border: 0px solid black; border-radius: 0; color: var(--selectedColor); text-transform: none; background-color: transparent; display: inline; font-size: 16px; z-index: 100; } .ui-dialog .tab-content .charsheet .repitem .collapse:before, .ui-dialog .tab-content .charsheet .collapse-container .collapse:before { content: "y"; font-family: pictos; } .ui-dialog .tab-content .charsheet .repitem .collapse:checked, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked { color: var(--unselectedColor1); } .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded, .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container .expanded, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container .expanded { display: none !important; } .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + * { display: none !important; } .ui-dialog .tab-content .charsheet .repitem .collapse:not(:checked) ~ .collapsed, .ui-dialog .tab-content .charsheet .repitem .collapse:not(:checked) ~ .collapse-container .collapsed, .ui-dialog .tab-content .charsheet .collapse-container .collapse:not(:checked) ~ .collapsed, .ui-dialog .tab-content .charsheet .collapse-container .collapse:not(:checked) ~ .collapse-container .collapsed { display: none !important; } .ui-dialog .tab-content .charsheet .repitem .collapse:hover, .ui-dialog .tab-content .charsheet .collapse-container .collapse:hover { color: var(--selectedColor); } .ui-dialog .tab-content .charsheet .repitem .collapse { right: -15px; } .ui-dialog .tab-content .charsheet .repcontainer.editmode .collapse { display: none; } .ui-dialog .tab-content .charsheet .section-control:not(:checked) + .section-display { display: none !important; } .ui-dialog .charsheet { padding: 0; } .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%), -webkit-gradient(linear, left top, right top, from(var(--col-background)), color-stop(30%, var(--col-deep)), color-stop(70%, var(--col-deep)), to(var(--col-background))), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), -webkit-gradient(linear, left top, left bottom, from(var(--col-background)), to(var(--col-background))); background-image: radial-gradient(ellipse 400px 400% at right center, var(--col-background), transparent 10%), radial-gradient(ellipse 400px 400% at left center, var(--col-background), transparent 10%), linear-gradient(to right, var(--col-background), var(--col-deep) 30%, var(--col-deep) 70%, var(--col-background)), repeating-linear-gradient(to right, transparent, transparent 10px, var(--col-background) 10px, var(--col-background) 11px), repeating-linear-gradient(30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), repeating-linear-gradient(-30deg, transparent, transparent 20px, var(--col-background) 20px, var(--col-background) 21px), linear-gradient(var(--col-background), var(--col-background)); background-size: cover, cover, cover, cover, cover, cover, cover; background-blend-mode: screen, screen, multiply, overlay, overlay, overlay, normal; background-repeat: no-repeat, repeat; background-position: 20% 10%; -webkit-box-shadow: inset 0 0 12px white, inset 0 0 6px white, inset 0 0 2px white; 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-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-animation: spawn-right 500ms ease-in-out; animation: spawn-right 500ms ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes spawn-left { 0% { -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 { background-color: #010302 !important; } .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); text-transform: capitalize; } .charsheet .bladerunner textarea:-ms-input-placeholder, .charsheet .bladerunner input[type=text]:-ms-input-placeholder, .charsheet .bladerunner input[type=number]:-ms-input-placeholder, .charsheet .bladerunner select:-ms-input-placeholder { background: var(--img-caution); text-transform: capitalize; } .charsheet .bladerunner textarea:placeholder-shown, .charsheet .bladerunner input[type=text]:placeholder-shown, .charsheet .bladerunner input[type=number]:placeholder-shown, .charsheet .bladerunner select:placeholder-shown { background: var(--img-caution); text-transform: capitalize; } .charsheet .bladerunner textarea:placeholder-shown::-webkit-input-placeholder, .charsheet .bladerunner input[type=text]:placeholder-shown::-webkit-input-placeholder, .charsheet .bladerunner input[type=number]:placeholder-shown::-webkit-input-placeholder, .charsheet .bladerunner select:placeholder-shown::-webkit-input-placeholder { color: var(--col-red); } .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 2s ease infinite; animation: pulse 2s ease 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; gap: 5px; background: linear-gradient(90deg, rgb(24, 74, 82), rgb(7, 17, 21) 60px, rgb(7, 17, 21) calc(100% - 60px), rgb(24, 74, 82)); background-attachment: fixed; -webkit-box-shadow: -4px 4px 4px rgba(248, 0, 255, 0.1803921569), 0px 4px 4px rgba(255, 212, 0, 0.1803921569), 4px 4px 4px rgba(0, 194, 255, 0.1803921569); 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; } .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-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: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 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 { display: -ms-grid; display: grid; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-grid-columns: [button-start] 1fr auto minmax(auto, 40px) [button-end]; grid-template-columns: [button-start] 1fr auto minmax(auto, 40px) [button-end]; grid-template-areas: "header select dice"; } .charsheet .bladerunner .attribute_wrapper:first-child:not(.button-wrapper) { -ms-grid-rows: [button-start] 46px [button-end]; grid-template-rows: [button-start] 46px [button-end]; } .charsheet .bladerunner .attribute_wrapper.button-wrapper, .charsheet .bladerunner .attribute_wrapper:not(:first-child) { -ms-grid-rows: [button-start] 40px [button-end]; grid-template-rows: [button-start] 40px [button-end]; } .charsheet .bladerunner .attribute_wrapper > div { border: 0px; } .charsheet .bladerunner .attribute_wrapper:hover button { border-color: var(--col-alt); color: var(--col-alt); -webkit-filter: drop-shadow(0 0 4px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)); filter: drop-shadow(0 0 4px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)); } .charsheet .bladerunner .attribute_wrapper:hover button::after { background: var(--col-accent); } .charsheet .bladerunner .attribute_wrapper:hover h3 { color: var(--col-deep); } .charsheet .bladerunner .attribute_wrapper:hover:not(:first-child) .grade { color: var(--col-deep); border-color: var(--col-deep); } .charsheet .bladerunner .attribute_wrapper:active button { -webkit-filter: drop-shadow(0 0 4px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); filter: drop-shadow(0 0 4px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); color: white; } .charsheet .bladerunner .attribute_wrapper:active button::after { background: var(--col-red-glow) !important; -webkit-transition: background 50ms; transition: background 50ms; } .charsheet .bladerunner .attribute_wrapper button, .charsheet .bladerunner .attribute_wrapper .button { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; grid-area: button; } .charsheet .bladerunner .attribute_wrapper .attribute__value { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: select; -ms-grid-row-align: center; align-self: center; } .charsheet .bladerunner .attribute_wrapper .attribute__name { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: header; z-index: 10; place-self: stretch; padding: 5px 10px; margin: 0; overflow: hidden; } .charsheet .bladerunner .attribute_wrapper .attribute__name > span { height: 100%; overflow: hidden; display: inline; } .charsheet .bladerunner .attribute_wrapper .attribute__name, .charsheet .bladerunner .attribute_wrapper .attribute__dice { pointer-events: none; } .charsheet .bladerunner .attribute_wrapper .attribute__dice { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: dice; display: inline-block; -webkit-mask-image: linear-gradient(-60deg, var(--col-blue), transparent 80%); mask-image: linear-gradient(-60deg, var(--col-blue), transparent 80%); padding: 0 5px 5px; -ms-grid-row-align: end; align-self: end; border: none; font-size: 16px; text-align: right; color: var(--col-blue); text-shadow: 1px 1px 0px var(--col-blue-glow); z-index: 1; } .charsheet .bladerunner .attribute_wrapper .attribute__dice::first-letter { font-size: 0.75em; } .charsheet .bladerunner .attribute_wrapper:not(.button-wrapper):first-of-type { border: 2px solid black; -o-border-image: linear-gradient(190deg, var(--col-blue), transparent 70%) 1; border-image: linear-gradient(190deg, var(--col-blue), transparent 70%) 1; border-width: 2px 2px 0 2px; -webkit-filter: drop-shadow(0 0 4px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow)); filter: drop-shadow(0 0 4px var(--col-blue-glow)) drop-shadow(0 0 8px var(--col-blue-glow)); } .charsheet .bladerunner .attribute_wrapper:not(.button-wrapper):first-of-type .attribute__name { text-transform: uppercase !important; color: var(--col-blue); text-shadow: none; text-shadow: 1px 1px var(--col-blue-glow); } .charsheet .bladerunner .attribute_wrapper .attribute { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .charsheet .bladerunner .attribute_wrapper .attribute .attribute__value { z-index: 2; } .charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::before, .charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::after { position: absolute; content: ""; background: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(var(--col-red)), to(transparent)); background: linear-gradient(to top, transparent, var(--col-red), transparent); width: 2px; height: 200%; top: 50%; translate: 0 -50%; -webkit-filter: drop-shadow(0 0 2px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); filter: drop-shadow(0 0 2px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)); z-index: 5; } .charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::before { left: 0; } .charsheet .bladerunner .attribute_wrapper .attribute:hover .attribute__value::after { right: 0; } .charsheet .bladerunner .attribute__value { position: relative; } .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 input[type=hidden][value="-"] ~ .gradeMenu { left: calc(-400% - 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; background-color: #071115 !important; } .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 .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); 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 4px 1px var(--col-schematic)); filter: drop-shadow(0 0 2px var(--col-alt-glow)) drop-shadow(0 0 8px var(--col-alt-glow)) drop-shadow(0px 4px 1px var(--col-schematic)); -webkit-transition: background 100ms ease-out; transition: background 100ms ease-out; } .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 4px 1px var(--col-accent)); filter: drop-shadow(0 0 2px var(--col-red-glow)) drop-shadow(0 0 8px var(--col-red-glow)) drop-shadow(0px 4px 1px var(--col-accent)); } .charsheet .bladerunner .span-all { grid-column: 1/-1; } .charsheet .bladerunner .repitem { display: -ms-grid; display: grid; gap: 5px; } .charsheet .bladerunner .repitem input { width: auto; }