diff --git a/LyrianChronicles/Assets/AttibuteVal.png b/LyrianChronicles/Assets/AttibuteVal.png new file mode 100644 index 0000000000..674539a0a3 Binary files /dev/null and b/LyrianChronicles/Assets/AttibuteVal.png differ diff --git a/LyrianChronicles/Assets/AttributeLabel.png b/LyrianChronicles/Assets/AttributeLabel.png new file mode 100644 index 0000000000..891c8f0d5d Binary files /dev/null and b/LyrianChronicles/Assets/AttributeLabel.png differ diff --git a/LyrianChronicles/Assets/AttributeLabel2.png b/LyrianChronicles/Assets/AttributeLabel2.png new file mode 100644 index 0000000000..30d8a8b568 Binary files /dev/null and b/LyrianChronicles/Assets/AttributeLabel2.png differ diff --git a/LyrianChronicles/Assets/LyrianBottomStamp.png b/LyrianChronicles/Assets/LyrianBottomStamp.png new file mode 100644 index 0000000000..579c90b3ab Binary files /dev/null and b/LyrianChronicles/Assets/LyrianBottomStamp.png differ diff --git a/LyrianChronicles/Assets/LyrianChroniclesBanner.png b/LyrianChronicles/Assets/LyrianChroniclesBanner.png new file mode 100644 index 0000000000..de700f0a03 Binary files /dev/null and b/LyrianChronicles/Assets/LyrianChroniclesBanner.png differ diff --git a/LyrianChronicles/Assets/LyrianContainer.png b/LyrianChronicles/Assets/LyrianContainer.png new file mode 100644 index 0000000000..4e90ffe328 Binary files /dev/null and b/LyrianChronicles/Assets/LyrianContainer.png differ diff --git a/LyrianChronicles/Assets/LyrianContainer2.png b/LyrianChronicles/Assets/LyrianContainer2.png new file mode 100644 index 0000000000..73a66e28a7 Binary files /dev/null and b/LyrianChronicles/Assets/LyrianContainer2.png differ diff --git a/LyrianChronicles/Assets/LyrianOuterBorder.png b/LyrianChronicles/Assets/LyrianOuterBorder.png new file mode 100644 index 0000000000..649bcef15e Binary files /dev/null and b/LyrianChronicles/Assets/LyrianOuterBorder.png differ diff --git a/LyrianChronicles/Assets/diamond2.png b/LyrianChronicles/Assets/diamond2.png new file mode 100644 index 0000000000..d97e0c3bdd Binary files /dev/null and b/LyrianChronicles/Assets/diamond2.png differ diff --git a/LyrianChronicles/Assets/sheet-box-border.png b/LyrianChronicles/Assets/sheet-box-border.png new file mode 100644 index 0000000000..fc036ed368 Binary files /dev/null and b/LyrianChronicles/Assets/sheet-box-border.png differ diff --git a/LyrianChronicles/LyrianChronicles.css b/LyrianChronicles/LyrianChronicles.css new file mode 100644 index 0000000000..2d4ff4c6b9 --- /dev/null +++ b/LyrianChronicles/LyrianChronicles.css @@ -0,0 +1,2543 @@ +/* General CSS for Lyrian Chronicles character sheet */ +.charsheet { + position: relative; + z-index: 1000; /* or any high value */ +} + +/* ROLL BUTTONS */ +.charsheet button[type="action"], +.charsheet button[type="roll"] { + background: none; + border: 0; + box-shadow: none; + font-weight: bold; + text-transform: uppercase; + width: 100%; + line-height: 0.5; + color: inherit; + font-size: inherit; + margin: 0; + padding: 0; + vertical-align: baseline; + text-align: center; +} +.charsheet button[type="action"]:hover, +.charsheet button[type="roll"]:hover { + color: #b61037; +} +.charsheet button[type="action"]:focus, +.charsheet button[type="roll"]:focus { + color: #b61037; + outline: none; +} +.charsheet button[type="action"]::before, +.charsheet button[type="roll"]::before { + display: none; +} +.charsheet button[type="action"]:hover, +.charsheet button[type="roll"]:hover { + background: none !important; +} +.charsheet button[type="roll"]:active { + background: none !important; + box-shadow: none !important; + outline: none !important; + color: inherit !important; + border: none !important; +} +/* ROLL BUTTONS */ + +/* CHECKBOXES */ +.charsheet .custom-radio-checkbox { + display: flex; + align-items: center; + gap: 8px; + height: 15px; +} +.charsheet .custom-radio-checkbox input[type="checkbox"] { + display: none; +} +.charsheet .custom-radio-checkbox label { + width: 13px; + height: 13px; + border: 2px solid #6c6c6c; + border-radius: 50%; + display: inline-block; + position: relative; + cursor: pointer; + background: #fff; + transition: border-color 0.2s; + margin-bottom: 0px; + box-sizing: border-box; + padding: 0px; +} +.charsheet + .custom-radio-checkbox + input[type="checkbox"]:checked + + label::after { + content: ""; + position: absolute; + left: 1.8px; + top: 1.8px; + width: 6px; + height: 6px; + background: #6c6c6c; + border-radius: 50%; + display: block; + box-sizing: border-box; + margin-bottom: 0px; +} +.charsheet + .custom-radio-checkbox + input[type="checkbox"]:checked + + label:hover::after { + background: #b61037; +} +.charsheet .custom-radio-checkbox label:hover { + border-color: #b61037; +} +.charsheet .custom-radio-checkbox span { + font-size: 11px; +} +/* CHECKBOXES */ + +/* Hide number input spinners for Chrome, Safari, Edge, Opera */ +.charsheet input[type="number"]::-webkit-outer-spin-button, +.charsheet input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Hide number input spinners for Firefox */ +.charsheet input[type="number"] { + -moz-appearance: textfield; + appearance: textfield; +} + +.charsheet input:hover, +.charsheet input:focus, +.charsheet textarea:hover, +.charsheet textarea:focus { + background: #e5fffb; + outline: none; +} +.charsheet select:hover, +.charsheet select:focus { + background: #e5fffb; +} +.charsheet select:hover option, +.charsheet select:focus option { + background: white; +} + +/* OTHER START*/ +.charsheet .flex-row { + display: flex; + flex-direction: row; +} +.charsheet .flex-row.space-between { + justify-content: space-between; +} +.charsheet .flex-column { + display: flex; + flex-direction: column; +} +.charsheet .full-width { + width: 100%; +} +.charsheet .flex-1 { + flex: 1; +} +.charsheet .flex-2 { + flex: 2; +} +.charsheet .column-reverse { + flex-direction: column-reverse; +} +.charsheet .row-reverse { + flex-direction: row-reverse; +} +.charsheet .align-center { + align-items: center; +} +.charsheet .justify-center { + justify-content: center; +} +.charsheet .pt-5 { + padding-top: 5px; +} +.charsheet .pb-5 { + padding-bottom: 5px; +} +.charsheet .p10 { + padding: 10px; +} +.charsheet .margin10 { + margin: 10px; +} +.charsheet .push-to-end { + margin-top: auto; +} +.charsheet .d-inline { + display: inline; +} +/* OTHER END */ + +.charsheet { + padding: 0px !important; + width: 880px; + /* height: auto; */ +} +.charsheet .sheet-lyrian-chronicles { + background: white; + color: black; + font-size: 13px; + line-height: 18px; + margin: 0; + /* overflow: scroll; */ + border-image: url("https://raw.githubusercontent.com/Morrocker/LyrianChroniclesRoll20/refs/heads/main/Assets/LyrianOuterBorder.png") + 100 100 100 100 fill stretch; + border-style: solid; + border-width: 30px 30px; + box-sizing: border-box; + /* height: auto; */ +} +.charsheet .sheet-section-pc { + margin: 0 auto; + width: 100%; + /* height: auto; */ +} + +.charsheet .section-container { + border-image: url("https://raw.githubusercontent.com/Morrocker/LyrianChroniclesRoll20/refs/heads/main/Assets/LyrianContainer2.png") + 50 50 50 50 fill stretch; + border-style: solid; + border-width: 15px; + box-sizing: border-box; + width: 100%; +} +.charsheet .section-container .header { + grid-area: header; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + margin-top: -5px; + margin-bottom: 5px; + padding-left: 10px; + color: #717171; +} +/* General CSS for Lyrian Chronicles character sheet */ + +/* HEADER */ +.charsheet .sheet-section-pc-header { + display: grid; + grid-template-areas: "logo details"; + grid-template-columns: 350px auto; + gap: 10px; + height: 160px; + margin-bottom: 40px; +} +.charsheet .sheet-section-pc-header-logo { + grid-area: logo; +} +.charsheet .sheet-section-pc-header-logo div { + background: url("https://raw.githubusercontent.com/Morrocker/LyrianChroniclesRoll20/refs/heads/main/Assets/LyrianChroniclesBanner.png"); + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-position: center; + display: block; + background-size: 100%; + margin: 0, auto; +} + +.charsheet .header-details-container { + grid-area: details; + border-image: url("https://raw.githubusercontent.com/Morrocker/LyrianChroniclesRoll20/refs/heads/main/Assets/sheet-box-border.png") + 50 50 50 50 fill stretch; + border-style: solid; + border-width: 20px 20px; + box-sizing: border-box; +} +.charsheet .header-details-title { + border-bottom: 2px solid #202020; + color: #202020; + font-size: 15px; + font-weight: bold; + line-height: 14px; + margin-left: -20px; + margin-right: -20px; + margin-top: -10px; + text-align: center; + text-transform: uppercase; +} +.charsheet .header-details-content { + display: grid; + grid-template-areas: + "name spiritcore experience" + "race subrace gender" + "age c-weight c-height"; + grid-template-columns: 1fr 1fr 1fr; + gap: 10px; + row-gap: 0px; + height: 100%; + width: 100%; + margin-top: 10px; + margin-bottom: -10px; +} +.charsheet .name { + grid-area: name; +} +.charsheet .spiritcore { + grid-area: spirit-core; +} +.charsheet .experience { + grid-area: experience; +} +.charsheet .race { + grid-area: race; +} +.charsheet .subrace { + grid-area: subrace; +} +.charsheet .gender { + grid-area: gender; +} +.charsheet .age { + grid-area: age; +} +.charsheet .weight { + grid-area: c-weight; +} +.charsheet .height { + grid-area: c-height; +} +.charsheet .header-details-content div { + display: flex; + flex-direction: column-reverse; +} +.charsheet .header-details-content input { + margin-bottom: 0; + border-left: 0; + border-right: 0; + border-top: 0; + border-bottom: 1px solid black; + border-radius: 0; + height: 19px; + padding: 0; + width: 100% !important; + border-color: #cccccc; + background-color: white; +} +.charsheet .header-details-content select { + margin-bottom: 0; + border-left: 0; + border-right: 0; + border-top: 0; + border-bottom: 1px solid black; + border-radius: 0; + height: 19px; + padding: 0; + width: 100%; + border-color: #cccccc; +} +.charsheet .header-details-content label { + font-size: 9px; + text-transform: uppercase; + font-weight: bold; + line-height: 1.5; + color: #cccccc; +} +/* HEADER END */ + +/* TABS START */ +.charsheet .sheet-tabs { + position: relative; + width: 100%; +} +.charsheet .sheet-tabs::after { + clear: both; + content: ""; + display: block; +} +.charsheet .sheet-tab { + width: 100%; +} +.charsheet .sheet-tab:nth-of-type(2) > input[type="radio"], +.charsheet .sheet-tab:nth-of-type(2) > .sheet-tab-label { + margin-left: 16.66667%; +} +.charsheet .sheet-tab:nth-of-type(3) > input[type="radio"], +.charsheet .sheet-tab:nth-of-type(3) > .sheet-tab-label { + margin-left: 33.33333%; +} +.charsheet .sheet-tab:nth-of-type(4) > input[type="radio"], +.charsheet .sheet-tab:nth-of-type(4) > .sheet-tab-label { + margin-left: 50%; +} +.charsheet .sheet-tab:nth-of-type(5) > input[type="radio"], +.charsheet .sheet-tab:nth-of-type(5) > .sheet-tab-label { + margin-left: 66.66667%; +} +.charsheet .sheet-tab:nth-of-type(6) > input[type="radio"], +.charsheet .sheet-tab:nth-of-type(6) > .sheet-tab-label { + margin-left: 83.33333%; +} +.charsheet .sheet-tab > input[type="radio"] { + height: 30px; + margin: 0; + opacity: 0; + position: absolute; + top: 0; + width: 16.66667%; + z-index: 1; +} +.charsheet .sheet-tab > input[type="radio"]:hover ~ .sheet-tab-label { + background: #979797; + border-bottom-color: #ffffff; + color: #575757; +} +.charsheet .sheet-tab > .sheet-tab-label { + align-items: center; + background: #dddddd; + border-radius: 6px 6px 0 0; + border: 2px solid #dddddd; + color: #8a8a8a; + display: flex; + font-size: 11px; + font-variant: small-caps; + font-weight: bold; + height: 30px; + justify-content: center; + margin: 0; + position: absolute; + text-transform: uppercase; + top: 0; + width: 16.66667%; + border-left-color: white; + border-top-color: white; + border-right-color: white; + border-bottom-color: lightgrey; +} +.charsheet .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-label { + background: white; + border-color: #575757; + border-bottom-color: white; + color: black; +} +.charsheet .sheet-tab > input[type="radio"]:checked { + cursor: auto; +} +.charsheet .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-content { + display: flex; +} +.charsheet .sheet-tab-content { + /* min-height: 847px; */ + display: none; + padding: 10px; + padding-top: 45px; + width: 100%; + box-sizing: border-box; + gap: 10px; +} +/* TABS END */ + +.charsheet .core-left-column { + display: flex; + flex-direction: column; + /* justify-content: space-between; */ + width: 310px; + gap: 5px; +} +.charsheet .core-right-column { + display: flex; + flex-direction: column; + width: 490px; + gap: 5px; +} +.charsheet .features-left-column { + display: flex; + flex-direction: column; + width: 380px; + gap: 5px; +} +.charsheet .features-right-column { + display: flex; + flex-direction: column; + /* justify-content: space-between; */ + width: 420px; + gap: 5px; +} +.charsheet .inventory-left-column{ + display: flex; + flex-direction: column; + /* height: 600px; */ + width: 450px; + gap: 5px; + +} +.charsheet .inventory-right-column { + display: flex; + flex-direction: column; + /* height: 600px; */ + width: 350px; + gap: 5px; +} +.charsheet .skills-left-column{ + display: flex; + flex-direction: column; + /* height: 600px; */ + width: 400px; + gap: 5px; + +} +.charsheet .notes-left-column{ + display: flex; + flex-direction: column; + /* height: 600px; */ + width: 300px; + gap: 5px; + +} +.charsheet .notes-right-column{ + display: flex; + flex-direction: column; + /* height: 600px; */ + width: 500px; + gap: 5px; + +} + +/* ATTRIBUTES START */ +.charsheet .main-stats-container { + display: grid; + grid-template-areas: + "main-stats secondary-stats" + "focus fitness" + "power cunning" + "agility reason" + "toughness awareness" + ". presence"; + grid-template-columns: 1fr 1fr; + width: 310px; +} +.charsheet .focus { + grid-area: focus; + padding-right: 5px; +} +.charsheet .power { + grid-area: power; + padding-right: 5px; +} +.charsheet .agility { + grid-area: agility; + padding-right: 5px; +} +.charsheet .toughness { + grid-area: toughness; + padding-right: 5px; +} +.charsheet .cunning { + grid-area: cunning; + border-left: #afafaf 1px solid; + padding-bottom: 2px; + padding-left: 5px; +} +.charsheet .awareness { + grid-area: awareness; + border-left: #afafaf 1px solid; + padding-bottom: 2px; + padding-left: 5px; +} +.charsheet .presence { + grid-area: presence; + border-left: #afafaf 1px solid; + padding-bottom: 2px; + padding-left: 5px; +} +.charsheet .reason { + grid-area: reason; + border-left: #afafaf 1px solid; + padding-bottom: 2px; + padding-left: 5px; +} +.charsheet .fitness { + grid-area: fitness; + border-left: #afafaf 1px solid; + padding-bottom: 2px; + padding-left: 5px; +} + +.charsheet .section-container .header.main { + grid-area: main-stats; +} +.charsheet .section-container .header.secondary { + grid-area: secondary-stats; +} + +.charsheet .attribute-container, +.charsheet .attribute-container2 { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: start; +} +/* .attribute-container.fill{ + width: 100%; +} */ +.charsheet .attribute-container .label, +.charsheet .attribute-container2 .label { + display: flex; + color: #717171; + height: 30px; + width: 110px; + border-image: url("https://raw.githubusercontent.com/Morrocker/LyrianChroniclesRoll20/refs/heads/main/Assets/AttibuteVal.png") + 50 50 50 50 fill stretch; + border-style: solid; + border-width: 10px 10px; + box-sizing: border-box; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + margin-left: -15px; /*this is to fit the 2 pieces*/ + padding-left: 10px; /*without this it ends too close to the edge*/ + text-align: center; + justify-content: start; + line-height: 0.5; +} +.charsheet .attribute-container .value { + width: 37px; + height: 37px; + border-image: url("https://raw.githubusercontent.com/Morrocker/LyrianChroniclesRoll20/refs/heads/main/Assets/AttibuteVal.png") + 50 50 50 50 fill stretch; + border-style: solid; + border-width: 10px 10px; + box-sizing: border-box; + font-size: 10px; + font-weight: bold; + justify-content: center; + align-content: center; + z-index: 10; +} +.charsheet .attribute-container .value input, +.charsheet .attribute-container2 .value input { + border: 0; + background: transparent; + width: 30px !important; + height: 26px; + text-align: center; + font-size: 20px; + font-weight: bold; + padding: 0; + margin-left: -6.5px; + margin-top: -4px; + color: black; + cursor: default; +} +/* ATTRIBUTE END*/ + +/* DERIVED ATTRIBUTES START*/ +.charsheet .gap-5 { + gap: 5px; +} + +.charsheet .all-hp { + grid-area: all-hp; +} +.charsheet .all-rp { + grid-area: all-rp; +} +.charsheet .all-mp { + grid-area: all-mp; +} +.charsheet .evasion-dodge { + grid-area: evasion-dodge; +} +.charsheet .dodge { + grid-area: dodge; +} +.charsheet .guard-block { + grid-area: guard-block; +} +.charsheet .block { + grid-area: blocking; +} +.charsheet .saving-throw { + grid-area: saving-throw; +} +.charsheet .potency-save { + grid-area: potency-save; +} +.charsheet .initiative { + grid-area: initiative; +} + +.charsheet .attribute-container .label.composite { + justify-content: center; + width: 160px; + cursor: default; +} +.charsheet .attribute-container .label.composite2 { + justify-content: center; + width: 120px; + cursor: default; +} +.charsheet .attribute-container .label button[type="action"], +.charsheet .attribute-container .label button[type="roll"] { + font-size: 12px !important; + margin-left: 0px; + line-height: 0.1; + text-align: start; +} +.charsheet .attribute-container .value.composite { + display: flex; + flex-direction: row; + justify-content: start; + width: 160px; +} +.charsheet .attribute-container .value.composite2 { + display: flex; + flex-direction: row; + justify-content: start; + width: 100px; +} +.charsheet .attribute-container .value.composite input { + width: 42px !important; + margin-left: 0px; + font-size: 15px; +} +.charsheet .attribute-container .value.composite2 input { + width: 75px !important; + margin-left: 0px; + font-size: 18px; +} + +.charsheet .attribute-container .value.composite input:nth-of-type(2) { + border-left: #a7a7a7 1px solid; + border-radius: 0%; +} +.charsheet .attribute-container .value.composite input:nth-of-type(3) { + border-left: #a7a7a7 1px solid; + border-radius: 0%; +} +.charsheet .attribute-container2 .value { + background: url("https://raw.githubusercontent.com/Morrocker/LyrianChroniclesRoll20/refs/heads/main/Assets/diamond2.png"); + width: 40px; + height: 40px; + background-repeat: no-repeat; + background-position: center; + display: flex; + background-size: 100%; + margin: 0, auto; + z-index: 20; + justify-content: center; + align-items: center; +} +.charsheet .attribute-container2 .label { + margin-left: -30px; + padding-left: 25px; + width: 130px; +} +.charsheet .attribute-container2 .label button[type="action"], +.charsheet .attribute-container2 .label button[type="roll"] { + font-size: 12px !important; + margin-left: 2px; + line-height: 0.1; + text-align: start; +} +.charsheet .attribute-container2 .value input { + width: 40 !important; + margin-top: 0.3px; + margin-left: 0px; + font-size: 16px; +} + +.charsheet .derived-stats { + display: grid; + grid-template-areas: + "evasion dodge" + "guard blocking" + "save-bonus potency" + "initiative speed"; + grid-template-columns: 1fr 1fr; + /* width: 310px; */ + gap: 5px; +} + +.charsheet .evasion { + grid-area: evasion; +} +.charsheet .dodge { + grid-area: dodge; +} +.charsheet .guard { + grid-area: guard; +} +.charsheet .blocking { + grid-area: blocking; +} +.charsheet .save-bonus { + grid-area: save-bonus; +} +.charsheet .potency { + grid-area: potency; +} +.charsheet .speed { + grid-area: speed; +} +.charsheet .initiative { + grid-area: initiative; +} + +.charsheet .section-container.basic-attacks { + display: grid; + justify-content: space-around; + align-items: center; + grid-template-areas: + "main-weapon-attack" + "generic-attack"; + gap: 5px; +} +.charsheet .basic-attack.mwp { + grid-area: main-weapon-attack; +} +.charsheet .basic-attack.generic { + grid-area: generic-attack; +} +/* .charsheet .heavy2 { + grid-area: basic-HEAVY-attack; +} +.charsheet .precision { + grid-area: basic-precision-attack; +} */ + +.charsheet .attribute-container .label.basic-attack { + display: flex; + justify-content: center; + align-items: center; + margin-left: 0px; + width: 230px; +} +.charsheet .attribute-container .label.basic-attack button { + font-size: 14px !important; + line-height: 0.3; + text-align: center; +} + +.charsheet .static-stat { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + /* gap: 5px; */ +} +.charsheet .attribute-value.single-block { + display: flex; + width: 70px; + height: 37px; + border-image: url("https://raw.githubusercontent.com/Morrocker/LyrianChroniclesRoll20/refs/heads/main/Assets/AttibuteVal.png") + 50 50 50 50 fill stretch; + border-style: solid; + border-width: 10px 10px; + box-sizing: border-box; + font-size: 10px; + font-weight: bold; + justify-content: center; + align-content: center; + z-index: 10; +} +.charsheet .attribute-value.single-block input { + margin-top: 3px; +} +.charsheet .small-attribute-label { + font-size: 7px; + text-transform: uppercase; + font-weight: bold; + line-height: 1.5; + color: #454545; + margin-bottom: -12px; + z-index: 30; +} +/* DERIVED ATTRIBUTES END */ + +/* TABLES START */ +.charsheet .table-container { + display: flex; + flex-direction: column; + border-image: url("https://raw.githubusercontent.com/Morrocker/LyrianChroniclesRoll20/refs/heads/main/Assets/AttibuteVal.png") + 50 50 50 50 fill stretch; + border-style: solid; + border-width: 10px 10px; + box-sizing: border-box; +} +.charsheet .table-container.minH300 { + min-height: 300px; +} +.charsheet .table-container.weapon-inventory { + min-height: 150px; +} +.charsheet .table-container.armor-inventory { + min-height: 150px; +} +.charsheet .table-container.storage { + min-height: 500px; +} +.charsheet .table-container .table-name { + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + margin-top: -5px; + margin-bottom: 5px; + margin-left: -6px; + /* margin-right: 12px; */ + color: #717171; + border-bottom: #202020 2px solid; + text-align: center; + padding: 0px; + width: 106%; +} +.charsheet .table-container .table-name.class-table-name { + width: 103.5%; +} +.charsheet .table-container .headers { + display: flex; + flex-direction: row; + width: 100%; + border-bottom: #717171 1px solid; +} +.charsheet .table-container .headers div { + font-size: 10px; +} +/* TABLES START */ + +/* SKILLS TABLE START*/ +/* SKILLS TABLE END */ + +/* INJURIES TABLE START*/ +.charsheet .table-container .injuries-grid { + display: grid; + grid-template-areas: + "head-injury eye-injury" + "main-hand-injury off-hand-injury" + "leg-injury foot-injury" + "muscle-injury laceration-injury" + "spirit-circuit-injury wound-injury"; + width: 100%; + gap: 2px; + /* padding: 5px 0px; */ +} +.charsheet .injuries-grid .head { + grid-area: head-injury; +} +.charsheet .injuries-grid .eye { + grid-area: eye-injury; +} +.charsheet .injuries-grid .main-hand { + grid-area: main-hand-injury; +} +.charsheet .injuries-grid .off-hand { + grid-area: off-hand-injury; +} +.charsheet .injuries-grid .leg { + grid-area: leg-injury; +} +.charsheet .injuries-grid .foot { + grid-area: foot-injury; +} +.charsheet .injuries-grid .muscle { + grid-area: muscle-injury; +} +.charsheet .injuries-grid .laceration { + grid-area: laceration-injury; +} +.charsheet .injuries-grid .spirit-circuit { + grid-area: spirit-circuit-injury; +} +.charsheet .injuries-grid .wound { + grid-area: wound-injury; +} +.charsheet .injury-container { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: start; + width: 100%; +} +/* INJURIES TABLE END*/ + + + +.charsheet .delete-item-btn { + width: 20px; + height: 20px; +} +.charsheet .delete-item-btn.thin { + width: 13px; +} +.charsheet .delete-item-btn input[type="checkbox"] { + opacity: 0; + position: absolute; + margin-left: -10px; + width: 20px; + height: 20px; + z-index: 10; +} +.charsheet .delete-item-btn.thin input[type="checkbox"] { + width: 13px; + margin-left: 0px; +} +.charsheet .delete-item-btn span { + display: flex; + width: 20px; + height: 20px; + font-size: 10px; + font-weight: bold; + text-transform: uppercase; + color: #9e9e9e; + text-align: center; + align-items: center; + justify-content: center; + border: none; + cursor: pointer; + margin-top: 0px; +} +.charsheet .delete-item-btn.thin span { + width: 13px; +} +.charsheet .roll-die.thin { + padding-bottom: 2px; + width: 13px; + height: 20px; + color: #717171; +} +.charsheet .delete-item-btn input:hover + span { + border-color: #b61037; + color: #b61037; +} +.charsheet .delete-item-btn input:active + span { + border-color: #ff0000; + color: #ff0000; +} + + + +/* =========================================================================== */ + +/* GENERAL REPEATING TABLES STYLES START */ +.charsheet .table-container .table-body{ + display: flex; + flex-direction: column; + width: 100%; + flex:1; +} +.charsheet .table-container .item-container { + display: flex; + flex-direction: column; + width: 100%; + border-bottom: #717171 1px solid; + /* margin-bottom: 5px; */ +} +.charsheet .table-container .table-name2 { + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + margin-top: -5px; + margin-bottom: 5px; + color: #717171; + border-bottom: #202020 2px solid; + text-align: center; + padding: 0px; + width: 100%; +} +.charsheet .table-container .headers-container{ + display: flex; + flex-direction: row; + width: 100%; + border-bottom: #717171 1px solid; +} +.charsheet .table-container .headers-container .header2{ + font-size: 10px; +} +.charsheet .table-container .row-container{ + display: none; + flex-direction: column; + width: 100%; +} +.charsheet .table-container input[type="checkbox"]:checked + .row-container { + display: flex; +} +.charsheet .table-container .table-row{ + font-size: 10px; + display: flex; + flex-direction: row; + align-items: center; + width: 100%; +} +.charsheet .table-container .table-row .name-button{ + display: flex; + flex-direction: column; + align-items: start; + justify-content: start; + height: 20px; + width: 100%; +} +.charsheet .table-container .table-row .name-button button[type="action"]{ + opacity: 100; + box-sizing: border-box; + position: absolute; + width: 200px; + min-height: 20px; + z-index: 10; +} +.charsheet .table-container .table-row .name-button span{ + display: flex; + font-size: 10px; + width: 100%; + min-height: 20px; + width: 200px; + font-weight: bold; + text-transform: capitalize; + color: #202020; + text-align: start; + align-items: center; + justify-content: start; + padding-top: 2px; + border: none; + cursor: pointer; + margin-top: 0px; + box-sizing: border-box; +} +.charsheet .table-container .table-row .name-button button:hover + span { + color: #b61037; +} +.charsheet .table-container .table-row .name-button button:active + span { + color: #ff0000; +} + +.charsheet .table-container .table-row select{ + margin-bottom: 0; + border: none; + height: 20px; + padding: 0; + width: 100%; + text-align: center; + font-size: 11px; +} +.charsheet .table-container .table-row .actions .view-details{ + display: inline-block; + font-size: 13px; + margin-bottom: 1px; + line-height: 0.7; + cursor: pointer; +} +.charsheet .table-container .table-row .actions .item { + width: 20px; + height: 20px; +} +.charsheet .table-container .table-row .actions .item.thin { + width: 13px; +} +.charsheet .table-container .table-row .actions .item input[type="checkbox"] { + opacity: 0; + position: absolute; + margin-left: -10px; + width: 20px; + height: 20px; + z-index: 10; +} +.charsheet .table-container .table-row .actions .item.thin input[type="checkbox"] { + width: 13px; + margin-left: 0px; +} +.charsheet .table-container .table-row .actions .item span { + display: flex; + width: 20px; + height: 20px; + font-size: 10px; + font-weight: bold; + text-transform: uppercase; + color: #9e9e9e; + text-align: center; + align-items: center; + justify-content: center; + border: none; + cursor: pointer; + margin-top: 0px; +} +.charsheet .table-container .table-row .actions .item.thin span { + width: 13px; +} +.charsheet .table-container .table-row .actions .item input:hover + span { + border-color: #b61037; + color: #b61037; +} +.charsheet .table-container .table-row .actions .item input:active + span { + border-color: #ff0000; + color: #ff0000; +} +.charsheet .table-container .table-row .actions .item .favorite{ + display: inline-block; + font-size: 12px; + margin-top: 2px; + cursor: pointer; +} +.charsheet .table-container .table-row .actions .item input:checked + .favorite{ + color: rgb(255, 225, 0); +} +.charsheet .table-container .table-row .actions .item .info{ + display: inline-block; + font-size: 15px; + cursor: pointer; +} +.charsheet .table-container .table-row .actions .item input:checked + .info{ + color: blue; +} +.charsheet .table-container .table-row .actions .item .edit{ + display: inline-block; + font-size: 15px; + margin-top: 1px; + cursor: pointer; +} +.charsheet .table-container .table-row .row-details{ + display: none; + gap: 5px; + width: 100%; + flex-direction: column; + font-size: 9px; + text-align: justify; + padding: 5px; + background-color: #f3f3f3; + border: #717171 1px solid; + border-radius: 5px; + width: 100%; + box-sizing: border-box; + margin-top: 5px; + margin-bottom: 5px; + gap: 8px; +} +.charsheet .table-container .table-row .row-details .details-item{ + display: flex; + flex-direction: row; + width: 100%; + align-items: center; +} +.charsheet .table-container .table-row .row-details .details-label{ + flex: 1; + font-size: 10px; + font-weight: bold; +} +.charsheet .table-container .table-row .row-details span{ + flex: 1; + font-size: 10px; +} + +.charsheet .table-container .details-container { + display: none; + flex-direction: column; + font-size: 10px; + text-align: justify; + padding: 5px; + background-color: #f3f3f3; + border: #717171 1px solid; + border-radius: 5px; + width: 100%; + box-sizing: border-box; + margin-top: 5px; + margin-bottom: 5px; + gap: 5px; +} +.charsheet .table-container .details-container .details-row { + display: flex; + flex-direction: row; + width: 100%; +} +.charsheet .table-container .details-container .details-row .details-label { + flex: 1; + font-weight: bold; + text-transform: capitalize; +} +.charsheet .table-container .details-container .details-row .details-value { + flex: 3; + display: flex; + flex-direction: column; + gap: 5px; + line-height: 1.5; +} +.charsheet .table-container .details-container .details-row .details-label2 { + flex: 1; + font-weight: bold; + text-transform: capitalize; +} +.charsheet .table-container .details-container .details-row .details-value2 { + flex: 1; + display: flex; + flex-direction: column; + gap: 5px; + line-height: 1.5; +} + +.charsheet .form-container{ + display: grid; + min-height: 100px; + padding: 10px; + padding-top: 5px; + padding-bottom: 5px; + border: #717171 1px solid; + border-radius: 5px; + align-items: center; + margin: 5px; + gap: 5px; +} +.charsheet .table-container input[type="checkbox"]:checked + .form-container { + display: none; +} +.charsheet .form-container input[type="number"], +.charsheet .form-container input[type="text"]{ + margin-bottom: 0; + border-left: 0; + border-right: 0; + border-top: 0; + border-bottom: 1px solid black; + border-radius: 0; + height: 15px; + padding: 0; + width: 100%; + border-color: #cccccc; + background-color: white; + text-align: center; + font-size: 12px; +} +.charsheet .form-container .block-textarea { + width: 100%; + min-height: 48px; + height: 48px; + resize: vertical; /* Allows user to resize vertically */ + padding: 6px 8px; + border: 1px solid #ccc; + border-radius: 4px; + background: #fff; + box-sizing: border-box; + font-size: 12px; +} +.charsheet .form-container label{ + font-size: 9px; + text-transform: uppercase; + font-weight: bold; + color: #cccccc; + margin-bottom: 0px; + padding: 0px; + text-align: center; +} +.charsheet .form-container .picker select{ + margin-bottom: 0; + border: none; + border-bottom: #cccccc 1px solid; + border-radius: 0%; + height: 15px; + padding: 0; + width: 100%; + text-align: center; + font-size: 12px; +} +.charsheet .form-container .custom-enabler:checked ~ .custom{ + display: flex; +} + + +.charsheet .form-container .form-close{ + display: flex; + flex-direction: column; + align-items: center; + height: 20px; + width: 100%; + grid-area: close; +} +.charsheet .form-container .form-close input[type="checkbox"] { + opacity: 0; + box-sizing: border-box; + position: absolute; + width: 90px; + height: 20px; + z-index: 10; +} +.charsheet .form-container .form-close span { + display: flex; + font-size: 10px; + width: 90px; + height: 20px; + font-weight: bold; + text-transform: uppercase; + color: #717171; + text-align: center; + align-items: center; + justify-content: center; + padding-top: 2px; + border: #8a8a8a 2px solid; + border-radius: 4px; + cursor: pointer; + margin-top: 0px; + box-sizing: border-box; +} +.charsheet .form-container .form-close input:hover + span { + border-color: #b61037; + color: #b61037; +} +.charsheet .form-container .form-close input:active + span { + border-color: #ff0000; + color: #ff0000; +} + +/* THIS IS TO HANDLE THE AUTO GENERATED REPEATING TABLE CONTROLS */ +.charsheet .table-container .repcontrol { + margin-top: auto; + padding-top: 5px; +} +.charsheet .table-container .repcontrol_del{ + z-index: 100; + position: relative; + pointer-events: auto; +} +.charsheet .table-container .repcontrol_add, +.charsheet .table-container .repcontrol_edit { + font-size: 10px; + background: none; + /* width: 90px; */ + height: 15px; + font-weight: bold; + text-transform: uppercase; + color: #717171; + text-align: center; + align-items: center; + justify-content: center; + padding-top: 2px; + border: #8a8a8a 2px solid; + border-radius: 4px; +} +.charsheet .table-container .repcontrol_add:hover, +.charsheet .table-container .repcontrol_edit:hover { + border-color: #b61037; + color: #b61037; + outline: none; + box-shadow: none; +} +.charsheet .table-container .repcontrol_add:active, +.charsheet .table-container .repcontrol_edit:active { + border-color: #ff0000; + color: #ff0000; + outline: none; + box-shadow: none; +} +/* GENERAL REPEATING TABLES STYLES END */ + +/* =========================================================================== */ + +/* CLASSES REVAMPED STYLES START */ + +.charsheet .table-container .headers-container .header2.name { + flex: 6; + text-align: left; + padding-left: 5px; +} +.charsheet .table-container .headers-container .header2.tier { + flex: 2; + text-align: center; +} +.charsheet .table-container .headers-container .header2.level { + flex: 2; + text-align: center; +} +.charsheet .table-container .headers-container .header2.xp { + flex: 3; + text-align: center; +} +.charsheet .table-container .headers-container .header2.actions { + flex: 1; + text-align: center; +} + +.charsheet .table-container .table-row .name{ + font-size: 10px; + flex: 8; + text-align: left; + padding-left: 5px; + font-weight: bold; + cursor: default; +} +.charsheet .table-container .table-row .tier { + flex: 2; + text-align: center; + cursor: default; +} +.charsheet .table-container .table-row .level{ + flex:3; + +} +.charsheet .table-container .table-row .xp { + flex: 3; + text-align: center; + cursor: default; +} +.charsheet .table-container .table-row .actions{ + flex: 2; + display: flex; + flex-direction: row; + justify-content: end; + align-items: center; + gap: 5px; +} + +.charsheet .table-container .form-container.class-grid{ + grid-template-areas: + "dropdown dropdown dropdown dropdown" + "close close close close"; + grid-template-columns: 1fr 1fr 1fr 1fr; +} +.charsheet .table-container .custom-enabler:checked ~ .class-grid { + grid-template-areas: + "dropdown dropdown dropdown dropdown" + "name name name tier" + "close close close close"; +} +.charsheet .form-container .name { + display: none; + flex-direction: column; + grid-area: name; + width: 100%; +} +.charsheet .form-container .tier { + display: none; + flex-direction: column; + align-items: center; + grid-area: tier; + width: 100%; +} +.charsheet .form-container .picker { + display: flex; + flex-direction: column; + align-items: center; + grid-area: dropdown; + width: 100%; +} +/* CLASSES REVAMPED STYLES END */ + +/* =========================================================================== */ + +/* BREAKTHROUGH REVAMPED STYLES START */ + +.charsheet .table-container .headers-container .header2.name2 { + flex: 10; + text-align: left; + padding-left: 5px; +} +.charsheet .table-container .headers-container .header2.xp2 { + flex: 3; + text-align: center; +} +.charsheet .table-container .headers-container .header2.actions2 { + flex: 2; + text-align: center; +} + +.charsheet .table-container .table-row .name2{ + font-size: 10px; + flex: 10; + text-align: left; + padding-left: 5px; + font-weight: bold; + cursor: default; +} +.charsheet .table-container .table-row .xp2 { + flex: 3; + text-align: center; + cursor: default; +} +.charsheet .table-container .table-row .actions2{ + flex: 2; + display: flex; + flex-direction: row; + justify-content: end; + align-items: center; + gap: 5px; +} + +.charsheet .table-container .form-container.breakthrough-grid{ + grid-template-areas: + "dropdown dropdown dropdown dropdown" + "close close close close"; + grid-template-columns: 1fr 1fr 1fr 1fr; +} +.charsheet .table-container .custom-enabler:checked ~ .breakthrough-grid { + grid-template-areas: + "dropdown dropdown dropdown dropdown" + "name name name xp" + "requirements requirements requirements requirements" + "description description description description" + "close close close close"; +} +.charsheet .form-container .picker { + display: flex; + flex-direction: column; + align-items: center; + grid-area: dropdown; + width: 100%; +} +.charsheet .form-container .name { + display: none; + flex-direction: column; + grid-area: name; + width: 100%; +} +.charsheet .form-container .xp { + display: none; + flex-direction: column; + align-items: center; + grid-area: xp; + width: 100%; +} +.charsheet .form-container .requirements { + display: none; + flex-direction: column; + align-items: center; + grid-area: requirements; + width: 100%; +} +.charsheet .form-container .description { + display: none; + flex-direction: column; + align-items: center; + grid-area: description; + width: 100%; +} +.charsheet .table-container input:checked + .details-container.breakthrough { + display: flex; +} + + +/* BREAKTHROUGH REVAMPED STYLES END */ + + +/* ABILITIES REVAMPED STYLES START */ + +.charsheet .table-container.abilities { + min-height: 635px; +} +.charsheet .table-container .headers-container .header2.name3 { + flex: 10; + text-align: left; + padding-left: 5px; +} +.charsheet .table-container .headers-container .header2.range3 { + flex: 3; + text-align: center; +} +.charsheet .table-container .headers-container .header2.cost3 { + flex: 4; + text-align: center; +} +.charsheet .table-container .headers-container .header2.actions3 { + flex: 3; + text-align: center; +} + +.charsheet .table-container .table-row .name3{ + font-size: 10px; + flex: 10; + text-align: left; + padding-left: 5px; + font-weight: bold; + cursor: default; +} +.charsheet .table-container .table-row .name-button.name3 button{ + width: 150px; +} +.charsheet .table-container .table-row .name-button.name3 span{ + width: 150px; +} +.charsheet .table-container .table-row .range3 { + flex: 3; + text-align: center; + cursor: default; +} +.charsheet .table-container .table-row .range3 span{ + white-space: nowrap; /* Prevents wrapping */ + overflow: hidden; /* Hides overflow */ + text-overflow: ellipsis; /* Shows "..." if text is cut off */ + display: inline-block; /* Needed for width to apply */ + max-width: 55px; + vertical-align: middle; + height: 100%; +} +.charsheet .table-container .table-row .cost3 { + flex: 4; + text-align: center; + cursor: default; +} +.charsheet .table-container .table-row .actions3{ + flex: 3; +} + +.charsheet .table-container input:checked + input:checked + .details-container.ability { + display: flex; +} + +.charsheet .table-container .form-container.ability-grid{ + grid-template-areas: + "dropdown dropdown dropdown dropdown" + "rolls rolls rolls rolls" + "close close close close"; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap:10px; +} +.charsheet .table-container .custom-enabler:checked ~ .ability-grid { + grid-template-areas: + "dropdown dropdown dropdown dropdown" + "name name name atype" + "keywords keywords range costs" + "requirements requirements requirements requirements" + "description description description description" + "rolls rolls rolls rolls" + "close close close close"; +} +.charsheet .form-container .picker { + display: flex; + flex-direction: column; + align-items: center; + grid-area: dropdown; + width: 100%; +} +.charsheet .form-container .name { + display: none; + flex-direction: column; + grid-area: name; + width: 100%; +} +.charsheet .form-container .picker.atype { + display: none; + grid-area: atype; + width: 100%; +} +.charsheet .form-container input:checked + .picker.atype { + display: flex; +} +.charsheet .form-container .block-textarea.requirements-ba { + min-height: 25px; + height: 25px; +} +.charsheet .form-container .range { + display: none; + flex-direction: column; + align-items: center; + grid-area: range; + width: 100%; +} +.charsheet .form-container .keywords { + display: none; + flex-direction: column; + align-items: center; + grid-area: keywords; + width: 100%; +} +.charsheet .form-container .costs { + display: none; + flex-direction: column; + align-items: center; + grid-area: costs; + width: 100%; +} +.charsheet .form-container .requirements { + display: none; + flex-direction: column; + align-items: center; + grid-area: requirements; + width: 100%; +} +.charsheet .form-container .description { + display: none; + flex-direction: column; + align-items: center; + grid-area: description; + width: 100%; +} +.charsheet .form-container .picker.rolls { + display: flex; + grid-area: rolls; + width: 100%; + flex-direction: column; +} +.charsheet .form-container .custom-macro { + display: none; + flex-direction: column; + align-items: center; + width: 100%; + padding-top: 5px; +} +.charsheet .form-container input:checked + .custom-macro { + display: flex; +} +.charsheet .form-container .custom-macro .block-textarea { + font-size: 10px; + margin:0px; + min-height: 60px; + height: 60px; +} + + +/* ABILITIES REVAMPED STYLES END */ + + +/* FAVORITE ABILITIES REVAMPED STYLES START */ +.charsheet .table-container.favorite-abilities{ + height: 100%; +} +.charsheet .table-container.favorite-abilities input:checked + .item-container{ + display: flex; +} +.charsheet .table-container.favorite-abilities input:checked + .item-container .row-container{ + display: flex; +} +.charsheet .table-container.favorite-abilities .item-container{ + display: none; +} + +.charsheet .table-container.favorite-abilities .table-row .name-button.name3 button{ + width: 192px; +} +.charsheet .table-container.favorite-abilities .table-row .name-button.name3 span{ + width: 192px; + text-align: center; + justify-content: center; +} + +.charsheet .table-container.favorite-abilities .repcontrol{ + display: none; +} + + +/* FAVORITE ABILITIES REVAMPED STYLES END */ + + +/* ARMORS REVAMPED STYLES START */ + +.charsheet .table-container .headers-container .header2.name4 { + flex: 10; + text-align: left; + padding-left: 5px; +} +.charsheet .table-container .headers-container .header2.burden4 { + flex: 2; + text-align: center; +} +.charsheet .table-container .headers-container .header2.status4 { + flex: 3; + text-align: center; +} +.charsheet .table-container .headers-container .header2.actions4 { + flex: 2; + text-align: center; +} + +.charsheet .table-container .table-row .name4{ + font-size: 10px; + flex: 10; + text-align: left; + padding-left: 5px; + font-weight: bold; + cursor: default; +} +.charsheet .table-container .table-row .burden4 { + flex: 3; + text-align: center; + cursor: default; +} +.charsheet .table-container .table-row .status4 { + flex: 3; + text-align: center; + cursor: default; +} + + +.charsheet .table-container .form-container.armor-grid{ + grid-template-areas: + "name name name status status" + "burden guard block evasion initiative" + "description description description description description" + "close close close close close"; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + gap:10px; +} +.charsheet .form-container.armor-grid .picker { + display: flex; + flex-direction: column; + align-items: center; + grid-area: dropdown; + width: 100%; +} +.charsheet .form-container.armor-grid .name { + display: flex; + flex-direction: column; + grid-area: name; + width: 100%; +} +.charsheet .form-container.armor-grid .burden { + flex-direction: column; + grid-area: burden; + width: 100%; +} +.charsheet .form-container.armor-grid .status { + flex-direction: column; + grid-area: status; + width: 100%; +} +.charsheet .form-container.armor-grid .evasion { + grid-area: evasion; + width: 100%; +} +.charsheet .form-container.armor-grid .initiative { + grid-area: initiative; + width: 100%; +} +.charsheet .form-container.armor-grid .guard { + grid-area: guard; + width: 100%; +} +.charsheet .form-container.armor-grid .block { + grid-area: block; + width: 100%; +} +.charsheet .form-container.armor-grid .description { + display: flex; + flex-direction: column; + grid-area: description; + width: 100%; +} +.charsheet .form-container.armor-grid .description textarea{ + margin-bottom: 0px; +} +.charsheet .table-container input:checked + .details-container.armor { + display: flex; +} + +/* ARMORS REVAMPED STYLES END */ + +/* WEAPONS REVAMPED STYLES START */ + +.charsheet .table-container .headers-container .header2.name5 { + flex: 10; + text-align: left; + padding-left: 5px; +} +.charsheet .table-container .headers-container .header2.burden5 { + flex: 2; + text-align: center; +} +.charsheet .table-container .headers-container .header2.status5 { + flex: 4; + text-align: center; +} +.charsheet .table-container .headers-container .header2.actions5 { + flex: 2; + text-align: center; +} + +.charsheet .table-container .table-row .name5{ + font-size: 10px; + flex: 10; + text-align: left; + padding-left: 5px; + font-weight: bold; + cursor: default; +} +.charsheet .table-container .table-row .burden5 { + flex: 2; + text-align: center; + cursor: default; +} +.charsheet .table-container .table-row .status5 { + flex: 4; + text-align: center; + cursor: default; +} +.charsheet .table-container .details-container .details-row .details-label2.flex-2{ + flex: 2; +} + + +.charsheet .table-container .form-container.weapon-grid{ + grid-template-areas: + "name name status" + "burden focus power" + "wpn-type wpn-type wpn-type" + "description description description" + "close close close"; + grid-template-columns: 1fr 1fr 1fr; + gap:10px; +} +.charsheet .form-container.weapon-grid .picker { + display: flex; + flex-direction: column; + align-items: center; + grid-area: dropdown; + width: 100%; +} +.charsheet .form-container.weapon-grid .name { + display: flex; + flex-direction: column; + grid-area: name; + width: 100%; +} +.charsheet .form-container.weapon-grid .burden { + flex-direction: column; + grid-area: burden; + width: 100%; +} +.charsheet .form-container.weapon-grid .status { + flex-direction: column; + grid-area: status; + width: 100%; +} +.charsheet .form-container.weapon-grid .wpn-type { + grid-area: wpn-type; + width: 100%; +} +.charsheet .form-container.weapon-grid .focus { + grid-area: focus; + width: 100%; +} +.charsheet .form-container.weapon-grid .power { + grid-area: power; + width: 100%; +} +.charsheet .form-container.weapon-grid .description { + display: flex; + flex-direction: column; + grid-area: description; + width: 100%; +} +.charsheet .form-container.weapon-grid .description textarea{ + margin-bottom: 0px; +} +.charsheet .table-container input:checked + .details-container.weapon { + display: flex; +} + +/* WEAPONS REVAMPED STYLES END */ + + +/* MISC ITEMS REVAMPED STYLES START */ + +.charsheet .section-container.misc-inventory { + min-height: 740px; +} +.charsheet .table-container.misc-inventory { + height: 100%; +} +.charsheet .table-container .headers-container .header2.name6 { + flex: 10; + text-align: left; + padding-left: 5px; +} +.charsheet .table-container .headers-container .header2.burden6 { + flex: 2; + text-align: center; +} +.charsheet .table-container .headers-container .header2.status6 { + flex: 4; + text-align: center; +} +.charsheet .table-container .headers-container .header2.actions6 { + flex: 2; + text-align: center; +} + +.charsheet .table-container .table-row .name6{ + font-size: 10px; + flex: 10; + text-align: left; + padding-left: 5px; + font-weight: bold; + cursor: default; +} +.charsheet .table-container .table-row .burden6 { + flex: 2; + text-align: center; + cursor: default; +} +.charsheet .table-container .table-row .status6 { + flex: 4; + text-align: center; + cursor: default; +} + +.charsheet .table-container .form-container.misc-grid{ + grid-template-areas: + "name name burden status" + "description description description description" + "close close close close"; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap:10px; +} +.charsheet .form-container.misc-grid .picker { + display: flex; + flex-direction: column; + align-items: center; + grid-area: dropdown; + width: 100%; +} +.charsheet .form-container.misc-grid .name { + display: flex; + flex-direction: column; + grid-area: name; + width: 100%; +} +.charsheet .form-container.misc-grid .burden { + flex-direction: column; + grid-area: burden; + width: 100%; +} +.charsheet .form-container.misc-grid .status { + flex-direction: column; + grid-area: status; + width: 100%; +} +.charsheet .form-container.misc-grid .description { + display: flex; + flex-direction: column; + grid-area: description; + width: 100%; +} +.charsheet .form-container.misc-grid .description textarea{ + margin-bottom: 0px; +} +.charsheet .table-container input:checked + .details-container.misc-item { + display: flex; +} + + +/* MISC ITEMS REVAMPED STYLES END */ + + +/* SKILLS REVAMPED STYLES START */ +.charsheet .table-container .headers-container .header2.name7 { + flex: 9; + text-align: left; + padding-left: 5px; +} +.charsheet .table-container .headers-container .header2.total7 { + flex: 2; + text-align: center; + /* padding-left: 5px; */ +} +.charsheet .table-container .headers-container .header2.stat7 { + flex: 2; + text-align: center; + /* padding-left: 5px; */ +} +.charsheet .table-container .headers-container .header2.points7 { + flex: 2; + text-align: center; + /* padding-left: 5px; */ +} +.charsheet .table-container .headers-container .header2.misc7 { + flex: 2; + text-align: center; + /* padding-left: 5px; */ +} + +.charsheet .table-container .skill-row { + font-size: 10px; + display: flex; + flex-direction: row; + width: 100%; + border-top: #717171 1px solid; +} +.charsheet .table-container .skill-row.no-top { + border-top: none !important; +} +.charsheet .table-container .skill-row .name { + font-size: inherit; + flex: 9; + text-align: left; + padding-left: 5px; + /* padding-left: 5px; */ +} +.charsheet .table-container .skill-row .name button[type="action"], +.charsheet .table-container .skill-row .name button[type="roll"] { + font-size: inherit; + font-weight: bold; + text-transform: capitalize; + /* line-height: 0.1; */ + height: 20px; + text-align: start; + width: 150px; +} +.charsheet .table-container .skill-row .total { + font-size: inherit; + flex: 2; + text-align: center; +} +.charsheet .table-container .skill-row .total input{ + font-weight: bold; +} +.charsheet .table-container .skill-row .stat { + font-size: inherit; + flex: 2; + text-align: center; +} +.charsheet .table-container .skill-row .points { + font-size: inherit; + flex: 2; + text-align: center; +} +.charsheet .table-container .skill-row .misc { + font-size: inherit; + flex: 2; + text-align: center; +} +.charsheet .table-container .skill-row input[type="number"] { + border: 0; + font-size: 11px; + background: transparent; + width: 30px !important; + text-align: center; + padding: 0; + color: black; +} +/* SKILLS REVAMPED STYLES END */ + + +/* EXPERTISE STYLES START */ +.charsheet .table-container .headers-container .header2.name8 { + flex: 9; + text-align: left; + padding-left: 5px; +} +.charsheet .table-container .headers-container .header2.total8, +.charsheet .table-container .headers-container .header2.skill8, +.charsheet .table-container .headers-container .header2.points8, +.charsheet .table-container .headers-container .header2.misc8{ + flex: 2; + text-align: center; +} +.charsheet .table-container .headers-container .header2.actions8 { + flex: 1; + text-align: center; +} + +.charsheet .table-container .table-row .name8{ + font-size: 10px; + flex: 9; + text-align: left; + padding-left: 5px; + font-weight: bold; + cursor: default; +} +.charsheet .table-container .table-row .total8 input, +.charsheet .table-container .table-row .skill8 input, +.charsheet .table-container .table-row .points8 input, +.charsheet .table-container .table-row .misc8 input{ + border: 0; + font-size: 11px; + background: transparent; + width: 100% !important; + text-align: center; + padding: 0; + color: black; +} +.charsheet .table-container .table-row .total8, +.charsheet .table-container .table-row .skill8, +.charsheet .table-container .table-row .points8, +.charsheet .table-container .table-row .misc8 { + flex: 2; + text-align: center; + cursor: default; +} +.charsheet .table-container .table-row .actions.action8 { + flex: 1; +} +.charsheet .table-container .table-row .name-button.name8 button{ + width: 160px; +} +.charsheet .table-container .table-row .name-button.name8 span{ + width: 160px; + text-align: start; + justify-content: start; +} + +.charsheet .table-container .form-container.expertise-grid{ + grid-template-areas: + "name name skill" + "close close close"; + grid-template-columns: 1fr 1fr 1fr; + gap:10px; +} +.charsheet .form-container.expertise-grid .name { + display: flex; + flex-direction: column; + grid-area: name; + width: 100%; +} +.charsheet .form-container.expertise-grid .skill { + flex-direction: column; + grid-area: skill; + width: 100%; +} +/* EXPERTISE STYLES END */ + + +/* CRAFTING AND GATHERING STYLES START */ + +.charsheet .table-container.artabilities { + min-height:300px; +} +.charsheet .table-container.artabilities .item-container{ + margin-bottom: 0px; +} + +.charsheet .table-container .headers-container .header2.name9 { + flex: 10; + text-align: left; + padding-left: 5px; +} +.charsheet .table-container .headers-container .header2.cost9 { + flex: 4; + text-align: center; +} +.charsheet .table-container .headers-container .header2.actions9 { + flex: 2; + text-align: center; +} + +.charsheet .table-container .table-row .name9{ + font-size: 10px; + flex: 10; + text-align: left; + padding-left: 5px; + font-weight: bold; + cursor: default; +} +.charsheet .table-container .table-row .name-button.name9 button{ + width: 150px; +} +.charsheet .table-container .table-row .name-button.name9 span{ + width: 150px; +} +.charsheet .table-container .table-row .cost9 { + flex: 4; + text-align: center; + cursor: default; +} +.charsheet .table-container .table-row .actions9{ + flex: 2; +} + +.charsheet .table-container input:checked + .details-container.artability { + display: flex; +} + +.charsheet .table-container .form-container.ability-grid{ + grid-template-areas: + "dropdown dropdown dropdown dropdown" + "rolls rolls rolls rolls" + "close close close close"; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap:10px; +} +.charsheet .table-container .custom-enabler:checked ~ .ability-grid { + grid-template-areas: + "dropdown dropdown dropdown dropdown" + "name name name name" + "atype atype costs costs" + "requirements requirements requirements requirements" + "description description description description" + "rolls rolls rolls rolls" + "close close close close"; +} +.charsheet .form-container .picker { + display: flex; + flex-direction: column; + align-items: center; + grid-area: dropdown; + width: 100%; +} +.charsheet .form-container .name { + display: none; + flex-direction: column; + grid-area: name; + width: 100%; +} +.charsheet .form-container .picker.atype { + display: none; + grid-area: atype; + width: 100%; +} +.charsheet .form-container input:checked + .picker.atype { + display: flex; +} +.charsheet .form-container .block-textarea.requirements-ba { + min-height: 25px; + height: 25px; +} +.charsheet .form-container .costs { + display: none; + flex-direction: column; + align-items: center; + grid-area: costs; + width: 100%; +} +.charsheet .form-container .requirements { + display: none; + flex-direction: column; + align-items: center; + grid-area: requirements; + width: 100%; +} +.charsheet .form-container .description { + display: none; + flex-direction: column; + align-items: center; + grid-area: description; + width: 100%; +} +.charsheet .form-container .picker.rolls { + display: flex; + grid-area: rolls; + width: 100%; + flex-direction: column; +} +.charsheet .form-container .custom-macro { + display: none; + flex-direction: column; + align-items: center; + width: 100%; + padding-top: 5px; +} +.charsheet .form-container input:checked + .custom-macro { + display: flex; +} +.charsheet .form-container .custom-macro .block-textarea { + font-size: 10px; + margin:0px; + min-height: 60px; + height: 60px; +} +/* CRAFTING AND GATHERING STYLES END */ + + +/* LANGUAGE AND PROFICIENCIES STYLES START */ + +.charsheet .table-container.lang-prof textarea{ + width: 100%; + min-height: 100px; + height: 100px; + resize: vertical; /* Allows user to resize vertically */ + padding: 6px 8px; + border: 1px solid #ccc; + border-radius: 4px; + background: #fff; + box-sizing: border-box; + font-size: 12px; + margin-top: 5px; +} +.charsheet .table-container.npc-notes textarea{ + width: 100%; + min-height: 400px; + height: 400px; + resize: vertical; /* Allows user to resize vertically */ + padding: 6px 8px; + border: 1px solid #ccc; + border-radius: 4px; + background: #fff; + box-sizing: border-box; + font-size: 12px; + margin-top: 5px; +} +.charsheet .table-container.general-notes textarea{ + width: 100%; + min-height: 590px; + height: 590px; + resize: vertical; /* Allows user to resize vertically */ + padding: 6px 8px; + border: 1px solid #ccc; + border-radius: 4px; + background: #fff; + box-sizing: border-box; + font-size: 12px; + margin-top: 5px; +} + +/* LANGUAGE AND PROFICIENCIES STYLES END */ + + +/* SETUP STYLES START */ +.charsheet .table-container.setup .table-body { + display: flex; + flex-direction: column; + padding:5px; +} +.charsheet .table-container.setup .table-body .setup-row{ + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + margin-bottom: 5px; +} +.charsheet .table-container.setup .table-body .setup-pair{ + flex:1; + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; + width: 100%; + gap: 10px; +} +.charsheet .table-container.setup .table-body .setup-row label{ + font-size: 15px; + font-weight: bold; + align-self: center; + margin-bottom: 0px; + width: auto; +} +.charsheet .table-container.setup .table-body .setup-row input[type="number"]{ + width: 40px; + font-size: 14px; + padding: 4px 6px; + border: 1px solid #ccc; + border-radius: 4px; + background: #fff; + box-sizing: border-box; +} +.charsheet .table-container.setup .table-body .setup-row input[type="number"].disabled{ + background: #f0f0f0; + pointer-events: none; + color: #a0a0a0; + border: none; +} + + + + +/* SETUP STYLES END */ + + +/* FOOTER */ +.charsheet .footer{ + display: flex; + justify-content: center; + margin-bottom: -30px; +} + +.charsheet .footer-stamp img{ + width: 50px; + height: 50px; + /* opacity: 0.5; */ + /* filter: grayscale(100%); */ +} + +/* FOOTER */ + + +/* DEFAULT TEMPLATE STYLES START */ +.sheet-rolltemplate-default td{ + line-height:2; +} +/* DEFAULT TEMPLATE STYLES END */ \ No newline at end of file diff --git a/LyrianChronicles/LyrianChronicles.html b/LyrianChronicles/LyrianChronicles.html new file mode 100644 index 0000000000..e92f20e050 --- /dev/null +++ b/LyrianChronicles/LyrianChronicles.html @@ -0,0 +1,15265 @@ +