/* ______________________________ start of CSS selectors, patterns used to select element(s) for styling ______________________________ */ /* Import multiple Google font families; Should ALWAYS be done at the TOP of the page! */ /* No Google fonts to import. */ /* Background, font information, and overall things that affect the sheet as a whole */ .charsheet { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/ShadowbaneInquisition/images/assets/background.gif); font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: 14px; box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15), 0 -10px 0 -5px #eee, 0 -10px 1px -4px rgba(0, 0, 0, 0.15), 0 -20px 0 -10px #eee, 0 -20px 1px -9px rgba(0, 0, 0, 0.15); padding: 30px; border-radius: 25px; } /* All input elements that are of type number or type text */ .charsheet select, .charsheet input[type='number'], .charsheet input[type='text'], .charsheet button[type='action'] { background: #d5d4cd; box-shadow: inset 0px 0px 6px 1px black; font-family: inherit; text-align: center; } /* Rectifying select position* */ .sheet-select_corection { margin: 0px; } .charsheet input[type="number"] { -moz-appearance: textfield; } /* Prevent disabled inputs from consuming mouse clicks */ .charsheet input[disabled] { pointer-events: none; } /* All horizontal rule elements receive the following CSS property. */ .charsheet hr { border-top: 1px dotted black; } /* All button elements of type roll */ .charsheet button:focus { outline: none; } .charsheet button[type='roll'] { background: black; color: white; font-family: inherit; text-shadow: none; border-top-right-radius: 15px; } /* clear buttons with the clear class */ .charsheet button[type="roll"].sheet-clear::before { content: ""; display: none; } /* All button elements of type roll when hovered over: */ .charsheet button[type='roll']:hover { background: rgb(200, 0, 0) !important; } .charsheet label:hover { cursor: pointer; } /* Both header elements 2 and 3 receive the following CSS properties. */ .charsheet h2, .charsheet h3 { color: #4d4d4d; font-family: inherit; letter-spacing: 0px; text-align: center; } /* Only type-2 headers receive the following CSS properties. */ .charsheet h2 { text-decoration: underline; } /* Only type-3 headers receive the following CSS properties. */ .charsheet h3 { background: rgba(0, 0, 0, 0.25); box-shadow: 0px 2px 5px black; } /* All normal text receives the following CSS properties. */ .charsheet p { font-family: inherit; } /* All instances of the placeholder attribute across all elements */ .charsheet ::placeholder { opacity: 0.7; } /* All textarea elements (keep width for textarea to prevent stretching off of sheet) */ .charsheet textarea { background: rgba(0, 0, 0, 0.25); font-family: inherit; font-size: 14px; resize: vertical; width: calc(100% - 10px); } /* ______________________________ end of CSS selectors ______________________________ ______________________________ start of multipurpose or special-use classes such as grey border box on Core and Settings tabs ______________________________ */ .charsheet .sheet-background_radius { border: 2px solid black; border-radius: 11px; } .charsheet .sheet-full_width_49px { width: calc(100% - 49px); } .charsheet .sheet-full_width_30px { width: calc(100% - 30px); } .charsheet .sheet-margin_adjust { margin-top: -23px; margin-bottom: 4px; text-align: right; } .charsheet .sheet-margin_adjust2 { margin-top: -22px; margin-bottom: 4px; margin-left: -25px; text-align: right; } .charsheet .sheet-margin_adjust_wep { margin-top: -19px; margin-bottom: 2px; margin-left: 3px; text-align: right; } .charsheet .sheet-margin_adjust_wep2 { margin-top: -20px; margin-bottom: 2px; margin-left: -22px; text-align: right; } .charsheet .sheet-margin_adjust_wep3 { margin-top: -15px; margin-bottom: 2px; margin-left: 40px; } .charsheet .sheet-margin_adjust_wep4 { margin-top: -20px; margin-bottom: 2px; } .charsheet .sheet-radius_border_right { border-bottom-right-radius: 7px !important; } .charsheet .sheet-radius_border_right_wep { border-bottom-right-radius: 10px !important; } .charsheet .sheet-radius_border_left_wep { border-bottom-left-radius: 10px !important; } .charsheet .sheet-collapsible_entity_toggle { display: block; } .charsheet .sheet-collapsible_entity_block { display: none; } .charsheet .sheet-collapsible_entity_switch:checked~.sheet-collapsible_entity_block { display: block; } .charsheet .sheet-collapsible_entity_switch:checked~.sheet-collapsible_entity_toggle { display: none; } .charsheet .sheet-collapsible_entity_toggle_half { display: block; } .charsheet .sheet-collapsible_entity_block_half { display: none; } .charsheet .sheet-collapsible_entity_switch_half:checked~.sheet-collapsible_entity_block_half { display: block; } .charsheet .sheet-collapsible_entity_switch_half:checked~.sheet-collapsible_entity_toggle_half { display: none; } .charsheet .sheet-collapsible_entity_toggle_min { display: block; } .charsheet .sheet-collapsible_entity_block_min { display: none; } .charsheet .sheet-collapsible_entity_switch_min:checked~.sheet-collapsible_entity_block_min { display: block; } .charsheet .sheet-collapsible_entity_switch_min:checked~.sheet-collapsible_entity_toggle_min { display: none; } .charsheet .sheet-hidden { display: none; } .charsheet .sheet-input_background { background: transparent; border-color: transparent; color: white; cursor: pointer; font-size: 15px; margin-left: -7px; margin-top: -3px; text-align: center; width: 35px; } .charsheet .sheet-input_char_background { margin-top: -4px !important; margin-bottom: -2px !important; width: 50px; margin-left: -12px !important; } .charsheet .sheet-input_init_background { margin-top: -3px !important; margin-bottom: -2px !important; width: 35px; } .charsheet .sheet-box { background-image: url(https://raw.githubusercontent.com/johnmoney-code/roll20-character-sheets/Only-War-Enhanced/Only-War-Enhanced/images/assets/background.gif); border-color: black; border-style: solid; border-width: 1px; color: #4d4d4d; } .charsheet .sheet-table { font-family: inherit; } .charsheet .sheet-numerical_field { margin-right: 20px; width: 80px !important; } .charsheet .sheet-end_field { margin-right: 0px; } .charsheet .sheet-edge_padding { padding: 2px; } /* full height of containing block */ .charsheet .sheet-full_height { height: 100%; } /* 40% width of containing block */ .charsheet .sheet-40width { width: 40%; } /* half width of containing block */ .charsheet .sheet-half_width { width: 50%; } /* 90% width of containing block */ .charsheet .sheet-90width { width: 90%; } /* full width of containing block */ .charsheet .sheet-full_width { width: 100%; } .charsheet .sheet-bold_text { font-weight: bold; } .charsheet .sheet-border_none { border: none !important; } .charsheet .sheet-auto_margin { margin: auto; } .charsheet .sheet-huge_text { font-size: 36px; } .charsheet .sheet-text_centered { text-align: center; } .charsheet .sheet-ssc { font-family: inherit; } .charsheet .sheet-button_top_padding { padding-top: 5px; } .charsheet .sheet-radius_border { border-radius: 10px; } .charsheet .sheet-radius_border_top { border-top-left-radius: 10px; border-top-right-radius: 10px; } .charsheet .sheet-radius_border_bottom { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .charsheet .sheet-radius_border_heading { border-top-left-radius: 9px; border-top-right-radius: 9px; } .charsheet .sheet-radius_border_box { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .charsheet .sheet-description_rounded_margin { margin-bottom: 0px; border-radius: 0px 0px 8px 8px; } /* ______________________________ end of special-use classes ______________________________ ______________________________ start of grid structure for character information ______________________________ */ .charsheet .sheet-gs1 { grid-area: ah1; margin-top: 5px; font-size: 15px; padding-left: 2px; } .charsheet .sheet-gs2 { grid-area: ah2; margin-top: 5px; font-size: 15px; } .charsheet .sheet-gs3 { grid-area: ah3; margin-top: 5px; font-size: 15px; } .charsheet .sheet-gs4 { grid-area: ah4; margin-top: 5px; font-size: 15px; } .charsheet .sheet-gs5 { grid-area: ah5; margin-top: 5px; font-size: 15px; } .charsheet .sheet-gs6 { grid-area: ah6; margin-top: 5px; font-size: 15px; } .charsheet .sheet-gs7 { grid-area: ah7; width: calc(100% + 20px); margin-left: -20px; text-align: right !important; } .charsheet .sheet-gs8 { grid-area: ah8; width: calc(100% + 20px); margin-left: -20px; text-align: right !important; } .charsheet .sheet-gs9 { grid-area: ah9; width: calc(100% + 20px); margin-left: -20px; text-align: right !important; } .charsheet .sheet-gs10 { grid-area: ah10; width: calc(100% + 20px); margin-left: -20px; text-align: right !important; } .charsheet .sheet-gs11 { grid-area: ah11; width: calc(100% + 20px); margin-left: -20px; text-align: right !important; } .charsheet .sheet-gs12 { grid-area: ah12; width: calc(100% + 20px); margin-left: -20px; text-align: right !important; } .charsheet .sheet-gs13 { grid-area: ah13; margin: 0px 5px; } .charsheet .sheet-gs14 { grid-area: ah14; width: calc(100% + 20px); text-align: left !important; } .charsheet .sheet-gs15 { grid-area: ah15; width: calc(100% + 20px); text-align: left !important; } .charsheet .sheet-gs16 { grid-area: ah16; width: calc(100% - 125px); text-align: left !important; } .charsheet .sheet-gs17 { grid-area: ah17; width: calc(100% + 20px); text-align: left !important; } .charsheet .sheet-gs18 { grid-area: ah18; width: calc(100% + 20px); text-align: left !important; } .charsheet .sheet-gs19 { grid-area: ah19; width: calc(100% + 20px); text-align: left !important; } .charsheet .sheet-gs20 { grid-area: ah20; margin-top: 5px; font-size: 15px; text-align: right } .charsheet .sheet-gs21 { grid-area: ah21; margin-top: 5px; font-size: 15px; text-align: right } .charsheet .sheet-gs22 { grid-area: ah22; margin-top: 5px; font-size: 15px; text-align: right } .charsheet .sheet-gs23 { grid-area: ah23; margin-top: 5px; font-size: 15px; text-align: right } .charsheet .sheet-gs24 { grid-area: ah24; margin-top: 5px; font-size: 15px; text-align: right } .charsheet .sheet-header_logo { font-family: inherit; letter-spacing: 0px; display: grid; grid-template-columns: 145px auto 123px auto 145px; grid-template-rows: 28px 28px 28px 28px 28px 28px; grid-template-areas: 'ah1 ah7 ah13 ah14 ah20' 'ah2 ah8 ah13 ah15 ah21' 'ah3 ah9 ah13 ah16 ah16' 'ah4 ah10 ah13 ah17 ah22' 'ah5 ah11 ah13 ah18 ah23' 'ah6 ah12 ah13 ah19 ah24'; } /* ______________________________ end of grid structure for character information ______________________________ ______________________________ start of structure for characteristics ______________________________ */ .charsheet .sheet-characteristics_background { /* background: black; */ box-shadow: inset 0px 0px 20px 5px black; padding: 3px 0px 6px 3px; } .charsheet .sheet-characteristics_main { display: grid; grid-column-gap: 0.5%; grid-template-columns: 9.5% 9.5% 9.5% 9.5% 9.5% 9.5% 9.5% 9.5% 9.5% 9.5%; grid-template-rows: 26px 40px 26px; } .charsheet .sheet-characteristics_mods { display: grid; grid-column-gap: 0.5%; grid-template-columns: 9.5% 9.5% 9.5% 9.5% 9.5% 9.5% 9.5% 9.5% 9.5% 9.5%; grid-template-rows: 26px; } .charsheet .sheet-char_more { display: block; text-align: center; } .charsheet .sheet-characteristics_button { margin-left: -0.1% !important; width: calc(100% - 8px); } .charsheet .sheet-characteristics_input { font-size: 30px; } /* ______________________________ end of structure for characteristics ______________________________ _____________ start of grid structure for unnatural characteristics, size dropdown, movement, and carryweight ______________________________ */ .charsheet .sheet-unnat_centering { grid-area: e1; /*margin-left: 50px;*/ } .charsheet .sheet-unnat_centering_container { display: grid; justify-items: center; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: '. e1 .'; } .charsheet .sheet-unnatgs_width { width: 40px; } .charsheet .sheet-unnatgs1 { grid-area: amy1; font-size: 15px; font-family: inherit; letter-spacing: 0px; text-align: center; } .charsheet .sheet-unnatgs2 { grid-area: amy2; } .charsheet .sheet-unnatgs3 { grid-area: amy3; } .charsheet .sheet-unnatgs4 { grid-area: amy4; } .charsheet .sheet-unnatgs5 { grid-area: amy5; } .charsheet .sheet-unnatgs6 { grid-area: amy6; } .charsheet .sheet-unnatgs7 { grid-area: amy7; } .charsheet .sheet-unnatgs8 { grid-area: amy8; } .charsheet .sheet-unnatgs9 { grid-area: amy9; } .charsheet .sheet-unnatgs10 { grid-area: amy10; } .charsheet .sheet-unnatgs11 { grid-area: amy11; } .charsheet .sheet-unnatgs12, .charsheet .sheet-unnatgs13, .charsheet .sheet-unnatgs14, .charsheet .sheet-unnatgs15, .charsheet .sheet-unnatgs16, .charsheet .sheet-unnatgs17, .charsheet .sheet-unnatgs18, .charsheet .sheet-unnatgs19, .charsheet .sheet-unnatgs20, .charsheet .sheet-unnatgs21 { font-size: 14px; } .charsheet .sheet-unnatgs12 { grid-area: amy12; } .charsheet .sheet-unnatgs13 { grid-area: amy13; } .charsheet .sheet-unnatgs14 { grid-area: amy14; } .charsheet .sheet-unnatgs15 { grid-area: amy15; } .charsheet .sheet-unnatgs16 { grid-area: amy16; } .charsheet .sheet-unnatgs17 { grid-area: amy17; } .charsheet .sheet-unnatgs18 { grid-area: amy18; } .charsheet .sheet-unnatgs19 { grid-area: amy19; } .charsheet .sheet-unnatgs20 { grid-area: amy20; } .charsheet .sheet-unnatgs21 { grid-area: amy21; } .charsheet .sheet-characteristics_unnat { display: grid; justify-items: center; grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px; grid-template-areas: 'amy1 amy1 amy1 amy1 amy1 amy1 amy1 amy1 amy1 amy1 ' 'amy2 amy3 amy4 amy5 amy6 amy7 amy8 amy9 amy10 amy11' 'amy12 amy13 amy14 amy15 amy16 amy17 amy18 amy19 amy20 amy21'; } .charsheet .sheet-characteristics_size_movement_carry { display: grid; grid-template-columns: 10% 80% 10%; } .charsheet .sheet-sizegs1 { grid-area: ams1; font-size: 15px; font-family: inherit; letter-spacing: 0px; } .charsheet .sheet-sizegs2 { grid-area: ams2; } .charsheet .sheet-characteristics2_size { position: relative; left: 20px; justify-content: center; text-align: center; display: grid; justify-items: center; grid-template-columns: 120px; grid-template-areas: 'ams1' 'ams2'; } .charsheet .sheet-movementgs1 { grid-area: amm1; font-size: 15px; font-family: inherit; letter-spacing: 0px; } .charsheet .sheet-movementgs2 { grid-area: amm2; } .charsheet .sheet-movementgs3 { grid-area: amm3; } .charsheet .sheet-movementgs4 { grid-area: amm4; } .charsheet .sheet-movementgs5 { grid-area: amm5; } .charsheet .sheet-movementgs0 { grid-area: amm0; } .charsheet .sheet-movementgs6 { grid-area: amm6; font-size: 14px; font-family: inherit; } .charsheet .sheet-movementgs7 { grid-area: amm7; font-size: 14px; font-family: inherit; } .charsheet .sheet-movementgs8 { grid-area: amm8; font-size: 14px; font-family: inherit; } .charsheet .sheet-movementgs9 { grid-area: amm9; font-size: 14px; font-family: inherit; } .charsheet .sheet-movementgs10 { grid-area: amm10; font-size: 14px; font-family: inherit; } .charsheet .sheet-characteristics2_movement { justify-content: center; text-align: center; display: grid; justify-items: center; grid-template-columns: 50px 50px 50px 50px 50px; grid-template-areas: 'amm1 amm1 amm1 amm1 amm1' 'amm2 amm3 amm4 amm5 amm0' 'amm6 amm7 amm8 amm9 amm10'; } .charsheet .sheet-carrygs1 { grid-area: ac1; font-size: 15px; font-family: inherit; letter-spacing: 0px; } .charsheet .sheet-carrygs2 { grid-area: ac2; width: 50px; } .charsheet .sheet-carrygs3 { grid-area: ac3; width: 50px; } .charsheet .sheet-carrygs4 { grid-area: ac4; width: 50px; } .charsheet .sheet-carrygs5 { grid-area: ac5; font-size: 14px; font-family: inherit; } .charsheet .sheet-carrygs6 { grid-area: ac6; font-size: 14px; font-family: inherit; } .charsheet .sheet-carrygs7 { grid-area: ac7; font-size: 14px; font-family: inherit; } .charsheet .sheet-characteristics2_carry { justify-content: right; text-align: center; display: grid; justify-items: center; grid-template-columns: 60px 60px 60px; grid-template-areas: 'ac1 ac1 ac1' 'ac2 ac3 ac4' 'ac5 ac6 ac7'; } /* ______________________________ end of grid structure for unnatural characteristics, movement, and carrying ______________________________ ______________________________ start of grid structure for initiative and sheet tabs ______________________________ */ .charsheet .sheet-tabs_main { display: grid; grid-template-columns: 60% 40%; } .charsheet .sheet-initiative_container { display: grid; grid-template-columns: 110px 90px 18px 50px 18px 90px 95px; } .charsheet .sheet-arc_container { display: grid; grid-template-columns: 100px 100px 100px; } .charsheet .sheet-arc_color { width: 100px; } .charsheet .sheet-init_field { height: 100%; margin-right: -60px; width: 85px; } .charsheet .sheet-init_plus { font-size: 24px; font-weight: bold; padding-top: 12px; } .charsheet .sheet-sheet_tabs { justify-content: right; margin-right: 30px; display: grid; grid-template-columns: 45px 80px 105px 60px 60px 65px 45px 10px; } .charsheet .sheet-sheet_tabs>button { box-shadow: inset 0px 0px 20px 10px black; text-shadow: -1px -1px 5px black, 1px 1px 5px black; border-top-left-radius: 15px; border-top-right-radius: 15px; margin-bottom: 5px; min-height: 28px; color: white; } /* ______________________________ end of grid structure for initiative and sheet tabs ______________________________ ______________________________ start of tab buttons toggles ______________________________ */ .charsheet .sheet-tab_core, .charsheet .sheet-tab_equipment, .charsheet .sheet-tab_advancements, .charsheet .sheet-tab_journal, .charsheet .sheet-tab_vehicle, .charsheet .sheet-tab_psykana, .charsheet .sheet-tab_settings { display: none; box-shadow: /* The top layer shadow */ 0 -1px 1px rgba(0, 0, 0, 0.7), /* The second layer */ 0 -10px 0 -5px #eee, /* The second layer shadow */ 0 -10px 1px -4px rgba(0, 0, 0, 0.7), /* The third layer */ 0 -20px 0 -10px #eee, /* The third layer shadow */ 0 -20px 1px -9px rgba(0, 0, 0, 0.7); /* Padding for demo purposes */ padding: 30px; border-radius: 25px; } /* show the selected tab */ .charsheet .sheet-tabstoggle[value='core']~div.sheet-tab_core, .charsheet .sheet-tabstoggle[value='equipment']~div.sheet-tab_equipment, .charsheet .sheet-tabstoggle[value='advancements']~div.sheet-tab_advancements, .charsheet .sheet-tabstoggle[value='journal']~div.sheet-tab_journal, .charsheet .sheet-tabstoggle[value='vehicle']~div.sheet-tab_vehicle, .charsheet .sheet-tabstoggle[value='psykana']~div.sheet-tab_psykana, .charsheet .sheet-tabstoggle[value='settings']~div.sheet-tab_settings { display: block } .charsheet .sheet-core_button:checked+button { color: #4d4d4d; box-shadow: inset 0px 0px 6px 1px black; text-shadow: none; vertical-align: center; margin-top: -5px; margin-bottom: 0px; } /* ______________________________ end of tab buttons toggles ______________________________ ______________________________ start of minimisable infographic ______________________________ */ .charsheet .sheet-select_text { box-shadow: inset 0px 0px 10px 5px black; border: 1px solid white; border-radius: 4px; padding: 4px 5px 4px 5px; } .charsheet .sheet-select_button:checked~.sheet-select_text { text-shadow: -1px -1px 5px white, 1px 1px 5px white; box-shadow: inset 0px 0px 5px 1px black; } .charsheet .sheet-minimisable_infographic_main { margin-left: 5px; } .charsheet .sheet-minimisable_infographic_override { margin-top: -4px !important; height: 20px; font-weight: bold; } .charsheet .sheet-minimisable_infographic_toggles { /* This is the spacing of the whisper buttons, scatter button, etc */ display: grid; grid-column-gap: 10px; grid-template-columns: 100px 65px 100px 70px 100px 80px 80px 150px auto; } .charsheet .sheet-minimisable_infographic_grid { font-weight: bold; display: grid; grid-template-columns: 150px 150px 103px 215px auto; grid-template-rows: 80px; grid-template-areas: 'm1 m2 m3 m4 m5' 'm6 m6 . . m5'; } .charsheet .sheet-minimisable_infographic>h3 { text-align: left; padding-left: 40px; } .charsheet .sheet-minimisable_infographic { grid-area: m5; margin-right: 10px; } .charsheet .sheet-minimisable_infographic_g1 { grid-area: mi1; background: #52682d38 !important; box-shadow: inset 0px 0px 10px black; border: 0px solid transparent; font-family: inherit !important; letter-spacing: 0px; justify-self: center; width: calc(100% - 6px); } .charsheet .sheet-minimisable_infographic_g2 { grid-area: mi2; justify-self: right; margin-top: 3px; margin-right: 3px; } .charsheet .sheet-minimisable_infographic_g3 { grid-area: mi3; border-right: 1px solid #52682d38; } .charsheet .sheet-minimisable_infographic_g4 { grid-area: mi4; justify-self: right; margin-top: 3px; margin-right: 3px; } .charsheet .sheet-minimisable_infographic_g5 { grid-area: mi5; border-right: 1px solid #52682d38; border-bottom: 1px solid #52682d38; border-bottom-right-radius: 10px; } .charsheet .sheet-minimisable_infographic_field2x3 { height: fit-content; background: rgba(0, 0, 0, 0.25); margin-right: 10px; display: grid; grid-template-columns: 53px 40px; grid-template-rows: 25px 25px 25px; grid-template-areas: 'mi1 mi1' 'mi2 mi3' 'mi4 mi5'; } .charsheet .sheet-minimisable_infographic_g6 { grid-area: mi6; font-family: inherit; justify-self: right; margin-top: 3px; margin-right: 3px; } .charsheet .sheet-minimisable_infographic_g7 { grid-area: mi7; } .charsheet .sheet-minimisable_infographic_field4x3a { height: fit-content; background: rgba(0, 0, 0, 0.25); margin-right: 10px; display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: 25px 25px 25px; grid-template-areas: 'mi1 mi1 mi1 mi1' 'mi6 mi7 mi2 mi3' 'mi4 mi4 mi4 mi5'; } .charsheet .sheet-minimisable_infographic_field4x4 { height: fit-content; background: rgba(0, 0, 0, 0.25); margin-right: 10px; display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: 25px 25px 25px; grid-template-areas: 'mi1 mi1 mi1 mi1' 'mi8 mi8 mi8 mi9' 'mi2 mi3 mi4 mi5'; } .charsheet .sheet-minimisable_critical_g0 { grid-area: mc0; background: #52682d38 !important; box-shadow: inset 0px 0px 10px black; border: 0px solid transparent; font-family: inherit !important; letter-spacing: 0px; justify-self: center; width: calc(100% - 6px); } .charsheet .sheet-minimisable_critical_g12 { grid-area: mc12; border-right: 1px solid #52682d38; border-bottom: 1px solid #52682d38; border-bottom-right-radius: 10px; } .charsheet .sheet-minimisable_infographic_field4x3c { grid-area: m6; height: fit-content; background: rgba(0, 0, 0, 0.25); margin-right: 10px; display: grid; /*grid-template-columns: 50px 40px 45px 40px;*/ grid-template-rows: 25px 25px 25px 25px; grid-template-areas: 'mc0 mc0 mc0 mc0' 'mi6 mi7 mi2 mi3' 'mi4 mi4 mi4 mi5' 'mi8 mi8 mi8 mc12'; } .charsheet .sheet-minimisable_infographic_g8 { grid-area: mi8; font-family: inherit; justify-self: right; margin-top: 3px; margin-right: 3px; } .charsheet .sheet-minimisable_infographic_g9 { grid-area: mi9; border-bottom: 1px solid #52682d38; } .charsheet .sheet-minimisable_infographic_field4x3b { height: fit-content; background: rgba(0, 0, 0, 0.25); margin-right: 10px; display: grid; grid-template-columns: 60px 40px 65px 40px; grid-template-rows: 25px 25px 25px; grid-template-areas: 'mi1 mi1 mi1 mi1' 'mi2 mi3 mi3 mi3' 'mi8 mi9 mi4 mi5'; } /* ______________________________ end of minimisable infographic ______________________________ ______________________________ start of core tab ______________________________ */ .charsheet .sheet-core_lists1 { grid-area: cl1; margin-right: 10px; } .charsheet .sheet-core_lists2 { grid-area: cl2; margin-bottom: 5px; } .charsheet .sheet-core_lists3 { grid-area: cl3; margin-top: 5px; margin-bottom: 5px; } .charsheet .sheet-core_lists4 { grid-area: cl4; margin-top: 5px; margin-bottom: 5px; } .charsheet .sheet-core_lists5 { grid-area: cl5; margin-top: 5px; margin-bottom: 5px; } .charsheet .sheet-core_lists6 { grid-area: cl6; margin-top: 5px; } .charsheet .sheet-core_lists { display: grid; grid-template-columns: minmax(400px, 50%) auto; grid-template-areas: 'cl1 cl2' 'cl1 cl3' 'cl1 cl4' 'cl1 cl5' 'cl1 cl6'; } .charsheet .sheet-skills_item { margin: 7px 5px; } .charsheet .sheet-skills_text { margin: 4px 0px; } .charsheet .sheet-skills_diff { margin-left: 8px; } .charsheet .sheet-text_left { text-align: left !important; } /* Lores, linguistics, trade, etc have the same processing as a normal skill check */ .charsheet .sheet-skill_header, .charsheet .sheet-education_header { border-bottom: 2px solid darkgrey; margin-top: 7px; display: grid; grid-template-columns: auto 55px 53px 15px 29px 29px 29px 30px; grid-template-rows: 23px; } .charsheet .sheet-skill_grid, .charsheet .sheet-education_grid { border-bottom: 2px solid darkgrey; padding-top: 1.5px; padding-bottom: 1.5px; display: grid; grid-template-columns: auto 64px 50px 26px 26px 26px 26px 35px; grid-template-rows: 27px; } .charsheet .sheet-abilities_checkbox_pointer { margin-top: -21px; margin-right: 9px; text-align: right; } .charsheet .sheet-traits_checkbox_pointer { margin-top: -21px; margin-right: 9px; text-align: right; } /* ______________________________ end of core tab ______________________________ ______________________________ start of equipment tab ______________________________ */ .charsheet .sheet-equipment_divider { display: grid; grid-template-columns: 49.5% 1% 49.5%; grid-template-areas: 'e1 e0 e2' 'e3 e3 e3'; } .charsheet .sheet-equipment_ranged_weapons { grid-area: e1; /*background:rgba(0,0,0,0.25);*/ border-radius: 10px; padding: 2px; } .charsheet .sheet-equipment_melee_weapons { grid-area: e2; /*background:rgba(0,0,0,0.25);*/ border-radius: 10px; padding: 2px; } .charsheet .sheet-equipment_numerics { grid-area: e3; margin-top: 10px; } .charsheet .sheet-equipment_ranged_weapons_rep, .charsheet .sheet-equipment_melee_weapons_rep { /*background:#6E8B3D50; */ /* border:1px solid white; */ box-shadow: 0px 2px 5px black; border-radius: 10px; padding: 2px; } .charsheet .sheet-equipment_weapon_rep_head { /* h1-5, minimize, name, HIT, DMG */ display: grid; grid-template-columns: 70px auto 75px 65px; grid-template-areas: 'wh1 wh2 wh3 wh4'; border-top-left-radius: 10px; border-top-right-radius: 10px; background: rgba(0, 0, 0, 0.25); box-shadow: 0px 2px 5px black; margin-top: 10px; } .charsheet .sheet-equipment_weapon_rep_h1 { grid-area: wh1; align-items: center; grid-template-columns: 20px 20px 20px; grid-template-areas: 'wb1 wb2 wb3'; display: grid; } .charsheet .sheet-equipment_weapon_rep_h2 { grid-area: wh2; text-align: left; background: transparent; box-shadow: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .charsheet .sheet-equipment_weapon_rep_h3 { grid-area: wh3; width: 60px !important; } .charsheet .sheet-equipment_weapon_rep_h3_psy { grid-area: wh3; width: 70px !important; } .charsheet .sheet-equipment_weapon_rep_h4 { grid-area: wh4; width: 50px !important; } .charsheet .sheet-wb1 { grid-area: wb1; margin-bottom: 0px; font-size: 0.8em; } .charsheet .sheet-wb2 { grid-area: wb2; margin-bottom: 0px; font-size: 0.8em; } .charsheet .sheet-wb3 { grid-area: wb3; margin-bottom: 0px; font-size: 0.8em; } .charsheet .sheet-equipment_ranged_weapons_gs01 { grid-area: rw01; border-top-left-radius: 15px; } .charsheet .sheet-equipment_ranged_weapons_gs02 { grid-area: rw02; border-top-left-radius: 15px; } .charsheet .sheet-equipment_ranged_weapons_gs03 { grid-area: rw03; border-top-left-radius: 15px; } .charsheet .sheet-equipment_ranged_weapons_gs04 { grid-area: rw04; border-top-left-radius: 15px; } /*.charsheet .sheet-equipment_ranged_weapons_gs05 {} .charsheet .sheet-equipment_ranged_weapons_gs05 {} */ .charsheet .sheet-equipment_ranged_weapons_gs1 { grid-area: rw1; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs2 { grid-area: rw2; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs3 { grid-area: rw3; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs4 { grid-area: rw4; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs5 { grid-area: rw5; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs6 { grid-area: rw6; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs7 { grid-area: rw7; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs8 { grid-area: rw8; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs9 { grid-area: rw9; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs10 { grid-area: rw10; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs11 { grid-area: rw11; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs12 { grid-area: rw12; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs06 { grid-area: rw05; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs07 { grid-area: rw06; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs08 { grid-area: rw07; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs09 { grid-area: rw08; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs010 { grid-area: rw09; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs011 { grid-area: rw010; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs012 { grid-area: rw011; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs013 { grid-area: rw012; } .charsheet .sheet-equipment_ranged_weapons_gs13 { grid-area: rw13; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs14 { grid-area: rw14; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs15 { grid-area: rw15; font-size: 30px; margin-top: -27px; text-align: center; height: 15px; } .charsheet .sheet-equipment_ranged_weapons_gs16 { grid-area: rw16; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs17 { grid-area: rw17; font-size: 30px; margin-top: -27px; text-align: center; height: 15px; } .charsheet .sheet-equipment_ranged_weapons_gs18 { grid-area: rw18; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs19 { grid-area: rw19; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs20 { grid-area: rw20; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs21 { grid-area: rw21; font-size: 30px; margin-top: -27px; text-align: center; height: 15px; } .charsheet .sheet-equipment_ranged_weapons_gs22 { grid-area: rw22; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs23 { grid-area: rw23; font-size: 12px; width: 60px !important; } .charsheet .sheet-equipment_ranged_weapons_gs24 { grid-area: rw24; font-size: 12px; width: 50px !important; } .charsheet .sheet-equipment_ranged_weapons_gs25 { grid-area: rw25; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs26 { grid-area: rw26; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs27 { grid-area: rw27; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs28 { grid-area: rw28; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs29 { grid-area: rw29; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs30 { grid-area: rw30; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs31 { grid-area: rw31; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs32 { grid-area: rw32; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs33 { grid-area: rw33; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs34 { grid-area: rw34; font-size: 12px; } .charsheet .sheet-equipment_ranged_weapons_gs35 { grid-area: rw35; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs36 { grid-area: rw36; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs37 { grid-area: rw37; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_gs38 { grid-area: rw38; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_ranged_weapons_grid0 { /* gs01-05, roll modifiers, hit, DMG */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto; grid-template-areas: 'rw01 rw02 rw03 rw04 rw05 rw06'; } .charsheet .sheet-equipment_ranged_weapons_grid1 { /* gs1-4, Name, Class */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto; grid-template-areas: 'rw1 rw2 rw2 rw2 rw2 rw2 rw3 rw4 rw4 rw4'; } .charsheet .sheet-equipment_ranged_weapons_grid2 { /* gs5-12, Range, Dmg, Pen, Type */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto; grid-template-areas: 'rw5 rw6 rw7 rw8 rw8 rw9 rw10 rw11 rw12 rw12'; } .charsheet .sheet-equipment_ranged_weapons_grid2a { /* gs06-013, primitive, proven, vengeful */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto; grid-template-areas: 'rw05 rw06 rw07 rw08 rw09 rw010 rw011 rw012 . .'; } .charsheet .sheet-equipment_ranged_weapons_grid3 { /* gs13-22 RoF, Magazine */ align-items: center; display: grid; grid-template-columns: auto 10% 4% 10% 4% 10% 6% auto 13% 4% 13%; grid-template-areas: 'rw13 rw14 rw15 rw16 rw17 rw18 . rw19 rw20 rw21 rw22'; } .charsheet .sheet-equipment_ranged_weapons_grid4 { /* gs25-32 Trained?, HitMod, Reload, Weight */ align-items: center; display: grid; grid-template-columns: auto 20px auto auto auto auto auto auto auto; /* 9 columns, nonstandard */ grid-template-areas: 'rw25 rw26 rw27 rw28 rw29 rw30 rw30 rw31 rw32'; } .charsheet .sheet-equipment_ranged_weapons_grid5 { /* gs33-38 Domain, Mishap chance, Spray */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto 20px; grid-template-areas: 'rw33 rw34 rw34 rw35 rw35 rw36 rw36 rw36 rw37 rw38'; } .charsheet .sheet-equipment_melee_weapons_gs01 { grid-area: mw01; border-top-left-radius: 15px; } .charsheet .sheet-equipment_melee_weapons_gs02 { grid-area: mw02; border-top-left-radius: 15px; } .charsheet .sheet-equipment_melee_weapons_gs03 { grid-area: mw03; border-top-left-radius: 15px; } .charsheet .sheet-equipment_melee_weapons_gs04 { grid-area: mw04; width: 60px !important; } .charsheet .sheet-equipment_melee_weapons_gs05 { grid-area: mw05; width: 50px !important; } .charsheet .sheet-equipment_melee_weapons_gs1 { grid-area: mw1; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs2 { grid-area: mw2; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs3 { grid-area: mw3; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs4 { grid-area: mw4; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs5 { grid-area: mw5; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs6 { grid-area: mw6; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs7 { grid-area: mw7; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs8 { grid-area: mw8; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs9 { grid-area: mw9; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs10 { grid-area: mw10; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs11 { grid-area: mw11; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs12 { grid-area: mw12; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs06 { grid-area: mw05; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs07 { grid-area: mw06; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs08 { grid-area: mw07; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs09 { grid-area: mw08; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs010 { grid-area: mw09; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs011 { grid-area: mw010; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs012 { grid-area: mw011; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs013 { grid-area: mw012; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs13 { grid-area: mw13; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs14 { grid-area: mw14; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs15 { grid-area: mw15; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs16 { grid-area: mw16; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs17 { grid-area: mw17; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-equipment_melee_weapons_gs18 { grid-area: mw18; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs19 { grid-area: mw19; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_gs20 { grid-area: mw20; font-size: 12px; } .charsheet .sheet-equipment_melee_weapons_grid0 { /* gs01-05 aim, type, multi, hit, dmg */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto; grid-template-areas: 'mw01 mw02 mw03 . mw04 mw05'; } .charsheet .sheet-equipment_melee_weapons_grid1 { /* gs1-4 name, class */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto; grid-template-areas: 'mw1 mw2 mw2 mw2 mw2 mw2 mw2 mw3 mw4 mw4'; } .charsheet .sheet-equipment_melee_weapons_grid2 { /* gs5-12 reach, damage, pen, type */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto; grid-template-areas: 'mw5 mw6 mw7 mw8 mw8 mw9 mw10 mw11 mw12 mw12'; } .charsheet .sheet-equipment_melee_weapons_grid2a { /* gs06-013, primitive, proven, vengeful */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto; grid-template-areas: 'mw05 mw06 mw07 mw08 mw09 mw010 . . . .'; } .charsheet .sheet-equipment_melee_weapons_grid3 { /* gs13-20 trained?, hitmod, weight, domain */ align-items: center; display: grid; grid-template-columns: auto 20px auto auto auto auto auto auto 50px 80px; grid-template-areas: 'mw13 mw14 mw15 mw16 mw16 mw17 mw18 mw18 mw19 mw20'; } .charsheet .repcontainer[data-groupname=repeating_gear] .repitem .sheet-equipment_gear { display: none; } .charsheet .sheet-sortInventory[value=all]~.repcontainer[data-groupname=repeating_gear] .repitem .sheet-equipment_gear { display: grid; } .charsheet .sheet-sortInventory[value=weapon]~.repcontainer[data-groupname=repeating_gear] .repitem input[value=weapon]~.sheet-equipment_gear { display: grid; } .charsheet .sheet-sortInventory[value=armour]~.repcontainer[data-groupname=repeating_gear] .repitem input[value=armour]~.sheet-equipment_gear { display: grid; } .charsheet .sheet-sortInventory[value=gear]~.repcontainer[data-groupname=repeating_gear] .repitem input[value=gear]~.sheet-equipment_gear { display: grid; } .charsheet .sheet-sortInventory[value=tool]~.repcontainer[data-groupname=repeating_gear] .repitem input[value=tool]~.sheet-equipment_gear { display: grid; } .charsheet .sheet-sortInventory[value=consumables]~.repcontainer[data-groupname=repeating_gear] .repitem input[value=consumables]~.sheet-equipment_gear { display: grid; } .charsheet .sheet-sortInventory[value=ammo]~.repcontainer[data-groupname=repeating_gear] .repitem input[value=ammo]~.sheet-equipment_gear { display: grid; } .charsheet .sheet-sortInventory[value=cybernetic]~.repcontainer[data-groupname=repeating_gear] .repitem input[value=cybernetic]~.sheet-equipment_gear { display: grid; } .charsheet .sheet-sortInventory[value=other]~.repcontainer[data-groupname=repeating_gear] .repitem input[value=other]~.sheet-equipment_gear { display: grid; } .charsheet .sheet-equipment_gear_gs0 { grid-area: eg0; width: 100%; text-align: center; align-self: center; } .charsheet .sheet-equipment_gear_gs1 { grid-area: eg1; width: 100%; text-align: center; align-self: center; } .charsheet .sheet-equipment_gear_gs2 { grid-area: eg2; width: 100%; text-align: center; align-self: center; } .charsheet .sheet-equipment_gear_gs3 { grid-area: eg3; width: 100%; text-align: center; align-self: center; } .charsheet .sheet-equipment_gear_gs4 { grid-area: eg4; width: 100%; text-align: center; align-self: center; } .charsheet .sheet-equipment_gear_gs5 { grid-area: eg5; width: 100%; text-align: center; align-self: center; } .charsheet .sheet-equipment_gear_gs6 { grid-area: eg6; width: 100%; text-align: center; align-self: center; } .charsheet .sheet-equipment_gear_gs7 { grid-area: eg7; margin-top: 5px !important; } .charsheet .sheet-equipment_gear { display: grid; grid-template-columns: 50px auto 100px 60px 100px 80px 60px 25px; grid-template-areas: 'eg0 eg1 eg2 eg3 eg4 eg5 eg6 eg7'; } .charsheet .sheet-equipment_header { background: rgba(0, 0, 0, 0.25); box-shadow: 0px 5px 9px black; border: 2px solid #6e8b3d38; border-bottom: none; border-radius: 10px 10px 0px 0px; font-family: inherit; font-size: 14px; height: 30px; letter-spacing: 0px; } .charsheet .sheet-equipment_titles { font-size: 14px; text-align: center; height: 20px; } .charsheet .sheet-equipment_armor_gs1 { background: rgba(0, 0, 0, 0.25); padding: 2px; } .charsheet .sheet-equipment_armor_gs2 { /*background: rgba(0,0,0,0.25);*/ padding: 2px; } .charsheet .sheet-equipment_armor_grid { display: grid; grid-gap: 10px; grid-template-columns: 300px auto; } .charsheet .sheet-armor_border { border: 1px solid #FFFFFF; border-radius: 5px 5px 5px 5px; padding: 3px; } .charsheet .sheet-equipment_armor_input { text-align: center; font-size: 14pt; margin: auto auto auto auto; width: 60px; display: inline-block; } .charsheet .sheet-armor_display_gs0 { grid-area: ad0; } .charsheet .sheet-armor_display_gs1 { grid-area: ad1; } .charsheet .sheet-armor_display_gs2 { grid-area: ad2; } .charsheet .sheet-armor_display_gs3 { grid-area: ad3; } .charsheet .sheet-armor_display_gs4 { grid-area: ad4; } .charsheet .sheet-armor_display_grid1 { display: grid; justify-items: center; align-content: space-around; grid-template-columns: 1fr 1fr 1fr; column-gap: 10px; row-gap: 15px; grid-template-areas: '. ad1 ad0' 'ad2 ad3 ad4'; } .charsheet .sheet-armor_display_gs5 { grid-area: ad5; } .charsheet .sheet-armor_display_gs6 { grid-area: ad6; } .charsheet .sheet-armor_display_grid2 { display: grid; justify-items: center; grid-template-columns: 1fr 2fr 2fr 1fr; column-gap: 15px; grid-template-areas: '. ad5 ad6 .'; } .charsheet .sheet-equipment_cybernetics_grid { margin: 0px 50.5px 0.6px 0px; position: relative; z-index: 0; display: grid; grid-template-columns: auto 100px 40px; } /* ______________________________ end of equipment tab ______________________________ ______________________________ start of advancements tab ______________________________ */ .charsheet .sheet-aptitudes_grid { box-shadow: 0px 5px 9px black; justify-content: center; display: grid; grid-template-columns: auto auto auto; grid-template-areas: 'ap1 ap2 ap3'; } .charsheet .sheet-advancements_grid_gs1 { grid-area: e1; align-self: center; text-align: center; width: 100%; } .charsheet .sheet-advancements_grid_gs2 { grid-area: e2; align-self: center; text-align: center; width: 100% !important; } .charsheet .sheet-advancements_grid_gs3 { grid-area: e3; align-self: center; text-align: center; width: 100% !important; } .charsheet .sheet-advancements_grid_gs4 { grid-area: e4; align-self: center; text-align: center; width: 100%; } .charsheet .sheet-advancements_grid_gs5 { grid-area: e5; align-self: center; text-align: center; width: 100% !important; } .charsheet .sheet-advancements_grid_gs6 { grid-area: e6; align-self: center; text-align: center; width: 100% !important; } .charsheet .sheet-advancements_grid_gs7 { grid-area: e7; align-self: center; text-align: center; width: 100%; margin: 1px 0px 0px 1px; } .charsheet .sheet-advancements_grid { justify-content: center; display: grid; grid-template-columns: 29% 9% 9% 1% 29% 9% 9% 4%; grid-template-areas: 'e1 e2 e3 e0 e4 e5 e6 e7'; } .charsheet .repcontainer { box-shadow: 0px 5px 9px black; } .charsheet .sheet-weapon_training { padding: 2px; background: rgba(0, 0, 0, 0.25); } .charsheet .sheet-weapon_training_grid { padding: 2px 0px 2px 40px; background: rgba(0, 0, 0, 0.25); box-shadow: 0px 5px 9px black; font-size: 15px; margin: 2px; display: grid; grid-template-columns: 16% 16% 16% 16% 16% 16%; } /* ______________________________ end of advancements tab ______________________________ ______________________________ start of Journal tab ___________________________________________________________ */ /* Journal sections didn't need their own CSS; this covers only the insanity/corruption portion of the page */ .charsheet .sheet-insanity_side { grid-area: e1; /*background:rgba(0,0,0,0.25);*/ border-radius: 10px; padding: 2px; } .charsheet .sheet-corruption_side { grid-area: e2; /*background:rgba(0,0,0,0.25);*/ border-radius: 10px; padding: 2px; } .charsheet .sheet-insanity_corruption_divider { display: grid; grid-template-columns: 49.5% 1% 49.5%; grid-template-areas: 'e1 e0 e2'; } .charsheet .sheet-insanity_gs1 { grid-area: in1; margin-top: 5px; font-size: 16px; margin-top: 2px; } .charsheet .sheet-insanity_gs2 { grid-area: in2; margin-top: 5px; font-size: 14px; } .charsheet .sheet-insanity_gs3 { grid-area: in3; margin-top: 5px; font-size: 14px; text-align: center; } .charsheet .sheet-insanity_gs4 { grid-area: in4; margin-top: 5px; font-size: 14px; } .charsheet .sheet-insanity_gs5 { grid-area: in5; margin-top: 5px; font-size: 14px; } .charsheet .sheet-insanity_gs6 { grid-area: in6; margin-top: 5px; font-size: 14px; } .charsheet .sheet-insanity_info { font-family: inherit; letter-spacing: 0px; display: grid; grid-template-columns: auto auto; grid-template-rows: 35px 28px; grid-template-areas: 'in1 in2' 'in3 in3'; } .charsheet .sheet-corruption_gs1 { grid-area: co1; margin-top: 5px; font-size: 16px; margin-top: 2px; } .charsheet .sheet-corruption_gs2 { grid-area: co2; margin-top: 5px; font-size: 14px; } .charsheet .sheet-corruption_gs3 { grid-area: co3; margin-top: 5px; font-size: 15px; text-align: center; } .charsheet .sheet-corruption_gs4 { grid-area: co4; margin-top: 5px; font-size: 15px; } .charsheet .sheet-corruption_gs5 { grid-area: co5; margin-top: 5px; font-size: 15px; } .charsheet .sheet-corruption_info { font-family: inherit; letter-spacing: 0px; display: grid; grid-template-columns: auto auto; grid-template-rows: 35px 28px; grid-template-areas: 'co1 co2' 'co3 co3'; } /* ______________________________ end of Journal tab ______________________________ ______________________________ start of Psykana tab ___________________________________________________________ */ .charsheet .sheet-psykana_divider { display: grid; grid-template-columns: 39% 1% 60%; grid-template-areas: 'e1 . e3' 'e2 . e3' 'e4 . e3'; } .charsheet .sheet-psykana_info { grid-area: e1; /*background:rgba(0,0,0,0.25);*/ border-radius: 10px; padding: 2px; margin-bottom: 5px; } .charsheet .sheet-psykana_minor { grid-area: e2; /*background:rgba(0,0,0,0.25);*/ border-radius: 10px; padding: 2px; margin-top: 5px; } .charsheet .sheet-psykana_notes { grid-area: e4; /*background:rgba(0,0,0,0.25);*/ border-radius: 10px; padding: 2px; margin-top: 5px; } .charsheet .sheet-psykana_ability { grid-area: e3; /*background:rgba(0,0,0,0.25);*/ border-radius: 10px; padding: 2px; } .charsheet .sheet-minormanifestation_rep, .charsheet .sheet-psykana_ability_rep { /*background:rgba(0,0,0,0.25);*/ border: 1px solid white; border-radius: 10px; padding: 2px; } .charsheet .sheet-psykana_info_gs1 { grid-area: pi1; font-size: 14px; padding: 0px 2px; } .charsheet .sheet-psykana_info_gs2 { grid-area: pi2; font-size: 14px; margin-top: 5px; } .charsheet .sheet-psykana_info_gs3 { grid-area: pi3; font-size: 14px; padding: 0px 2px; } .charsheet .sheet-psykana_info_gs4 { grid-area: pi4; font-size: 14px; margin-top: 5px; } .charsheet .sheet-psykana_info_gs5 { grid-area: pi5; font-size: 14px; padding: 0px 2px; } .charsheet .sheet-psykana_info_gs6 { grid-area: pi6; font-size: 14px; } .charsheet .sheet-psykana_info_gs7 { grid-area: pi7; font-size: 14px; padding: 0px 2px; } .charsheet .sheet-psykana_info_gs8 { grid-area: pi8; font-size: 14px; } .charsheet .sheet-psykana_info_gs9 { grid-area: pi9; font-size: 14px; padding: 0px 2px; } .charsheet .sheet-psykana_info_gs10 { grid-area: pi10; font-size: 14px; } .charsheet .sheet-psykana_info_gs11 { grid-area: pi11; font-size: 14px; padding: 0px 2px; } .charsheet .sheet-psykana_info_gs12 { grid-area: pi12; font-size: 14px; } .charsheet .sheet-psykana_info_gs13 { grid-area: pi13; font-size: 14px; padding: 0px 2px; } .charsheet .sheet-psykana_info_gs14 { grid-area: pi14; font-size: 14px; } .charsheet .sheet-psykana_info_gs15 { grid-area: pi15; font-size: 14px; padding: 0px 2px; } .charsheet .sheet-psykana_info_gs16 { grid-area: pi16; font-size: 14px; } .charsheet .sheet-psykana_info_gs17 { grid-area: pi17; font-size: 14px; width: 130px !important; } .charsheet .sheet-psykana_info_gs18 { grid-area: pi18; font-size: 14px; width: 100px !important; } .charsheet .sheet-psykana_info_gs19 { grid-area: pi19; font-size: 14px; padding: 0px 2px; } .charsheet .sheet-psykana_info_gs20 { grid-area: pi20; font-size: 14px; } .charsheet .sheet-psykana_info_grid { font-weight: bold; align-items: center; display: grid; grid-template-columns: 30% auto auto auto; grid-template-rows: 40px 40px 40px 40px 40px 40px; grid-template-areas: 'pi1 pi2 pi2 pi2' 'pi3 pi4 pi4 pi4' 'pi5 pi6 pi7 pi8' 'pi9 pi10 pi11 pi12' 'pi13 pi14 pi15 pi16' 'pi19 pi20 . .' 'pi17 pi17 pi18 pi18'; } .charsheet .sheet-psykana_ability_gs1 { grid-area: pa1; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs2 { grid-area: pa2; font-size: 12px; } .charsheet .sheet-psykana_ability_gs3 { grid-area: pa3; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs4 { grid-area: pa4; font-size: 12px; border-top-right-radius: 10px; } .charsheet .sheet-psykana_ability_gs5 { grid-area: pa5; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs6 { grid-area: pa6; font-size: 12px; } .charsheet .sheet-psykana_ability_gs7 { grid-area: pa7; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs8 { grid-area: pa8; font-size: 12px; } .charsheet .sheet-psykana_ability_gs9 { grid-area: pa9; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs10 { grid-area: pa10; font-size: 12px; } .charsheet .sheet-psykana_ability_gs11 { grid-area: pa11; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs12 { grid-area: pa12; font-size: 12px; } .charsheet .sheet-psykana_ability_gs13 { grid-area: pa13; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs14 { grid-area: pa14; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs15 { grid-area: pa15; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs16 { grid-area: pa16; font-size: 12px; } .charsheet .sheet-psykana_ability_gs17 { grid-area: pa17; font-size: 12px; width: 70px !important; } .charsheet .sheet-psykana_ability_gs18 { grid-area: pa18; font-size: 12px; width: 50px !important; } .charsheet .sheet-psykana_ability_gs19 { grid-area: pa19; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs20 { grid-area: pa20; font-size: 12px; } .charsheet .sheet-psykana_ability_gs21 { grid-area: pa21; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs22 { grid-area: pa22; font-size: 12px; } .charsheet .sheet-psykana_ability_gs23 { grid-area: pa23; font-size: 12px; padding: 0px 2px; } .charsheet .sheet-psykana_ability_gs24 { grid-area: pa24; font-size: 12px; } .charsheet .sheet-psykana_ability_grid1 { /* gs1-4, Name, Subtype */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto; grid-template-areas: 'pa1 pa2 pa2 pa2 pa2 pa3 pa4 pa4 pa4 pa4'; } .charsheet .sheet-psykana_ability_grid2 { /* gs5-12, Range, Dmg, Type, Pen */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto; grid-template-areas: 'pa5 pa6 pa6 pa7 pa8 pa8 pa9 pa10 pa10 pa10 pa11 pa12'; } .charsheet .sheet-psykana_ability_grid3 { /* gs13-18 Focus Power, Hit Mod, Hit/Dmg buttons */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto 81px 61px; grid-template-areas: 'pa13 pa14 pa14 pa14 pa14 pa15 pa16 pa16 pa17 pa18'; } .charsheet .sheet-psykana_ability_grid4 { /* gs19-22 Actions to cast, Actions to sustain */ align-items: center; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto; grid-template-areas: 'pa19 pa19 pa20 pa20 pa21 pa22 pa22 pa23 pa24 .'; } /* ______________________________ end of Psykana tab ______________________________ ______________________________ start of vehicles page ___________________________________________________________ */ .charsheet .sheet-vehicles_grid1 { margin-right: 10px; background: rgba(0, 0, 0, 0.25); border-top: 2px solid #6e8b3d38; border-left: 2px solid #6e8b3d38; border-right: 2px solid #6e8b3d38; border-top-left-radius: 10px; border-top-right-radius: 10px; font-family: inherit; } .charsheet .sheet-vehicles_grid2 { margin-right: 10px; background: rgba(0, 0, 0, 0.25); border-left: 2px solid #6e8b3d38; border-right: 2px solid #6e8b3d38; font-family: inherit; } .charsheet .sheet-vehicle_weapons { grid-area: vgw; } .charsheet .sheet-vehicles_divider { display: grid; grid-template-columns: 50% 50%; grid-template-areas: 'vg1 vgw' 'vg2 vgw'; } .charsheet .sheet-vehicles_Gn { grid-area: vn; background: rgba(0, 0, 0, 0.25); border: none; border-bottom: 1px solid white; border-radius: 9px 9px 0px 0px; font-family: inherit; text-align: center; font-size: 15px; } .charsheet .sheet-vehicles_Gs { grid-area: vs; height: 28.5px; margin-bottom: -8px; margin-top: -1px; border-top: 1px solid white; } .charsheet .sheet-vehicles_Gt { grid-area: vt; height: 28.5px; margin-bottom: -8px; margin-top: -1px; border-top: 1px solid white; } .charsheet .sheet-vehicles_G1 { grid-area: v1 } .charsheet .sheet-vehicles_G2 { grid-area: v2 } .charsheet .sheet-vehicles_G3 { grid-area: v3; text-align: center } .charsheet .sheet-vehicles_G4 { grid-area: v4; text-align: center } .charsheet .sheet-vehicles_G5 { grid-area: v5; text-align: center } .charsheet .sheet-vehicles_G6 { grid-area: v6; text-align: center } .charsheet .sheet-vehicles_G7 { grid-area: v7 } .charsheet .sheet-vehicles_G8 { grid-area: v8 } .charsheet .sheet-vehicles_G9 { grid-area: v9 } .charsheet .sheet-vehicles_G10 { grid-area: v10 } .charsheet .sheet-vehicles_G11 { grid-area: v11; } .charsheet .sheet-vehicles_G12 { grid-area: v12; text-align: center } .charsheet .sheet-vehicles_G13 { grid-area: v13; text-align: center } .charsheet .sheet-vehicles_G14 { grid-area: v14 } .charsheet .sheet-vehicles_G15 { grid-area: v15 } .charsheet .sheet-vehicles_grid1 { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-template-areas: 'vn vn vn vn' 'vs v1 v1 vt' 'v2 v2 v2 v2' 'v3 v4 v5 v6' 'v7 v8 v9 v10' 'v11 v11 v11 v11' 'v12 v12 v13 v13' 'v14 v14 v15 v15'; } .charsheet .sheet-vehicles_G16 { grid-area: v16 } .charsheet .sheet-vehicles_G17 { grid-area: v17; text-align: center } .charsheet .sheet-vehicles_G18 { grid-area: v18; text-align: center } .charsheet .sheet-vehicles_G19 { grid-area: v19; text-align: center } .charsheet .sheet-vehicles_G20 { grid-area: v20; text-align: center } .charsheet .sheet-vehicles_G21 { grid-area: v21 } .charsheet .sheet-vehicles_G22 { grid-area: v22 } .charsheet .sheet-vehicles_G23 { grid-area: v23 } .charsheet .sheet-vehicles_G24 { grid-area: v24 } .charsheet .sheet-vehicles_G25 { grid-area: v25 } .charsheet .sheet-vehicles_G26 { grid-area: v26; margin-top: 3px; padding-bottom: 2px; } .charsheet .sheet-vehicles_grid2 { display: grid; grid-template-columns: 14% 14% 24% 24% 24%; grid-template-areas: 'v16 v16 v16 v16 v16' 'v17 v17 v18 v19 v20' 'v21 v22 v23 v24 v25' 'v26 v26 v26 v26 v26'; } .charsheet .sheet-vehicles_descriptor { border-bottom-left-radius: 8px; } /* These hider checkboxes have names which match the select element on a 1-2-3; the appropriate Operate check is displayed, on an invalid selection there is no Operate check */ .charsheet .sheet-hider:not(:checked)+div { display: none } .charsheet .sheet-hider:not(:checked)+input { display: none } .charsheet .sheet-hider:not(:checked)+button { display: none } .charsheet .sheet-hidernot:checked+div { display: none } .charsheet .sheet-hidernot:checked+input { display: none } .charsheet .sheet-hidernot:checked+button { display: none } /* ______________________________ end of vehicles page ______________________________ ______________________________ start of json ___________________________________________________________ */ .charsheet .sheet-json_skill { display: none } .charsheet input[type="checkbox"]:not(:checked)~.sheet-json_skill { display: inline; } .charsheet .sheet-json_container span .repcontrol { display: none; } .charsheet .sheet-json_container span .repcontainer { display: inline; box-shadow: none; } .charsheet .sheet-json_container span .repcontainer .repitem { display: inline; } .charsheet .sheet-json_container { border: solid black 3px; padding: 5px; word-break: break-all; } /* ______________________________ end of json ______________________________ ______________________________ start of rolltemplate ___________________________________________________________ */ .sheet-rolltemplate-mythic .sheet-rolltemplate-collapsible_entity_block { display: none; border: 2px solid black; border-left: 0px; border-right: 0px; } .sheet-rolltemplate-mythic .sheet-rolltemplate-collapsible_entity_switch:hover>.sheet-rolltemplate-collapsible_entity_block { display: block; } .sheet-rolltemplate-mythic { font-weight: bold; background: url(https://raw.githubusercontent.com/ChtiKenny/roll20-character-sheets/ShadowbaneInauisition/ShadowbaneInquisition/images/assets/rolltemplate_bg.png) top left repeat; } .sheet-rolltemplate-mythic .sheet-rolltemplate-spacer { max-width: 100%; height: auto; max-height: 15px; float: left; } .sheet-rolltemplate-mythic .sheet-rolltemplate-spacer.sheet-invert { -webkit-transform: scaleX(-1); transform: scaleX(-1); float: right; } .sheet-rolltemplate-mythic .sheet-template-header, .sheet-rolltemplate-mythic .sheet-template-row { line-height: 1.6em; font-size: 1.1em; font-family: inherit; } .sheet-rolltemplate-mythic .sheet-template-header { /*background: rgba(0,0,0,0.25); border-radius: 10px 10px 0px 0px; border-left: 2px solid grey; border-right: 2px solid grey; border-top: 2px solid grey;*/ text-align: center; /*text-decoration: underline;*/ padding: 5px 5px 0px 5px; line-height: 1.1em; font-size: 1.3em; } .sheet-rolltemplate-mythic .sheet-template-content { /*background: #6e8b3d; border-radius: 0px 0px 10px 10px; border-left: 2px solid grey; border-right: 2px solid grey; border-bottom: 2px solid grey;*/ padding: 2px } .sheet-rolltemplate-mythic .sheet-template-content_top { border-radius: 0px 0px 0px 0px; /*border-bottom: 3px solid #52682d;*/ } .sheet-rolltemplate-mythic .sheet-template-round { border-radius: 10px 10px 10px 10px; } .sheet-rolltemplate-mythic .sheet-template-2x2 { display: grid; grid-template-columns: auto auto; padding: 0px 20px 2px 20px; } .sheet-rolltemplate-mythic .sheet-template-right { text-align: left; margin-right: 5px } .sheet-rolltemplate-mythic .sheet-template-left { text-align: right; margin-right: 5px; } .sheet-rolltemplate-mythic .sheet-template-center { text-align: center; } .sheet-rolltemplate-mythic .sheet-template-break { margin-top: 10px; } .sheet-rolltemplate-mythic .sheet-success, .sheet-rolltemplate-mythic .sheet-failure { text-align: center; padding-top: 5px; padding-left: 5px; line-height: 1.1em; font-size: 1.1em; } .sheet-rolltemplate-mythic .sheet-inlineresult { display: inline-block; min-width: 1.5em; text-align: center; border: none; border-radius: 3px 3px 3px 3px; background-color: transparent; } .sheet-rolltemplate-mythic .sheet-roll-adjust { padding: 0 3px 0 3px; font-weight: bold; font-size: 1.1em; } .sheet-rolltemplate-mythic .inlinerollresult { display: inline-block; min-width: 1.5em; text-align: center; border: none; border-radius: 3px 3px 3px 3px; background-color: transparent; } .sheet-rolltemplate-mythic .sheet-success .inlinerollresult { color: #3FB315 !important; border: none; } .sheet-rolltemplate-mythic .sheet-failure .inlinerollresult { color: #B31515 !important; border: none; } .sheet-rolltemplate-mythic .inlinerollresult.fullcrit { color: #B31515; border: none; } .sheet-rolltemplate-mythic .inlinerollresult.fullfail { color: #3FB315; border: none; } .sheet-rolltemplate-mythic .inlinerollresult.importantroll { color: #4A57ED; border: none; } .sheet-rolltemplate-mythic .sheet-mythic_crit .inlinerollresult.fullcrit { color: #3FB315; border: none; } .sheet-rolltemplate-mythic .sheet-mythic_crit .inlinerollresult.fullfail { color: #B31515; border: none; } .charsheet .itemcontrol { z-index: 1; }