diff --git a/LyrianChronicles/LyrianChronicles.css b/LyrianChronicles/LyrianChronicles.css index 16f76552fa..01009c781a 100644 --- a/LyrianChronicles/LyrianChronicles.css +++ b/LyrianChronicles/LyrianChronicles.css @@ -3,6 +3,54 @@ background: #181818 !important; } +/* PC/NPC switch */ +.charsheet div.sheet-section-pc, +.charsheet div.sheet-section-npc { + display: none; +} + +.charsheet input.sheet-is-npc:checked ~ div.sheet-section-npc, +.charsheet input.sheet-is-npc:not(:checked) ~ div.sheet-section-pc { + display: block; +} + +.charsheet input.sheet-is-npc { + width: 20%; + height: 16px; + cursor: pointer; + position: relative; + opacity: 0; + z-index: 9999; +} + +.charsheet span.sheet-is-npc-tab::before { + content: "Player Sheet"; +} + +.charsheet span.sheet-is-npc-tab { + text-align: center; + display: inline-block; + width: 20%; + height: 16px; + font-size: 9px; + background: #65763c; + color: white; + font-weight: bold; + border-radius: 4px; + margin-left: -20% +} + +.charsheet input.sheet-is-npc:checked + span.sheet-is-npc-tab { + background: #93537c; + color: white; + border-radius: 4px; +} + +.charsheet input.sheet-is-npc:checked + span.sheet-is-npc-tab::before { + content: "NPC Sheet" +} + + /* ROLL BUTTONS */ .charsheet button[type="action"], .charsheet button[type="roll"] { @@ -336,7 +384,7 @@ color: #ccc; } -.charsheet .header-details-content { +.charsheet .sheet-section-pc .header-details-content { display: grid; grid-template-areas: "name spiritcore experience" @@ -562,11 +610,11 @@ width: 450px; } .charsheet .inventory-left-column{ - width: 450px; + width: 400px; } .charsheet .inventory-right-column { - width: 350px; + width: 400px; } .charsheet .skills-left-column{ width: 400px; @@ -680,7 +728,8 @@ line-height: 0.5; } .sheet-darkmode .charsheet .attribute-container .label, -.sheet-darkmode .charsheet .attribute-container2 .label { +.sheet-darkmode .charsheet .attribute-container2 .label, +.sheet-darkmode .charsheet .attribute-container3 .label { color: #000000; } .charsheet .attribute-container .value { @@ -713,9 +762,46 @@ cursor: default; } .sheet-darkmode .charsheet .attribute-container .value input, -.sheet-darkmode .charsheet .attribute-container2 .value input { +.sheet-darkmode .charsheet .attribute-container2 .value input, +.sheet-darkmode .charsheet .attribute-container3 .value input { color: #0f0f0f; } + +.charsheet .attribute-container3 { + flex-grow: 1; + display: flex; + flex-direction: column-reverse; + align-items: center; + justify-content: start; + border-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/LyrianChronicles/Assets/AttibuteVal.png") + 50 50 50 50 fill stretch; + border-style: solid; + border-width: 8px 10px; + box-sizing: border-box; + width: 80px; + margin: 0 6px; +} +.charsheet .attribute-container3 .label { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + text-align: center; + justify-content: start; + line-height: 0.5; + color: #8c8c8c; +} +.charsheet .attribute-container3 .value input { + border: 0; + background: transparent; + width: 100%; + height: 20px; + text-align: center; + font-size: 18px; + font-weight: bold; + padding: 0; + color: #505050; + cursor: default; +} /* ATTRIBUTE END */ /* DERIVED ATTRIBUTES START*/ @@ -1068,7 +1154,8 @@ flex-direction: column; width: 100%; } -.charsheet .table-container input[type="checkbox"]:checked + .row-container { +.charsheet .table-container input[type="checkbox"]:checked + .row-container, +.charsheet .npc-sheet-content .row-container { display: flex; } .charsheet .table-container .table-row{ @@ -1175,6 +1262,7 @@ width: 13px; margin-left: 0px; } +.sheet-darkmode .charsheet .npc-icon, .charsheet .table-container .table-row .actions .item span { display: flex; width: 20px; @@ -1190,24 +1278,29 @@ cursor: pointer; margin-top: 0px; } +.sheet-darkmode .charsheet .npc-icon, .sheet-darkmode .charsheet .table-container .table-row .actions .item span { color: #272626; } .charsheet .table-container .table-row .actions .item.thin span { width: 13px; } +.charsheet input:hover + .npc-icon, .charsheet .table-container .table-row .actions .item input:hover + span { border-color: #b61037; color: #b61037; } +.sheet-darkmode .charsheet input:hover + .npc-icon, .sheet-darkmode .charsheet .table-container .table-row .actions .item input:hover + span { border-color: #49efc8; color: #49efc8; } +.charsheet input:active + .npc-icon, .charsheet .table-container .table-row .actions .item input:active + span { border-color: #ff0000; color: #ff0000; } +.sheet-darkmode .charsheet input:active + .npc-icon, .sheet-darkmode .charsheet .table-container .table-row .actions .item input:active + span { border-color: #0ff; color: #0ff; @@ -2182,10 +2275,13 @@ height: 100%; } .charsheet .table-container .headers-container .header2.name6 { - flex: 10; + flex: 8; text-align: left; padding-left: 5px; } +.charsheet .table-container .headers-container .header2.amount6 { + flex: 2; +} .charsheet .table-container .headers-container .header2.burden6 { flex: 2; } @@ -2198,12 +2294,35 @@ .charsheet .table-container .table-row .name6{ font-size: 10px; - flex: 10; + flex: 8; text-align: left; padding-left: 5px; font-weight: bold; cursor: default; } +.charsheet .table-container .table-row .amount6 { + flex: 2; +} +.charsheet .table-container .table-row .amount6 input{ + margin-bottom: 0; + border-left: 0; + border-right: 0; + border-top: 0; + border-bottom: 0; + border-radius: 0; + height: 15px; + padding: 0; + width: 100%; + border-color: #cccccc; + background-color: #f0f0f0; + text-align: center; + font-size: 12px; +} +.sheet-darkmode .charsheet .table-container .table-row .amount6 input{ + color: #131313; + border-color: #393939; + background-color: #bcbcbc; +} .charsheet .table-container .table-row .burden6 { flex: 2; text-align: center; @@ -2589,7 +2708,7 @@ display: flex; } -.charsheet .table-container .form-container.ability-grid{ +.charsheet .table-container .form-container.artability-grid{ grid-template-areas: "dropdown dropdown dropdown dropdown" "rolls rolls rolls rolls" @@ -2597,7 +2716,7 @@ grid-template-columns: 1fr 1fr 1fr 1fr; gap:10px; } -.charsheet .table-container .custom-enabler:checked ~ .ability-grid { +.charsheet .table-container .custom-enabler:checked ~ .artability-grid { grid-template-areas: "dropdown dropdown dropdown dropdown" "name name name name" @@ -2804,4 +2923,261 @@ .sheet-rolltemplate-default td{ line-height:2; } -/* DEFAULT TEMPLATE STYLES END */ \ No newline at end of file +/* DEFAULT TEMPLATE STYLES END */ + +/* NPC STUFF START */ +.charsheet .sheet-section-npc-header { + display: block; + position: relative; +} + +.charsheet .sheet-section-npc .header-details-content { + display: grid; + grid-template-areas: + "name rank type danger size"; + grid-template-columns: 3fr 1fr 2fr 1fr 1fr; + gap: 10px; + row-gap: 0px; + height: 100%; + width: 100%; + margin-top: 10px; +} + +.charsheet .header-details-content .rank { + grid-area: rank; +} + +.charsheet .header-details-content .type { + grid-area: type; +} + +.charsheet .header-details-content .danger { + grid-area: danger; +} + +.charsheet .header-details-content .size { + grid-area: size; +} +.charsheet .header-details-content label { + margin-bottom: 0px; +} + +.charsheet .npc-sheet-content { + padding-top: 8px; + width: 100%; + box-sizing: border-box; + gap: 10px; +} + +.charsheet .npc-left-column { + width: 300px; +} +.charsheet .npc-right-column { + width: calc(100% - 300px); +} + +.charsheet .sheet-section-npc .section-container { + border-width: 12px; +} + +.charsheet .npc-main-stats { + display: grid; + grid-template-areas: + "focus power" + "agility toughness"; + grid-template-columns: 1fr 1fr; +} +.charsheet .sheet-section-npc .derived-stats { + grid-template-areas: + "accuracy damage" + "evasion dodge" + "guard blocking" + "save-bonus potency" + "initiative speed"; +} +.charsheet .derived-stats .accuracy { + grid-area: accuracy; +} +.charsheet .derived-stats .damage { + grid-area: damage; +} + +.charsheet .npc-sub-stats { + display: flex; +} + +.charsheet .sheet-section-npc .attribute-container2 .label { + width: 128px; + margin-left: -33px; +} + +.charsheet .sheet-section-npc .value input { + cursor: text !important; +} + +.charsheet .npc-button-container { + position: relative; +} +.charsheet .npc-button, +.charsheet .npc-icon { + position: absolute; + width: 15px; + height: 15px; + top: -10px; + right: -12px; +} +.charsheet .npc-button { + cursor: pointer; + opacity: 0; + z-index: 9999; +} +.charsheet .npc-icon { + font-size: 15px !important; +} + +.charsheet .npc-autocalculate, +.charsheet .npc-autocalculate + span { + position: absolute; + width: 60px; + height: 16px !important; + top: -18px; + right: 12px; +} +.charsheet .npc-autocalculate { + cursor: pointer; + opacity: 0; + z-index: 9999; +} +.charsheet .npc-autocalculate + span { + font-size: 9px; + background: #333; + color: #eee; + border-radius: 4px; + text-align: center; + font-weight: bold; +} +.charsheet .npc-autocalculate:checked + span { + background: #0a0; + color: #fff; +} +.charsheet .npc-autocalculate + span::before { + text-transform: uppercase; + content: "Manual"; +} +.charsheet .npc-autocalculate:checked + span::before { + content: "Autocalc"; +} + +.charsheet .sheet-section-npc .custom { + display: flex; +} +.charsheet .sheet-section-npc .table-container input:checked + .details-container.ability { + display: flex; +} + +.charsheet .sheet-section-npc .table-container .npcaction-grid { + grid-template-areas: + "name name name name" + "keywords keywords range costs" + "requirements requirements requirements requirements" + "description description description description" + "rolls rolls rolls rolls" + "close close close close"; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap:10px; +} + +.charsheet .sheet-section-npc .table-container .npcability-grid { + grid-template-areas: + "name name name name" + "description description description description" + "close close close close"; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap:10px; +} + +/* NPC STUFF END */ + +/* FULL VITALS START */ +.charsheet .partial-vitals-block, +.charsheet .full-vitals-block { + display: none; +} +.charsheet .full-vitals-toggle:not(:checked) ~ .partial-vitals-block { + display: flex; + flex-direction: row; + gap: 5px; +} +.charsheet .full-vitals-toggle:checked ~ .full-vitals-block { + display: flex; + flex-direction: column; + gap: 5px; +} +/* FULL VITALS END */ + +/* NPC TABLES START */ +.charsheet .table-container .npc-skill-name { + flex: 6; + text-align: left !important; + padding-left: 5px; +} +.charsheet .table-container .npc-skill-name select { + text-align: left; +} +.charsheet .table-container .npc-skill-expertise { + flex: 5; +} + +.charsheet .table-container .npc-action-name, +.charsheet .table-container .npc-ability-name { + flex: 8; + text-align: left !important; + padding-left: 5px; +} + +.charsheet .table-container .npc-skill-total, +.charsheet .table-container .npc-skill-stat, +.charsheet .table-container .npc-skill-base, +.charsheet .table-container .npc-skill-actions, +.charsheet .table-container .npc-action-cost, +.charsheet .table-container .npc-action-range { + text-align: center; + flex: 2; +} + +.charsheet .table-container .npc-action-actions, +.charsheet .table-container .npc-ability-actions { + flex: 2; +} + +.charsheet .table-container .table-row .npc-skill-name, +.charsheet .table-container .table-row .npc-action-name, +.charsheet .table-container .table-row .npc-ability-name { + font-size: 10px; + font-weight: bold; + cursor: default; +} +.charsheet .table-container .table-row .npc-skill-expertise input, +.charsheet .table-container .table-row .npc-skill-total input, +.charsheet .table-container .table-row .npc-skill-stat input, +.charsheet .table-container .table-row .npc-skill-base input, +.charsheet .table-container .table-row .npc-action-range input, +.charsheet .table-container .table-row .npc-action-cost input { + border: 0; + font-size: 11px; + background: transparent; + width: 100% !important; + text-align: center; + padding: 0; + color: black; +} +.charsheet .table-container .table-row .npc-skill-expertise, +.charsheet .table-container .table-row .npc-skill-total, +.charsheet .table-container .table-row .npc-skill-stat, +.charsheet .table-container .table-row .npc-skill-base, +.charsheet .table-container .table-row .npc-action-range input, +.charsheet .table-container .table-row .npc-action-cost input { + text-align: center; + cursor: default; +} +/* NPC TABLES END/ diff --git a/LyrianChronicles/LyrianChronicles.html b/LyrianChronicles/LyrianChronicles.html index 76da83ab68..20e664f994 100644 --- a/LyrianChronicles/LyrianChronicles.html +++ b/LyrianChronicles/LyrianChronicles.html @@ -1,4 +1,5 @@