roll20-character-sheets/HollowEarthExpedition/hex.scss

$black: #4c4c4c;
$white: #fff;
$bottomlabel: grey;
$pipoutline: #ccc;
$darkgrey: darkgrey;
$rulelines: lightblue;
$heading-background: #ba7337;
$font-size-large: 1rem;
$font-size-medium: 0.9rem;
$font-size-small: 0.7rem;
$font-size-smallest: 0.6rem;

@mixin input-cell {
	display: table-cell;
	text-align: left;
	padding: 0 0.1rem;
}

.sheet-hex {
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
	max-width: 640px;
	min-width: 480px;
	width: 100%;

	button[type="roll"] {
		border: 1px solid $darkgrey;
		border-radius: 0;
		display: inline-block;
		font-size: $font-size-small;
		width: 100%;

		&.sheet-roll-button {
			width: 1.6rem;
		}
	}

	h1 {
		background-color: $heading-background;
		border-top-left-radius: 0.25rem;
		color: $white;
		font-size: $font-size-large;
		line-height: 1.4rem;
		padding: 0 0 0.1rem 0.5rem;

		&.sheet-first-heading {
			border-top-left-radius: 3rem;
			float: right;
			text-align: center;
			width: 50%;
		}
	}

	input[type="text"], input[type="number"] {
		border-radius: 0;
		box-shadow: none;
		color: $black;
		font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

		&.sheet-free-input {
			border: none;
			border-bottom: 1px solid $rulelines;
			font-size: $font-size-medium;
			margin: 0.2rem 0 0 0;
			width: 100%;

			&.small {
				font-size: $font-size-small;
			}

			& + span {
				color: $bottomlabel;
				font-size: $font-size-small;
				font-style: italic;
				margin: 0 0 0 0.4rem;
			}
		}

		&.sheet-skill-input {
			@extend .sheet-free-input;
			display: inline;
		}

		&.sheet-box-input {
			width: 100%;
		}

		&.sheet-style-input-number {
			width: 3rem;
		}
	}

	textarea {
		border: none;
		border-radius: 0;
		border-bottom: 1px solid $rulelines;
		box-shadow: none;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 0.9rem;
		height: 2.8rem;
		max-width: 100%;
		min-width: 100%;
		width: 100%;
	}

	.repcontainer {
		margin: 0 0 0.5rem 0;
	}

	.repcontrol {
		button {
			&.btn {
				&.repcontrol_add,
				&.repcontrol_edit {
					border: 1px solid $darkgrey;
					border-radius: 0;
					font-size: $font-size-small;
					padding: 0.2rem 0.6rem;
				}
			}
		}
	}

	.sheet-main-row {
		position: relative;
		top: -1.5rem;
	}

	.sheet-logo-row {
		.sheet-img-logo {
			min-height: 200px;
			width: 66.17647058823529%;

			.sheet-hexlogo {
				width: 100%;
			}
		}

		.sheet-archetype {
			display: block;
			float: right;
			padding: 1rem 0.3rem 0 0;
			width: 32%;

			.sheet-free-input {
				padding: 0.1rem 0.2rem;
				margin: 0;

				+ span {
					display: block;
					line-height: 0.9rem;
					padding: 0 0.4rem 0 0;
					text-align: right;
				}
			}
		}
	}

	.sheet-stats {
		position: relative;
		top: -6.5rem;
	}

	.sheet-2colrow {
		font-size: 0;

		.sheet-col {
			&.sheet-primary {
				margin: 0 20px 0 0;
				width: 85%;
			}

			&.sheet-sidebar {
				margin: 0.7rem 0 0 0;
				width: 10%;
			}

			&.sheet-collapse-margin {
				margin-right: 0;
				width: 50%;
			}

			&.sheet-encumbrance {
				float: right;
				width: 36%;

				.sheet-field {
					display: inline-block;
					line-height: 0.9rem;
					margin: 0 0.2rem 0 0;
					vertical-align: middle;
					width: 48%;
				}
			}

			&.sheet-languages-money {
				margin-right: 1rem;
				width: 59%;

				textarea {
					border-top: none;
					height: 4.6rem;

					&.sheet-money {
						height: 3rem;
					}
				}
			}
		}
	}

	.sheet-attr-input-label {
		border-bottom: 1px solid $rulelines;
		font-size: $font-size-medium;
		font-weight: normal;
		margin: 0.3rem 0 0.3rem 0;
		padding: 0 0 0.3rem 0;
		text-align: right;

		.sheet-button-spacer,
		button[type="roll"].sheet-roll-button {
			margin-right: 2rem;
		}

		&.sheet-attr-body {
			float: right;
			width: 78%;
		}

		&.sheet-attr-dexterity {
			float: right;
			margin: 0 0 0.3rem 0;
			width: 93%;
		}

		&.sheet-attr-strength {
			float: right;
			margin: 0 0 0.3rem 0;
			width: 100%;
		}

		&.sheet-right-attr {
			.sheet-button-spacer,
			button[type="roll"].sheet-roll-button {
				margin-right: 20%;
			}
		}
	}

	.sheet-side-input-label {
		@extend .sheet-attr-input-label;
		padding: 0 0 0.5rem 0;
		text-align: left;


		.sheet-side-heading {
			display: block;
			font-size: $font-size-medium;

			&:nth-child(2) {
				margin: 0 0 0.5rem 0;
			}

			.sheet-subtext {
				display: block;
				margin: 0.4rem 0 0 0;
			}
		}
	}

	.sheet-footnote {
		color: $bottomlabel;
		font-size: $font-size-small;
		font-style: italic;
	}

	.sheet-paren {
		font-weight: normal;
	}

	.sheet-attr-input-text {
		width: 2rem;
	}

	.sheet-wider-input-text {
		width: 3rem;
	}

	.sheet-sub-label {
		font-size: $font-size-smallest;
	}

	.sheet-heading-with-columns {
		position: relative;

		.sheet-column-headings {
			display: block;
			position: absolute;
			top: 0.1rem;
			width: 100%;

			div {
				color: $white;
				font-size: $font-size-small;
				font-weight: normal;

				&.sheet-skill-name,
				&.sheet-skill-base,
				&.sheet-skill-levels,
				&.sheet-skill-rating,
				&.sheet-skill-avg,
				&.sheet-skill-roll {
					display: inline-block;
					text-align: left;
				}
			}
		}
	}

	%hexcell {
		@include input-cell;
	}

	.sheet-skill-name {
		@extend %hexcell;
		width: 50%;
	}

	.sheet-skill-base,
	.sheet-skill-levels,
	.sheet-skill-rating,
	.sheet-skill-avg {
		@extend %hexcell;
		width: 10%;
	}

	.sheet-skill-roll,
	.sheet-weapon-roll {
		@extend %hexcell;
		width: 8%;
	}

	.sheet-weapons {

		.sheet-weapon-row-1 {
			display: block;
		}

		.sheet-weapon-row-2 {
			border-bottom: 1px dashed $darkgrey;
			display: block;
			margin: 0 0 0.5rem 0;
			padding: 0 0 0.5rem 0;
			position: relative;
		}
	}

	.sheet-weapon-isranged {
		position: absolute;
		top: -1rem;
		left: 0.6rem;

		+ span {
			color: $bottomlabel;
			font-size: $font-size-small;
			font-style: italic;
			position: absolute;
			left: 1.6rem;
			top: -1.1rem;
		}

		~ .sheet-ranged-stats {
			display: none;
		}

		&:checked {
			~ .sheet-ranged-stats {
				display: block;
			}
		}
	}

	.sheet-ranged-stats {
		width: 100%;
	}

	.sheet-weapon-name {
		@extend %hexcell;
		width: 50%;
	}

	.sheet-weapon-dmg,
	.sheet-weapon-attack,
	.sheet-weapon-range,
	.sheet-weapon-capacity {
		@extend %hexcell;
		width: 12%;
	}

	.sheet-weapon-ammo,
	.sheet-weapon-avg {
		@extend %hexcell;
		width: 10%;
	}

	.sheet-weapon-mod,
	.sheet-weapon-rate,
	.sheet-weapon-speed {
		@extend %hexcell;
		width: 8%;
	}

	.sheet-weapon-notes {
		@extend %hexcell;
		width: 42%;
	}

	.sheet-equip-item {
		display: inline-block;
		padding: 0 0.1rem;
		width: 70%;
	}

	.sheet-equip-num {
		display: inline-block;
		padding: 0 0.1rem;
		width: 10%;
	}

	.sheet-equip-weight {
		display: inline-block;
		padding: 0 0.1rem;
		width: 17%;
	}

	.sheet-bottom-separator {
		margin-bottom: 1rem;
	}

	.sheet-left-separator {
		margin-left: 1rem;
	}

	.sheet-top-separator {
		margin-top: 1rem;
	}

	.sheet-button-spacer {
		display: inline-block;
		width: 28px;
	}

	.sheet-subtext {
		font-size: $font-size-small;
	}

	.sheet-health-meter {
		border-bottom: 1px solid $rulelines;
		padding: 0 0 0.5rem 0;

		th {
			font-size: $font-size-small;
			font-weight: normal;
			padding: 0.5rem 0 0.2rem 0;
			text-align: left;
			width: 25%;
		}

		td {
			font-size: $font-size-large;
			text-align: right;

			&:first-child {
				padding: 0.1rem 0.4rem 0.1rem 0;
				width: 33%;
			}
		}

		p {
			border-bottom: 1px solid $bottomlabel;
			font-size: $font-size-small;
			margin: 0.4rem 0 0 0.4rem;
			padding: 0 0 0.3rem 0;

			span.sheet-large-icon {
				font-size: $font-size-large;
			}
		}

		div.sheet-pip-circle {
			border: 1px solid $pipoutline;
			border-radius: 10px;
			width: 20px;
			height: 20px;
			position: relative;
		}

		input.sheet-pip-circle {
			height: 18px;
			left: 0;
			margin: 0;
			opacity: 0;
			position: absolute;
			width: 18px;
			z-index: 1;

			&.sheet-healthy-pip {
				z-index: 2;
			}
		}

		span.sheet-pip-circle {
			margin: 0;
			display: none;
		}

		input.sheet-healthy-pip:checked + input.sheet-l-pip,
		input.sheet-l-pip:checked + input.sheet-nl-pip {
			z-index: 3;
		}

		input.sheet-healthy-pip:checked ~ span.sheet-l-pip,
		input.sheet-l-pip:checked ~ span.sheet-nl-pip,
		input.sheet-nl-pip:checked ~ span.sheet-healthy-pip {
			display: inline-block;
		}

		%pip {
			border-radius: 8px;
			height: 32px;
			position: absolute;
			width: 32px;
			font-size: 1.3rem;
			top: 0;
		}

		.sheet-healthy-pip {
			@extend pip;
		}

		.sheet-nl-pip, .sheet-l-pip {
			@extend pip;
			left: -12px;
		}
	}

	.sheet-no-bottom-border {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;

		.sheet-side-heading {
			margin: 0;
		}
	}
}