roll20-character-sheets/Frontier Scum/frontierscum.css

@import url("https://fonts.googleapis.com/css2?family=Smokum&family=Satisfy&family=Inconsolata&family=Ultra&family=Alegreya&display=swap");
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: unset;
  width: unset;
  padding: unset;
  margin: unset;
  font-family: unset;
  font-size: 1rem;
  font-weight: unset;
  line-height: unset;
  color: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-color: unset;
}

h1,
h2,
h3,
h4,
h5 {
  font-size: unset;
  line-height: unset;
  color: unset;
}

label,
input,
input[type=number],
select,
textarea,
button,
button[type=roll] {
  display: unset;
  width: unset;
  height: unset;
  padding: unset;
  margin-bottom: unset;
  font-family: unset;
  font-size: unset;
  font-weight: unset;
  line-height: unset;
  color: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-color: unset;
  box-shadow: unset;
}

button[type=roll]::before {
  display: none;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  background-color: unset;
  border-color: unset;
}

fieldset {
  background: transparent;
}

span {
  word-break: break-word;
}

input[type=number] {
  text-align: center;
  width: 100%;
  -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn:hover {
  background-position: 0 0;
  background-color: transparent;
}

ul.nav.nav-tabs li a {
  font-family: "Smokum", cursive;
  font-size: 2rem;
}

div.bioinfo.tab-pane label strong {
  font-size: 2em;
}
div.bioinfo.tab-pane .content p {
  font-size: 1.5rem;
}

div.attributesabilities.tab-pane h3, div.attributesabilities.tab-pane div.heading {
  font-size: 2rem;
}
div.attributesabilities.tab-pane div.attrname, div.attributesabilities.tab-pane input {
  font-size: 1.5rem;
}

button[type=roll].sheet-blank-button.ability-button {
  font-size: 2.2rem;
  text-transform: uppercase;
  padding: 0;
}

.scum, .horse {
  display: none;
}

input[name*=sheet_mode][value=scum] ~ * .scum {
  display: block !important;
}
input[name*=sheet_mode][value=horse] ~ * .horse {
  display: block !important;
}

.sheet-selector {
  font-size: 2rem;
  position: absolute;
  top: 80px;
  left: 720px;
  color: grey;
  filter: grayscale(100%);
}

.charsheet .frontierscum {
  padding: 20px;
  width: 738px;
  border: 1px solid black;
}

.frontierscum {
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
  /* When the checkbox is checked, add a blue background */
}
.frontierscum input[type=number],
.frontierscum input[type=text] {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px dotted black;
  font-family: "Inconsolata", monospace;
  font-size: 1.8rem;
  text-align: center;
}
.frontierscum textarea {
  background-color: #eeeeee;
  border: none;
  font-family: "Inconsolata", monospace;
  font-size: 1.5rem;
  padding: 2px;
  resize: none;
}
.frontierscum .top-label {
  background-color: black;
  color: white;
  font-family: "Smokum", cursive;
  font-size: 2.5rem;
  text-align: center;
  text-transform: uppercase;
}
.frontierscum .top-label span {
  font-size: 2.5rem;
}
.frontierscum label {
  display: inline;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  width: unset;
}
.frontierscum .check-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.frontierscum .check-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.frontierscum .checkmark {
  position: absolute;
  top: -3px;
  left: 12px;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 1px dotted black;
  font-size: 2rem;
}
.frontierscum .check-container input:checked ~ .checkmark {
  background-color: black;
}
.frontierscum .check-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.frontierscum .check-container input:checked ~ .checkmark:after {
  display: block;
}
.frontierscum button.sheet-blank-button.ability-button {
  text-transform: uppercase;
}

body.sheet-darkmode .charsheet {
  background-color: black;
  color: white;
}
body.sheet-darkmode .charsheet .frontierscum {
  border: 1px solid white;
}
body.sheet-darkmode .charsheet .frontierscum input[type=number],
body.sheet-darkmode .charsheet .frontierscum input[type=text] {
  border-bottom: 1px dotted white;
}
body.sheet-darkmode .charsheet .frontierscum textarea {
  background-color: #333;
}
body.sheet-darkmode .charsheet .frontierscum .top-label {
  background-color: white;
  color: black;
}
body.sheet-darkmode .charsheet .frontierscum .checkmark {
  border: 1px dotted white;
}
body.sheet-darkmode .charsheet .frontierscum .check-container input:checked ~ .checkmark {
  background-color: white;
}
body.sheet-darkmode .charsheet .frontierscum .horsesheet-header .title {
  color: white;
  -webkit-text-fill-color: black; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}
body.sheet-darkmode .charsheet .frontierscum .horsesheet-header .rider {
  filter: invert(100%);
}
body.sheet-darkmode .charsheet .frontierscum .horsesheet-body .inner1, body.sheet-darkmode .charsheet .frontierscum .horsesheet-body .inner2 {
  border-bottom: 5px solid white;
  border-left: 5px solid white;
  border-right: 5px solid white;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-header .fs-logo {
  border-bottom: 4px solid white;
  border-top: 4px solid white;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .abilities-block .ability-col .ability {
  border-left: 2px solid white;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .abilities-block .ability-col .ability .name {
  background-color: white;
  color: black;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .abilities-block .ability-col .ability:last-child {
  border-bottom: 2px solid white;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .portrait-col {
  border: 2px solid white;
  flex: 0 0 280;
  padding: 4px;
  align-items: center;
  display: flex;
  justify-content: center;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .portrait-col .portrait-inner {
  border: 2px solid white;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .condition-col {
  border: 2px solid white;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .condition-col .drunk {
  border-top: 2px solid white;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .condition-col .notes {
  border-top: 2px solid white;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .equipment-block .eq-section {
  border-left: 2px solid white;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .equipment-block .eq-section.skills .skills-label {
  border-bottom: 2px solid white;
}
body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .equipment-block .eq-section.skills .eq-row {
  border-left: 2px solid white;
  border-right: 2px solid white;
}

.sheet-rolltemplate-abilitycheck {
  background-color: white;
  border: 2px solid black;
  font-family: "Inconsolata", monospace;
}
.sheet-rolltemplate-abilitycheck .sheet-template-container {
  display: flex;
  flex-direction: column;
}
.sheet-rolltemplate-abilitycheck .sheet-template-container .sheet-template-header {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  flex: 0 0 30px;
  font-family: "Smokum", cursive;
  font-size: 2rem;
  justify-content: center;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.sheet-rolltemplate-abilitycheck .sheet-template-container .sheet-template-row {
  display: flex;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  padding-bottom: 2px;
}
.sheet-rolltemplate-abilitycheck .sheet-template-container .sheet-template-row .sheet-template-col {
  display: flex;
  flex: 1;
  justify-content: center;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-abilitycheck {
  background-color: black;
  border: 2px solid white;
  color: white;
}
.sheet-rolltemplate-darkmode.sheet-rolltemplate-abilitycheck .sheet-template-container .sheet-template-header {
  background-color: white;
  color: black;
}

.charsheet .frontierscum .scumsheet-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  width: 750px;
}
.charsheet .frontierscum .scumsheet-header .fs-logo {
  border-bottom: 4px solid black;
  border-top: 4px solid black;
  font-family: "Smokum", cursive;
  font-size: 4rem;
  line-height: 3.4rem;
  padding-top: 2px;
}
.charsheet .frontierscum .scumsheet-header .wanted {
  font-family: "Ultra", serif;
  font-size: 10rem;
  line-height: 8rem;
}
.charsheet .frontierscum .scumsheet-header .dead-or-alive {
  font-family: "Satisfy", cursive;
  font-size: 1.8rem;
}
.charsheet .frontierscum .scumsheet-header .dead-or-alive label {
  display: inline;
}
.charsheet .frontierscum .scumsheet-header .dead-or-alive label .checkmark {
  top: 5px;
  left: 15px;
}
.charsheet .frontierscum .scumsheet-header .dead-or-alive label span {
  font-size: 1.8rem;
  text-transform: capitalize;
}

.frontierscum .scumsheet-body {
  display: flex;
  flex-direction: column;
}
.frontierscum .scumsheet-body .name-block {
  display: flex;
  margin-bottom: 10px;
  width: 100%;
}
.frontierscum .scumsheet-body .name-block .fields {
  display: flex;
  flex-direction: column;
  flex: 0 0 562px;
  width: 100%;
}
.frontierscum .scumsheet-body .name-block .fields label {
  font-family: "Smokum", cursive;
  font-size: 2.5rem;
  margin-right: 4px;
}
.frontierscum .scumsheet-body .name-block .fields input {
  flex: 1;
}
.frontierscum .scumsheet-body .name-block .fields .field-row {
  display: flex;
  width: 100%;
}
.frontierscum .scumsheet-body .name-block .rewards {
  flex: 0 0 100px;
  margin-left: 10px;
  text-align: center;
}
.frontierscum .scumsheet-body .name-block .rewards label {
  font-family: "Ultra", serif;
  font-size: 2rem;
}
.frontierscum .scumsheet-body .name-block .rewards textarea {
  height: 80px;
  width: 115px;
}
.frontierscum .scumsheet-body .abilities-block {
  display: flex;
  margin-bottom: 10px;
}
.frontierscum .scumsheet-body .abilities-block .ability-col {
  display: flex;
  flex: 0 0 90px;
  flex-direction: column;
}
.frontierscum .scumsheet-body .abilities-block .ability-col .ability {
  align-items: center;
  border-bottom: none;
  border-left: 2px solid black;
  border-right: none;
  border-top: none;
  display: flex;
  flex: 0 0 72px;
  flex-direction: column;
}
.frontierscum .scumsheet-body .abilities-block .ability-col .ability .name {
  background-color: black;
  color: white;
  flex: 0 0 38px;
  width: 100%;
}
.frontierscum .scumsheet-body .abilities-block .ability-col .ability .value {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 4px;
  width: 100%;
}
.frontierscum .scumsheet-body .abilities-block .ability-col .ability .value input {
  text-align: center;
  width: 30px;
}
.frontierscum .scumsheet-body .abilities-block .ability-col .ability:last-child {
  border-bottom: 2px solid black;
}
.frontierscum .scumsheet-body .abilities-block .portrait-col {
  align-items: center;
  border: 2px solid black;
  display: flex;
  flex: 0 0 290px;
  justify-content: center;
  padding: 4px;
}
.frontierscum .scumsheet-body .abilities-block .portrait-col .portrait-inner {
  border: 2px solid black;
}
.frontierscum .scumsheet-body .abilities-block .portrait-col .portrait-inner img {
  height: 272px;
  width: 272px;
}
.frontierscum .scumsheet-body .abilities-block .condition-col {
  border: 2px solid black;
  display: flex;
  margin-left: 2px;
  flex: 0 0 314px;
  flex-direction: column;
}
.frontierscum .scumsheet-body .abilities-block .condition-col .conditions-and-notes {
  flex: 0 0 30px;
}
.frontierscum .scumsheet-body .abilities-block .condition-col .condition-row {
  display: flex;
  flex: 0 0 57px;
  padding-top: 4px;
}
.frontierscum .scumsheet-body .abilities-block .condition-col .condition-row .checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
}
.frontierscum .scumsheet-body .abilities-block .condition-col .condition-row .non-checkbox {
  flex: 1;
  font-family: "Inconsolata", monospace;
  font-size: 1.4rem;
}
.frontierscum .scumsheet-body .abilities-block .condition-col .condition-row .non-checkbox input {
  font-size: 1.4rem;
  width: 70px;
}
.frontierscum .scumsheet-body .abilities-block .condition-col .condition-row .non-checkbox span {
  font-size: 1.4rem;
}
.frontierscum .scumsheet-body .abilities-block .condition-col .condition-row .checkmark {
  top: 5px;
  left: 5px;
}
.frontierscum .scumsheet-body .abilities-block .condition-col .drunk {
  border-top: 2px solid black;
}
.frontierscum .scumsheet-body .abilities-block .condition-col .notes {
  border-top: 2px solid black;
  flex: 1;
  padding: 4px;
}
.frontierscum .scumsheet-body .abilities-block .condition-col .notes textarea {
  border: none;
  height: 100%;
  width: 100%;
}
.frontierscum .scumsheet-body .hp-block {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.frontierscum .scumsheet-body .hp-block .stat-block {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 0 0 230px;
}
.frontierscum .scumsheet-body .hp-block .stat-block input {
  width: 100px;
}
.frontierscum .scumsheet-body .hp-block .stat-block .name span {
  font-family: "Ultra", serif;
  font-size: 2.2rem;
  text-transform: uppercase;
}
.frontierscum .scumsheet-body .hp-block .stat-block .value input {
  font-size: 2.2rem;
  width: 5rem;
}
.frontierscum .scumsheet-body .equipment-block {
  display: flex;
}
.frontierscum .scumsheet-body .equipment-block .eq-col-1 {
  display: flex;
  flex-direction: column;
  flex: 0 0 230px;
}
.frontierscum .scumsheet-body .equipment-block .eq-col-2 {
  display: flex;
  flex-direction: column;
  flex: 0 0 232px;
  margin-left: 2px;
  margin-right: 2px;
}
.frontierscum .scumsheet-body .equipment-block .eq-col-3 {
  display: flex;
  flex-direction: column;
  flex: 0 0 230px;
}
.frontierscum .scumsheet-body .equipment-block .eq-section {
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  display: flex;
  flex-direction: column;
}
.frontierscum .scumsheet-body .equipment-block .eq-row {
  display: flex;
  flex: column;
  flex: 0 0 30px;
  padding: 2px;
}
.frontierscum .scumsheet-body .equipment-block .eq-row input {
  width: 100%;
}
.frontierscum .scumsheet-body .equipment-block .eq-section.skills {
  border-left: none;
  border-right: none;
  justify-content: space-between;
}
.frontierscum .scumsheet-body .equipment-block .eq-section.skills .skills-label {
  border-bottom: 2px solid black;
  flex: 0 0 30px;
  padding-top: 0.5rem;
  text-align: center;
  line-height: 2rem;
}
.frontierscum .scumsheet-body .equipment-block .eq-section.skills .skills-label span {
  font-family: "Ultra", serif;
  font-size: 1.9rem;
  text-transform: uppercase;
}
.frontierscum .scumsheet-body .equipment-block .eq-section.skills .eq-row {
  border-left: 2px solid black;
  border-right: 2px solid black;
}
.frontierscum .scumsheet-body .equipment-block .eq-section.on-your-back {
  margin-top: 3px;
}
.frontierscum .scumsheet-body .equipment-block .eq-section.on-your-back .eq-row {
  flex: 0 0 38px;
}
.frontierscum .scumsheet-body .equipment-block .eq-section.in-your-pockets {
  justify-content: space-between;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  height: 284px;
}
.frontierscum .scumsheet-body .equipment-block .eq-section.in-your-pockets .eq-row {
  border-bottom: none;
  border-left: none;
  border-right: none;
  flex: 0 0 24px;
}
.frontierscum .scumsheet-body .equipment-block .eq-section.in-your-pockets .eq-row input {
  font-size: 1.3rem;
}

.charsheet .frontierscum .horsesheet-header .title {
  color: black;
  font-family: "Ultra", serif;
  font-size: 13rem;
  letter-spacing: 2.5rem;
  line-height: 11rem;
  padding-left: 25px;
  text-align: center;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}
.charsheet .frontierscum .horsesheet-header .rider {
  background-image: url("https://raw.githubusercontent.com/mcglincy/frontierscum-roll20/main/img/rider1.png");
  background-size: 100% 100%;
  height: 290px;
  width: 290px;
  position: absolute;
  top: 50px;
  left: 400px;
}

.charsheet .frontierscum .horsesheet-body {
  display: flex;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
.charsheet .frontierscum .horsesheet-body input {
  width: 100%;
}
.charsheet .frontierscum .horsesheet-body .inner1 {
  padding: 2px;
}
.charsheet .frontierscum .horsesheet-body .inner1, .charsheet .frontierscum .horsesheet-body .inner2 {
  border-bottom: 5px solid black;
  border-left: 5px solid black;
  border-right: 5px solid black;
  flex: 1;
}
.charsheet .frontierscum .horsesheet-body .name-block {
  padding: 5px;
}
.charsheet .frontierscum .horsesheet-body .name-block .field-row {
  display: flex;
  margin-bottom: 4px;
}
.charsheet .frontierscum .horsesheet-body .name-block .field-row label {
  font-family: "Smokum", cursive;
  font-size: 2.5rem;
  margin-right: 4px;
}
.charsheet .frontierscum .horsesheet-body .name-block .field-row input {
  padding-left: 10px;
  text-align: left;
}
.charsheet .frontierscum .horsesheet-body .on-your-horse {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.charsheet .frontierscum .horsesheet-body .on-your-horse .on-horse-row {
  flex: 0 0 20px;
  padding: 2px;
}
.charsheet .frontierscum .horsesheet-body .stolen-block {
  display: flex;
  justify-content: center;
}
.charsheet .frontierscum .horsesheet-body .stolen-block .stats {
  width: 300px;
}
.charsheet .frontierscum .horsesheet-body .stolen-block .stats .stat-row {
  display: flex;
  justify-content: center;
}
.charsheet .frontierscum .horsesheet-body .stolen-block .stats .stat-row .stat-block {
  display: flex;
  align-items: center;
}
.charsheet .frontierscum .horsesheet-body .stolen-block .stats .stat-row .stat-block label {
  font-family: "Ultra", serif;
  font-size: 2rem;
  margin-right: 8px;
  width: 120px;
  text-align: right;
}
.charsheet .frontierscum .horsesheet-body .stolen-block .stats .stat-row .stat-block .horseshoe {
  background-image: url("https://raw.githubusercontent.com/mcglincy/frontierscum-roll20/main/img/horseshoe.png");
  background-size: 100% 100%;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.charsheet .frontierscum .horsesheet-body .stolen-block .stats .stat-row .stat-block .horseshoe input {
  margin-right: 8px;
  width: 20px;
}
.charsheet .frontierscum .horsesheet-body .stolen-block .stats .stat-row .stat-block:last-child label {
  width: 80px;
}
.charsheet .frontierscum .horsesheet-body .horse1 {
  background-image: url("https://raw.githubusercontent.com/mcglincy/frontierscum-roll20/main/img/horsehead1.png");
  background-size: 100% 100%;
  height: 190px;
  width: 190px;
  position: absolute;
  left: 62px;
  top: 780px;
}
.charsheet .frontierscum .horsesheet-body .horse2 {
  background-image: url("https://raw.githubusercontent.com/mcglincy/frontierscum-roll20/main/img/horsehead2.png");
  background-size: 100% 100%;
  width: 190px;
  height: 190px;
  position: absolute;
  left: 540px;
  top: 778px;
}