roll20-character-sheets/Quest-boardgame/Quest.css

/* Quest board game CSS */
/* Version 1.0 */


/****************
***   FONTS   ***
****************/

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:wght@300&display=swap');

/* end Fonts */


/**************
**  Wrapper  **
**************/

.sheet-ept {
	/* max-width: 1100px;
	min-width: 700px; */
	margin: 0;
	padding: 10px 20px;
	background: #f9fbed;
	white-space: nowrap;
}

/*****************
**  Typography  **
*****************/

h2, span, label, .sheet-label, .sheet-text {
	margin: 0;
	font-family: 'Roboto Condensed', Arial, sans-serif;
	font-size: 18px;
	line-height: 50px;
	font-weight: 200;
	color: #000;
}

h2, h2 span {
	margin: 0 0 20px 0;
	text-transform: uppercase;
	font-weight: 200;
}

.sheet-label {
	text-transform: uppercase;
}

.sheet-underline {
	text-decoration: underline;
}

/******************
***   LAYAOUT   ***
******************/

.sheet-section {
	margin: 20px 0;
}

.sheet-skills.sheet-section {
	margin: 40px 0 20px 0;
}

/* FLEXBOX */

.sheet-flex-row  {
	display: flex;
	overflow: hidden;
}


.sheet-tab1 {
	padding-left: 16px;
}
.sheet-tab2 {
	padding-left: 32px;
}
.sheet-tab3 {
	padding-left: 48px;
}


.sheet-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 100%;
	grid-gap: 0 8px;
}
.sheet-grid-4-span-1 {
	grid-column: span 1;
}
.sheet-grid-4-span-2
{
	grid-column: span 2;
}
.sheet-grid-4-span-3
{
	grid-column: span 3;
}
.sheet-grid-4-span-4 {
	grid-column: span 4;
}


/************************
***   FORM ELEMENTS  ***
************************/

.sheet-ept label {
	margin: 0;
	padding: 0 8px 0 0;
	width: auto;
	line-height: 50px;
}

.sheet-extra-space{
	margin: 0 0 20px 0;
}

.sheet-ept input, .sheet-ept textarea, .sheet-ept select, .sheet-worker, .sheet-worker-text {
	border: none;
	margin: 0;
	background: transparent;
	font-family: 'Patrick Hand';
	font-size: 22px;
	/* line-height: 30px; */
	color: #666;
	overflow: visible;
}

.sheet-worker, .sheet-worker-text {
	/* line-height: 50px;
	height: 50px;
	overflow: hidden; */
	line-height: normal;
	height: auto;
	overflow: visible;
	display: flex;
	align-items: center;
}

.sheet-ept input, .sheet-ept select, .sheet-worker, .sheet-worker-text {
	padding: 0 8px;
	border-radius: 0;
	border-bottom: 1.5px solid #000;
}

.sheet-ept select, .sheet-ept input[type="checkbox"], .sheet-checklist input[type="checkbox"] {
	-webkit-appearance:none;
	height: 48px;
	padding: 0;
}

.sheet-ept input[type="checkbox"], .sheet-checklist input[type="checkbox"] {
	 width: 18px;
	 height: 10px;
	 border: 1px solid #000;
	 border-radius: 6px;
	 margin: 0 10px 0 0;
}
.sheet-ept input[type="checkbox"]:checked, .sheet-checklist input[type="checkbox"]:checked {
	 background: #000;
}

.sheet-worker, .sheet-item-label, input.sheet-worker {
	border-bottom: 2px dotted #000;
}

.sheet-worker.sheet-thick {
	border-bottom: 4px solid #000;
}

input.sheet-fill, .sheet-fill {
	width: 100%;
	flex-grow: 1;
	overflow: auto;
}


::placeholder, .sheet-ept input[type=number], .sheet-center, .sheet-worker {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sheet-ept .sheet-right, .sheet-ept input[type=number].sheet-right {
	text-align: right;
	justify-content: right;
}
.sheet-left {
	text-align: left;
	justify-content: left;
}

.sheet-ept input[type=number].sheet-nospin::-webkit-outer-spin-button,
.sheet-ept input[type=number].sheet-nospin::-webkit-inner-spin-button  {
   -webkit-appearance: none;
   margin: 0;
}
.sheet-ept input[type="number"].sheet-nospin{
   -moz-appearance: textfield;
}


.sheet-hide-input {
	display: none;
}

.repcontrol {
	margin: 15px 0;
}
.repcontrol button {
	font-family: 'Roboto Condensed', Arial, sans-serif;
	font-size: 16px;
	color: #fff;
	background: #000;
	border-radius: 16px;
	padding: 5px 5px;
	width: 50px;
}
.repcontrol_move {
	background: #000;
	color: #fff;
	padding: 0px 5px;
	width: auto;
	height: auto;
	border-radius: 50px;
	font-size: 14px;
	top: 2px;
	left: -22px;
	position: relative;
}
.btn.btn-danger.pictos.repcontrol_del {
    background: transparent;
    border: none;
    color: #f9fbed;
		text-shadow: none;
}
.btn.btn-danger.pictos.repcontrol_del:after {
	content: "D";
	color: #cc1e1e;
	font-size: 20px;
	left: 10px;
	position: relative;
}


/****************
***   Skills  ***
****************/


/* 1. Skill checkbox list styling + interactions */

input.sheet-skill-checkbox {
	display: inline-block;
	vertical-align: middle;
}

.sheet-checklist label {
	margin: 0 0 0 8px;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	min-width: inherit;
	max-width: inherit;
}

.sheet-checklist input[type="checkbox"]:checked + label {
	font-weight: bold;
}
.sheet-checklist .sheet-spell-slots-row input[type="checkbox"]:checked + label {
	font-weight: normal;
}


/* 2. Profess Skills  */

/* 2.1 SHOW/HIDE Prof Skills */
/* hide all prof skills labels */
.sheet-label-profession-warrior,
.sheet-label-profession-priest,
.sheet-label-profession-magicuser {
	display: none;
}
/* hide all prof skills */
.sheet-profession-warrior,
.sheet-profession-priest,
.sheet-profession-magicuser,
.sheet-profession-bonus-spells {
	display: none;
}
/* show selected prof skills labels*/
.sheet-profession-select[value="Warrior"] ~ * .sheet-label-profession-warrior,
.sheet-profession-select[value="Priest"] ~ * .sheet-label-profession-priest,
.sheet-profession-select[value="Magic-User"] ~ * .sheet-label-profession-magicuser{
	display: block;
}
/* show selected prof skills */
.sheet-profession-select[value="Warrior"] ~ * .sheet-profession-warrior,
.sheet-profession-select[value="Priest"] ~ * .sheet-profession-priest,
.sheet-profession-select[value="Priest"] ~ * .sheet-profession-bonus-spells,
.sheet-profession-select[value="Magic-User"] ~ * .sheet-profession-magicuser,
.sheet-profession-select[value="Magic-User"] ~ * .sheet-profession-bonus-spells{
	display: block;
}


/************************
***  Play / Edit Mode  ***
*************************/

/* 1. Skills */

/* Hide number-of-skills section */
.sheet-skills-switch-edit-play:checked + .sheet-number-of-skills {
	display: none;
}
/* Play mode: hide unchecked skills */
.sheet-skills-switch-edit-play:checked ~ * .sheet-skill-set .sheet-skill-checkbox:not(:checked) + label {
	display: none;
}

/* Play mode: hide all checkboxes and remove left margin */
.sheet-skills-switch-edit-play:checked ~ * .sheet-skill-set input {
	display: none;
}
.sheet-skills-switch-edit-play:checked ~ * .sheet-skill-set .sheet-spell-slot {
	display: inline-block;
}
.sheet-skills-switch-edit-play:checked ~ * .sheet-checklist label  {
	margin-left: 0;
}
/* Hide skills set borders */
.sheet-skills-switch-edit-play:checked ~ * .sheet-checklist .sheet-skill-set  {
	border: none;
}

/* Play mode: Set bottom boarders */
.sheet-skills-switch-edit-play:checked ~ * .sheet-plebian .sheet-checklist .sheet-skill-checkbox:checked + .sheet-skill-label,
.sheet-skills-switch-edit-play:checked ~ * .sheet-skilled .sheet-checklist .sheet-skill-checkbox:checked + .sheet-skill-label,
.sheet-skills-switch-edit-play:checked ~ * .sheet-noble .sheet-checklist .sheet-skill-checkbox:checked + .sheet-skill-label {
	border-bottom: 1.5px solid black;
	width: 100%;
}

/* Put in Correct Professional Bottom Borders for Languages + Spells */
.sheet-skills-switch-edit-play:checked ~ * .sheet-prof-level-2.sheet-spell-slots-row {
	margin: 0;
	padding: .75px 0 .75px 26px;
	border-bottom: 1.5px solid black;
}
.sheet-skills-switch-edit-play:checked ~ * .sheet-language-checkbox:checked + .sheet-skill-set {
	margin: 0;
	padding: .75px 0;
	border-bottom: 1.5px solid black;
}