@import url('https://fonts.googleapis.com/css2?family=Stylish&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); /*------------------------------------*\ #Switch Bone / Flesh / Classic / \*------------------------------------*/ /*Configure the tab buttons*/ .charsheet .bone, .charsheet .npc_bone, .charsheet .flesh, .charsheet .npc_flesh, .charsheet .classic, .charsheet .npc { display: none; } /* show the selected tab */ .charsheet .sheet-sheettoggle[value="pc_bone"] ~ div.bone, .charsheet .sheet-sheettoggle[value="npc_bone"] ~ div.npc_bone, .charsheet .sheet-sheettoggle[value="pc_flesh"] ~ div.flesh, .charsheet .sheet-sheettoggle[value="npc_flesh"] ~ div.npc_flesh, .charsheet .sheet-sheettoggle[value="pc_classic"] ~ div.classic, .charsheet .sheet-sheettoggle[value="npc_classic"] ~ div.npc { display: block; } div.sheet_selector { width: auto; margin-left: 559px; margin-top: -15px; } .selector { width: auto; font-family: 'Stylish'; border-style: solid; border-width: 1px; border-color: #888888; z-index: 1; font-family: 'Stylish', serif; font-size: 12px; box-shadow: -3px 3px 3px #00000073; background-color: #e6e6e6; } body.sheet-darkmode .selector { background-color: #1f1f1f; border-color: #48494a; color: #ffffff; box-shadow: -2px 3px 3px #797979; } /*------------------------------------*\ #General \*------------------------------------*/ .charsheet span{ font-family: 'Stylish'; } .charsheet { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/background.webp); background-size: cover; width: 815px; border: 2px solid; border-color: #0c0c0c5c; margin-top: 40px; box-shadow: -6px 6px 6px #000000c4; margin-bottom: 20px; } body.sheet-darkmode .charsheet { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/background-red1.webp); border-color: #c4c5c63b; box-shadow: 0px 0px 15px 6px #bbbaba33; } div.bone, div.npc_bone, div.flesh, div.npc_flesh, div.classic, div.npc { width: 740px; padding: 10px; height: auto; margin-top: -58px; } div.logo { width: 400px; height: 64px; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/logo_dirty.PNG); background-size: cover; background-repeat: no-repeat; border: 2px solid; border-color: #a3a1a1; } body.sheet-darkmode div.logo { width: 400px; height: 64px; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/logo_dirty.PNG); background-size: cover; background-repeat: no-repeat; border: 2px solid; border-color: #c7c7c724; } img.img { width: 385px; height: auto; opacity:1; } .charsheet input:checked + label { color: red; } .charsheet ::placeholder{ font-size: 30px !important; padding-top: 8px; font-family: "Stylish"; color: #00000040; } .charsheet div.capacity_classic ::placeholder{ font-size: 30px !important; padding-top: 8px; font-family: "Stylish"; color: #00000040; } body.sheet-darkmode .charsheet ::placeholder{ color: #b5b5b56b; } .charsheet p{ font-size: 20px; line-height: 1.5; display:flex; } .charsheet .name p, .charsheet .profil p, .charsheet .syle p, .charsheet .background p, .charsheet .bond p { size: 500px; } .charsheet select { /* font-size: 13px; font-weight: normal; line-height: 18px; width: auto; margin-right: 18px; margin-left: -16px; padding: 1px; border-radius: 10px 100px / 120px; */ } .charsheet div.section-profile{ padding-top: 30px; padding-bottom: 10px; margin-left: 20px; height: 350px; } .charsheet div.section-profile-large{ padding-top: 5px; padding-bottom: 10px; margin-left: 0px; } /*------------------------------------*\ DARK MODE BASE \*------------------------------------*/ body.sheet-darkmode button, body.sheet-darkmode input, body.sheet-darkmode optgroup, body.sheet-darkmode select, body.sheet-darkmode textarea, body.sheet-darkmode .charsheet { color: #ffffffb5; } .btn:hover { background-position: unset; } .sheet-darkmode .sheetform { width: 700px; border-color: #c4c5c63b; } /*------------------------------------*\ #Menu Tabs Setup \*------------------------------------*/ div.character, div.equipment, div.notes{ display: none; padding-top: 5px; } div.character{ padding-left: 7px; padding-top: 31px; height: 970px; } div.equipment{ padding-left: 7px; padding-top: 19px; height: 836px; } div.notes{ padding-left: 7px; padding-top: 31px; height: 824px; } div.capacity, div.capacity_classic{ display: none; padding-top: 5px; width: 650px; margin-left: -22px; height: 850px; } div.character_bone, div.equipment_bone, div.notes_bone, div.character_classic, div.character_npc, div.equipment_classic, div.notes_classic, div.config, div.config_bone, div.config_pc, div.config_npc{ display: none; padding-top: 5px; } div.character_bone, div.character_classic{ padding-left: 7px; padding-top: 31px; height: 970px; } div.npc_character, div.character_npc, div.character_npc_bone{ padding-left: 7px; padding-top: 31px; height: 1100px; } div.equipment_bone, div.equipment_classic{ padding-left: 7px; padding-top: 19px; height: 836px; } div.notes_bone, div.notes_classic{ padding-left: 7px; padding-top: 31px; height: 824px; } div.capacity_bone{ display: none; padding-top: 5px; width: 650px; margin-left: -22px; } input[type=radio].onglcapacity:checked ~ div.capacity, input[type=radio].onglcharacter:checked ~ div.character, input[type=radio].onglequipment:checked ~ div.equipment, input[type=radio].onglnotes:checked ~ div.notes , input[type=radio].onglconfig:checked ~ div.config{ display: block; } input[type=radio].onglnpc_capacity:checked ~ div.npc_capacity, input[type=radio].onglnpc_character:checked ~ div.npc_character, input[type=radio].onglnpc_equipment:checked ~ div.npc_equipment, input[type=radio].onglnpc_notes:checked ~ div.npc_notes , input[type=radio].onglnpc_config:checked ~ div.npc_config{ display: block; } input[type=radio].onglcapacity_bone:checked ~ div.capacity_bone, input[type=radio].onglcharacter_bone:checked ~ div.character_bone, input[type=radio].onglequipment_bone:checked ~ div.equipment_bone, input[type=radio].onglnotes_bone:checked ~ div.notes_bone, input[type=radio].onglconfig_bone:checked ~ div.config_bone{ display: block; } input[type=radio].onglcapacity_npc_bone:checked ~ div.capacity_npc_bone, input[type=radio].onglcharacter_npc_bone:checked ~ div.character_npc_bone, input[type=radio].onglequipment_npc_bone:checked ~ div.equipment_npc_bone, input[type=radio].onglnotes_npc_bone:checked ~ div.notes_npc_bone, input[type=radio].onglconfig_npc_bone:checked ~ div.config_npc_bone{ display: block; } input[type=radio].onglcapacity_classic:checked ~ div.capacity_classic, input[type=radio].onglcharacter_classic:checked ~ div.character_classic, input[type=radio].onglequipment_classic:checked ~ div.equipment_classic, input[type=radio].onglnotes_classic:checked ~ div.notes_classic, input[type=radio].onglconfig_classic_pc:checked ~ div.config_pc{ display: block; } input[type=radio].onglcapacity_npc:checked ~ div.capacity_npc, input[type=radio].onglcharacter_npc:checked ~ div.character_npc, input[type=radio].onglequipment_npc:checked ~ div.equipment_npc, input[type=radio].onglnotes_npc:checked ~ div.notes_npc, input[type=radio].onglconfig_classic_npc:checked ~ div.config_npc{ display: block; } input[type=radio].onglcharacter, input[type=radio].onglcapacity, input[type=radio].onglequipment, input[type=radio].onglnotes, input[type=radio].onglnpc_character, input[type=radio].onglnpc_capacity, input[type=radio].onglnpc_equipment, input[type=radio].onglnpc_notes, input[type=radio].onglcharacter_bone, input[type=radio].onglcapacity_bone, input[type=radio].onglequipment_bone, input[type=radio].onglnotes_bone, input[type=radio].onglcharacter_npc_bone, input[type=radio].onglcapacity_npc_bone, input[type=radio].onglequipment_npc_bone, input[type=radio].onglnotes_npc_bone, input[type=radio].onglcharacter_classic, input[type=radio].onglcapacity_classic, input[type=radio].onglequipment_classic, input[type=radio].onglnotes_classic, input[type=radio].onglcharacter_npc, input[type=radio].onglcapacity_npc, input[type=radio].onglequipment_npc, input[type=radio].onglnotes_npc { margin: 0; margin-top: -4px; margin-bottom: -4px; padding: 0; display: inline-block; opacity: 0; width: 110px; height: 20px; z-index: 2; font-family: 'Stylish', serif; font-size: 14px; } input[type=radio].onglconfig, input[type=radio].onglconfig_bone, input[type=radio].onglconfig_classic_pc, input[type=radio].onglconfig_classic_npc { margin: 0; margin-top: -4px; margin-bottom: -4px; padding: 0; display: inline-block; opacity: 0; width: 110px; height: 20px; z-index: 2; font-family: 'Stylish', serif; font-size: 14px; } input[type=radio].onglcharacter + span, input[type=radio].onglcapacity + span, input[type=radio].onglequipment + span, input[type=radio].onglnotes + span, input[type=radio].onglnpc_character + span, input[type=radio].onglnpc_capacity + span, input[type=radio].onglnpc_equipment + span, input[type=radio].onglnpc_notes + span, input[type=radio].onglcharacter_bone + span, input[type=radio].onglcapacity_bone + span, input[type=radio].onglequipment_bone + span, input[type=radio].onglnotes_bone + span, input[type=radio].onglcharacter_npc_bone + span, input[type=radio].onglcapacity_npc_bone + span, input[type=radio].onglequipment_npc_bone + span, input[type=radio].onglnotes_npc_bone + span, input[type=radio].onglcharacter_classic + span, input[type=radio].onglcapacity_classic + span, input[type=radio].onglequipment_classic + span, input[type=radio].onglnotes_classic + span, input[type=radio].onglcharacter_npc + span, input[type=radio].onglcapacity_npc + span, input[type=radio].onglequipment_npc + span, input[type=radio].onglnotes_npc + span{ color: #333333; font-size: 15px; text-align: center; display: inline-block; width: 120px; height: 20px; margin: 0; margin-left: -109px; margin-right: -5px; margin-top: 10px; padding: 0; margin-bottom: -1px; padding-top: 5px; font-size: 0.9em; text-transform: uppercase; border-style: solid; border-width: 1px; border-color: #888888; border-top-left-radius: 9px; border-top-right-radius: 16px; z-index: 1; font-family: 'Stylish', serif; font-size: 14px; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/background.webp); box-shadow: inset -6px 0px 15px #00000057; } input[type=radio].onglconfig + span, input[type=radio].onglconfig_bone + span, input[type=radio].onglconfig_classic_pc + span, input[type=radio].onglconfig_classic_npc + span{ color: #333333; font-size: 15px; text-align: center; display: inline-block; width: 120px; height: 20px; margin: 0; margin-left: -109px; margin-right: -5px; padding: 0; margin-bottom: -1px; padding-top: 5px; font-size: 0.9em; text-transform: uppercase; border-style: solid; border-width: 1px; border-color: #888888; border-top-left-radius: 9px; border-top-right-radius: 16px; z-index: 1; font-family: 'Stylish', serif; font-size: 14px; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/background.webp); box-shadow: inset -6px 0px 15px #00000057; } body.sheet-darkmode input[type=radio].onglcharacter:checked + span, body.sheet-darkmode input[type=radio].onglcapacity:checked + span, body.sheet-darkmode input[type=radio].onglequipment:checked + span, body.sheet-darkmode input[type=radio].onglnotes:checked + span, body.sheet-darkmode input[type=radio].onglconfig:checked + span, body.sheet-darkmode input[type=radio].onglnpc_character:checked + span, body.sheet-darkmode input[type=radio].onglnpc_capacity:checked + span, body.sheet-darkmode input[type=radio].onglnpc_equipment:checked + span, body.sheet-darkmode input[type=radio].onglnotes:checked + span, body.sheet-darkmode input[type=radio].onglconfig:checked + span, body.sheet-darkmode input[type=radio].onglcharacter_bone:checked + span, body.sheet-darkmode input[type=radio].onglcapacity_bone:checked + span, body.sheet-darkmode input[type=radio].onglequipment_bone:checked + span, body.sheet-darkmode input[type=radio].onglnotes_bone:checked + span, body.sheet-darkmode input[type=radio].onglconfig_bone:checked + span, body.sheet-darkmode input[type=radio].onglcharacter_npc_bone:checked + span, body.sheet-darkmode input[type=radio].onglcapacity_npc_bone:checked + span, body.sheet-darkmode input[type=radio].onglequipment_npc_bone:checked + span, body.sheet-darkmode input[type=radio].onglnotes_npc_bone:checked + span, body.sheet-darkmode input[type=radio].onglconfig_npc_bone:checked + span, body.sheet-darkmode input[type=radio].onglcharacter_classic:checked + span, body.sheet-darkmode input[type=radio].onglcapacity_classic:checked + span, body.sheet-darkmode input[type=radio].onglequipment_classic:checked + span, body.sheet-darkmode input[type=radio].onglnotes_classic:checked + span, body.sheet-darkmode input[type=radio].onglconfig_classic_pc:checked + span, body.sheet-darkmode input[type=radio].onglcharacter_npc:checked + span, body.sheet-darkmode input[type=radio].onglcapacity_npc:checked + span, body.sheet-darkmode input[type=radio].onglequipment_npc:checked + span, body.sheet-darkmode input[type=radio].onglnotes_npc:checked + span, body.sheet-darkmode input[type=radio].onglconfig_classic_npc:checked + span{ color: #ffffffd6; border: solid; border-top-color: #48494a; border-left-color: #48494a; border-right-color: #48494a; border-bottom-color: #48494a; border-width: 1px; font-family: 'Stylish', serif; font-size: 14px; background-color: #6d0d15; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/red_ongl.PNG) } body.sheet-darkmode input[type=radio].onglcharacter, body.sheet-darkmode input[type=radio].onglcapacity, body.sheet-darkmode input[type=radio].onglequipment, body.sheet-darkmode input[type=radio].onglnotes, body.sheet-darkmode input[type=radio].onglnpc_character, body.sheet-darkmode input[type=radio].onglnpc_capacity, body.sheet-darkmode input[type=radio].onglnpc_equipment, body.sheet-darkmode input[type=radio].onglnpc_notes, body.sheet-darkmode input[type=radio].onglcharacter_bone, body.sheet-darkmode input[type=radio].onglcapacity_bone, body.sheet-darkmode input[type=radio].onglequipment_bone, body.sheet-darkmode input[type=radio].onglnotes_bone, body.sheet-darkmode input[type=radio].onglcharacter_npc_bone, body.sheet-darkmode input[type=radio].onglcapacity_npc_bone, body.sheet-darkmode input[type=radio].onglequipment_npc_bone, body.sheet-darkmode input[type=radio].onglnotes_npc_bone, body.sheet-darkmode input[type=radio].onglcharacter_classic, body.sheet-darkmode input[type=radio].onglcapacity_classic, body.sheet-darkmode input[type=radio].onglequipment_classic, body.sheet-darkmode input[type=radio].onglnotes_classic, body.sheet-darkmode input[type=radio].onglcharacter_npc, body.sheet-darkmode input[type=radio].onglcapacity_npc, body.sheet-darkmode input[type=radio].onglequipment_npc, body.sheet-darkmode input[type=radio].onglnotes_npc{ margin: 0; margin-top: -4px; margin-bottom: -4px; padding: 0; display: inline-block; opacity: 0; width: 110px; height: 20px; z-index: 2; font-family: 'Stylish', serif; font-size: 14px; } body.sheet-darkmode input[type=radio].onglconfig, body.sheet-darkmode input[type=radio].onglconfig_bone, body.sheet-darkmode input[type=radio].onglconfig_classic_pc, body.sheet-darkmode input[type=radio].onglconfig_classic_npc{ margin: 0; margin-top: -4px; margin-bottom: -4px; padding: 0; display: inline-block; opacity: 0; width: 110px; height: 20px; z-index: 2; font-family: 'Stylish', serif; font-size: 14px; } body.sheet-darkmode input[type=radio].onglcharacter + span, body.sheet-darkmode input[type=radio].onglcapacity + span, body.sheet-darkmode input[type=radio].onglequipment + span, body.sheet-darkmode input[type=radio].onglnotes + span, body.sheet-darkmode input[type=radio].onglconfig + span, body.sheet-darkmode input[type=radio].onglnpc_character + span, body.sheet-darkmode input[type=radio].onglnpc_capacity + span, body.sheet-darkmode input[type=radio].onglnpc_equipment + span, body.sheet-darkmode input[type=radio].onglnpc_notes + span, body.sheet-darkmode input[type=radio].onglnpc_config + span, body.sheet-darkmode input[type=radio].onglcharacter_bone + span, body.sheet-darkmode input[type=radio].onglcapacity_bone + span, body.sheet-darkmode input[type=radio].onglequipment_bone + span, body.sheet-darkmode input[type=radio].onglnotes_bone + span, body.sheet-darkmode input[type=radio].onglconfig_bone + span, body.sheet-darkmode input[type=radio].onglcharacter_npc_bone + span, body.sheet-darkmode input[type=radio].onglcapacity_npc_bone + span, body.sheet-darkmode input[type=radio].onglequipment_npc_bone + span, body.sheet-darkmode input[type=radio].onglnotes_npc_bone + span, body.sheet-darkmode input[type=radio].onglconfig_npc_bone + span, body.sheet-darkmode input[type=radio].onglcharacter_classic + span, body.sheet-darkmode input[type=radio].onglcapacity_classic + span, body.sheet-darkmode input[type=radio].onglequipment_classic + span, body.sheet-darkmode input[type=radio].onglnotes_classic + span, body.sheet-darkmode input[type=radio].onglconfig_classic_pc + span, body.sheet-darkmode input[type=radio].onglcharacter_npc + span, body.sheet-darkmode input[type=radio].onglcapacity_npc + span, body.sheet-darkmode input[type=radio].onglequipment_npc + span, body.sheet-darkmode input[type=radio].onglnotes_npc + span, body.sheet-darkmode input[type=radio].onglconfig_classic_npc + span{ color: #ffffff9c; border-color: #48494a; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/background-red1.webp); } input[type=radio].onglcharacter:checked + span, input[type=radio].onglcapacity:checked + span, input[type=radio].onglequipment:checked + span, input[type=radio].onglnotes:checked + span, input[type=radio].onglconfig:checked + span, input[type=radio].onglnpc_character:checked + span, input[type=radio].onglnpc_capacity:checked + span, input[type=radio].onglnpc_equipment:checked + span, input[type=radio].onglnpc_notes:checked + span, input[type=radio].onglnpc_config:checked + span, input[type=radio].onglcharacter_bone:checked + span, input[type=radio].onglcapacity_bone:checked + span, input[type=radio].onglequipment_bone:checked + span, input[type=radio].onglnotes_bone:checked + span, input[type=radio].onglconfig_bone:checked + span, input[type=radio].onglcharacter_npc_bone:checked + span, input[type=radio].onglcapacity_npc_bone:checked + span, input[type=radio].onglequipment_npc_bone:checked + span, input[type=radio].onglnotes_npc_bone:checked + span, input[type=radio].onglconfig_npc_bone:checked + span, input[type=radio].onglcharacter_classic:checked + span, input[type=radio].onglcapacity_classic:checked + span, input[type=radio].onglequipment_classic:checked + span, input[type=radio].onglnotes_classic:checked + span, input[type=radio].onglconfig_classic_pc:checked + span, input[type=radio].onglcharacter_npc:checked + span, input[type=radio].onglcapacity_npc:checked + span, input[type=radio].onglequipment_npc:checked + span, input[type=radio].onglnotes_npc:checked + span, input[type=radio].onglconfig_classic_npc:checked + span { color: black; border-bottom-width: 1px; border-color: black; font-family: 'Stylish', serif; font-size: 14px; background-color: black; color: white; background-image: none; } /*------------------------------------*\ #Capacity Radio Setup \*------------------------------------*/ .charsheet .sheet-dots{ display:flex; } .charsheet .reserve_value { color:red; } .charsheet button.sheet-profil_reserve, .charsheet button.sheet-beat_reserve, .charsheet button.sheet-endure_reserve, .charsheet button.sheet-cross_reserve, .charsheet button.sheet-know_reserve, .charsheet button.sheet-think_reserve, .charsheet button.sheet-use_reserve, .charsheet button.sheet-influence_reserve, .charsheet button.sheet-sense_reserve, .charsheet button.sheet-feel_reserve, .charsheet button.sheet-link_reserve { width: 27px; height: 27px; border: solid 2px #000000; display: flex; justify-content: center; align-items: center; margin-top: 5px; margin-left: 4px; padding: 0px; cursor: pointer; box-shadow: 2px 2px 2px #0006; } body.sheet-darkmode .charsheet button.sheet-profil_reserve, body.sheet-darkmode .charsheet button.sheet-beat_reserve, body.sheet-darkmode .charsheet button.sheet-endure_reserve, body.sheet-darkmode .charsheet button.sheet-cross_reserve, body.sheet-darkmode .charsheet button.sheet-know_reserve, body.sheet-darkmode .charsheet button.sheet-think_reserve, body.sheet-darkmode .charsheet button.sheet-use_reserve, body.sheet-darkmode .charsheet button.sheet-influence_reserve, body.sheet-darkmode .charsheet button.sheet-sense_reserve, body.sheet-darkmode .charsheet button.sheet-feel_reserve, body.sheet-darkmode .charsheet button.sheet-link_reserve { border: none; background-color: #3b3a3aa6; box-shadow: 2px 2px 2px #e810102b; margin-left: 8px; } .charsheet button.sheet-injury1, .charsheet button.sheet-injury2, .charsheet button.sheet-injury3, .charsheet button.sheet-balance1, .charsheet button.sheet-balance2, .charsheet button.sheet-balance3{ width: 27px; height: 27px; border: solid 2px #000000; display: flex; justify-content: center; align-items: center; margin-top: 5px; margin-left: 4px; padding: 0px; cursor: pointer; box-shadow: 2px 2px 2px #00000094; } body.sheet-darkmode .charsheet button.sheet-injury1, body.sheet-darkmode .charsheet button.sheet-injury2, body.sheet-darkmode .charsheet button.sheet-injury3, body.sheet-darkmode .charsheet button.sheet-balance1, body.sheet-darkmode .charsheet button.sheet-balance2, body.sheet-darkmode .charsheet button.sheet-balance3{ border: none; background-color: #3b3a3aa6; box-shadow: 2px 2px 2px #e810102b; margin-left: 8px; } .charsheet button.sheet-injury4, .charsheet button.sheet-balance4{ width: 27px; height: 27px; border: solid 2px #994a04; display: flex; justify-content: center; align-items: center; margin-top: 5px; margin-left: 9px; padding: 0px; cursor: pointer; box-shadow: 2px 2px 2px #994a0491; } body.sheet-darkmode .charsheet button.sheet-injury4, body.sheet-darkmode .charsheet button.sheet-balance4{ border: none; background-color: #3b3a3aa6; box-shadow: 2px 2px 2px #bb000063; margin-left: 13px; } .charsheet button.sheet-injury5, .charsheet button.sheet-balance5{ width: 27px; height: 27px; border: solid 2px #994a04; display: flex; justify-content: center; align-items: center; margin-top: 5px; margin-left: 4px; padding: 0px; cursor: pointer; box-shadow: 2px 2px 2px #994a0491; } body.sheet-darkmode .charsheet button.sheet-injury5, body.sheet-darkmode .charsheet button.sheet-balance5{ border: none; background-color: #3b3a3aa6; box-shadow: 2px 2px 2px #bb000063; margin-left: 8px; } .charsheet button.sheet-injury6, .charsheet button.sheet-balance6{ width: 27px; height: 27px; border: solid 2px #8e0303; display: flex; justify-content: center; align-items: center; margin-top: 5px; padding: 0px; cursor: pointer; margin-left:9px; box-shadow: 2px 2px 2px #8e030382; } body.sheet-darkmode .charsheet button.sheet-injury6, body.sheet-darkmode .charsheet button.sheet-balance6{ border: none; background-color: #3b3a3aa6; box-shadow: none; box-shadow: 2px 2px 2px #bb00008a; margin-left: 13px; } .charsheet button.sheet-injury7, .charsheet button.sheet-balance7{ width: 27px; height: 27px; border: solid 2px #5d0385; display: flex; justify-content: center; align-items: center; margin-top: 5px; padding: 0px; cursor: pointer; margin-left:28px; box-shadow: 2px 2px 2px #5d03858c; } body.sheet-darkmode .charsheet button.sheet-injury7, body.sheet-darkmode .charsheet button.sheet-balance7{ border: none; background-color: #3b3a3aa6; box-shadow: none; box-shadow: 2px 2px 2px #5d0385c9; margin-left: 32px; } .charsheet button.sheet-injury_bone1, .charsheet button.sheet-balance_bone1, .charsheet button.sheet-injury_bone2, .charsheet button.sheet-balance_bone2{ width: 27px; height: 27px; border: solid 2px #000; display: flex; justify-content: center; align-items: center; margin-top: 5px; padding: 0px; cursor: pointer; } body.sheet-darkmode .charsheet button.sheet-injury_bone1, body.sheet-darkmode .charsheet button.sheet-balance_bone1, body.sheet-darkmode .charsheet button.sheet-injury_bone2, body.sheet-darkmode .charsheet button.sheet-balance_bone2{ border: solid 2px #000; background-color: #dddcdc; } .charsheet button:hover.sheet-profil_reserve, .charsheet button:hover.sheet-beat_reserve, .charsheet button:hover.sheet-endure_reserve, .charsheet button:hover.sheet-cross_reserve, .charsheet button:hover.sheet-know_reserve, .charsheet button:hover.sheet-think_reserve, .charsheet button:hover.sheet-use_reserve, .charsheet button:hover.sheet-influence_reserve, .charsheet button:hover.sheet-sense_reserve, .charsheet button:hover.sheet-feel_reserve, .charsheet button:hover.sheet-balance_reserve, .charsheet button:hover.sheet-link_reserve { background-color: #650000; transition: 0.7s; } body.sheet-darkmode .charsheet button:hover.sheet-profil_reserve, body.sheet-darkmode .charsheet button:hover.sheet-beat_reserve, body.sheet-darkmode .charsheet button:hover.sheet-endure_reserve, body.sheet-darkmode .charsheet button:hover.sheet-cross_reserve, body.sheet-darkmode .charsheet button:hover.sheet-know_reserve, body.sheet-darkmode .charsheet button:hover.sheet-think_reserve, body.sheet-darkmode .charsheet button:hover.sheet-use_reserve, body.sheet-darkmode .charsheet button:hover.sheet-influence_reserve, body.sheet-darkmode .charsheet button:hover.sheet-sense_reserve, body.sheet-darkmode .charsheet button:hover.sheet-feel_reserve, body.sheet-darkmode .charsheet button:hover.sheet-link_reserve { background-color: #6d0d15; } .charsheet button:hover.sheet-injury1, .charsheet button:hover.sheet-injury2, .charsheet button:hover.sheet-injury3, .charsheet button:hover.sheet-balance1, .charsheet button:hover.sheet-balance2, .charsheet button:hover.sheet-balance3{ background-color: #000000; transition: 0.7s; } body.sheet-darkmode .charsheet button:hover.sheet-injury1, body.sheet-darkmode .charsheet button:hover.sheet-injury2, body.sheet-darkmode .charsheet button:hover.sheet-injury3, body.sheet-darkmode .charsheet button:hover.sheet-balance1, body.sheet-darkmode .charsheet button:hover.sheet-balance2, body.sheet-darkmode .charsheet button:hover.sheet-balance3{ background-color: #6d0d15; } .charsheet button:hover.sheet-injury4, .charsheet button:hover.sheet-injury5, .charsheet button:hover.sheet-balance4, .charsheet button:hover.sheet-balance5{ background-color: #994a04; transition: 0.7s; } body.sheet-darkmode .charsheet button:hover.sheet-injury4, body.sheet-darkmode .charsheet button:hover.sheet-injury5, body.sheet-darkmode .charsheet button:hover.sheet-balance4, body.sheet-darkmode .charsheet button:hover.sheet-balance5{ background-color: #7f1313; } .charsheet button:hover.sheet-injury6, .charsheet button:hover.sheet-balance6{ background-color: #8e0303; transition: 0.7s; } body.sheet-darkmode .charsheet button:hover.sheet-injury6, body.sheet-darkmode .charsheet button:hover.sheet-balance6{ background-color: #bb0000; } .charsheet button:hover.sheet-injury7, .charsheet button:hover.sheet-balance7{ background-color: #5d0385; transition: 0.7s; } body.sheet-darkmode .charsheet button:hover.sheet-injury7, body.sheet-darkmode .charsheet button:hover.sheet-balance7{ background-color: #5d0385; } body.sheet-darkmode .charsheet button:hover.sheet-injury7, body.sheet-darkmode .charsheet button:hover.sheet-balance7{ background-color: #5d0385; } .charsheet button:hover.sheet-injury_bone1, .charsheet button:hover.sheet-balance_bone1, .charsheet button:hover.sheet-injury_bone2, .charsheet button:hover.sheet-balance_bone2{ background-color: #8e0303; transition: 0.7s; } body.sheet-darkmode .charsheet button:hover.sheet-injury_bone1, body.sheet-darkmode .charsheet button:hover.sheet-balance_bone1, body.sheet-darkmode .charsheet button:hover.sheet-injury_bone2, body.sheet-darkmode .charsheet button:hover.sheet-balance_bone2{ background-color: #000; } .charsheet button.sheet-profil_reserve > span, .charsheet button.sheet-beat_reserve > span, .charsheet button.sheet-endure_reserve > span, .charsheet button.sheet-cross_reserve > span, .charsheet button.sheet-know_reserve > span, .charsheet button.sheet-think_reserve > span, .charsheet button.sheet-use_reserve > span, .charsheet button.sheet-influence_reserve > span, .charsheet button.sheet-sense_reserve > span, .charsheet button.sheet-feel_reserve > span, .charsheet button.sheet-link_reserve > span { width: 27px; height: 27px; display: flex; justify-content: center; align-items: center; background-color: #000000; font-size: 20px; color: #ffffffdb; font-weight: bold; } body.sheet-darkmode .charsheet button.sheet-profil_reserve > span, body.sheet-darkmode .charsheet button.sheet-beat_reserve > span, body.sheet-darkmode .charsheet button.sheet-endure_reserve > span, body.sheet-darkmode .charsheet button.sheet-cross_reserve > span, body.sheet-darkmode .charsheet button.sheet-know_reserve > span, body.sheet-darkmode .charsheet button.sheet-think_reserve > span, body.sheet-darkmode .charsheet button.sheet-use_reserve > span, body.sheet-darkmode .charsheet button.sheet-influence_reserve > span, body.sheet-darkmode .charsheet button.sheet-sense_reserve > span, body.sheet-darkmode .charsheet button.sheet-feel_reserve > span, body.sheet-darkmode .charsheet button.sheet-link_reserve > span { background-color: #6d0d15; color: #ffffffdb; } .charsheet button.sheet-injury1 > span, .charsheet button.sheet-injury2 > span, .charsheet button.sheet-injury3 > span, .charsheet button.sheet-balance1 > span, .charsheet button.sheet-balance2 > span, .charsheet button.sheet-balance3 > span{ width: 27px; height: 27px; display: flex; justify-content: center; align-items: center; background-color: #000000; font-size: 20px; color: #ffffffdb; font-weight: bold; } body.sheet-darkmode .charsheet button.sheet-injury1 > span, body.sheet-darkmode .charsheet button.sheet-injury2 > span, body.sheet-darkmode .charsheet button.sheet-injury3 > span, body.sheet-darkmode .charsheet button.sheet-balance1 > span, body.sheet-darkmode .charsheet button.sheet-balance2 > span, body.sheet-darkmode .charsheet button.sheet-balance3 > span{ background-color: #6d0d15; color: #ffffffdb; } .charsheet button.sheet-injury4 > span, .charsheet button.sheet-injury5 > span, .charsheet button.sheet-balance4 > span, .charsheet button.sheet-balance5 > span{ width: 27px; height: 27px; display: flex; justify-content: center; align-items: center; background-color: #994a04; font-size: 20px; color: #ffffffdb; font-weight: bold; } body.sheet-darkmode .charsheet button.sheet-injury4 > span, body.sheet-darkmode .charsheet button.sheet-injury5 > span, body.sheet-darkmode .charsheet button.sheet-balance4 > span, body.sheet-darkmode .charsheet button.sheet-balance5 > span{ background-color: #7f1313; color: #ffffffdb; } .charsheet button.sheet-injury6 > span, .charsheet button.sheet-balance6 > span{ width: 27px; height: 27px; display: flex; justify-content: center; align-items: center; background-color: #8e0303; font-size: 20px; color: #ffffffdb; font-weight: bold; } body.sheet-darkmode .charsheet button.sheet-injury6 > span, body.sheet-darkmode .charsheet button.sheet-balance6 > span{ background-color: #bb0000; color: #e7e5e5; } .charsheet button.sheet-injury7 > span, .charsheet button.sheet-balance7 > span{ width: 27px; height: 27px; display: flex; justify-content: center; align-items: center; background-color: #5d0385; font-size: 20px; color: #ffffffdb; font-weight: bold; } body.sheet-darkmode .charsheet button.sheet-injury7 > span, body.sheet-darkmode .charsheet button.sheet-balance7 > span{ background-color: #5d0385; color: #e7e5e5; } .charsheet button.sheet-injury_bone1 > span, .charsheet button.sheet-balance_bone1 > span, .charsheet button.sheet-injury_bone2 > span, .charsheet button.sheet-balance_bone2 > span{ width: 27px; height: 27px; display: flex; justify-content: center; align-items: center; background-color: #8e0303; font-size: 20px; color: #ffffffdb; font-weight: bold; } body.sheet-darkmode .charsheet button.sheet-injury_bone1 > span, body.sheet-darkmode .charsheet button.sheet-balance_bone1 > span, body.sheet-darkmode .charsheet button.sheet-injury_bone2 > span, body.sheet-darkmode .charsheet button.sheet-balance_bone2 > span{ background-color: #000; color: #ffffffdb; } /* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */ /* PROFIL DOT */ .charsheet input.sheet-profil_reserve[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;} .charsheet input.sheet-profil_reserve[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;} .charsheet input.sheet-profil_reserve[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;} .charsheet input.sheet-profil_reserve[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;} .charsheet input.sheet-profil_reserve[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;} .charsheet input.sheet-profil_reserve[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;} .charsheet input.sheet-profil_reserve[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;} .charsheet input.sheet-profil_reserve[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;} /* BEAT */ .charsheet input.sheet-beat_reserve[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;} .charsheet input.sheet-beat_reserve[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;} .charsheet input.sheet-beat_reserve[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;} .charsheet input.sheet-beat_reserve[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;} .charsheet input.sheet-beat_reserve[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;} .charsheet input.sheet-beat_reserve[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;} .charsheet input.sheet-beat_reserve[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;} .charsheet input.sheet-beat_reserve[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;} /* ENDURE */ .charsheet input.sheet-endure_reserve[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;} .charsheet input.sheet-endure_reserve[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;} .charsheet input.sheet-endure_reserve[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;} .charsheet input.sheet-endure_reserve[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;} .charsheet input.sheet-endure_reserve[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;} .charsheet input.sheet-endure_reserve[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;} .charsheet input.sheet-endure_reserve[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;} .charsheet input.sheet-endure_reserve[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;} /* CROSS */ .charsheet input.sheet-cross_reserve[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;} .charsheet input.sheet-cross_reserve[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;} .charsheet input.sheet-cross_reserve[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;} .charsheet input.sheet-cross_reserve[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;} .charsheet input.sheet-cross_reserve[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;} .charsheet input.sheet-cross_reserve[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;} .charsheet input.sheet-cross_reserve[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;} .charsheet input.sheet-cross_reserve[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;} /* KNOW */ .charsheet input.sheet-know_reserve[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;} .charsheet input.sheet-know_reserve[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;} .charsheet input.sheet-know_reserve[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;} .charsheet input.sheet-know_reserve[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;} .charsheet input.sheet-know_reserve[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;} .charsheet input.sheet-know_reserve[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;} .charsheet input.sheet-know_reserve[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;} .charsheet input.sheet-know_reserve[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;} /* THINK */ .charsheet input.sheet-think_reserve[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;} .charsheet input.sheet-think_reserve[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;} .charsheet input.sheet-think_reserve[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;} .charsheet input.sheet-think_reserve[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;} .charsheet input.sheet-think_reserve[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;} .charsheet input.sheet-think_reserve[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;} .charsheet input.sheet-think_reserve[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;} .charsheet input.sheet-think_reserve[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;} /* USE */ .charsheet input.sheet-use_reserve[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;} .charsheet input.sheet-use_reserve[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;} .charsheet input.sheet-use_reserve[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;} .charsheet input.sheet-use_reserve[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;} .charsheet input.sheet-use_reserve[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;} .charsheet input.sheet-use_reserve[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;} .charsheet input.sheet-use_reserve[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;} .charsheet input.sheet-use_reserve[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;} /* INFLUENCE */ .charsheet input.sheet-influence_reserve[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;} .charsheet input.sheet-influence_reserve[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;} .charsheet input.sheet-influence_reserve[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;} .charsheet input.sheet-influence_reserve[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;} .charsheet input.sheet-influence_reserve[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;} .charsheet input.sheet-influence_reserve[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;} .charsheet input.sheet-influence_reserve[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;} .charsheet input.sheet-influence_reserve[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;} /* SENSE */ .charsheet input.sheet-sense_reserve[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;} .charsheet input.sheet-sense_reserve[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;} .charsheet input.sheet-sense_reserve[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;} .charsheet input.sheet-sense_reserve[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;} .charsheet input.sheet-sense_reserve[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;} .charsheet input.sheet-sense_reserve[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;} .charsheet input.sheet-sense_reserve[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;} .charsheet input.sheet-sense_reserve[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;} /* FEEL */ .charsheet input.sheet-feel_reserve[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;} .charsheet input.sheet-feel_reserve[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;} .charsheet input.sheet-feel_reserve[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;} .charsheet input.sheet-feel_reserve[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;} .charsheet input.sheet-feel_reserve[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;} .charsheet input.sheet-feel_reserve[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;} .charsheet input.sheet-feel_reserve[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;} .charsheet input.sheet-feel_reserve[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;} /* LINK */ .charsheet input.sheet-link_reserve[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;} .charsheet input.sheet-link_reserve[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;} .charsheet input.sheet-link_reserve[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;} .charsheet input.sheet-link_reserve[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;} .charsheet input.sheet-link_reserve[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;} .charsheet input.sheet-link_reserve[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;} .charsheet input.sheet-link_reserve[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;} .charsheet input.sheet-link_reserve[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;} /* INJURY AND BALANCE */ .charsheet input.sheet-injury1:not([value="1"]) ~ button.sheet-injury1 > span.sheet-checked1, .charsheet input.sheet-injury2:not([value="1"]) ~ button.sheet-injury2 > span.sheet-checked2, .charsheet input.sheet-injury3:not([value="1"]) ~ button.sheet-injury3 > span.sheet-checked3, .charsheet input.sheet-injury4:not([value="1"]) ~ button.sheet-injury4 > span.sheet-checked4, .charsheet input.sheet-injury5:not([value="1"]) ~ button.sheet-injury5 > span.sheet-checked5, .charsheet input.sheet-injury6:not([value="1"]) ~ button.sheet-injury6 > span.sheet-checked6, .charsheet input.sheet-injury7:not([value="1"]) ~ button.sheet-injury7 > span.sheet-checked7, .charsheet input.sheet-injury_bone1:not([value="1"]) ~ button.sheet-injury_bone1 > span.sheet-checked21, .charsheet input.sheet-injury_bone2:not([value="1"]) ~ button.sheet-injury_bone2 > span.sheet-checked22, .charsheet input.sheet-balance1:not([value="1"]) ~ button.sheet-balance1 > span.sheet-checked11, .charsheet input.sheet-balance2:not([value="1"]) ~ button.sheet-balance2 > span.sheet-checked12, .charsheet input.sheet-balance3:not([value="1"]) ~ button.sheet-balance3 > span.sheet-checked13, .charsheet input.sheet-balance4:not([value="1"]) ~ button.sheet-balance4 > span.sheet-checked14, .charsheet input.sheet-balance5:not([value="1"]) ~ button.sheet-balance5 > span.sheet-checked15, .charsheet input.sheet-balance6:not([value="1"]) ~ button.sheet-balance6 > span.sheet-checked16, .charsheet input.sheet-balance7:not([value="1"]) ~ button.sheet-balance7 > span.sheet-checked17, .charsheet input.sheet-balance_bone1:not([value="1"]) ~ button.sheet-balance_bone1 > span.sheet-checked23, .charsheet input.sheet-balance_bone2:not([value="1"]) ~ button.sheet-balance_bone2 > span.sheet-checked24{ display: none; } /*------------------------------------*\ #Dice TAB \*------------------------------------*/ .dice_tab1_character { grid-column: 5; grid-row: 1; margin-top: -42px; margin-left: 10px; } .dice_tab2_character { grid-column: 5; grid-row: 1; margin-top: -175px; margin-left: 10px; } .dice_tab3_character { grid-column: 5; grid-row: 1; margin-top: -308px; margin-left: 10px; } .dice_tab4_character { grid-column: 5; grid-row: 1; margin-top: -276px; margin-left: 10px; } .dice_tab1_bone_npc { grid-column: 5; grid-row: 1; margin-top: -1000px; margin-left: 10px; } .dice_tab2_bone_npc { grid-column: 5; grid-row: 1; margin-top: -884px; margin-left: 10px; } .dice_tab3_bone_npc { grid-column: 5; grid-row: 1; margin-top: -768px; margin-left: 10px; } .dice_tab4_bone_npc { grid-column: 5; grid-row: 1; margin-top: -650px; margin-left: 10px; } .dice_tab1_npc { grid-column: 5; grid-row: 1; margin-top: -970px; margin-left: 10px; } .dice_tab2_npc { grid-column: 5; grid-row: 1; margin-top: -854px; margin-left: 10px; } .dice_tab3_npc { grid-column: 5; grid-row: 1; margin-top: -738px; margin-left: 10px; } .dice_tab4_npc { grid-column: 5; grid-row: 1; margin-top: -620px; margin-left: 10px; } .dice_tab_capacity { grid-column: 5; grid-row: 1; margin-left: 10px; } .dice_tab1_capacity { grid-column: 5; grid-row: 1; margin-left: 10px; margin-top: -25px; } .dice_tab1_equipment { grid-column: 7; grid-row: 1; margin-top: -29px; margin-left: 11px; } .dice_tab2_equipment { grid-column: 7; grid-row: 1; margin-top: 95px; margin-left: 11px; } .dice_tab3_equipment { grid-column: 7; grid-row: 1; margin-top: 219px; margin-left: 11px; } .dice_tab4_equipment { grid-column: 7; grid-row: 1; margin-top: 120px; margin-left: 5px; } .dice_tab1_note { grid-column: 5; grid-row: 1; margin-top: 1px; margin-left: 10px; } .dice_tab2_note { grid-column: 5; grid-row: 1; margin-top: 160px; margin-left: 10px; } .dice_tab3_note { grid-column: 5; grid-row: 1; margin-top: 319px; margin-left: 10px; } .dice_tab4_note { grid-column: 5; grid-row: 1; margin-top: 480px; margin-left: 10px; } span.dice_tab{ writing-mode: vertical-lr; font-size: 20px; margin-top: 1px; background-color: #a1a09f; border-bottom-style: solid; border-top-style: solid; border-left: solid; border-left-color: currentcolor; border-left-width: medium; border-width: 2px; border-color: #a1a09f; border-radius: 10px 0px 0px 10px; color: white; line-height: 1.5; height: 135px; text-align: center; width: 30px; box-shadow: -3px 3px 3px #000000b3; } body.sheet-darkmode span.dice_tab{ background-color: #1f1f1f; border-color: #1f1f1f; color: #ffffff; box-shadow: -2px 3px 3px #797979; } /*------------------------------------*\ #Character Section \*------------------------------------*/ /*--- Character Section Grid ---*/ .avatar_img{ width: 100px; height: 100px; margin-top: -25px; opacity: 0.9; /* background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/empty_avatar.jpg"); */ background-size: contain; background-repeat: no-repeat; } body.sheet-darkmode .avatar_img{ } .wrapper_name { max-width: 600px; } .wrapper_name{ display: grid; grid-template-columns: 120px 556px; grid-auto-rows: 30px; padding-top: 13px; } .wrapper { max-width: 600px; } .wrapper{ display: grid; grid-template-columns: 336px 336px 74px 21px; grid-auto-rows: 30px; padding-top: 13px; } .avatar { grid-column: 1; grid-row: 1; font-size: 20px; line-height: 1.5; display:flex; } .name { grid-column: 2; grid-row: 1; font-size: 20px; line-height: 1.5; display:flex; } .profil_title, .style_title, .background_title, .bond_title{ grid-column: 1 / 3; grid-row: 1 / 3; font-size: 20px; line-height: 1.5; display:flex; } .profil_title{ margin-top: 45px; } .style_title{ margin-top: 25px; } .background_title{ margin-top: 15px; } .bond_title{ margin-top: -15px; } .profil, .style, .background, .bond{ grid-column: 1 / 3; grid-row: 1 / 3; font-size: 20px; line-height: 1.5; display:flex; margin-top: 5px; } .style{ margin-top: -15px; } .background{ margin-top: -35px; } .bond{ margin-top: -55px; } .possession{ grid-column: 1 / 3; grid-row: 1; font-size: 20px; line-height: 1.5; display:flex; margin-top: -20px; margin-bottom: 10px; } .possession1{ grid-column: 1; grid-row: 1 / auto; margin-top: -25px; } .possession2{ grid-column: 2; grid-row: 1 / auto; margin-top: -25px; } .trauma_title{ grid-column: 2; grid-row: 1 / auto; font-size: 20px; line-height: 1.5; display:flex; margin-top: -10px; margin-bottom: 10px; } .trauma{ grid-column: 2; grid-row: 1 / auto; margin-top: -25px; } .state_title{ grid-column: 1 / 3; grid-row: 1 / auto; font-size: 20px; line-height: 1.5; display:flex; margin-top: -20px; margin-bottom: 10px; } .state{ grid-column: 1; grid-row: 1 / auto; margin-top: -25px; } .my_note{ grid-column: 1 / 4; grid-row: 1 / 1; } .title{ grid-column: 1 / 3; grid-row: 1; font-size: 20px; line-height: 1.5; display:flex; margin-bottom: -16px; } /*--- Character Section Style ---*/ .charsheet div.section-profile{ padding-top: 30px; padding-bottom: 10px; margin-left: 20px; height: 350px; } input[type=text], input[type=number] { display: inline-block; margin-right: 5px; box-shadow: none; border: none; border-bottom:1px solid #000000; -moz-appearance:textfield; font-size: 16px; margin-left: 20px; background-color: #ffffff00; } body.sheet-darkmode input[type=text], input[type=number] { border-bottom: none; } .charsheet textarea.character { height: 65px; line-height: 1.3; font-size: 16px !important; background-color: #0000000f; border-top-left-radius: 8px; border-bottom-right-radius: 8px; border: none; resize:none; box-shadow: 1px 1px 1px #0000005e; } .charsheet textarea.notes { height: 765px; line-height: 1.3; font-size: 16px !important; background-color: #0000000f; border-top-left-radius: 8px; border-bottom-right-radius: 8px; border: solid 1px #888888; padding: 10px; resize:none; box-shadow: 1px 1px 1px #0000005e; } .charsheet textarea.notes_npc { height: 100px; line-height: 1.3; font-size: 16px !important; background-color: #0000000f; border-top-left-radius: 8px; border-bottom-right-radius: 8px; border: solid 1px #888888; padding: 10px; resize:none; box-shadow: 1px 1px 1px #0000005e; } body.sheet-darkmode .charsheet textarea.character { background-color: #6d0d154d; color: #cccbcbc2; box-shadow: 2px 2px 2px #cecece21; } body.sheet-darkmode .charsheet textarea.notes, body.sheet-darkmode .charsheet textarea.notes_npc { border-color: #4b4b4c; background-color: #6d0d1547; box-shadow: 2px 2px 2px #cecece21; } .charsheet input.simple, .charsheet input.semi, .charsheet textarea, .charsheet input.capacity_value { font-family:'Itim'; } .charsheet input.simple { width: 304px; font-size: 16px !important; flex: 1; background-color: #0000000f; border-top-left-radius: 8px; border-bottom-right-radius: 8px; border: none; box-shadow: 1px 1px 1px #0000005e; } .charsheet input.semi { font-size: 16px !important; width: 300px; background-color: #0000000f; border-top-left-radius: 8px; border-bottom-right-radius: 8px; border: none; margin-left: 0px; box-shadow: 1px 1px 1px #0000005e; } .charsheet div.profile-notes { padding-top: 0px; } body.sheet-darkmode .charsheet input.simple, body.sheet-darkmode .charsheet input.semi { background-color: #6d0d154d; border-top-left-radius: 8px; border-bottom-right-radius: 8px; border: none; color: #b3b3b3b0; box-shadow: 2px 2px 2px #cecece21; } body.sheet-darkmode .charsheet textarea.notes { background-color: #6d0d1530; border-top-left-radius: 8px; border-bottom-right-radius: 8px; border: solid 1px grey; color: #b3b3b3b0; } body.sheet-darkmode .charsheet input.capacity_value, body.sheet-darkmode .charsheet input.capacity_classic_value{ color: #ffffffbd; } .dirty_system { grid-column: 1; grid-row: 1; line-height: 0.9; margin-top: -20px; text-align: center; margin-left: -30px; } span.dirty_system { font-size: 20px !important; border: none; margin-left: 0px; margin-bottom: 07px; font-family: "Stylish"; font-weight: bold; text-align: center; color: #6f6e6e; } body.sheet-darkmode span.dirty_system { color: #ebe9e4; } /*----------- Capacity Section -------------*/ .wrapper_capacity { display: grid; grid-template-columns: 30px 140px 46px 580px 0px; grid-auto-rows: 40px; padding-top: 13px; } .wrapper_capacity_bone { display: grid; grid-template-columns: 140px 46px 140px 46px 140px 46px; grid-auto-rows: 40px; padding-top: 13px; margin-left: 30px; } .wrapper_capacity_bone1 { display: grid; grid-template-columns: 70px 46px 140px 46px 140px 46px; grid-auto-rows: 40px; padding-top: 13px; margin-left: 30px; } .wrapper_capacity_bone2 { display: grid; grid-template-columns: 70px 65px 54px 117px 65px 54px; grid-auto-rows: 40px; padding-top: 13px; margin-left: 30px; } .wrapper_info_injury { display: grid; grid-template-columns: 225px 106px 72px 62px; grid-auto-rows: 8px; padding-top: 20px; } .wrapper_info_balance { display: grid; grid-template-columns: 225px 106px 72px 62px; grid-auto-rows: 8px; padding-bottom: 20px; } .wrapper_info_bone_up { display: grid; grid-template-columns: 48px 108px 57px 180px 55px; grid-auto-rows: 8px; padding-top: 24px; margin-bottom: -5px; } .wrapper_info_bone_down { display: grid; grid-template-columns: 55px 105px 59px 174px 57px; grid-auto-rows: 8px; padding-bottom: 20px; padding-top: 3px; } .wrapper_link { display: grid; grid-template-columns: 100px 627px 100px; grid-auto-rows: 30px; border-top-style: solid; border-right-style: solid; border-color: #9b9a9a; border-width: 3px; padding-top: 57px; padding-left: 10px; margin-top: 5px; margin-right: 529px; margin-bottom: -22px; border-radius: 0px 120px; } body.sheet-darkmode .wrapper_link { border-color: #414040; } body.sheet-darkmode .wrapper_xcard { border-color: #4b4e4e; } .wrapper_xcard_character { display: grid; grid-template-columns: 82px 625px 100px; grid-auto-rows: 30px; margin-top: -41px; } body.sheet-darkmode .wrapper_xcard_character { border-color: #4b4e4e; } .wrapper_xcard_equipment { display: grid; grid-template-columns: 82px 625px 100px; grid-auto-rows: 30px; padding-top: 316px; } body.sheet-darkmode .wrapper_xcard_equipment { border-color: #4b4e4e; } .wrapper_xcard_notes { display: grid; grid-template-columns: 82px 625px 100px; grid-auto-rows: 30px; padding-top: 742px; } body.sheet-darkmode .wrapper_xcard_equipment { border-color: #4b4e4e; } .capacity_type { grid-column: 1; grid-row: 1; } span.capacity_type{ writing-mode: vertical-lr; font-size: 18px; margin-top: 1px; background-color: #a1a09f; border-bottom-style: solid; border-top-style: solid; border-right: solid; border-width: 2px; border-color: #a09f9e; border-radius: 0px 10px 10px 0px; color: #ffffffbd; line-height: 1.1; height: 135px; text-align: center; box-shadow: 3px 3px 3px #000000b3; } body.sheet-darkmode span.capacity_type{ background-color: #1f1f1f; border: none; color: #ffffffbd; box-shadow: 2px 3px 3px #797979; } span.whiteless { color: #fffffff0; } body.sheet-darkmode span.whiteless { color: #ffffffbd; } .title_capacity { grid-column: 2; grid-row: 1; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/capacity_background.png); background-size: contain; background-repeat: no-repeat; padding-top: 6px; padding-left: 18px; color: white; font-family: 'Stylish'; font-size: 20px; display: flex; width: 160px; } .title_profil { grid-column: 2; grid-row: 1; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/profil_background.png), url(https://raw.githubusercontent.com/ctotone/JdR/main/Dirty/img/profil_background.png); background-size: contain; background-repeat: no-repeat; padding-top: 6px; padding-left: 18px; color: white; font-family: 'Stylish'; font-size: 20px; display: flex; width: 160px; } .title_capacity1, .title_capacity2, .title_capacity3 { grid-row: 1; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/capacity_background.png); background-size: contain; background-repeat: no-repeat; padding-top: 6px; padding-left: 18px; color: white; font-family: 'Stylish'; font-size: 20px; display: flex; width: 160px; } .title_capacity1 { grid-column: 1; } .title_capacity2 { grid-column: 3; } .title_capacity3 { grid-column: 5; } body.sheet-darkmode .title_capacity1, body.sheet-darkmode .title_capacity2, body.sheet-darkmode .title_capacity3{ background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/capacity_dark.png); } .title_injury { grid-column: 2; grid-row: 1; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/injury_background.png); background-size: contain; background-repeat: no-repeat; padding-top: 6px; padding-left: 18px; color: white; font-family: 'Stylish'; font-size: 20px; display: flex; width: 160px; } .title_balance { grid-column: 2; grid-row: 1; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/balance_background.png); background-size: contain; background-repeat: no-repeat; padding-top: 6px; padding-left: 18px; color: white; font-family: 'Stylish'; font-size: 20px; display: flex; width: 160px; } .title_injury_bone { grid-column: 2; grid-row: 1; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/bone_injury_background.png); background-size: contain; background-repeat: no-repeat; padding-top: 6px; padding-left: 18px; color: white; font-family: 'Stylish'; font-size: 20px; display: flex; width: 160px; } .title_balance_bone { grid-column: 5; grid-row: 1; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/bone_balance_background.png); background-size: contain; background-repeat: no-repeat; padding-top: 6px; padding-left: 18px; color: white; font-family: 'Stylish'; font-size: 20px; display: flex; width: 160px; } body.sheet-darkmode .title_capacity { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/capacity_dark.png); } body.sheet-darkmode .title_profil { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/profil_dark.png), url(https://raw.githubusercontent.com/ctotone/JdR/main/Dirty/img/profil_dark.png); } body.sheet-darkmode .title_injury { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/capacity_injury_dark.png); } body.sheet-darkmode .title_balance { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/capacity_balance_dark.png); } body.sheet-darkmode .title_injury_bone { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/bone_capacity_injury_dark.png); } body.sheet-darkmode .title_balance_bone { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/bone_capacity_balance_dark.png); } .charsheet .value_contener { grid-column: 3; grid-row: 1; padding-top: 4px; } .charsheet .value_contener1 { grid-column: 2; grid-row: 1; padding-top: 4px; } .charsheet .value_contener2 { grid-column: 4; grid-row: 1; padding-top: 4px; } .charsheet .value_contener3 { grid-column: 6; grid-row: 1; padding-top: 4px; } .reserve_rank { grid-column: 4; grid-row: 1; } .injury_dot1 { grid-column: 3; grid-row: 1; } .injury_dot2 { grid-column: 4; grid-row: 1; } .balance_dot1 { grid-column: 6; grid-row: 1; } .balance_dot2 { grid-column: 7; grid-row: 1; } .header-grid_capacity_adjust { grid-column: 5; grid-row: 1; padding-top: 27px; } .header-grid { grid-column: 5; grid-row: 1; padding-top: 27px; } .header-grid_capacity { grid-column: 5; grid-row: 1; padding-top: 27px; } .charsheet input.capacity_value { width: 30px; height: 30px; font-size: 30px !important; border: none; border-radius: 30px; padding-top: 4px; margin-left: 2px; font-family: "Stylish"; font-weight: bold; color: #000000a1; text-align: center; } .charsheet input.capacity_classic_value { width: 30px; height: 30px; font-size: 20px !important; border: none; border-radius: 30px; padding-top: 6px; margin-left: 2px; font-family: "Stylish"; font-weight: bold; color: #000000a1; text-align: center; } .injury_light_info, .balance_light_info { grid-column: 2; grid-row: 1; line-height: 0.9; } .injury_serious_info, .balance_serious_info { grid-column: 3; grid-row: 1; line-height: 0.9; } .injury_severe_info, .balance_severe_info { grid-column: 4; grid-row: 1; line-height: 0.9; } .injury_agony_info, .balance_crisis_info { grid-column: 5; grid-row: 1; line-height: 0.9; } span.injury_light_info, span.injury_serious_info, span.injury_severe_info, span.injury_light_info2, span.injury_severe_info2, span.injury_serious_info2, span.balance_light_info, span.balance_serious_info, span.balance_severe_info, span.balance_light_info2, span.balance_severe_info2, span.balance_serious_info2, span.balance_crisis_info, span.injury_agony_info { color: #a1a09e; font-size : 14px; } span.injury_light_info2, span.injury_severe_info2, span.injury_serious_info2, span.balance_light_info2, span.balance_severe_info2, span.balance_serious_info2 { font-size : 12px; } span.bone_info, span.bone_info_2 { color: #a1a09e; font-size : 14px; } span.bone_info_2 { font-size : 11px; } .bone_info_up1, .bone_info_down1 { grid-column: 3; grid-row: 1; line-height: 0.9; } .bone_info_up2, .bone_info_down2 { grid-column: 4; grid-row: 1; line-height: 0.9; } .bone_info_up3, .bone_info_down3 { grid-column: 5; grid-row: 1; line-height: 0.9; } .bone_info_up4, .bone_info_down4 { grid-column: 6; grid-row: 1; line-height: 0.9; } span.bone_info_up1, span.bone_info_up2, span.bone_info_up3, span.bone_info_up4, span.bone_info_down1, span.bone_info_down2, span.bone_info_down3, span.bone_info_down4{ color: #a1a09e; font-size : 14px; } .title_link { grid-column: 1; grid-row: 1; line-height: 0.9; margin-top: -20px; text-align: center; margin-left: -30px; } span.title_link { font-size: 20px !important; border: none; margin-left: 0px; margin-bottom: 07px; font-family: "Stylish"; font-weight: bold; text-align: center; color: #6f6e6e; } body.sheet-darkmode span.title_link { color: #a1a09e; } .value_link { grid-column: 1; grid-row: 2; line-height: 0.9; margin-top: -20px; text-align: center; margin-left: -30px; } .charsheet input.link_value { width: 30px; height: 30px; font-size: 30px !important; border: none; border-radius: 30px; padding-top: 4px; margin-left: 2px; font-family: "Stylish"; font-weight: bold; color: #6f6e6e; text-align: center; } body.sheet-darkmode .charsheet input.link_value { color: #ebe9e4; } body.sheet-darkmode .charsheet input.link_value::placeholder{ color: #b5b5b56b; } .xcard { grid-column: 3; grid-row: 2; text-align: center; border-top-style: solid; border-left-style: solid; border-color: #d9d8d6; border-width: 3px; padding-top: 9px; padding-left: 10px; margin-top: -39px; margin-left: 30px; border-radius: 90px 0px 0px 0px; } body.sheet-darkmode .xcard { border-color: #2c2e2e; } span.card { font-size: 40px; font-family: "Stylish"; font-weight: bold; text-align: center; color: #6f6e6e38; } body.sheet-darkmode span.card { color: #4b4e4e4f; } .efficiency_reminder { grid-column: 2; grid-row: 1 / 2; line-height: 0.9; margin-top: -20px; text-align: center; margin-left: -10px; text-align: left; } span.efficiency_reminder { font-size: 12px !important; border: none; margin-left: 25px; font-family: "Stylish"; color: #a4a3a2; } /*----------- Equipment Section -------------*/ .wrapper_weapon_title { display: grid; grid-template-columns: 183px 80px 115px 100px 247px; grid-auto-rows: 20px; grid-gap: 6px; margin-top: 25px; font-family: 'Stylish'; font-size: 16px !important; color: #ffffff; } .wrapper_weapon { display: grid; grid-template-columns: 183px 80px 115px 100px 247px 5px 0px; grid-auto-rows: 25px; grid-gap: 6px; padding-top: 10px; font-family: 'Stylish'; text-align: center; font-size: 20px !important; } .weapon1_title, .weapon2_title, .weapon3_title, .weapon4_title, .weapon5_title, .gear1_title, .gear2_title, .gear3_title, .defense1_title, .defense2_title, .defense3_title { grid-row: 1; padding-left: 4px; margin-bottom: -3px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; border-top: solid 1px; border-left: solid 1px; border-color: #00000073; background-color: #000000; } body.sheet-darkmode .weapon1_title, body.sheet-darkmode .weapon2_title, body.sheet-darkmode .weapon3_title, body.sheet-darkmode .weapon4_title, body.sheet-darkmode .weapon5_title, body.sheet-darkmode .gear1_title, body.sheet-darkmode .gear2_title, body.sheet-darkmode .gear3_title, body.sheet-darkmode .defense1_title, body.sheet-darkmode .defense2_title, body.sheet-darkmode .defense3_title { border-top: solid 1px; border-left: solid 1px; border-color: #888888; background-color: #6b0000a8; } .weapon1_title {grid-column: 1;} .weapon2_title {grid-column: 2;} .weapon3_title {grid-column: 3;} .weapon4_title {grid-column: 4;} .weapon5_title {grid-column: 5;} .gear1_title {grid-column: 1;} .gear2_title {grid-column: 2;} .gear3_title {grid-column: 3;} .defense1_title {grid-column: 1;} .defense2_title {grid-column: 2;} .defense3_title {grid-column: 3;} .weapon1_title, .weapon2_title, .weapon3_title, .weapon4_title, .weapon5_title, .gear1_title, .gear2_title, .gear3_title, .defense1_title, .defense2_title, .defense3_title, .weapon1, .weapon2, .weapon3, .weapon4, .weapon5, .gear1, .defense1, .gear2, .defense2, .gear3, .defense3 { box-shadow: 1px 1px 1px #0000005e; } body.sheet-darkmode .weapon1_title, body.sheet-darkmode .weapon2_title, body.sheet-darkmode .weapon3_title, body.sheet-darkmode .weapon4_title, body.sheet-darkmode .weapon5_title, body.sheet-darkmode .gear1_title, body.sheet-darkmode .gear2_title, body.sheet-darkmode .gear3_title, body.sheet-darkmode .defense1_title, body.sheet-darkmode .defense2_title, body.sheet-darkmode .defense3_title, body.sheet-darkmode .weapon1, body.sheet-darkmode .weapon2, body.sheet-darkmode .weapon3, body.sheet-darkmode .weapon4, body.sheet-darkmode .weapon5, body.sheet-darkmode .gear1, body.sheet-darkmode .defense1, body.sheet-darkmode .gear2, body.sheet-darkmode .defense2, body.sheet-darkmode .gear3, body.sheet-darkmode .defense3 { box-shadow: 2px 2px 2px #cecece21; } .weapon1 { grid-column: 1; grid-row: 1; background-color: #0000000f; margin-bottom: -3px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; } .weapon2 { grid-column: 2; grid-row: 1; background-color: #0000000f; margin-bottom: -3px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; } .weapon3 { grid-column: 3; grid-row: 1; background-color: #0000000f; margin-bottom: -3px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; } .weapon4 { grid-column: 4; grid-row: 1; background-color: #0000000f; margin-bottom: -3px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; } .weapon5 { grid-column: 5; grid-row: 1; background-color: #0000000f; margin-bottom: -3px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; } body.sheet-darkmode .weapon1, body.sheet-darkmode .weapon2, body.sheet-darkmode .weapon5 { background-color: #6d0d154d; color: #bfbfbfb3; } body.sheet-darkmode .weapon3 body.sheet-darkmode .weapon4, { background-color: transparent; } .charsheet input.weapon_name, .charsheet input.weapon_damage, .charsheet input.weapon_note, .charsheet input.gear_name, .charsheet input.gear_quality, .charsheet input.gear_note, .charsheet input.defense_name, .charsheet input.defense_quality, .charsheet input.defense_note{ font-family:'Stylish'; } .charsheet input.weapon_name, .charsheet input.gear_name, .charsheet input.defense_name, body.sheet-darkmode .charsheet input.weapon_name, body.sheet-darkmode .charsheet input.gear_name, body.sheet-darkmode .charsheet input.defense_name{ width: 183px; font-size: 16px !important; flex: 1; margin: 0px; padding-left: 5px; padding-right: 5px; border-bottom-style: solid; box-sizing: border-box; padding: 5px; border: none; } .charsheet input.weapon_damage, body.sheet-darkmode .charsheet input.weapon_damage { width: 80px; font-size: 16px !important; flex: 1; margin: 0px; padding-left: 5px; padding-right: 5px; border: none; text-align: center; } .charsheet input.gear_quality, .charsheet input.defense_quality, body.sheet-darkmode .charsheet input.gear_quality, body.sheet-darkmode .charsheet input.defense_quality { width: 80px; font-size: 16px !important; flex: 1; margin: 0px; padding-left: 5px; padding-right: 5px; border: none; text-align: center; } .charsheet input.weapon_note, body.sheet-darkmode .charsheet input.weapon_note { width: 247px; font-size: 16px !important; flex: 1; margin: 0px; padding-left: 5px; padding-right: 5px; border: none; } .charsheet select.weapon_range, .charsheet select.weapon_effect { width: auto; font-size: 16px !important; background-color:#ffffff00; flex: 1; margin: 0px; padding-left: 5px; padding-right: 5px; border: none; } select.weapon_range option, select.weapon_effect option { background-color: #5b585845; } body.sheet-darkmode .charsheet select.weapon_range, body.sheet-darkmode .charsheet select.weapon_effect { background-color: #6d0d154d; color: #bfbfbfb3; padding-left: 13px; padding-right: 6px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; } body.sheet-darkmode select.weapon_range option, body.sheet-darkmode select.weapon_effect option { background-color: #490101; } body.sheet-darkmode .charsheet input.weapon_name, body.sheet-darkmode .charsheet input.weapon_damage, body.sheet-darkmode .charsheet input.weapon_note, body.sheet-darkmode .charsheet input.defense_name, body.sheet-darkmode .charsheet input.defense_quality, body.sheet-darkmode .charsheet input.defense_note, body.sheet-darkmode .charsheet input.gear_name, body.sheet-darkmode .charsheet input.gear_quality, body.sheet-darkmode .charsheet input.gear_note { color: #bfbfbfb3; } .wrapper_gear_title, .wrapper_defense_title{ display: grid; grid-template-columns: 183px 80px 473px; grid-auto-rows: 20px; grid-gap: 6px; margin-top: 40px; font-family: 'Stylish'; font-size: 16px !important; color: #ffffff; } .wrapper_gear, .wrapper_defense{ display: grid; grid-template-columns: 183px 80px 473px; grid-auto-rows: 25px; grid-gap: 6px; padding-top: 10px; font-family: 'Stylish'; text-align: center; font-size: 20px !important; } .gear1, .defense1 { grid-column: 1; grid-row: 1; background-color: #0000000f; margin-bottom: -3px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; } .gear2, .defense2 { grid-column: 2; grid-row: 1; background-color: #0000000f; margin-bottom: -3px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; } .gear3, .defense3 { grid-column: 3; grid-row: 1; background-color: #0000000f; margin-bottom: -3px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; } body.sheet-darkmode .gear1, body.sheet-darkmode .defense1, body.sheet-darkmode .gear2, body.sheet-darkmode .defense2, body.sheet-darkmode .gear3, body.sheet-darkmode .defense3 { background-color:#6d0d154d; color: #bfbfbfb3; } .charsheet input.gear_note, .charsheet input.defense_note, body.sheet-darkmode .charsheet input.gear_note, body.sheet-darkmode .charsheet input.defense_note{ width: 473px; font-size: 16px !important; flex: 1; margin: 0px; padding-left: 5px; padding-right: 5px; /* border-bottom-style: solid; */ /* box-sizing: border-box; */ /* padding: 5px; */ border: none; } /*----------- Notes Section -------------*/ .wrapper_note { max-width: 600px; } .wrapper_note { display: grid; grid-template-columns: 270px 330px 0px 167px; grid-auto-rows: 30px; padding-top: 13px; } .wrapper_note_npc { display: grid; grid-template-columns: 725px 0px 0px 0px; grid-auto-rows: 30px; padding-top: 13px; } div.section-notes input[type=text], input[type=number] { display: inline-block; margin-right: 5px; box-shadow: none; border: none; -moz-appearance:textfield; font-size: 17px; margin-top: -5px; padding-bottom: 2px; flex: 1; } /*----------- Capacity, Dice and XCardButton Section -------------*/ .ui-dialog .charsheet button[type=roll]::before { content: ""; } button[type="roll"].roll_capacity{ -webkit-box-shadow: none; border-style: none; background-color: transparent; background-image: none; font-size: 20px !important; font-family: "Stylish"; text-align: center; color: #d9d8d6; margin-top: -9px !important; margin-left: -3px !important; } button[type="roll"].roll_capacity:hover{ background-color: #ffffff00; border-color: transparent; background-image: none; margin-bottom: 1px; } body.sheet-darkmode button[type="roll"].roll_capacity{ color: #cfd0d0; } button[type="roll"].roll_tab{ height: 125px; border-style: none; background-color: #a1a09f; margin-left: -8px !important; margin-top: 0px !important; background-image: none; font-size: 18px !important; color: #ffffff3b; line-height: 1.1; -webkit-box-shadow: none; } button[type="roll"].roll_tab:hover{ background-color: #ffffff00; border-color: transparent; background-image: none; color: #020202ab; } body.sheet-darkmode button[type="roll"].roll_tab{ background-color: #1f1f1f !important; color: #ffffff3b; } body.sheet-darkmode button[type="roll"].roll_tab:hover{ background-color: #ffffff00; border-color: transparent; background-image: none; color: #6d0d15; } div.d6{ background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/d6_white.png); background-size: 20px 20px; background-repeat: no-repeat; width: 20px; height: 20px; } button[type="roll"].d6:before{ content: ''; } button[type="roll"].d6:hover{ background-position: 0; } button[type="roll"].d6{ background-image:url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dirty%20System/img/d6_white.png); background-size: 20px 20px; background-repeat: no-repeat; width: 15px; height: 15px; border-style: none; background-color: transparent; margin-left: 5px; -webkit-box-shadow: none; } button[type="roll"].empty:before{ content: ' '; } button[type="roll"].roll_xcard{ -webkit-box-shadow: none; border-style: none; background-color: transparent; background-image: none; font-size: 40px; font-family: "Stylish"; font-weight: bold; text-align: center; color: #d9d8d6; margin-top: -13px !important; margin-left: 17px !important; } button[type="roll"].roll_xcard:hover{ background-color: #ffffff00; border-color: transparent; background-image: none; color: #020202ab; } body.sheet-darkmode button[type="roll"].roll_xcard{ color: #2c2e2e; } body.sheet-darkmode button[type="roll"].roll_xcard:hover{ background-color: #ffffff00; border-color: transparent; background-image: none; color: #6d0d15; } /*------------------------------------*\ #Roll Template \*------------------------------------*/ /* Damage and Terror Dice */ /*Normal Mode */ .withoutavatars .sheet-rolltemplate-dirty { margin-left: -7px; } .sheet-rolltemplate-dirty .sheet-container { border: 2px solid var(--dirty-border); border-radius: 3px; box-shadow: -6px 6px 6px #00000091; } /* Header formatting - title and subtitle */ .sheet-rolltemplate-dirty .sheet-header { background-color: var(--dirty-background-header); color: #eee; text-align: left; padding: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--dirty-border); font-family: 'Stylish'; } .sheet-rolltemplate-dirty .sheet-title { font-size: 20px; } .sheet-rolltemplate-dirty .sheet-subtitle { font-size: 14px; padding-top: 4px; } .sheet-rolltemplate-dirty .sheet-container{ --dirty-background-header: #555; --dirty-border: #444141; --dirty-background-header-darkmode: #6d0d15; --dirty-border-darkmode: #000000; --dirty-content-background-darkmode: #342627; --dirty-content-desc-darkmode:#594e4e; } /* Allprops part */ .sheet-rolltemplate-dirty .sheet-content{ display: grid; background: #FFF; /* Header formatting - modify the column layout below */ grid-template-columns: auto auto; /* Line height to match default roll template */ line-height:1.4em; } .sheet-rolltemplate-dirty .sheet-content > div{ padding: 5px; } /* Left column */ .sheet-rolltemplate-dirty .sheet-content .sheet-key{ font-weight: bold; padding-right: 10px; text-align: right; font-family: 'Stylish'; font-size: 20px; } /* Wide Description field */ .sheet-rolltemplate-dirty .sheet-desc{ grid-column: span 2; padding: 5px; text-align: center; } /* dirty Dice result in chatcontainer */ .sheet-rolltemplate-dirty .inlinerollresult, .sheet-rolltemplate-dirty .inlinerollresult.importantroll, .sheet-rolltemplate-dirty .inlinerollresult.fullcrit, .sheet-rolltemplate-dirty .inlinerollresult.fullfail { border: 2px solid; border-color:black; background-color: black; color: #eee; } /* Dark mode */ .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .sheet-container { border: 2px solid var(--dirty-border-darkmode); border-radius: 3px; } .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .sheet-container { border: 2px solid var(--dirty-border-darkmode); border-radius: 3px; box-shadow: -6px 6px 6px #0000005c; } .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .sheet-header { background-color: var(--dirty-background-header-darkmode); color: #eee; border-bottom: 2px solid var(--dirty-border-darkmode); font-family: 'Stylish'; } .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .sheet-title { font-size: 20px; } .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .sheet-subtitle { font-size: 14px; padding-top: 4px; } .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .sheet-content { display: grid; background: var(--dirty-content-background-darkmode); color: #eee; grid-template-columns: auto auto; line-height:1.4em; } .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .sheet-content .sheet-key { font-weight: bold; padding-right: 10px; text-align: right; font-family: 'Stylish'; font-size: 20px;; } /* Dice result in chatcontainer */ .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .inlinerollresult, .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .inlinerollresult.importantroll, .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit, .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .inlinerollresult.fullfail { border: 2px solid; border-color:black; background-color: black; color: #eee; } /* Wide Description field */ .sheet-rolltemplate-dirty.sheet-rolltemplate-darkmode .sheet-desc { background: var(--dirty-content-desc-darkmode); grid-column: span 2; padding: 5px; text-align: center; } /* Tension Dice */ .sheet-rolltemplate-tension .sheet-content span.sheet-modifier1, .sheet-rolltemplate-tension .sheet-content span.sheet-modifier2, .sheet-rolltemplate-tension .sheet-content span.sheet-modifier3, .sheet-rolltemplate-tension .sheet-content span.sheet-modifier4, .sheet-rolltemplate-tension .sheet-content span.sheet-modifier5, .sheet-rolltemplate-tension .sheet-content span.sheet-modifier6{ border: 2px solid; color: #eee; padding: 1px; } .sheet-rolltemplate-tension .sheet-content span.sheet-modifier1, .sheet-rolltemplate-tension .sheet-content span.sheet-modifier2{ background-color: #b90505; border-color: #b90505; } .sheet-rolltemplate-tension .sheet-content span.sheet-modifier3, .sheet-rolltemplate-tension .sheet-content span.sheet-modifier4{ background-color: black; border-color:black; } .sheet-rolltemplate-tension .sheet-content span.sheet-modifier5, .sheet-rolltemplate-tension .sheet-content span.sheet-modifier6{ background-color: #0a6807; border-color: #0a6807; } .withoutavatars .sheet-rolltemplate-tension { margin-left: -7px; } .sheet-rolltemplate-tension .sheet-container { border: 2px solid var(--tension-border); border-radius: 3px; box-shadow: -6px 6px 6px #00000091; } /* Header formatting - title and subtitle */ .sheet-rolltemplate-tension .sheet-header { background-color: var(--tension-background-header); color: #eee; text-align: left; padding: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--tension-border); font-family: 'Stylish'; } .sheet-rolltemplate-tension .sheet-title { font-size: 20px; } .sheet-rolltemplate-tension .sheet-subtitle { font-size: 15px; padding-top: 10px; } .sheet-rolltemplate-tension .sheet-container{ --tension-background-header: #555; --tension-border: #444141; --tension-background-header-darkmode: #6d0d15; --tension-border-darkmode: #000000; --tension-content-background-darkmode: #594e4e; --tension-content-desc-darkmode:#594e4e; } /* Allprops part */ .sheet-rolltemplate-tension .sheet-content{ display: grid; background: #FFF; /* Header formatting - modify the column layout below */ grid-template-columns: auto auto; /* Line height to match default roll template */ line-height:1.4em; } .sheet-rolltemplate-tension .sheet-content > div{ padding: 5px; } /* Left column */ .sheet-rolltemplate-tension .sheet-content .sheet-key{ font-weight: bold; padding-right: 10px; text-align: right; font-family: 'Stylish'; font-size: 20px; } /* Left column */ .sheet-rolltemplate-tension .sheet-content .sheet-value{ font-weight: bold; padding-right: 10px; text-align: left; font-family: 'Stylish'; font-size: 20px; } /* Wide Description field */ .sheet-rolltemplate-tension .sheet-desc{ grid-column: span 2; padding: 5px; text-align: center; } /* tension Dice result in chatcontainer */ .sheet-rolltemplate-tension .inlinerollresult, .sheet-rolltemplate-tension .inlinerollresult.importantroll, .sheet-rolltemplate-tension .inlinerollresult.fullcrit, .sheet-rolltemplate-tension .inlinerollresult.fullfail { border: 2px solid; border-color:black; background-color: black; color: #eee; } /* Dark mode */ .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .sheet-container { border: 2px solid var(--tension-border-darkmode); border-radius: 3px; box-shadow: -6px 6px 6px #0000005c; } .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .sheet-header { background-color: var(--tension-background-header-darkmode); color: #eee; border-bottom: 2px solid var(--tension-border-darkmode); font-family: 'Stylish'; } .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .sheet-title { font-size: 20px; } .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .sheet-subtitle { font-size: 15px; padding-top: 10px; } .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .sheet-content { display: grid; background: var(--tension-content-background-darkmode); color: #eee; grid-template-columns: auto auto; line-height:1.4em; } .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .sheet-content .sheet-key { font-weight: bold; padding-right: 10px; text-align: right; font-family: 'Stylish'; font-size: 20px;; } .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .sheet-content :nth-child(4n+3), .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .sheet-content :nth-child(4n) { background: var(--tension-content-background-darkmode); } .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .inlinerollresult { background-color: var(--tension-background-header-darkmode) !important; color:white; } /* Dice result in chatcontainer */ /* No 6 and No 1 */ .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .inlinerollresult { border: 2px solid; border-color:black; } /* No 6 and No 1 */ .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .inlinerollresult.importantroll { border: 2px solid; border-color:#dfa900; } /* Only 6 */ .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit{ border: 2px solid; border-color:green; } /* Only 1 */ .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .inlinerollresult.fullfail { border: 2px solid; border-color:red; } /* Wide Description field */ .sheet-rolltemplate-tension.sheet-rolltemplate-darkmode .sheet-desc { background: var(--tension-content-desc-darkmode); grid-column: span 2; padding: 5px; text-align: center; } /* Tension_classic Dice */ .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier1, .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier2, .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier3, .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier4, .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier5, .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier6{ border: 2px solid; color: #eee; padding: 1px; } .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier1, .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier2{ background-color: #b90505; border-color: #b90505; } .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier3, .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier4{ background-color: black; border-color:black; } .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier5, .sheet-rolltemplate-tension-classic .sheet-content span.sheet-modifier6{ background-color: #0a6807; border-color: #0a6807; } .withoutavatars .sheet-rolltemplate-tension-classic { margin-left: -7px; } .sheet-rolltemplate-tension-classic .sheet-container { border: 2px solid var(--tension-border); border-radius: 3px; box-shadow: -6px 6px 6px #00000091; } /* Header formatting - title and subtitle */ .sheet-rolltemplate-tension-classic .sheet-header { background-color: var(--tension-background-header); color: #eee; text-align: left; padding: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--tension-border); font-family: 'Stylish'; } .sheet-rolltemplate-tension-classic .sheet-title { font-size: 20px; } .sheet-rolltemplate-tension-classic .sheet-subtitle { font-size: 15px; padding-top: 10px; } .sheet-rolltemplate-tension-classic .sheet-container{ --tension-background-header: #555; --tension-border: #444141; --tension-background-header-darkmode: #6d0d15; --tension-border-darkmode: #000000; --tension-content-background-darkmode: #594e4e; --tension-content-desc-darkmode:#594e4e; } /* Allprops part */ .sheet-rolltemplate-tension-classic .sheet-content{ display: grid; background: #FFF; /* Header formatting - modify the column layout below */ grid-template-columns: auto auto; /* Line height to match default roll template */ line-height:1.4em; } .sheet-rolltemplate-tension-classic .sheet-content > div{ padding: 5px; } /* Left column */ .sheet-rolltemplate-tension-classic .sheet-content .sheet-key{ font-weight: bold; padding-right: 10px; text-align: right; font-family: 'Stylish'; font-size: 20px; } /* Left column */ .sheet-rolltemplate-tension-classic .sheet-content .sheet-value{ font-weight: bold; padding-right: 10px; text-align: left; font-family: 'Stylish'; font-size: 20px; } /* Wide Description field */ .sheet-rolltemplate-tension-classic .sheet-desc{ grid-column: span 2; padding: 5px; text-align: center; } /* tension Dice result in chatcontainer */ .sheet-rolltemplate-tension-classic .inlinerollresult, .sheet-rolltemplate-tension-classic .inlinerollresult.importantroll, .sheet-rolltemplate-tension-classic .inlinerollresult.fullcrit, .sheet-rolltemplate-tension-classic .inlinerollresult.fullfail { border: 2px solid; border-color:black; background-color: black; color: #eee; } /* Dark mode */ .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .sheet-container { border: 2px solid var(--tension-border-darkmode); border-radius: 3px; box-shadow: -6px 6px 6px #0000005c; } .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .sheet-header { background-color: var(--tension-background-header-darkmode); color: #eee; border-bottom: 2px solid var(--tension-border-darkmode); font-family: 'Stylish'; } .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .sheet-title { font-size: 20px; } .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .sheet-subtitle { font-size: 15px; padding-top: 10px; } .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .sheet-content { display: grid; background: var(--tension-content-background-darkmode); color: #eee; grid-template-columns: auto auto; line-height:1.4em; } .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .sheet-content .sheet-key { font-weight: bold; padding-right: 10px; text-align: right; font-family: 'Stylish'; font-size: 20px;; } .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .sheet-content :nth-child(4n+3), .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .sheet-content :nth-child(4n) { background: var(--tension-content-background-darkmode); } .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .inlinerollresult { background-color: var(--tension-background-header-darkmode) !important; color:white; } /* Dice result in chatcontainer */ /* No 6 and No 1 */ .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .inlinerollresult { border: 2px solid; border-color:black; } /* No 6 and No 1 */ .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .inlinerollresult.importantroll { border: 2px solid; border-color:#dfa900; } /* Only 6 */ .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit{ border: 2px solid; border-color:green; } /* Only 1 */ .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .inlinerollresult.fullfail { border: 2px solid; border-color:red; } /* Wide Description field */ .sheet-rolltemplate-tension-classic.sheet-rolltemplate-darkmode .sheet-desc { background: var(--tension-content-desc-darkmode); grid-column: span 2; padding: 5px; text-align: center; } /* Classic Roll on D100 */ /*Normal Mode */ .withoutavatars .sheet-rolltemplate-classic { margin-left: -7px; } .sheet-rolltemplate-classic .sheet-container { border: 2px solid var(--dirty-border); border-radius: 3px; box-shadow: -6px 6px 6px #00000091; } /* Header formatting - title and subtitle */ .sheet-rolltemplate-classic .sheet-header { background-color: var(--dirty-background-header); color: #eee; text-align: left; padding: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--dirty-border); font-family: 'Stylish'; } .sheet-rolltemplate-classic .sheet-title { font-size: 20px; } .sheet-rolltemplate-classic .sheet-subtitle { font-size: 14px; padding-top: 4px; } .sheet-rolltemplate-classic .sheet-container{ --dirty-background-header: #555; --dirty-border: #444141; --dirty-background-header-darkmode: #6d0d15; --dirty-border-darkmode: #000000; --dirty-content-background-darkmode: #342627; --dirty-content-desc-darkmode:#594e4e; --dirty-roll_success: #01430c; --dirty-roll_failure: #6d0d15; --dirty-roll_critical_success: #dbff00; --dirty-roll_critical_failure: #690177; } /* Allprops part */ .sheet-rolltemplate-classic .sheet-content{ display: grid; background: #FFF; /* Header formatting - modify the column layout below */ grid-template-columns: auto auto; /* Line height to match default roll template */ line-height:1.4em; } .sheet-rolltemplate-classic .sheet-content > div{ padding: 5px; } /* Left column */ .sheet-rolltemplate-classic .sheet-content .sheet-key{ font-weight: bold; padding-right: 10px; text-align: right; font-family: 'Stylish'; font-size: 20px; } /* Wide Description field */ .sheet-rolltemplate-classic .sheet-desc{ grid-column: span 2; padding: 5px; text-align: center; } .sheet-rolltemplate-classic .sheet-info{ grid-column: span 2; padding: 5px; text-align: left; } .sheet-rolltemplate-classic .sheet-success{ grid-column: span 2; text-align: center; font-family: 'Stylish'; font-size: 25px; color: #fff; border-top: 2px solid var(--dirty-border); margin-top: 5px; background-color: #1f6c36; } .sheet-rolltemplate-classic .sheet-critical_success{ grid-column: span 2; text-align: center; font-family: 'Stylish'; font-size: 25px; color: #000; border-top: 2px solid var(--dirty-border); margin-top: 5px; background-color: var(--dirty-roll_critical_success); } .sheet-rolltemplate-classic .sheet-failure{ grid-column: span 2; text-align: center; font-family: 'Stylish'; font-size: 25px; color: #fff; border-top: 2px solid var(--dirty-border); margin-top: 5px; background-color: var(--dirty-background-header-darkmode); } .sheet-rolltemplate-classic .sheet-critical_failure{ grid-column: span 2; text-align: center; font-family: 'Stylish'; font-size: 25px; color: #fff; border-top: 2px solid var(--dirty-border); margin-top: 5px; background-color: var(--dirty-roll_critical_failure); } /* dirty Dice result in chatcontainer */ .sheet-rolltemplate-classic .inlinerollresult, .sheet-rolltemplate-classic .inlinerollresult.importantroll, .sheet-rolltemplate-classic .inlinerollresult.fullcrit, .sheet-rolltemplate-classic .inlinerollresult.fullfail { border: 2px solid; border-color:black; background-color: black; color: #eee; } /* Dark mode */ .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-container { border: 2px solid var(--dirty-border-darkmode); border-radius: 3px; } .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-container { border: 2px solid var(--dirty-border-darkmode); border-radius: 3px; box-shadow: -6px 6px 6px #0000005c; } .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-header { background-color: var(--dirty-background-header-darkmode); color: #eee; border-bottom: 2px solid var(--dirty-border-darkmode); font-family: 'Stylish'; } .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-title { font-size: 20px; } .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-subtitle { font-size: 14px; padding-top: 4px; } .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-content { display: grid; background: var(--dirty-content-background-darkmode); color: #eee; grid-template-columns: auto auto; line-height:1.4em; } .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-content .sheet-key { font-weight: bold; padding-right: 10px; text-align: right; font-family: 'Stylish'; font-size: 20px;; } /* Dice result in chatcontainer */ .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .inlinerollresult, .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .inlinerollresult.importantroll, .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit, .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .inlinerollresult.fullfail { border: 2px solid; border-color:black; background-color: black; color: #eee; } /* Wide Description field */ .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-desc { background: var(--dirty-content-desc-darkmode); grid-column: span 2; padding: 5px; text-align: center; } .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-success{ grid-column: span 2; text-align: center; font-family: 'Stylish'; font-size: 25px; color: #fff; border-top: 2px solid var(--dirty-border-darkmode); margin-top: 5px; background-color: var(--dirty-roll_success); } .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-critical_success{ grid-column: span 2; text-align: center; font-family: 'Stylish'; font-size: 25px; color: #000; border-top: 2px solid var(--dirty-border-darkmode); margin-top: 5px; background-color: var(--dirty-roll_critical_success); } .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-failure{ grid-column: span 2; text-align: center; font-family: 'Stylish'; font-size: 25px; color: #fff; border-top: 2px solid var(--dirty-border-darkmode); margin-top: 5px; background-color: var(--dirty-roll_failure); } .sheet-rolltemplate-classic.sheet-rolltemplate-darkmode .sheet-critical_failure{ grid-column: span 2; text-align: center; font-family: 'Stylish'; font-size: 25px; color: #fff; border-top: 2px solid var(--dirty-border-darkmode); margin-top: 5px; background-color: var(--dirty-roll_critical_failure); }