roll20-character-sheets/OperaRPG/operarpg.css

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

.sheet-main-container {
  min-width: 600px;
	max-width: 800px;
	min-height: 600px;
	display: flex;
	flex-direction: column;
}

.sheet-main-container input {
	height: 20px;
	font-size: 10px;
}

.sheet-main-container select {
	width: auto;
	height: 20px;
	margin: 0px;
	padding: 0px;
	font-size: 10px;
}

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

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

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

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

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

.sheet-main-font {
	font-family: Paytone One;
	font-size: 12px;
	color: red;
	-webkit-text-stroke: 0.5px black;
}

.sheet-secondary-font {
	font-family: Lustria;
	font-size: 10px;
}

.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-weight: bold;
}

.sheet-column-header {
	text-transform: uppercase;
	margin-right: 5px;
}

.sheet-column-subheader {
	font-style: italic;
	font-size: 10px !important;
}

.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 input {
	margin-right: 5px;
}

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

.sheet-header-row2 {
	margin-bottom: 10px;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
}

.sheet-header-row2 input[type=text] {
	width:4.2em !important;
	flex-grow: 0 !important;
}

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

.sheet-header-box {
	border: 2px solid lightgrey;
	border-radius: 15px;
	position: relative;
	padding: 5px;
}

.sheet-actions-grid {
	display: grid;
	grid-template-columns: auto auto auto;
	justify-items: center;
	align-items: center;
	gap: 5px;
}

.sheet-actions-label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 25px;
}

.sheet-init-grid {
	display: grid;
	grid-template-columns: auto auto auto auto;
	justify-items: center;
	align-items: center;
	gap: 5px;
}

.sheet-dodge-grid {
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	justify-items: center;
	align-items: center;
	gap: 5px;
}

.sheet-damage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	padding-left: 20px;
  padding-right: 20px;
}

.sheet-damage span {
	text-align: center;
}

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

.sheet-tab-panel {
	display: flex;
	flex-direction: row;
	margin: 10px;
	display: none;
}

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

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

.sheet-attributes-grid input {
	width: 4.2em !important;
}

.sheet-special-mod {
	grid-column: 4/6;
}


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

.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;
	border: 2px solid lightgrey;
	border-radius: 15px;
	position: relative;
}

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

.sheet-repeatable-grid {
	display: grid;
	justify-items: stretch;
	align-items: center;
	column-gap: 10px;
	row-gap: 5px;
}

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

.sheet-repeatable-row {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

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

.sheet-features {
	grid-template-columns: auto 60px 60px 24px;
}

.sheet-weapons {
	grid-template-columns: auto 40px 100px 90px 90px 65px 65px 45px 24px;
}

.sheet-fight-span {
	grid-column: 6/10;
}

.sheet-weapons-die-label {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-right: 5px;
}

.sheet-weapons-die-label input {
	margin-right: 1px !important;
}

.sheet-weapons-base {
	width: 30px !important;
}

.sheet-weapons-damage-base {
	width: 40px !important;
}

.sheet-weapons-damage-total {
	width: 60px !important;
}

.sheet-weapons-subheader-grid {
	display: grid;
	grid-template-columns: auto auto auto;
	column-gap: 2px;
	align-items: center;
}

.sheet-weapon-hidden {
	grid-template-columns: 70px 70px 70px;
}

.sheet-powers {
	grid-template-columns: auto 60px 60px 24px;
}

.sheet-skills {
	grid-template-columns: 24px 100px auto 45px 45px 45px 24px
}

.sheet-protection {
	grid-template-columns: auto 60px 100px 60px 24px;
}

.sheet-penalty {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

.sheet-absortion {
	justify-self: center;
}

.sheet-experience-points {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

/*----------------- 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-size: 22px;
	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: 'f';
	font-family: 'dicefontd6' !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: 15px;
  font-family: 'Pictos' !important;
	position: absolute;
	left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.repcontrol>.btn.repcontrol_edit::before {
	content: "(";
  color: black;
  font-size: 15px;
  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-main-container .repcontainer[data-groupname="repeating_weapons"]>.repitem .itemcontrol, 
.sheet-main-container .repcontainer[data-groupname="repeating_equipments"]>.repitem .itemcontrol,
.sheet-main-container .repcontainer[data-groupname="repeating_skills"]>.repitem .itemcontrol,
.sheet-main-container .repcontainer[data-groupname="repeating_powers"]>.repitem .itemcontrol,
.sheet-main-container .repcontainer[data-groupname="repeating_features"]>.repitem .itemcontrol,
.sheet-main-container .repcontainer[data-groupname="repeating_protection"]>.repitem .itemcontrol {
	z-index: 99;
	font-family: 'Pictos'
}

.sheet-main-container .repcontainer[data-groupname="repeating_weapons"]>.repitem .repcontrol_del, 
.sheet-main-container .repcontainer[data-groupname="repeating_equipments"]>.repitem .repcontrol_del,
.sheet-main-container .repcontainer[data-groupname="repeating_skills"]>.repitem .repcontrol_del,
.sheet-main-container .repcontainer[data-groupname="repeating_powers"]>.repitem .repcontrol_del,
.sheet-main-container .repcontainer[data-groupname="repeating_features"]>.repitem .repcontrol_del,
.sheet-main-container .repcontainer[data-groupname="repeating_protection"]>.repitem .repcontrol_del {
	font-family: 'Pictos';
	background-color: #d13235;
	background-image: none;
	position: absolute;
	z-index: 99 !important;
	top: 0;
	right: 0
}


/*------------- REPEATABLE SECTIONS TOGGLE SHOW/HIDE -------------*/

.sheet-showhidebutton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
}

.sheet-showhidebutton input[type=checkbox] {
	width: 20px;
	position: absolute;
	opacity: 0;
}

.sheet-showhidebutton:hover {
	opacity: 0.5;
}

.sheet-arrowtype input[type=checkbox]:checked~span::before {
	content: '▲';
}

.sheet-arrowtype span::before {
	content: '▼';
}

.sheet-showhidebutton span {
	color: black;
	font-size: 20px;
}

.sheet-toggle-checkbox {
	display: none;
}

.sheet-showhide {
	display: none;
}

.sheet-toggle-checkbox:checked~.sheet-showhide {
	display: block;
}

.sheet-main-container .repcontainer[data-groupname="repeating_equipments"]>.repitem .itemcontrol {
	z-index: 99;
	font-family: 'Pictos'
}

.sheet-main-container .repcontainer[data-groupname="repeating_equipments"]>.repitem .repcontrol_del {
	font-family: 'Pictos';
	background-color: #d13235;
	background-image: none;
	position: absolute;
	z-index: 99 !important;
	top: 0;
	right: 0
}

/*------------- HIDDEN SELECT ITEMS -------------*/
.sheet-select-hidden-grid {
	display: grid;
	grid-template-columns: 20px auto;
	gap: 2px;
	align-items: center;
	background-color: antiquewhite;
}

.sheet-configtype {
	font-family: 'Pictos';
}

.sheet-configtype input[type=checkbox]:checked~span::before {
	content: '*';
}

.sheet-configtype span::before {
	content: 'y';
}

.sheet-corner-position {
	position: absolute;
	right: 10px;
}

.sheet-add-button {
	border: 0px;
	font-size: 20px;
	width: 20px;
	height: 20px;
	background: transparent !important;
	text-shadow: none !important;
	box-shadow: none !important;
	padding: 0px;
}

.sheet-add-button::before {
	content: '+';
	font-family: 'Pictos' !important;
}

.sheet-add-button:hover {
	opacity: 0.5;
}


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

.sheet-rolltemplate-main .sheet-template-container {
	display: flex;
	flex-direction: column;
	border: 2px solid black;
	font-family: Paytone One;
	text-align: center;
	background-color: white;
}

.sheet-rolltemplate-main p {
    font-family: Paytone One;
    text-align: left;
}

.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;
	color: red;
	-webkit-text-stroke: 0.5px black;
}

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

.sheet-rolltemplate-main .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: 2px solid rgba(167, 168, 170,1);
}

.sheet-rolltemplate-main .inlinerollresult.fullcrit {
	border: 4px solid green;
	color: green;

}

.sheet-rolltemplate-main .inlinerollresult.fullfail {
	border: 4px solid red;
	color: red;
}

.sheet-rolltemplate-main .inlinerollresult.importantroll {
	border: 2px solid #4A57ED;
}

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

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