roll20-character-sheets/HarnMaster3/harnstyle.css

@import url('https://fonts.googleapis.com/css?family=Uncial+Antiqua|Roboto+Slab:wght@200|Inconsolata:wght@300&display=swap'); 

/* COLORS */

:root {
	/* light theme */
  --bgs-light: #f7f7f7f1; 
  --bgd-light: #a27800; 
  --bgi-light: #ffffff99;
  --bgir-light: #ffffff00;
  --bgg-light: #ffffd7;
  --tcd-light: #262626;
  --tcl-light: #ffffd7;
  --tch-light: #0087ff;
  --hlr-light: #ffea81b3;
  --bbg-light: #fff5aa; 
	/* dark theme */
  --bgs-dark: #1c1c1cf1;
  --bgd-dark: #af8700; /* always keep section titles the same background */
  --bgi-dark: #ffffff21;
  --bgir-dark: #00000000;  
  --bgg-dark: #262626c2;
  --tcd-dark: #e4e4e4;
  --tcl-dark: #e4e4e4;
  --tch-dark: #0087ff;
  --hlr-dark: #484845b3;
  --bbg-dark: #1c1c1cf1;
}

body {
  --background-sheet: var(--bgs-light);
  --background-dark: var(--bgd-light); /* TODO rename variable, unclear now */
  --background-input: var(--bgi-light);
  --background-inputro: var(--bgir-light);
  --background-grid: var(--bgg-light);
  --textcolor-dark: var(--tcd-light);
  --textcolor-light: var(--tcl-light);
  --textcolor-highlight: var(--tch-light);
  --highlight-row: var(--hlr-light);
  --button-background: var(--bbg-light);
}

/* VTT dark mode styling (from previous dark theme) */
body.sheet-darkmode  {
  --background-sheet: var(--bgs-dark);
  --background-dark: var(--bgd-dark); /* TODO rename variable, unclear now */
  --background-input: var(--bgi-dark);
  --background-inputro: var(--bgir-dark);
  --background-grid: var(--bgg-dark);
  --textcolor-dark: var(--tcd-dark);
  --textcolor-light: var(--tcl-dark);
  --textcolor-highlight: var(--tch-dark);
  --highlight-row: var(--hlr-dark);
  --button-background: var(--bbg-dark);
}

body.sheet-darkmode ~ div img {
	filter: invert(100%);
}

body.sheet-darkmode .unmounted-display img,
body.sheet-darkmode .mounted-display img {
	filter: invert(85%);
}

body.sheet-darkmode .sheetform {
	background-color: transparent;
}

body.sheet-darkmode .characterviewer {
	/* background-image: none; */
	background-image: url(https://github.com/olafvantol/roll20-character-sheets/blob/4850f0511913bbe0a9b0fdb6e58a7f83f53d1d3d/HarnMaster3_v2/holmgang_by_noiseman433_d2xrib.jpg?raw=true); 
	background-blend-mode: color-burn;
	background-color: #000000cc;
}

body.sheet-darkmode .nav-tabs {
	background-color: transparent;
}

body.sheet-darkmode .characterviewer .nav-tabs>li>a {
	background-color: #ffffff21;
}

body.sheet-darkmode h3 {
	color: var(--textcolor-dark);
}

body.sheet-darkmode button.btn {
	filter: invert(1);
}

body.sheet-darkmode .sectionwrapper label,
body.sheet-darkmode .sectionwrapper input {
	color: var(--tcd-light);
}

/* coloring some elements outside the basis character sheet */ 

.characterviewer {
	/* color: var(--tcd-light); */
	background-color: #f7f7f7;
	background-image: url(https://github.com/olafvantol/roll20-character-sheets/blob/4850f0511913bbe0a9b0fdb6e58a7f83f53d1d3d/HarnMaster3_v2/holmgang_by_noiseman433_d2xrib.jpg?raw=true); 
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.nav-tabs {
	background-color: #fff;
	border-radius: 0px 0px 5px 5px;
}

.characterviewer .nav-tabs>li.active>a {
	background-color: var(--bgs-light);
}

/* end color schemes */

.charsheet {
	margin-left: 13px;
}


/*Configure the tab buttons*/

.tab-buttons {
	/* float: right; */
	position: -webkit-sticky;
	position: sticky;
	top: 110px;
	z-index:1000;
	padding: 10px;
	width: fit-content;
	/* margin-right: 2em;  prevent overlap with edit button */
}

.ui-dialog .charsheet .tab-buttons > button {
  position: absolute; /* Position them relative to the browser window */
  left: -155px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px 5px; /* 15px padding */
  width: 130px; /* Set a specific width */
  font-size: 1.5em; /* Increase font size */
  /* color: white; White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
  background-color: var(--button-background);
  color: var(--textcolor-dark);
  text-align: right;
  border-color: #CCC;
}

.buttonicon {
   font-family: pictos;
}

.ui-dialog .charsheet .tab-buttons > button:hover {
  left: -55px; /* On mouse-over, make the elements appear as they should */
}

#chartab {
	top: 20px;
}

#inventab {
	top: 80px;
}

#settingstab {
	top: 140px;
}

.character,
.inventory,
.settings {
	display: none;
	color: var(--textcolor-dark);
	background-color: var(--background-sheet);	 
	margin-top: -36px;
	padding-top: 18px;
}

.settings {
	min-height: 700px;
}

/* highlight the button for selected tab */

.tabshighlight[value="character"] ~ #chartab,
.tabshighlight[value="inventory"] ~ #inventab,
.tabshighlight[value="settings"] ~ #settingstab {
	background-color: var(--background-dark);
}

/* show the selected tab */
.tabstoggle[value="character"] ~ div.character,
.tabstoggle[value="inventory"] ~ div.inventory,
.tabstoggle[value="settings"] ~ div.settings {
	display: block;
}

/* GRID */

.character-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(16, auto);
  grid-row-gap: 1em;
  grid-column-gap: 0.5em;
  width: 99%;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(7, auto) ;
  grid-row-gap: 1em;
  grid-column-gap: 0.5em;
  width: 99%;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-row-gap: 1em;
  grid-column-gap: 1em;
  width: 99%;
}

.character-grid-section,
.inventory-grid-section {
   padding: 0px 3px;	
   grid-row-gap: 2px;
}

.personal {
  grid-column-start: 1;
  grid-column-end: 5;
}

.attribs {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row: 1 / span 2;  
}

.family {
  grid-column-start: 9;
  grid-column-end: 13;
  grid-row: 1 / span 2;
}

.physical {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row: 2;
}
	
.section-title {
  grid-column: 1 / span 12;
}

.sectionoptions ~ span,
.sectionoptions ~ input {
   align-self: center;
}

.sectionoptions ~ span {
	justify-self: right;
}

.sectionoptions ~ input {
	justify-self: left;
	width: auto !important;
}

.section-title-half {
  grid-column: 1 / span 5;
}

.skills {
  grid-column: span 4;
}

.combat {
  grid-column: 1 / span 3;
  grid-row: 7;
}

.load {
  grid-column: 4 / span 2;	
  grid-row: 7;
}

.penalties {
	grid-column: 6 / span 2;
	grid-row: 7;
}

.injuries {
	grid-column: 1 / span 7;
	grid-row: 8;
}

.armorprotection {
	grid-column: 8 / span 5;
	grid-row: 7 / span 2;
}

.carriedweapons {
  grid-column: 1 / span 12;
  grid-row: 9;  
}

.carriedmissileweapons {
  grid-column: 1 / span 12;
  grid-row: 10;
}

.magic {
  grid-column: 1 / span 9;
}

input[type="hidden"].showsinglepiety[value="1"] ~ .magic {
  grid-column: 1 / span 12;
}

.piety {
  grid-column: 10 / span 3;	
  grid-row: 12 / span 3;
}

.basichorseinfo {
  grid-column: 1 / span 12;
  height: 3em;
  align-content: center;
}

.horseattribs {
  grid-column: 1 / span 3;
}

.horseabilities {
  grid-column: 4 / span 3;
}

.horsecombat {
  grid-column: 7 / span 3;
}

.horseload {
  grid-column: 10 / span 3;
}

.horseap  {
  grid-column: 1 / span 5;
}

.horseinjuries {
  grid-column: 6 / span 5;
  grid-row: span 2;
}

.horseattacks {
  grid-column: 1 / span 5;

}

.horsepenalties {
  grid-column: 11 / span 2;
  grid-row: span 2;
}

.inven-weapons {
  grid-column: 1 / span 12;	
}

.inven-missileweapons {
  grid-column: 1 / span 12;	
}

.inven-armor {
  grid-column: 1 / span 12;	
}

.inven-personal {
  grid-column: 1 / span 6;
  grid-row: 5 / span 2;  
}

input[type="hidden"].showhorse[value="0"] ~ .inven-personal {
  grid-column: 1 / span 12;
  grid-row: 5 / span 2;  
}

.inven-horse {
  grid-column: 7 / span 6;
  grid-row: 5;  
}

.inven-horsearmor {
  grid-column: 7 / span 6;	
  grid-row: 6;
}

.inven-moneypersonal {
  grid-column: 1 / span 4;	
  grid-row: 7;
}

.inven-moneybank {
	grid-column: 5 / span 4;
	grid-row: 7;  
}

.inven-moneygroup {
	grid-column: 9 / span 4;
	grid-row: 7;  
}

.inven-notes {
	grid-column: 1 / span 12;
	grid-row: 8; 
}

.settingsgroup {
	grid-column: span 6;
	display: grid;
    grid-template-columns: 1fr 2em;
	align-content: baseline;
	grid-row-gap: 5px;
} 

/* SUB-GRIDS */

.personal-grid {
  display: grid;
  grid-template-columns: 70px auto;
  grid-auto-rows: auto;
  grid-auto-flow: column;
  align-items: center;
}

.personal-grid label {
  grid-column: 1;
}

.personal-grid input,
.personal-grid select {
  grid-column: 2;
}

.physical-grid {
  display: grid;
  grid-template-columns: 5.5em 1fr 5.5em 1fr;
  grid-auto-flow: row;
  align-items: center;
}

.attribs-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr 1fr 2.5em);
   grid-template-rows: 2em;
   align-items: center;
}

.family-grid {
   display: grid;
   grid-template-columns: 90px 1fr;
   align-items: center;
}

.skills-grid,
.skills-grid .repcontainer > .repitem {
   display: grid;
   grid-template-columns: 1fr 2.2em 2.5em 2.5em 2.2em;
   align-content: baseline;
}

.combat-grid {
   display: grid;
   grid-template-columns: 1fr 2.5em 2.5em;
   align-items: center;	
   align-content: baseline;
}

.armorprotection-grid,
.armorprotection-grid > .sectionwrapper {
   display: grid;
   grid-template-columns: 6em 1fr 2em 2em 2em 2em;
   align-items: center;	
}

.load-grid, .penalties-grid, .horseload-grid, .horsepenalties-grid {
   display: grid;
   grid-template-columns: 1fr 2.6em;
   align-items: center;		
   align-content: baseline;
}

.injuries-grid,
.injuries-grid .repcontainer > .repitem,
.horseinjuries-grid,
.horseinjuries-grid .repcontainer > .repitem {
   display: grid;
   grid-template-columns: 1fr 3.5em repeat(4, 2.5em) 2em;
   align-items: center;	
   align-content: baseline;
}

.weapons-grid,
.weapons-grid .repcontainer > .repitem {
   display: grid;
   grid-template-columns: 8.5em 1em repeat(3, 2.2em) repeat(2, 2.7em) repeat(5, 2.2em) 2.7em 2.7em 2.3em 2.5em 2.3em 2.2em 1fr;
   align-items: center;	
   align-content: baseline;	
}

.missileweapons-grid,
.missileweapons-grid .repcontainer > .repitem {
   display: grid;
   grid-template-columns: 8.5em 1.5em 1.5em 2.2em 2.5em repeat(4, 4.5em 2.5em 2.5em 2.2em) 1fr;
   align-items: center;	
   align-content: baseline;	
   font-size: 0.9em;
}

.mw-extraranges {
	display: contents;
}

.magic-grid,
.magic-grid .repcontainer > .repitem {
   display: grid;
   grid-template-columns: 1.5fr 110px 0.5fr repeat(3, 3em) 4em repeat(3, 3em) 2.2em ;
   align-items: center;	
   align-content: baseline;	
}

.magic-grid input.magic-note {
	grid-column: span 10;
}

input[type="hidden"].showsinglepiety[value="0"] ~ .piety-grid,
input[type="hidden"].showsinglepiety[value="0"] ~ .piety-grid .repcontainer > .repitem {
   display: grid;
   grid-template-columns: 1fr 2.5em;
   align-items: center;	
   align-content: baseline;	
}

.bhigrid {
   display: grid;
   grid-template-columns: repeat(3, auto 1fr);
   align-items: center;	
   align-content: center;	
   justify-items: left;
}

.horseattribs-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   align-items: center;	
   align-content: baseline;	
}

.horseabilities-grid {
   display: grid;
   grid-template-columns: 1fr 2em 2.5em 2.5em;
   align-items: center;	
   align-content: baseline;		
}

.horsecombat-grid {
   display: grid;
   grid-template-columns: 1fr 3em 2.5em;
   align-items: center;	
   align-content: baseline;		
}

.horseap-grid {
   display: grid;
   grid-template-columns: 6em 1fr repeat(5, 1.8em);
   align-items: center;	
   align-content: baseline;		
}

.horseattacks-grid {
   display: grid;
   grid-template-columns: 1fr repeat(6, 2.5em);
   align-items: center;	
   align-content: baseline;		
}

.armorinvengrid,
.armorinvengrid .repcontainer > .repitem  {
   display: grid;
   grid-template-columns: 1fr 1.5em 2.5em repeat(21, 2em);
   align-items: center;	
   align-content: baseline;		
}

.armorinvengrid .repitem > .sectionarmourhead {
   display: inline-grid;
   grid-template-columns: repeat(3, 2em);
   grid-column: span 3;
   height: 100%;
   align-content: center;   
}

.armorinvengrid .repitem > .sectionarmourarms {
   display: inline-grid;
   grid-template-columns: repeat(5, 2em);
   grid-column: span 5;
   height: 100%;
   align-content: center;   
}

.armorinvengrid .repitem > .sectionarmourtorso,
.armorinvengrid .repitem > .sectionarmourlegs {
   display: inline-grid;
   grid-template-columns: repeat(4, 2em);
   grid-column: span 4;
   height: 100%;
   align-content: center;   
}

.armourareawrapper  {
	display:contents;
}


.legacyarmor-grid {
	grid-column: span 12;
	display: grid;
	grid-template-columns: repeat(2, 6em 1fr 2em 2em 2em 2em 2em);
}

.personalinvengrid,
.personalinvengrid .repcontainer > .repitem {
   display: grid;
   grid-template-columns: 1fr 2.5em 2em;
   align-items: center;	
   align-content: baseline;
}

.horseinvengrid,
.horseinvengrid .repcontainer > .repitem {
   display: grid;
   grid-template-columns: 1fr 2.5em;
   align-items: center;	
   align-content: baseline;	
}

.horsearmorinvengrid,
.horsearmorinvengrid .repcontainer > .repitem  {
   display: grid;
   grid-template-columns: 1fr 2.5em 2.5em;
   align-items: center;	
   align-content: baseline;	
}

.moneygrid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   align-items: center;	
   align-content: baseline;	
}

.moneygrid > input[type="text"].money-label {
   grid-column: 2 / span 3;
}

.moneygrid > label {
   grid-column: 1;
}

.moneygrid > input[type="text"] {
   grid-column: 1 / span 3;
}

.moneygrid > input[type="number"] {
   grid-column: 4;
}

/*
empty rule for notegrid, use this for additional styling if desired
.notesgrid {

}
*/

.inven-notes  > textarea {
   grid-column: 1 / -1;
   margin-left: auto;
   margin-right: auto;
   box-sizing: border-box;
   display: block;
   width: 98%;   
}

.injuryrollbutton-grid {
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: 1fr 7em 7em 7em 1fr;   
}

.footnote {
   grid-column: 1 / -1;
   font-style: italic;
   text-align: center;
}

/* repeating sections in subgrids */

.charsheet .repcontainer,
.charsheet .repcontrol  {
	grid-column: 1/-1;
}


/* support div to prevent grid issues with some exceptions */
.wrapper {
   display: contents;
}

/* some background color and border styling classes for subgrids */ 

.colored-grid,
.changelog {
	border: grey 2px solid;
    border-radius: 8px;
	background-color: var(--background-grid);
} 

.bordered-grid {
	border: grey 2px solid;
    border-radius: 8px;
}

.sectionarmourhead {
	background-color: #a7ffa78a;
}

.sectionarmourarms {
	background-color: #ffffa48a;
}

.sectionarmourtorso {
	background-color: #ffdbb68a;
}

.sectionarmourlegs {
	background-color: #aaeaff8a;
}

/* END GRIDS and SUB-GRIDS */

/* overwrite some roll20 default styling */


body {
	font-size: 12px;
}

.ui-dialog .charsheet label,
.ui-dialog .charsheet input,
.ui-dialog .charsheet select {
	margin-bottom: 0px;
	color: var(--textcolor-dark);
	background-color: var(--background-input);
}

.tab-content p {
	font-size: 1em;
}

.charsheet input[type=checkbox] {
	height: 1.5em;
    width: 1.5em;
}

.charsheet h2 {
	font-size: 2em;
	line-height: 3em;
}

.characterviewer .charsheet label {
	font-weight: normal;
	font-size: 1em;
}

.ui-dialog .charsheet label {
    width: auto;
}

.ui-dialog .charsheet button {
	font-size: 1em;
}

label, input, button, select, textarea {
    font-size: 1em;
    font-weight: normal;
    /* line-height: 18px; */
}


/* Headers */

.charactersheet h1,
.charactersheet h2.tab-header {
	font-family: 'Uncial Antiqua', cursive;
	color: #a02c0a;
}

.charactersheet h2 {
	font-family: 'Roboto Slab', serif;
    color: var(--textcolor-dark);
}

.tab-header {
	margin-left: 75px;
}


h1.tab-header {
	padding-bottom: 60px;
}

h2.tab-header {
	margin-top: -155px;
}

.skill-section-title {
	grid-column: 1/-1;
	background-color: var(--background-dark);
	color: var(--textcolor-light);
	font-size: larger;
	font-family: 'Roboto Slab', serif;
	text-align: center;
	padding: 0.2em 0px;
	align-self: flex-start;
	justify-self: stretch;
	margin: 0px -3px;
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;	
}

.skill-header {
	font-family: 'Roboto Slab', serif;
	padding: 3px 0px;
	border-bottom: 2px black solid;
	color: var(--textcolor-dark);
	text-transform: uppercase;
}

.missileweapons-grid > .skill-header {
    font-size: smaller;
}

.armorprotection > .skill-header {
	background-color: var(--background-grid);
}

/* input boxes and labels. Incl overwrite roll20 styling: set width to 99%, size will be determined by grid. */

.ui-dialog .charsheet select,
.ui-dialog .charsheet input,
.ui-dialog .charsheet input[type=number] {
	width: 99%;
}

.charactersheet input[type=number]::-webkit-outer-spin-button,
.charactersheet input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

.charactersheet  input.charsheet[type=text] {
	text-align: left;
}

select.skill-label,
input.skill-label,
input.skill-value, 
input.armor-label, 
input.weapon-label, 
input.magic-label, 
input.piety-label,
input.inventory-label,
input.money-label,
textarea.notes {
   background-color: var(--background-input);
}

input.skill-label[readonly],
input.skill-value[readonly], 
input.armor-label[readonly], 
input.weapon-label[readonly], 
input.magic-label[readonly], 
input.piety-label[readonly] {
   background-color: var(--background-inputro);
   border: none;
}

.personal-grid input,
.personal-grid select,
.attribs-grid input,
.family-grid input,
.physical-grid input,
.horseattribs-grid input,
.horseattribs-grid input:read-only {
	border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;	
	border-left-style: none;
	background-color: var(--background-grid);
}

.settings-grid select {
	background-color: var(--background-grid);
}

.horseattribs-grid input:read-only {
	border-color: #ccc;
	border-style: solid solid solid none;
	border-width: 1px;
}

.personal-grid label,
.attribs-grid label,
.family-grid label,
.physical-grid label,
.horseattribs-grid label {
	border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;	
	border-left-style: solid;
	border-top-style: solid;
	border-bottom-style: solid;
	border-color: #ccc;
	border-width: 1px;
	background-color: var(--background-grid);
	text-transform: uppercase;
    font-family: 'Roboto Slab', serif;
    font-weight: normal;
}

.armorprotection-grid label {
	text-transform: uppercase;
    font-family: 'Roboto Slab', serif;
    font-weight: normal;	
}

.characterviewer .charsheet .personal-grid label,
.characterviewer .charsheet .family-grid label,
.characterviewer .charsheet .physical-grid label,
.characterviewer .charsheet .horseattribs-grid label {
	height:2.7em;
	font-size: 0.8em;
}

.physical-grid label,
.attribs-grid label,
.horseattribs-grid label {
	margin-left: 0.5em;
}

.ui-dialog .charsheet .attribs-grid input,
.ui-dialog .charsheet .horseattribs-grid input{
	width: 2.5em;
	font-size: 1.1em;
}

.attribs-grid label,
.charsheet .attribs-grid input,
.horseattribs-grid label,
.charsheet .horseattribs-grid input {
	height:33px;
	box-sizing: content-box;
	padding-top:0px;
	padding-bottom: 0px;
}

.labelinputjoin {
	background-color: var(--background-grid);
	border-color: #ccc;
	border-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
    height: 100%;
    box-sizing: border-box;	
}

.sumrow {
	background-color: var(--highlight-row) !important; /* resorting to important, roll20 styling keeps getting in the way */
	color: var(--textcolor-highlight)!important; /* resorting to important, roll20 styling keeps getting in the way */
	font-weight: bold;
}

label.sumrow {
   padding: 4px 0 4px 3px !important; /* resorting to important, roll20 styling keeps getting in the way */
}

.charsheet .magic-grid label {
	text-transform: uppercase;
    font-size: smaller;
    font-family: 'Roboto Slab', serif;
    font-weight: normal;
    text-align: end;
	padding-right: 1em;
}

/* disable spinners in Firefox too */

.charactersheet input[type=number] {
	-moz-appearance: textfield;
}

/* SHOW and HIDE sections */

input.toggle-show-spells:not(:checked) ~ div.mr-spells {
    display: none;
}

input.toggle-show-rituals:not(:checked) ~ div.mr-rituals {
    display: none;
}

input.toggle-show-psionic:not(:checked) ~ div.mr-psionic {
    display: none;
}

div.weapon-display, div.missileweapon-display {
	display:none;
}

input.display-carried-weapon[value="1"] ~ div.weapon-display, input.display-carried-missileweapon[value="1"] ~ div.missileweapon-display {
    display: contents;
}

div.mounted-display, input.display-mounted-status[value="1"] ~ div.unmounted-display {
	display:none;
}

input.display-mounted-status[value="1"] ~ div.mounted-display, div.unmounted-display {
    display: contents;
}

.character-grid fieldset.repeating_weapon~.repcontrol,
.character-grid fieldset.repeating_missileweapon~.repcontrol {
	display: none;
}

input[type="hidden"].showhorse[value="0"] ~ div.horse-grid,
input[type="hidden"].showhorse[value="0"] ~ div.horse-section,
input[type="hidden"].showhorse[value="0"] ~ div.horse-inven-section
{ 
	display: none;
}

input[type="hidden"].showhorse[value="1"] ~ div.horse-section {
	display: contents;
}

input[type="hidden"].showsinglepiety[value="0"] ~ label,
input[type="hidden"].showsinglepiety[value="0"] ~ input,
input[type="hidden"].showsinglepiety[value="1"] ~ .piety-grid,
input[type="hidden"].showsinglepiety[value="1"] ~ .piety-grid .repcontainer > .repitem  { 
	display: none;
}

input[type="hidden"].hidelegacyarmor[value="1"] ~ div.legacyarmor-grid
{ 
	display: none;
}

input[type="hidden"].showupgradenotification[value="0"] ~ div.newversion-notifcation
 {
	display: none;
}

/* VARIOUS STYLING */

.charsheet .avatarbanner {
	background-image: url("https://raw.githubusercontent.com/olafvantol/roll20-character-sheets/master/HarnMaster3/scroll-wide.png");
	margin: -3em 0 0 -3em;
    background-repeat: no-repeat;
    background-size: 100% 190px;
    height: 190px;
    width: 108%;
}

.avatarimage {
	height: 100px;
	width: 100px;
	border: 1px lightgrey solid;
	border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
	float: right;
	margin: 40px 110px 0 0;
	box-shadow: 4px 4px 4px;
}

.charsheet label {
	padding: 0px 3px;
}

.charsheet summary {
	display:list-item;
}

summary::after {
	position: relative;
    bottom: 0.5em;
	font-family: 'Pictos';
	content: " i";
    /* content: "\24D8"; the nice i symbol gets rejected by roll20 css validation*/
    font-style: normal;
    font-weight: bold;
	color: var(--textcolor-highlight);
}

/* display button as a link */

button.buttonaslink {
	background: none;
	border: none;
	padding: 0;
	color: #069;
	text-decoration: underline;
	cursor: pointer;
}

/* replace default roll buttons with d10 to be in line with Harn */

.ui-dialog .charsheet button[type=roll]::before {
	font-family: dicefontd10;
    content: 'A';
}


/* Development roll button */
.ui-dialog .charsheet button[type=roll].skilldev-button::before,
body.sheet-darkmode .ui-dialog .charsheet button[type=roll].skilldev-button::before {
	font-family: 'Pictos';
	content: '{ ';
}

/* Add to turn tracker button */
.ui-dialog .charsheet button[type=roll].turnorder-button::before,
body.sheet-darkmode .ui-dialog .charsheet button[type=roll].turnorder-button::before {
	font-family: 'Pictos';
	content: 't ';
}

/* improve legibility default roll button dark mode */

body.sheet-darkmode .ui-dialog .charsheet button[type=roll]::before {
	font-family: dicefontd10;
    content: 'A';
}

/* center text in number inputs AND value backed spans */
.charactersheet input[type=number],
.charactersheet .skill-value {
	text-align: center;
}

/* graphics for mounted/unmounted status */
.mounted-display img,
.unmounted-display img {
	max-width: 50px;
	max-height: 50px;
	justify-self: center;
}

.changelog {
	margin-top: 2em;
	padding: 1em;
}

.changelog > h3 {
	margin-bottom: 1em;
}

.changelog-summary {
	padding-left: 1em;
    margin-top: -1.2em;
}

summary.changelog-summary::marker {
	margin-left: -0.5em;
}

summary.changelog-summary::after {
	content: "";
}


/* classes to span some columns if needed  */
.width-2col {
   grid-column: span 2;
}

.width-3col {
   grid-column: span 3;
}

.full-width {
	grid-column: 1 / -1;
}

/* version upgrade notification */
.newversion-notifcation {
	border: 1px solid #ffc931;
	background-color: #ffe19e;
	border-radius: 2px;
	clear: both;
	margin-bottom: 2em;
	padding: 1em;
}

button.dismissnotification {
	margin-left: 5em;
}

/* TOOLTIPS */ 
/* Tooltip container */
.harntooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.harntooltip::after {
  content: attr(data-tooltiptext); 
  position:absolute;
  width: 240px;
  height: auto;
  background-color: var(--background-grid);
  color: var(--textcolor-dark);
  font-size: small;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid lightgrey;
  white-space: pre-wrap;
  z-index: 1;
  /* Top position */
  bottom: 140%;
  left: 50%;
  margin-left: -60px; 
  /* hide by default */
  visibility: hidden;
  opacity:0;
  transition:.3s opacity;   
}

.harntooltip:hover::after {
  opacity:1;
  visibility: visible;
}

/* END TOOLTIPS */ 

/* ROLL TEMPLATES */

/* RT colour schemes */
.sheet-rolltemplate-custom .sheet-container.sheet-color-harn {
  --header-bg-color: #a27800;
  --header-text-color: #FFF;
  --main-text-color:#586e75;
  --content-bg-color: #fdf6e3;
  --custom-border-color: #a27800;
  --highlight-text-color: #0087ff;
  --highlight-row-bg: #ffffd7;
  --even-row-bg: #eee8d5;
}

 .sheet-rolltemplate-custom.sheet-rolltemplate-darkmode .sheet-container.sheet-color-harn {
  --header-bg-color: #6c71c4;
  --header-text-color: #FFF;
  --main-text-color:#93a1a1;
  --content-bg-color: #002b36;
  --custom-border-color: #6c71c4;
  --highlight-text-color: #0087ff;
  --highlight-row-bg: #002b36;
  --even-row-bg: #073642;
}

/* VTT dark mode support (make roll results legible) */

.sheet-rolltemplate-custom .sheet-container .sheet-value {
	color: var(--dark-primarytext);
}

/* other RT styling and layout */

.sheet-rolltemplate-custom .sheet-container {
  width: 100%;	
  border: 1px solid;
  border-color: var(--custom-border-color);
}

/* Smaller margins - remove these if you want the huge default left margin */
/* .sheet-rolltemplate-custom {
  margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-custom {
  margin-left: -7px;
} */


/* Header formatting - title and subtitle */
.sheet-rolltemplate-custom .sheet-header {
  background-color: var(--header-bg-color);
  /* change text-align to center to center the header text */
  text-align: left;
  color: var(--header-text-color);
  padding: 5px;
}

.sheet-rolltemplate-custom .sheet-title {
  font-size:1.2em;
  /* font-weight: bold; */
  font-family: 'Roboto Slab', serif;
  padding: 0.2em;
}
.sheet-rolltemplate-custom .sheet-subtitle {
  font-size:0.9em;
}


/* Allprops part */
.sheet-rolltemplate-custom .sheet-content {
  display: grid;
  color: var(--main-text-color);
  background-color: var(--content-bg-color);
  /* Header formatting - modify the column layout below */
  grid-template-columns: auto auto;
  /* Line height to match default roll template */
  line-height:1.4em;
}

.sheet-rolltemplate-custom .sheet-content > div {
  padding: 5px;
}

/* Left column */
.sheet-rolltemplate-custom .sheet-content .sheet-key {
  /* font-weight: bold; */
  padding-right: 10px;
  text-align: right;
}

/* Empty rule, use this if you want to change the right column 
.sheet-rolltemplate-custom .sheet-value {
}
*/

/* Style roll results and infected notice - TODO: consider changing this to be configurable via template */
.sheet-rolltemplate-custom .sheet-infected {
    text-align: center;
    border: 2px solid 	#D8D456;
    background-color: #83AB2C;
    font-weight: bold;
    font-style: oblique;
}

.sheet-rolltemplate-custom .sheet-success {
    grid-column: span 2;
	border: 2px solid #3FB315;
    background-color: #99FF99 !important;
	color: #262626;
    text-align: center;
    font-weight: bold;
}

.sheet-rolltemplate-custom .sheet-failure {
    grid-column: span 2;
	border: 2px solid #CC6600;
    background-color: #FFCC99 !important;
	color: #262626;
    text-align: center;
    font-weight: bold;
}

.sheet-rolltemplate-custom .sheet-crit-success {
    grid-column: span 2;
	border: 2px solid #009900;
    background-color: #00CC00 !important;
	color: #000;
    text-align: center;
    font-weight: bold;
}

.sheet-rolltemplate-custom .sheet-crit-failure {
    grid-column: span 2;
	border: 2px solid #990000;
    background-color: #dc322f !important;
	color: #FFF;
    text-align: center;
    font-weight: bold;
}

/* Style roll target and result rows */
.sheet-rolltemplate-custom .sheet-rolltarget {
	font-weight: bold;
	border-bottom: 1px solid #777;
    border-top: 1px solid #777;
}

.sheet-rolltemplate-custom .sheet-rollresult {
	/* color: var(--highlight-text-color); */
	font-weight: bold !important;
	background-color: var(--highlight-row-bg) !important;
}

/* Make even-numbered rows grey */
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom .sheet-content :nth-child(4n) {
  background: var(--even-row-bg);
}

/* Description field */
.sheet-rolltemplate-custom .sheet-desc {
  grid-column: span 2;
  padding: 5px;
  text-align: center;
  font-weight: bold;
}

/* MOBILE browser (not roll20 app) styling */

@media only screen and (orientation:portrait) and (min-resolution: 192dpi) and (min-width: 490px) {
	body {
		font-size: 36px; /* enlarge font on high-dpi mobile devices */
	}	
}

@media only screen and (orientation:portrait) and (min-resolution: 192dpi),
only screen and (max-width: 480px) {

/* keep the roll20 navbar at the top, space buttons for fingers 
ul.nav-tabs.nav{
    position:sticky;
    top:0;
    z-index:9999;
}
*/

ul.nav.nav-tabs > li > a {
    padding: 1em 0.7em;
}

/* hide avatar banner, not enough screen space on mobile */
.charsheet .avatarbanner {
	display: none;
}
/* change sheet tabs navigation for touch use */
.tab-buttons {
	top: 0px;
	margin-left: auto;
    width: fit-content;
	width: 99%;
}

.ui-dialog .charsheet .tab-buttons > button {
	position: static;
	width: 25%;
	transition: none;
	margin: 0 5px;
	font-size: 1.2em;
	padding: 1em 0.2em;
    width: fit-content;
	border-radius: 5px;
}

.character, .inventory, .settings {
	margin-top: 0px;
}

/* make tab headers more compact for small screen */
h2.tab-header {
    margin-top: 0px;
	float: left;
	margin-left: 50px;
}

h1.tab-header {
    padding-bottom: 1em;
	float: right;
	margin-right: 50px;
}

/* layout all content in one column */

.character-grid {
  grid-template-rows: repeat(23, auto);
}

.inventory-grid {
  grid-template-rows: repeat(10, auto);
}

.personal {
  grid-column-start: 1;
  grid-column-end: 13;
}

.physical {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row: 2;
}

.attribs {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row: 3;

}

.family {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row: 4;

}

.skills {
  grid-column: span 12;
}

.combat {
  grid-column: 1 / span 6;
  grid-row: 13;
}

.load {
  grid-column: 7 / span 3;	
  grid-row: 13;
}

.penalties {
	grid-column: 10 / span 3;
	grid-row: 13;
}

.armorprotection {
	grid-column: span 12;
	grid-row: 14;
}

.injuries {
	grid-column: span 12;
	grid-row: 15;
}

.carriedweapons {
  grid-column: 1 / span 12;
  grid-row: 16;  
}

.carriedmissileweapons {
  grid-column: 1 / span 12;
  grid-row: 17;
}

.magic {
  grid-column: 1 / span 12;
}

.piety {
  grid-column: 1 / span 12;	
  grid-row: 22;
}

.basichorseinfo {
  grid-column: 1 / span 12;
  height: fit-content;
  align-content: center;
}

.horseattribs {
  grid-column: 1 / span 6;
}

.horseabilities {
  grid-column: 7 / span 6;
}

.horsecombat {
  grid-column: 1 / span 12;
}

.horseload {
  grid-column: 1 / span 6;
  grid-row: 6;
}

.horseap  {
  grid-column: 1 / span 12;
}

.horseinjuries {
  grid-column: 1 / span 12;
}

.horseattacks {
  grid-column: 1 / span 12;
  grid-row: 5;
}

.horsepenalties {
  grid-column: 7 / span 6;
  grid-row: 6;
}

.inven-weapons {
  grid-column: 1 / span 12;	
}

.inven-missileweapons {
  grid-column: 1 / span 12;	
}

.inven-armor {
  grid-column: 1 / span 12;	
}

.inven-personal {
  grid-column: 1 / span 12;
  grid-row: 4;
}


.inven-horse {
  grid-column: 1 / span 12;
  grid-row: 5;
}

.inven-horsearmor {
  grid-column: 1 / span 12;	
}

.inven-moneypersonal {
  grid-column: 1 / span 12;	
  grid-row: 7;
}

.inven-moneybank {
	grid-column: 1 / span 12;
	grid-row: 8;
}

.inven-moneygroup {
	grid-column:1 / span 12;
  grid-row: 9;	
}

.inven-notes {
	grid-column: 1 / span 12;
  grid-row: 10;
}

.settingsgroup {
	grid-column: span 12;
	display: grid;
    grid-template-columns: 1fr 2em;
	align-content: baseline;
	grid-row-gap: 5px;
} 
/* Adjust some sub grids for small screen */

.personal-grid, .family-grid { 
	grid-template-columns: 30% 1fr;
}

.bhigrid {
	grid-template-columns: auto 1fr;
}

.horsecombat-grid {
    grid-template-columns: repeat (2, 1fr 3em 2.5em);
}

.missileweapons-grid,
.missileweapons-grid .repcontainer > .repitem {
   display: grid;
   grid-template-columns: 7.5em 2.5em repeat(6, 2.2em) 1em 1fr;
   align-items: center;	
   align-content: baseline;	
   font-size: 1em;
}


.armorinvengrid, .armorinvengrid .repcontainer > .repitem {
    display: grid;
    grid-template-columns: 1fr 2.5em 2.5em repeat(5, 2em);
    align-items: center;
    align-content: baseline;
}

.armourareawrapper,
.mw-extraranges, 
.invensectionwrapper,
.armorinvengrid .repitem > .sectionarmourhead,
.armorinvengrid .repitem > .sectionarmourarms,
.armorinvengrid .repitem > .sectionarmourtorso,
.armorinvengrid .repitem > .sectionarmourlegs {
	display:none;
}

.magic-grid, .magic-grid .repcontainer > .repitem {
    grid-template-columns: 1fr 20px 0.5fr repeat(3, 2em) 3em repeat(3, 2em) 2.2em;
	margin-bottom: 1em;
}

/* other minor styling tweaks */

.characterviewer .charsheet .personal-grid label,
.characterviewer .charsheet .family-grid label,
.characterviewer .charsheet .physical-grid label,
.characterviewer .charsheet .horseattribs-grid label,
.personal-input {
    height: 1.75em;
}

/* additional spacing for touch */

.skills-grid, .weapons-grid, .missileweapons-grid, .magic-grid, .moneygrid {
	row-gap: 0.5em;
}

.repcontainer > .repitem {
	margin: 0.5em 0;
}

}