diff --git a/HeroSystem6eHeroic/HeroSystem6eHeroic.css b/HeroSystem6eHeroic/HeroSystem6eHeroic.css index aeef458a4f..2f3d37e475 100644 --- a/HeroSystem6eHeroic/HeroSystem6eHeroic.css +++ b/HeroSystem6eHeroic/HeroSystem6eHeroic.css @@ -1255,40 +1255,40 @@ text-align: center; /* Customize the label (the container) */ .container-checkbox { - display: inline-block; - position: relative; - padding-left: 25px; - padding-top: 2px; - //margin-bottom: 10px; - cursor: pointer; - max-width: 400px; - font-size: 12px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: transparent; + display: inline-block; + position: relative; + padding-left: 25px; + padding-top: 2px; + //margin-bottom: 10px; + cursor: pointer; + max-width: 400px; + font-size: 12px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: transparent; } /* Hide the browser's default checkbox */ .container-checkbox input, .container-checkbox-small input, .container-checkbox-small-gray input { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; } /* Create a custom checkbox */ .checkmark { - position: absolute; - top: 0; - left: 0; - height: 20px; - width: 20px; - background-color: gold; + position: absolute; + top: 0; + left: 0; + height: 20px; + width: 20px; + background-color: gold; } /* On mouse-over, add a grey background color */ @@ -1299,8 +1299,8 @@ text-align: center; } .container-checkbox-small-gray:hover input ~ .checkmark-small-gray { - background-color: lightgray; - border: solid 1px gray; + background-color: lightsteelblue; + border: solid 1px darkgray; } /* When the checkbox is checked, add a gold background */ @@ -1310,7 +1310,7 @@ text-align: center; } .container-checkbox-small-gray input:checked ~ .checkmark-small-gray { - background-color: lightsteelblue; + background-color: lightgray; } /* Create the checkmark/indicator (hidden when not checked) */ @@ -1338,15 +1338,15 @@ text-align: center; /* Style the checkmark/indicator */ .container-checkbox .checkmark:after { - left: 7px; - top: 2px; - width: 5px; - height: 10px; - border: solid black; - border-width: 0 3px 3px 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); + left: 7px; + top: 2px; + width: 5px; + height: 10px; + border: solid black; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } /* --------------------------------------------------- */ @@ -1411,7 +1411,7 @@ text-align: center; .grid-container-container-turn-segments { grid-area: turnSegmentIndicators; - display: inline-flex; + display: inline-flex; /* or inline-flex */ flex-direction: row; flex-wrap: nowrap; align-items: top; @@ -3372,97 +3372,76 @@ text-align: center; margin-top: 2px; } -/* ------------------------------- */ -/* Gear slide: Hit Location Tables */ -/* ------------------------------- */ - +/* Item: Hit Locations */ .item-tab-gear-slide-flex-container-hit-locations { - //display: flex; - //flex-direction: column; - //justify-content: space-between; - width: 395px; - height: 370px; - padding: 5px; - padding-top: 0px; - background-color: green; //lightcyan + display: flex; + flex-direction: column; + justify-content: space-between; + width: 402px; + height: 375px; + padding: 0px; + padding-left: 3px; + background-color: lightcyan; margin-left: 0px; margin-bottom: 0px; border: solid 2px lightgray; border-radius: 3px; } -.item-tab-gear-slide-flex-container-hit-locations input[type=radio] { - width: 30px; - text-align: center; - height: 15px; -} - -.item-tab-gear-slide-flex-container-hit-locations-row { +.item-gear-slide-container-hit-locations-flex-row { display: flex; flex-direction: row; justify-content: space-between; - width: 395px; - height: 144px; + border-radius: 3px; + width: 400px; } -// Special targeting table -.subitem-tab-gear-slide-flex-container-special-table { +/* Special Hit Locations */ +.item-gear-slide-flex-container-hit-locations-special { + width: 260px; + height: 145px; display: flex; flex-direction: column; justify-content: space-between; - background-color: orange; } -.subitem-tab-gear-slide-flex-container-special-table input[type=radio] { - margin-left: 12px; +.item-gear-slide-flex-container-hit-locations-special input[type=radio] { + margin-left: 14px; } -.subitem-tab-gear-slide-flex-container-special-table-heading { +.subitem-gear-slide-flex-container-hit-locations-special-heading { background-color: lightcyan; + height: 20px; + margin-bottom: 3px; } -.subitem-tab-gear-slide-flex-container-special-table-heading h1:nth-child(1){ - width: 48px; - text-align: center; +.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(1){ + width: 42px; + text-align: left; margin-left: 2px; } -.subitem-tab-gear-slide-flex-container-special-table-heading h1:nth-child(2){ +.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(2){ width: 40px; text-align: center; - margin-left: 7px; + margin-left: 3px; } -.subitem-tab-gear-slide-flex-container-special-table-heading h1:nth-child(3){ +.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(3){ width: 52px; text-align: center; - margin-left: 26px; + margin-left: 30px; } -.subitem-tab-gear-slide-flex-container-special-table-heading h1:nth-child(4){ +.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(4){ width: 44px; text-align: right; - margin-left: 8px; + margin-left: 15px; } -.subitem-tab-gear-slide-flex-container-special-table-top-row h1, -.subitem-tab-gear-slide-flex-container-special-table-middle-row h1, -.subitem-tab-gear-slide-flex-container-special-table-bottom-row h1 { - width: 65px; - text-align: center; -} - -.subitem-tab-gear-slide-flex-container-special-table-top-row h1:nth-child(4), -.subitem-tab-gear-slide-flex-container-special-table-middle-row h1:nth-child(4), -.subitem-tab-gear-slide-flex-container-special-table-bottom-row h1:nth-child(4) { - width: 35px; - text-align: right; - padding-right: 19px; -} - -.subitem-tab-gear-slide-flex-container-special-table-top-row, -.subitem-tab-gear-slide-flex-container-special-table-middle-row, -.subitem-tab-gear-slide-flex-container-special-table-bottom-row { +.subitem-gear-slide-flex-container-hit-locations-special-top-row, +.subitem-gear-slide-flex-container-hit-locations-special-middle-row, +.subitem-gear-slide-flex-container-hit-locations-special-bottom-row { display: flex; flex-direction: row; justify-content: space-between; @@ -3470,48 +3449,61 @@ text-align: center; border-left: solid 1px lightgray; border-right: solid 1px lightgray; width: 260px; - height: 19px; + height: 20px; } -.subitem-tab-gear-slide-flex-container-special-table-top-row { +.subitem-gear-slide-flex-container-hit-locations-special-top-row { border-top: solid 1px lightgray; border-top-left-radius: 3px; border-top-right-radius: 3px; padding-top: 5px; } -.subitem-tab-gear-slide-flex-container-special-table-bottom-row { +.subitem-gear-slide-flex-container-hit-locations-special-bottom-row { border-bottom: solid 1px lightgray; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } -// Targeting options -.subitem-tab-gear-slide-flex-container-target-options { - width: 100px; +.subitem-gear-slide-flex-container-hit-locations-special-top-row h1, +.subitem-gear-slide-flex-container-hit-locations-special-middle-row h1, +.subitem-gear-slide-flex-container-hit-locations-special-bottom-row h1 { + width: 65px; + text-align: center; } -.subitem-tab-gear-slide-flex-container-target-options-top-row, -.subitem-tab-gear-slide-flex-container-target-options-bottom-row { +.subitem-gear-slide-flex-container-hit-locations-special-top-row h1:nth-child(4), +.subitem-gear-slide-flex-container-hit-locations-special-middle-row h1:nth-child(4), +.subitem-gear-slide-flex-container-hit-locations-special-bottom-row h1:nth-child(4) { + width: 35px; + text-align: right; + padding-right: 19px; +} + +/* Targeting Options */ +.item-gear-slide-container-hit-locations-options { + width: 130px; + height: 100px; + margin-top: 50px; +} + +.subitem-gear-slide-container-hit-locations-options-top, +.subitem-gear-slide-container-hit-locations-options-bottom { display: flex; flex-direction: row; - justify-content: center; - width: 128px; + justify-content: flex-start; + width: 115px; + margin: 3px; + margin-bottom: 7px; } -.subitem-tab-gear-slide-flex-container-target-options-top-row { - margin-top: 50px; - margin-bottom: 12px; - background-color: lightcyan; -} - -.subitem-tab-gear-slide-flex-container-target-options-top-row h1, -.subitem-tab-gear-slide-flex-container-target-options-bottom-row h1 { +.subitem-gear-slide-container-hit-locations-options-top h1, +.subitem-gear-slide-container-hit-locations-options-bottom h1 { padding-top: 4px; margin: 0px; } -.subitem-tab-gear-slide-flex-container-target-options-top-row label { +.subitem-gear-slide-container-hit-locations-options-top label { max-width: 0px; margin-left: 2px; margin-right: 0px; @@ -3519,51 +3511,90 @@ text-align: center; padding-right: 0px; } -.subitem-tab-gear-slide-flex-container-target-options-bottom-row { - background-color: white; -} -.subitem-tab-gear-slide-flex-container-target-options-bottom-row input { +.subitem-gear-slide-container-hit-locations-options-bottom input { margin-left: 5px; border: solid 1px lightgray; } -// Hit location table -.subitem-tab-gear-slide-flex-container-hit-location-table { - width: 396px; +/* Hit Location Table */ +.item-gear-slide-container-hit-locations-table { + width: 399px; + height: 215px; } -.subitem-tab-gear-slide-grid-area-hit-location-table-heading { - padding-top: 5px; +.item-gear-slide-container-hit-locations-table h1 { + width: 51px; + text-align: center; +} + +.item-gear-slide-container-hit-locations-table input[type=radio] { + margin-left: 14px; +} + +.subitem-gear-slide-container-hit-locations-table-heading { background-color: lightcyan; + height: 20px; + margin-bottom: 3px; } -.subitem-tab-gear-slide-grid-area-hit-location-table-heading h1 { - width: 52px; +.subitem-gear-slide-container-hit-locations-table-heading h1 { text-align: center; + margin-left: 2px; } -.subitem-tab-gear-slide-grid-area-hit-location-table-heading h1:nth-child(2){ - width: 30px; +.subitem-gear-slide-container-hit-locations-table-heading h1:nth-child(1){ + width: 42px; + text-align: left; +} + +.subitem-gear-slide-container-hit-locations-table-heading h1:nth-child(2){ + width: 34px; text-align: center; - margin-right: 12px; + margin-right: 9px; + margin-left: 3px; } -.subitem-tab-gear-slide-flex-container-hit-location-table h1 { - width: 52px; - text-align: center; -} - -.subitem-tab-gear-slide-flex-container-hit-location-table input[type=radio] { - margin-left: 12px; -} - -.subitem-tab-gear-slide-grid-area-hit-location-table-top-row, -.subitem-tab-gear-slide-grid-area-hit-location-table-middle-row, -.subitem-tab-gear-slide-grid-area-hit-location-table-bottom-row { +.subitem-gear-slide-container-hit-locations-table-top-row, +.subitem-gear-slide-container-hit-locations-table-middle-row, +.subitem-gear-slide-container-hit-locations-table-bottom-row { height: 19px; } -.subitem-tab-gear-slide-grid-area-hit-location-table-top-row { +.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(2), +.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(2), +.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(2){ + width: 40x; + text-align: center; + margin-right: 11px; +} + +.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(2), +.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(2), +.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(2){ + width: 34px; + text-align: center; + margin-left: 21px; +} + +.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(6), +.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(6), +.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(6){ + width: 45px; + text-align: center; + margin-left: 6px; + margin-right: 0px; +} + +.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(7), +.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(7), +.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(7){ + width: 34px; + text-align: right; + margin-left: 4px; + margin-right: 17px; +} + +.subitem-gear-slide-container-hit-locations-table-top-row { background-color: white; border-top: solid 1px lightgray; border-left: solid 1px lightgray; @@ -3572,13 +3603,13 @@ text-align: center; border-top-right-radius: 3px; } -.subitem-tab-gear-slide-grid-area-hit-location-table-middle-row { +.subitem-gear-slide-container-hit-locations-table-middle-row { background-color: white; border-left: solid 1px lightgray; border-right: solid 1px lightgray; } -.subitem-tab-gear-slide-grid-area-hit-location-table-bottom-row { +.subitem-gear-slide-container-hit-locations-table-bottom-row { background-color: white; border-left: solid 1px lightgray; border-right: solid 1px lightgray; @@ -3589,7 +3620,7 @@ text-align: center; } /* Item: Slide of treasure and notes box */ -.item-gear-slide-treasure-text { +.item-tab-gear-slide-treasure-text { width: 401px; height: 367px; padding: 0px; @@ -3597,7 +3628,7 @@ text-align: center; margin-bottom: 0px; } -.item-gear-slide-treasure-text textarea { +.item-tab-gear-slide-treasure-text textarea { width: 397px; height: 367px; margin: 0px; @@ -3610,7 +3641,7 @@ text-align: center; .item-tab-gear-slide-flex-container-maneuvers, .item-tab-gear-slide-flex-container-martial-maneuvers, .item-tab-gear-slide-flex-container-hit-locations, -.item-gear-slide-treasure-text { +.item-tab-gear-slide-treasure-text { display: none; } @@ -3618,7 +3649,7 @@ text-align: center; .item-gear-slideshow[value="1"] ~ div.item-tab-gear-slide-flex-container-maneuvers, .item-gear-slideshow[value="2"] ~ div.item-tab-gear-slide-flex-container-martial-maneuvers, .item-gear-slideshow[value="3"] ~ div.item-tab-gear-slide-flex-container-hit-locations, -.item-gear-slideshow[value="4"] ~ div.item-gear-slide-treasure-text { +.item-gear-slideshow[value="4"] ~ div.item-tab-gear-slide-treasure-text { display: block; position: relative; }