diff --git a/Alien Roleplaying Game/Alien-Roleplaying-Game.css b/Alien Roleplaying Game/Alien-Roleplaying-Game.css index 019760d479..2c7dea08ad 100644 --- a/Alien Roleplaying Game/Alien-Roleplaying-Game.css +++ b/Alien Roleplaying Game/Alien-Roleplaying-Game.css @@ -6,9 +6,13 @@ -background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/bg.png?raw=true"); background-repeat: repeat; padding: 5px; + margin: -10px !important; min-width: 1140px; -min-width: 830px; } +input.sheet-tab-sheet[value="Xeno"] ~ .sheet-background-wrap { + min-width: 800px; +} .sheet-spacebackground:checked ~ .sheet-background-wrap { background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/bg.png?raw=true"); background-repeat: repeat; @@ -30,7 +34,7 @@ justify-items: right; justify-content: flex-end; align-self: end; - align-items: flex-end; + align-items: flex-start; justify-self: flex-end; margin-right: 0 !important; } @@ -71,19 +75,26 @@ text-align: left; border-color: transparent; } - -.sheet-contains-fourteen-columns { - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - z-index: 5; -} - .sheet-contains-seven-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 2px; } +.sheet-contains-eight-columns { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-gap: 8px; + padding: 10px; + text-align: left; +} +.sheet-contains-fourteen-columns { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + z-index: 5; +} + + .sheet-roll-buttons{ display: grid; + text-align: center; grid-gap: 5px; } @@ -106,12 +117,16 @@ .sheet-span-one-thru-six { grid-column: 1 / 7;} .sheet-span-one-thru-seven { grid-column: 1 / 8;} .sheet-span-two-three { grid-column: 2 / 4;} +.sheet-span-two-thru-four { grid-column: 2 / 5;} .sheet-span-three-four { grid-column: 3 / 5;} .sheet-span-three-thru-five { grid-column: 3 / 6;} +.sheet-span-three-thru-six { grid-column: 3 / 7;} +.sheet-span-four { grid-column: 4;} .sheet-span-four-five { grid-column: 4 / 6;} .sheet-span-four-thru-six { grid-column: 4 / 7;} .sheet-span-five-six { grid-column: 5 / 7;} .sheet-span-five-thru-seven { grid-column: 5 / 8;} +.sheet-span-five-thru-eight { grid-column: 5 / 9;} .sheet-span-five-thru-nine { grid-column: 5 / 10;} .sheet-span-five-thru-ten { grid-column: 5 / 11;} .sheet-span-six-seven { grid-column: 6 / 8;} @@ -122,6 +137,7 @@ .sheet-span-seven-thru-nine { grid-column: 7 / 10;} .sheet-span-seven-thru-thirteen { grid-column: 7 / 14;} .sheet-span-seven-thru-fourteen { grid-column: 7 / 15;} +.sheet-span-eight { grid-column: 8 / 9;} .sheet-span-eight-nine { grid-column: 8 / 10;} .sheet-span-eight-thru-ten { grid-column: 8 / 11;} .sheet-span-eight-thru-eleven { grid-column: 8 / 12;} @@ -160,10 +176,16 @@ .sheet-span-comp-dmg { grid-row: 9;} .sheet-span-upg-arm { grid-row: 10;} .sheet-span-row1 { grid-row: 1;} +.sheet-span-row1-2 { grid-row: 1/3;} .sheet-span-row2 { grid-row: 2;} +.sheet-span-row2-3 { grid-row: 2/4;} .sheet-span-row3 { grid-row: 3;} +.sheet-span-row3-4 { grid-row: 3/5;} .sheet-span-row4 { grid-row: 4;} +.sheet-span-row4-5 { grid-row: 4/6;} +.sheet-span-row4-6 { grid-row: 4/7;} .sheet-span-row5 { grid-row: 5;} +.sheet-span-row5-8 { grid-row: 5/9;} .sheet-span-row6 { grid-row: 6;} .sheet-span-row7 { grid-row: 7;} .sheet-span-row8 { grid-row: 8;} @@ -173,12 +195,21 @@ .sheet-span-row12 { grid-row: 12;} .sheet-span-row13 { grid-row: 13;} +.sheet-xeno-column > div.sheet-grid-item { + margin-top: 20px; +} +.sheet-xeno-column > div.sheet-col-separator{ + width: 5%; +} + .sheet-cover-100-flex { width: 100% !important; display: flex; } .sheet-cover-100 { width: 100% !important; } +.sheet-cover-90 { width: 90% !important; } .sheet-cover-80 { width: 80% !important; } .sheet-cover-75 { width: 75% !important; } .sheet-cover-70 { width: 70% !important; } .sheet-cover-60 { width: 60% !important; } +.sheet-cover-45 { width: 45% !important; } .sheet-cover-40 { width: 40% !important; } .sheet-cover-25 { width: 25% !important; } .sheet-cover-20 { width: 20% !important; } @@ -222,6 +253,8 @@ .sheet-flex-nowrap { flex-wrap: nowrap; } .sheet-flex-break { flex-basis: 100%; height: 0; } +.sheet-float-left { float: left; } +.sheet-float-right { float: right; } .sheet-flex-center { display: flex; align-self: center; justify-self: center; } .sheet-flex-items-center { display: flex; justify-items: center; align-self: center; } .sheet-flex-items-right { display: flex; justify-items: right; } @@ -293,6 +326,7 @@ .sheet-w-fit { width: fit-content; } .sheet-h-fit { height: fit-content; } +.sheet-text-underline { text-decoration: underline; } .sheet-weapon-item { padding: 0px; @@ -351,7 +385,63 @@ display: none !important; } +/* - - - - - - - - - - EXPAND AREAS - - - - - - - - - - */ +.charsheet .sheet-expand { + -left: -8px; + opacity: 0; + -position: absolute; + -top: -4px; + -width: 18px; + z-index: 6; + margin-top: 5px; +} + +.charsheet .sheet-expand + span::before { + color: #c3996b; + content: "4"; + cursor: pointer; + font-family: pictos; + font-size: 10px; + z-index: 3; + border: 1px solid #c3996b; + border-radius: 50%; + height: 11px; + width: 11px; + padding: 1px 2px; +} +.charsheet input.sheet-expand + span { + padding: 0; + margin: 0; + transform: rotate(90deg); + position: relative; + right: 8px; + bottom: 5px; +} +.charsheet input.sheet-expand:checked + span { + padding: 0; + margin: 0; + transform: rotate(-90deg);position: relative; + -right: 8px; + top: 3px; + +} + +/*.charsheet input.sheet-expand + span::before, +.charsheet input.sheet-expand:checked + span::before { + opacity: 0.25; +} +.charsheet input:hover + input.sheet-expand + span::before, +.charsheet span:hover + input.sheet-expand + span::before, +.charsheet div:hover + input.sheet-expand + span::before { + opacity: 0.85; +} */ +.charsheet input.sheet-expand + span + span + textarea { + display: none; +} +.charsheet input.sheet-expand:checked + span + span + textarea { + display: inline-block; +} /* - - - - - - - - - - AUTO EXPAND TEXTAREAS - - - - - - - - - - */ .sheet-auto-expand { @@ -419,6 +509,30 @@ min-height: 20px; height: 20px; } +.sheet-xeno-textfield { + min-height: 135px; + margin-top: 10px; +} +.sheet-xeno-textfield textarea { + min-height: 120px; + overflow-y: auto; + overflow-x: hidden; + max-width: 100%; + min-width: 100%; + resize: vertical; +} +.sheet-xeno .sheet-xeno-attack textarea { + min-height: 60px; + font-size: 12px; +} +.sheet-xeno .sheet-xeno-attack input { + font-size: 12px; +} +.sheet-xeno-notes textarea { + max-width: 100%; + min-width: 100%; +} + .sheet-textarea-margin-correct { margin: 6px 0px 0px 0px; @@ -430,6 +544,12 @@ padding: 0px; margin: 3px; } +.sheet-dotted-separator { + line-height: inherit; + border-right: 1px dashed rgba(0, 139, 139, 1); /* Dark Cyan #008b8b */ + padding: 0; + margin: 0 5px 0 0; +} .sheet-dotted-underline { border-bottom: 1px dashed rgba(0, 139, 139, 1) !important; /* Dark Cyan #008b8b */ @@ -481,6 +601,7 @@ div.sheet-changelog button.sheet-button-link:focus::before { text-transform: uppercase; font-size: 10px; letter-spacing: .1em; + padding-left: 3px; } .sheet-teal-header-gear-l { @@ -509,6 +630,7 @@ div.sheet-changelog button.sheet-button-link:focus::before { letter-spacing: .1em; } +.sheet-xeno-header, .sheet-ship-header { background-color: rgba(204, 217, 207, 1); /* Teal Varient */ -position: relative; @@ -527,9 +649,24 @@ div.sheet-changelog button.sheet-button-link:focus::before { z-index: 10; clip-path: polygon(0 0%, 100% 0%, calc(100% - 8px) 100%, 8px 100%); } +.sheet-black-floating-header.sheet-header-doublerow, +.sheet-black-floating-header-clipped.sheet-header-doublerow { + height: 2.2em; + line-height: 1.2em; + padding-top: 5px; + width: min-content; +} +.sheet-black-floating-header.sheet-header-doublerow ~ .sheet-xeno-textfield, +.sheet-black-floating-header-clipped.sheet-header-doublerow ~ .sheet-xeno-textfield { + min-height: 120px; + -max-height: 80px; + margin-top: 30px; + -max-width: 175px; +} .sheet-ship-attribute { margin-top: 10px; } +.sheet-xeno-header-name, .sheet-ship-header-name { width: 70px; } @@ -539,6 +676,7 @@ div.sheet-changelog button.sheet-button-link:focus::before { .sheet-ship-header-ai { width: 50px; } +.sheet-xeno-header-attribute, .sheet-ship-attribute-name { width: 80%; justify-self: center; @@ -548,7 +686,7 @@ div.sheet-changelog button.sheet-button-link:focus::before { justify-self: center; } -button[type="roll"].sheet-button-skill, .sheet-medium-teal-header, .sheet-dark-teal-header { +button[type="roll"].sheet-button-skill, input[type="checkbox"].sheet-button-skill, .sheet-medium-teal-header, .sheet-dark-teal-header { color: #008b8b; /* Dark Cyan #008b8b */ font-family: 'Montserrat'; text-transform: uppercase; @@ -607,9 +745,9 @@ button[type="roll"].sheet-button-skill, .sheet-medium-teal-header, .sheet-dark-t border: 1px solid rgba(0, 0, 0, 1); /* Black #000000 */ float: left; height: 1.4em; - -width: 80%; + width: fit-content; -line-height: 1em; - margin: -12px 15% 0px -7px; + margin: -12px 0 0px -7px; text-align: left; padding: 0px 15px 4px 8px; border-radius: unset; @@ -803,13 +941,13 @@ input[type="number"].sheet-number-input { -moz-appearance: textfield; } - - .sheet-span-gear .sheet-vertical-adjust-one { overflow-y: auto; overflow-x: hidden; max-height: 280px; } + +/* TEXT FIELDS */ .sheet-span-tinyitems textarea { max-width: 100%; min-width: 100%; @@ -818,6 +956,7 @@ input[type="number"].sheet-number-input { max-height: 65px; min-height: 65px; } +.sheet-xeno-textfield textarea::-webkit-scrollbar, .sheet-span-gear .sheet-vertical-adjust-one::-webkit-scrollbar, .sheet-tab-content textarea::-webkit-scrollbar, .sheet-span-tinyitems textarea::-webkit-scrollbar { @@ -825,18 +964,21 @@ input[type="number"].sheet-number-input { margin-left: 4px; cursor: auto; } +.sheet-xeno-textfield textarea::-webkit-scrollbar-track, .sheet-span-gear .sheet-vertical-adjust-one::-webkit-scrollbar-track, .sheet-tab-content textarea::-webkit-scrollbar-track, .sheet-span-tinyitems textarea::-webkit-scrollbar-track { border-radius: 3px; background: darkgrey; } +.sheet-xeno-textfield textarea::-webkit-scrollbar-thumb, .sheet-span-gear .sheet-vertical-adjust-one::-webkit-scrollbar-thumb, .sheet-tab-content textarea::-webkit-scrollbar-thumb, .sheet-span-tinyitems textarea::-webkit-scrollbar-thumb { border-radius: 3px; background: gray; } +.sheet-xeno-textfield textarea::-webkit-scrollbar-thumb:hover, .sheet-span-gear .sheet-vertical-adjust-one::-webkit-scrollbar-thumb:hover, .sheet-tab-content textarea::-webkit-scrollbar-thumb:hover, .sheet-span-tinyitems textarea::-webkit-scrollbar-thumb:hover { @@ -1082,7 +1224,7 @@ button[type="action"].sheet-action-tab { button[type="action"].sheet-action-tab { padding: 0px 0px 0px 0px; } } .sheet-header-tabs button[type=action].sheet-action-tab { - width: 65px; + -width: 65px; color: rgb(204, 204, 204); background-color: #696969; -border: 1px solid #696969; @@ -1090,6 +1232,11 @@ button[type="action"].sheet-action-tab { border-radius: 0; margin-right: 0; -border-bottom: 2px solid #d3d3d3; + width: fit-content; + min-width: fit-content; + padding-left: 10px; + padding-right: 10px; + font-size: 10px; } button[type="action"].sheet-action-tab.sheet-fit-five { width: 15%; @@ -1182,17 +1329,24 @@ input.sheet-advencumbrance:not(:checked) ~ div .sheet-weapon-item-details { } input.sheet-tab-sheet[value="Character"] ~ div .sheet-ship, +input.sheet-tab-sheet[value="Character"] ~ div .sheet-xeno, input.sheet-tab-sheet[value="Character"] ~ div .sheet-config, input.sheet-tab-sheet[value="Ship"] ~ div .sheet-character, +input.sheet-tab-sheet[value="Ship"] ~ div .sheet-xeno, input.sheet-tab-sheet[value="Ship"] ~ div .sheet-config, input.sheet-tab-sheet[value="Config"] ~ div .sheet-character, -input.sheet-tab-sheet[value="Config"] ~ div .sheet-ship { +input.sheet-tab-sheet[value="Config"] ~ div .sheet-xeno, +input.sheet-tab-sheet[value="Config"] ~ div .sheet-ship, +input.sheet-tab-sheet[value="Xeno"] ~ div .sheet-character, +input.sheet-tab-sheet[value="Xeno"] ~ div .sheet-ship, +input.sheet-tab-sheet[value="Xeno"] ~ div .sheet-config { display: none; } input.sheet-tab-sheet[value="Character"] ~ div .sheet-character, input.sheet-tab-sheet[value="Ship"] ~ div .sheet-ship, -input.sheet-tab-sheet[value="Config"] ~ div .sheet-config { +input.sheet-tab-sheet[value="Config"] ~ div .sheet-config , +input.sheet-tab-sheet[value="Xeno"] ~ div .sheet-xeno { display: grid; } @@ -1203,6 +1357,7 @@ input.sheet-tab-sheet[value="Config"] ~ div .sheet-config { input.sheet-tab-sheet[value="Character"] ~ div .sheet-header-tabs button[name="act_tab_character"], input.sheet-tab-sheet[value="Ship"] ~ div .sheet-header-tabs button[name="act_tab_ship"], +input.sheet-tab-sheet[value="Xeno"] ~ div .sheet-header-tabs button[name="act_tab_xeno"], input.sheet-tab-sheet[value="Config"] ~ div .sheet-header-tabs button[name="act_tab_config"] { color: black; background-color: #d3d3d3; @@ -1636,6 +1791,226 @@ input[name="attr_shipdamage_max"][value="0"] ~ .sheet-hullpoints-missing { padding-top: 0; } +/* XENO DAMAGE */ + +.sheet-xenohealth label.sheet-dark-teal-header { + padding-right: 0; + margin-bottom: 0; + margin-top: 2px; +} +.sheet-xeno-health-row { + margin-top: -10px; + display: flex; + align-self: center; +} +.sheet-xeno-health-boxes { + margin-left: 20px; + margin-right: 10px; +} + +.sheet-xeno-health-boxes label { + color: #000000; + background: #b4f870; + border: solid 1px #a5e664; + box-shadow: 0px 0px 10px #1db51d; + text-align: center; + display: inline-block; + width: 16px; + height: 16px; + font-size: 10px; + font-weight: bold; + margin-right: 7px; + padding: 0px 0px 0px 0px; + line-height: 16px; + margin-top: 5px; + margin-bottom: 1px; + cursor: pointer; +} + +input.sheet-xenohealth-box:checked + label.sheet-xenohealth { + color: #000000; + background: #78e60a; + border: solid 1px #7eeb11; + box-shadow: 0px 0px 10px #109b10; +} + +/* Only show radios up to the max value */ +input[name="attr_health_max"][value="0"] ~ label.sheet-xenohealth0 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="1"] ~ label.sheet-xenohealth1 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="2"] ~ label.sheet-xenohealth2 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="3"] ~ label.sheet-xenohealth3 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="4"] ~ label.sheet-xenohealth4 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="5"] ~ label.sheet-xenohealth5 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="6"] ~ label.sheet-xenohealth6 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="7"] ~ label.sheet-xenohealth7 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="8"] ~ label.sheet-xenohealth8 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="9"] ~ label.sheet-xenohealth9 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="10"] ~ label.sheet-xenohealth10 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="11"] ~ label.sheet-xenohealth11 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="12"] ~ label.sheet-xenohealth12 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="13"] ~ label.sheet-xenohealth13 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="14"] ~ label.sheet-xenohealth14 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="15"] ~ label.sheet-xenohealth15 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="16"] ~ label.sheet-xenohealth16 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="17"] ~ label.sheet-xenohealth17 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="18"] ~ label.sheet-xenohealth18 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="19"] ~ label.sheet-xenohealth19 ~ .sheet-xenohealth, +input[name="attr_health_max"][value="20"] ~ label.sheet-xenohealth20 ~ .sheet-xenohealth { + display: none; +} + +input.sheet-xenohealth0:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth1:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth2:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth3:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth4:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth5:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth6:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth7:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth8:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth9:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth10:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth11:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth12:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth13:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth14:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth15:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth16:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth17:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth18:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth19:checked + label.sheet-xenohealth ~ .sheet-xenohealth, +input.sheet-xenohealth20:checked + label.sheet-xenohealth ~ .sheet-xenohealth { + color: #ffffff; + background: #808080; + border: solid 1px #808080; + box-shadow: 0px 0px 10px #008b8b; +} + +.sheet-xeno .sheet-box-flexlist { + display: flex; + flex-direction: column; +} + +.sheet-xeno .sheet-no-spin-input { + -clip-path: polygon(33% 0, 67% 0, 100% 33%, 100% 67%, 67% 100%, 33% 100%, 0 67%, 0 33%); +} +.sheet-xeno-speed .sheet-flexlist, +.sheet-xeno-skills .sheet-flexlist { + text-align: unset; +} +.sheet-xeno-speed .sheet-flexlist input[type="number"], +.sheet-xeno-skills .sheet-flexlist input[type="number"] { + float: right; +} + +.sheet-xeno .sheet-roll-buttons { + display: flex; + text-align: center; + line-height: 1em; + grid-gap: 5px; +} +.sheet-xeno .sheet-roll-buttons label.sheet-xenowhisper { + color: #008b8b; + font-family: 'Montserrat'; + text-transform: uppercase; + font-size: 10px; + font-weight: bold; + height: 14px; + line-height: 14px; + width: fit-content; + margin: 0px 1px; + padding: 2px 3px; + background-color: transparent; + border: 1px solid #008b8b; + border-radius: 5px; + background-image: none; + display: inline; + text-shadow: none; + margin-top: 0; + cursor: pointer; +} +.sheet-xeno .sheet-roll-buttons input[type="checkbox"].sheet-xenowhisper:checked + label.sheet-xenowhisper { + background-color: #008b8b; + color: rgb(204, 217, 207); +} +.charsheet div.sheet-xeno div.sheet-roll-buttons button[type="roll"].sheet-button-alpha, +.charsheet div.sheet-xeno div.sheet-roll-buttons button[type="roll"].sheet-button-beta { + width: fit-content; +} +.sheet-xeno .sheet-armor { + display: grid; + grid-template-columns: 50% 50%; + margin-top: 15px; +} +.sheet-xeno .sheet-armor button[type="roll"].sheet-button-skill { + margin-right: 15px; +} +.sheet-xeno .sheet-armor button[type="roll"].sheet-button-skill.sheet-button-armorvs { + width: fit-content; + margin-right: 0; +} +.sheet-xeno .sheet-armor input[type="text"] { + background-color: transparent; + width: 70px; + color:rgb(0, 139, 139); + vertical-align: unset; +} +.sheet-xeno-attack-control { + width: 50%; + display: flex; + flex-direction: row; + align-content: flex-end; + justify-self: flex-end; + align-self: flex-end; + margin-top: -10px; + margin-bottom: -5px; +} +.sheet-xeno-attack-control button.sheet-attack-control-label { + border: 0; + margin: 0; + padding: 0; + background-color: transparent; + width: fit-content; +} +.sheet-xeno-attack-control button.sheet-attack-control-label label { + margin: 0; + padding: 0 3px; + cursor: pointer; +} +.sheet-xeno-attack-control button.sheet-attack-control-label:nth-of-type(2) { + margin-right: 10px; +} +.sheet-xeno-attack { + display: grid; + grid-template-columns: 25px auto 7px 5px; + column-gap: 5px; +} + +.sheet-xeno-attack-number { + float: left; + padding: 0 10px; +} +.sheet-xeno-attack-desc { + background: transparent; + float: left; + width: 100%; + height: 5em; + max-width: calc(100% - 12px); + min-width: calc(100% - 12px); + margin-right: 5px; + margin-top: 3px; +} +.sheet-xeno-attack-name { + background: transparent; + float: left; + width: 100%; + height: 1.5em; + max-width: calc(100% - 12px); + min-width: calc(100% - 12px); + margin-right: 5px; + padding: 1px; +} + /* WOOHOO BUTTONS */ @@ -1659,7 +2034,7 @@ button[type="roll"].sheet-button-alpha:before, button[type="roll"].sheet-button- } - +label.sheet-button-skill, button[type="roll"].sheet-button-skill { height: 14px; line-height: 14px; @@ -1673,13 +2048,14 @@ button[type="roll"].sheet-button-skill { text-shadow: none; } +label.sheet-button-skill:hover, button[type="roll"].sheet-button-skill:hover { color: rgb(204, 217, 207); /* Teal Varient */ background-color: rgba(0, 139, 139, 1); /* Dark Cyan #008b8b */ border: 1px solid #008b8b; text-shadow: none; } - +label.sheet-button-skill:active, button[type="roll"].sheet-button-skill:active { color: rgb(204, 217, 207); /* Teal Varient */ background-color: #008b8b; /* Dark Cyan #008b8b */ @@ -1697,21 +2073,29 @@ button[type="roll"].sheet-smaller-skill { border: 1px solid #008b8b; /* Gave it an outline as players were not realising it was a button */ } - -button[type="roll"].sheet-button-alpha, button[type="roll"].sheet-button-beta, button[type="roll"].sheet-button-gamma{ +label.sheet-button-alpha, label.sheet-button-beta, label.sheet-button-gamma, +button[type="roll"].sheet-button-alpha, button[type="roll"].sheet-button-beta, button[type="roll"].sheet-button-gamma { margin-top: 0px; margin-bottom: 0px; border: 1px solid #008b8b; width: inherit; } +label.sheet-button-alpha, button[type="roll"].sheet-button-alpha { text-transform: lowercase; /* Exception because common usage of 1d6 is more important than consistency with theme. */ } - +label.sheet-button-skill:focus, button[type="roll"].sheet-button-skill:focus { outline:0; } +input[type="checkbox"].sheet-button-skill:checked label { + color: rgb(204, 217, 207); /* Teal Varient */ + background-color: #008b8b; /* Dark Cyan #008b8b */ + border: 1px solid #008b8b; /* Dark Cyan #008b8b */ + box-shadow: 0px 0px 10px #008b8b; +} + button[type="roll"].sheet-attribute-button { background-color: transparent; @@ -1755,7 +2139,7 @@ button[type="roll"].sheet-attribute-button:active { } .sheet-rolltemplate-alien .sheet-template-wrap { - counter-reset: hit stress; + counter-reset: hit stress damage; } /* .sheet-rolltemplate-alien .sheet-template-wrap ::after { content: "Results hits: " counter(hit) " stress: " counter(stress); @@ -1766,11 +2150,18 @@ button[type="roll"].sheet-attribute-button:active { .sheet-rolltemplate-alien .sheet-template-stress::after { content: counter(stress); } +.sheet-rolltemplate-alien .sheet-template-damage::after { + content: counter(damage); +} .sheet-rolltemplate-alien .sheet-hit, .sheet-rolltemplate-aliens .sheet-base-dice span.inlinerollresult.fullcrit, .sheet-rolltemplate-aliens .sheet-stress-dice span.inlinerollresult.fullcrit { counter-increment: hit; } +.sheet-rolltemplate-alien .sheet-hit, +.sheet-rolltemplate-aliens .sheet-base-dice span.inlinerollresult.fullcrit { + counter-increment: damage; +} .sheet-rolltemplate-alien .sheet-stress, .sheet-rolltemplate-aliens .sheet-stress-dice span.inlinerollresult.fullfail { counter-increment: stress; @@ -1791,6 +2182,7 @@ button[type="roll"].sheet-attribute-button:active { margin-left: -2px; } +.sheet-template-xeno .sheet-template-background, .sheet-rolltemplate-alien .sheet-template-background { background: url(https://s3.amazonaws.com/files.d20.io/images/83147486/YCuEWUzaudOcg2mNHbiFCw/max.png?1559667169); background-repeat: no-repeat; @@ -1798,6 +2190,7 @@ button[type="roll"].sheet-attribute-button:active { background-position: center center; } +.sheet-template-xeno .sheet-template-grid, .sheet-rolltemplate-alien .sheet-template-grid { display: grid; grid-gap: 3px; @@ -1806,6 +2199,7 @@ button[type="roll"].sheet-attribute-button:active { grid-template-columns: 15.75% 15.75% 15.75% 15.75% 15.75% 15.75%; } +.sheet-template-xeno .sheet-template-grid-item, .sheet-rolltemplate-alien .sheet-template-grid-item { background-color: rgba(259, 259, 259, 0.05); display: inline-block; @@ -1816,6 +2210,7 @@ button[type="roll"].sheet-attribute-button:active { text-align: center; } +.sheet-template-xeno .sheet-template-die, .sheet-rolltemplate-alien .sheet-template-die { display: inline-block; border: none; @@ -1823,6 +2218,7 @@ button[type="roll"].sheet-attribute-button:active { text-align: center; } +.sheet-template-xeno .sheet-template-span-six, .sheet-rolltemplate-alien .sheet-template-span-six { grid-column: 1 / 7; background-color: rgba(259, 259, 259, 0.05); @@ -1881,6 +2277,7 @@ button[type="roll"].sheet-attribute-button:active { text-align: left; } +.sheet-template-xeno .sheet-template-to-the-center, .sheet-rolltemplate-alien .sheet-template-to-the-center { padding-left: 43%; } @@ -1889,7 +2286,8 @@ button[type="roll"].sheet-attribute-button:active { background-color: transparent; } -.sheet-rolltemplate-alien .inlinerollresult { +.sheet-template-xeno .sheet-template-grid .inlinerollresult, +.sheet-rolltemplate-alien .sheet-template-grid .inlinerollresult { color: #000000; font-size: 1.9em; line-height: 35px; @@ -1914,7 +2312,8 @@ button[type="roll"].sheet-attribute-button:active { } .sheet-rolltemplate-alien .sheet-template-yellow, -.sheet-rolltemplate-aliens .sheet-stress-dice span.inlinerollresult { +.sheet-rolltemplate-aliens .sheet-stress-dice span.inlinerollresult, +.sheet-template-xeno .sheet-template-yellow span.inlinerollresult { height: 35px; width: 35px; background-color: #ffe600; @@ -1924,7 +2323,8 @@ button[type="roll"].sheet-attribute-button:active { } .sheet-rolltemplate-alien .sheet-template-base-between, -.sheet-rolltemplate-aliens .sheet-base-dice span.inlinerollresult { +.sheet-rolltemplate-aliens .sheet-base-dice span.inlinerollresult, +.sheet-template-xeno .sheet-base-dice span.inlinerollresult { height: 35px; width: 35px; background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Base-Between.png?raw=true"); @@ -1941,7 +2341,7 @@ button[type="roll"].sheet-attribute-button:active { } .sheet-rolltemplate-alien .sheet-template-stress-between, -.sheet-rolltemplate-aliens .sheet-stress-dice span.inlinerollresult { +.sheet-rolltemplate-aliens .sheet-stress-dice span.inlinerollresult { height: 35px; width: 35px; background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Stress-Between.png?raw=true"); @@ -1974,4 +2374,10 @@ button[type="roll"].sheet-attribute-button:active { width: 100%; background-color: transparent; border: unset; +} + + +.sheet-rolltemplate-xeno .sheet-attack-desc { + font-size: 12px; + color: lightgrey; } \ No newline at end of file diff --git a/Alien Roleplaying Game/Alien-Roleplaying-Game.html b/Alien Roleplaying Game/Alien-Roleplaying-Game.html index fc7b7cc8e8..d375514e02 100644 --- a/Alien Roleplaying Game/Alien-Roleplaying-Game.html +++ b/Alien Roleplaying Game/Alien-Roleplaying-Game.html @@ -9,9 +9,10 @@ v3.01 Richard W: Fixed roll names to make macros work v3.02 Richard W: Fixed armament roll rangemod to calculate on load v3.03 Richard W: Fixed armament 3 roll button, changed armament roll name to support API, and changed armor rolls to not use API + v4.00 Richard W: Added the Hostile tab for use with Xenos and such, including signature attacks, speed, and armor specific to xenos --> - + @@ -24,12 +25,13 @@