roll20-character-sheets/Marvel Heroic Roleplaying/mhrpg.css

/*-------------------------------------------------*\
	# SHEET STRUCTURE
\*-------------------------------------------------*/

/* hide the tabs unless tab buttons selected */
.sheet-stats, .sheet-details, .sheet-npc, .sheet-doom_pool {
	display: none;
}

/* show the selected tab and structuring of grids */
.sheet-tabstoggle[value="stats"] ~ div.sheet-stats {
	display: grid;
	grid-template-columns: 95px 95px 95px 95px 95px 95px 95px 95px;
	grid-template-rows: 3fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr fit-content()
	 	fit-content() fit-content() 2fr fit-content() fit-content() fit-content()
		fit-content() 2fr fit-content() 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
	justify-content: center;
	background-image: linear-gradient(to left top, #6b7d97, #364e6c);
	background-size: 840px;
	background-repeat: no-repeat;
	background-position: center;
}

.sheet-tabstoggle[value="details"] ~ div.sheet-details {
	display: grid;
	grid-template-columns: 190px 190px 380px;
	grid-template-rows: 100px 750px;
	justify-content: center;
	background-image: linear-gradient(to right top, #6b7d97, #364e6c);
	background-size: 840px;
	background-repeat: no-repeat;
	background-position: center;
}

.sheet-tabstoggle[value="npc"] ~ div.sheet-npc {
	display: grid;
	grid-template-columns: 95px 95px 95px 95px 95px 95px 95px 95px;
	grid-template-rows: 3fr 2fr 2fr 2fr fit-content() 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr
		fit-content() fit-content() fit-content() 2fr fit-content() fit-content()
		fit-content() 2fr 2fr fit-content();
	justify-content: center;
	background-image: radial-gradient(#782326, #541c1d);
	background-size: 840px;
	background-repeat: no-repeat;
	background-position: center;
}

.sheet-tabstoggle[value="doom_pool"] ~ div.sheet-doom_pool {
	display: grid;
	grid-template-columns: 110px 110px 110px 110px 110px 110px;
	grid-template-rows: 1fr 1fr 60px 60px 60px 60px;
	justify-content: center;
	background-image: radial-gradient(#782326, #541c1d);
	background-size: 840px 550px;
	background-repeat: no-repeat;
	background-position: center;
}

/* laying out the grid elements on the STATS tab */

.sheet-heroname { grid-area: 1/1/2/3; }

.sheet-heroname_query { grid-area: 1/3/2/7; }


.sheet-plotpoints { grid-area: 1/7/2/8; }

.sheet-ppcounter { grid-area: 1/8/2/9; }


.sheet-dicepool { grid-area: 2/1/3/3; }

.sheet-d4roll { grid-area: 2/3/3/4; }

.sheet-d6roll { grid-area: 2/4/3/5; }

.sheet-d8roll { grid-area: 2/5/3/6; }

.sheet-d10roll { grid-area: 2/6/3/7; }

.sheet-d12roll { grid-area: 2/7/3/8; }

.sheet-poolbuttons { grid-area: 2/8/3/9; }


.sheet-affiliations { grid-area: 3/1/4/3; }

.sheet-solo { grid-area: 3/3/4/5; }

.sheet-buddy { grid-area: 3/5/4/7; }

.sheet-team { grid-area: 3/7/4/9; }

.sheet-d6affiliaton { grid-area: 4/4/5/5; }

.sheet-d8affiliation { grid-area: 4/5/5/6; }

.sheet-d10affiliation { grid-area: 4/6/5/7; }


.sheet-distinctions { grid-area: 5/1/6/3; }

.sheet-dis1 {	grid-area: 5/3/6/7; }

.sheet-dis2 { grid-area: 6/3/7/7; }

.sheet-dis3 { grid-area: 7/3/8/7; }

.sheet-d4distinction { grid-area: 7/7/8/8; }

.sheet-d8distinction { grid-area: 7/8/8/9; }


.sheet-stress { grid-area: 8/1/9/3; }

.sheet-pstress { grid-area: 8/3/9/5; }

.sheet-mstress { grid-area: 8/5/9/7; }

.sheet-estress { grid-area: 8/7/9/9; }


.sheet-trauma { grid-area: 9/1/10/3; }

.sheet-ptrauma { grid-area: 9/3/10/5; }

.sheet-mtrauma { grid-area: 9/5/10/7; }

.sheet-etrauma { grid-area: 9/7/10/9; }


.sheet-powersets { grid-area: 10/1/11/4; }

.sheet-psname1 { grid-area: 11/2/12/4; }

.sheet-levelpower1 { grid-area: 12/1/13/7; }

.sheet-powerbutton1 { grid-area: 12/7/13/9; }

.sheet-sfx1 { grid-area: 13/1/14/9; }

.sheet-limit1	{ grid-area: 14/1/15/9; }

.sheet-psname2 { grid-area: 15/2/16/4; }

.sheet-levelpower2 { grid-area: 16/1/17/7; }

.sheet-powerbutton2 { grid-area: 16/7/17/9; }

.sheet-sfx2 { grid-area: 17/1/18/9; }

.sheet-limit2 { grid-area: 18/1/19/9; }


.sheet-specialties { grid-area: 19/1/20/2; }

.sheet-specrating { grid-area: 19/2/20/5; }

.sheet-specdice { grid-area: 19/6/20/9; }


.sheet-push { grid-area: 20/1/21/2; }

.sheet-pushdice { grid-area: 20/2/21/5; }

.sheet-stunt { grid-area: 20/5/21/6; }

.sheet-stuntdice { grid-area: 20/6/21/9; }


.sheet-resources { grid-area: 21/1/22/2; }

.sheet-resource_asset_names_descs { grid-area: 21/2/22/8; }

.sheet-resourcebuttons { grid-area: 21/8/22/9; }


.sheet-poolbuttons_b { grid-area: 22/1/23/3; }

.sheet-d4roll_b { grid-area: 22/3/23/4; }

.sheet-d6roll_b { grid-area: 22/4/23/5; }

.sheet-d8roll_b { grid-area: 22/5/23/6; }

.sheet-d10roll_b { grid-area: 22/6/23/7; }

.sheet-d12roll_b { grid-area: 22/7/23/8; }


.sheet-milestones { grid-area: 23/1/24/2; }

.sheet-msname1 { grid-area: 23/2/24/4; }

.sheet-1xpbutton1 { grid-area: 24/2/24/3; }

.sheet-trigger11 { grid-area: 24/3/25/9; }

.sheet-3xpbutton1 { grid-area: 25/2/26/3; }

.sheet-trigger13 { grid-area: 25/3/26/9; }

.sheet-10xpbutton1 { grid-area: 26/2/27/3; }

.sheet-trigger110 { grid-area: 26/3/27/9; }

.sheet-msname2 { grid-area: 27/2/28/4; }

.sheet-1xpbutton2 { grid-area: 28/2/29/3; }

.sheet-trigger21 { grid-area: 28/3/29/9; }

.sheet-3xpbutton2 { grid-area: 29/2/30/3; }

.sheet-trigger23 { grid-area: 29/3/30/9; }

.sheet-10xpbutton2 { grid-area: 30/2/31/3; }

.sheet-trigger210 { grid-area: 30/3/31/9; }


.sheet-xp { grid-area: 31/4/32/6; }

.sheet-xpcounter { grid-area: 31/6/32/7; }

.sheet-buypp { grid-area: 31/7/32/9; }


/* laying out the grid elements on the CHARACTER DETAILS tab */

.sheet-secretpublic { grid-area: 1/2/2/3; }

.sheet-identity { grid-area: 1/3/2/4; }

.sheet-history { grid-area: 2/1/3/3; }

.sheet-personality  { grid-area: 2/3/3/4; }


/* laying out the grid elements on the NPC tab */

.sheet-npcname { grid-area: 1/1/2/3; }

.sheet-npcname_query { grid-area: 1/3/2/7; }

.sheet-identity_npc { grid-area: 1/7/2/9; }


.sheet-dicepool_npc { grid-area: 2/1/3/3; }

.sheet-d4roll_npc { grid-area: 2/3/3/4; }

.sheet-d6roll_npc { grid-area: 2/4/3/5; }

.sheet-d8roll_npc { grid-area: 2/5/3/6; }

.sheet-d10roll_npc { grid-area: 2/6/3/7; }

.sheet-d12roll_npc { grid-area: 2/7/3/8; }

.sheet-poolbuttons_npc { grid-area: 2/8/3/9; }


.sheet-affiliations_npc { grid-area: 3/1/4/3; }

.sheet-solo_npc { grid-area: 3/3/4/5; }

.sheet-buddy_npc { grid-area: 3/5/4/7; }

.sheet-team_npc { grid-area: 3/7/4/9; }

.sheet-d4affiliation_npc { grid-area: 4/4/5/5; }

.sheet-d6affiliaton_npc { grid-area: 4/5/5/6; }

.sheet-d8affiliation_npc { grid-area: 4/6/5/7; }

.sheet-d10affiliation_npc { grid-area: 4/7/5/8; }


.sheet-specialties_npc { grid-area: 5/1/6/2; }

.sheet-specrating_npc { grid-area: 5/2/6/5; }

.sheet-specdice_npc { grid-area: 5/6/6/9; }


.sheet-resources_npc { grid-area: 6/1/7/2; }

.sheet-resource_asset_names_descs_npc { grid-area: 6/2/7/8; }

.sheet-resourcebuttons_npc { grid-area: 6/8/7/9; }


.sheet-stress_npc { grid-area: 7/1/8/3; }

.sheet-pstress_npc { grid-area: 7/3/8/5; }

.sheet-mstress_npc { grid-area: 7/5/8/7; }

.sheet-estress_npc { grid-area: 7/7/8/9; }


.sheet-trauma_npc { grid-area: 8/1/9/3; }

.sheet-ptrauma_npc { grid-area: 8/3/9/5; }

.sheet-mtrauma_npc { grid-area: 8/5/9/7; }

.sheet-etrauma_npc { grid-area: 8/7/9/9; }


.sheet-distinctions_npc { grid-area: 9/1/10/3; }

.sheet-dis1_npc {	grid-area: 9/3/10/7; }

.sheet-dis2_npc { grid-area: 10/3/11/7; }

.sheet-dis3_npc { grid-area: 11/3/12/7; }

.sheet-d4distinction_npc { grid-area: 11/7/12/8; }

.sheet-d8distinction_npc { grid-area: 11/8/12/9; }


.sheet-powersets_npc { grid-area: 12/1/13/4; }

.sheet-psname1_npc { grid-area: 13/2/14/4; }

.sheet-levelpower1_npc { grid-area: 14/1/15/7; }

.sheet-powerbutton1_npc { grid-area: 14/7/15/9; }

.sheet-sfx1_npc { grid-area: 15/1/16/9; }

.sheet-limit1_npc	{ grid-area: 16/1/17/9; }

.sheet-psname2_npc { grid-area: 17/2/18/4; }

.sheet-levelpower2_npc { grid-area: 18/1/19/7; }

.sheet-powerbutton2_npc { grid-area: 18/7/19/9; }

.sheet-sfx2_npc { grid-area: 19/1/20/9; }

.sheet-limit2_npc { grid-area: 20/1/21/9; }


.sheet-stunt_npc { grid-area: 21/1/22/3; }

.sheet-stuntdice_npc { grid-area: 21/3/22/9; }


.sheet-poolbuttons_b_npc { grid-area: 22/1/23/3; }

.sheet-d4roll_b_npc { grid-area: 22/3/23/4; }

.sheet-d6roll_b_npc { grid-area: 22/4/23/5; }

.sheet-d8roll_b_npc { grid-area: 22/5/23/6; }

.sheet-d10roll_b_npc { grid-area: 22/6/23/7; }

.sheet-d12roll_b_npc { grid-area: 22/7/23/8; }


.sheet-history_npc { grid-area: 23/1/24/9; }


/* laying out the grid elements on the Doom Pool tab */

.sheet-doom_pool_name { grid-area: 1/2/2/5; }

.sheet-d4roll_d { grid-area: 2/1/3/2; }

.sheet-d6roll_d { grid-area: 2/2/3/3; }

.sheet-d8roll_d { grid-area: 2/3/3/4; }

.sheet-d10roll_d { grid-area: 2/4/3/5; }

.sheet-d12roll_d { grid-area: 2/5/3/6; }

.sheet-poolbuttons_d { grid-area: 2/6/3/7; }

.sheet-d4add_doom { grid-area: 3/1/4/2; }

.sheet-d6add_doom { grid-area: 3/2/4/3; }

.sheet-d8add_doom { grid-area: 3/3/4/4; }

.sheet-d10add_doom { grid-area: 3/4/4/5; }

.sheet-d12add_doom { grid-area: 3/5/4/6; }

.sheet-d4remove_doom { grid-area: 4/1/5/2; }

.sheet-d6remove_doom { grid-area: 4/2/5/3; }

.sheet-d8remove_doom { grid-area: 4/3/5/4; }

.sheet-d10remove_doom { grid-area: 4/4/5/5; }

.sheet-d12remove_doom { grid-area: 4/5/5/6; }

.sheet-d4stepup_doom { grid-area: 5/1/6/2; }

.sheet-d6stepup_doom { grid-area: 5/2/6/3; }

.sheet-d8stepup_doom { grid-area: 5/3/6/4; }

.sheet-d10stepup_doom { grid-area: 5/4/6/5; }

.sheet-d6stepdown_doom { grid-area: 6/2/7/3; }

.sheet-d8stepdown_doom { grid-area: 6/3/7/4; }

.sheet-d10stepdown_doom { grid-area: 6/4/7/5; }

.sheet-d12stepdown_doom { grid-area: 6/5/7/6; }


/*-------------------------------------------------*\
	# GENERAL
\*-------------------------------------------------*/

/* ------- Inputs ------- */

input[type="number"] {
	margin: 5px;
	height: 40px;
	width: 40px;
	font-size: 16px;
	font-weight: bold;
}

input.sheet-name {
  margin: 8px;
  width: 18em;
	text-transform: uppercase;
  font-family: Candal;
	font-weight: bolder;
  font-size: 20px;
	background-color: #173f61;
	color: white;
}

input.sheet-name_npc {
  margin: 8px;
  width: 18em;
	text-transform: uppercase;
  font-family: Candal;
	font-weight: bolder;
  font-size: 20px;
	background-color: #3c0506;
	color: white;
}

input.sheet-sub_name {
  margin-left: 2px;
	margin-right: 2px;
  width: 10em;
	text-transform: uppercase;
  font-family: Contrail One;
  font-size: 18px;
	background-color: #193855;
	color: white;
}

input.sheet-sub_name_npc {
	margin-top: 8px;
	margin-left: 2px;
	margin-right: 2px;
  width: 10em;
	text-transform: uppercase;
  font-family: Contrail One;
  font-size: 18px;
	background-color: #3c0506;
	color: white;
}

input.sheet-description {
	margin: 4px;
	width: 31em;
	font-size: 12px;
	font-weight: bold;
	background-color: #002240;
	color: white;
}

input.sheet-description_npc {
	margin: 4px;
	width: 31em;
	font-size: 12px;
	font-weight: bold;
	background-color: #3c0506;
	color: white;
}


/* ------- Textareas ------- */

textarea {
	margin-left: 5px;
	width: 340px;
	height: 300px;
	font-size: 12px;
	font-weight: bold;
	background-color: #002240;
	color: white;
}

textarea.sheet-tall {
	margin-left: 5px;
	width: 340px;
	height: 655px;
	font-size: 12px;
	font-weight: bold;
	background-color: #002240;
	color: white;
}

textarea.sheet-tall_npc {
	margin-left: 5px;
	width: 340px;
	height: 655px;
	font-size: 12px;
	font-weight: bold;
	background-color: #430507;
	color: white;
}


textarea.sheet-short {
	margin: 4px;
	margin-top: 7px;
	width: 40em;
	height: 16px;
	font-size: 12px;
	font-weight: bold;
	background-color: #002240;
	color: white;
}

textarea.sheet-short_npc {
	margin: 4px;
	margin-top: 7px;
	width: 43em;
	height: 16px;
	font-size: 12px;
	font-weight: bold;
	background-color: #430507;
	color: white;
}

/* ------- Selects ------- */

select.sheet-small {
	margin: 4px;
	width: 90px;
	background-color: #f1e14b;
	font-weight: bold;
}

select.sheet-medium {
	margin: 4px;
	width: 120px;
	background-color: #f1e14b;
	font-weight: bold;
}

select.sheet-long {
	width: 150px;
	background-color: #f1e14b;
	font-weight: bold;
}

select.sheet-xl {
	width: 175px;
	background-color: #f1e14b;
	font-weight: bold;
}


/* ------- Text ------- */

h1 {
	font-family: Candal;
	text-transform: uppercase;
	font-size: 25px;
	color: white;
}

p, strong, label {
	font-family: Candal;
	color: white;
}

h2 {
	margin: 2px;
	font-size: 16px;
	font-family: Contrail One;
	text-transform: uppercase;
	color: white;
}

/* ------- Buttons ------- */

button {
	margin: 6px;
	padding: 5px 7px;
	text-align: center;
	font-family: Candal;
	font-size: 13px;
	text-transform: uppercase;
	background-color: #f1e14b;
	color: black;
}

button.sheet-switcher {
	margin: 6px;
	padding: 5px 7px;
	text-align: center;
	font-family: Candal;
	font-size: 13px;
	align-self: right;
	text-transform: uppercase;
	background-color: #ca190d;
	color: white;
}