@import url("https://fonts.googleapis.com/css?family=Aldrich|DM+Sans|Geo|Russo+One|Homenaje|Monda|Orbitron|Michroma|Viga|Material+Icons|Material+Symbols+Outlined|Wallpoet|Saira+Extra+Condensed&display=swap"); .ui-dialog .charactersheet .tab.character { display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto 7.3rem 6.5rem 9.2rem auto auto auto 12.3rem 1fr; perspective: 800px; } .ui-dialog .charactersheet .Consumables { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-self: flex-start; } .ui-dialog .charactersheet .Consumables .input_row { align-items: center; flex-wrap: nowrap; } .ui-dialog .charactersheet .Consumables h1 { grid-column: 1/-1; bottom: -1rem; position: relative; place-self: start; background: var(--headGradient); padding: 1rem 5rem 5px 15px; line-height: 10px; font-family: var(--font-thin-header); font-size: 10px; color: var(--headTopColor); transform: translateY(-50%); clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%); z-index: 2; white-space: nowrap; } .ui-dialog .charactersheet .Consumables .sm_box:nth-of-type(1), .ui-dialog .charactersheet .Consumables .sm_box:nth-of-type(2) { width: calc(100% - 30px); } .ui-dialog .charactersheet .combat { grid-row: span 3; display: flex; flex-direction: column; gap: 5px; align-self: start; min-height: 28rem; } .ui-dialog .charactersheet .combat .Weapons { flex: 1; z-index: 1; } .ui-dialog .charactersheet .combat .Weapons .input_row { border: unset; } .ui-dialog .charactersheet .combat .Weapons .collapse { right: -10px !important; top: -10px !important; } .ui-dialog .charactersheet .combat .sm_box { align-self: end; width: 75%; padding: 5px 10px; flex: 0 0 0; } .ui-dialog .charactersheet .inventory { grid-row: span 3; display: grid; grid-template-rows: auto 1fr; gap: 5px; align-self: start; min-height: 35rem; } .ui-dialog .charactersheet .inventory .input_row { border: unset; } .ui-dialog .charactersheet .inventory button { font-size: inherit; } .ui-dialog .charactersheet .inventory .repitem { border-bottom: 2px dotted var(--inputBorderColor); } .ui-dialog .charactersheet .Health { width: 60%; } .ui-dialog .charactersheet .Health .overlay { position: relative; } .ui-dialog .charactersheet .Health .radiation { position: absolute; display: grid; place-content: center; right: -0.5rem; top: 0; width: 2rem; height: 2rem; translate: 100%; padding: 5px; } .ui-dialog .charactersheet .Health .radiation span::after { content: "crisis_alert"; font-family: var(--font-icon); font-size: 2.5rem; line-height: 1.25; text-align: center; position: absolute; inset: 0; } .ui-dialog .charactersheet .Health .radiation input[type=hidden]:not([value="0"]) + span::after { color: var(--warningColor); opacity: 0.7; } .ui-dialog .charactersheet .Health .radiation input { width: 24px; font-family: var(--font-thick-header); text-align: center; aspect-ratio: 1; display: none; } .ui-dialog .charactersheet .Health .radiation:where(:hover, :focus, :focus-within) span { display: none; } .ui-dialog .charactersheet .Health .radiation:where(:hover, :focus, :focus-within) input, .ui-dialog .charactersheet .Health .radiation input[type=hidden]:not([value="0"]) ~ input { display: block; z-index: 1; } .ui-dialog .charactersheet .Radiation, .ui-dialog .charactersheet .Resolve { width: 203px; align-self: start; } .ui-dialog .charactersheet .Talents { grid-row: span 2; } .ui-dialog .charactersheet .Story_Points { width: 60%; justify-self: flex-end; } .ui-dialog .charactersheet .Story_Points .fill-left { display: flex; justify-content: center; } .ui-dialog .charactersheet .Tiny_Items { width: 60%; justify-self: flex-end; } .ui-dialog .charactersheet .bioSection { display: flex; flex-direction: column; mix-blend-mode: difference; grid-row: span 2; align-self: start; margin-bottom: var(--huge-gap); } .ui-dialog .charactersheet .bioSection textarea { min-height: 9rem; } .ui-dialog .charactersheet .bioSection .camelBox:nth-of-type(1) { width: 200px; } .ui-dialog .charactersheet .bioSection .camelBox:nth-of-type(2) { width: 150px; } .ui-dialog .charactersheet .bioSection .camelBox:nth-of-type(3) { width: 250px; flex: 3; } .ui-dialog .charactersheet .skill_button { position: relative; min-height: 3rem; pointer-events: auto; transition: all 300ms ease-out; } .ui-dialog .charactersheet .skill_button button, .ui-dialog .charactersheet .skill_button .button { width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; text-align: center; padding: var(--half-gap); } .ui-dialog .charactersheet .skill_button h3, .ui-dialog .charactersheet .skill_button [aria-level="3"] { text-align: center; color: var(--headColor); line-height: 1; font-size: 14px; } .ui-dialog .charactersheet .skill_button::before { position: absolute; inset: 0; content: ""; background: var(--contentBackColor); clip-path: polygon(5px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 5px); z-index: -1; } .ui-dialog .charactersheet .skill_button:hover:not(.no-hover) { --_filter0: drop-shadow(0px 0 0px var(--hoverHighlight)); filter: drop-shadow(0 0 2px var(--hoverHighlight)) var(--_filter0) var(--_filter0) var(--_filter0) var(--_filter0); } .ui-dialog .charactersheet .skill_button button:hover { background: radial-gradient(var(--hoverHighlightBack), transparent); } .ui-dialog .charactersheet .skill_button button:active { background: radial-gradient(var(--hoverHighlight), transparent); } .ui-dialog .charactersheet .skill_button button:active h3 { color: var(--activeTextColor); } .ui-dialog .charactersheet .attribute_section { --_filter: var(--active2e) drop-shadow(0 1px 0.1rem var(--col-alien-deep)); position: relative; align-self: start; min-height: 300px; pointer-events: none; grid-row: span 4; filter: var(--_filter, drop-shadow(0 2px 0.5rem var(--col-alien-black))); z-index: 5; } .ui-dialog .charactersheet .attribute_section label { all: unset; display: flex; place-self: center; } .ui-dialog .charactersheet .attribute_section :where(div[class*=segment]) { display: grid; grid-template-columns: repeat(4, 1fr); width: 80%; min-width: 200px; margin: auto; gap: 5px; } .ui-dialog .charactersheet .attribute_section .skill_button { display: grid; } .ui-dialog .charactersheet .attribute_section .strength_segment { grid-column: 1/-1; grid-row: 1; grid-template-areas: ". closecombat closecombat ." "machinery machinery stamina stamina" ". strength strength ."; } .ui-dialog .charactersheet .attribute_section .strength_segment .__strength { grid-area: strength; } .ui-dialog .charactersheet .attribute_section .strength_segment .__strength > .__big { position: absolute; bottom: 0; transform: translateY(125%); } .ui-dialog .charactersheet .attribute_section .strength_segment .__close_combat { grid-area: closecombat; } .ui-dialog .charactersheet .attribute_section .strength_segment .__close_combat > .__big { position: absolute; bottom: 0; transform: translateY(-115%); } .ui-dialog .charactersheet .attribute_section .strength_segment .__heavy_machinery { grid-area: machinery; } .ui-dialog .charactersheet .attribute_section .strength_segment .__stamina { grid-area: stamina; } .ui-dialog .charactersheet .attribute_section .agility_segment { position: absolute; left: 5px; top: 50%; transform: translate(-50%, -50%); grid-column: 1/span 2; grid-row: 2; grid-template-areas: ". rangedcombat rangedcombat ." "mobility mobility agility agility" ". piloting piloting ."; z-index: 2; } .ui-dialog .charactersheet .attribute_section .agility_segment .skill_button { display: flex; } .ui-dialog .charactersheet .attribute_section .agility_segment .__ranged_combat { grid-area: rangedcombat; } .ui-dialog .charactersheet .attribute_section .agility_segment .__mobility { grid-area: mobility; } .ui-dialog .charactersheet .attribute_section .agility_segment .__agility { grid-area: agility; } .ui-dialog .charactersheet .attribute_section .agility_segment .__agility label:first-of-type { order: 2; } .ui-dialog .charactersheet .attribute_section .agility_segment .__piloting { grid-area: piloting; } .ui-dialog .charactersheet .attribute_section .wits_segment { position: absolute; right: 5px; top: 50%; transform: translate(50%, -50%); grid-column: 4/span 2; grid-row: 2; grid-template-areas: ". observation observation ." "wits wits survival survival" ". comtech comtech ."; z-index: 2; } .ui-dialog .charactersheet .attribute_section .wits_segment .skill_button { display: flex; } .ui-dialog .charactersheet .attribute_section .wits_segment .skill_button label { order: 2; } .ui-dialog .charactersheet .attribute_section .wits_segment .__observation { grid-area: observation; } .ui-dialog .charactersheet .attribute_section .wits_segment .__wits { grid-area: wits; } .ui-dialog .charactersheet .attribute_section .wits_segment .__wits > label:first-of-type { order: 0; } .ui-dialog .charactersheet .attribute_section .wits_segment .__comtech { grid-area: comtech; } .ui-dialog .charactersheet .attribute_section .wits_segment .__survival { grid-area: survival; } .ui-dialog .charactersheet .attribute_section .empathy_segment { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0%); grid-template-areas: ". empathy empathy ." "command command medical medical" ". manipulation manipulation ."; z-index: 1; } .ui-dialog .charactersheet .attribute_section .empathy_segment .__medical_aid { grid-area: medical; } .ui-dialog .charactersheet .attribute_section .empathy_segment .__empathy { grid-area: empathy; } .ui-dialog .charactersheet .attribute_section .empathy_segment .__empathy > .__big { position: absolute; top: 0; transform: translateY(-125%); } .ui-dialog .charactersheet .attribute_section .empathy_segment .__command { grid-area: command; } .ui-dialog .charactersheet .attribute_section .empathy_segment .__manipulation { grid-area: manipulation; } .ui-dialog .charactersheet .attribute_section .empathy_segment .__manipulation > .__big { position: absolute; top: 0; transform: translateY(115%); } .ui-dialog .charactersheet .attribute_section .strength_segment .skill_button:nth-of-type(2), .ui-dialog .charactersheet .attribute_section .empathy_segment .skill_button:nth-of-type(2) { display: flex; } .ui-dialog .charactersheet .attribute_section .strength_segment .skill_button:nth-of-type(3), .ui-dialog .charactersheet .attribute_section .empathy_segment .skill_button:nth-of-type(3) { display: flex; } .ui-dialog .charactersheet .attribute_section .strength_segment .skill_button:nth-of-type(3) label, .ui-dialog .charactersheet .attribute_section .empathy_segment .skill_button:nth-of-type(3) label { order: 2; } @media (max-width: 890px) { .ui-dialog .charactersheet .tab.character { padding: 3rem 1rem; grid-auto-flow: unset; grid-template-columns: 1fr 1fr; grid-template-rows: initial; } .ui-dialog .charactersheet .tab.character .Health .overlay { display: flex; gap: 5px; justify-content: space-between; } .ui-dialog .charactersheet .tab.character .Health .radiation { position: initial; translate: 0; right: 0; flex: 0 0 auto; } .ui-dialog .charactersheet .tab.character .combat, .ui-dialog .charactersheet .tab.character .inventory { min-height: initial; } .ui-dialog .charactersheet .tab.character .attribute_section { margin: 1rem 0; } .ui-dialog .charactersheet .bioSection { order: -2; z-index: -1; margin: 0; } .ui-dialog .charactersheet .attribute_section { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .ui-dialog .charactersheet .attribute_section [class*=segment] { width: 100%; position: unset; inset: 0; transform: unset; grid-row: auto; grid-column: auto; grid-template-columns: 1fr 1fr; min-width: 125px; gap: 1rem; display: flex; flex-direction: column; } .ui-dialog .charactersheet .attribute_section [class*=segment] .skill_button { display: flex; } .ui-dialog .charactersheet .attribute_section [class*=segment] .skill_button label.__big { position: relative; transform: unset; order: 1; } .ui-dialog .charactersheet .attribute_section [class*=segment] .skill_button:first-of-type { border-left: 2px dotted var(--contentBackColor); } .ui-dialog .charactersheet .attribute_section [class*=segment] .skill_button:first-of-type::before { margin-left: 1rem; } .ui-dialog .charactersheet .attribute_section [class*=segment] .skill_button h3 { text-align: center; } .ui-dialog .charactersheet .resolve-radiation { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .ui-dialog .charactersheet .Health, .ui-dialog .charactersheet .Radiation, .ui-dialog .charactersheet .Resolve, .ui-dialog .charactersheet .Story_Points, .ui-dialog .charactersheet .Tiny_Items, .ui-dialog .charactersheet .Critical_Injuries { width: 100%; transition: all 300ms ease-in-out; } } @media (max-width: 700px) { .tab.character { padding-top: 0px; border: none; grid-template-columns: 1fr; } .tab.character .Consumables { order: 2; } .tab.character .box :is(.underlay, .overlay) { padding: 5px 10px 10px 10px; } .tab.character::before { content: none; } } .ui-dialog .charactersheet .tab.ship { display: grid; grid-auto-flow: column; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 2rem 1rem; perspective: 800px; } .ui-dialog .charactersheet .tab.ship h2 { position: absolute; left: 50%; top: 10px; font-size: 8px; text-align: center; line-height: 1; transform: translateX(-50%); color: var(--headColor); } .ui-dialog .charactersheet .ship_top { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .ui-dialog .charactersheet .ship_modules { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 5px; } .ui-dialog .charactersheet .ship_modules .Lease_Cost { margin-top: 15px; } .ui-dialog .charactersheet .ship_information { display: grid; grid-template-columns: 1fr 1fr; isolation: isolate; } .ui-dialog .charactersheet .ship_information .camelBox { grid-column: 1/-1; } .ui-dialog .charactersheet .ship_information .camelBox:nth-of-type(1) { width: calc(100% - 30px); } .ui-dialog .charactersheet .ship_information .camelBox:nth-of-type(2) { width: calc(100% - 50px); } .ui-dialog .charactersheet .ship_information .camelBox:nth-of-type(3) { width: calc(100% - 70px); } .ui-dialog .charactersheet .ship_information .camelBox:nth-of-type(4) { padding: 2px 10px 2px 10px; } .ui-dialog .charactersheet .ship_bottom { display: grid; gap: 5px 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-template-rows: auto auto; } .ui-dialog .charactersheet .multibox.crew-positions, .ui-dialog .charactersheet .multibox.crew-positions .input_row { grid-template-columns: 1fr 15rem 4rem 2fr; } .ui-dialog .charactersheet .multibox.Internal_Modules, .ui-dialog .charactersheet .multibox.Internal_Modules .input_row { grid-template-columns: 1fr 30px 30px; } .ui-dialog .charactersheet .multibox.Internal_Modules > input, .ui-dialog .charactersheet .multibox.Internal_Modules .input_row > input { width: 20px !important; } .ui-dialog .charactersheet .multibox.Ships_Log, .ui-dialog .charactersheet .multibox.Ships_Log .input_row { grid-template-columns: 1fr 2fr; } .ui-dialog .charactersheet .multibox.component_damage, .ui-dialog .charactersheet .multibox.component_damage .input_row:not(.expanded) { grid-template-columns: 1fr repeat(2, 10rem); } .ui-dialog .charactersheet .multibox.component_damage .input_row.expanded { grid-template-columns: repeat(2, 1fr); } .ui-dialog .charactersheet .multibox.Upgrades, .ui-dialog .charactersheet .multibox.Upgrades .input_row { grid-template-columns: 4rem 1fr 2fr; } .ui-dialog .charactersheet .multibox.Armaments, .ui-dialog .charactersheet .multibox.Armaments .input_row { grid-template-columns: 1fr repeat(2, 50px) 70px 50px; } .ui-dialog .charactersheet .left_attributes, .ui-dialog .charactersheet .right_attributes { display: flex; margin: 5px; flex-direction: column; gap: 5px; } .ui-dialog .charactersheet .left_attributes .skill_button:nth-of-type(1), .ui-dialog .charactersheet .right_attributes .skill_button:nth-of-type(1) { width: 100%; } .ui-dialog .charactersheet .left_attributes .skill_button:nth-of-type(2), .ui-dialog .charactersheet .right_attributes .skill_button:nth-of-type(2) { width: 80%; } .ui-dialog .charactersheet .left_attributes .skill_button:nth-of-type(3), .ui-dialog .charactersheet .right_attributes .skill_button:nth-of-type(3) { width: 100%; } .ui-dialog .charactersheet .left_attributes .skill_button:nth-of-type(4), .ui-dialog .charactersheet .right_attributes .skill_button:nth-of-type(4) { width: 70%; } .ui-dialog .charactersheet .left_attributes { align-items: flex-end; } .ui-dialog .charactersheet .right_attributes .skill_button { flex-direction: row-reverse; } .ui-dialog .charactersheet .skill_button { display: flex; } .tab.npc.npc { display: block; } .tab.npc.npc .portrait.portrait { float: right; width: clamp(100px, 40%, 240px); min-height: 200px; margin: 2rem 0 0rem 2rem; --border: var(--sheetBackColor); filter: drop-shadow(0 0 1px var(--border)) drop-shadow(0 0 0px var(--border)) drop-shadow(0 0 0px var(--border)) drop-shadow(0 0 0px var(--border)) drop-shadow(0 0 0px var(--border)) drop-shadow(0 0 0px var(--border)) drop-shadow(0 0 0px var(--border)); background-color: var(--border); } .tab.npc.npc .portrait.portrait:not([src]):not([src=""]) { --stripeSize: 20px; background: repeating-linear-gradient(-45deg, var(--border), var(--border) calc(var(--stripeSize) * 2), var(--hoverHighlight) calc(var(--stripeSize) * 2), var(--hoverHighlight) calc(var(--stripeSize) * 2 + var(--stripeSize))); } .tab.npc.npc .attribute_section { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; } .tab.npc.npc .attribute_section [class*=segment] { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; position: unset; inset: 0; transform: unset; grid-row: auto; grid-column: auto; grid-template-columns: 1fr 1fr; min-width: 125px; gap: 1rem; display: flex; } .tab.npc.npc .input_row { justify-content: flex-start; } .tab.npc.npc .input_row .reveal { cursor: pointer; } .tab.npc.npc .input_row .reveal:not(:checked) ~ input[type=hidden]:is([value="0"], :not([value])) + .skill_button { display: none; } .tab.npc.npc .skill_button.skill_button { display: flex; min-height: unset; justify-content: space-between; } .tab.npc.npc .skill_button.skill_button::before { background: var(--buttonBackColor); } .tab.npc.npc .skill_button.skill_button:hover { filter: none; } .tab.npc.npc .skill_button.skill_button button { width: auto; padding: 0; flex: 1; } .tab.npc.npc .skill_button.skill_button button:hover { background: var(--hoverHighlightBack); } .tab.npc.npc .skill_button.skill_button button:hover h3 { color: var(--buttonBackColor); } .tab.npc.npc .skill_button.skill_button button:active { background: var(--hoverHighlight); } .tab.npc.npc .skill_button.skill_button label.__big { position: relative; margin: 0 0.25em 0 0; line-height: 1; transform: unset; order: 1; } .tab.npc.npc .skill_button.skill_button label.__big::before, .tab.npc.npc .skill_button.skill_button label.__big::after { content: unset; } .tab.npc.npc .skill_button.skill_button label.__big input { font-size: 12px; line-height: 1; width: 15px; color: var(--brightTextColor); } .tab.npc.npc .skill_button.skill_button label.__big:focus, .tab.npc.npc .skill_button.skill_button label.__big:focus-within, .tab.npc.npc .skill_button.skill_button label.__big:hover { background: var(--hoverHighlightBack); } .tab.npc.npc .skill_button.skill_button label.__big:focus input, .tab.npc.npc .skill_button.skill_button label.__big:focus-within input, .tab.npc.npc .skill_button.skill_button label.__big:hover input { color: var(--inputHighlight); } .tab.npc.npc .skill_button.skill_button h3 { color: var(--headTextColor); text-align: center; width: max-content; margin: 0 0.5em; } .tab.npc.npc .inline_repeating + fieldset + .repcontainer { display: contents; flex-wrap: wrap; gap: 1ch 0.25em; } .tab.npc.npc .inline_repeating + fieldset + .repcontainer .repitem { display: inline-block; margin: 2px; } .tab.npc.npc .inline_repeating + fieldset + .repcontainer .repitem h3 { font-family: var(--font-thin-header); font-size: 12px; color: var(--headTextColor); margin-right: 1rem; line-height: 1.5; height: min-content; } .tab.npc.npc .inline_repeating ~ .repcontrol { display: inline-flex; margin-left: 0.25em; } .tab.npc.npc .repeating_gear + div .repitem { background: var(--expandBorderColor); border-radius: 20px; padding: 0 1ch; } .charactersheet .hostile.hostile { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "name combat" "attributes attacks" "information attacks" "containment attacks" "abilities attacks"; } .charactersheet .hostile.hostile .name { isolation: isolate; } .charactersheet .hostile.hostile .expanded { margin-top: 0.5rem; } .charactersheet .hostile.hostile .multibox { align-self: start; } .charactersheet .hostile.hostile .repcontainer { display: grid; gap: 0.5rem; } .charactersheet .hostile.hostile .multibox.attack_table, .charactersheet .hostile.hostile .multibox.attack_table .input_row { grid-template-columns: 30px 50px 1fr 50px 50px; } .charactersheet .hostile.hostile .multibox.ability_table, .charactersheet .hostile.hostile .multibox.ability_table .input_row { grid-template-columns: 30px 1fr; } .charactersheet .hostile.hostile textarea { line-height: 1.2; } .charactersheet .hostile.hostile .roll_icon { z-index: 1; } .charactersheet .hostile.hostile .skill_button label { order: 2; } .charactersheet .hostile.hostile .skill_button h3 { flex: 1; font-size: 14px; font-family: var(--font-type); } .charactersheet .hostile.hostile .camelBox:nth-of-type(1) { grid-area: name; } .charactersheet .hostile.hostile .camelBox:nth-of-type(2) { grid-area: stage; } .charactersheet .hostile.hostile .Health { width: unset; margin-bottom: 1rem; } .charactersheet .hostile.hostile .Health .border { display: block; justify-content: space-between; } .charactersheet .hostile.hostile .Health .border input { font-family: var(--font-thin-header); font-size: 18px; } .charactersheet .hostile.hostile .attributes { grid-area: attributes; margin: 0; display: grid; gap: 1.5rem; } .charactersheet .hostile.hostile .combat_stats { grid-area: combat; } .charactersheet .hostile.hostile .Information { grid-area: information; } .charactersheet .hostile.hostile .Containment_and_Termination_Protocols { grid-area: containment; } .charactersheet .hostile.hostile .attack_table { grid-area: attacks; } .charactersheet .hostile.hostile .attack_table .roll { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; width: 100%; padding: 0; margin: 0; border: none; background: none; } .charactersheet .hostile.hostile .attack_table .roll input { flex: 0; font-size: 24px; width: 100% !important; } .charactersheet .hostile.hostile .attack_table .roll * { align-self: center; } .tab.vehicle { gap: 1rem; } .tab.vehicle .camelBox { display: grid; } .tab.vehicle .attributes { display: grid; gap: 5px 1rem; grid-template-columns: 1fr 1fr; margin: 0; } .tab.vehicle .attributes .skill_button:nth-child(odd) label.__big { order: 2; } .tab.vehicle .attributes .skill_button:nth-child(n+2):nth-child(-n+3) { width: 80%; } .tab.vehicle .attributes .skill_button:nth-child(2) { place-self: flex-end; } .tab.vehicle .attributes .camelBox, .tab.vehicle .attributes .__passengers { grid-column: 1/-1; } .tab.vehicle .vehicle_top { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .tab.vehicle .vehicle_bottom { grid-column: span 2; } .tab.vehicle .vehicle_damage { place-self: center; } .tab.vehicle .multibox.Armaments, .tab.vehicle .multibox.Armaments .input_row { grid-template-columns: 1fr repeat(2, 50px) minmax(auto, 100px); } .tab.vehicle .multibox.Armaments .repcontainer, .tab.vehicle .multibox.Armaments .repitem, .tab.vehicle .multibox.Armaments .input_row .repcontainer, .tab.vehicle .multibox.Armaments .input_row .repitem { display: grid; grid-template-columns: subgrid; grid-column: 1/-1; } .tab.vehicle .multibox.Armaments .input_row:not(:last-child), .tab.vehicle .multibox.Armaments .input_row .input_row:not(:last-child) { display: contents; } .tab.vehicle .multibox.Armaments select, .tab.vehicle .multibox.Armaments .input_row select { border: none !important; outline: none; height: 20px; box-sizing: border-box; justify-self: center; } .tab.vehicle .multibox.Component_Damage, .tab.vehicle .multibox.Component_Damage .input_row { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; } .ui-dialog .charactersheet .initiative { display: grid; grid-template-columns: auto 1fr; } .ui-dialog .charactersheet .initiative button { position: relative; display: grid; place-items: center; padding: 1rem; margin: 0; height: 2em; aspect-ratio: 1; } .ui-dialog .charactersheet .initiative button::after { position: absolute; content: ""; background: var(--contentBackColor); border: 2px solid var(--lightBorderColor); inset: 0; rotate: 45deg; z-index: -1; } .ui-dialog .charactersheet .initiative button:hover { --_filter0: drop-shadow(0px 0 0px var(--hoverHighlight)); filter: drop-shadow(0 0 2px var(--hoverHighlight)) var(--_filter0) var(--_filter0) var(--_filter0) var(--_filter0); } .ui-dialog .charactersheet .initiative button:active { background: radial-gradient(var(--hoverHighlight), transparent); } .ui-dialog .charactersheet .initiative button:active h3 { color: var(--activeTextColor); } .ui-dialog .charactersheet .initiative .initiative { position: relative; top: 2rem; } .ui-dialog .charactersheet .initiative .initiative button:last-child { width: 1em; height: 1em; top: calc(2em + 8px); right: calc(1em - 8px); } .ui-dialog .charactersheet .initiative .Results .border { display: flex; justify-content: space-around; min-height: 6em; } .ui-dialog .charactersheet .initiative .Results .border button { top: 2rem; } .ui-dialog .charactersheet .initiative .Results .border button::after { background-color: var(--col-alien-deep); } .ui-dialog .charactersheet .initiative .Results .border h3 { font-size: 3em; color: var(--activeTextColor); } .sheet-rolltemplate-alien.sheet-rolltemplate-alien { background: var(--sheetBackground); color: var(--templateTextColor); border-radius: 1rem; padding: 1rem 2rem 2rem 2rem; z-index: 1; clip-path: polygon(20px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, calc(50% + 10px) 100%, 50% calc(100% - 10px), 10px calc(100% - 10px), 0% calc(100% - 18px), 0 15px); margin-left: -40px; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien:not(:first-child) { margin-top: 10px; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien h3 { font-weight: normal; font-family: var(--font-type); color: var(--headTextColor); } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-body { position: relative; padding: 1rem; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-body .sheet-computed-text .inlinerollresult { background-color: transparent; padding: 0; aspect-ratio: auto; height: auto; text-align: center; font-family: inherit; display: inline; white-space: pre-wrap; text-align: left; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-body .sheet-hide-if-no-buttons:not(:has(a)) { display: none; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-body::before { position: absolute; inset: 0; content: ""; --border-width: 4px; border: var(--border-width) double var(--templateBorder); clip-path: polygon(0 0, 100% 0, 100% 2rem, calc(100% - var(--border-width)) 2rem, calc(100% - var(--border-width)) calc(100% - 2rem), 100% calc(100% - 2rem), 100% 100%, 0 100%, 0 calc(100% - 2rem), var(--border-width) calc(100% - 2rem), var(--border-width) 2rem, 0 2rem); z-index: -1; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-body::after { position: absolute; content: ""; top: 0; bottom: 0; width: 2px; right: -1rem; background: var(--warningColor); animation-name: alert; animation-duration: 5s; animation-timing-function: ease-out; animation-delay: 2s; animation-fill-mode: forwards; } @keyframes alert { from { top: 0%; } to { top: 100%; } } .sheet-rolltemplate-alien.sheet-rolltemplate-alien::before { content: ""; position: absolute; inset: 0; background: var(--sheetPulseBackground); opacity: 0; transition: opacity 300ms; z-index: -1; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-character_name { all: unset; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-character_name a { color: var(--linkColor); } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-title { position: relative; background: linear-gradient(to right, transparent 0%, var(--col-alien-black) 2rem, var(--col-alien-black) calc(100% - 2rem), transparent 100%); text-transform: uppercase; top: auto; left: auto; font-size: 1.5em; line-height: 0.8; margin: 0 -1rem; padding-left: 1rem; text-align: left; font-family: var(--font-type); color: var(--templateTextColor); transform: unset; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-push { font-family: var(--font-icon); } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-push::after { content: "refresh"; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results { background-color: var(--sectionBackColor); background-clip: padding-box; position: relative; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 5px; padding: 1rem; margin: 1.5rem 1rem; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results + .sheet-results { margin-top: 1.9rem; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results::before { position: absolute; inset: -1rem; content: ""; --border-width: 2px; border: 1px solid var(--templateBorder); clip-path: polygon(0 0, 2rem 0, 2rem var(--border-width), calc(100% - 2rem) var(--border-width), calc(100% - 2rem) 0, 100% 0, 100% 100%, calc(100% - 2rem) 100%, calc(100% - 2rem) calc(100% - var(--border-width)), 2rem calc(100% - var(--border-width)), 2rem 100%, 0 100%); z-index: -1; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .inlinerollresult { display: grid; place-content: center; font-size: 1em; line-height: 0.9; position: relative; padding: 2px; color: var(--templateTextColor); height: 24px; aspect-ratio: 1; border: none; border-radius: 6px; background: var(--col-alien-black); text-align: center; font-family: var(--font-thick-header); font-weight: normal; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .inlinerollresult::after { position: absolute; inset: 2px; content: ""; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .inlinerollresult[original-title*="computed value"], .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .inlinerollresult[title*="computed value"] { pointer-events: none; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult.fullcrit, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult[original-title="Rolling 6 = 6"], .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult[title="Rolling 6 = 6"] { order: 1; color: transparent; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult.fullcrit::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult[original-title="Rolling 6 = 6"]::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult[title="Rolling 6 = 6"]::after { background: var(--img-dice-success); background-size: contain; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results a { background-color: var(--linkColor); text-transform: uppercase; color: var(--aColor); } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .sheet-dice, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .sheet-stress { display: contents; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-base { display: contents; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-base .inlinerollresult:not(.fullcrit):not([original-title="Rolling 6 = 6"]):not([title="Rolling 6 = 6"]) { order: 2; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-base .inlinerollresult.fullcrit::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-base .inlinerollresult[original-title="Rolling 6 = 6"]::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-base .inlinerollresult[title="Rolling 6 = 6"]::after { filter: invert(1); } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-dice.sheet-dice span.inlinerollresult { font-family: var(--font-thick-header); font-size: 1em; line-height: 1.5; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult { background: var(--warningColor); } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult.fullcrit { order: 1; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult.fullcrit::after { filter: unset; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult.fullfail, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult[original-title="Rolling 1 = 1"], .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult[title="Rolling 1 = 1"] { order: 3; color: transparent; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult.fullfail::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult[original-title="Rolling 1 = 1"]::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult[title="Rolling 1 = 1"]::after { background: var(--img-dice-panic); background-size: contain; } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult:not(.fullfail):not(.fullcrit):not([original-title="Rolling 6 = 6"]):not([title="Rolling 6 = 6"]):not([original-title="Rolling 1 = 1"]):not([title="Rolling 1 = 1"]) { order: 2; color: var(--stressDiceTextColor); } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-plain span.inlinerollresult.fullcrit { color: var(--critColor); } .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-plain span.inlinerollresult.fullcrit::after { display: none; } @supports (scrollbar-color: auto) { .ui-dialog { scrollbar-color: var(--scrollColor) transparent; } } @supports not (scrollbar-color: auto) { .ui-dialog::-webkit-scrollbar, .ui-dialog *::-webkit-scrollbar { width: 5px; } .ui-dialog::-webkit-scrollbar-track, .ui-dialog *::-webkit-scrollbar-track { background-color: transparent; } .ui-dialog::-webkit-scrollbar-thumb, .ui-dialog *::-webkit-scrollbar-thumb { background-color: var(--scrollColor); border-radius: 0; border: none; } .ui-dialog *:hover::-webkit-scrollbar-thumb { background-color: var(--scrollHighlight); box-shadow: 0 0 5px var(--hoverHighlightBack); } } .ui-dialog .tab-content .charsheet .tabs__container:not(.k-active-tab) { display: none !important; } .ui-dialog .tab-content .charsheet .tabs__nav-item { list-style: none; } .ui-dialog .tab-content .charsheet .tabs__nav-list { display: flex; } .ui-dialog .tab-content .charsheet .second-row { margin-top: 5px; } .ui-dialog .tab-content .charsheet .death-roll { position: absolute; translate: 0 -100%; } .ui-dialog .tab-content .charsheet .dual-number { display: grid; grid-template-columns: 1fr 1ch 1fr; place-items: center; } .ui-dialog .tab-content .charsheet .dual-number input:last-child { grid-column: 3; } .ui-dialog .tab-content .charsheet .tabs__nav-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--half-gap); } .ui-dialog .tab-content .charsheet .compendium-required:not(.active) { display: none !important; } .ui-dialog .tab-content .charsheet .colon:after { content: ":"; margin-left: var(--tiny-gap); } .ui-dialog .tab-content .charsheet *:has(> .camelBox) { isolation: isolate; } .ui-dialog .tab-content .charsheet .tooltip-container { display: grid; position: relative; grid-template-areas: "content"; } .ui-dialog .tab-content .charsheet .tooltip-container > * { grid-area: content; } .ui-dialog .tab-content .charsheet .tooltip-container:is(:hover, :focus, :focus-within) .tooltip-target, .ui-dialog .tab-content .charsheet .tooltip-container .tooltip-target:is(:hover, :focus, :focus-within) { z-index: 10; opacity: 1; transition: 1s 250ms opacity ease-in-out; pointer-events: initial; } .ui-dialog .tab-content .charsheet .tooltip-target { pointer-events: none; position: absolute !important; bottom: calc(100% - 10px); justify-self: center; opacity: 0; z-index: -100; width: 200px; height: max-content; transition: 1s 250ms opacity ease-in-out, 250ms 1s z-index ease-in-out, 250ms 1s pointer-events ease-in-out; } .ui-dialog .tab-content .charsheet .tooltip-target:is(:before, :after) { width: 100%; height: 100%; } .ui-dialog .tab-content .charsheet .tooltip-target textarea, .ui-dialog .tab-content .charsheet .tooltip-target span { padding-left: 20px !important; max-height: 9rem; } .ui-dialog .tab-content .charsheet .tooltip-target:is(:hover, :focus, :focus-within), .ui-dialog .tab-content .charsheet .tooltip-target :is(:hover, :focus, :focus-within) { box-shadow: none !important; } .ui-dialog .tab-content .charsheet [hidden] { display: none !important; } .ui-dialog .tab-content .charsheet button, .ui-dialog .tab-content .charsheet input:is([type=checkbox], [type=radio]) { cursor: pointer; } .ui-dialog .tab-content .charsheet .roller { margin: 0; } .ui-dialog .tab-content .charsheet .no-list { list-style: none; } .ui-dialog .tab-content .charsheet .span-all { grid-column: 1/-1; } .ui-dialog .tab-content .charsheet input:placeholder-shown { text-transform: capitalize; } .ui-dialog .tab-content .charsheet .uppercase { text-transform: uppercase !important; } .ui-dialog .tab-content .charsheet .margin-justify-right { margin-left: auto; } .ui-dialog .tab-content .charsheet .roller { display: flex; gap: 0.5rem; } .ui-dialog .tab-content .charsheet .justify-self-center { justify-self: center; } .ui-dialog .tab-content .charsheet .justify-content-space-between { justify-content: space-between; } .ui-dialog .tab-content .charsheet .display-contents { display: contents; } .ui-dialog .tab-content .charsheet .display-control--not-zero:is([value=""], [value="0"], :not([value])) + *, .ui-dialog .tab-content .charsheet .display-control:not(:checked) + * { display: none !important; } .ui-dialog .tab-content .charsheet .flex-box { display: flex; } .ui-dialog .tab-content .charsheet .half-gap { gap: 0.5rem; } .ui-dialog .tab-content .charsheet .tiny-gap { gap: 0.25rem; } .ui-dialog .tab-content .charsheet .flex-wrap { flex-wrap: wrap; } .ui-dialog .tab-content .charsheet .gap { gap: 1rem; } .ui-dialog .tab-content .charsheet .input-label { display: flex; gap: 0.5rem; } .ui-dialog .tab-content .charsheet .input-label > input:not([type=number]):not([type=checkbox]):not([type=radio]) { flex: 1; } .ui-dialog .tab-content .charsheet .input-label > select { width: fit-content; flex: 0 0 fit-content; height: 100%; } .ui-dialog .tab-content .charsheet .capitalize { text-transform: capitalize; } .ui-dialog .tab-content .charsheet .adaptive { display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-template-areas: "content"; position: relative; } .ui-dialog .tab-content .charsheet .adaptive > * { grid-area: content; line-height: 1; } .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 { font-size: inherit; font-family: inherit; line-height: inherit; white-space: pre-wrap; border: 1px solid transparent; max-height: 20rem; } .ui-dialog .tab-content .charsheet .adaptive--text__textarea { width: 100%; height: 100%; max-height: 100%; resize: none; box-sizing: border-box; overflow: auto; } .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 .repcontrol-button { grid-area: header; align-self: start; } .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol { grid-area: header; justify-self: end; z-index: 100; } .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol > .repcontrol_add { display: none !important; } .ui-dialog .tab-content .charsheet .expanded { margin: 1rem; } .ui-dialog .tab-content .charsheet .expanded.border textarea { padding: 0.5rem; color: var(--expandTextColor); background: transparent; } .ui-dialog .tab-content .charsheet .expanded.border select { color: var(--expandTextColor); } .ui-dialog .tab-content .charsheet .expanded.border { filter: drop-shadow(4px 4px 0px var(--expandBorderColor)); } .ui-dialog .tab-content .charsheet .expanded.border .input-label { color: var(--expandTextColor); } .ui-dialog .tab-content .charsheet .expanded::before, .ui-dialog .tab-content .charsheet .expanded::after { background: var(--expandBackColor); } .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; 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 { color: var(--warningColor); 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 .repcontainer.editmode .collapse { display: none; } .ui-dialog .tab-content .charsheet .section-control:not(:checked) + .section-display { display: none !important; } .ui-dialog .tab-content .charsheet .tab.settings .overlay { column-width: 300px; column-gap: var(--grid-gap); column-fill: balance; } .ui-dialog .tab-content .charsheet .tab.settings .overlay .input_row { margin-top: 0px; margin-bottom: 2.5px; padding-bottom: 2.5px; break-inside: avoid; } body, .sheet-rolltemplate-alien { --active2e: initial; --gap: 1rem; --half-gap: calc(var(--gap) / 2); --tiny-gap: calc(var(--half-gap) / 2); --big-gap: calc(var(--gap) * 2); --huge-gap: calc(var(--big-gap) * 2); --col-1e-black: #030504; --col-1e-deep: #274b5b; --col-1e-medium: #6b8a85; --col-1e-light: #a4b8b6; --col-1e-white: #d4e4e4; --col-1e-yellow: #ffa229; --col-1e-teal: #25ecd7; --col-1e-red: #690d3b; --col-2e-black: #030504; --col-2e-deep: #006760; --col-2e-medium: #6b8a85; --col-2e-light: #eef2ee; --col-2e-white: #faf9f6; --col-2e-grey: #92918e; --col-2e-dark-grey: #484745; --col-2e-yellow: #f3d12f; --col-2e-teal: #25ecd7; --col-2e-red: #ff4c2a; --col-alien-black: var(--col-1e-black); --col-alien-deep: var(--col-1e-deep); --col-alien-medium: var(--col-1e-medium); --col-alien-light: var(--col-1e-light); --col-alien-white: var(--col-1e-white); --col-yellow: var(--col-1e-yellow); --col-teal: var(--col-1e-teal); --col-red: var(--col-1e-red); --textColor: var(--col-1e-deep); --brightTextColor: var(--col-1e-white); --circleInputTextColor: var(--col-1e-white); --accentTextColor: var(--col-1e-deep); --templateTextColor: var(--col-1e-white); --headColor: var(--col-1e-deep); --headTopColor: var(--col-1e-medium); --headTextColor: var(--col-1e-light); --aColor: var(--col-1e-deep); --linkColor: var(--col-1e-teal); --expandTextColor: var(--col-1e-light); --activeTextColor: var(--col-1e-white); --selectTextColor: var(--col-1e-light); --critColor: var(--col-1e-white); --warningColor: var(--col-1e-yellow); --templateBorder: var(--col-1e-light); --expandBorderColor: var(--col-1e-medium); --inputBorderColor: var(--col-1e-medium); --lightBorderColor: var(--col-1e-white); --sheetBackground: radial-gradient(circle at 20% 80%, #1c0d10, #054352); --sheetPulseBackground: radial-gradient(circle at 80% 20%, #2a1a24, #022f44); --headGradient: linear-gradient(to right, transparent, var(--col-alien-black) 10px); --genericGradient: linear-gradient(to right, var(--hoverHighlightBack), transparent); --buttonBackColor: var(--col-1e-deep); --contentBackColor: var(--col-1e-light); --expandBackColor: var(--col-1e-deep); --expandInputBackColor: var(--col-1e-light); --selectBackColor: var(--col-1e-deep); --backColor: var(--col-1e-black); --sheetBackColor: var(--col-1e-deep); --sectionBackColor: var(--col-1e-deep); --headBackColor: var(--col-1e-black); --navButtonBackColor: var(--col-1e-black); --shadowColor: var(--col-1e-black); --inputHighlight: var(--col-1e-deep); --hoverHighlight: var(--col-1e-yellow); --hoverHighlightBack: var(--col-1e-teal); --hoverHighlightBackStrong: var(--col-1e-red); --stressDiceTextColor: var(--col-1e-deep); --scrollColor: var(--col-1e-deep); --scrollHighlight: var(--col-1e-white); --circleBackColor: var(--col-1e-black); --circleBorderColor: var(--col-1e-deep); --camelHeadBack: var(--col-1e-light); --camelBorder: var(--col-1e-white); --camelHeadColor: var(--col-1e-white); --flLessBorderColor: var(--col-1e-deep); --flLessBackColor: var(--col-1e-medium); --flSelectedBackColor: var(--col-1e-black); --flSelectedBorderColor: var(--col-1e-yellow); --flSelectedTextColor: var(--col-1e-white); --inputBorderColor: var(--col-1e-white); --checkStartBackColor: var(--col-1e-red); --checkBackColor: var(--col-1e-yellow); --checkOutlineColor: var(--col-1e-light); --navSelectedTextColor: var(--col-1e-deep); --font-thick-header: "Russo One", sans-serif; --font-thin-header: "Aldrich", sans-serif; --font-type: "Geo", sans-serif; --font-text: "DM Sans"; --font-icon: "Material Icons"; --img-roll: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/dice-icon.png); --img-roll-lit: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/dice-icon-light.png); --img-softblur: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/soft-blur.gif); --img-dice-success: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/success-die.png); --img-dice-panic: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/panic-die.png); --img-weyland: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/weyland-logo.png); --border-weyland: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/weyland-border.png); } body:not(.sheet-darkmode):not(.sheet-rolltemplate-darkmode):has(:is(.color-mode[value=color], .color-mode-color)), body:has(:is(.color-mode[value=edition], .color-mode--edition)):has(:is(.edition-value[value="2"], .sheet-edition-value--2)), .sheet-rolltemplate-alien:not(.sheet-darkmode):not(.sheet-rolltemplate-darkmode):has(:is(.color-mode[value=color], .color-mode-color)), .sheet-rolltemplate-alien:has(:is(.color-mode[value=edition], .color-mode--edition)):has(:is(.edition-value[value="2"], .sheet-edition-value--2)) { --active2e: ; --textColor: var(--col-2e-deep); --backColor: white; --col-alien-black: var(--col-2e-black); --col-alien-deep: var(--col-2e-deep); --col-alien-medium: var(--col-2e-medium); --col-alien-light: var(--col-2e-light); --col-alien-white: var(--col-2e-white); --col-yellow: var(--col-2e-yellow); --col-teal: var(--col-2e-teal); --col-red: var(--col-2e-red); --textColor: var(--col-2e-black); --brightTextColor: var(--col-2e-light); --circleInputTextColor: var(--col-2e-deep); --accentTextColor: var(--col-2e-deep); --templateTextColor: var(--col-2e-white); --headColor: var(--col-2e-black); --headTopColor: var(--col-2e-medium); --headTextColor: var(--col-2e-light); --aColor: var(--col-2e-deep); --linkColor: var(--col-2e-teal); --expandTextColor: var(--col-2e-light); --activeTextColor: var(--col-2e-white); --selectTextColor: var(--col-2e-light); --critColor: var(--col-2e-white); --warningColor: var(--col-2e-yellow); --camelHeadColor: var(--col-2e-deep); --templateBorder: var(--col-2e-light); --expandBorderColor: var(--col-2e-medium); --inputBorderColor: var(--col-2e-medium); --lightBorderColor: var(--col-2e-white); --circleBorderColor: var(--col-2e-deep); --sheetBackground: white; --sheetPulseBackground: transparent; --headGradient: linear-gradient(to right, transparent, white 10px); --genericGradient: linear-gradient(to right, var(--col-2e-grey), transparent) --buttonBackColor: var(--col-2e-deep); --contentBackColor: var(--col-2e-light); --expandBackColor: var(--col-2e-deep); --expandInputBackColor: var(--col-2e-medium); --selectBackColor: var(--col-2e-deep); --sheetBackColor: var(--col-2e-deep); --sectionBackColor: var(--col-2e-deep); --headBackColor: var(--col-2e-black); --navButtonBackColor: var(--col-2e-deep); --shadowColor: var(--col-2e-medium); --circleBackColor: white; --inputHighlight: var(--col-2e-deep); --hoverHighlight: var(--col-2e-yellow); --hoverHighlightBack: var(--col-2e-teal); --hoverHighlightBackStrong: var(--col-2e-red); --stressDiceTextColor: var(--col-2e-deep); --scrollColor: var(--col-2e-deep); --scrollHighlight: var(--col-2e-white); --camelHeadBack: var(--col-2e-light); --camelBorder: var(--col-2e-white); --flLessBorderColor: var(--col-2e-deep); --flLessBackColor: var(--col-2e-medium); --flSelectedBackColor: var(--col-2e-black); --flSelectedBorderColor: var(--col-2e-yellow); --flSelectedTextColor: var(--col-2e-white); --inputBorderColor: var(--col-2e-medium); --checkOutlineColor: var(--col-2e-medium); --checkStartBackColor: var(--col-2e-red); --checkBackColor: var(--col-2e-yellow); --navSelectedTextColor: var(--col-2e-deep); --nav2eShape: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%); --img-weyland: url(https://files.d20.io/images/462038792/6yxtU2YIjCpM3q1-uTaYJA/original.png); --border-weyland: url(https://files.d20.io/images/462035848/rqCn3B79fDdfXOmSSregqA/original.png); } .ui-dialog .charactersheet, .sheet-rolltemplate-alien { font-family: var(--font-type); color: var(--textColor); background: var(--backColor); font-size: 16px; } .ui-dialog .charactersheet .pictos, .sheet-rolltemplate-alien .pictos { font-family: pictos !important; text-transform: none !important; } .ui-dialog .charactersheet .flex-box, .ui-dialog .charactersheet .sheet-flex-box, .sheet-rolltemplate-alien .flex-box, .sheet-rolltemplate-alien .sheet-flex-box { display: flex; } .ui-dialog .charactersheet .flex-wrap, .ui-dialog .charactersheet .sheet-flex-wrap, .sheet-rolltemplate-alien .flex-wrap, .sheet-rolltemplate-alien .sheet-flex-wrap { flex-wrap: wrap; } .ui-dialog .charactersheet .justify-space-around, .ui-dialog .charactersheet .sheet-justify-space-around, .sheet-rolltemplate-alien .justify-space-around, .sheet-rolltemplate-alien .sheet-justify-space-around { justify-content: space-around; } .ui-dialog .charactersheet .justify-space-between, .ui-dialog .charactersheet .sheet-justify-space-between, .sheet-rolltemplate-alien .justify-space-between, .sheet-rolltemplate-alien .sheet-justify-space-between { justify-content: space-between; } .ui-dialog .charactersheet .justify-center, .ui-dialog .charactersheet .sheet-justify-center, .sheet-rolltemplate-alien .justify-center, .sheet-rolltemplate-alien .sheet-justify-center { justify-content: center; } .ui-dialog .charactersheet .sheet-alien, .sheet-rolltemplate-alien .sheet-alien { min-width: 320px; } .ui-dialog .charactersheet .span-all, .ui-dialog .charactersheet .sheet-span-all, .sheet-rolltemplate-alien .span-all, .sheet-rolltemplate-alien .sheet-span-all { grid-column: 1/-1; } .ui-dialog .charactersheet .row-reverse, .ui-dialog .charactersheet .sheet-row-reverse, .sheet-rolltemplate-alien .row-reverse, .sheet-rolltemplate-alien .sheet-row-reverse { flex-direction: row-reverse; } .ui-dialog .charactersheet .column-reverse, .ui-dialog .charactersheet .sheet-column-reverse, .sheet-rolltemplate-alien .column-reverse, .sheet-rolltemplate-alien .sheet-column-reverse { flex-direction: column-reverse; } .ui-dialog .charactersheet .gap, .ui-dialog .charactersheet .sheet-gap, .sheet-rolltemplate-alien .gap, .sheet-rolltemplate-alien .sheet-gap { gap: var(--gap); } .ui-dialog .charactersheet .half-gap, .ui-dialog .charactersheet .sheet-half-gap, .sheet-rolltemplate-alien .half-gap, .sheet-rolltemplate-alien .sheet-half-gap { gap: var(--half-gap); } .ui-dialog .charactersheet .tiny-gap, .ui-dialog .charactersheet .sheet-tiny-gap, .sheet-rolltemplate-alien .tiny-gap, .sheet-rolltemplate-alien .sheet-tiny-gap { gap: var(--tiny-gap); } .ui-dialog .charactersheet .big-gap, .ui-dialog .charactersheet .sheet-big-gap, .sheet-rolltemplate-alien .big-gap, .sheet-rolltemplate-alien .sheet-big-gap { gap: var(--big-gap); } .ui-dialog .charactersheet .no-gap, .ui-dialog .charactersheet .sheet-no-gap, .sheet-rolltemplate-alien .no-gap, .sheet-rolltemplate-alien .sheet-no-gap { gap: 0; } .ui-dialog .charactersheet input, .ui-dialog .charactersheet label, .ui-dialog .charactersheet button, .sheet-rolltemplate-alien input, .sheet-rolltemplate-alien label, .sheet-rolltemplate-alien button { all: unset; } .ui-dialog .charactersheet input[type=roll]::before, .ui-dialog .charactersheet label[type=roll]::before, .ui-dialog .charactersheet button[type=roll]::before, .sheet-rolltemplate-alien input[type=roll]::before, .sheet-rolltemplate-alien label[type=roll]::before, .sheet-rolltemplate-alien button[type=roll]::before { all: unset; } .ui-dialog .charactersheet button.roll_icon:before, .sheet-rolltemplate-alien button.roll_icon:before { content: ""; background: var(--img-roll) no-repeat; background-size: cover; width: 20px; height: 20px; display: inline-block; } .ui-dialog .charactersheet button.roll_icon:not(.icon_hover):hover, .ui-dialog .charactersheet button.roll_icon.icon_hover:hover:before, .sheet-rolltemplate-alien button.roll_icon:not(.icon_hover):hover, .sheet-rolltemplate-alien button.roll_icon.icon_hover:hover:before { filter: drop-shadow(0 0 0.25rem white) drop-shadow(0 0 0.25rem var(--hoverHighlightBack)) drop-shadow(0 0 0.5rem var(--hoverHighlightBack)) drop-shadow(0 0 0.5rem white); } .ui-dialog .charactersheet button.roll_icon:not(.icon_hover):active, .ui-dialog .charactersheet button.roll_icon.icon_hover:active:before, .sheet-rolltemplate-alien button.roll_icon:not(.icon_hover):active, .sheet-rolltemplate-alien button.roll_icon.icon_hover:active:before { filter: brightness(3.5) drop-shadow(0 0 0.25rem white) drop-shadow(0 0 0.25rem var(--hoverHighlightBackStrong)) drop-shadow(0 0 0.5rem var(--hoverHighlightBackStrong)) drop-shadow(0 0 0.5rem white); } .ui-dialog .charactersheet button.roll_icon[class*=lit], .sheet-rolltemplate-alien button.roll_icon[class*=lit] { background: var(--img-roll-lit) no-repeat; background-size: cover; } .ui-dialog .charactersheet h1, .ui-dialog .charactersheet [aria-level="1"], .ui-dialog .charactersheet h2, .ui-dialog .charactersheet h3, .sheet-rolltemplate-alien h1, .sheet-rolltemplate-alien [aria-level="1"], .sheet-rolltemplate-alien h2, .sheet-rolltemplate-alien h3 { text-transform: uppercase; } .ui-dialog .charactersheet h1, .ui-dialog .charactersheet [aria-level="1"], .sheet-rolltemplate-alien h1, .sheet-rolltemplate-alien [aria-level="1"] { --_headBack: ; --_headShape: ; --_headColor: ; --_leftPad: ; line-height: 10px; font-family: var(--font-thin-header); font-size: 14px; font-weight: bold; color: var(--_headColor, var(--headTopColor)); position: relative; background: var(--_headBack, linear-gradient(to right, transparent, var(--headBackColor) 10px)); padding-top: 1rem; padding-right: 2rem; padding-bottom: 5px; padding-left: var(--_leftPad, 1rem); width: fit-content; left: -10px; clip-path: var(--_headShape, polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%)); } .ui-dialog .charactersheet h2, .ui-dialog .charactersheet [aria-level="2"], .sheet-rolltemplate-alien h2, .sheet-rolltemplate-alien [aria-level="2"] { font-family: var(--font-thick-header); font-size: 8px; font-weight: normal; line-height: 1; color: var(--headColor); } .ui-dialog .charactersheet .input_row, .sheet-rolltemplate-alien .input_row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.15em 0.25em; } .ui-dialog .charactersheet .input_row--grid, .sheet-rolltemplate-alien .input_row--grid { display: grid; } .ui-dialog .charactersheet .input_row h3, .sheet-rolltemplate-alien .input_row h3 { font-family: var(--font-thin-header); font-size: 12px; color: var(--headColor); line-height: 1.5; height: min-content; } .ui-dialog .charactersheet .edition-disabled, .ui-dialog .charactersheet .disabled, .sheet-rolltemplate-alien .edition-disabled, .sheet-rolltemplate-alien .disabled { display: none !important; } .ui-dialog .charactersheet .fill-left, .sheet-rolltemplate-alien .fill-left { display: flex; gap: 2px; flex-wrap: wrap; margin: 5px 0 5px 5px; } .ui-dialog .charactersheet .fill-left:not(:has(.fill-left__radio:checked)) input, .sheet-rolltemplate-alien .fill-left:not(:has(.fill-left__radio:checked)) input { background: transparent; border-color: var(--inputBorderColor); } .ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]), .sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]) { appearance: none; background-color: var(--flLessBackColor); border: 1px solid var(--flLessBorderColor); box-sizing: border-box; height: 25px; width: 15px; transform: skew(-15deg); } .ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):checked, .sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):checked { background: var(--flSelectedBackColor); width: 25px; border: 2px solid var(--flSelectedBorderColor); } .ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):checked::before, .sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):checked::before { position: absolute; display: grid; place-items: center; content: attr(value); font-family: var(--font-thick-header); font-size: 16px; color: var(--flSelectedTextColor); inset: 0; } .ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):checked ~ input:is([type=radio], [type=checkbox]), .sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):checked ~ input:is([type=radio], [type=checkbox]) { background: transparent; border-color: var(--inputBorderColor); } .ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):hover:not(:checked), .sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):hover:not(:checked) { border-color: var(--hoverHighlightBack) !important; border-width: 2px; } .ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):hover:not(:checked)::before, .sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):hover:not(:checked)::before { position: absolute; display: grid; place-items: center; content: attr(value); font-family: var(--font-thick-header); font-size: 12px; color: var(--hoverHighlightBack); inset: 0; } .ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):active, .ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):focus, .sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):active, .sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):focus { outline: none; } .ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]).permanent_damage, .sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]).permanent_damage { border-color: var(--hoverHighlightBackStrong); background: var(--hoverHighlightBackStrong); } .ui-dialog .charactersheet input::-webkit-outer-spin-button, .ui-dialog .charactersheet input::-webkit-inner-spin-button, .sheet-rolltemplate-alien input::-webkit-outer-spin-button, .sheet-rolltemplate-alien input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ui-dialog .charactersheet, .sheet-rolltemplate-alien { /* Firefox */ } .ui-dialog .charactersheet input[type=number], .sheet-rolltemplate-alien input[type=number] { -moz-appearance: textfield; appearance: textfield; } .ui-dialog .charactersheet ::selection, .sheet-rolltemplate-alien ::selection { background: var(--hoverHighlight); } .ui-dialog .charactersheet .tab, .sheet-rolltemplate-alien .tab { position: relative; flex-direction: column; border: 10px solid transparent; padding: 2rem; padding-top: 3rem; gap: 5px 1rem; border-image-source: var(--border-weyland); border-image-width: 32px; border-image-repeat: stretch; border-image-slice: 32; } .ui-dialog .charactersheet .tab::before, .sheet-rolltemplate-alien .tab::before { content: ""; position: absolute; top: -32px; left: 50%; transform: translatex(-50%); width: 100%; height: 46px; background: var(--img-weyland); background-repeat: no-repeat; background-size: contain; background-position: center; } .ui-dialog .charactersheet .sheet-alien, .sheet-rolltemplate-alien .sheet-alien { position: relative; background: var(--sheetBackground); z-index: 1; } .ui-dialog .charactersheet .sheet-alien::before, .sheet-rolltemplate-alien .sheet-alien::before { content: ""; position: absolute; inset: 0; background: var(--sheetPulseBackground); opacity: 0; transition: opacity 300ms; z-index: -1; animation: opacity-fade 10s infinite alternate ease-in-out; } @keyframes opacity-fade { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } .ui-dialog .charactersheet h2, .sheet-rolltemplate-alien h2 { position: absolute; left: 50%; top: 10px; text-align: center; transform: translateX(-50%); } .ui-dialog .charactersheet select, .sheet-rolltemplate-alien select { background: transparent; border: 1px dashed var(--inputBorderColor) !important; width: fit-content; text-transform: capitalize; color: var(--textColor); height: 26px; margin: 2px 0; padding: 2px; flex: 1; } .ui-dialog .charactersheet select option, .sheet-rolltemplate-alien select option { text-transform: capitalize; background-color: var(--selectBackColor); color: var(--selectTextColor); } .ui-dialog .charactersheet select:focus, .sheet-rolltemplate-alien select:focus { outline: none; } .ui-dialog .charactersheet .box, .sheet-rolltemplate-alien .box { display: grid; grid-template-areas: "content"; gap: 5px; margin-top: 5px; } .ui-dialog .charactersheet .box > *, .sheet-rolltemplate-alien .box > * { grid-column: 1/-1; grid-row: 1/-1; } .ui-dialog .charactersheet .box .repcontainer, .sheet-rolltemplate-alien .box .repcontainer { margin-top: var(--half-gap); grid-row: 1/2; } .ui-dialog .charactersheet .box .underlay, .sheet-rolltemplate-alien .box .underlay { display: grid; grid-template-areas: "content"; gap: 5px; } .ui-dialog .charactersheet .box .underlay > *, .sheet-rolltemplate-alien .box .underlay > * { grid-area: content; } .ui-dialog .charactersheet .box .overlay, .sheet-rolltemplate-alien .box .overlay { z-index: 1; } .ui-dialog .charactersheet .box h1, .ui-dialog .charactersheet .box [aria-level="1"], .sheet-rolltemplate-alien .box h1, .sheet-rolltemplate-alien .box [aria-level="1"] { position: relative; place-self: start; background: var(--headGradient); padding: 1rem 5rem 5px 15px; line-height: 10px; font-family: var(--font-thin-header); font-size: 10px; color: var(--headTopColor); transform: translateY(-50%); clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%); z-index: 2; white-space: nowrap; top: -5px; left: -10px; } .ui-dialog .charactersheet .box button[aria-level="1"], .sheet-rolltemplate-alien .box button[aria-level="1"] { font-size: 10px; } .ui-dialog .charactersheet .box button[aria-level="1"].roll_icon:before, .sheet-rolltemplate-alien .box button[aria-level="1"].roll_icon:before { position: relative; top: -2px; width: 10px; height: 10px; } .ui-dialog .charactersheet .repcontrol-button, .sheet-rolltemplate-alien .repcontrol-button { display: grid; width: 15px; height: 15px; font-size: 0; color: var(--accentTextColor); border: 1px solid var(--accentTextColor); } .ui-dialog .charactersheet .repcontrol-button::before, .sheet-rolltemplate-alien .repcontrol-button::before { inset: 0; place-self: center; } .ui-dialog .charactersheet .repcontrol-button::before, .sheet-rolltemplate-alien .repcontrol-button::before { font-family: "Material Icons"; font-size: 12px; content: "add"; } .ui-dialog .charactersheet .repcontrol button, .ui-dialog .charactersheet .itemcontrol button, .sheet-rolltemplate-alien .repcontrol button, .sheet-rolltemplate-alien .itemcontrol button { display: grid; width: 15px; height: 15px; font-size: 0; color: var(--accentTextColor); border: 1px solid var(--accentTextColor); } .ui-dialog .charactersheet .repcontrol button::before, .ui-dialog .charactersheet .itemcontrol button::before, .sheet-rolltemplate-alien .repcontrol button::before, .sheet-rolltemplate-alien .itemcontrol button::before { inset: 0; place-self: center; } .ui-dialog .charactersheet .repcontrol button.repcontrol_add::before, .ui-dialog .charactersheet .itemcontrol button.repcontrol_add::before, .sheet-rolltemplate-alien .repcontrol button.repcontrol_add::before, .sheet-rolltemplate-alien .itemcontrol button.repcontrol_add::before { font-family: "Material Icons"; font-size: 12px; content: "add"; } .ui-dialog .charactersheet .repcontrol button.repcontrol_edit::before, .ui-dialog .charactersheet .itemcontrol button.repcontrol_edit::before, .sheet-rolltemplate-alien .repcontrol button.repcontrol_edit::before, .sheet-rolltemplate-alien .itemcontrol button.repcontrol_edit::before { font-family: "Material Icons"; font-size: 12px; content: "edit"; } .ui-dialog .charactersheet .itemcontrol, .sheet-rolltemplate-alien .itemcontrol { z-index: 99; } .ui-dialog .charactersheet .itemcontrol a.repcontrol_move, .sheet-rolltemplate-alien .itemcontrol a.repcontrol_move { display: grid; position: relative; float: left; width: 20px; aspect-ratio: 1; padding: 0; border: 1px solid var(--accentTextColor); border-radius: 0; line-height: 1; font-size: 0; text-shadow: none; } .ui-dialog .charactersheet .itemcontrol a.repcontrol_move::before, .sheet-rolltemplate-alien .itemcontrol a.repcontrol_move::before { place-self: center; position: absolute; inset: 0; float: left; font-family: "Material Icons"; font-size: 12px; content: "open_with"; line-height: 1.7; } .ui-dialog .charactersheet .itemcontrol .repcontrol_del, .sheet-rolltemplate-alien .itemcontrol .repcontrol_del { width: 20px; height: 20px; } .ui-dialog .charactersheet .itemcontrol .repcontrol_del::before, .sheet-rolltemplate-alien .itemcontrol .repcontrol_del::before { font-family: "Material Icons"; font-size: 12px; content: "remove"; } .ui-dialog .charactersheet .itemcontrol *, .sheet-rolltemplate-alien .itemcontrol * { cursor: pointer; background: var(--contentBackColor); } .ui-dialog .charactersheet .itemcontrol *:hover, .ui-dialog .charactersheet .itemcontrol *:hover::before, .sheet-rolltemplate-alien .itemcontrol *:hover, .sheet-rolltemplate-alien .itemcontrol *:hover::before { background: var(--hoverHighlightBack); } .ui-dialog .charactersheet .multibox, .sheet-rolltemplate-alien .multibox { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 5px; } .ui-dialog .charactersheet .multibox > .border, .sheet-rolltemplate-alien .multibox > .border { grid-row: 1/-1; z-index: -1; } .ui-dialog .charactersheet .multibox > .border:nth-of-type(1), .sheet-rolltemplate-alien .multibox > .border:nth-of-type(1) { grid-column: 1; } .ui-dialog .charactersheet .multibox > .border:nth-of-type(2), .sheet-rolltemplate-alien .multibox > .border:nth-of-type(2) { grid-column: 2; } .ui-dialog .charactersheet .multibox > .border:nth-of-type(3), .sheet-rolltemplate-alien .multibox > .border:nth-of-type(3) { grid-column: 3; } .ui-dialog .charactersheet .multibox > .border:nth-of-type(4), .sheet-rolltemplate-alien .multibox > .border:nth-of-type(4) { grid-column: 4; } .ui-dialog .charactersheet .multibox > .border:nth-of-type(5), .sheet-rolltemplate-alien .multibox > .border:nth-of-type(5) { grid-column: 5; } .ui-dialog .charactersheet .multibox .input_row, .sheet-rolltemplate-alien .multibox .input_row { display: grid; } .ui-dialog .charactersheet .multibox .repcontainer, .sheet-rolltemplate-alien .multibox .repcontainer { margin: 20px 0; grid-column: 1/-1; grid-row: 1/-1; } .ui-dialog .charactersheet .multibox .repcontrol, .sheet-rolltemplate-alien .multibox .repcontrol { grid-column: 1/-1; width: 40%; min-width: 150px; justify-self: flex-end; padding: 0 1rem; margin-top: 5px; grid-row: 2/3; background: var(--accentTextColor); clip-path: polygon(5px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 5px); } .ui-dialog .charactersheet .multibox .repcontrol button, .sheet-rolltemplate-alien .multibox .repcontrol button { color: var(--expandTextColor); } .ui-dialog .charactersheet .multibox .repcontrol button:hover, .sheet-rolltemplate-alien .multibox .repcontrol button:hover { background: var(--hoverHighlightBack); color: var(--accentTextColor); } .ui-dialog .charactersheet .multibox .input_row, .sheet-rolltemplate-alien .multibox .input_row { border: none; } .ui-dialog .charactersheet .multibox .input_row > *:not(.adaptive--text), .sheet-rolltemplate-alien .multibox .input_row > *:not(.adaptive--text) { height: 20px; box-sizing: border-box; justify-self: center; } .ui-dialog .charactersheet .multibox .input_row > *:not(.input_row__borderless), .sheet-rolltemplate-alien .multibox .input_row > *:not(.input_row__borderless) { border-bottom: 2px dotted var(--inputBorderColor); } .ui-dialog .charactersheet .multibox .input_row > .input-label, .sheet-rolltemplate-alien .multibox .input_row > .input-label { width: 100%; } .ui-dialog .charactersheet .multibox .input_row > .input-label > .input-label__input:not([type=number]), .sheet-rolltemplate-alien .multibox .input_row > .input-label > .input-label__input:not([type=number]) { width: 0; } .ui-dialog .charactersheet .multibox .input_row input[type=text], .sheet-rolltemplate-alien .multibox .input_row input[type=text] { width: calc(100% - 20px); text-overflow: ellipsis; text-align: center; } .ui-dialog .charactersheet .multibox .input_row input[type=number], .sheet-rolltemplate-alien .multibox .input_row input[type=number] { border-top: none; border-left: none; border-right: none; outline: none; } .ui-dialog .charactersheet .multibox .input_row .input-label input[type=number], .sheet-rolltemplate-alien .multibox .input_row .input-label input[type=number] { border: none; outline: none; } .ui-dialog .charactersheet .input_row__border, .sheet-rolltemplate-alien .input_row__border { border-bottom: 2px dotted var(--inputBorderColor) !important; } .ui-dialog .charactersheet .input_row, .sheet-rolltemplate-alien .input_row { border-bottom: 2px dotted var(--inputBorderColor); } .ui-dialog .charactersheet .input_row:first-of-type, .sheet-rolltemplate-alien .input_row:first-of-type { margin-top: 5px; } .ui-dialog .charactersheet .input_row:last-of-type, .sheet-rolltemplate-alien .input_row:last-of-type { border-bottom: none; } .ui-dialog .charactersheet .input_row label, .sheet-rolltemplate-alien .input_row label { all: unset; } .ui-dialog .charactersheet .input_row h3, .sheet-rolltemplate-alien .input_row h3 { margin-right: 1rem; } .ui-dialog .charactersheet .input_row input, .sheet-rolltemplate-alien .input_row input { position: relative; height: min-content; line-height: 1; } .ui-dialog .charactersheet .input_row input[type=text], .sheet-rolltemplate-alien .input_row input[type=text] { width: 100%; flex: 1; } .ui-dialog .charactersheet .input_row input[type=text]:hover, .sheet-rolltemplate-alien .input_row input[type=text]:hover { background: linear-gradient(to right, var(--hoverHighlightBack) 0%, transparent 100%); box-shadow: -2px 0 2px var(--hoverHighlightBack); } .ui-dialog .charactersheet .input_row input:where([type=number]), .sheet-rolltemplate-alien .input_row input:where([type=number]) { width: 20px; aspect-ratio: 1; justify-self: flex-end; text-align: center; border: 2px solid var(--inputBorderColor); outline: 2px solid var(--inputBorderColor); outline-offset: -2px; transition: outline-offset 100ms; } .ui-dialog .charactersheet .input_row input:where([type=number]):hover, .ui-dialog .charactersheet .input_row input:where([type=number]):focus, .sheet-rolltemplate-alien .input_row input:where([type=number]):hover, .sheet-rolltemplate-alien .input_row input:where([type=number]):focus { background: var(--hoverHighlightBack); outline-offset: 2px; } .ui-dialog .charactersheet .input_row input[type=checkbox]:not(.fill-left__radio), .sheet-rolltemplate-alien .input_row input[type=checkbox]:not(.fill-left__radio) { height: 25px; aspect-ratio: 1; background: none; box-sizing: border-box; outline: 2px solid var(--inputBorderColor); outline-offset: -4px; justify-self: flex-end; transition: all 300ms; } .ui-dialog .charactersheet .input_row input[type=checkbox]:not(.fill-left__radio):checked, .sheet-rolltemplate-alien .input_row input[type=checkbox]:not(.fill-left__radio):checked { background: var(--checkBackColor); outline: 2px solid var(--checkOutlineColor); outline-offset: -4px; animation: spin 800ms; } .ui-dialog .charactersheet .input_row input[type=checkbox]:not(.fill-left__radio):checked::before, .sheet-rolltemplate-alien .input_row input[type=checkbox]:not(.fill-left__radio):checked::before { position: absolute; inset: 0; border: 2px solid var(--inputBorderColor); content: ""; animation: spin-reverse 800ms; } .ui-dialog .charactersheet .input_row input[type=checkbox]:not(.fill-left__radio), .sheet-rolltemplate-alien .input_row input[type=checkbox]:not(.fill-left__radio) { outline: 2px solid var(--inputBorderColor); outline-offset: -2px; transition: outline-offset 100ms; } .ui-dialog .charactersheet .input_row input[type=checkbox]:not(.fill-left__radio):hover, .sheet-rolltemplate-alien .input_row input[type=checkbox]:not(.fill-left__radio):hover { border: 2px solid var(--inputBorderColor); outline-offset: 2px; } @keyframes spin { from { transform: rotate(45deg) scale(0.5); background: var(--checkStartBackColor); } to { transform: rotate(360deg) scale(1); background: var(--checkBackColor); } } @keyframes spin-reverse { from { transform: rotate(-45deg) scale(0.5); } to { transform: rotate(-360deg) scale(1); } } .ui-dialog .charactersheet input[type=checkbox].reveal, .sheet-rolltemplate-alien input[type=checkbox].reveal { all: unset; position: relative; height: 1em; box-sizing: border-box; aspect-ratio: 1; } .ui-dialog .charactersheet input[type=checkbox].reveal:hover, .sheet-rolltemplate-alien input[type=checkbox].reveal:hover { border: unset; } .ui-dialog .charactersheet input[type=checkbox].reveal:hover::before, .sheet-rolltemplate-alien input[type=checkbox].reveal:hover::before { color: var(--inputBorderColor); } .ui-dialog .charactersheet input[type=checkbox].reveal:not(:checked)::before, .sheet-rolltemplate-alien input[type=checkbox].reveal:not(:checked)::before { position: absolute; top: 50%; left: 50%; translate: -50% -50%; content: "search"; font-family: var(--font-icon); font-size: 18px; } .ui-dialog .charactersheet nav, .sheet-rolltemplate-alien nav { display: flex; align-items: start; margin-bottom: 25px; gap: 2rem; } .ui-dialog .charactersheet nav ul, .sheet-rolltemplate-alien nav ul { margin: 0 0 0 25px; } .ui-dialog .charactersheet nav button, .sheet-rolltemplate-alien nav button { --_borderWidth: var(--active2e) 0; --_borderColor: var(--active2e) transparent; display: inline !important; padding: 0 1rem; clip-path: var(--nav2eShape, polygon(5px 0%, calc(100% - 5px) 0%, 100% 100%, 0% 100%)); background: var(--navButtonBackColor); font-family: var(--font-thick-header); font-size: 12px; color: var(--expandTextColor); border-width: var(--_borderWidth, 2px); border-style: solid; border-color: var(--_borderColor, var(--templateBorder)); text-transform: capitalize; } .ui-dialog .charactersheet nav button.k-active-tab, .sheet-rolltemplate-alien nav button.k-active-tab { background: var(--templateBorder); color: var(--navSelectedTextColor); border-bottom: none; } .ui-dialog .charactersheet nav button:hover, .sheet-rolltemplate-alien nav button:hover { background: var(--hoverHighlightBack); color: var(--navSelectedTextColor); } .ui-dialog .charactersheet .edition-label, .sheet-rolltemplate-alien .edition-label { order: 2; color: var(--camelHeadColor); } .ui-dialog .charactersheet .generic_rolls, .sheet-rolltemplate-alien .generic_rolls { order: 3; display: flex; background: var(--genericGradient); margin-left: auto; } .ui-dialog .charactersheet .generic_rolls h1, .sheet-rolltemplate-alien .generic_rolls h1 { --_headBack: var(--active2e) linear-gradient(95deg, transparent, rgba(100, 180, 180, 50%) 20%, var(--headTopColor) 50%); --_headShape: var(--nav2eShape); --_headColor: var(--active2e) white; --_leftPad: var(--active2e) 3rem; } .ui-dialog .charactersheet .generic_rolls button, .sheet-rolltemplate-alien .generic_rolls button { padding: 0 10px; font-size: 12px; border-color: var(--hoverHighlightBack); } .ui-dialog .charactersheet .Talents .repeat_menu, .sheet-rolltemplate-alien .Talents .repeat_menu { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 10rem auto auto; grid-template-areas: "name name" "detail detail" "menu add" "menu delete"; gap: 5px; } .ui-dialog .charactersheet .Talents .repeat_menu .repcontainer, .sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer { display: flex; flex-wrap: wrap; grid-template-columns: repeat(auto-fit, minmax(50px, auto)); grid-template-rows: auto auto; gap: 5px; grid-area: menu; max-height: 20rem; overflow: auto; } .ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem, .sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem { display: grid; flex: 1 1 fit-content; align-self: center; min-width: 50px; background: none !important; } .ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem button, .sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem button { background: var(--inputBorderColor); border: 1px solid var(--expandTextColor); border-radius: 5px; line-height: 1; text-align: center; overflow: hidden; padding: 2px; white-space: nowrap; color: var(--expandTextColor); } .ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem button:hover, .sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem button:hover { text-shadow: 0 0 0.25rem white, 0 0 0.25rem var(--hoverHighlightBack), 0 0 0.5rem var(--hoverHighlightBack), 0 0 0.5rem white; } .ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem .active-control:checked + button, .sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem .active-control:checked + button { background-color: var(--expandBackColor); color: var(--expandTextColor); text-shadow: 0 0 5px var(--hoverHighlightBack); } .ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem:hover, .sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem:hover { cursor: pointer; } .ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem .itemcontrol, .sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem .itemcontrol { justify-content: space-between; } .ui-dialog .charactersheet .Talents .repeat_menu .talent_details, .sheet-rolltemplate-alien .Talents .repeat_menu .talent_details { grid-area: detail; display: flex; flex-direction: column; } .ui-dialog .charactersheet .Talents .repeat_menu .talent_details > :not(.expanded), .sheet-rolltemplate-alien .Talents .repeat_menu .talent_details > :not(.expanded) { height: 0; flex: 1 1 0; } .ui-dialog .charactersheet .Talents .repeat_menu .repcontrol-button, .sheet-rolltemplate-alien .Talents .repeat_menu .repcontrol-button { grid-area: add; } .ui-dialog .charactersheet .Talents .repeat_menu .repcontrol, .sheet-rolltemplate-alien .Talents .repeat_menu .repcontrol { grid-area: delete; display: flex; flex-direction: column-reverse; align-self: flex-start; } .ui-dialog .charactersheet .Talents .repeat_menu #talent_name, .sheet-rolltemplate-alien .Talents .repeat_menu #talent_name { grid-area: name; color: var(--textColor); text-align: center; background: none; padding: 2px 5px; border: 1px solid var(--accentTextColor); border-radius: 5px; } .ui-dialog .charactersheet .Talents .repeat_menu #talent_name:hover, .ui-dialog .charactersheet .Talents .repeat_menu #talent_name:focus, .sheet-rolltemplate-alien .Talents .repeat_menu #talent_name:hover, .sheet-rolltemplate-alien .Talents .repeat_menu #talent_name:focus { background: linear-gradient(to right, transparent, var(--hoverHighlightBack), transparent); outline: none; border-color: var(--hoverHighlightBack); } .ui-dialog .charactersheet .__underline_items ~ .repcontainer .repitem, .sheet-rolltemplate-alien .__underline_items ~ .repcontainer .repitem { border-bottom: 2px dotted var(--inputBorderColor); } .ui-dialog .charactersheet .overlay, .ui-dialog .charactersheet .border, .ui-dialog .charactersheet .sm_box, .ui-dialog .charactersheet .camelBox, .sheet-rolltemplate-alien .overlay, .sheet-rolltemplate-alien .border, .sheet-rolltemplate-alien .sm_box, .sheet-rolltemplate-alien .camelBox { padding: 1rem 1rem 15px 1rem; } .ui-dialog .charactersheet .border, .ui-dialog .charactersheet .sm_box, .ui-dialog .charactersheet .camelBox, .sheet-rolltemplate-alien .border, .sheet-rolltemplate-alien .sm_box, .sheet-rolltemplate-alien .camelBox { flex: 1; filter: drop-shadow(1px 2px 0px var(--camelBorder)); transition: all 300ms ease-in-out; } .ui-dialog .charactersheet .border::before, .ui-dialog .charactersheet .border::after, .ui-dialog .charactersheet .sm_box::before, .ui-dialog .charactersheet .sm_box::after, .ui-dialog .charactersheet .camelBox::before, .ui-dialog .charactersheet .camelBox::after, .sheet-rolltemplate-alien .border::before, .sheet-rolltemplate-alien .border::after, .sheet-rolltemplate-alien .sm_box::before, .sheet-rolltemplate-alien .sm_box::after, .sheet-rolltemplate-alien .camelBox::before, .sheet-rolltemplate-alien .camelBox::after { position: absolute; inset: 0; content: ""; background: var(--contentBackColor); z-index: -5; clip-path: polygon(20px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 20px 100%, 0% calc(100% - 15px), 0 15px); } .ui-dialog .charactersheet .border::after, .ui-dialog .charactersheet .sm_box::after, .ui-dialog .charactersheet .camelBox::after, .sheet-rolltemplate-alien .border::after, .sheet-rolltemplate-alien .sm_box::after, .sheet-rolltemplate-alien .camelBox::after { z-index: -5; background: var(--img-softblur); opacity: 0; transition: opacity 2000ms; } .ui-dialog .charactersheet .border:hover::after, .ui-dialog .charactersheet .sm_box:hover::after, .ui-dialog .charactersheet .camelBox:hover::after, .sheet-rolltemplate-alien .border:hover::after, .sheet-rolltemplate-alien .sm_box:hover::after, .sheet-rolltemplate-alien .camelBox:hover::after { opacity: 1; transition: opacity 300ms; } .ui-dialog .charactersheet .border.bottom, .ui-dialog .charactersheet .sm_box.bottom, .ui-dialog .charactersheet .camelBox.bottom, .sheet-rolltemplate-alien .border.bottom, .sheet-rolltemplate-alien .sm_box.bottom, .sheet-rolltemplate-alien .camelBox.bottom { padding: 1rem 1rem 1rem 1rem; } .ui-dialog .charactersheet .border.bottom::before, .ui-dialog .charactersheet .border.bottom::after, .ui-dialog .charactersheet .sm_box.bottom::before, .ui-dialog .charactersheet .sm_box.bottom::after, .ui-dialog .charactersheet .camelBox.bottom::before, .ui-dialog .charactersheet .camelBox.bottom::after, .sheet-rolltemplate-alien .border.bottom::before, .sheet-rolltemplate-alien .border.bottom::after, .sheet-rolltemplate-alien .sm_box.bottom::before, .sheet-rolltemplate-alien .sm_box.bottom::after, .sheet-rolltemplate-alien .camelBox.bottom::before, .sheet-rolltemplate-alien .camelBox.bottom::after { clip-path: polygon(20px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 15px); } .ui-dialog .charactersheet .border.short, .ui-dialog .charactersheet .sm_box.short, .ui-dialog .charactersheet .camelBox.short, .sheet-rolltemplate-alien .border.short, .sheet-rolltemplate-alien .sm_box.short, .sheet-rolltemplate-alien .camelBox.short { padding: 1rem 1rem 15px 1rem; } .ui-dialog .charactersheet .border.short::before, .ui-dialog .charactersheet .border.short::after, .ui-dialog .charactersheet .sm_box.short::before, .ui-dialog .charactersheet .sm_box.short::after, .ui-dialog .charactersheet .camelBox.short::before, .ui-dialog .charactersheet .camelBox.short::after, .sheet-rolltemplate-alien .border.short::before, .sheet-rolltemplate-alien .border.short::after, .sheet-rolltemplate-alien .sm_box.short::before, .sheet-rolltemplate-alien .sm_box.short::after, .sheet-rolltemplate-alien .camelBox.short::before, .sheet-rolltemplate-alien .camelBox.short::after { clip-path: polygon(20px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, calc(50% + 10px) 100%, 50% calc(100% - 10px), 10px calc(100% - 10px), 0% calc(100% - 18px), 0 15px); } .ui-dialog .charactersheet .border:not(:first-of-type)::before, .ui-dialog .charactersheet .border:not(:first-of-type)::after, .ui-dialog .charactersheet .sm_box:not(:first-of-type)::before, .ui-dialog .charactersheet .sm_box:not(:first-of-type)::after, .ui-dialog .charactersheet .camelBox:not(:first-of-type)::before, .ui-dialog .charactersheet .camelBox:not(:first-of-type)::after, .sheet-rolltemplate-alien .border:not(:first-of-type)::before, .sheet-rolltemplate-alien .border:not(:first-of-type)::after, .sheet-rolltemplate-alien .sm_box:not(:first-of-type)::before, .sheet-rolltemplate-alien .sm_box:not(:first-of-type)::after, .sheet-rolltemplate-alien .camelBox:not(:first-of-type)::before, .sheet-rolltemplate-alien .camelBox:not(:first-of-type)::after { clip-path: polygon(5px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 5px); } .ui-dialog .charactersheet .sm_box, .sheet-rolltemplate-alien .sm_box { padding: 0 1rem 1rem 1rem; } .ui-dialog .charactersheet .sm_box::before, .ui-dialog .charactersheet .sm_box::after, .sheet-rolltemplate-alien .sm_box::before, .sheet-rolltemplate-alien .sm_box::after { clip-path: polygon(5px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 5px); } .ui-dialog .charactersheet .camelBox, .sheet-rolltemplate-alien .camelBox { position: relative; justify-self: center; align-self: center; mix-blend-mode: normal; padding-bottom: 15px; padding-top: 2px; z-index: -1; filter: drop-shadow(0px -5px 0px var(--shadowColor)) drop-shadow(3px 0 0px var(--shadowColor)) drop-shadow(-3px 0 0px var(--shadowColor)); } .ui-dialog .charactersheet .camelBox:not(:first-of-type), .sheet-rolltemplate-alien .camelBox:not(:first-of-type) { margin-top: 5px; } .ui-dialog .charactersheet .camelBox h1, .ui-dialog .charactersheet .camelBox [aria-level="1"], .ui-dialog .charactersheet .camelBox h2, .ui-dialog .charactersheet .camelBox [aria-level="2"], .sheet-rolltemplate-alien .camelBox h1, .sheet-rolltemplate-alien .camelBox [aria-level="1"], .sheet-rolltemplate-alien .camelBox h2, .sheet-rolltemplate-alien .camelBox [aria-level="2"] { all: unset; position: absolute; top: 0; left: 50%; height: 20px; text-transform: uppercase; background: var(--camelHeadBack); padding: 0px 1rem; font-family: var(--font-thin-header); font-size: 12px; color: var(--camelHeadColor); transform: translate(-50%, -50%); clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%); } .ui-dialog .charactersheet .camelBox::before, .ui-dialog .charactersheet .camelBox::after, .sheet-rolltemplate-alien .camelBox::before, .sheet-rolltemplate-alien .camelBox::after { clip-path: polygon(5px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 5px); } .ui-dialog .charactersheet .camelBox input, .sheet-rolltemplate-alien .camelBox input { text-align: center; font-family: var(--font-thick-header); } .ui-dialog .charactersheet .camelBox textarea, .sheet-rolltemplate-alien .camelBox textarea { margin-top: 5px; } .ui-dialog .charactersheet .camelBox:last-of-type, .sheet-rolltemplate-alien .camelBox:last-of-type { padding: 2px 10px 5px 10px; } .ui-dialog .charactersheet label.__big, .sheet-rolltemplate-alien label.__big { position: relative; z-index: 1; margin: 5px; padding: 0; transition: all 300ms; } .ui-dialog .charactersheet label.__big::before, .sheet-rolltemplate-alien label.__big::before { position: absolute; content: ""; width: 40px; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--circleBorderColor); border-radius: 100%; border: 3px solid var(--circleBorderColor); transition: all 300ms; z-index: -1; } .ui-dialog .charactersheet label.__big::after, .sheet-rolltemplate-alien label.__big::after { position: absolute; content: ""; width: 37px; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--circleBackColor); border-radius: 100%; border: 2px solid transparent; border-top: 2px solid var(--circleBorderColor); border-bottom: 2px solid var(--circleBorderColor); transition: all 300ms; z-index: -1; } .ui-dialog .charactersheet label.__big input, .sheet-rolltemplate-alien label.__big input { background: none !important; border: none; outline: none; width: 25px; aspect-ratio: 1; text-align: center; font-family: var(--font-thick-header); font-size: 16px; color: var(--circleInputTextColor); } .ui-dialog .charactersheet label.__big:hover::before, .ui-dialog .charactersheet label.__big:focus-within::before, .sheet-rolltemplate-alien label.__big:hover::before, .sheet-rolltemplate-alien label.__big:focus-within::before { border-color: var(--hoverHighlightBack); } .ui-dialog .charactersheet label.__big:hover::after, .ui-dialog .charactersheet label.__big:focus-within::after, .sheet-rolltemplate-alien label.__big:hover::after, .sheet-rolltemplate-alien label.__big:focus-within::after { background: var(--circleBackColor); border-top: 2px solid var(--hoverHighlightBack); border-bottom: 2px solid transparent; animation: rotate 2000ms infinite linear; } @keyframes rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .ui-dialog .charactersheet .inventory .repitem .collapse, .sheet-rolltemplate-alien .inventory .repitem .collapse { top: calc(var(--gap) * -1); right: calc(var(--gap) * -1); } .ui-dialog .charactersheet textarea, .sheet-rolltemplate-alien textarea { all: unset; } .ui-dialog .charactersheet .adaptive--text, .ui-dialog .charactersheet textarea:not(.adaptive--text__textarea), .sheet-rolltemplate-alien .adaptive--text, .sheet-rolltemplate-alien textarea:not(.adaptive--text__textarea) { resize: none; box-sizing: border-box; width: 100%; height: 100%; border-radius: 5px; line-height: 1.2; font-family: var(--font-text); font-size: 1.4rem; color: var(--textColor); } .ui-dialog .charactersheet .adaptive--text:hover, .ui-dialog .charactersheet .adaptive--text:focus, .ui-dialog .charactersheet textarea:not(.adaptive--text__textarea):hover, .ui-dialog .charactersheet textarea:not(.adaptive--text__textarea):focus, .sheet-rolltemplate-alien .adaptive--text:hover, .sheet-rolltemplate-alien .adaptive--text:focus, .sheet-rolltemplate-alien textarea:not(.adaptive--text__textarea):hover, .sheet-rolltemplate-alien textarea:not(.adaptive--text__textarea):focus { box-shadow: 0 -2px 2px var(--hoverHighlightBack), inset 0 1px 2px var(--hoverHighlightBack); } @media (max-width: 450px) { .ui-dialog .charactersheet .tab, .sheet-rolltemplate-alien .tab { padding: 3rem 5px; } } .ui-dialog .charactersheet .no_control + fieldset + .repcontainer + .repcontrol, .sheet-rolltemplate-alien .no_control + fieldset + .repcontainer + .repcontrol { display: none !important; }