roll20-character-sheets/Karyu Densetsu/karyu.css

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

/* Permanent Marker 
Ceviche One
Shojumaru*/
.sheet-main-container {
  min-width: 600px;
	max-width: 1000px;
	min-height: 800px;
	border: 3px solid black;
	padding: 30px 30px 0px 30px;
	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: auto;
	flex-grow: 1;
}

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

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

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

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

.sheet-main-font {
	font-family: Shojumaru;
	color: #2c043e;
}

.sheet-secondary-font {
	font-family: Ceviche One;
	font-size: 20px;
	color: #a53043;
}

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

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

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

.sheet-label {
	margin-right: 5px;
}

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

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

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

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

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

.sheet-logo {
	margin-right: 20px;
}

.sheet-tab-panel {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 10px;
}

.sheet-tab-panel button {
	margin-right: 5px !important;
}

.sheet-injury input[type="checkbox"] {
	width: 15px;
	height: 15px;
	margin-right: 5px;
}

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

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

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

.sheet-style-icon {
	background-repeat: no-repeat;
	background-size: 35px 35px;
	width: 35px;
	height: 35px;
}

.sheet-grappling-icon {
	background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Karyu%20Densetsu/img/agarrao.png');
}

.sheet-block-icon {
	background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Karyu%20Densetsu/img/bloqueio.png');
}

.sheet-combo-icon {
	background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Karyu%20Densetsu/img/combo.png');
}

.sheet-evasion-icon {
	background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Karyu%20Densetsu/img/evasao.png');
}

.sheet-blow-icon {
	background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Karyu%20Densetsu/img/golpe.png');
}

.sheet-projectile-icon {
	background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Karyu%20Densetsu/img/projetil.png');
}

.sheet-threshold-grid {
	display: grid;
	grid-template-columns: 1fr 0.6fr 0.5fr 1fr;
	justify-items: start;
	align-items: center;
	gap: 5px;
}

.sheet-vigor input[type="number"] {
	margin-right: 5px;
}
.sheet-paths input[type="checkbox"] {
	margin-left: 5px;
}

.sheet-paths-margin {
	margin-bottom: 5px;
}

.sheet-trumps input[type="text"] {
	margin-bottom: 5px;
}

.sheet-trumps textarea {
	margin-bottom: 10px;
}

.sheet-middle {
	display: grid;
	grid-template-columns: 0.7fr 1fr;
	column-gap: 20px;
}

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

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

.sheet-box {
	padding: 10px;
	margin-bottom: 10px;
}

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

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

.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;
	margin-left: 5px;
}

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

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

/* show the selected tab */
.sheet-tabcontrol[value="profile"] ~ div.sheet-profiletab,
.sheet-tabcontrol[value="techniques"] ~ div.sheet-techniquestab,
.sheet-tabcontrol[value="equipments"] ~ div.sheet-equipmentstab {
	display: block;
}

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

.sheet-main-container button[type=roll] { 
	border: 0px;
	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 {
	content: 'T';
	font-family: 'dicefontd20' !important;
}

.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: ')';
}