diff --git a/Alien Roleplaying Game/Alien-Roleplaying-Game.css b/Alien Roleplaying Game/Alien-Roleplaying-Game.css index a8f798a045..a7886db75a 100644 --- a/Alien Roleplaying Game/Alien-Roleplaying-Game.css +++ b/Alien Roleplaying Game/Alien-Roleplaying-Game.css @@ -1,4 +1,5 @@ -@import url('https://fonts.googleapis.com/css?family=Montserrat|Graduate|Courier+Prime|Roboto|Share+Tech+Mono&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Montserrat|Graduate|Courier+Prime|Roboto|Share+Tech+Mono|Material+Icons&display=swap'); +/* @import url('https://fonts.googleapis.com/css?family=Material+Icons&display=swap'); */ /* ORIGINAL */ .sheet-background-wrap{ @@ -436,12 +437,22 @@ input.sheet-tab-sheet[value="Xeno"] ~ .sheet-background-wrap { .charsheet div:hover + input.sheet-expand + span::before { opacity: 0.85; } */ -.charsheet input.sheet-expand + span + span + textarea { +.charsheet input.sheet-expand + span + span + div.sheet-expandable, +.charsheet input.sheet-expand + span + span + div + span + span + span + textarea.sheet-expandable { display: none; } -.charsheet input.sheet-expand:checked + span + span + textarea { - display: inline-block; +.charsheet input.sheet-expand:checked + span + span + div.sheet-expandable, +.charsheet input.sheet-expand:checked + span + span + div + span + span + span + textarea.sheet-expandable { + display: flex; + justify-content: flex-end; } +div.sheet-expandable button[type="action"] { + font-family: 'Pictos'; + border: 0; + font-size: 120%; + padding: 5px 10px 5px 10px; +} + /* - - - - - - - - - - AUTO EXPAND TEXTAREAS - - - - - - - - - - */ .sheet-auto-expand { @@ -521,6 +532,15 @@ input.sheet-tab-sheet[value="Xeno"] ~ .sheet-background-wrap { min-width: 100%; resize: vertical; } +.sheet-xeno .sheet-xeno-attack div, +.sheet-xeno .sheet-xeno-attack span, +.sheet-xeno .sheet-xeno-attack button, +.sheet-xeno .sheet-xeno-attack input { + align-self: baseline; +} +.sheet-xeno .sheet-xeno-attack .sheet-expandable button { + margin-top: 5px; +} .sheet-xeno .sheet-xeno-attack textarea { min-height: 60px; font-size: 12px; @@ -548,7 +568,7 @@ input.sheet-tab-sheet[value="Xeno"] ~ .sheet-background-wrap { line-height: inherit; border-right: 1px dashed rgba(0, 139, 139, 1); /* Dark Cyan #008b8b */ padding: 0; - margin: 0 5px 0 0; + margin: 0 -1px 0 -5px; } .sheet-dotted-underline { @@ -686,7 +706,7 @@ div.sheet-changelog button.sheet-button-link:focus::before { justify-self: center; } -button[type="roll"].sheet-button-skill, input[type="checkbox"].sheet-button-skill, .sheet-medium-teal-header, .sheet-dark-teal-header { +button[type="roll"].sheet-button-skill, button[type="action"].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; @@ -721,7 +741,9 @@ button[type="roll"].sheet-button-skill, input[type="checkbox"].sheet-button-skil .sheet-vertical-adjust-two-more { margin-top: 12px; } - +.sheet-vertical-shift-one { + margin-top: -5px; +} .sheet-vertical-balance { margin-top: 12px; } @@ -1635,6 +1657,32 @@ input.sheet-letter-box:checked + span::before { border: solid 1px #808080; box-shadow: 0px 0px 10px #008b8b; } +.sheet-darker-rounded-box { + display: flex; + flex-direction: row; + width: fit-content; + background-color: rgb(185, 218, 193); + background-color: #008b8b; + color: rgb(204, 217, 207); + border-radius: 6px; + border: 0; + margin: 2px 3px 2px 3px; +} +.sheet-darker-rounded-box span, +.sheet-darker-rounded-box select, +.sheet-darker-rounded-box select option { + color: rgb(204, 217, 207); + background-color: #008b8b; + border: 0; + border-radius: 6px; +} +.sheet-darker-rounded-box span { + margin: 1px 0px 0px 5px; +} +.sheet-darker-rounded-box elect { + margin: 1px 5px 0px 0px; +} + /* CHARACTER HEALTH */ @@ -1918,7 +1966,7 @@ input.sheet-xenohealth20:checked + label.sheet-xenohealth ~ .sheet-xenohealth { height: 14px; line-height: 14px; width: fit-content; - margin: 0px 1px; + margin: 4px -1px 0 0; padding: 2px 3px; background-color: transparent; border: 1px solid #008b8b; @@ -1926,7 +1974,6 @@ input.sheet-xenohealth20:checked + label.sheet-xenohealth ~ .sheet-xenohealth { 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 { @@ -1936,6 +1983,7 @@ input.sheet-xenohealth20:checked + label.sheet-xenohealth ~ .sheet-xenohealth { .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; + margin: 4px -1px; } .sheet-xeno .sheet-armor { display: grid; @@ -2005,11 +2053,14 @@ input.sheet-xenohealth20:checked + label.sheet-xenohealth ~ .sheet-xenohealth { float: left; width: 100%; height: 1.5em; - max-width: calc(100% - 12px); - min-width: calc(100% - 12px); - margin-right: 5px; + max-width: calc(100% - 72px); + min-width: calc(100% - 72px); + -margin-right: 5px; padding: 1px; } +.sheet-button-copy { + float: left; +} /* WOOHOO BUTTONS */ @@ -2035,6 +2086,7 @@ button[type="roll"].sheet-button-alpha:before, button[type="roll"].sheet-button- label.sheet-button-skill, +button.sheet-button-skill, button[type="roll"].sheet-button-skill { height: 14px; line-height: 14px; @@ -2049,6 +2101,7 @@ button[type="roll"].sheet-button-skill { } label.sheet-button-skill:hover, +button.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 */ @@ -2056,6 +2109,7 @@ button[type="roll"].sheet-button-skill:hover { text-shadow: none; } label.sheet-button-skill:active, +button.sheet-button-skill:active, button[type="roll"].sheet-button-skill:active { color: rgb(204, 217, 207); /* Teal Varient */ background-color: #008b8b; /* Dark Cyan #008b8b */ @@ -2074,7 +2128,10 @@ button[type="roll"].sheet-smaller-skill { } 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 { +button[type="roll"].sheet-button-alpha, +button[type="roll"].sheet-button-beta, +button[type="action"].sheet-button-gamma, +button[type="roll"].sheet-button-gamma { margin-top: 0px; margin-bottom: 0px; border: 1px solid #008b8b; @@ -2086,6 +2143,7 @@ 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.sheet-button-skill:focus, button[type="roll"].sheet-button-skill:focus { outline:0; } @@ -2199,6 +2257,17 @@ 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-flex, +.sheet-rolltemplate-alien .sheet-template-background .sheet-template-grid .sheet-template-flex { + width: 100%; + display: flex; + grid-gap: 3px; + background-color: transparent; + justify-content: center; + -justify-items: stretch; + -justify-self: stretch; +} + .sheet-template-xeno .sheet-template-grid-item, .sheet-rolltemplate-alien .sheet-template-grid-item { background-color: rgba(259, 259, 259, 0.05); @@ -2210,6 +2279,26 @@ button[type="roll"].sheet-attribute-button:active { text-align: center; } +.sheet-template-xeno .sheet-template-flex-item, +.sheet-rolltemplate-alien .sheet-template-flex-item { + -display: flex; + width: 100%; + background-color: rgba(259, 259, 259, 0.05); + color: #ffffff; + border: none; + border-radius: 5px; + padding: 3px; + text-align: center; + justify-content: center; + -justify-items: stretch; + -justify-self: stretch; +} + +.sheet-rolltemplate-alien .sheet-flex-column { + display: flex; + flex-direction: column; +} + .sheet-template-xeno .sheet-template-die, .sheet-rolltemplate-alien .sheet-template-die { display: inline-block; diff --git a/Alien Roleplaying Game/Alien-Roleplaying-Game.html b/Alien Roleplaying Game/Alien-Roleplaying-Game.html index 92bd59785e..8eb965a043 100644 --- a/Alien Roleplaying Game/Alien-Roleplaying-Game.html +++ b/Alien Roleplaying Game/Alien-Roleplaying-Game.html @@ -12,7 +12,7 @@ v4.00 Richard W: Added the Hostile tab for use with Xenos and such, including signature attacks, speed, and armor specific to xenos --> - + @@ -21,6 +21,9 @@ + + +