roll20-character-sheets/Lion & Dragon/LionDragon.scss

$grid-locations: 
	general,
	ability-scores,
	defenses,
	arms,
	defensive-combat,
	equipment,
	skills,
	benefits,
	experience,
	miracles,
	prepared,
	wealth;
$grid-gap:1em;
$half-gap:0.5em;
@mixin stackedGrid{
	grid-template-columns:auto;
	grid-template-rows:auto auto;
	grid-template-areas:
	"over"
	"under";
}
@mixin selectedLabel{
	background-color:black;
	color:white;
}
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');
.ui-dialog .charsheet{
	select,textarea,input,.uneditable-input{
		all:unset;
	}
	select,textarea,input,.uneditable-input{
		border: 1px solid black;
		border-width: 0px 0px 1px;
		-webkit-border-radius: initial;
		-moz-border-radius: initial;
	}
	textarea{
		resize:vertical;
		min-height:3.5em;
		white-space:pre-wrap;
	}
	select,input,.uneditable-input{
		padding:initial;
	}
	select{
		appearance:none;
		text-transform: uppercase;
		> *{
			text-align:center;
		}
	}
	label{
		width:unset;
		margin:unset;
	}
	input{
		width:100%;
		&:placeholder{
			color:#ededed80;
		}
		&.circle{
			border-radius:50%;
		}
		&.plus-control:not([value*="-"]) + span:before{
			content:'+';
		}
	}
	.right{
		align-text:right;
	}
	span,input,textarea{
		font-size:1em;
	}
	> main{
		h1,h2,h3,
		.h1,.h2,.h3{
			text-transform:uppercase;
			font-weight:bold;
		}
		.hidden{
		    display:none!important;
		}
		.italics{
		    font-style:italic;
		}
		:is(h1,h2,h3,h4,h5,.h1,.h2,.h2,.h3,.h4,.h5,span){
		    line-height:normal;
		    text-transform:capitalize;
		}
		@each $num in 1,2,3,4,5{
			h#{$num},.h#{$num}{
				display:block;
				white-space:nowrap;
				margin-top: 0px;
		    	margin-bottom: 0px;
			}
		}
		button{
			display:grid;
			place-items:center;
		}
		h1,.h1,button[type='roll'].h1,button[type='action'].h1{
		    font-size:3em;
		}
		h2,.h2,button[type='roll'].h2,button[type='action'].h2{
			font-size:2em;
		}
		h3,.h3,button[type='roll'].h3,button[type='action'].h3{
		    font-size:1.5em;
		}
		h4,.h4,button[type='roll'].h4,button[type='action'].h4{
			font-size:1em;
			font-weight:bold;	
		}
		h5,.h5,button[type='roll'].h5,button[type='action'].h5{
		    font-size:1em;
		    font-style:italic;
		}
		.pictos{
			font-family:pictos;
		    text-transform:initial;
		}
		.pictos3{
			font-family:pictos three;
			text-transform:initial;
		}
		.pictoscustom{
			font-family:pictos custom;
			text-transform:initial;
		}
		input[type=checkbox]{
		    border-radius:50%;
		}
		input[type=number]{
			width:2em;
		    -moz-appearance: textfield !important;
		    text-align:center;
			&::-webkit-inner-spin-button, 
			&::-webkit-outer-spin-button { 
			  -webkit-appearance: none;
			  margin: 0; 
			}
		}
		textarea.fixed{
			resize:none;
			overflow:auto;
		}
		section{
			min-width:779px;
			margin-top:1em;
			&.page{
				display:none;
			}
		}
		.pseudo-button{
			display:inline;
			cursor:pointer;
			border-radius:5px;
			text-transform: uppercase;
			border:1px solid black;
			text-align:center;
			padding:0 5px;
		}
		.input-label{
			display:inline-grid;
			@include stackedGrid;
			place-items:center;
			> input{
				border-width:0px 0px 1px;
				border-style:solid;
				border-color:black;
				text-align:center;
			}
			> span{
				text-align:center;
			}
			&.under > span:last-of-type{
				grid-area:under;
			}
			&.over > span:last-of-type{
				grid-area:over;
			}
			&.large > input{
				@extend .h2;
			}
		}
		.dual.input-label{
			grid-template-columns:1fr auto 1fr;
			grid-template-areas:
			'over 	over 	over'
			'under 	under 	under';
			> span:last-of-type{
				grid-column:1 / -1;
			}
			> input{
				width:100%;
			}
			> .slash{
				line-height: 0em;
				font-weight:normal;
			}
		}
		.headed-textarea{
			display:grid;
			grid-template-rows:auto 1fr;
			grid-template-columns:auto;
		}
		.input-label.boxed > input,
		:not(.input-label).boxed{
			border:1px solid black;
		}
		.ratio1-1{
			aspect-ratio:1/1;
		}
		.repeat-columns{
			display:grid;
			grid-gap:$half-gap;
			place-items:center;
		}
		.repcontainer{
			> .repitem{
				grid-gap:$half-gap;
				margin-bottom:0.5em;
				display:grid;
				.itemcontrol{
					grid-column: 1 / -1;
					place-self:start stretch;
				}
				> span{
					place-self:center;
				}
			}
		}
	}
}
.page-1-radio:checked ~ #page-1{
	display:grid;
}
.page-2-radio:checked ~ #page-2{
	display:grid;
}
@each $num in 1,2{
	#page-#{$num}-radio:checked ~ #general > #page-#{$num}-label{
		@include selectedLabel;
	}
}
.page-all-radio:checked ~ #general > #page-all-label{
	@include selectedLabel;
}
@each $location in $grid-locations{
	##{$location}{
		grid-area:$location;
	}
}
#general{
	display:grid;
	grid-template-columns: repeat(3,auto) repeat(3,1fr) 5em;
	grid-template-rows: repeat(4,auto);
	grid-gap: $grid-gap;
	place-items:start stretch;
	grid-template-areas: 
	"header 		header 			header 			character-name 	character-name				class 			level"
	"header 		header 			header 			alignment 		social-class 	background-area	experience"
	"detail 		background 		all 			alignment 		social-class 	background-area	experience"
	"saving-throw 	saving-throw 	saving-throw	languages 		languages 					languages		languages";
	> .sheet-head{
		grid-area:header;
		font-family:UnifrakturCook;
		text-transform: capitalize;
		font-size:4em;
	}
	> .saving-throw{
		align-self:center;
		display:grid;
		grid-template-columns:repeat(3,auto);
		grid-template-rows:auto;
		grid-gap:$grid-gap;
		place-items:center;
		place-content:center end;
	}
	@each $input in character-name,class,level,alignment,saving-throw,social-class,languages,experience{
		.#{$input}{
			grid-area:$input;
		}
	}
	.background{
		grid-area:background-area
	}
}
#page-1{
	grid-template-columns: auto auto 2fr;
	grid-template-rows: repeat(4,auto);
	grid-gap:$grid-gap;
	grid-template-areas:
	"ability-scores	ability-scores		defenses"
	"skills 		skills				benefits"
	"arms			arms				arms"
	"equipment		defensive-combat	defensive-combat";
}
#page-2{
	grid-template-columns: 20em 10em repeat(2,minmax(auto,1fr));
	grid-template-rows: repeat(5,auto);
	grid-gap:$grid-gap;
	grid-template-areas: 
	"miracles 		miracles 		lores	 		lores"
	"wealth 		grimoires 		grimoires 		grimoires"
	"lineage 		lineage 		retainers 		influence"
	"information 	information 	information 	information";
}
#ability-scores{
	display:grid;
	grid-template-columns:auto 1fr;
	grid-template-rows:repeat(2,auto);
	grid-gap:$grid-gap;
	grid-template-areas:
	"scores derivatives"
	"injuries injuries";
	> .scores{
		grid-area:scores;
		display:grid;
		grid-template-columns:auto 3em auto ;
		grid-gap:$half-gap;
		place-items:center;
		place-self:start;
	}
	> .derivatives{
		padding-left:0.5em;
		border-left:1px dashed #DCDCDC40;
		grid-area:derivatives;
		display:grid;
		grid-template-columns:repeat(3,auto);
		grid-gap:$half-gap;
		place-self:stretch start;
		place-items:center;
		place-content:space-evenly stretch;
		span{
			place-self:center start;
			text-align:left;
		}
	}
}
#defenses{
	display:grid;
	grid-template-columns:repeat(4,auto);
	grid-template-rows:repeat(3,auto) 1fr;
	grid-gap:$half-gap;
	grid-template-areas:
	"armor-class 	shielded 	armor		armor"
	"armor-class 	shielded	shield		shield"
	"hp				hp_max		initiative	base-attack"
	"injuries		injuries 	injuries	injuries";
	@each $c in armor-class,shielded,armor,shield,hp,hp_max,initiative,base-attack,injuries{
		> .#{$c}{
			grid-area:$c;
		}
	}
}
#skills{
	> .repcontainer{
		> .repitem{
			grid-template-columns:1fr repeat(2,auto);
		}
	}
}
#benefits{
	> .repcontainer{
		> .repitem{
			grid-template-rows:auto 1fr;
		}
	}
}
#arms{
	> .repeat-columns,
	> .repcontainer > .repitem{
		grid-template-columns:1fr[name] 98px[ability] 3em[total] 2em[misc] 0.5fr[damage] 98px[dam-ability] 2em[dam-misc] 7em[range] 1fr[notes] 29px[button];
	}
	> .repcontainer{
		> .repitem{
			> input{
				text-align:center;
			}
			> input:first-of-type,
			> input:last-of-type{
				text-align:left;
			}
			> button{
				margin:0;
			}
		}
	}
}
#defensive-combat{
	> .repeat-columns,
	> .repcontainer > .repitem{
		grid-template-columns:1fr[name] 98px[select] 3em[total] 2em[misc] 0.5fr[block] 98px[block-select] 2em[block-misc] 29px[partial] 29px[full];
	}
	> .repcontainer{
		> .repitem{
			> input{
				text-align:center;
			}
			> input:first-of-type{
				text-align:left;
			}
			> button{
				&:before{
					content:'';
				}
			}
		}
	}
}
#equipment{
	display:grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: repeat(3,auto);
	grid-template-areas: 
	"header header"
	"label encumbrance"
	"repcontainer repcontainer";
	grid-gap:$half-gap;
	> .repcontainer{
		grid-area: repcontainer;
		> .repitem{
			grid-template-columns:1fr auto;
		}
	}
	> .header{
		grid-area:header;
	}
	> .label{
		grid-area:label;
		color:black;
		padding:0;
		place-self:center right;
	}
	> input{
		grid-area:encumbrance;
	}
}
#miracles{
	grid-area:miracles;
}
#lores{
	grid-area:lores;
}
#miracles,#lores{
	> .repcontainer{
		> .repitem{
			display:grid;
			grid-template-columns:1fr repeat(3,auto);
			grid-template-rows:repeat(2,auto);
			grid-template-areas: 
			"name 			custom-mod 	total-mod 	button"
			"description 	description description description";
			> textarea{
				grid-area:description;
			}
		}
	}
}
#grimoires{
	grid-area:grimoires;
	> textarea{
		min-height:6em;
	}
}
#prepared{
	grid-area:prepared;
}
#wealth{
	grid-area:wealth;
	display:grid;
	grid-row-gap:$grid-gap;
	grid-template-columns: repeat(6,auto) 1fr;
	grid-template-rows: repeat(2,auto);
	grid-template-areas: 
	"header			header			header			header			header			header 			header"
	"Llabel 		Linput			Slabel 			Sinput 			Plabel 			Pinput ."
	"repcontainer 	repcontainer 	repcontainer 	repcontainer 	repcontainer 	repcontainer repcontainer";
	>h3{
		grid-area:header;
	}
	> input{
		text-align:left;
		width:4em;
		padding-left:0.5em;
	}
	> #wealth-section{
		grid-area:repcontainer;
		> .repcontainer{
			> .repitem{
				display:grid;
				grid-template-columns:1fr auto;
			}
		}
	}
}
#lineage{
	grid-area:lineage;
}
#retainers{
	grid-area:retainers
}
#influence{
	grid-area:influence;
}
#information{
	grid-area:information;
}
/*
	Roll Template Styling
*/
.sheet-rolltemplate-lion_dragon{
	border:1px solid black;
	background-color:white;
	border-radius:3px;
	*{
		white-space:pre-wrap;
	}
	> div{
		padding:5px;
	}
	.inlinerollresult{

	}
	.sheet-header{
		border-radius:0 0 3px 3px;
		display:grid;
		grid:repeat(2,1fr);
		background-color:black;
		*{
			color:white;
			text-transform:capitalize;
		}
		.sheet-title{
			justify-self:start;
		}
		.sheet-character_name{
			justify-self:end;
		}
	}
	> div:last-child{
		border-bottom-left-radius:3px;
		border-bottom-right-radius:3px;
	}
	> div:not(.sheet-header){
		position:relative;
		display:grid;
		grid-template-columns:repeat(2,1fr);
		&:nth-child(odd) {
		 background-color:#eee;
		}
		&.sheet-dc-compare{
			grid-template-columns:1fr auto 1fr;
		}
	}
	.sheet-vs{
		text-transform:uppercase;
		font-weight:bold;
	}
	.sheet-label{
		text-transform:capitalize;
		font-weight:bold;
	}
	.sheet-roll,.sheet-dc{
		place-self:center;
	}
	.sheet-description{
		grid-template-rows:auto auto;
		> *{
			grid-column:span 2;
		}
	}
	.inlinerollresult{
		position:relative;
		&,
		&.fullcrit,
		&.fullfail,
		&.importantroll{
			border:none;
			background-color:transparent;
		}
		&.fullcrit{
			color:green;
		}
		&.fullfail{
			color:red;
		}
		&.importantroll{
			color:blue;
		}
	}
}