diff --git a/Alien Roleplaying Game/Alien-Roleplaying-Game.css b/Alien Roleplaying Game/Alien-Roleplaying-Game.css index a7886db75a..d83eb8b23b 100644 --- a/Alien Roleplaying Game/Alien-Roleplaying-Game.css +++ b/Alien Roleplaying Game/Alien-Roleplaying-Game.css @@ -1,34 +1,50 @@ -@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=Montserrat|Graduate|Courier+Prime|Roboto|Share+Tech+Mono|Material+Icons|Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap'); /* @import url('https://fonts.googleapis.com/css?family=Material+Icons&display=swap'); */ + +/* CSE FIXES */ +html { + font-size: 13px; +} +.ui-dialog .charsheet .background-wrap button[type="roll"] { + font-size: 0.8em; +} +.ui-dialog .charsheet .background-wrap label { + font-size: 0.8rem; +} +@supports (-moz-appearance:none) { + div.charactersheet.tab-pane.charsheet div.background-wrap { + width: 100%; + } +} + + /* ORIGINAL */ -.sheet-background-wrap{ +.background-wrap{ background-color: black; -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 { +input.tab-sheet[value="Xeno"] ~ .background-wrap { min-width: 800px; } -.sheet-spacebackground:checked ~ .sheet-background-wrap { +.spacebackground:checked ~ .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; } -.sheet-header-image{ +.header-image{ background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Weyland-Yutani.png?raw=true"); background-position: center; background-repeat: no-repeat; background-size: contain; padding-top: 25px; - -margin-bottom: 10px; margin-top: 2px; } -.sheet-header-tabs { +.header-tabs { display: flex; flex-direction: column; -align-items: flex-end; @@ -40,7 +56,7 @@ input.sheet-tab-sheet[value="Xeno"] ~ .sheet-background-wrap { margin-right: 0 !important; } -.sheet-footer-text{ +.footer-text{ display: block; text-align: center; font-family: 'Graduate'; @@ -48,7 +64,7 @@ input.sheet-tab-sheet[value="Xeno"] ~ .sheet-background-wrap { color: rgba(211, 211, 211, 1); } -.sheet-grid-container { +.grid-container { display: grid; background-color: transparent; border: 2px solid rgba(211, 211, 211, 1); /* LightGrey */ @@ -58,171 +74,237 @@ input.sheet-tab-sheet[value="Xeno"] ~ .sheet-background-wrap { text-align: center; } -.sheet-contains-thirteen-columns { +.contains-thirteen-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } -.sheet-contains-four-columns { +.contains-four-columns { grid-template-columns: 20% 20% auto 25%; grid-gap: 0px; padding: 0px; text-align: left; border-color: transparent; } -.sheet-contains-five-columns { +.contains-five-columns { grid-template-columns: 15% 15% auto 20% 15%; grid-gap: 0px; padding: 0px; text-align: left; border-color: transparent; } -.sheet-contains-seven-columns { +.contains-seven-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 2px; } -.sheet-contains-eight-columns { +.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 { +.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{ +.roll-buttons { display: grid; text-align: center; - grid-gap: 5px; + grid-gap: 4px; } - -.sheet-alpha-buttons{ +div.roll-buttons + hr.dotted-line { + margin: 3px; +} +.ui-dialog .charsheet div.span-rollbuttons .alpha-buttons button[type="roll"], +.ui-dialog .charsheet div.span-rollbuttons .beta-buttons button[type="roll"] { + margin: 0; +} +.alpha-buttons { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } -.sheet-beta-buttons{ +.beta-buttons { grid-template-columns: 1fr 1fr 1fr; margin: 5px 0px; } -.sheet-gamma-buttons{ - grid-template-columns: 1fr 1fr; +.gamma-buttons { + grid-template-columns: 50px 2fr 1.5fr 1.5fr 50px; + grid-gap: 5px; + margin-top: 5px; +} +.gamma-buttons input.text-input { + padding: 0 2px; + font-size: 12px; + line-height: 12px; + height: 21px; + color: #008b8b; + text-align: center; + border: 1px solid #008b8b; + border-radius: 5px; +} +.gamma-buttons button[type="action"] { + border: 1px solid #008b8b; +} +.gamma-buttons span.roll-option-frame, +.radiation span.roll-option-frame { + display: inline-block; + padding: 0 2px; + font-size: 12px; + line-height: 19px; + height: 19px; + border: 1px solid #008b8b; + border-radius: 5px; + color: #008b8b; + font-family: 'Montserrat'; + text-transform: uppercase; + font-size: 10px; + font-weight: bold; +} +.gamma-buttons span.roll-option-frame select, +.gamma-buttons span.roll-option-frame select option, +.radiation span.roll-option-frame select, +.radiation span.roll-option-frame select option { + padding: 0 2px; + font-size: 12px; + text-align: center; + line-height: 12px; + height: 18px; + border: 0; + background-color: rgba(204, 217, 207, 1); + color: #008b8b; + font-family: 'Montserrat'; + text-transform: uppercase; + font-size: 10px; + font-weight: bold; +} +.gamma-buttons span.roll-option-frame select:focus-visible, +.radiation span.roll-option-frame select:focus-visible { + border: 0; + outline: 0; +} +.gamma-buttons button[type="action"].button-gamma { + padding: 2px 3px; + -margin: 0px 3px 0px 3px; } -.sheet-span-one-two { grid-column: 1 / 3;} -.sheet-span-one-thru-three { grid-column: 1 / 4;} -.sheet-span-one-thru-four { grid-column: 1 / 5;} -.sheet-span-one-thru-five { grid-column: 1 / 6;} -.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;} -.sheet-span-six-thru-eight { grid-column: 6 / 9;} -.sheet-span-six-thru-nine { grid-column: 6 / 10;} -.sheet-span-six-thru-fourteen { grid-column: 6 / 15;} -.sheet-span-seven-eight { grid-column: 7 / 9;} -.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;} -.sheet-span-eight-thru-twelve { grid-column: 8 / 13;} -.sheet-span-eight-thru-thirteen { grid-column: 8 / 14;} -.sheet-span-eight-thru-fourteen { grid-column: 8 / 15;} -.sheet-span-nine { grid-column: 9;} -.sheet-span-nine-ten { grid-column: 9 / 11;} -.sheet-span-nine-thru-eleven { grid-column: 9 / 12;} -.sheet-span-nine-thru-thirteen { grid-column: 9 / 14;} -.sheet-span-nine-thru-fourteen { grid-column: 9 / 15;} -.sheet-span-ten { grid-column: 10;} -.sheet-span-ten-eleven { grid-column: 10 / 12;} -.sheet-span-ten-thru-twelve { grid-column: 10 / 13;} -.sheet-span-ten-thru-thirteen { grid-column: 10 / 14;} -.sheet-span-ten-thru-fourteen { grid-column: 10 / 15;} -.sheet-span-eleven { grid-column: 11;} -.sheet-span-eleven-thru-thirteen { grid-column: 11 / 14;} -.sheet-span-eleven-thru-fourteen { grid-column: 11 / 15;} -.sheet-span-twelve { grid-column: 12;} -.sheet-span-twelve-thirteen { grid-column: 12 / 14;} -.sheet-span-twelve-thru-fourteen { grid-column: 12 / 15;} -.sheet-span-thirteen { grid-column: 13;} -.sheet-span-thirteen-fourteen { grid-column: 13 / 15;} -.sheet-span-fourteen { grid-column: 14;} -.sheet-span-personal-agenda { grid-row: 1 / 3;} -.sheet-span-talents { grid-row: 1 / 5;} -.sheet-span-modules { grid-row: 1 / 9;} -.sheet-span-log { grid-row: 1 / 9;} -.sheet-span-relationships { grid-row: 3 / 5;} -.sheet-span-radiation { grid-row: 7 / 9;} -.sheet-span-critical-injuries { grid-row: 9 / 11;} -.sheet-span-gear { grid-row: 10 / 16;} -.sheet-span-conditions { grid-row: 11 / 14;} -.sheet-span-weapons { grid-row: 13 / 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;} -.sheet-span-row9 { grid-row: 9;} -.sheet-span-row10 { grid-row: 10;} -.sheet-span-row11 { grid-row: 11;} -.sheet-span-row12 { grid-row: 12;} -.sheet-span-row13 { grid-row: 13;} +.span-one-two { grid-column: 1 / 3;} +.span-one-thru-three { grid-column: 1 / 4;} +.span-one-thru-four { grid-column: 1 / 5;} +.span-one-thru-five { grid-column: 1 / 6;} +.span-one-thru-six { grid-column: 1 / 7;} +.span-one-thru-seven { grid-column: 1 / 8;} +.span-two-three { grid-column: 2 / 4;} +.span-two-thru-four { grid-column: 2 / 5;} +.span-three-four { grid-column: 3 / 5;} +.span-three-thru-five { grid-column: 3 / 6;} +.span-three-thru-six { grid-column: 3 / 7;} +.span-four { grid-column: 4;} +.span-four-five { grid-column: 4 / 6;} +.span-four-thru-six { grid-column: 4 / 7;} +.span-five { grid-column: 5;} +.span-five-six { grid-column: 5 / 7;} +.span-five-thru-seven { grid-column: 5 / 8;} +.span-five-thru-eight { grid-column: 5 / 9;} +.span-five-thru-nine { grid-column: 5 / 10;} +.span-five-thru-ten { grid-column: 5 / 11;} +.span-six-seven { grid-column: 6 / 8;} +.span-six-thru-eight { grid-column: 6 / 9;} +.span-six-thru-nine { grid-column: 6 / 10;} +.span-six-thru-fourteen { grid-column: 6 / 15;} +.span-seven-eight { grid-column: 7 / 9;} +.span-seven-thru-nine { grid-column: 7 / 10;} +.span-seven-thru-thirteen { grid-column: 7 / 14;} +.span-seven-thru-fourteen { grid-column: 7 / 15;} +.span-eight { grid-column: 8 / 9;} +.span-eight-nine { grid-column: 8 / 10;} +.span-eight-thru-ten { grid-column: 8 / 11;} +.span-eight-thru-eleven { grid-column: 8 / 12;} +.span-eight-thru-twelve { grid-column: 8 / 13;} +.span-eight-thru-thirteen { grid-column: 8 / 14;} +.span-eight-thru-fourteen { grid-column: 8 / 15;} +.span-nine { grid-column: 9;} +.span-nine-ten { grid-column: 9 / 11;} +.span-nine-thru-eleven { grid-column: 9 / 12;} +.span-nine-thru-thirteen { grid-column: 9 / 14;} +.span-nine-thru-fourteen { grid-column: 9 / 15;} +.span-ten { grid-column: 10;} +.span-ten-eleven { grid-column: 10 / 12;} +.span-ten-thru-twelve { grid-column: 10 / 13;} +.span-ten-thru-thirteen { grid-column: 10 / 14;} +.span-ten-thru-fourteen { grid-column: 10 / 15;} +.span-eleven { grid-column: 11;} +.span-eleven-thru-thirteen { grid-column: 11 / 14;} +.span-eleven-thru-fourteen { grid-column: 11 / 15;} +.span-twelve { grid-column: 12;} +.span-twelve-thirteen { grid-column: 12 / 14;} +.span-twelve-thru-fourteen { grid-column: 12 / 15;} +.span-thirteen { grid-column: 13;} +.span-thirteen-fourteen { grid-column: 13 / 15;} +.span-fourteen { grid-column: 14;} +.span-personal-agenda { grid-row: 1 / 3;} +.span-talents { grid-row: 1 / 5;} +.span-modules { grid-row: 1 / 9;} +.span-log { grid-row: 1 / 9;} +.span-relationships { grid-row: 3 / 5;} +.span-rollbuttons { grid-row: 3 / 5;} +.span-radiation { grid-row: 7 / 9;} +.span-critical-injuries { grid-row: 9 / 11;} +.span-gear { grid-row: 10 / 16;} +.span-conditions { grid-row: 11 / 14;} +.span-weapons { grid-row: 13 / 16;} +.span-comp-dmg { grid-row: 9;} +.span-upg-arm { grid-row: 10;} +.span-row1 { grid-row: 1;} +.span-row1-2 { grid-row: 1/3;} +.span-row2 { grid-row: 2;} +.span-row2-3 { grid-row: 2/4;} +.span-row3 { grid-row: 3;} +.span-row3-4 { grid-row: 3/5;} +.span-row4 { grid-row: 4;} +.span-row4-5 { grid-row: 4/6;} +.span-row4-6 { grid-row: 4/7;} +.span-row5 { grid-row: 5;} +.span-row5-6 { grid-row: 5/7;} +.span-row5-8 { grid-row: 5/9;} +.span-row6 { grid-row: 6;} +.span-row6-7 { grid-row: 6/8;} +.span-row6-8 { grid-row: 6/9;} +.span-row7 { grid-row: 7;} +.span-row8 { grid-row: 8;} +.span-row9 { grid-row: 9;} +.span-row10 { grid-row: 10;} +.span-row11 { grid-row: 11;} +.span-row12 { grid-row: 12;} +.span-row13 { grid-row: 13;} -.sheet-xeno-column > div.sheet-grid-item { +.xeno-column > div.grid-item { margin-top: 20px; } -.sheet-xeno-column > div.sheet-col-separator{ +.xeno-column > div.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; } -.sheet-cover-15 { width: 15% !important; } -.sheet-cover-10 { width: 10% !important; } +.cover-100-flex { width: 100% !important; display: flex; } +.cover-100 { width: 100% !important; } +.cover-90 { width: 90% !important; } +.cover-80 { width: 80% !important; } +.cover-75 { width: 75% !important; } +.cover-70 { width: 70% !important; } +.cover-60 { width: 60% !important; } +.cover-45 { width: 45% !important; } +.cover-40 { width: 40% !important; } +.cover-25 { width: 25% !important; } +.cover-20 { width: 20% !important; } +.cover-15 { width: 15% !important; } +.cover-10 { width: 10% !important; } -.sheet-pad-left { padding-left: 8px !important; } -.sheet-pad-right { padding-right: 8px !important; } -.sheet-pad-right-30px { padding-right: 30px !important; } -.sheet-marg-right {margin-right: 3px;} +.pad-left { padding-left: 8px !important; } +.pad-right { padding-right: 8px !important; } +.pad-right-30px { padding-right: 30px !important; } +.marg-right {margin-right: 3px;} -.sheet-grid-item { +.grid-item { background-color: rgba(204, 217, 207, 1); border: 1px solid rgba(211, 211, 211, 1); /* LightGrey */ border-radius: 5px; @@ -230,106 +312,117 @@ input.sheet-tab-sheet[value="Xeno"] ~ .sheet-background-wrap { line-height: 24px; vertical-align: bottom; } -.sheet-grid-item-black { +.grid-item-black { background-color: transparent; border: 0; padding: 5px; line-height: 24px; vertical-align: bottom; } -.sheet-no-border { +.no-border { border: 0 !important; border-radius: unset; } -.sheet-clip-edges { +.clip-edges { clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); margin-top: 10; } -.sheet-flex { display: flex; } -.sheet-flex-column { display: flex; flex-direction: column; } -.sheet-flex-row { display: flex; flex-direction: row; } -.sheet-flex-wrap { flex-wrap: wrap; } -.sheet-flex-nowrap { flex-wrap: nowrap; } -.sheet-flex-break { flex-basis: 100%; height: 0; } +.flex { display: flex; } +.flex-column { display: flex; flex-direction: column; } +.flex-row { display: flex; flex-direction: row; } +.flex-wrap { flex-wrap: wrap; } +.flex-nowrap { flex-wrap: nowrap; } +.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; } -.sheet-flex-items-left { display: flex; justify-items: left; } -.sheet-flex-items-align-center { display: flex; align-items: center; } -.sheet-flex-items-justify-center { display: flex; justify-items: center; } -.sheet-flex-content-center { display: flex; justify-content: center; align-self: center; } -.sheet-flex-content-right { display: flex; justify-content: right; } -.sheet-flex-content-end { display: flex; justify-content: flex-end; } -.sheet-flex-content-left { display: flex; justify-content: left; } -.sheet-flex-content-align-center { display: flex; align-items: center; } -.sheet-flex-content-justify-center { display: flex; justify-items: center; } -.sheet-flex-content-spaceeven { display: flex; justify-content: space-evenly; } -.sheet-flex-content-spacebetween { display: flex; justify-content:space-between; } -.sheet-flex-content-spacearound { display: flex; justify-content:space-around; } -.sheet-flex-self-center { display: flex; justify-self: center; align-self: center; } -.sheet-flex-self-right { display: flex; justify-self: right; } -.sheet-flex-self-left { display: flex; justify-self: left; } -.sheet-flex-self-align-center { display: flex; align-items: center; } -.sheet-flex-self-justify-center { display: flex; justify-items: center; } -.sheet-flex-self-align-end { display: flex; align-items: flex-end; } -.sheet-flex-self-justify-end { display: flex; justify-items: flex-end; } -.sheet-flex-self-align-start { display: flex; align-items: flex-start; } -.sheet-flex-self-justify-start { display: flex; justify-items: flex-start; } +.float-left { float: left; } +.float-right { float: right; } +.flex-center { display: flex; align-self: center; justify-self: center; } +.flex-items-center { display: flex; justify-items: center; align-self: center; } +.flex-items-right { display: flex; justify-items: right; } +.flex-items-left { display: flex; justify-items: left; } +.flex-items-align-center { display: flex; align-items: center; } +.flex-items-justify-center { display: flex; justify-items: center; } +.flex-content-center { display: flex; justify-content: center; align-self: center; } +.flex-content-right { display: flex; justify-content: right; } +.flex-content-end { display: flex; justify-content: flex-end; } +.flex-content-left { display: flex; justify-content: left; } +.flex-content-align-center { display: flex; align-items: center; } +.flex-content-justify-center { display: flex; justify-items: center; } +.flex-content-spaceeven { display: flex; justify-content: space-evenly; } +.flex-content-spacebetween { display: flex; justify-content:space-between; } +.flex-content-spacearound { display: flex; justify-content:space-around; } +.flex-self-center { display: flex; justify-self: center; align-self: center; } +.flex-self-right { display: flex; justify-self: right; } +.flex-self-left { display: flex; justify-self: left; } +.flex-self-align-center { display: flex; align-items: center; } +.flex-self-justify-center { display: flex; justify-items: center; } +.flex-self-align-end { display: flex; align-items: flex-end; } +.flex-self-justify-end { display: flex; justify-items: flex-end; } +.flex-self-align-start { display: flex; align-items: flex-start; } +.flex-self-justify-start { display: flex; justify-items: flex-start; } -.sheet-black-item { +.black-item { background-color: transparent; border: 1px solid transparent; } -.sheet-what-padding { padding: 0px; } -.sheet-some-padding { padding: 4px; } +.what-padding { padding: 0px; } +.some-padding { padding: 4px; } -.sheet-shift-up-5 { margin-top: -5px; } -.sheet-shift-up-8 { margin-top: -8px; } -.sheet-shift-up-10 { margin-top: -10px; } -.sheet-shift-up-16 { margin-top: -16px; } -.sheet-shift-up-20 { margin-top: -20px; } -.sheet-shift-up-24 { margin-top: -24px; } -.sheet-shift-down-5 { margin-top: 5px; } -.sheet-shift-down-8 { margin-top: 8px; } -.sheet-shift-down-10 { margin-top: 10px; } -.sheet-shift-down-15 { margin-top: 15px; } -.sheet-shift-down-17 { margin-top: 17px; } +.shift-up-5 { margin-top: -5px; } +.shift-up-8 { margin-top: -8px; } +.shift-up-10 { margin-top: -10px; } +.shift-up-16 { margin-top: -16px; } +.shift-up-20 { margin-top: -20px; } +.shift-up-24 { margin-top: -24px; } +.shift-down-5 { margin-top: 5px; } +.shift-down-8 { margin-top: 8px; } +.shift-down-10 { margin-top: 10px; } +.shift-down-15 { margin-top: 15px; } +.shift-down-17 { margin-top: 17px; } -.sheet-centered { +.centered { text-align: center; align-self: center; } -.sheet-w40 { max-width: 40px; min-width: 40px; } -.sheet-w50pc { max-width: 50%; min-width: 50%; } -.sheet-w60 { max-width: 60px; min-width: 60px; } -.sheet-w60pc { max-width: 60%; min-width: 60%; } -.sheet-w70pc { max-width: 70%; min-width: 70%; } -.sheet-w80 { max-width: 80px; min-width: 80px; } -.sheet-w90pc { max-width: 90%; min-width: 90%; } -.sheet-w120 { max-width: 120px; min-width: 120px; } -.sheet-w130 { max-width: 130px; min-width: 130px; } -.sheet-w140 { max-width: 140px; min-width: 140px; } -.sheet-w150 { max-width: 150px; min-width: 150px; } -.sheet-w160 { max-width: 160px; min-width: 160px; } -.sheet-w170 { max-width: 170px; min-width: 170px; } -.sheet-w180 { max-width: 180px; min-width: 180px; } -.sheet-w200 { max-width: 200px; min-width: 200px; } -.sheet-w220 { max-width: 220px; min-width: 220px; } -.sheet-w250 { max-width: 250px; min-width: 250px; } -.sheet-w300 { max-width: 300px; min-width: 300px; } -.sheet-w-fit { width: fit-content; } -.sheet-h-fit { height: fit-content; } +.w40 { max-width: 40px; min-width: 40px; } +.w50pc { max-width: 50%; min-width: 50%; } +.w60 { max-width: 60px; min-width: 60px; } +.w60pc { max-width: 60%; min-width: 60%; } +.w70pc { max-width: 70%; min-width: 70%; } +.w80 { max-width: 80px; min-width: 80px; } +.w90pc { max-width: 90%; min-width: 90%; } +.w120 { max-width: 120px; min-width: 120px; } +.w130 { max-width: 130px; min-width: 130px; } +.w140 { max-width: 140px; min-width: 140px; } +.w150 { max-width: 150px; min-width: 150px; } +.w160 { max-width: 160px; min-width: 160px; } +.w170 { max-width: 170px; min-width: 170px; } +.w180 { max-width: 180px; min-width: 180px; } +.w200 { max-width: 200px; min-width: 200px; } +.w220 { max-width: 220px; min-width: 220px; } +.w250 { max-width: 250px; min-width: 250px; } +.w300 { max-width: 300px; min-width: 300px; } +.w-fit { width: fit-content; } +.h-fit { height: fit-content; } +.h100pc { height: 100%; } -.sheet-text-underline { text-decoration: underline; } +.text-underline { text-decoration: underline; } -.sheet-weapon-item { +/* WEAPON AND GEAR */ + +div.span-weapons .tab-weapons { + line-height: 16px; + margin-top: 3px; + gap: 3px; + row-gap: 3px; + height: fit-content; + justify-content: center; +} +.weapon-item { padding: 0px; text-align: center; border: 1px solid rgba(204, 217, 207, 1); @@ -338,57 +431,61 @@ input.sheet-tab-sheet[value="Xeno"] ~ .sheet-background-wrap { border-right: 1px dashed rgb(0, 139, 139); /* Dark Cyan #008b8b */ } -.sheet-weapon-item.sheet-range { +.weapon-item.range { padding: 0px 20px; } -.sheet-span-gear .sheet-weight, -.sheet-weapon-item.sheet-weight { +.span-gear .weight, +.weapon-item.weight { padding: 0px 3px; } -.sheet-span-gear select.sheet-weight, -.sheet-weapon-item.sheet-weight select, -.sheet-weapon-item.sheet-range select { +.span-gear select.weight, +.weapon-item.weight select, +.weapon-item.range select { text-align: center; } -.sheet-span-gear select.sheet-weight, -.sheet-weapon-item.sheet-weight select { +.span-gear select.weight, +.weapon-item.weight select { float: right; width: 46px; appearance: none; -webkit-appearance: none; } -.sheet-weapon-item.sheet-weight { +.weapon-item.weight { display: flex; flex-wrap: wrap; justify-content: center; - -align-content: flex-start; } -.sheet-weapon-item.sheet-weight select { +.weapon-item.weight select { align-self: center; } -.sheet-span-gear .sheet-weight:hover, -.sheet-span-gear .sheet-weight:active, -.sheet-span-gear .sheet-weight:focus, -.sheet-weapon-item.sheet-weight select:hover, -.sheet-weapon-item.sheet-weight select:active, -.sheet-weapon-item.sheet-weight select:focus { +.span-gear .weight:hover, +.span-gear .weight:active, +.span-gear .weight:focus, +.weapon-item.weight select:hover, +.weapon-item.weight select:active, +.weapon-item.weight select:focus { appearance: auto; -webkit-appearance: auto; } -.sheet-weapon-item.sheet-type{ +.weapon-item.type{ border-right-width: 0px; } -.sheet-gearrepeatingonly:checked ~ input, -.sheet-gearrepeatingonly:checked ~ select, -.sheet-gearrepeatingonly:checked ~ hr { +.gearrepeatingonly:checked ~ input, +.gearrepeatingonly:checked ~ select, +.gearrepeatingonly:checked ~ hr { display: none !important; } +.signature-item .teal-header { + float:right; + margin-right: 5px; +} + /* - - - - - - - - - - EXPAND AREAS - - - - - - - - - - */ -.charsheet .sheet-expand { +/* .charsheet .expand { -left: -8px; opacity: 0; -position: absolute; @@ -396,66 +493,89 @@ input.sheet-tab-sheet[value="Xeno"] ~ .sheet-background-wrap { -width: 18px; z-index: 6; margin-top: 5px; -} +} */ -.charsheet .sheet-expand + span::before { +/* .charsheet .expand + span::before { color: #c3996b; - content: "4"; + content: "&"; cursor: pointer; - font-family: pictos; + font-family: 'Pictos'; font-size: 10px; z-index: 3; - border: 1px solid #c3996b; - border-radius: 50%; + -border: 1px solid #c3996b; + -border-radius: 50%; height: 11px; width: 11px; padding: 1px 2px; -} -.charsheet input.sheet-expand + span { +} */ +.charsheet .expand + label.expand-label { + color: #c3996b; + cursor: pointer; + font-family: 'Pictos'; padding: 0; margin: 0; - transform: rotate(90deg); + width: 14px; + height: 14px; + font-size: 14px; + line-height: 14px; + text-align: center; + align-self: center; +} +.charsheet .expand:checked + label { + transform: rotate(45deg); + width: 18px; + height: 18px; + font-size: 16px; +} +/* .charsheet input.expand + span { + padding: 0; + margin: 0; + -transform: rotate(90deg); position: relative; right: 8px; bottom: 5px; } -.charsheet input.sheet-expand:checked + span { +.charsheet input.expand:checked + span { padding: 0; margin: 0; - transform: rotate(-90deg);position: relative; + -transform: rotate(-90deg);position: relative; -right: 8px; top: 3px; +} */ -} - -/*.charsheet input.sheet-expand + span::before, -.charsheet input.sheet-expand:checked + span::before { +/*.charsheet input.expand + span::before, +.charsheet input.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 { +.charsheet input:hover + input.expand + span::before, +.charsheet span:hover + input.expand + span::before, +.charsheet div:hover + input.expand + span::before { opacity: 0.85; } */ -.charsheet input.sheet-expand + span + span + div.sheet-expandable, -.charsheet input.sheet-expand + span + span + div + span + span + span + textarea.sheet-expandable { +.charsheet input.expand + span + span + div.expandable, +.charsheet input.expand + span + span + div + span + span + span + textarea.expandable, +.charsheet input.expand + label + span + span + div.expandable, +.charsheet input.expand + label + span + span + div + span + span + span + textarea.expandable { display: none; } -.charsheet input.sheet-expand:checked + span + span + div.sheet-expandable, -.charsheet input.sheet-expand:checked + span + span + div + span + span + span + textarea.sheet-expandable { +.charsheet input.expand:checked + span + span + div.expandable, +.charsheet input.expand:checked + span + span + div + span + span + span + textarea.expandable, +.charsheet input.expand:checked + label + span + span + div.expandable, +.charsheet input.expand:checked + label + span + span + div + span + span + span + textarea.expandable { display: flex; justify-content: flex-end; } -div.sheet-expandable button[type="action"] { +div.expandable button[type="action"] { font-family: 'Pictos'; border: 0; font-size: 120%; - padding: 5px 10px 5px 10px; + -padding: 5px 10px 5px 10px; + line-height: 12px; } /* - - - - - - - - - - AUTO EXPAND TEXTAREAS - - - - - - - - - - */ -.sheet-auto-expand { +.auto-expand { position: relative; cursor: text; word-wrap: break-word; @@ -469,127 +589,145 @@ div.sheet-expandable button[type="action"] { padding: 2px; } -.sheet-auto-expand span { +.auto-expand span { visibility: hidden; white-space: pre-wrap; display: block; -font-family: Serif; } -.sheet-auto-expand textarea { - position: absolute; +.auto-expand textarea, +textarea.auto-expand { + font-family: 'Roboto'; + text-align: left; + font-size: 0.9em; + line-height: 1em; + padding: 2px; + border: 1px Dashed #bfbfbf; + position: unset; z-index: 1; top: 0; left: 0; - margin: 0; + margin: 2px; overflow: hidden; - resize: none; + -resize: unset; height: 100%; width: 100%; + max-width: 100%; + min-width: 100%; display: block; box-sizing: border-box; background: transparent; - border: none; - border-radius: 0; + border-radius: 1px; box-shadow: none; - color: inherit; - font: inherit; - letter-spacing: inherit; - padding: inherit; - text-align: inherit; - text-transform: inherit; - } -.sheet-span-tinyitems .sheet-auto-expand textarea, -.sheet-tab-content .sheet-auto-expand textarea { - position: unset; - top: unset; - left: unset; - margin: unset; - resize: unset; - max-width: 100%; - min-width: 100%; - overflow-y: auto; +.span-personal-agenda div.auto-expand { + height: fit-content; + min-height: 75px; } -.sheet-tab-content .sheet-auto-expand textarea { - min-height: 100px; +.span-personal-agenda textarea.auto-expand { + overflow-y: auto; + resize: none; } -.sheet-span-armaments .sheet-auto-expand textarea, -.sheet-span-weapons .sheet-auto-expand textarea { + +.tab-container textarea.auto-expand { + min-height: 75px; +} +div.armament-btns { + line-height: 15px; +} +.span-armaments textarea.auto-expand, +.span-weapons textarea.auto-expand { max-height: 40px; min-height: 20px; height: 20px; } -.sheet-xeno-textfield { +/* .xeno-textfield { min-height: 135px; margin-top: 10px; -} -.sheet-xeno-textfield textarea { +} */ +textarea.xeno-textfield { + margin-top: 10px; + margin-bottom: 4px; min-height: 120px; + height: calc(100% - 15px); overflow-y: auto; overflow-x: hidden; max-width: 100%; min-width: 100%; - resize: vertical; + resize: none; } -.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; + +.xeno-cont-term textarea.xeno-textfield { + height: calc(100% - 30px); + resize: none; } -.sheet-xeno .sheet-xeno-attack .sheet-expandable button { +.xeno .xeno-attack .darker-rounded-box { + padding-left: 6px; +} +.xeno .xeno-attack .expandable button { margin-top: 5px; } -.sheet-xeno .sheet-xeno-attack textarea { +.xeno .xeno-attack textarea { min-height: 60px; font-size: 12px; + height: unset; } -.sheet-xeno .sheet-xeno-attack input { +.xeno .xeno-attack input { font-size: 12px; } -.sheet-xeno-notes textarea { +.xeno-notes textarea { max-width: 100%; min-width: 100%; } +div.xeno-notes { + max-height: 300px; +} +/* div.xeno-spec-abil, +div.xeno-cont-term { + max-height: 200px; +} */ -.sheet-textarea-margin-correct { +.textarea-margin-correct { margin: 6px 0px 0px 0px; } -.sheet-dotted-line { +.dotted-line { height: 0px; + border-top: 0; + border-right: 0; + border-left: 0; border-bottom: 1px dashed rgba(0, 139, 139, 1); /* Dark Cyan #008b8b */ padding: 0px; margin: 3px; } -.sheet-dotted-separator { +.dotted-separator { line-height: inherit; border-right: 1px dashed rgba(0, 139, 139, 1); /* Dark Cyan #008b8b */ padding: 0; margin: 0 -1px 0 -5px; } -.sheet-dotted-underline { +.dotted-underline { border-bottom: 1px dashed rgba(0, 139, 139, 1) !important; /* Dark Cyan #008b8b */ } -.sheet-span-relationships .sheet-dotted-line, -.sheet-span-critical-injuries .sheet-dotted-line{ +.span-relationships .dotted-line, +.span-critical-injuries .dotted-line{ margin: 8px; } -.sheet-appearance-none { +.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; } -div.sheet-changelog button.sheet-button-link, -div.sheet-changelog button.sheet-button-link:hover, -div.sheet-changelog button.sheet-button-link:active, -div.sheet-changelog button.sheet-button-link:focus { +div.changelog button.button-link, +div.changelog button.button-link:hover, +div.changelog button.button-link:active, +div.changelog button.button-link:focus { text-decoration: underline; background-color: transparent; border: 0; @@ -606,16 +744,16 @@ div.sheet-changelog button.sheet-button-link:focus { text-shadow: inherit; box-shadow: inherit; } -div.sheet-changelog button.sheet-button-link::before, -div.sheet-changelog button.sheet-button-link:hover::before, -div.sheet-changelog button.sheet-button-link:active::before, -div.sheet-changelog button.sheet-button-link:focus::before { +div.changelog button.button-link::before, +div.changelog button.button-link:hover::before, +div.changelog button.button-link:active::before, +div.changelog button.button-link:focus::before { content: ""; } /* --- HEADERS ---- */ -.sheet-teal-header { +.teal-header { color: rgba(204, 217, 207, 1); /* Teal Varient */ font-family: 'Graduate', cursive; text-transform: uppercase; @@ -624,7 +762,7 @@ div.sheet-changelog button.sheet-button-link:focus::before { padding-left: 3px; } -.sheet-teal-header-gear-l { +.teal-header-gear-l { float: left; color: rgba(204, 217, 207, 1); /* Teal Varient */ font-family: 'Graduate', cursive; @@ -633,7 +771,7 @@ div.sheet-changelog button.sheet-button-link:focus::before { letter-spacing: .1em; } -.sheet-teal-header-gear-r { +.teal-header-gear-r { float: right; color: rgba(204, 217, 207, 1); /* Teal Varient */ font-family: 'Graduate', cursive; @@ -642,7 +780,7 @@ div.sheet-changelog button.sheet-button-link:focus::before { letter-spacing: .1em; } -.sheet-darkest-teal-header { +.darkest-teal-header { color: #354b44; /* Darkest Teal Varient */ font-family: 'Graduate', cursive; text-transform: uppercase; @@ -650,8 +788,8 @@ div.sheet-changelog button.sheet-button-link:focus::before { letter-spacing: .1em; } -.sheet-xeno-header, -.sheet-ship-header { +.xeno-header, +.ship-header { background-color: rgba(204, 217, 207, 1); /* Teal Varient */ -position: relative; align-self: start; @@ -660,8 +798,11 @@ div.sheet-changelog button.sheet-button-link:focus::before { z-index: 10; padding-top: 2px; clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 100%, 0% 100%); + width: auto; + padding-left: 15px; + padding-right: 15px; } -.sheet-ship-header-black { +.ship-header-black { background-color: black; color: rgba(204, 217, 207, 1); /* Teal Varient */ top: -8px; @@ -669,44 +810,36 @@ 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 { +.black-floating-header.header-doublerow, +.black-floating-header-clipped.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 { +.black-floating-header.header-doublerow ~ .xeno-textfield, +.black-floating-header-clipped.header-doublerow ~ .xeno-textfield { min-height: 120px; - -max-height: 80px; margin-top: 30px; - -max-width: 175px; } -.sheet-ship-attribute { +.ship-attribute { margin-top: 10px; } -.sheet-xeno-header-name, -.sheet-ship-header-name { - width: 70px; -} -.sheet-ship-header-manufacturer{ - width: 120px; -} -.sheet-ship-header-ai { - width: 50px; -} -.sheet-xeno-header-attribute, -.sheet-ship-attribute-name { - width: 80%; - justify-self: center; -} -.sheet-ship-attribute-ai { +.xeno-header-attribute, +.ship-attribute-name { width: 80%; justify-self: center; } -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 { +.xeno-header-attribute div.weapon-item.range { + border: 0; +} +.ship-attribute-ai { + width: 80%; + justify-self: center; +} + +button[type="roll"].button-skill, button[type="action"].button-skill, input[type="checkbox"].button-skill, .medium-teal-header, .dark-teal-header { color: #008b8b; /* Dark Cyan #008b8b */ font-family: 'Montserrat'; text-transform: uppercase; @@ -714,41 +847,47 @@ button[type="roll"].sheet-button-skill, button[type="action"].sheet-button-skill font-weight: bold; } -.sheet-panicdesc:checked ~ button.sheet-panicdesc, -.sheet-panicdesc:not(:checked) ~ button.sheet-nopanicdesc { +.panicdesc:checked ~ button.panicdesc, +.panicdesc:not(:checked) ~ button.nopanicdesc { display: none; } -.sheet-panicdesc:not(:checked) ~ button.sheet-panicdesc, -.sheet-panicdesc:checked ~ button.sheet-nopanicdesc { +.panicdesc:not(:checked) ~ button.panicdesc, +.panicdesc:checked ~ button.nopanicdesc { display: block; } -.sheet-medium-teal-header { +.medium-teal-header { color: rgba(113, 142, 135, 1); /* Medium Teal #718e87 */ } -.sheet-dark-teal-header { +.dark-teal-header { color: rgba(0, 139, 139, 1); /* Dark Cyan #008b8b */ font-weight: bold; } -.sheet-vertical-adjust-one { +.vertical-adjust-half { + margin-top: 3px; +} +.vertical-adjust-one { margin-top: 6px; } -.sheet-vertical-adjust-one-more { +.vertical-adjust-one-more { margin-top: 9px; } -.sheet-vertical-adjust-two-more { +.vertical-adjust-two-more { margin-top: 12px; } -.sheet-vertical-shift-one { +.vertical-shift-one { margin-top: -5px; } -.sheet-vertical-balance { +.vertical-shift-one-more { + margin-top: -10px; +} +.vertical-balance { margin-top: 12px; } -.sheet-black-floating-header { +.black-floating-header { background-color: rgba(0, 0, 0, 1); /* Black #000000 */ border: 1px solid rgba(0, 0, 0, 1); /* Black #000000 */ border-radius: 0px 20px 20px 0px; @@ -762,7 +901,7 @@ button[type="roll"].sheet-button-skill, button[type="action"].sheet-button-skill } -.sheet-black-floating-header-clipped { +.black-floating-header-clipped { background-color: rgba(0, 0, 0, 1); /* Black #000000 */ border: 1px solid rgba(0, 0, 0, 1); /* Black #000000 */ float: left; @@ -775,11 +914,11 @@ button[type="roll"].sheet-button-skill, button[type="action"].sheet-button-skill border-radius: unset; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); } -.sheet-black-floating-header-clipped + .sheet-vertical-adjust-one-more { +.black-floating-header-clipped + .vertical-adjust-one-more { margin-top: 12px; } -.sheet-black-floating-header-gear { +.black-floating-header-gear { background-color: rgba(0, 0, 0, 1); /* Black #000000 */ border: 1px solid rgba(0, 0, 0, 1); /* Black #000000 */ border-radius: 0px 20px 20px 0px; @@ -793,29 +932,28 @@ button[type="roll"].sheet-button-skill, button[type="action"].sheet-button-skill } -.sheet-floating-header { - -background-color: rgba(0, 0, 0, 1); /* Black #000000 */ - -border: 1px solid rgba(0, 0, 0, 1); /* Black #000000 */ - -border-radius: 0px 20px 20px 0px; +.floating-header { + /* background-color: rgba(0, 0, 0, 1); Black #000000 */ + /* border: 1px solid rgba(0, 0, 0, 1); Black #000000 */ + /* border-radius: 0px 20px 20px 0px; */ float: center; height: 1em; width: 100%; line-height: 1em; margin: -20px 0 0 0; - -text-align: left; padding: 0px 0px 0px 0px; } /* Firefox specific modification */ @supports (-moz-appearance:none) { - .sheet-floating-header { padding: 0px 0px 1px 0px; } + .floating-header { padding: 0px 0px 1px 0px; } } -.sheet-more-curves { +.more-curves { border-radius: 20px 20px 20px 0px; } -.sheet-black-header { +.black-header { background-color: rgba(0, 0, 0, 1); /* Black #000000 */ border: 1px solid rgba(0, 0, 0, 1); /* Black #000000 */ border-radius: 20px; @@ -825,7 +963,7 @@ button[type="roll"].sheet-button-skill, button[type="action"].sheet-button-skill padding: 0px 0px 0px 5px; } -.sheet-mini-header { +.mini-header { display: block; padding-top: 5px; padding-bottom: 5px; @@ -834,51 +972,47 @@ button[type="roll"].sheet-button-skill, button[type="action"].sheet-button-skill line-height: .75em; } -.sheet-bold { +.bold { font-weight: bold; font-size: 12px; letter-spacing: 0px; } -.sheet-align-left { +.align-left { text-align: left; } -.sheet-align-right { +.align-right { text-align: right; } -.sheet-float-left { +.float-left { float: left; margin-left: 0px; } -.sheet-float-right { +.float-right { float: right; margin-right: 0px; } -.sheet-condition-title { - float: left; - margin-left: 5px; -} -.sheet-relationship-title { +.condition-title { float: left; margin-left: 5px; } -.sheet-text-input, .sheet-text-inv, .sheet-select-input, input[type="number"].sheet-number-input{ +.text-input, .text-inv, .select-input, .ui-dialog .charsheet input[type="number"].number-input{ font-family: 'Courier Prime'; font-family: 'Roboto'; background: transparent; } -.sheet-text-input { +.text-input { color: #000000; width: 99%; border: 1px solid transparent; - padding: 3px; + padding: 3px 3px 0 3px; } -.sheet-text-inv { +.text-inv { color: #000000; width: 60%; border: 1px solid transparent; @@ -886,7 +1020,7 @@ button[type="roll"].sheet-button-skill, button[type="action"].sheet-button-skill float: left; } -.sheet-select-input{ +.select-input{ color: #555; width: 100%; height: 1.95em; @@ -894,127 +1028,166 @@ button[type="roll"].sheet-button-skill, button[type="action"].sheet-button-skill margin-bottom: 0px; } -.sheet-relationship-input{ - width: 85%; -} - -.sheet-seventy-seven-percent { +.seventy-seven-percent { width: 77%; } -.sheet-make-it-shorter { +.make-it-shorter { width: 89%; } -.sheet-small-teal-label { +.small-teal-label { font-size: 10px; color: rgb(204, 217, 207); font-family: 'Graduate', cursive; } - - -.sheet-small-box { - padding: 0; +.experience, .story-points { + user-select: none; } -.sheet-small-box div { - margin-top: -6px; -} -.sheet-dark-pink-header { + +.dark-pink-header { color:rgb(165, 52, 52); } -.sheet-dark-red-header { +.dark-red-header { color:rgb(165, 52, 52); } -.sheet-hidden { +.hidden { display: none; } -input.sheet-overencumbered-check:checked ~ span, -input.sheet-overloaded-check:checked ~ span { +.no-opactiy { + opacity: 0; + user-select: none; + cursor: default; +} +input.overencumbered-check:checked ~ span, +input.overloaded-check:checked ~ span { display:none; } -input.sheet-overencumbered-check:checked ~ span.sheet-dark-pink-header, -input.sheet-overloaded-check:checked ~ span.sheet-dark-red-header { +input.overencumbered-check:checked ~ span.dark-pink-header, +input.overloaded-check:checked ~ span.dark-red-header { display: inline-block } -input.sheet-overloaded-check:checked ~ span.sheet-dark-pink-header { +input.overloaded-check:checked ~ span.dark-pink-header { display:none; } /* - - - - - Remove Number Spinner - - - - - */ -input[type="number"].sheet-no-spin-input::-webkit-outer-spin-button, -input[type="number"].sheet-no-spin-inv::-webkit-outer-spin-button, -input[type="number"].sheet-no-spin-inv-tot::-webkit-outer-spin-button, -input[type="number"].sheet-number-input::-webkit-outer-spin-button, -input[type="number"].sheet-no-spin-input::-webkit-inner-spin-button, -input[type="number"].sheet-no-spin-inv::-webkit-inner-spin-button, -input[type="number"].sheet-no-spin-inv-tot::-webkit-outer-spin-button, -input[type="number"].sheet-number-input::-webkit-inner-spin-button { +input[type="number"].no-spin-input::-webkit-outer-spin-button, +input[type="number"].no-spin-inv::-webkit-outer-spin-button, +input[type="number"].no-spin-inv-tot::-webkit-outer-spin-button, +input[type="number"].number-input::-webkit-outer-spin-button, +input[type="number"].no-spin-input::-webkit-inner-spin-button, +input[type="number"].no-spin-inv::-webkit-inner-spin-button, +input[type="number"].no-spin-inv-tot::-webkit-outer-spin-button, +input[type="number"].number-input::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } -input[type="number"].sheet-no-spin-input, -input[type="number"].sheet-no-spin-inv, -input[type="number"].sheet-no-spin-inv-tot, -input[type="number"].sheet-number-input { +input[type="number"].no-spin-input, +input[type="number"].no-spin-inv, +input[type="number"].no-spin-inv-tot, +input[type="number"].number-input { -moz-appearance: textfield; } -.sheet-span-gear .sheet-vertical-adjust-one { +input.optionalspinners:not(:checked) ~ div input[type="number"].optional-spinner-input, +input[type="number"].spinner-input, +input[type="number"].spinner-input-total { + -moz-appearance: textfield; +} +input.optionalspinners:checked ~ div input[type="number"].optional-spinner-input:hover, +input[type="number"].spinner-input:hover { + -moz-appearance: auto; +} +input.optionalspinners:checked ~ div input[type="number"].optional-spinner-input::-webkit-outer-spin-button, +input.optionalspinners:checked ~ div input[type="number"].optional-spinner-input::-webkit-inner-spin-button, +input[type="number"].spinner-input::-webkit-outer-spin-button, +input[type="number"].spinner-input::-webkit-inner-spin-button, +input[type="number"].spinner-input-total::-webkit-outer-spin-button, +input[type="number"].spinner-input-total::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +input.optionalspinners:checked ~ div input[type="number"].optional-spinner-input:hover::-webkit-outer-spin-button, +input.optionalspinners:checked ~ div input[type="number"].optional-spinner-input:hover::-webkit-inner-spin-button, +input[type="number"].spinner-input:hover::-webkit-outer-spin-button, +input[type="number"].spinner-input:hover::-webkit-inner-spin-button { + -webkit-appearance: auto; + -moz-appearance: auto; + max-width: 3px; + width: 3px; + margin: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + opacity: 0.5; + margin: 10; +} +.span-gear input.spinner-input-total { + background-color: Grey; +} + +.span-gear .vertical-adjust-one { overflow-y: auto; overflow-x: hidden; - max-height: 280px; + max-height: 310px; } /* TEXT FIELDS */ -.sheet-span-tinyitems textarea { +.span-tinyitems textarea { max-width: 100%; min-width: 100%; overflow-y: auto; resize:none; - max-height: 65px; - min-height: 65px; +/* 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 { +textarea.xeno-textfield::-webkit-scrollbar, +.span-gear .vertical-adjust-one::-webkit-scrollbar, +.tab-container textarea::-webkit-scrollbar, +.span-tinyitems textarea::-webkit-scrollbar, +.span-personal-agenda textarea::-webkit-scrollbar { width: 6px; 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 { +textarea.xeno-textfield::-webkit-scrollbar-track, +.span-gear .vertical-adjust-one::-webkit-scrollbar-track, +.tab-container textarea::-webkit-scrollbar-track, +.span-tinyitems textarea::-webkit-scrollbar-track, +.span-personal-agenda 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 { +textarea.xeno-textfield::-webkit-scrollbar-thumb, +.span-gear .vertical-adjust-one::-webkit-scrollbar-thumb, +.tab-container textarea::-webkit-scrollbar-thumb, +.span-tinyitems textarea::-webkit-scrollbar-thumb, +.span-personal-agenda 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 { +textarea.xeno-textfield::-webkit-scrollbar-thumb:hover, +.span-gear .vertical-adjust-one::-webkit-scrollbar-thumb:hover, +.tab-container textarea::-webkit-scrollbar-thumb:hover, +.span-tinyitems textarea::-webkit-scrollbar-thumb:hover, +.span-personal-agenda textarea::-webkit-scrollbar-thumb:hover { background: black; } -span.sheet-gear-header { +span.gear-header { float: right; width: 40px !important; min-width: 40px; text-align: center; } -.sheet-span-gear input.sheet-spinner-input, -.sheet-span-gear input.sheet-spinner-input-total, -.sheet-span-gear select.sheet-spinner-input-wt { +.span-gear input.spinner-input, +.span-gear input.spinner-input-total, +.span-gear select.spinner-input-wt { font-family: 'Courier Prime'; font-family: 'Roboto'; background: transparent; @@ -1025,118 +1198,48 @@ span.sheet-gear-header { width: 32px !important; height: 2em !important; } -input.sheet-optionalspinners:not(:checked) ~ div input[type="number"].sheet-optional-spinner-input, -input[type="number"].sheet-spinner-input, -input[type="number"].sheet-spinner-input-total { - -moz-appearance: textfield; -} -input.sheet-optionalspinners:checked ~ div input[type="number"].sheet-optional-spinner-input:hover, -input[type="number"].sheet-spinner-input:hover { - -moz-appearance: auto; -} -input.sheet-optionalspinners:checked ~ div input[type="number"].sheet-optional-spinner-input::-webkit-outer-spin-button, -input.sheet-optionalspinners:checked ~ div input[type="number"].sheet-optional-spinner-input::-webkit-inner-spin-button, -input[type="number"].sheet-spinner-input::-webkit-outer-spin-button, -input[type="number"].sheet-spinner-input::-webkit-inner-spin-button, -input[type="number"].sheet-spinner-input-total::-webkit-outer-spin-button, -input[type="number"].sheet-spinner-input-total::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} -input.sheet-optionalspinners:checked ~ div input[type="number"].sheet-optional-spinner-input:hover::-webkit-outer-spin-button, -input.sheet-optionalspinners:checked ~ div input[type="number"].sheet-optional-spinner-input:hover::-webkit-inner-spin-button, -input[type="number"].sheet-spinner-input:hover::-webkit-outer-spin-button, -input[type="number"].sheet-spinner-input:hover::-webkit-inner-spin-button { - -webkit-appearance: auto; - -moz-appearance: auto; - max-width: 3px; - width: 3px; - margin: 0; - position: absolute; - top: 0; - right: 0; - bottom: 0; - opacity: 0.7; - margin: 10; -} -.sheet-span-gear input.sheet-spinner-input-total { - background-color: Grey; -} -.sheet-span-gear div.repcontainer div.repitem { + +.span-gear div.repcontainer div.repitem { height: 30px; } -.sheet-span-gear div.repitem.ui-sortable-helper { +.span-gear div.repitem.ui-sortable-helper { left: unset !important; } -.sheet-span-gear div.repcontainer div.itemcontrol { +.span-gear div.repcontainer div.itemcontrol { float: right; } -.sheet-span-gear div.repcontrol { +.span-gear div.repcontrol { width: fit-content; margin-left: 6px; } -.sheet-span-gear .repcontrol_add, .sheet-span-gear .repcontrol_edit { +.span-gear .repcontrol_add, .span-gear .repcontrol_edit { visibility: hidden; width: 5px; margin-left: -5px; padding-left: 5px; } - .sheet-span-gear .repcontrol_add::before, .sheet-span-gear .repcontrol_edit::before { + .span-gear .repcontrol_add::before, .span-gear .repcontrol_edit::before { visibility:visible; color: grey; font-family: "Pictos"; } - .sheet-span-gear .repcontrol_add::before { + .span-gear .repcontrol_add::before { content: "&"; } - .sheet-span-gear .repcontrol_edit::before { + .span-gear .repcontrol_edit::before { content: "("; } - .sheet-span-gear .repcontrol_add, .sheet-span-gear .repcontrol_edit, .sheet-span-gear .repcontrol_move { + .span-gear .repcontrol_add, .span-gear .repcontrol_edit, .span-gear .repcontrol_move { float: right; } - .sheet-span-gear .repcontainer.editmode ~ .repcontrol button.repcontrol_edit::before { + .span-gear .repcontainer.editmode ~ .repcontrol button.repcontrol_edit::before { font-family: "Pictos"; content: ")"; } -/* input[type="number"].sheet-no-spin-inv { - float: right; - font-family: 'Courier Prime'; - font-size: 1em; - font-weight: normal; - text-align: center; - height: 2em; - width: 2em; - background-color: White; - border: 1px solid White; - margin: -1px 3px; - padding: 3px 0px 0px 0px; - border-radius: 50%; - box-shadow: 1px 1px 7px rgba(0, 139, 139, 1), -1px -1px 7px rgba(0, 139, 139, 1), 1px 1px 10px white, -1px -1px 10px white; -} -input[type="number"].sheet-no-spin-inv-tot { - float: right; - font-family: 'Courier Prime'; - font-size: 1em; - font-weight: normal; - color: white; - text-align: center; - height: 2em; - width: 2em; - background-color: Grey; - border: 1px solid White; - margin: -1px 2px; - padding: 3px 0px 0px 0px; - - border-radius: 50%; - box-shadow: 1px 1px 7px rgba(0, 139, 139, 1), -1px -1px 7px rgba(0, 139, 139, 1), 1px 1px 10px white, -1px -1px 10px white; -} */ - - -input[type="number"].sheet-no-spin-input { + .ui-dialog .charsheet input[type="number"].no-spin-input { font-family: 'Courier Prime'; font-size: 20px; font-weight: bold; @@ -1150,7 +1253,7 @@ input[type="number"].sheet-no-spin-input { border-radius: 50%; box-shadow: 1px 1px 7px rgba(0, 139, 139, 1), -1px -1px 7px rgba(0, 139, 139, 1), 1px 1px 10px white, -1px -1px 10px white; } -div.sheet-no-spin-input { +.ui-dialog .charsheet div.no-spin-input { display: flex; font-size: 20px; height: 30px; @@ -1165,15 +1268,15 @@ div.sheet-no-spin-input { box-shadow: 1px 1px 7px rgba(0, 139, 139, 1), -1px -1px 7px rgba(0, 139, 139, 1), 1px 1px 10px white, -1px -1px 10px white; } -.sheet-no-spin-input.sheet-wide { +.no-spin-input.wide { width: 42px !important; } -.charsheet input.sheet-squareinput:checked ~ div .sheet-no-spin-input { +.charsheet input.squareinput:checked ~ div .no-spin-input { border-radius: 20%; } -div.sheet-no-spin-input input[type="number"].sheet-no-spin-input { +.ui-dialog .charsheet div.no-spin-input input[type="number"].no-spin-input { background-color: transparent; border: unset; border-radius: unset; @@ -1181,17 +1284,17 @@ div.sheet-no-spin-input input[type="number"].sheet-no-spin-input { width: 2em; } -input[type="number"].sheet-number-input { +input[type="number"].number-input { text-align: center; border: 1px solid rgb(204, 204, 204); padding: 3px; } -input[type="number"].sheet-shorter-number { +.ui-dialog .charsheet input[type="number"].shorter-number { width: 22px; } -input[type="number"].sheet-pool-number { +.ui-dialog .charsheet input[type="number"].pool-number { font-size: 1.75em; font-weight: bold; height: 1.75em; @@ -1204,7 +1307,7 @@ input[type="number"].sheet-pool-number { box-shadow: 1px 1px 10px white, -1px -1px 10px white; } -input[type="number"].sheet-low-visibility-number { +.ui-dialog .charsheet input[type="number"].low-visibility-number { color: #afafaf; font-size: 1.25em; font-weight: bold; @@ -1218,20 +1321,124 @@ input[type="number"].sheet-low-visibility-number { margin-left: 1px; box-shadow: none; padding: 0px; + vertical-align: top; } -input[type="number"].sheet-small { +.ui-dialog .charsheet input[type="number"].small { font-size: 13px; } -.sheet-skinny-div { +.skinny-div { height: 18px; } +/* SKILLS */ + +.skill-heavymachinery, +.skill-rangedcombat, +.skill-mobility, +.skill-piloting, +.skill-command { + width: 110%; + display: flex; + justify-self: flex-start; + justify-content: space-around; +} +.skill-stamina, +.skill-observation, +.skill-survival, +.skill-comtech, +.skill-medicalaid { + width: 110%; + display: flex; + justify-self: flex-end; + justify-content: space-around; +} + +/* PERMANENT MODIFIERS */ +.popout-container { + position: relative; + z-index: 49; + right: 15px; + width: 0px; +} +.permanentmods:not(checked) ~ div div.skill div.popout-container { + display: none; +} +.permanentmods:checked ~ div div.skill div.popout-container, +.permanentmods[value="1"] ~ div div.skill div.popout-container { + display: flex; +} +/* .permanentmods:not(checked) ~ div.skill input[type="hidden"].skill-modifier:not([value="0"]) ~ div.popout-container { + display: flex; +} */ +/* .charsheet div.popout-container div.skill-modifier, */ +.charsheet div.popout-container div.skill-modifier { + display: flex; + position: absolute; + top: 0px; + left: 0; + z-index: 50; + width: 56px; + justify-content: center; +} +div.popout-container div.skill-modifier button { + display: none; + width: 15px; + height: 15px; + line-height: 7px; + font-size: 8px; + padding: 0; + margin-top: -1px; + border-radius: 50%; +} +div.popout-container div.skill-modifier span.no-spin-input { + display: none; + width: 15px; + height: 15px; + line-height: 17px; + font-size: 8px; + font-weight: bold; + text-align: center; + vertical-align: middle; + justify-content: center; + align-content: center; + background-color: White; + border: 1px solid White; + -margin: -1px -2px; + -padding: 3px 0px 0px 0px; + border-radius: 50%; + box-shadow: 1px 1px 2px rgb(0 139 139), -1px -1px 2px rgb(0 139 139), 1px 1px 3px white, -1px -1px 3px white; +} +/* div.skill div.float-left ~ div.popout-container div.skill-modifier, +div.popout-container div.skill-modifier, */ +/* div.skill div.float-left:hover ~ div.popout-container div.skill-modifier, */ +div.skill div.float-left:hover div.popout-container div.skill-modifier span.no-spin-input, +div.skill div.float-left:hover div.popout-container div.skill-modifier button.no-spin-input, +div.skill div.float-right:hover div.popout-container div.skill-modifier span.no-spin-input, +div.skill div.float-right:hover div.popout-container div.skill-modifier button.no-spin-input, +div.popout-container div.skill-modifier:hover span.no-spin-input, +div.popout-container div.skill-modifier:hover button.no-spin-input { + display: inline-block; +} +/* + input[type="checkbox"].skill-modifier-plus + span::before, + input[type="checkbox"].skill-modifier-plus + span::before { + content: " "; +}*/ +input[type="checkbox"].skill-modifier-plus:checked + span::before { + content: "+"; +} +input[type="checkbox"].skill-modifier-viz:checked ~ span.no-spin-input, +input[type="checkbox"].skill-modifier-viz:checked ~ span.no-spin-input span { + display: flex !important; + left: 15px; +} + /* ACTION BUTTONS FOR TABULAR SHEET */ -button[type="action"].sheet-action-tab { - width: 20%; - height: 10px; +button[type="action"].action-tab { + /* width: 20%; */ + height: 9px; background-color: transparent; border: 1px solid rgba(105, 105, 105, 0.33); border-radius: 5px; @@ -1239,101 +1446,272 @@ button[type="action"].sheet-action-tab { line-height: 12px; /*color: rgba(105, 105, 105, 0.33);*/ color: #008b8b; - padding: 0px 0px 2px 0px; + /* padding: 0px 0px 2px 0px; */ + /* overflow: hidden; */ + width: fit-content; + /* max-width: 24%; */ + padding: 0 6px 3px 6px; } /* Firefox specific modification */ -@supports (-moz-appearance:none) { - button[type="action"].sheet-action-tab { padding: 0px 0px 0px 0px; } - } -.sheet-header-tabs button[type=action].sheet-action-tab { - -width: 65px; +/* @supports (-moz-appearance:none) { + button[type="action"].action-tab { padding: 0px 0px 0px 0px; } + } */ +.header-tabs button[type=action].action-tab { + /* width: 65px; */ color: rgb(204, 204, 204); background-color: #696969; - -border: 1px solid #696969; + /* border: 1px solid #696969; */ border: 0; border-radius: 0; margin-right: 0; - -border-bottom: 2px solid #d3d3d3; + /* 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%; +button[type="action"].action-tab.fit-five { + width: 14%; } -button[type="action"].sheet-action-tab.sheet-fit-two { +button[type="action"].action-tab.fit-two { width: 35%; } -button[type="action"].sheet-action-tab:hover { +button[type="action"].action-tab:hover { color: #ffffff; background-color: #696969; -border: 1px solid #696969; } -button[type="action"].sheet-action-tab:active { +button[type="action"].action-tab:active { color: #ffffff; background-color: #696969; -border: 1px solid #696969; } -button[type="action"].sheet-action-tab:focus { +button[type="action"].action-tab:focus { color: #ffffff; background-color: #696969; -border: 1px solid #696969; } - -button[type="action"].sheet-tab-weapon { - width: 12% !important; -} -.sheet-span-weapons .sheet-skinny-div { - +button[type="action"].action-tab span { + overflow: hidden; } -button[type="action"].sheet-tab-log { +button[type="action"].tab-weapon { + -width: 10%; +} +button[type="action"].tab-armament { + -width: 13%; +} + +button[type="action"].tab-log { width: 25% !important; } /* TABS */ -div.sheet-tab-content { +div.tab-container { display: none; - height: fit-content; + -height: 150px; } -.sheet-span-talents div.sheet-tab-content { - margin-top: 30px; + +.span-talents div.talent-tabs { + line-height: 16px; } -div.sheet-tab-content textarea { + +div.tab-container textarea { min-height: 50px; max-height: 100px; - overflow-y: scroll; + overflow-y: auto; + resize: vertical; } -div.sheet-box-under-the-bed { +div.box-under-the-bed { + display: none; +} +.span-talents .tab-container .talent-roll { + display: flex; + justify-content: flex-start; + font-size: 0.8rem; +} + +/* .span-talents .tab-container .talent-roll select { + padding: 0 0px; + clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); + border-radius: unset; + -height: fit-content; +} */ +/* .span-talents div.talent-roll label { + padding: 0 3px; + line-height: 16px; + -height: 16px; + -margin: 2px 0px 2px 3px; +} */ +.span-talents div.talent-roll label.talent-type-btn span::before { + content: "0 "; + font-family: "Pictos"; +} +.span-talents .talent-roll-box { + accent-color: #008b8b; + align-self: center; +} +.charsheet div.talent-roll label.talent-stress-incl, +.charsheet div.talent-roll label.talent-stress-excl { + padding-left: 2px; + padding-right: 2px; +} +.charsheet div.talent-roll label.talent-stress-excl { + text-decoration: line-through; +} +/* .span-talents div.talent-roll :is(span,label,button,select,option) { + font-size: 0.8rem; +} */ +.talent-roll label.talent-type-skill, +.talent-roll label.talent-type-supply { + -display: block; + -text-align: center; + -padding: 0 3px; + width: 55px; + cursor: pointer; +} +/* .span-talents .tab-container div.talent-roll div.darker-rounded-box, +.span-talents .tab-container div.talent-roll label.darker-rounded-box { + line-height: 16px; + height: 16px; +} */ +/* .span-talents div.talent-roll label span.icon { + font-family: Pictos; + padding: 0; + margin: 0; +} +.darker-rounded-box span.icon + span { + margin: 1px 3px 0px 2px; + height: 1.4em; +} */ +/* input.talent-type:checked ~ div.talent-roll label.talent-type-skill, +input.talent-type:not(:checked) ~ div.talent-roll label.talent-type-supply { + display: block; +} */ +/* input.talent-type:not(:checked) ~ div.talent-roll label.talent-type-skill, +input.talent-type:checked ~ div.talent-roll label.talent-type-supply { + display: none; +} */ +/* div.talent-roll input.talent-stress-box:checked ~ label.talent-stress-incl, +div.talent-roll input.talent-stress-box:not(:checked) ~ label.talent-stress-excl { + display: block; + color: rgb(204, 217, 207); +} */ +/* div.talent-roll input.talent-stress-box:not(:checked) ~ label.talent-stress-incl, +div.talent-roll input.talent-stress-box:checked ~ label.talent-stress-excl { + display: none; +} */ +div.talent-roll .talent-supply, +div.talent-roll .talent-skill, +div.talent-roll .talent-other { display: none; } -input.sheet-advencumbrance:checked ~ div .sheet-encumbrance_calc, -input.sheet-advencumbrance:not(:checked) ~ div .sheet-encumbrance_manual { - display: inline-block; -} -input.sheet-advencumbrance:not(:checked) ~ div .sheet-encumbrance_calc, -input.sheet-advencumbrance:checked ~ div .sheet-encumbrance_manual { - display: none; -} -input.sheet-advencumbrance:checked ~ div .sheet-showencumbrance { - display: inline-block; -} -input.sheet-advencumbrance:checked ~ div .sheet-showencumbrance-flex { +/* input.talent-type:checked ~ div.talent-roll .talent-skill, +input.talent-type:not(:checked) ~ div.talent-roll .talent-supply, */ +input.talent-radio-skill:checked ~ div.talent-roll .talent-skill, +input.talent-radio-supply:checked ~ div.talent-roll .talent-supply, +input.talent-radio-other:checked ~ div.talent-roll .talent-other { display: flex; } -input.sheet-advencumbrance:not(:checked) ~ div .sheet-showencumbrance, -input.sheet-advencumbrance:not(:checked) ~ div .sheet-showencumbrance-flex { +/* input.talent-type:not(:checked) ~ div.talent-roll .talent-attribute, +input.talent-type:not(:checked) ~ div.talent-roll .talent-skill, +input.talent-type:not(:checked) ~ div.talent-roll .talent-stress, +input.talent-type:checked ~ div.talent-roll .talent-supply, +div.talent-roll input.talent-stress-box:not(:checked) ~ label.talent-stress-incl, +div.talent-roll input.talent-stress-box:checked ~ label.talent-stress-excl, +input.talent-type:not(:checked) ~ div.talent-roll label.talent-type-skill, +input.talent-type:checked ~ div.talent-roll label.talent-type-supply { + display: none; +} */ + +input.talent-roll-box:not(:checked) ~ div.talent-roll { + display: none; +} +input.talent-roll-box:not(:checked) ~ span.talent-roll-btn button, +input.talent-radio-other:checked input.talent-roll-box:checked ~ span.talent-roll-btn button { + pointer-events: none; + -background-color: #b6b6b6; +} +/* input.talent-roll-box:not(:checked) ~ div.talent-roll :is(select,label,input,div), +input.talent-roll-box:not(:checked) ~ div.talent-roll label span { + pointer-events: none; + background-color: #b6b6b6; +} */ + +div.span-talents div.tab-container input.talent-radio-skill:checked ~ span.talent-roll-btn button.talent-roll-skill, +div.span-talents div.tab-container input.talent-radio-other:checked ~ span.talent-roll-btn button.talent-roll-skill, +div.span-talents div.tab-container input.talent-radio-supply:checked ~ span.talent-roll-btn button.talent-roll-supply { + display: inline-block; +} + +div.span-talents div.tab-container input.talent-radio-skill:not(checked) ~ span.talent-roll-btn button.talent-roll-skill, +div.span-talents div.tab-container input.talent-radio-other:not(checked) ~ span.talent-roll-btn button.talent-roll-skill, +div.span-talents div.tab-container input.talent-radio-supply:not(checked) ~ span.talent-roll-btn button.talent-roll-supply { + display: none; +} +div.span-talents span.talent-roll-btn button.button-skill { + width: fit-content; + margin: 0 2px; + align-content: center; + line-height: 15px; +} +div.span-talents div.tab-container input[type="text"].text-input { + text-align: center; + width: calc(100% - 65px); +} +/* , +div.span-talents div.tab-container input.talent-roll-active:checked + + input.talent-type:checked ~ span.talent-roll-btn .talent-roll-supply, +div.span-talents div.tab-container input.talent-roll-active:checked + + input.talent-type:not(:checked) ~ span.talent-roll-btn .talent-roll-skill { + display: none; +} */ +div.span-talents div.tab-container input.talent-roll-active:checked ~ span.talent-roll-btn button { + pointer-events: unset; + color: #008b8b; + border: 1px solid #008b8b; +} +div.span-talents div.tab-container input.talent-roll-active:checked ~ span.talent-roll-btn button:hover { + pointer-events: unset; + color: rgb(204, 217, 207); + background-color: #008b8b; + border: 1px solid #008b8b; + text-shadow: none; +} +div.span-talents div.tab-container input.talent-roll-active:not(checked) ~ span.talent-roll-btn button { + pointer-events: none; + color:#b6b6b6; + border-color: #b6b6b6; + +} + + +input.advencumbrance:checked ~ div .encumbrance_calc, +input.advencumbrance:not(:checked) ~ div .encumbrance_manual { + display: inline-block; +} +input.advencumbrance:not(:checked) ~ div .encumbrance_calc, +input.advencumbrance:checked ~ div .encumbrance_manual { + display: none; +} +input.advencumbrance:checked ~ div .showencumbrance { + display: inline-block; +} +input.advencumbrance:checked ~ div .showencumbrance-flex { + display: flex; +} +input.advencumbrance:not(:checked) ~ div .showencumbrance, +input.advencumbrance:not(:checked) ~ div .showencumbrance-flex { display: none; } -input.sheet-advencumbrance:checked ~ div .sheet-weapon-item-details { +input.advencumbrance:checked ~ div .weapon-item-details { grid-template-columns: 15% 15% auto 20% 15%; grid-gap: 0px; padding: 0px; @@ -1341,7 +1719,7 @@ input.sheet-advencumbrance:checked ~ div .sheet-weapon-item-details { border-color: transparent; } -input.sheet-advencumbrance:not(:checked) ~ div .sheet-weapon-item-details { +input.advencumbrance:not(:checked) ~ div .weapon-item-details { grid-template-columns: 20% 20% auto 25%; grid-gap: 0px; padding: 0px; @@ -1350,162 +1728,172 @@ 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-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 { +input.tab-sheet[value="Character"] ~ div .ship, +input.tab-sheet[value="Character"] ~ div .xeno, +input.tab-sheet[value="Character"] ~ div .config, +input.tab-sheet[value="Ship"] ~ div .character, +input.tab-sheet[value="Ship"] ~ div .xeno, +input.tab-sheet[value="Ship"] ~ div .config, +input.tab-sheet[value="Config"] ~ div .character, +input.tab-sheet[value="Config"] ~ div .xeno, +input.tab-sheet[value="Config"] ~ div .ship, +input.tab-sheet[value="Xeno"] ~ div .character, +input.tab-sheet[value="Xeno"] ~ div .ship, +input.tab-sheet[value="Xeno"] ~ div .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="Xeno"] ~ div .sheet-xeno { +input.tab-sheet[value="Character"] ~ div .character, +input.tab-sheet[value="Ship"] ~ div .ship, +input.tab-sheet[value="Config"] ~ div .config , +input.tab-sheet[value="Xeno"] ~ div .xeno { display: grid; } -.sheet-header-tabs button[type=action].sheet-action-tab[value=Config] { +.header-tabs button[type=action].action-tab[value=Config] { text-transform: lowercase; font-family: "pictos"; } -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"] { +input.tab-sheet[value="Character"] ~ div .header-tabs button[name="act_tab_character"], +input.tab-sheet[value="Ship"] ~ div .header-tabs button[name="act_tab_ship"], +input.tab-sheet[value="Xeno"] ~ div .header-tabs button[name="act_tab_xeno"], +input.tab-sheet[value="Config"] ~ div .header-tabs button[name="act_tab_config"] { color: black; background-color: #d3d3d3; } -input.sheet-tab-one:checked ~ div.sheet-tab-one-contents, -input.sheet-tab-two:checked ~ div.sheet-tab-two-contents, -input.sheet-tab-three:checked ~ div.sheet-tab-three-contents, -input.sheet-tab-four:checked ~ div.sheet-tab-four-contents, -input.sheet-tab-five:checked ~ div.sheet-tab-five-contents, -input.sheet-tab-six:checked ~ div.sheet-tab-six-contents, -input.sheet-tab-seven:checked ~ div.sheet-tab-seven-contents, -input.sheet-tab-eight:checked ~ div.sheet-tab-eight-contents { +input.tab-one:checked ~ div.tab-one-contents, +input.tab-two:checked ~ div.tab-two-contents, +input.tab-three:checked ~ div.tab-three-contents, +input.tab-four:checked ~ div.tab-four-contents, +input.tab-five:checked ~ div.tab-five-contents, +input.tab-six:checked ~ div.tab-six-contents, +input.tab-seven:checked ~ div.tab-seven-contents, +input.tab-eight:checked ~ div.tab-eight-contents { display: block; } -input.sheet-tab-one:checked ~ div.sheet-skinny-div button.sheet-action-tab-one, -input.sheet-tab-two:checked ~ div.sheet-skinny-div button.sheet-action-tab-two, -input.sheet-tab-three:checked ~ div.sheet-skinny-div button.sheet-action-tab-three, -input.sheet-tab-four:checked ~ div.sheet-skinny-div button.sheet-action-tab-four, -input.sheet-tab-five:checked ~ div.sheet-skinny-div button.sheet-action-tab-five, -input.sheet-tab-six:checked ~ div.sheet-skinny-div button.sheet-action-tab-six, -input.sheet-tab-seven:checked ~ div.sheet-skinny-div button.sheet-action-tab-seven, -input.sheet-tab-eight:checked ~ div.sheet-skinny-div button.sheet-action-tab-eight { +input.tab-one:checked ~ div.skinny-div button.action-tab-one, +input.tab-two:checked ~ div.skinny-div button.action-tab-two, +input.tab-three:checked ~ div.skinny-div button.action-tab-three, +input.tab-four:checked ~ div.skinny-div button.action-tab-four, +input.tab-five:checked ~ div.skinny-div button.action-tab-five, +input.tab-six:checked ~ div.skinny-div button.action-tab-six, +input.tab-seven:checked ~ div.skinny-div button.action-tab-seven, +input.tab-eight:checked ~ div.skinny-div button.action-tab-eight { background-color: #808080; color: white; } -input.sheet-tab-alpha:checked ~ div.sheet-tab-alpha-contents, -input.sheet-tab-beta:checked ~ div.sheet-tab-beta-contents, -input.sheet-tab-gamma:checked ~ div.sheet-tab-gamma-contents, -input.sheet-tab-delta:checked ~ div.sheet-tab-delta-contents, -input.sheet-tab-epsilon:checked ~ div.sheet-tab-epsilon-contents, -input.sheet-tab-zeta:checked ~ div.sheet-tab-zeta-contents { +input.tab-alpha:checked ~ div.tab-alpha-contents, +input.tab-beta:checked ~ div.tab-beta-contents, +input.tab-gamma:checked ~ div.tab-gamma-contents, +input.tab-delta:checked ~ div.tab-delta-contents, +input.tab-epsilon:checked ~ div.tab-epsilon-contents, +input.tab-zeta:checked ~ div.tab-zeta-contents { display: block; } -input.sheet-tab-alpha:checked ~ div.sheet-skinny-div button.sheet-tab-alpha-button, -input.sheet-tab-beta:checked ~ div.sheet-skinny-div button.sheet-tab-beta-button, -input.sheet-tab-gamma:checked ~ div.sheet-skinny-div button.sheet-tab-gamma-button, -input.sheet-tab-delta:checked ~ div.sheet-skinny-div button.sheet-tab-delta-button, -input.sheet-tab-epsilon:checked ~ div.sheet-skinny-div button.sheet-tab-epsilon-button, -input.sheet-tab-zeta:checked ~ div.sheet-skinny-div button.sheet-tab-zeta-button { +input.tab-alpha:checked ~ div.skinny-div button.tab-alpha-button, +input.tab-beta:checked ~ div.skinny-div button.tab-beta-button, +input.tab-gamma:checked ~ div.skinny-div button.tab-gamma-button, +input.tab-delta:checked ~ div.skinny-div button.tab-delta-button, +input.tab-epsilon:checked ~ div.skinny-div button.tab-epsilon-button, +input.tab-zeta:checked ~ div.skinny-div button.tab-zeta-button { background-color: #808080; color: white; } -input.sheet-tab-modules1:checked ~ div.sheet-tab-modules1-contents, -input.sheet-tab-modules2:checked ~ div.sheet-tab-modules2-contents, -input.sheet-tab-modules3:checked ~ div.sheet-tab-modules3-contents, -input.sheet-tab-modules4:checked ~ div.sheet-tab-modules4-contents { +input.tab-modules1:checked ~ div.tab-modules1-contents, +input.tab-modules2:checked ~ div.tab-modules2-contents, +input.tab-modules3:checked ~ div.tab-modules3-contents, +input.tab-modules4:checked ~ div.tab-modules4-contents { display: block; } -input.sheet-tab-modules1:checked ~ div .sheet-tab-modules1-button, -input.sheet-tab-modules2:checked ~ div .sheet-tab-modules2-button, -input.sheet-tab-modules3:checked ~ div .sheet-tab-modules3-button, -input.sheet-tab-modules4:checked ~ div .sheet-tab-modules4-button { +input.tab-modules1:checked ~ div .tab-modules1-button, +input.tab-modules2:checked ~ div .tab-modules2-button, +input.tab-modules3:checked ~ div .tab-modules3-button, +input.tab-modules4:checked ~ div .tab-modules4-button { background-color: #808080; color: white; } -input.sheet-tab-log1:checked ~ div.sheet-tab-log1-contents, -input.sheet-tab-log2:checked ~ div.sheet-tab-log2-contents, -input.sheet-tab-log3:checked ~ div.sheet-tab-log3-contents, -input.sheet-tab-log4:checked ~ div.sheet-tab-log4-contents { +input.tab-log1:checked ~ div.tab-log1-contents, +input.tab-log2:checked ~ div.tab-log2-contents, +input.tab-log3:checked ~ div.tab-log3-contents, +input.tab-log4:checked ~ div.tab-log4-contents { display: block; } -input.sheet-tab-log1:checked ~ div .sheet-tab-log1-button, -input.sheet-tab-log2:checked ~ div .sheet-tab-log2-button, -input.sheet-tab-log3:checked ~ div .sheet-tab-log3-button, -input.sheet-tab-log4:checked ~ div .sheet-tab-log4-button { +input.tab-log1:checked ~ div .tab-log1-button, +input.tab-log2:checked ~ div .tab-log2-button, +input.tab-log3:checked ~ div .tab-log3-button, +input.tab-log4:checked ~ div .tab-log4-button { background-color: #808080; color: white; } -input.sheet-tab-armament1:checked ~ div.sheet-tab-armament1-contents, -input.sheet-tab-armament2:checked ~ div.sheet-tab-armament2-contents, -input.sheet-tab-armament3:checked ~ div.sheet-tab-armament3-contents, -input.sheet-tab-armament4:checked ~ div.sheet-tab-armament4-contents, -input.sheet-tab-armament5:checked ~ div.sheet-tab-armament5-contents { +input.tab-armament1:checked ~ div.tab-armament1-contents, +input.tab-armament2:checked ~ div.tab-armament2-contents, +input.tab-armament3:checked ~ div.tab-armament3-contents, +input.tab-armament4:checked ~ div.tab-armament4-contents, +input.tab-armament5:checked ~ div.tab-armament5-contents, +input.tab-armament6:checked ~ div.tab-armament6-contents, +input.tab-armament7:checked ~ div.tab-armament7-contents, +input.tab-armament8:checked ~ div.tab-armament8-contents, +input.tab-armament9:checked ~ div.tab-armament9-contents, +input.tab-armament10:checked ~ div.tab-armament10-contents { display: block; } -input.sheet-tab-armament1:checked ~ div .sheet-tab-armament1-button, -input.sheet-tab-armament2:checked ~ div .sheet-tab-armament2-button, -input.sheet-tab-armament3:checked ~ div .sheet-tab-armament3-button, -input.sheet-tab-armament4:checked ~ div .sheet-tab-armament4-button, -input.sheet-tab-armament5:checked ~ div .sheet-tab-armament5-button { +input.tab-armament1:checked ~ div.armament-btns .tab-armament1-button, +input.tab-armament2:checked ~ div.armament-btns .tab-armament2-button, +input.tab-armament3:checked ~ div.armament-btns .tab-armament3-button, +input.tab-armament4:checked ~ div.armament-btns .tab-armament4-button, +input.tab-armament5:checked ~ div.armament-btns .tab-armament5-button, +input.tab-armament6:checked ~ div.armament-btns .tab-armament6-button, +input.tab-armament7:checked ~ div.armament-btns .tab-armament7-button, +input.tab-armament8:checked ~ div.armament-btns .tab-armament8-button, +input.tab-armament9:checked ~ div.armament-btns .tab-armament9-button, +input.tab-armament10:checked ~ div.armament-btns .tab-armament10-button { background-color: #808080; color: white; } -input.sheet-tab { +input.tab { opacity: 0; display: none; } /* CONFIGURATION */ -input.sheet-config-notice:checked ~ button[name="act_tab_config"] { +input.config-notice:checked ~ button[name="act_tab_config"] { background-color:rgba(0, 139, 139, 1); } -span.sheet-configitem { +span.configitem { display: flex; justify-content: flex-end; } -div.sheet-changelog { +div.changelog { overflow-y: auto; overflow-x: hidden; max-height: 780px; } -div.sheet-changelog::-webkit-scrollbar { +div.changelog::-webkit-scrollbar { width: 12px; } -div.sheet-changelog::-webkit-scrollbar-track { +div.changelog::-webkit-scrollbar-track { border-radius: 5px; background: darkgrey; } -div.sheet-changelog::-webkit-scrollbar-thumb { +div.changelog::-webkit-scrollbar-thumb { border-radius: 5px; background: gray; } -div.sheet-changelog::-webkit-scrollbar-thumb:hover { +div.changelog::-webkit-scrollbar-thumb:hover { background: gray; } -.sheet-config select { +.config select { width: 62px; display: flex; flex-wrap: wrap; @@ -1516,7 +1904,7 @@ div.sheet-changelog::-webkit-scrollbar-thumb:hover { /* CUSTOM CHECKBOXES FOR ALIEN RPG */ -input.sheet-numbered-box { +.ui-dialog .charsheet input.numbered-box { width: 16px; height: 16px; position: relative; @@ -1528,64 +1916,88 @@ input.sheet-numbered-box { opacity: 0; } -input.sheet-numbered-box + span { - -margin-left: -16px; -} +/* input.numbered-box + span { + margin-left: -16px; +} */ -input.sheet-numbered-box + span::before { +input.numbered-box + span::before { content: attr(title); color: #dcdcdc; border: solid 1px #f5f5f5; text-align: center; display: inline-block; - background: #f5f5f5; - + background: #f5f5f5; width: 16px; height: 16px; font-size: 10px; font-weight: bold; margin-left: -15px; margin-right: 2px; - padding: 0px 0px 0px 0px; + margin-bottom: 3px; + padding: 1px 0px 0px 0px; line-height: 16px; box-shadow: 0px 0px 5px #008b8b; + user-select: none; } -input.sheet-condition + span::before { +input.numbered-box + label { + content: attr(title); + color: #dcdcdc; + border: solid 1px #f5f5f5; + text-align: center; + display: inline-block; + background: #f5f5f5; + width: 16px; + height: 16px; + font-size: 10px; + font-weight: bold; + margin-right: 2px; + margin-bottom: 3px; + padding: 1px 0px 0px 0px; + line-height: 16px; + box-shadow: 0px 0px 5px #008b8b; + user-select: none; + cursor: pointer; +} + +input.condition + label { margin-right: 10px; /* Indent the conditions on the right-hand side */ } -input[type=radio].sheet-red-radio { +input[type=radio].red-radio { width: 20px; height: 20px; top: 3px; left: 6px; } -input[type=radio].sheet-clear-radio { +input[type=radio].clear-radio { width: 20px; height: 20px; top: 3px; left: 6px; } -input.sheet-numbered-box:checked + span::before { +input.numbered-box:checked + span::before, +input.numbered-box:checked + label { color: #ffffff; background: #cc0000; border: solid 1px #cc0000; box-shadow: 0px 0px 10px #b30000; } -input.sheet-red-radio:checked + span::before { +input.red-radio:checked + span::before, +input.red-radio:checked + label { color: #ffffff; background: #cc0000; border: solid 1px #cc0000; box-shadow: 0px 0px 10px #b30000; } -input.sheet-blue-box { +input.blue-box { width: 40px; } -input.sheet-blue-box + span::before { +input.blue-box + span::before, +input.blue-box + label { width: 40px; margin-left: -40px; color: #696969; @@ -1593,35 +2005,39 @@ input.sheet-blue-box + span::before { border: solid 1px #09c2c2; box-shadow: 0px 0px 5px #008b8b; } -input.sheet-blue-box:checked + span::before { +input.blue-box:checked + span::before, +input.blue-box:checked + label { color: #696969; background: transparent; border: solid 1px #bfbfbf; box-shadow: unset; } -input.sheet-grey-box:checked + span::before { +input.grey-box:checked + span::before, +input.grey-box:checked + label { color: #ffffff; background: #808080; border: solid 1px #808080; box-shadow: 0px 0px 10px #008b8b; } -input.sheet-green-box:checked + span::before { +input.green-box:checked + span::before, +input.green-box:checked + label { color: #000000; background: #7cfc00; border: solid 1px #7cfc00; box-shadow: 0px 0px 10px #008000; } -input.sheet-gold-box:checked + span::before { +input.gold-box:checked + span::before, +input.gold-box:checked + label { color: #000000; background: #ffd700; border: solid 1px #ffd700; box-shadow: 0px 0px 10px #ffd700; } -input.sheet-letter-box { +input.letter-box { width: 28px; height: 14px; position: relative; @@ -1633,7 +2049,7 @@ input.sheet-letter-box { opacity: 0; } -input.sheet-letter-box + span::before { +input.letter-box + span::before { content: attr(title); color: #dcdcdc; border: solid 1px #f5f5f5; @@ -1651,212 +2067,452 @@ input.sheet-letter-box + span::before { box-shadow: 0px 0px 5px #008b8b; } -input.sheet-letter-box:checked + span::before { +input.letter-box:checked + span::before { color: #ffffff; background: #808080; border: solid 1px #808080; box-shadow: 0px 0px 10px #008b8b; } -.sheet-darker-rounded-box { +.darker-rounded-box, +label.darker-rounded-box { display: flex; flex-direction: row; + justify-content: center; width: fit-content; - background-color: rgb(185, 218, 193); + /* background-color: rgb(185, 218, 193); */ background-color: #008b8b; color: rgb(204, 217, 207); border-radius: 6px; + clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); border: 0; - margin: 2px 3px 2px 3px; + margin: 2px 0px 2px 3px; + align-items: baseline; + line-height: 16px; + height: 16px; + line-height: 1.2rem; + height: 1.2rem; + max-height: 1.2rem; + padding: 0; + height: auto; + padding: 2px 3px 1px 2px; + margin: 2px 0px 2px 3px; } -.sheet-darker-rounded-box span, -.sheet-darker-rounded-box select, -.sheet-darker-rounded-box select option { +.darker-rounded-box :is(span,select,label), +.darker-rounded-box label { + background-color: transparent; + margin-bottom: 1px; + margin: 0px 0px 0px 0px; + font-family: 'Roboto'; color: rgb(204, 217, 207); - background-color: #008b8b; + /* background-color: #008b8b; */ border: 0; border-radius: 6px; + margin-bottom: 1px; + padding: 0 0; + font-weight: normal; + -font-family: 'Roboto'; + font-size: 0.9rem; + -height: 20px; + align-items: center; + align-content: center; + align-self: center; + text-align: center; } -.sheet-darker-rounded-box span { - margin: 1px 0px 0px 5px; -} -.sheet-darker-rounded-box elect { - margin: 1px 5px 0px 0px; +.darker-rounded-box select option { + color: rgb(204, 217, 207); + background-color: #008b8b; + } +.darker-rounded-box select:focus, +.darker-rounded-box select option:focus, +.darker-rounded-box select:active, +.darker-rounded-box select option:active { + outline: none; + -box-shadow: 0px 0px 10px #008b8b; +} -/* CHARACTER HEALTH */ -.sheet-health, .sheet-stress { +/* CHARACTER HEALTH & STRESS */ + +.health, .stress { min-width: 315px; padding-left: 2px; + user-select: none; +} +.health .vertical-adjust-one, +.stress .vertical-adjust-one { + margin-bottom: -5px; +} +.stress { + padding-bottom: 0; } -.sheet-health input[type="checkbox"].sheet-numbered-box { +.health input[type="checkbox"].numbered-box { top: 0px; left: 3px; -margin-left: 4px; } -.sheet-health .sheet-w60 input { - -margin-left: 5px; -} -.sheet-health-bar.sheet-health-calculated { +/* .health .w60 input { + margin-left: 5px; +} */ +/* .health-bar.health-calculated { text-align: left; padding-left: 5px; -} +} */ -input.sheet-config-healthcalculation:checked ~.sheet-health-calculated, -input.sheet-config-healthcalculation:checked + .sheet-tough, -input.sheet-config-healthcalculation:not(:checked) ~.sheet-health-manual { - display: block; +input.config-healthcalculation:checked ~.health-calculated, +input.config-healthcalculation:checked + .tough, +input.config-healthcalculation:not(:checked) ~.health-manual { + display: inline-block; } -input.sheet-config-healthcalculation:not(:checked) ~.sheet-health-calculated, -input.sheet-config-healthcalculation:not(:checked) + .sheet-tough, -input.sheet-config-healthcalculation:checked ~ .sheet-health-manual { +input.config-healthcalculation:not(:checked) ~.health-calculated, +input.config-healthcalculation:not(:checked) + .tough, +input.config-healthcalculation:checked ~ .health-manual { display: none; } - -input[name="attr_health_calc"][value="1"] ~ input[name="attr_health_1"] ~ input[type="checkbox"].sheet-numbered-box, -input[name="attr_health_calc"][value="2"] ~ input[name="attr_health_2"] ~ input[type="checkbox"].sheet-numbered-box, -input[name="attr_health_calc"][value="3"] ~ input[name="attr_health_3"] ~ input[type="checkbox"].sheet-numbered-box, -input[name="attr_health_calc"][value="4"] ~ input[name="attr_health_4"] ~ input[type="checkbox"].sheet-numbered-box, -input[name="attr_health_calc"][value="5"] ~ input[name="attr_health_5"] ~ input[type="checkbox"].sheet-numbered-box, -input[name="attr_health_calc"][value="6"] ~ input[name="attr_health_6"] ~ input[type="checkbox"].sheet-numbered-box, -input[name="attr_health_calc"][value="7"] ~ input[name="attr_health_7"] ~ input[type="checkbox"].sheet-numbered-box, -input[name="attr_health_calc"][value="8"] ~ input[name="attr_health_8"] ~ input[type="checkbox"].sheet-numbered-box, -input[name="attr_health_calc"][value="9"] ~ input[name="attr_health_9"] ~ input[type="checkbox"].sheet-numbered-box, -input[name="attr_health_calc"][value="10"] ~ input[name="attr_health_10"] ~ input[type="checkbox"].sheet-numbered-box { - display: none; -} -input[name="attr_health_calc"][value="1"] ~ input[name="attr_health_1"] ~ input[type="checkbox"] + span:before, -input[name="attr_health_calc"][value="2"] ~ input[name="attr_health_2"] ~ input[type="checkbox"] + span:before, -input[name="attr_health_calc"][value="3"] ~ input[name="attr_health_3"] ~ input[type="checkbox"] + span:before, -input[name="attr_health_calc"][value="4"] ~ input[name="attr_health_4"] ~ input[type="checkbox"] + span:before, -input[name="attr_health_calc"][value="5"] ~ input[name="attr_health_5"] ~ input[type="checkbox"] + span:before, -input[name="attr_health_calc"][value="6"] ~ input[name="attr_health_6"] ~ input[type="checkbox"] + span:before, -input[name="attr_health_calc"][value="7"] ~ input[name="attr_health_7"] ~ input[type="checkbox"] + span:before, -input[name="attr_health_calc"][value="8"] ~ input[name="attr_health_8"] ~ input[type="checkbox"] + span:before, -input[name="attr_health_calc"][value="9"] ~ input[name="attr_health_9"] ~ input[type="checkbox"] + span:before, -input[name="attr_health_calc"][value="10"] ~ input[name="attr_health_10"] ~ input[type="checkbox"] + span:before { - -display: none; - -display: inline-block; - content: ""; - width: auto; - border: unset; - box-shadow: unset; - background-color: unset; -} - - -/* SHIPDAMAGE */ -/* Only show radios up to the max value */ -input[name="attr_shipdamage_max"][value="0"] ~ div .sheet-shipdamage:nth-of-type(1n+3), -input[name="attr_shipdamage_max"][value="0"] ~ div .sheet-shipdamage:nth-of-type(1n+3) + span, -input[name="attr_shipdamage_max"][value="1"] ~ div .sheet-shipdamage:nth-of-type(1n+4), -input[name="attr_shipdamage_max"][value="1"] ~ div .sheet-shipdamage:nth-of-type(1n+4) + span, -input[name="attr_shipdamage_max"][value="2"] ~ div .sheet-shipdamage:nth-of-type(1n+5), -input[name="attr_shipdamage_max"][value="2"] ~ div .sheet-shipdamage:nth-of-type(1n+5) + span, -input[name="attr_shipdamage_max"][value="3"] ~ div .sheet-shipdamage:nth-of-type(1n+6), -input[name="attr_shipdamage_max"][value="3"] ~ div .sheet-shipdamage:nth-of-type(1n+6) + span, -input[name="attr_shipdamage_max"][value="4"] ~ div .sheet-shipdamage:nth-of-type(1n+7), -input[name="attr_shipdamage_max"][value="4"] ~ div .sheet-shipdamage:nth-of-type(1n+7) + span, -input[name="attr_shipdamage_max"][value="5"] ~ div .sheet-shipdamage:nth-of-type(1n+8), -input[name="attr_shipdamage_max"][value="5"] ~ div .sheet-shipdamage:nth-of-type(1n+8) + span, -input[name="attr_shipdamage_max"][value="6"] ~ div .sheet-shipdamage:nth-of-type(1n+9), -input[name="attr_shipdamage_max"][value="6"] ~ div .sheet-shipdamage:nth-of-type(1n+9) + span, -input[name="attr_shipdamage_max"][value="7"] ~ div .sheet-shipdamage:nth-of-type(1n+10), -input[name="attr_shipdamage_max"][value="7"] ~ div .sheet-shipdamage:nth-of-type(1n+10) + span, -input[name="attr_shipdamage_max"][value="8"] ~ div .sheet-shipdamage:nth-of-type(1n+11), -input[name="attr_shipdamage_max"][value="8"] ~ div .sheet-shipdamage:nth-of-type(1n+11) + span, -input[name="attr_shipdamage_max"][value="9"] ~ div .sheet-shipdamage:nth-of-type(1n+12), -input[name="attr_shipdamage_max"][value="9"] ~ div .sheet-shipdamage:nth-of-type(1n+12) + span, -input[name="attr_shipdamage_max"][value="10"] ~ div .sheet-shipdamage:nth-of-type(1n+13), -input[name="attr_shipdamage_max"][value="10"] ~ div .sheet-shipdamage:nth-of-type(1n+13) + span, -input[name="attr_shipdamage_max"][value="11"] ~ div .sheet-shipdamage:nth-of-type(1n+14), -input[name="attr_shipdamage_max"][value="11"] ~ div .sheet-shipdamage:nth-of-type(1n+14) + span, -input[name="attr_shipdamage_max"][value="12"] ~ div .sheet-shipdamage:nth-of-type(1n+15), -input[name="attr_shipdamage_max"][value="12"] ~ div .sheet-shipdamage:nth-of-type(1n+15) + span, -input[name="attr_shipdamage_max"][value="13"] ~ div .sheet-shipdamage:nth-of-type(1n+16), -input[name="attr_shipdamage_max"][value="13"] ~ div .sheet-shipdamage:nth-of-type(1n+16) + span, -input[name="attr_shipdamage_max"][value="14"] ~ div .sheet-shipdamage:nth-of-type(1n+17), -input[name="attr_shipdamage_max"][value="14"] ~ div .sheet-shipdamage:nth-of-type(1n+17) + span, -input[name="attr_shipdamage_max"][value="15"] ~ div .sheet-shipdamage:nth-of-type(1n+18), -input[name="attr_shipdamage_max"][value="15"] ~ div .sheet-shipdamage:nth-of-type(1n+18) + span, -input[name="attr_shipdamage_max"][value="16"] ~ div .sheet-shipdamage:nth-of-type(1n+19), -input[name="attr_shipdamage_max"][value="16"] ~ div .sheet-shipdamage:nth-of-type(1n+19) + span, -input[name="attr_shipdamage_max"][value="17"] ~ div .sheet-shipdamage:nth-of-type(1n+20), -input[name="attr_shipdamage_max"][value="17"] ~ div .sheet-shipdamage:nth-of-type(1n+20) + span, -input[name="attr_shipdamage_max"][value="18"] ~ div .sheet-shipdamage:nth-of-type(1n+21), -input[name="attr_shipdamage_max"][value="18"] ~ div .sheet-shipdamage:nth-of-type(1n+21) + span, -input[name="attr_shipdamage_max"][value="19"] ~ div .sheet-shipdamage:nth-of-type(1n+22), -input[name="attr_shipdamage_max"][value="19"] ~ div .sheet-shipdamage:nth-of-type(1n+22) + span, -input[name="attr_shipdamage_max"][value="20"] ~ div .sheet-shipdamage:nth-of-type(1n+23), -input[name="attr_shipdamage_max"][value="20"] ~ div .sheet-shipdamage:nth-of-type(1n+23) + span { - display: none; -} - -input[name="attr_shipdamage"][value="0"] ~ .sheet-shipdamage + span::before, -input.sheet-shipdamage1:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage2:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage3:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage4:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage5:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage6:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage7:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage8:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage9:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage10:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage11:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage12:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage13:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage14:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage15:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage16:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage17:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage18:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage19:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before, -input.sheet-shipdamage20:checked + .sheet-shipdamage ~ span:nth-of-type(1n+2)::before { - color: #ffffff; - background: #808080; - border: solid 1px #808080; - box-shadow: 0px 0px 10px #008b8b; -} - -input.sheet-shipdamage + span:before { +input.health-calculated[type="checkbox"]:checked + label, +input.health-manual[type="checkbox"]:checked + label { color: #ffffff; background: #cc0000; border: solid 1px #cc0000; box-shadow: 0px 0px 10px #b30000; } -.sheet-hullpoints-missing { + +input.attr-health-calculated[value="1"] ~ input.health-calculated[name="attr_health_1"] ~ input[type="checkbox"].numbered-box, +input.attr-health-calculated[value="2"] ~ input.health-calculated[name="attr_health_2"] ~ input[type="checkbox"].numbered-box, +input.attr-health-calculated[value="3"] ~ input.health-calculated[name="attr_health_3"] ~ input[type="checkbox"].numbered-box, +input.attr-health-calculated[value="4"] ~ input.health-calculated[name="attr_health_4"] ~ input[type="checkbox"].numbered-box, +input.attr-health-calculated[value="5"] ~ input.health-calculated[name="attr_health_5"] ~ input[type="checkbox"].numbered-box, +input.attr-health-calculated[value="6"] ~ input.health-calculated[name="attr_health_6"] ~ input[type="checkbox"].numbered-box, +input.attr-health-calculated[value="7"] ~ input.health-calculated[name="attr_health_7"] ~ input[type="checkbox"].numbered-box, +input.attr-health-calculated[value="8"] ~ input.health-calculated[name="attr_health_8"] ~ input[type="checkbox"].numbered-box, +input.attr-health-calculated[value="9"] ~ input.health-calculated[name="attr_health_9"] ~ input[type="checkbox"].numbered-box, +input.attr-health-calculated[value="10"] ~ input.health-calculated[name="attr_health_10"] ~ input[type="checkbox"].numbered-box, +input.attr-health-calculated[value="1"] ~ input.health-calculated[name="attr_health_1"] + label.health-calculated ~ label.health-calculated, +input.attr-health-calculated[value="2"] ~ input.health-calculated[name="attr_health_2"] + label.health-calculated ~ label.health-calculated, +input.attr-health-calculated[value="3"] ~ input.health-calculated[name="attr_health_3"] + label.health-calculated ~ label.health-calculated, +input.attr-health-calculated[value="4"] ~ input.health-calculated[name="attr_health_4"] + label.health-calculated ~ label.health-calculated, +input.attr-health-calculated[value="5"] ~ input.health-calculated[name="attr_health_5"] + label.health-calculated ~ label.health-calculated, +input.attr-health-calculated[value="6"] ~ input.health-calculated[name="attr_health_6"] + label.health-calculated ~ label.health-calculated, +input.attr-health-calculated[value="7"] ~ input.health-calculated[name="attr_health_7"] + label.health-calculated ~ label.health-calculated, +input.attr-health-calculated[value="8"] ~ input.health-calculated[name="attr_health_8"] + label.health-calculated ~ label.health-calculated, +input.attr-health-calculated[value="9"] ~ input.health-calculated[name="attr_health_9"] + label.health-calculated ~ label.health-calculated, +input.attr-health-calculated[value="10"] ~ input.health-calculated[name="attr_health_10"] + label.health-calculated ~ label.health-calculated { + -display: none; + opacity: 0; + pointer-events: none; + cursor: pointer; +} +input.attr-health-manual[value="1"] ~ input.health-manual[name="attr_health_1"] ~ input[type="checkbox"].numbered-box, +input.attr-health-manual[value="2"] ~ input.health-manual[name="attr_health_2"] ~ input[type="checkbox"].numbered-box, +input.attr-health-manual[value="3"] ~ input.health-manual[name="attr_health_3"] ~ input[type="checkbox"].numbered-box, +input.attr-health-manual[value="4"] ~ input.health-manual[name="attr_health_4"] ~ input[type="checkbox"].numbered-box, +input.attr-health-manual[value="5"] ~ input.health-manual[name="attr_health_5"] ~ input[type="checkbox"].numbered-box, +input.attr-health-manual[value="6"] ~ input.health-manual[name="attr_health_6"] ~ input[type="checkbox"].numbered-box, +input.attr-health-manual[value="7"] ~ input.health-manual[name="attr_health_7"] ~ input[type="checkbox"].numbered-box, +input.attr-health-manual[value="8"] ~ input.health-manual[name="attr_health_8"] ~ input[type="checkbox"].numbered-box, +input.attr-health-manual[value="9"] ~ input.health-manual[name="attr_health_9"] ~ input[type="checkbox"].numbered-box, +input.attr-health-manual[value="10"] ~ input.health-manual[name="attr_health_10"] ~ input[type="checkbox"].numbered-box, +input.attr-health-manual[value="1"] ~ input.health-manual[name="attr_health_1"] + label.health-manual ~ label.health-manual, +input.attr-health-manual[value="2"] ~ input.health-manual[name="attr_health_2"] + label.health-manual ~ label.health-manual, +input.attr-health-manual[value="3"] ~ input.health-manual[name="attr_health_3"] + label.health-manual ~ label.health-manual, +input.attr-health-manual[value="4"] ~ input.health-manual[name="attr_health_4"] + label.health-manual ~ label.health-manual, +input.attr-health-manual[value="5"] ~ input.health-manual[name="attr_health_5"] + label.health-manual ~ label.health-manual, +input.attr-health-manual[value="6"] ~ input.health-manual[name="attr_health_6"] + label.health-manual ~ label.health-manual, +input.attr-health-manual[value="7"] ~ input.health-manual[name="attr_health_7"] + label.health-manual ~ label.health-manual, +input.attr-health-manual[value="8"] ~ input.health-manual[name="attr_health_8"] + label.health-manual ~ label.health-manual, +input.attr-health-manual[value="9"] ~ input.health-manual[name="attr_health_9"] + label.health-manual ~ label.health-manual, +input.attr-health-manual[value="10"] ~ input.health-manual[name="attr_health_10"] + label.health-manual ~ label.health-manual { + -display: none; + opacity: 0; + pointer-events: none; + cursor: pointer; +} +/* input.attr-health-calculated[value="1"] ~ input.health-calculated[name="attr_health_1"] ~ input[type="checkbox"] + span:before, +input.attr-health-calculated[value="2"] ~ input.health-calculated[name="attr_health_2"] ~ input[type="checkbox"] + span:before, +input.attr-health-calculated[value="3"] ~ input.health-calculated[name="attr_health_3"] ~ input[type="checkbox"] + span:before, +input.attr-health-calculated[value="4"] ~ input.health-calculated[name="attr_health_4"] ~ input[type="checkbox"] + span:before, +input.attr-health-calculated[value="5"] ~ input.health-calculated[name="attr_health_5"] ~ input[type="checkbox"] + span:before, +input.attr-health-calculated[value="6"] ~ input.health-calculated[name="attr_health_6"] ~ input[type="checkbox"] + span:before, +input.attr-health-calculated[value="7"] ~ input.health-calculated[name="attr_health_7"] ~ input[type="checkbox"] + span:before, +input.attr-health-calculated[value="8"] ~ input.health-calculated[name="attr_health_8"] ~ input[type="checkbox"] + span:before, +input.attr-health-calculated[value="9"] ~ input.health-calculated[name="attr_health_9"] ~ input[type="checkbox"] + span:before, +input.attr-health-calculated[value="10"] ~ input.health-calculated[name="attr_health_10"] ~ input[type="checkbox"] + span:before { + -display: none; + -display: inline-block; + -content: ""; + opacity: 0; + -width: auto; + border: unset; + box-shadow: unset; + background-color: unset; +} */ + +/* CHARACTER OPTIONS */ +.small-box { + padding: 0; +} +.small-box div.smallbox-option-input, +.small-option-box div.smallbox-option-input { + margin-top: -4px; +} +div.small-option-box { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + justify-items: center; + justify-self: center; + align-items: center; + align-content: center; + align-self: center; +} +div.small-box div.more-curves { + line-height: 20px; +} +div.small-option-box div.more-curves { + line-height: 10px; + margin-bottom: 5px; +} +div.small-option-box label, +div.small-option-box div.smallbox-option-input span:before { + -display: flex; + height: 14px; + width: 14px; + font-size: 10px; + align-content: center; + justify-content: center; +} +div.small-box-option.steelnerves .smallbox-option-input { + margin-top: -8px; +} + +/* CHARACTER RADIATION */ +div.span-radiation { + user-select: none; +} +div.span-radiation span.permanent, +div.span-radiation label.permanent { + font-size: 13px; + font-weight: normal; + font-family: 'Pictos three'; + width: 16px; + height: 16px; + display: inline-flex; + align-items: center; + justify-content: center; + margin: 0px 2px 1px 5px; + padding: 0 0 1px 0; + z-index: 5; + line-height: normal; + box-sizing: content-box; + vertical-align: middle; + border-radius: 0; + color: #000000; + background: #7cfc00; + border: solid 1px #7cfc00; + box-shadow: 0px 0px 10px #008000; + cursor: default; +} +div.span-radiation label.transient { + margin-left: 5px; + margin-bottom: 2px; + cursor: pointer; + user-select: none; +} +div.span-radiation button.button-radiation { + display: inline-block; + width: 14px; + height: 14px; + line-height: 14px; + text-align: center; + font-family: 'Pictos'; + text-transform: none; +} +div.span-radiation button.button-radiation.radiation-damage { + font-family: 'Pictos three'; + margin: 0 0 0 3px; +} +div.radiation .permanent { + display: inline-block; +} +div.radiation .transient { + display: none; +} +input[name="attr_radiation_perm"] ~ .permanent, +input[name="attr_radiation_perm"][value="0"] ~ .permanent, +input[name="attr_radiation_perm"][value="1"] ~ span.p1 ~ .permanent, +input[name="attr_radiation_perm"][value="2"] ~ span.p2 ~ .permanent, +input[name="attr_radiation_perm"][value="3"] ~ span.p3 ~ .permanent, +input[name="attr_radiation_perm"][value="4"] ~ span.p4 ~ .permanent, +input[name="attr_radiation_perm"][value="5"] ~ span.p5 ~ .permanent, +input[name="attr_radiation_perm"][value="6"] ~ span.p6 ~ .permanent, +input[name="attr_radiation_perm"][value="7"] ~ span.p7 ~ .permanent, +input[name="attr_radiation_perm"][value="8"] ~ span.p8 ~ .permanent, +input[name="attr_radiation_perm"][value="9"] ~ span.p9 ~ .permanent { + display: none; +} +input[name="attr_radiation_perm"][value="10"] ~ .permanent { display: inline-block; } + +input[name="attr_radiation_perm"][value="0"] ~ .transient {display: inline-block; } +input[name="attr_radiation_perm"][value="1"] ~ label.r1 ~ .transient { display: inline-block; } +input[name="attr_radiation_perm"][value="2"] ~ label.r2 ~ .transient { display: inline-block; } +input[name="attr_radiation_perm"][value="3"] ~ label.r3 ~ .transient { display: inline-block; } +input[name="attr_radiation_perm"][value="4"] ~ label.r4 ~ .transient { display: inline-block; } +input[name="attr_radiation_perm"][value="5"] ~ label.r5 ~ .transient { display: inline-block; } +input[name="attr_radiation_perm"][value="6"] ~ label.r6 ~ .transient { display: inline-block; } +input[name="attr_radiation_perm"][value="7"] ~ label.r7 ~ .transient { display: inline-block; } +input[name="attr_radiation_perm"][value="8"] ~ label.r8 ~ .transient { display: inline-block; } +input[name="attr_radiation_perm"][value="9"] ~ label.r9 ~ .transient { display: inline-block; } +input[name="attr_radiation_perm"][value="10"] ~ .transient { display: none; } + +/* RELATIONSHIPS */ + +div.relation-rows { + width: 100%; + height: 100%; + display: inline-flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + align-content: center; +} +div.relation-rows span.relationship-title { + margin-right: 5px; + width: calc(100% - 85% - 12px); + float: left; + margin-left: 5px; +} +div.relation-rows input.relationship-input{ + width: 85%; +} +div.relation-rows hr { + width: 100%; +} + +/* CONDITIONS */ +div.condition-rows { + display: inline-flex; + flex-direction: column; + align-items: stretch; + width: 100%; + height: 100%; + justify-content: space-evenly; +} +div.condition-rows div { width: 100%; } + +/* SHIPDAMAGE */ + +div.ship-damage-row label.numbered-box { + margin-left: 2px; + cursor: pointer; +} +div.ship-damage-row label.clear-button { +/* width: 40px; + margin-left: -40px; + color: #696969; + background: #a0dfdf; + border: solid 1px #09c2c2; + box-shadow: 0px 0px 5px #008b8b; */ +} + +input.shipdamage + label { + color: #ffffff; + background: #cc0000; + border: solid 1px #cc0000; + box-shadow: 0px 0px 5px #b30000; + margin-right: calc((100% - 210px) / 10); +} +.hullpoints-missing { display: none; } -input[name="attr_shipdamage_max"][value="0"] ~ .sheet-hullpoints-missing { +input[name="attr_shipdamage_max"][value="0"] ~ .hullpoints-missing { display: inline-flex !important; justify-self: center; font-style: italic; } -.sheet-ship-damage-row { +.ship-damage-row { padding-top: 0; } +/* Only show radios up to the max value */ +input[name="attr_shipdamage_max"][value="0"] ~ label.shipdamage0 ~ label, +input[name="attr_shipdamage_max"][value="1"] ~ label.shipdamage1 ~ label, +input[name="attr_shipdamage_max"][value="2"] ~ label.shipdamage2 ~ label, +input[name="attr_shipdamage_max"][value="3"] ~ label.shipdamage3 ~ label, +input[name="attr_shipdamage_max"][value="4"] ~ label.shipdamage4 ~ label, +input[name="attr_shipdamage_max"][value="5"] ~ label.shipdamage5 ~ label, +input[name="attr_shipdamage_max"][value="6"] ~ label.shipdamage6 ~ label, +input[name="attr_shipdamage_max"][value="7"] ~ label.shipdamage7 ~ label, +input[name="attr_shipdamage_max"][value="8"] ~ label.shipdamage8 ~ label, +input[name="attr_shipdamage_max"][value="9"] ~ label.shipdamage9 ~ label, +input[name="attr_shipdamage_max"][value="10"] ~ label.shipdamage10 ~ label, +input[name="attr_shipdamage_max"][value="11"] ~ label.shipdamage11 ~ label, +input[name="attr_shipdamage_max"][value="12"] ~ label.shipdamage12 ~ label, +input[name="attr_shipdamage_max"][value="13"] ~ label.shipdamage13 ~ label, +input[name="attr_shipdamage_max"][value="14"] ~ label.shipdamage14 ~ label, +input[name="attr_shipdamage_max"][value="15"] ~ label.shipdamage15 ~ label, +input[name="attr_shipdamage_max"][value="16"] ~ label.shipdamage16 ~ label, +input[name="attr_shipdamage_max"][value="17"] ~ label.shipdamage17 ~ label, +input[name="attr_shipdamage_max"][value="18"] ~ label.shipdamage18 ~ label, +input[name="attr_shipdamage_max"][value="19"] ~ label.shipdamage19 ~ label, +input[name="attr_shipdamage_max"][value="20"] ~ label.shipdamage20 ~ label { + display: none; +} + +/**/ input[name="attr_shipdamage"][value="0"] ~ label.shipdamage, +input.shipdamage0:checked ~ label.shipdamage , +input.shipdamage1:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage2:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage3:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage4:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage5:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage6:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage7:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage8:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage9:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage10:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage11:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage12:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage13:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage14:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage15:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage16:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage17:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage18:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage19:checked + label.shipdamage ~ label.shipdamage , +input.shipdamage20:checked + label.shipdamage ~ label.shipdamage { + color: #ffffff; + background: #808080; + border: solid 1px #808080; + box-shadow: 0px 0px 5px #008b8b; +} + + /* XENO DAMAGE */ -.sheet-xenohealth label.sheet-dark-teal-header { +.xenohealth label.dark-teal-header { padding-right: 0; margin-bottom: 0; margin-top: 2px; } -.sheet-xeno-health-row { +.xeno-health-row { margin-top: -10px; display: flex; align-self: center; } -.sheet-xeno-health-boxes { - margin-left: 20px; - margin-right: 10px; +.xeno-health-boxes { + margin-left: 17px; + margin-right: 0; +} +.ui-dialog .charsheet .xeno .xenohealth input.low-visibility-number { + color: #555; + margin-left: 3px; } -.sheet-xeno-health-boxes label { +div.xeno div.xeno-health-boxes label.xenohealth { color: #000000; background: #b4f870; border: solid 1px #a5e664; @@ -1867,15 +2523,29 @@ input[name="attr_shipdamage_max"][value="0"] ~ .sheet-hullpoints-missing { height: 16px; font-size: 10px; font-weight: bold; - margin-right: 7px; + margin-right: 5px; + margin-left: 5px; padding: 0px 0px 0px 0px; line-height: 16px; margin-top: 5px; margin-bottom: 1px; cursor: pointer; } +div.xeno div.xeno-health-boxes span.xenohealth-separator { + opacity: 0; + user-select: none; + cursor: default; + width: 18px; /* Added 2px to cover for missing border */ + height: 16px; + margin-right: 5px; + margin-left: 5px; + padding: 0px 0px 0px 0px; + line-height: 16px; + margin-top: 5px; + margin-bottom: 1px; +} -input.sheet-xenohealth-box:checked + label.sheet-xenohealth { +input.xenohealth-box:checked + label.xenohealth { color: #000000; background: #78e60a; border: solid 1px #7eeb11; @@ -1883,88 +2553,91 @@ input.sheet-xenohealth-box:checked + label.sheet-xenohealth { } /* 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 { +input[name="attr_health_max"][value="0"] ~ label.xenohealth0 ~ .xenohealth, +input[name="attr_health_max"][value="1"] ~ label.xenohealth1 ~ .xenohealth, +input[name="attr_health_max"][value="2"] ~ label.xenohealth2 ~ .xenohealth, +input[name="attr_health_max"][value="3"] ~ label.xenohealth3 ~ .xenohealth, +input[name="attr_health_max"][value="4"] ~ label.xenohealth4 ~ .xenohealth, +input[name="attr_health_max"][value="5"] ~ label.xenohealth5 ~ .xenohealth, +input[name="attr_health_max"][value="6"] ~ label.xenohealth6 ~ .xenohealth, +input[name="attr_health_max"][value="7"] ~ label.xenohealth7 ~ .xenohealth, +input[name="attr_health_max"][value="8"] ~ label.xenohealth8 ~ .xenohealth, +input[name="attr_health_max"][value="9"] ~ label.xenohealth9 ~ .xenohealth, +input[name="attr_health_max"][value="10"] ~ label.xenohealth10 ~ .xenohealth, +input[name="attr_health_max"][value="11"] ~ label.xenohealth11 ~ .xenohealth, +input[name="attr_health_max"][value="12"] ~ label.xenohealth12 ~ .xenohealth, +input[name="attr_health_max"][value="13"] ~ label.xenohealth13 ~ .xenohealth, +input[name="attr_health_max"][value="14"] ~ label.xenohealth14 ~ .xenohealth, +input[name="attr_health_max"][value="15"] ~ label.xenohealth15 ~ .xenohealth, +input[name="attr_health_max"][value="16"] ~ label.xenohealth16 ~ .xenohealth, +input[name="attr_health_max"][value="17"] ~ label.xenohealth17 ~ .xenohealth, +input[name="attr_health_max"][value="18"] ~ label.xenohealth18 ~ .xenohealth, +input[name="attr_health_max"][value="19"] ~ label.xenohealth19 ~ .xenohealth, +input[name="attr_health_max"][value="20"] ~ label.xenohealth20 ~ .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 { +input.xenohealth0:checked + label.xenohealth ~ .xenohealth, +input.xenohealth1:checked + label.xenohealth ~ .xenohealth, +input.xenohealth2:checked + label.xenohealth ~ .xenohealth, +input.xenohealth3:checked + label.xenohealth ~ .xenohealth, +input.xenohealth4:checked + label.xenohealth ~ .xenohealth, +input.xenohealth5:checked + label.xenohealth ~ .xenohealth, +input.xenohealth6:checked + label.xenohealth ~ .xenohealth, +input.xenohealth7:checked + label.xenohealth ~ .xenohealth, +input.xenohealth8:checked + label.xenohealth ~ .xenohealth, +input.xenohealth9:checked + label.xenohealth ~ .xenohealth, +input.xenohealth10:checked + label.xenohealth ~ .xenohealth, +input.xenohealth11:checked + label.xenohealth ~ .xenohealth, +input.xenohealth12:checked + label.xenohealth ~ .xenohealth, +input.xenohealth13:checked + label.xenohealth ~ .xenohealth, +input.xenohealth14:checked + label.xenohealth ~ .xenohealth, +input.xenohealth15:checked + label.xenohealth ~ .xenohealth, +input.xenohealth16:checked + label.xenohealth ~ .xenohealth, +input.xenohealth17:checked + label.xenohealth ~ .xenohealth, +input.xenohealth18:checked + label.xenohealth ~ .xenohealth, +input.xenohealth19:checked + label.xenohealth ~ .xenohealth, +input.xenohealth20:checked + label.xenohealth ~ .xenohealth { color: #ffffff; background: #808080; border: solid 1px #808080; box-shadow: 0px 0px 10px #008b8b; } -.sheet-xeno .sheet-box-flexlist { +.xeno .box-flexlist { display: flex; flex-direction: column; } -.sheet-xeno .sheet-no-spin-input { +.xeno .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 { +.xeno-speed .flexlist, +.xeno-skills .flexlist { text-align: unset; } -.sheet-xeno-speed .sheet-flexlist input[type="number"], -.sheet-xeno-skills .sheet-flexlist input[type="number"] { +.xeno-speed .flexlist input[type="number"], +.xeno-skills .flexlist input[type="number"] { float: right; } -.sheet-xeno .sheet-roll-buttons { +.xeno .roll-buttons { display: flex; text-align: center; line-height: 1em; grid-gap: 5px; + margin-top: 4px; + position: relative; + left: -75px; } -.sheet-xeno .sheet-roll-buttons label.sheet-xenowhisper { +.xeno .roll-buttons label.xenowhisper { color: #008b8b; font-family: 'Montserrat'; text-transform: uppercase; font-size: 10px; font-weight: bold; - height: 14px; - line-height: 14px; + height: 16px; + line-height: 18px; width: fit-content; margin: 4px -1px 0 0; padding: 2px 3px; @@ -1972,38 +2645,52 @@ input.sheet-xenohealth20:checked + label.sheet-xenohealth ~ .sheet-xenohealth { border: 1px solid #008b8b; border-radius: 5px; background-image: none; - display: inline; text-shadow: none; cursor: pointer; + display: flex; + align-self: flex-end; } -.sheet-xeno .sheet-roll-buttons input[type="checkbox"].sheet-xenowhisper:checked + label.sheet-xenowhisper { +.charsheet div.xeno div.roll-buttons label.button-narrow { + height: 10px; + line-height: 10px; + align-self: flex-end; +} +.xeno .roll-buttons input[type="checkbox"].xenowhisper:checked + label.xenowhisper, +.xeno .roll-buttons input[type="checkbox"].xenomodifierquery:checked + label.xenomodifierquery { 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 { +.charsheet div.xeno div.roll-buttons button[type="roll"].button-alpha, +.charsheet div.xeno div.roll-buttons button[type="roll"].button-beta { width: fit-content; - margin: 4px -1px; + margin: 0; + align-self: flex-end; } -.sheet-xeno .sheet-armor { +.xeno .armor { display: grid; grid-template-columns: 50% 50%; margin-top: 15px; } -.sheet-xeno .sheet-armor button[type="roll"].sheet-button-skill { +.xeno .armor button[type="roll"].button-skill { margin-right: 15px; + margin-top: 3px; + width: 65%; } -.sheet-xeno .sheet-armor button[type="roll"].sheet-button-skill.sheet-button-armorvs { - width: fit-content; +.xeno .armor button[type="roll"].button-skill.button-armorvs { + width: calc(100% - 30px - 45%);; margin-right: 0; } -.sheet-xeno .sheet-armor input[type="text"] { +.xeno .armor button[type="roll"].button-skill.button-armorvs + input { + width: calc(100% - 30px - 50%); +} + +.xeno .armor input[type="text"] { background-color: transparent; width: 70px; color:rgb(0, 139, 139); vertical-align: unset; } -.sheet-xeno-attack-control { +.xeno-attack-control { width: 50%; display: flex; flex-direction: row; @@ -2013,32 +2700,32 @@ input.sheet-xenohealth20:checked + label.sheet-xenohealth ~ .sheet-xenohealth { margin-top: -10px; margin-bottom: -5px; } -.sheet-xeno-attack-control button.sheet-attack-control-label { +.xeno-attack-control button.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 { +.xeno-attack-control button.attack-control-label label { margin: 0; padding: 0 3px; cursor: pointer; } -.sheet-xeno-attack-control button.sheet-attack-control-label:nth-of-type(2) { +.xeno-attack-control button.attack-control-label:nth-of-type(2) { margin-right: 10px; } -.sheet-xeno-attack { +.xeno-attack { display: grid; grid-template-columns: 25px auto 7px 5px; column-gap: 5px; } -.sheet-xeno-attack-number { +.xeno-attack-number { float: left; padding: 0 10px; } -.sheet-xeno-attack-desc { +.xeno-attack-desc { background: transparent; float: left; width: 100%; @@ -2048,36 +2735,35 @@ input.sheet-xenohealth20:checked + label.sheet-xenohealth ~ .sheet-xenohealth { margin-right: 5px; margin-top: 3px; } -.sheet-xeno-attack-name { +.xeno-attack-name { background: transparent; float: left; width: 100%; height: 1.5em; max-width: calc(100% - 72px); min-width: calc(100% - 72px); - -margin-right: 5px; padding: 1px; } -.sheet-button-copy { +.button-copy { float: left; } /* WOOHOO BUTTONS */ -.sheet-config-apirolls:checked ~ div .sheet-roll-rolltemplate, -.sheet-config-apirolls:not(checked) ~ div .sheet-roll-api { +.config-apirolls:checked ~ div .roll-rolltemplate, +.config-apirolls:not(checked) ~ div .roll-api { display: none; } -.sheet-config-apirolls:not(checked) ~ div .sheet-roll-rolltemplate, -.sheet-config-apirolls:checked ~ div .sheet-roll-api { - display: inline-block; +.config-apirolls:not(checked) ~ div .roll-rolltemplate, +.config-apirolls:checked ~ div .roll-api { + display: inline-flex; } -button[type="roll"].sheet-button-alpha:before, button[type="roll"].sheet-button-skill:before, button[type="action"].sheet-action-modifier:before { - content: ""!important; +button[type="roll"].button-alpha:before, button[type="roll"].button-skill:before, button[type="roll"].button-attribute:before, button[type="action"].action-modifier:before { + content: "" !important; display: none; border: none; background-image: none; @@ -2085,77 +2771,139 @@ 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; - width: 60%; +.ui-dialog .charsheet .background-wrap button.vertical-adjust-half { + margin-top: 4px; +} + +label.button-skill, +button.button-skill, +button[type="action"].button-skill, +button[type="roll"].button-skill { + display: flex; + justify-content: center; + align-items: center; + height: 15px; + line-height: 18px; + width: 70%; margin: 4px 1px; background-color: transparent; border: 1px solid rgb(204, 217, 207); /* Teal Varient */ border-radius: 5px; background-image: none; - display: inline; text-shadow: none; } -label.sheet-button-skill:hover, -button.sheet-button-skill:hover, -button[type="roll"].sheet-button-skill:hover { +label.button-skill:hover, +button.button-skill:hover, +button[type="action"].button-skill:hover, +button[type="roll"].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.sheet-button-skill:active, -button[type="roll"].sheet-button-skill:active { +label.button-skill:active, +button.button-skill:active, +button[type="raction"].button-skill:active, +button[type="roll"].button-skill:active { 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-bigger-skill { +.ui-dialog .charsheet .background-wrap div.consumable button.vertical-adjust-one { + margin-top: 5px; +} + +.ui-dialog .charsheet .background-wrap .character button[type="roll"][name="armor"] { + margin-top: 5px; +} + +button[type="roll"].bigger-skill { width: 70%; + margin-top: 3px; +} + +.ui-dialog .charsheet .background-wrap .xeno button.signatureattack { + margin-bottom: 5px; } /* Attack button in weapon box */ -button[type="roll"].sheet-smaller-skill { +button[type="roll"].smaller-skill { width: 16%; border: 1px solid #008b8b; /* Gave it an outline as players were not realising it was a button */ } -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="action"].sheet-button-gamma, -button[type="roll"].sheet-button-gamma { +label.button-alpha, label.button-beta, label.button-gamma, +button[type="roll"].button-alpha, +button[type="roll"].button-beta, +button[type="action"].button-gamma, +button[type="roll"].button-gamma { margin-top: 0px; margin-bottom: 0px; border: 1px solid #008b8b; width: inherit; + display: flex; + justify-content: center; + align-items: center; } -label.sheet-button-alpha, -button[type="roll"].sheet-button-alpha { +label.button-alpha, +button[type="roll"].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 { +label.button-skill:focus, +button.button-skill:focus, +button[type="roll"].button-skill:focus { outline:0; } -input[type="checkbox"].sheet-button-skill:checked label { +input[type="checkbox"].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 { +.attribute-box { + display: flex; + align-content: center; + align-items: center; + justify-content: center; + justify-items: center; + height: -webkit-fill-available; +} +.attribute-strength-box { + position: relative; + top: 5px; + padding-top: 0; + margin-top: -10px; + margin-bottom: -15px; +} +.ui-dialog .charsheet div.attribute-strength-box button { + margin-bottom: 5px; +} +.attribute-empathy-box { + position: relative; + top: -5px; + padding-bottom: 0; + margin-bottom: -15px; + margin-top: -15px; +} +.ui-dialog .charsheet div.attribute-empathy-box button { + margin-top: 5px; +} +.attribute-agility-box { + display: flex; + justify-content: flex-end; + gap: 10px; +} +.attribute-wits-box { + display: flex; + justify-content: flex-start; + gap: 10px; +} +.ui-dialog .charsheet button[type="roll"].attribute-button { background-color: transparent; background-image: none; border: 0; @@ -2165,21 +2913,23 @@ button[type="roll"].sheet-attribute-button { font-family: Graduate, cursive; font-size:16px; font-weight:700; - height:auto; + height:fit-content; letter-spacing:normal; line-height:24px; text-align:center; text-size-adjust:100%; text-transform:uppercase; + line-height: 18px; + padding: 3px 3px 3px 3px; } -button[type="roll"].sheet-attribute-button:before { +.ui-dialog .charsheet button[type="roll"].attribute-button:before { content: ""; } -button[type="roll"].sheet-attribute-button:hover, -button[type="roll"].sheet-attribute-button:focus, -button[type="roll"].sheet-attribute-button:active { +.ui-dialog .charsheet button[type="roll"].attribute-button:hover, +.ui-dialog .charsheet button[type="roll"].attribute-button:focus, +.ui-dialog .charsheet button[type="roll"].attribute-button:active { border: rgb(204, 217, 207); background-color:rgba(113, 142, 135, 1); cursor: pointer; @@ -2406,6 +3156,8 @@ button[type="roll"].sheet-attribute-button:active { height: 35px; width: 35px; background-color: #ffe600; + background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Stress-Between.png?raw=true"); + background-size: 100% 100%; border: none; border-radius: 5px; background-position: center; diff --git a/Alien Roleplaying Game/Alien-Roleplaying-Game.html b/Alien Roleplaying Game/Alien-Roleplaying-Game.html index 8eb965a043..4e65c55a4e 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 @@ + + + @@ -32,14 +35,14 @@
- - - + + + - +
- + @@ -50,10 +53,10 @@
Personal Agenda
-
- - -
+ + + +
  @@ -81,15 +84,15 @@ - - - - - - - - -
+ + + + + + + + +
@@ -98,71 +101,1151 @@ -
-
- -
- - +
+ + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
-
+
+ + + + + -
- - + + + + + + + + + +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ + +
-
- +
+ +
--> + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
-
- +
+ +
--> + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
-
- +
+ +
--> + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ + +
-
- +
+ +
--> + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ + +
-
- +
+ +
--> + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ + +
-
- +
+ +
--> + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+ + +
- -
-   + +
+
+ Modifier Query +
+
+ +
@@ -172,15 +1255,21 @@
-
-   -
- -
+
+
+ Token Initiative +
+
+ +
+
+ + +
Relationships
-
+
Buddy:
@@ -188,28 +1277,72 @@
-
+ +
Roll Buttons
- - - - - + + + + +
- - - - + + + +
+
- - + + + + Base + + + + Stress + + + +
@@ -221,29 +1354,50 @@ Stress Level
- - - - - - - - - - + + + + + + + + + + +
+
+
+ Nerves of Steel +
+
+ +
+
+
+
+
+ + + + + + + + +
+
- - +
@@ -255,105 +1409,127 @@ Experience Points
- - - - - - - - - - + + + + + + + + + +
+
Health
-
- - -
- - - - - - - - - - -
-
- - - - - - - - - - - -
-
- - -
-
- - -
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
+
- + +
+
+ + + + + + + + +
+
- - +
-
- - -
-
- -
--> +
+ +
- + +
+
+ + + + + + + + +
+
-
+
Make Roll Secret
-
- +
+
-
+
Story Points
- - - + + +
@@ -361,53 +1537,128 @@
Radiation
-
-
- - - - -
- - - - - +
+
+ + + l + + + l + + + l + + + l + + + l + +
+ l + + + l + + + l + + + l + + + l + +
+
+
+ + + Perm: + + + +
- -
+ +
Tough
-
- +
+
-
+
- + +
+
+ + + + + + + + + +
+
- - +
-
+ +
+ +
-
- - +
- -
+ +
+
+ + + + + + + + +
+
+
  @@ -416,27 +1667,39 @@
Tiny Items
-
-
+ + - -
-
+ + +
-
+
- + +
+
+ + + + + + + + +
+
- - +
-
- - @@ -444,28 +1707,40 @@
-
+
Attributes
-
+
- -
-
- - +
- + +
+
+ + + + + + + + +
+
@@ -479,30 +1754,59 @@
-
+
- + +
+
+ + + + + + + + +
+
- - +
-
+
+ +
-
- - +
- + +
+
+ + + + + + + + +
+
-
+
Signature Item
@@ -515,45 +1819,69 @@
 
-
+
+
+
+ + + + + + + + +
+
- - +
-
-
-
- -
--> + +
+ +
+
+
+ + + + + + + + +
+
Gear - Enc - Wt + Enc + Wt #
- - + + - +
- - + + - +
- - + + - +
- - + + - +
- - + + - +
- - + + - +
- - + + - +
- - + + - +
- - + + - +
@@ -689,46 +2017,69 @@
Conditions
-
- Starving - -
- Dehydrated - -
- Exhausted - -
- Freezing - +
+
+ Starving + +
+
+
+
+
+ Dehydrated + +
+
+
+
+
+ Exhausted + +
+
+
+
+
+ Freezing + +
 
-
- - +
- + +
+
+ + + + + + + + +
+
-
+
Pack mule
-
+
- - +
@@ -739,8 +2090,8 @@ - - + + Encumbrance @@ -760,13 +2111,13 @@ - - - - - - -
+ + + + + + +
@@ -779,11 +2130,12 @@ --> -
-
+
+
+
- - +
@@ -798,11 +2150,11 @@
Range
@@ -820,24 +2172,24 @@
- +
- +
-
+ - -
+ +
-
+
- - +
@@ -852,11 +2204,11 @@
Range
@@ -873,24 +2225,24 @@
- +
- +
-
+ - -
+ +
-
+
- - +
@@ -905,11 +2257,11 @@
Range
@@ -926,24 +2278,24 @@
- +
- +
-
+ - -
+ +
-
+
- - +
@@ -958,11 +2310,11 @@
Range
@@ -979,22 +2331,22 @@
- +
- +
-
+ - -
+ +
-
+
- - +
@@ -1009,11 +2361,11 @@
Range
@@ -1030,24 +2382,24 @@
- +
- +
-
+ - -
+ +
-
+
- - +
@@ -1062,11 +2414,11 @@
Range
@@ -1083,46 +2435,46 @@
- +
- +
-
+ - -
+ +
-
+
- Consumables + Consumables
- +
-
- +
+
-
- +
+
-
- +
+
@@ -1141,14 +2493,14 @@
INTERNAL MODULES
- - + +
-
 Size
-
+
 Size
+
@@ -1166,7 +2518,7 @@
-
+
@@ -1238,7 +2590,14 @@
- +
+
+ Modifier query +
+
+ +
+
@@ -1246,49 +2605,57 @@
Hull
- -
+
+
+ Make Roll Secret +
+
+ +
+
Damage
- +
- + +
-
+
- - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + No hull points entered
@@ -1307,18 +2674,18 @@
SHIP'S LOG
- - - + + +
- +
DateLocation
-
+
@@ -1335,7 +2702,7 @@
-
+
@@ -1352,7 +2719,7 @@
-
+
@@ -1377,14 +2744,14 @@ MINOR COMPONENT DAMAGE
EFFECT -
+
-
+
@@ -1398,14 +2765,14 @@ MAJOR COMPONENT DAMAGE
EFFECT -
+
-
+
@@ -1422,7 +2789,7 @@ UPGRADES
EFFECT -
+
@@ -1432,7 +2799,7 @@
-
+
@@ -1448,20 +2815,30 @@
ARMAMENTS
- - - - - -
- - - - - + + + + + + + + + + +
+ + + + + + + + + +
-
+

@@ -1509,20 +2886,17 @@
- - - +
-
- - -
+
-
+

@@ -1570,20 +2944,17 @@
- - - +
-
- - -
+
-
+

@@ -1631,20 +3002,17 @@
- - - +
-
- - -
+
-
+

@@ -1692,21 +3060,18 @@
- - - +
-
- - -
+
-
- +
+
@@ -1753,17 +3118,304 @@
- - - +
-
- - + +
+ +
+ +
+
+
+ + Bonus +
+
+ + Damage +
+
+ Max Range + +
+
+ + +
+
+
+
+ Gunner Ranged + +
+
+ Gunner stress + +
+
+ Target Range + +
+
+ + + +
+
+ +
+ +
+ +
+
+
+ + Bonus +
+
+ + Damage +
+
+ Max Range + +
+
+ + +
+
+
+
+
+ Gunner Ranged + +
+
+ Gunner stress + +
+
+ Target Range + +
+
+ + + +
+
+ +
+ +
+ +
+
+
+ + Bonus +
+
+ + Damage +
+
+ Max Range + +
+
+ + +
+
+
+
+
+ Gunner Ranged + +
+
+ Gunner stress + +
+
+ Target Range + +
+
+ + + +
+
+ +
+ +
+ +
+
+
+ + Bonus +
+
+ + Damage +
+
+ Max Range + +
+
+ + +
+
+
+
+
+ Gunner Ranged + +
+
+ Gunner stress + +
+
+ Target Range + +
+
+ + + +
+
+ +
+ +
+ +
+
+
+ + Bonus +
+
+ + Damage +
+
+ Max Range + +
+
+ + +
+
+
+
+
+ Gunner Ranged + +
+
+ Gunner stress + +
+
+ Target Range + +
+
+ + + +
+
+
@@ -1777,11 +3429,11 @@
-
SPECIES
+
SPECIES
-
STAGE
+
STAGE

- +
-
+
SPECIAL ABILITIES
-
- -
+ + +
-
+
CONTAINMENT & TERMINATION
-
- -
+ + +
-
+
NOTES
-
- -
+ + +
+ @@ -1870,10 +3523,10 @@ Health
- +
- +
@@ -1888,7 +3541,7 @@
- + @@ -1900,9 +3553,10 @@ - + + @@ -1922,18 +3576,18 @@
ROLL BUTTONS
-
+ + - + - + - - -
-
+ + +
@@ -1942,26 +3596,25 @@
-
- - +
-
- @@ -1975,10 +3628,12 @@ SIGNATURE ATTACKS
- +  /  - - + + + +
@@ -1986,19 +3641,20 @@ 1 - + - + + -
+