roll20-character-sheets/CWOD-Hunter/Hunter.css

/* .charsheet label {
    display: inline-block;
    width: 100%;
    text-align: right;
    padding-bottom: 0;
} */

.charsheet input {
  display: inline-block;
  width: fit-content;
}

.charsheet {
  background-color: white;
}

.sheet-container {
  display: grid;
  overflow: visible; /* previously "scoll", which was causing a second vertical scroll bar */
  grid-template-columns: repeat(3, minmax(270px, 1fr));
  grid-template-rows: repeat(10, fit-content);
  grid-template-areas: "header header header"
                        "character1 character2 character3"
                        "subhead1 subhead1 subhead1"
                        "attrib1 attrib2 attrib3"
                        "subhead2 subhead2 subhead2"
                        "ability1 ability2 ability3"
                        "subhead3 subhead3 subhead3"
                        "advantage1 advantage2 advantage3"
                        "extra1-1 extra1-2 extra1-3"
                        "extra2-1 extra2-2 extra2-3"
                        "extra3-1 extra3-2 extra3-3";
  grid-gap: 8px;
  margin: 0 2% 0 2%;
}

.sheet-header {
  grid-area: header;
  text-align: center;
}
.sheet-character1 {
  grid-area: character1;
  text-align: center;
}
.sheet-character2 {
  grid-area: character2;
  text-align: center;
}
.sheet-character3 {
  grid-area: character3;
  text-align: center;
}

.sheet-subhead1 {
  grid-area: subhead1;
  text-align: center;
}

.sheet-attrib1 {
  grid-area: attrib1;
  text-align: center;
}

.sheet-attrib2 {
  grid-area: attrib2;
  text-align: center;
}

.sheet-attrib3 {
  grid-area: attrib3;
  text-align: center;
}

.sheet-subhead2 {
  grid-area: subhead2;
  text-align: center;
}

.sheet-ability1 {
  grid-area: ability1;
  text-align: center;
}

.sheet-ability2 {
  grid-area: ability2;
  text-align: center;
}

.sheet-ability3 {
  grid-area: ability3;
  text-align: center;
}

.sheet-subhead3 {
  grid-area: subhead3 ;
}

.sheet-advantage1 {
  grid-area: advantage1;
  text-align: center;
}
.sheet-advantage2 {
  grid-area: advantage2;
  text-align: center;
}
.sheet-advantage3 {
  grid-area: advantage3;
  text-align: center;
}
.sheet-extra1-1 {
  grid-area: extra1-1;
}
.sheet-extra1-2 {
  grid-area: extra1-2 ;
}
.sheet-extra1-3 {
  grid-area: extra1-3;
}
.sheet-extra2-1 {
  grid-area: extra2-1;
  text-align: center;
}
.sheet-extra2-2 {
  grid-area: extra2-2;
  text-align: center;
}
.sheet-extra2-3 {
  grid-area: extra2-3;
  text-align: center;
}
.sheet-extra3-1 {
  grid-area: extra3-1;
}
.sheet-extra3-2 {
  grid-area: extra3-2;
}
.sheet-extra3-3 {
  grid-area: extra3-3;
}

.sheet-break-line {
  height: 2px;
  border-width: 0;
  color: gray;
  background-color: gray;
  width: 60%
}

.sheet-dotrow {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-gap: 5px;
  justify-content: center;
  align-items: center;
  justify-items: stretch;
  padding: 2px 0 2px 2px;
}

.sheet-willpower {
  margin: auto;
  width: fit-content;
  display: grid;
  grid-template-columns: auto 32px;
  grid-gap: 1px;
}

.sheet-willpower-pool {
  display: grid;
  grid-template-rows: repeat(2, 15px);
  grid-gap: 1px;
}

.sheet-two_col_header {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  grid-gap: 10px;
}

.sheet-dotrow > label {
  padding: 10px 0 0 0;
  width: 100%;
}

.sheet-dotrow > input[type="text"] {
  padding: 3px 0 0 0;
  width: 100%;
}

.sheet-list > input[type="text"] {
  width: 90%;
}

.sheet-dotrow > label > input[type="text"] {
  padding: 3px 0 0 0;
  width: 100%;
}

.sheet-textbox {
  display: grid;
  grid-template-rows: repeat(2, fit-content);
  grid-template-columns: 1fr;
  justify-content: center;
  text-align: center;
  padding-top: 5px;
}

.sheet-textbox > label {
  font-weight: bold;
  text-align: center;
}

.sheet-textbox > textarea {
  width: 90%;
  justify-self: center;
}

.sheet-dotline10 {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(10, 15px);
  grid-gap: 1px;
}

.sheet-dotline11 {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(11, 15px);
  grid-gap: 1px;
}

.sheet-dotline12 {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(12, 15px);
  grid-gap: 1px;
}

.sheet-numberrow {
  display: grid;
  grid-template-columns: minmax(105px, auto) auto;
  justify-content: center;
  align-items: stretch;
}

.sheet-list {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: stretch;
}

.sheet-numberrow > label {
  padding: 2px 0 2px 0;
}

.sheet-numberrow > input {
  margin: 2px 0 2px 0;
  justify-self: center;
}

.sheet-healthrow {
  display: grid;
  grid-template-columns: 1fr 10px 40px;
  grid-gap: 20px;
  justify-content: center;
  text-align: left;
  padding: 5px 0 5px 0;
}

.sheet-healthrow > select {
  width: fit-content;
}

.sheet-dicepool {
  display: grid;
  grid-template-columns: 18px repeat(2, 1fr) 32px;
  grid-gap: 2px;
  justify-content: center;
  padding: 5px 0 5px 0;
}

.sheet-dicepool > select {
  width: 80%;
  justify-self: center;
}

.sheet-experience {
  justify-content: center;
  display: grid;
  grid-template-rows: repeat(4, fit-content);
  text-align: center;
}

/* Hide actual dot/checkbox */
input[type="radio"],
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 15px;
  cursor: pointer;
  z-index: 1;
  margin-top: 6px;
}

/* Styles common to fake dot and checkbox */
input[type="radio"] + span::before,
input[type="checkbox"] + span::before {
  border: solid 1px #a8a8a8;
  line-height: 14px;
  text-align: middle;
  display: inline-block;
  vertical-align: middle;
  -moz-box-shadow: 0 0 2px #ccc;
  -webkit-box-shadow: 0 0 2px #ccc;
  box-shadow: 0 0 2px #ccc;
  background: #f6f6f6;
  background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
  background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
  background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
  background: -o-radial-gradient(#f6f6f6, #dfdfdf);
  background: radial-gradient(#f6f6f6, #dfdfdf);
}

/* Styles unique to fake dot (checked or left of checked) */
input[type="radio"] + span::before {
  content: "•";
  width: 12px;
  height: 12px;
  font-size: 36px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

/* Styles unique to fake checkbox (unchecked) */
input[type="checkbox"] + span::before {
  position: relative;
  content: "";
  opacity: 0.25;
  width: 14px;
  height: 14px;
  font-size: 12px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

input[type="radio"].sheet-used + span::before {
  content: "✖";
  width: 12px;
  height: 12px;
  font-size: 12px;
  -moz-border-radius: 0%;
  -webkit-border-radius: 0%;
  border-radius: 0%;
}

input.sheet-zero + span::before {
  font-size: 12px;
  content: "✖";
  opacity: 0.25;
}

input.sheet-DP1Spec + span::before,
input.sheet-DP2Spec + span::before,
input.sheet-DP3Spec + span::before,
input.sheet-DP4Spec + span::before,
input.sheet-DP5Spec + span::before {
  opacity: 1;
  margin-bottom: 10px;
}

input.sheet-zero:checked + span::before {
  opacity: 0;
}

input.sheet-zero:hover + span::before {
  opacity: 1;
}

/* Styles unique to fake checkbox (checked) */
input[type="checkbox"]:checked + span::before {
  content: "✖";
  color: #a00;
  -moz-box-shadow: 0 0 2px transparent;
  -webkit-box-shadow: 0 0 2px transparent;
  box-shadow: 0 0 2px transparent;
}

/* Remove dot from all radios _after_ selected one */
input[type="radio"]:checked ~ input[type="radio"] + span::before {
  content: "";
}

div.sheet-DP,
div.sheet-DP1,
div.sheet-DP2,
div.sheet-DP3,
div.sheet-DP4,
div.sheet-DP5 {
  display: inline;
}

input.sheet-DPSpec[type="checkbox"] + span::before {
  position: relative;
  content: "";
  opacity: 1;
  width: 14px;
  height: 14px;
  font-size: 12px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

input.sheet-DPSpec[type="checkbox"]:checked + span::before {
  content: "✖";
  color: #a00;
  -moz-box-shadow: 0 0 2px transparent;
  -webkit-box-shadow: 0 0 2px transparent;
  box-shadow: 0 0 2px transparent;
}

input.sheet-DPSpec ~ button.sheet-nospec,
input.sheet-DP1Spec ~ button.sheet-nospec,
input.sheet-DP2Spec ~ button.sheet-nospec,
input.sheet-DP3Spec ~ button.sheet-nospec,
input.sheet-DP4Spec ~ button.sheet-nospec,
input.sheet-DP5Spec ~ button.sheet-nospec {
  display: inline;
}

input.sheet-DPSpec ~ button.sheet-spec,
input.sheet-DP1Spec ~ button.sheet-spec,
input.sheet-DP2Spec ~ button.sheet-spec,
input.sheet-DP3Spec ~ button.sheet-spec,
input.sheet-DP4Spec ~ button.sheet-spec,
input.sheet-DP5Spec ~ button.sheet-spec {
  display: none;
}

input.sheet-DPSpec:checked ~ button.sheet-nospec,
input.sheet-DP1Spec:checked ~ button.sheet-nospec,
input.sheet-DP2Spec:checked ~ button.sheet-nospec,
input.sheet-DP3Spec:checked ~ button.sheet-nospec,
input.sheet-DP4Spec:checked ~ button.sheet-nospec,
input.sheet-DP5Spec:checked ~ button.sheet-nospec {
  display: none;
}

input.sheet-DPSpec:checked ~ button.sheet-spec,
input.sheet-DP1Spec:checked ~ button.sheet-spec,
input.sheet-DP2Spec:checked ~ button.sheet-spec,
input.sheet-DP3Spec:checked ~ button.sheet-spec,
input.sheet-DP4Spec:checked ~ button.sheet-spec,
input.sheet-DP5Spec:checked ~ button.sheet-spec {
  display: inline;
}