slaguru666/roll20-character-sheets-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update HeroSystem6eHeroic.css

Browse Source 
Finalized styling code for hit location system.
This commit is contained in:
Villain1nGlasses
2021-08-07 13:11:33 -07:00
committed by GitHub
parent 267983b30e
commit 32b6812d01
1 changed files with 174 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
HeroSystem6eHeroic/HeroSystem6eHeroic.css
+174 -143
View File
@@ -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;
}