@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; }