roll20-character-sheets-tester/Aquablue/scss/files/templates.scss

$J1:0;
$J2:0;
$J3:0;
$J4:0;

.sheet-rolltemplate-jets {
	display:flex;
	width:calc(100% - 10px);
	flex-wrap: wrap;
	padding:5px;
	border:1px solid $black;
	border-radius: 30px;
	background:$white;
	padding-bottom:15px;

	h1 {
		width: 100%;
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
		font-size: 18px;
		line-height: 18px;
		margin-top: 15px;
		padding-bottom: 2px;
	}

	h2 {
		width:100%;
		font-size:11px;
		font-weight:bold;
		text-align:center;
		font-variant: small-caps;
		border-bottom:2px solid;
		margin-bottom:5px;
		line-height: 11px;
		padding-bottom: 5px;
	}

	div.sheet-score,
	div.sheet-jet {
		display:flex;
		width:100%;
		justify-content: space-between;
		align-items:center;
		line-height:20px;

		>span {
			&:first-of-type {
				width:50%;
				font-variant: small-caps;
				font-weight: bold;
			}

			&:last-of-type {
				display:flex;
				justify-content: center;
				width:50%;
			}
		}

		&:not(:last-of-type) {
			border-bottom:1px solid;
		}
	}

	h1.sheet-brown {
		color:$brown1;
	}

	h2.sheet-brown {
		color:$brown1;
		border-bottom-color: $brown1;
	}

	div.sheet-brown {
		>span {
			&:first-of-type {
				color:$brown1;
			}
			
			&:last-of-type {
				color:$brown1;
			}
		}

		&:not(:last-of-type) {
			border-bottom-color:$brown1;
		}
	}

	span.sheet-brown {
		border-top-color:$brown1 !important;;
		color:$brown1;

		.inlinerollresult {
			color:$brown1;
			background:none;
			border:none;
		}
	}

	h1.sheet-blue {
		border-bottom-color: $blue2;
		color:$blue2;
	}

	h2.sheet-blue {
		color:$blue2;
		border-bottom-color: $blue2;
	}

	div.sheet-blue {
		>span {
			&:first-of-type {
				color:$blue2;
			}
			
			&:last-of-type {
				color:$blue2;
			}
		}

		&:not(:last-of-type) {
			border-bottom-color:$blue2;
		}
	}

	span.sheet-blue {
		color:$blue2;

		.inlinerollresult {
			color:$blue2;
			background:none;
			border:none;
		}
	}

	h1.sheet-grey {
		color:$grey1;
	}

	h2.sheet-grey {
		color:$grey1;
		border-bottom-color: $grey1;
	}

	div.sheet-grey {
		>span {
			&:first-of-type {
				color:$grey1;
			}
			
			&:last-of-type {
				color:$grey1;
			}
		}

		
		&:not(:last-of-type) {
			border-bottom-color:$grey1;
		}
	}

	span.sheet-grey {
		border-top-color:$grey1 !important;
		color:$grey1;

		.inlinerollresult {
			color:$grey1;
			background:none;
			border:none;
		}
	}

	div.sheet-r1,
	div.sheet-r2,
	div.sheet-r3 {
		span.inlinerollresult {
			&:nth-of-type(1) {
				color:$white;
				background:$brown2;
			}
			&:nth-of-type(2) {
				color:$black;
				background:$white;
			}
			&:nth-of-type(3) {
				color:$white;
				background:$blue3;
			}
		}
	}

	div.sheet-r,
	div.sheet-r0,
	div.sheet-r1,
	div.sheet-r2,
	div.sheet-r3 {
		padding-top:2px;
		padding-bottom:2px;
	}

	span.sheet-plainText {
		display:block;
		width:100%;
		text-align: justify;
		word-break: break-all;
		border-top:1px solid;
	}

	span.sheet-S0,
	span.sheet-S1,
	span.sheet-S2,
	span.sheet-S3 {
		display:none;
	}

	div.sheet-result {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 5px;
		margin-bottom: 5px;
		font-weight: bold;
		font-variant: small-caps;
		
		span.sheet-S0 {
			color:red;
		}

		span.sheet-S1,
		span.sheet-S2,
		span.sheet-S3,
		span.sheet-S4 {
			color:green;
		}
		
		&>div.sheet-T1,
		&>div.sheet-T2 {
			&>span.sheet-S0 {
				display:block;
			}
	
			&>div.sheet-S1,
			&>div.sheet-S2,
			&>div.sheet-S3,
			&>div.sheet-S4 {
				&>span.sheet-S1 {
					display:blocK;
				}
	
				&>div.sheet-S2,
				&>div.sheet-S3,
				&>div.sheet-S4 {
					&>span.sheet-S2 {
						display:block;
					}
	
					&>div.sheet-S3,
					&>div.sheet-S4 {
						&>span.sheet-S3 {
							display:block;
						}
	
						&>div.sheet-S4 {
							&>span.sheet-S3 {
								display:block;
							}
						}
					}
				}
			}
		}

		&>div.sheet-T3 {
			&>span.sheet-S0 {
				display:block;
			}
	
			&>div.sheet-S1,
			&>div.sheet-S2,
			&>div.sheet-S3,
			&>div.sheet-S4 {
				&>span.sheet-S0 {
					display:blocK;
				}
	
				&>div.sheet-S2,
				&>div.sheet-S3,
				&>div.sheet-S4 {
					&>span.sheet-S1 {
						display:block;
					}
	
					&>div.sheet-S3,
					&>div.sheet-S4 {
						&>span.sheet-S2 {
							display:block;
						}
	
						&>div.sheet-S4 {
							&>span.sheet-S3 {
								display:block;
							}
						}
					}
				}
			}
		}
	}

	div.sheet-critique {
		width: 100%;
		display: flex;
		justify-content: center;
		font-weight: bold;
		font-variant: small-caps;
		
		div {
			width:100%;
		}

		span.sheet-critique {
			display:none;
			border-top:1px solid;
			padding-top:5px;
			border-top:1px solid;
			text-align:center;
		}
		
		&>div.sheet-T1 {
			@include J1("T1");
		}			
		
		&>div.sheet-T2 {
			@include J1("T2");
		}			
		
		&>div.sheet-T3 {
			@include J1("T3");
		}
	}
}

.sheet-rolltemplate-jets .inlinerollresult  {
	display: inline-block;
	text-align: center;
	background:$red1;
	border:1px solid black;
	color:$white;
	margin-left:2px;
	margin-right:2px;
}

.sheet-rolltemplate-jets .inlinerollresult.fullcrit {
	border:1px solid black;
	background:$red1;
}

.sheet-rolltemplate-jets .inlinerollresult.fullfail {
	border:1px solid black;
	background:$red1;
}