roll20-character-sheets/Lion & Dragon/LionDragon.css

@import url("https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap");
.ui-dialog .charsheet select, .ui-dialog .charsheet textarea, .ui-dialog .charsheet input, .ui-dialog .charsheet .uneditable-input {
  all: unset; }
.ui-dialog .charsheet select, .ui-dialog .charsheet textarea, .ui-dialog .charsheet input, .ui-dialog .charsheet .uneditable-input {
  border: 1px solid black;
  border-width: 0px 0px 1px;
  -webkit-border-radius: initial;
  -moz-border-radius: initial; }
.ui-dialog .charsheet textarea {
  resize: vertical;
  min-height: 3.5em;
  white-space: pre-wrap; }
.ui-dialog .charsheet select, .ui-dialog .charsheet input, .ui-dialog .charsheet .uneditable-input {
  padding: initial; }
.ui-dialog .charsheet select {
  appearance: none;
  text-transform: uppercase; }
  .ui-dialog .charsheet select > * {
    text-align: center; }
.ui-dialog .charsheet label {
  width: unset;
  margin: unset; }
.ui-dialog .charsheet input {
  width: 100%; }
  .ui-dialog .charsheet input:placeholder {
    color: #ededed80; }
  .ui-dialog .charsheet input.circle {
    border-radius: 50%; }
  .ui-dialog .charsheet input.plus-control:not([value*="-"]) + span:before {
    content: '+'; }
.ui-dialog .charsheet .right {
  align-text: right; }
.ui-dialog .charsheet span, .ui-dialog .charsheet input, .ui-dialog .charsheet textarea {
  font-size: 1em; }
.ui-dialog .charsheet > main h1, .ui-dialog .charsheet > main h2, .ui-dialog .charsheet > main h3,
.ui-dialog .charsheet > main .h1, .ui-dialog .charsheet > main .h2, .ui-dialog .charsheet > main .input-label.large > input, .ui-dialog .charsheet > main .h3 {
  text-transform: uppercase;
  font-weight: bold; }
.ui-dialog .charsheet > main .hidden {
  display: none !important; }
.ui-dialog .charsheet > main .italics {
  font-style: italic; }
.ui-dialog .charsheet > main :is(h1,h2,h3,h4,h5,.h1,.h2,.h2,.h3,.h4,.h5,span) {
  line-height: normal;
  text-transform: capitalize; }
.ui-dialog .charsheet > main h1, .ui-dialog .charsheet > main .h1 {
  display: block;
  white-space: nowrap;
  margin-top: 0px;
  margin-bottom: 0px; }
.ui-dialog .charsheet > main h2, .ui-dialog .charsheet > main .h2, .ui-dialog .charsheet > main .input-label.large > input {
  display: block;
  white-space: nowrap;
  margin-top: 0px;
  margin-bottom: 0px; }
.ui-dialog .charsheet > main h3, .ui-dialog .charsheet > main .h3 {
  display: block;
  white-space: nowrap;
  margin-top: 0px;
  margin-bottom: 0px; }
.ui-dialog .charsheet > main h4, .ui-dialog .charsheet > main .h4 {
  display: block;
  white-space: nowrap;
  margin-top: 0px;
  margin-bottom: 0px; }
.ui-dialog .charsheet > main h5, .ui-dialog .charsheet > main .h5 {
  display: block;
  white-space: nowrap;
  margin-top: 0px;
  margin-bottom: 0px; }
.ui-dialog .charsheet > main button {
  display: grid;
  place-items: center; }
.ui-dialog .charsheet > main h1, .ui-dialog .charsheet > main .h1, .ui-dialog .charsheet > main button[type='roll'].h1, .ui-dialog .charsheet > main button[type='action'].h1 {
  font-size: 3em; }
.ui-dialog .charsheet > main h2, .ui-dialog .charsheet > main .h2, .ui-dialog .charsheet > main .input-label.large > input, .ui-dialog .charsheet > main button[type='roll'].h2, .ui-dialog .charsheet > main button[type='action'].h2 {
  font-size: 2em; }
.ui-dialog .charsheet > main h3, .ui-dialog .charsheet > main .h3, .ui-dialog .charsheet > main button[type='roll'].h3, .ui-dialog .charsheet > main button[type='action'].h3 {
  font-size: 1.5em; }
.ui-dialog .charsheet > main h4, .ui-dialog .charsheet > main .h4, .ui-dialog .charsheet > main button[type='roll'].h4, .ui-dialog .charsheet > main button[type='action'].h4 {
  font-size: 1em;
  font-weight: bold; }
.ui-dialog .charsheet > main h5, .ui-dialog .charsheet > main .h5, .ui-dialog .charsheet > main button[type='roll'].h5, .ui-dialog .charsheet > main button[type='action'].h5 {
  font-size: 1em;
  font-style: italic; }
.ui-dialog .charsheet > main .pictos {
  font-family: pictos;
  text-transform: initial; }
.ui-dialog .charsheet > main .pictos3 {
  font-family: pictos three;
  text-transform: initial; }
.ui-dialog .charsheet > main .pictoscustom {
  font-family: pictos custom;
  text-transform: initial; }
.ui-dialog .charsheet > main input[type=checkbox] {
  border-radius: 50%; }
.ui-dialog .charsheet > main input[type=number] {
  width: 2em;
  -moz-appearance: textfield !important;
  text-align: center; }
  .ui-dialog .charsheet > main input[type=number]::-webkit-inner-spin-button, .ui-dialog .charsheet > main input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; }
.ui-dialog .charsheet > main textarea.fixed {
  resize: none;
  overflow: auto; }
.ui-dialog .charsheet > main section {
  min-width: 779px;
  margin-top: 1em; }
  .ui-dialog .charsheet > main section.page {
    display: none; }
.ui-dialog .charsheet > main .pseudo-button {
  display: inline;
  cursor: pointer;
  border-radius: 5px;
  text-transform: uppercase;
  border: 1px solid black;
  text-align: center;
  padding: 0 5px; }
.ui-dialog .charsheet > main .input-label {
  display: inline-grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-template-areas: "over" "under";
  place-items: center; }
  .ui-dialog .charsheet > main .input-label > input {
    border-width: 0px 0px 1px;
    border-style: solid;
    border-color: black;
    text-align: center; }
  .ui-dialog .charsheet > main .input-label > span {
    text-align: center; }
  .ui-dialog .charsheet > main .input-label.under > span:last-of-type {
    grid-area: under; }
  .ui-dialog .charsheet > main .input-label.over > span:last-of-type {
    grid-area: over; }
.ui-dialog .charsheet > main .dual.input-label {
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 'over 	over 	over' 'under 	under 	under'; }
  .ui-dialog .charsheet > main .dual.input-label > span:last-of-type {
    grid-column: 1 / -1; }
  .ui-dialog .charsheet > main .dual.input-label > input {
    width: 100%; }
  .ui-dialog .charsheet > main .dual.input-label > .slash {
    line-height: 0em;
    font-weight: normal; }
.ui-dialog .charsheet > main .headed-textarea {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto; }
.ui-dialog .charsheet > main .input-label.boxed > input,
.ui-dialog .charsheet > main :not(.input-label).boxed {
  border: 1px solid black; }
.ui-dialog .charsheet > main .ratio1-1 {
  aspect-ratio: 1/1; }
.ui-dialog .charsheet > main .repeat-columns {
  display: grid;
  grid-gap: 0.5em;
  place-items: center; }
.ui-dialog .charsheet > main .repcontainer > .repitem {
  grid-gap: 0.5em;
  margin-bottom: 0.5em;
  display: grid; }
  .ui-dialog .charsheet > main .repcontainer > .repitem .itemcontrol {
    grid-column: 1 / -1;
    place-self: start stretch; }
  .ui-dialog .charsheet > main .repcontainer > .repitem > span {
    place-self: center; }

.page-1-radio:checked ~ #page-1 {
  display: grid; }

.page-2-radio:checked ~ #page-2 {
  display: grid; }

#page-1-radio:checked ~ #general > #page-1-label {
  background-color: black;
  color: white; }

#page-2-radio:checked ~ #general > #page-2-label {
  background-color: black;
  color: white; }

.page-all-radio:checked ~ #general > #page-all-label {
  background-color: black;
  color: white; }

#general {
  grid-area: general; }

#ability-scores {
  grid-area: ability-scores; }

#defenses {
  grid-area: defenses; }

#arms {
  grid-area: arms; }

#defensive-combat {
  grid-area: defensive-combat; }

#equipment {
  grid-area: equipment; }

#skills {
  grid-area: skills; }

#benefits {
  grid-area: benefits; }

#experience {
  grid-area: experience; }

#miracles {
  grid-area: miracles; }

#prepared {
  grid-area: prepared; }

#wealth {
  grid-area: wealth; }

#general {
  display: grid;
  grid-template-columns: repeat(3, auto) repeat(3, 1fr) 5em;
  grid-template-rows: repeat(4, auto);
  grid-gap: 1em;
  place-items: start stretch;
  grid-template-areas: "header 		header 			header 			character-name 	character-name				class 			level" "header 		header 			header 			alignment 		social-class 	background-area	experience" "detail 		background 		all 			alignment 		social-class 	background-area	experience" "saving-throw 	saving-throw 	saving-throw	languages 		languages 					languages		languages"; }
  #general > .sheet-head {
    grid-area: header;
    font-family: UnifrakturCook;
    text-transform: capitalize;
    font-size: 4em; }
  #general > .saving-throw {
    align-self: center;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: auto;
    grid-gap: 1em;
    place-items: center;
    place-content: center end; }
  #general .character-name {
    grid-area: character-name; }
  #general .class {
    grid-area: class; }
  #general .level {
    grid-area: level; }
  #general .alignment {
    grid-area: alignment; }
  #general .saving-throw {
    grid-area: saving-throw; }
  #general .social-class {
    grid-area: social-class; }
  #general .languages {
    grid-area: languages; }
  #general .experience {
    grid-area: experience; }
  #general .background {
    grid-area: background-area; }

#page-1 {
  grid-template-columns: auto auto 2fr;
  grid-template-rows: repeat(4, auto);
  grid-gap: 1em;
  grid-template-areas: "ability-scores	ability-scores		defenses" "skills 		skills				benefits" "arms			arms				arms" "equipment		defensive-combat	defensive-combat"; }

#page-2 {
  grid-template-columns: 20em 10em repeat(2, minmax(auto, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-gap: 1em;
  grid-template-areas: "miracles 		miracles 		lores	 		lores" "wealth 		grimoires 		grimoires 		grimoires" "lineage 		lineage 		retainers 		influence" "information 	information 	information 	information"; }

#ability-scores {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(2, auto);
  grid-gap: 1em;
  grid-template-areas: "scores derivatives" "injuries injuries"; }
  #ability-scores > .scores {
    grid-area: scores;
    display: grid;
    grid-template-columns: auto 3em auto;
    grid-gap: 0.5em;
    place-items: center;
    place-self: start; }
  #ability-scores > .derivatives {
    padding-left: 0.5em;
    border-left: 1px dashed #DCDCDC40;
    grid-area: derivatives;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 0.5em;
    place-self: stretch start;
    place-items: center;
    place-content: space-evenly stretch; }
    #ability-scores > .derivatives span {
      place-self: center start;
      text-align: left; }

#defenses {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(3, auto) 1fr;
  grid-gap: 0.5em;
  grid-template-areas: "armor-class 	shielded 	armor		armor" "armor-class 	shielded	shield		shield" "hp				hp_max		initiative	base-attack" "injuries		injuries 	injuries	injuries"; }
  #defenses > .armor-class {
    grid-area: armor-class; }
  #defenses > .shielded {
    grid-area: shielded; }
  #defenses > .armor {
    grid-area: armor; }
  #defenses > .shield {
    grid-area: shield; }
  #defenses > .hp {
    grid-area: hp; }
  #defenses > .hp_max {
    grid-area: hp_max; }
  #defenses > .initiative {
    grid-area: initiative; }
  #defenses > .base-attack {
    grid-area: base-attack; }
  #defenses > .injuries {
    grid-area: injuries; }

#skills > .repcontainer > .repitem {
  grid-template-columns: 1fr repeat(2, auto); }

#benefits > .repcontainer > .repitem {
  grid-template-rows: auto 1fr; }

#arms > .repeat-columns,
#arms > .repcontainer > .repitem {
  grid-template-columns: 1fr [name] 98px [ability] 3em [total] 2em [misc] 0.5fr [damage] 98px [dam-ability] 2em [dam-misc] 7em [range] 1fr [notes] 29px [button]; }
#arms > .repcontainer > .repitem > input {
  text-align: center; }
#arms > .repcontainer > .repitem > input:first-of-type,
#arms > .repcontainer > .repitem > input:last-of-type {
  text-align: left; }
#arms > .repcontainer > .repitem > button {
  margin: 0; }

#defensive-combat > .repeat-columns,
#defensive-combat > .repcontainer > .repitem {
  grid-template-columns: 1fr [name] 98px [select] 3em [total] 2em [misc] 0.5fr [block] 98px [block-select] 2em [block-misc] 29px [partial] 29px [full]; }
#defensive-combat > .repcontainer > .repitem > input {
  text-align: center; }
#defensive-combat > .repcontainer > .repitem > input:first-of-type {
  text-align: left; }
#defensive-combat > .repcontainer > .repitem > button:before {
  content: ''; }

#equipment {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(3, auto);
  grid-template-areas: "header header" "label encumbrance" "repcontainer repcontainer";
  grid-gap: 0.5em; }
  #equipment > .repcontainer {
    grid-area: repcontainer; }
    #equipment > .repcontainer > .repitem {
      grid-template-columns: 1fr auto; }
  #equipment > .header {
    grid-area: header; }
  #equipment > .label {
    grid-area: label;
    color: black;
    padding: 0;
    place-self: center right; }
  #equipment > input {
    grid-area: encumbrance; }

#miracles {
  grid-area: miracles; }

#lores {
  grid-area: lores; }

#miracles > .repcontainer > .repitem, #lores > .repcontainer > .repitem {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  grid-template-areas: "name 			custom-mod 	total-mod 	button" "description 	description description description"; }
  #miracles > .repcontainer > .repitem > textarea, #lores > .repcontainer > .repitem > textarea {
    grid-area: description; }

#grimoires {
  grid-area: grimoires; }
  #grimoires > textarea {
    min-height: 6em; }

#prepared {
  grid-area: prepared; }

#wealth {
  grid-area: wealth;
  display: grid;
  grid-row-gap: 1em;
  grid-template-columns: repeat(6, auto) 1fr;
  grid-template-rows: repeat(2, auto);
  grid-template-areas: "header			header			header			header			header			header 			header" "Llabel 		Linput			Slabel 			Sinput 			Plabel 			Pinput ." "repcontainer 	repcontainer 	repcontainer 	repcontainer 	repcontainer 	repcontainer repcontainer"; }
  #wealth > h3 {
    grid-area: header; }
  #wealth > input {
    text-align: left;
    width: 4em;
    padding-left: 0.5em; }
  #wealth > #wealth-section {
    grid-area: repcontainer; }
    #wealth > #wealth-section > .repcontainer > .repitem {
      display: grid;
      grid-template-columns: 1fr auto; }

#lineage {
  grid-area: lineage; }

#retainers {
  grid-area: retainers; }

#influence {
  grid-area: influence; }

#information {
  grid-area: information; }

/*
	Roll Template Styling
*/
.sheet-rolltemplate-lion_dragon {
  border: 1px solid black;
  background-color: white;
  border-radius: 3px; }
  .sheet-rolltemplate-lion_dragon * {
    white-space: pre-wrap; }
  .sheet-rolltemplate-lion_dragon > div {
    padding: 5px; }
  .sheet-rolltemplate-lion_dragon .sheet-header {
    border-radius: 0 0 3px 3px;
    display: grid;
    grid: repeat(2, 1fr);
    background-color: black; }
    .sheet-rolltemplate-lion_dragon .sheet-header * {
      color: white;
      text-transform: capitalize; }
    .sheet-rolltemplate-lion_dragon .sheet-header .sheet-title {
      justify-self: start; }
    .sheet-rolltemplate-lion_dragon .sheet-header .sheet-character_name {
      justify-self: end; }
  .sheet-rolltemplate-lion_dragon > div:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px; }
  .sheet-rolltemplate-lion_dragon > div:not(.sheet-header) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr); }
    .sheet-rolltemplate-lion_dragon > div:not(.sheet-header):nth-child(odd) {
      background-color: #eee; }
    .sheet-rolltemplate-lion_dragon > div:not(.sheet-header).sheet-dc-compare {
      grid-template-columns: 1fr auto 1fr; }
  .sheet-rolltemplate-lion_dragon .sheet-vs {
    text-transform: uppercase;
    font-weight: bold; }
  .sheet-rolltemplate-lion_dragon .sheet-label {
    text-transform: capitalize;
    font-weight: bold; }
  .sheet-rolltemplate-lion_dragon .sheet-roll, .sheet-rolltemplate-lion_dragon .sheet-dc {
    place-self: center; }
  .sheet-rolltemplate-lion_dragon .sheet-description {
    grid-template-rows: auto auto; }
    .sheet-rolltemplate-lion_dragon .sheet-description > * {
      grid-column: span 2; }
  .sheet-rolltemplate-lion_dragon .inlinerollresult {
    position: relative; }
    .sheet-rolltemplate-lion_dragon .inlinerollresult, .sheet-rolltemplate-lion_dragon .inlinerollresult.fullcrit, .sheet-rolltemplate-lion_dragon .inlinerollresult.fullfail, .sheet-rolltemplate-lion_dragon .inlinerollresult.importantroll {
      border: none;
      background-color: transparent; }
    .sheet-rolltemplate-lion_dragon .inlinerollresult.fullcrit {
      color: green; }
    .sheet-rolltemplate-lion_dragon .inlinerollresult.fullfail {
      color: red; }
    .sheet-rolltemplate-lion_dragon .inlinerollresult.importantroll {
      color: blue; }

/*# sourceMappingURL=LionDragon.css.map */