roll20-character-sheets/HeroesOfElectrum/heroesofelectrum.css

/*----------------- MAIN CONTAINER DEFINITIONS ------------------*/
@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Bangers|Scheherazade&display=swap');

.sheet-main-container {
  min-width: 600px;
	max-width: 1000px;
	padding: 15px 15px 0px 15px;
	display: flex;
	flex-direction: column;
}

.sheet-main-container input {
	height: 28px;
}

.sheet-main-container select {
	width: auto;
	height: 28px;
	margin: 0px;
}

.sheet-main-container input[type=text] {
	width: 10px;
	flex-grow: 1;
}

.sheet-main-container input[type=number] {
	width: 4.2em;
}

.sheet-main-container textarea {
	box-sizing: border-box;
	margin: 0px;
}

.sheet-main-container button {
	margin: 0px !important;
}

/*----------------- GENERAL CSS ------------------*/

.sheet-main-font {
	font-family: 'Bangers';
	font-size: 1.5em;
}

.sheet-secondary-font {
	font-family: 'Scheherazade';
}

.sheet-flex-row {
	display: flex;
	flex-direction: row;
}

.sheet-flex-column {
	display: flex;
  flex-direction: column;
}

.sheet-grow {
	flex-grow: 1;
}

.sheet-label {
	text-transform: uppercase;
	margin-right: 5px;
	font-size: 1.5em;
}

.sheet-row-item-margin {
	margin-right: 5px !important; 
}

/*----------------- SHEET PARTS ------------------*/

.sheet-header {
	display: flex;
	flex-direction: row;
	margin-bottom: 10px;
}

.sheet-mundos-colidem-outer {
	font-family: 'Fjalla One';
	border: 1.5px solid black;
	margin-right: 10px;
	text-align: center;
}

.sheet-mundos-colidem-inner {
	border-bottom: 1.5px solid black;
	padding: 5px 5px 0px 5px;
	text-transform: uppercase;
	font-size: 1.6em;
}

.sheet-mundos-colidem-logo {
	background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/HeroesOfElectrum/imgs/mundos_colidem_logo.png');
	/*background-image: url('https://raw.githubusercontent.com/danielsousat/roll20-character-sheets/new-heroes-of-electrum-sheet/HeroesOfElectrum/imgs/mundos_colidem_logo.png');*/
	background-size: 96px 122px;
	background-repeat: no-repeat;
	width: 96px;
	height: 122px;
}

.sheet-mundos-colidem-bottom {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow:1;
}

.sheet-logo-number {
	font-size: 1.5em;
	font-weight: 1000;
}

.sheet-logo {
	font-family: 'Fjalla One';
	color: white;
	background-color: black;
	text-align: justify;
	text-transform: uppercase;
	flex-grow: 1;
	line-height: 1;
	padding: 5px;
}

.sheet-heroes-of {
	font-size: 3.5em;
	font-weight: lighter;
}

.sheet-electrum {
	font-size: 6.7em;
}

.sheet-subtitle {
	font-size: 1em;
}

.sheet-chardefinitions {
	display: flex;
	flex-direction: column;
}

.sheet-chardefinitions input {
	width: auto !important;
	margin-bottom: 10px;
}

.sheet-chardefinitions span {
	text-transform: uppercase;
}

.sheet-attributes-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-items: start;
	align-items: center;
	gap: 5px;
	flex-grow: 1;
}

.sheet-middle {
	display: grid;
	grid-template-columns: 1.5fr 0.5fr;
	column-gap: 10px;
}

.sheet-middle-column {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.sheet-notes {
	display: flex;
	flex-direction: column;
}

.sheet-notes textarea {
	border: none;
}

.sheet-footer {
	text-align: right;
	font-style: italic;
	font-size: 1.2em;
}

.sheet-conditions-row{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.sheet-condition-box {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.sheet-condition-checkbox {
	margin-right: 5px;
}

.sheet-box {
	padding: 5px;
	margin-bottom: 10px;
	border: 1.5px solid black;
	flex-grow: 1;
}

.sheet-box-title {
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sheet-repeatable-item {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}

.sheet-repeatable-row {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	margin-bottom: 5px;
}

.sheet-repeatable-row-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*----------------- TAB CONTROL ------------------*/

/*Configure the tab buttons*/
.sheet-profiletab,
.sheet-configurationtab,
.sheet-journaltab {
	display: none;
}

/* show the selected tab */
.sheet-tabcontrol[value="profile"] ~ div.sheet-profiletab,
.sheet-tabcontrol[value="configuration"] ~ div.sheet-configurationtab,
.sheet-tabcontrol[value="journal"] ~ div.sheet-journaltab {
	display: block;
}

/*----------------- ROLL BUTTON ------------------*/

.sheet-main-container button[type=roll] { 
	border: 0px;
	font-family: 'dicefontd6' !important;
	font-size: 25px;
	width: 25px;
	height: 25px;
	background: transparent !important;
	text-shadow: none !important;
	box-shadow: none !important;
	padding: 0px;
}

.sheet-main-container button[type=roll]::before {
	font-family: 'dicefontd6' !important;
	content: 'f';
}

.sheet-main-container button[type=roll]:hover {
	opacity: 0.5;
}

/*------------- REPEATABLE SECTIONS BUTTONS -------------*/

.repcontrol>.btn {
  background-color: transparent;
  font-size: 2px;
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  display: inline-block;
	position: relative;
	border: 0px;
}

.repcontrol>.btn:hover {
	opacity: 0.5;
}

.repcontrol>.btn.repcontrol_add::before {
  content: "&";
  color: black;
  font-size: 20px;
  font-family: 'Pictos' !important;
	position: absolute;
	left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.repcontrol>.btn.repcontrol_edit::before {
	content: "(";
  color: black;
  font-size: 20px;
  font-family: 'Pictos' !important;
	position: absolute;
	left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* change the 'Done' text after clicking 'Modify' */
.editmode ~ .repcontrol>.repcontrol_edit::before {
	content: ')';
}

/*------------- SHEET ROLL TEMPLATE -------------*/

.sheet-rolltemplate-main .sheet-template-container {
	display: flex;
	flex-direction: column;
	border: 2px solid black;
	font-family: 'Scheherazade';
	text-align: center;
	font-size: 1.5em;
}

.sheet-rolltemplate-main p {
		font-family: 'Scheherazade';
		text-align: left;
		font-size: 1.2em;
}

.sheet-rolltemplate-main .sheet-template-row {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid black;
	padding: 5px;
	justify-content: center;
	align-items: center;
}

.sheet-rolltemplate-main .sheet-template-header {
	flex-direction: row !important;
	background-color: black;
	color: white;
}

.sheet-rolltemplate-main .sheet-template-label {
	font-weight: bold;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.sheet-rolltemplate-main .sheet-template-success {
	color: green;
}

.sheet-rolltemplate-main .sheet-template-fail {
	color: red;
}