roll20-character-sheets/Stars_Without_Number_Revised/Source/Stars_Without_Number_Revised.scss

$contrail: "Contrail One", sans-serif;
/* sheet colors */
$brightblue: #2B3FEA;
$navyblue: #223297;
$darkblue: #11194B;
$headergrey: #9B9B9B;
$skillgrey: #D3D3D3;
$lightbox: #F0F0F0;
$highlightyellow: #FFFF00;

/* roll template */
$arial: "Arial", sans-serif;
$times: "Times New Roman", serif;
$rt-red: #ff8080;
$rt-green: #83db53;
$rt-blue: #80b0ff;
$rt-purple: #b291ec;
$rt-gray: #bababa;

/* global styles */
.charsheet {
	background-color: white;
	padding: 0 !important;
	font-size: 12px;
	line-height: 18px;
	min-width: 800px;
	color: #000;

	div, span, label, textarea, button[type=roll], h1, h2, h3 {
		box-sizing: border-box;
	}

	label, .label {
		margin: 0;
		padding: 0;
		color: inherit;
		font-size: 1em;
		font-weight: normal;
		width: auto;
		display: block;
		border-radius: inherit;
		white-space: normal;
	}

	p {
		font-size: 1em;
		margin: 0 0 5px;
		line-height: inherit;
	}

	textarea {
		resize: vertical;
		padding: 1px 4px;
		font-size: 12px;
		margin: 0;
		color: #000;
		display: block;
	}

	input[type=text], input[type=number] {
		padding: 1px 4px;
		font-size: 12px;
		height: 20px;
		color: #000;
	}

	input[type=number][readonly="readonly"],
	input[type=number].no-spinners {
		-moz-appearance: textfield;

		&::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}

	select {
		margin: 0;
		color: #000;
		font-size: 12px;
		padding: 1px 2px;
		line-height: 18px;
		height: 22px;
	}

	button[type=roll].btn {
		margin: 0
	}

	button[type=roll].unstyled-button {
		text-shadow: none;
		box-shadow: none;
		color: inherit;
		text-align: inherit;
		padding: 0;
		border: none;
		border-radius: 0;
		font-size: inherit;
		background: transparent;

		&::before {
			content: ""
		}
	}

	button[type=roll].invisible-button {
		position: absolute;
		z-index: 1;
		opacity: 0;
		left: 0;
		width: 100%;
		height: 100%;
		top: 0;

		&:hover ~ div:not(.no-highlight) {
			color: $brightblue;
			border-color: $brightblue;
		}
	}

	.hider[value="0"] {
		+ div, + label, + button, + span {
			display: none
		}
	}

	.hider[value=""] + button {
		display: none
	}

	.editmode[value="0"] ~ .content .empty-hider[value=""] + div {
		display: none
	}

	/* headings */
	h1 {
		font-family: $contrail;
		background-color: $headergrey;
		padding-left: 5px;
		color: #fff;
		font-size: 1.3em;
		line-height: 22px;
		font-weight: normal;

		&::after {
			content: "";
			position: absolute;
			right: 0;
			background-color: $navyblue;
			background-position: center;
			background-size: 100%;
			width: 22px;
			height: 22px;
		}
	}

	h2 {
		font-family: $contrail;
		padding-left: 5px;
		border: 2px solid #000;
		background-color: #ccc;
		color: #000;
		font-size: 1.1em;
		margin: 5px 0;
		width: 175px;
		line-height: 18px;
	}

	h3 {
		font-size: 1.2em;
		font-family: $contrail;
		color: #6B6B6B;
		line-height: 1.5;
		font-weight: normal;
	}

	/* tab wrappers and type chooser */
	.npc-input[value="0"] ~ .tabs .npc-tab,
	.npc-input[value="1"] ~ .tabs .pc-tab,
	.npc-input[value="0"] ~ .drones .npc-show,
	.npc-input[value="1"] ~ .drones .pc-show,
	.tab-input:not([value="character"]) ~ .character,
	.tab-input:not([value="ship"]) ~ .ship,
	.tab-input:not([value="drones"]) ~ .drones,
	.tab-input:not([value="npc"]) ~ .npc {
		display: none
	}

	.content {
		min-width: 800px;
		display: grid;
		grid-gap: 5px;
	}

	/* editmode */
	.editmode[value="0"] ~ .content .edit,
	.editmode[value="0"] ~ .content .repcontrol,
	.editmode[value="1"] ~ .content .display {
		display: none
	}

	/** edit mode highlighting **/
	.editmode[value="1"] ~ {
		.content {
			border-color: $highlightyellow;
			border-style: solid;
			border-width: 0 2px 2px 2px;
		}

		.header {
			border-bottom: 2px solid $highlightyellow;
		}

		.tabs {
			border-color: $highlightyellow;
			border-style: solid;
			border-width: 0 2px 0 2px;
		}

		.settings {
			border-color: $highlightyellow;
			border-style: solid;
			border-width: 0 2px 0 2px;
		}

		div .edit-button {
			background-color: $highlightyellow;
			height: 29px;
			padding: 0 5px 0 5px;
			margin: 0 0 0 15px;
			display: flex;
			align-items: center;
		}
	}

	.editmode[value="1"] ~ div .edit-button input {
		align-self: center;
	}

	/* dice icons */
	.dice-icon {
		background: transparent url("https://github.com/Roll20/roll20-character-sheets/blob/master/Stars_Without_Number_Revised/Assets/dice.png") no-repeat 80px 3px !important;
		background-size: 15px 15px !important;
	}

	/* header */
	.header {
		input {
			opacity: 0;
			position: absolute;
		}

		.logo {
			width: 480px
		}

		.npc-chooser {
			cursor: pointer;
			margin-left: auto;
			color: #fff;

			span {
				padding: 3px 6px
			}

			input:not(:checked) ~ .pc-label, input:checked ~ .npc-label {
				background: $darkblue
			}

			input:checked ~ .pc-label, input:not(:checked) ~ .npc-label {
				background: $navyblue
			}
		}

		.edit-button {
			margin: 0 5px 0 20px
		}

		.settings-gear, .edit-button {
			cursor: pointer;
			font-size: 16px;
			//noinspection CssNoGenericFontName | There is no generic to a picture font.
			font-family: pictos;

			input:not(:checked) + span {
				color: #888
			}

			input:checked + span {
				color: $navyblue
			}
		}
	}

	.footer {
		font-size: 10px;
		border-top: 1px solid #ccc;
		margin-top: 10px;
		color: #666;

		button[type="roll"].btn:hover {
			color: $navyblue
		}
	}

	/* tab environment */
	.tabs {
		padding-bottom: 10px;
		padding-top: 10px;
		width: 100%;
		position: relative;
		z-index: 2;
		border-top: 1px solid #333;
		font-family: $contrail;
		flex-flow: row-reverse;
		justify-content: flex-end;

		input {
			opacity: 0;
			position: absolute;

			&:checked + span {
				background: $darkblue
			}

			&:not(:checked) + span {
				background: $navyblue
			}
		}

		span {
			padding: 1px 25px 0
		}

		label {
			cursor: pointer;
			line-height: 17px;
			display: flex;
			margin: -1px -10px 0 0;
			color: #fff;
			clip-path: polygon(0 0, 100% 0, 100% 10px, calc(100% - 10px) 100%, 0 100%);
		}
	}

	/* organisation */
	.flex {
		display: flex;
	}

	.flex-start {
		display: flex;
		align-items: flex-start;
	}

	.flex-center {
		display: flex;
		align-items: center;
	}

	.flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-wrap {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		align-items: flex-start;
	}

	.grow {
		flex-grow: 1
	}

	.halfgrid {
		display: grid;
		grid: auto/ 1fr 1fr;
		grid-gap: 5px;
	}

	.thirdsgrid {
		display: grid;
		grid: auto/ repeat(3, 1fr);
		grid-column-gap: 1%;
	}

	.column > div:not(:first-child) {
		margin-top: 5px
	}

	.col-2 {
		grid-column: 2
	}

	.col-3 {
		grid-column: 3
	}

	.col-4 {
		grid-column: 4
	}

	.cols-2 {
		grid-column: span 2
	}

	.cols-3 {
		grid-column: span 3
	}

	.cols-4 {
		grid-column: span 4
	}

	.rows-2 {
		grid-row: span 2
	}

	.col55 {
		width: 55%
	}

	.col50 {
		width: 50%
	}

	.col40 {
		width: 40%
	}

	.colthird {
		width: calc(100% / 3)
	}

	.col25 {
		width: 25%
	}

	.col20 {
		width: 20%
	}

	.colsixth {
		width: calc(100% / 6)
	}

	/* containers */
	.grey-box, .grey-box-bordered {
		padding: 4px;
		background: $lightbox;
	}

	.grey-box-bordered {
		border: 1px solid #aaa
	}

	.core-box {
		padding: 8px;
		background: $lightbox;
	}

	.core-box-text {
		padding: 8px 3px 3px 8px;
		background: $lightbox;
	}

	input[type=text].inherit {
		border-radius: 0;
		border: none;
		background: transparent;
		box-shadow: none;
		padding: 0;
		color: inherit;
		font: inherit;
	}

	.inline-input {
		position: relative;
		z-index: 2;
		vertical-align: baseline;
		padding: 0 3px;
	}

	.text-input {
		color: #666;
		padding-right: 5px;
		line-height: 1;

		.label {
			font-size: .9em;
			text-align: inherit;
			line-height: 14px;
			border-top: 1px solid #AAA;

			input[type="checkbox"] {
				height: 14px;
				margin: 0 3px 0 0;
			}
		}

		input[type=text], input[type=number], textarea {
			background: transparent;
			padding: 1px 0;
			width: 100%;
			border-radius: 0;
			color: $navyblue;
			border: none;
			text-align: inherit;
			font-weight: inherit;
			box-shadow: none;

			&[readonly="readonly"] {
				cursor: default
			}
		}

		input[type=text], input[type=number] {
			font-size: 1.1em
		}

		textarea {
			height: 20px;
			min-height: 20px;
		}

		> input[type=checkbox] {
			height: 14px;
			margin: 3px 0;
		}

		select {
			width: 100%;
			height: 20px;
			color: $navyblue;
			background: transparent;
			border: none;
		}

		&.important {
			font-weight: bold;
			font-size: 1.1em;
		}

		&.center {
			text-align: center
		}

		&.duo {
			display: grid;
			text-align: center;
			grid: auto / 3px 1fr 5px 1fr 3px;
			align-items: center;
			align-content: start;
			grid-column-gap: 0;

			> span {
				font-size: 16px;
				color: #333;
			}

			.label {
				grid-column: 1/5
			}
		}

		&.trio {
			display: grid;
			text-align: center;
			grid: auto / 3px 1fr 5px 1fr 5px 1fr 3px;
			align-items: center;
			align-content: start;
			grid-column-gap: 0;

			> span {
				font-size: 16px;
				color: #333;
			}

			.label {
				grid-column: 1/7
			}
		}

		button[type=roll].btn {
			width: 100%;

			&:hover {
				color: red
			}
		}
	}

	.table-header {
		font-size: .9em;
		color: #666;

		.center {
			text-align: center
		}

		> div {
			padding-left: 2px;
			border-bottom: 1px solid #aaa;
		}
	}

	.blue-button {
		text-align: center;
		line-height: 1.5;

		button[type=roll].btn {
			background: $brightblue;
			width: 35px;
			height: 35px;
			display: block;
			margin: 0 auto;
			color: white;

			&::before {
				content: ""
			}
		}
	}

	.focusinfo {
		position: relative;

		.details {
			position: absolute;
			z-index: 1;
			opacity: 1;
			width: 250px;
			top: 22px;
			left: calc(50% - 125px);
			transition: all 0.3s;
			background: #FFF;
			border: 1px solid #777;
			border-radius: 8px;
			padding: 5px;
		}

		input:not(:focus) ~ .details {
			visibility: hidden;
			opacity: 0;
		}
	}

	/* inline styling */
	.lower {
		text-transform: lowercase
	}

	.space-before::before, .space-after::after {
		content: " "
	}

	.colon-after::after {
		content: ":"
	}

	.hide-empty[value=""] + span {
		display: none
	}

	.add-plus:not([value^="-"]) + span::before {
		content: "+"
	}

	.api {
		font-size: .8em;
		background: $lightbox;
		border-radius: 5px;
		padding: 1px;
		line-height: 1;
		vertical-align: super;
	}

	/* force repeating row behaviour */

	.simple-repsection {
		.repitem {
			margin-bottom: 3px
		}

		textarea {
			margin: 3px 0 0;
			height: 50px;
		}

		.display {
			.name {
				font-weight: bold;
				font-size: 1.1em;
				border-bottom: 1px solid #777;
			}

			.details {
				line-height: 1.4;
				text-align: justify;
				white-space: pre-wrap;
			}
		}
	}

	.rep-grid {
		display: grid;
		align-items: start;
		grid-column-gap: 3px;
		margin-bottom: 3px;

		.text-input {
			padding: 0
		}
	}

	/* global skill settings */
	.skills-type[value="neither"] ~ div .skills-either,
	.skills-type:not([value="first"]) ~ div .skills-first,
	.skills-type:not([value="revised"]) ~ div .skills-revised,
	.skills-type:not([value="wwn"]) ~ div .skills-wwn,
	.skills-type:not([value="neither"]) ~ div .skills-neither,
	.super-type:not([value="psionics"]):not([value="both"]) ~ div .skills-psionics,
	.super-type:not([value="magic"]):not([value="both"]) ~ div .skills-magic,
	.skills-query:not([value="hover"]) ~ div .skills-query-hover,
	.skills-query[value="query"] ~ div .skills-query-display,
	.skills-query[value="query"] ~ div .skills-query-ask {
		display: none;
	}

	.skills-query-display {
		input:not([value*="str"]) ~ .str,
		input:not([value*="dex"]) ~ .dex,
		input:not([value*="con"]) ~ .con,
		input:not([value*="int"]) ~ .int,
		input:not([value*="wis"]) ~ .wis,
		input:not([value*="cha"]) ~ .cha {
			display: none
		}
	}

	.skills-query[value="hover"] ~ div .skill:hover .skills-query-display,
	.skill .display .query:focus + .skills-query-display {
		display: none
	}

	/* repeating section controls */
	.repcontrol {
		display: flex;
		margin-top: 4px;

		button {
			padding: 3px 10px
		}
	}

	.repcontrol_edit {
		order: 1;
		margin-left: auto;
	}

	.repcontrol button {
		background: $navyblue;
		color: #FFF;
		box-shadow: none;
		text-shadow: none;
	}

	.repcontrol_move, .repcontrol_del {
		padding: 1px 10px
	}

	.itemcontrol {
		z-index: 100
	}

	/* Section visibility toggling */
	/* Github hosting doesn't seem to work, for some reason: https://svgshare.com/i/6Vz.svg */
	.section-toggle-header {
		position: relative;

		input {
			cursor: pointer;
			position: absolute;
			width: 22px;
			height: 100%;
			z-index: 2;
			right: 0;
			opacity: 0;

			+ h1::after {
				background-image: url("https://svgshare.com/i/6Vz.svg")
			}

			&:not(:checked) + h1::after {
				transform: rotate(180deg)
			}
		}

		+ input + div {
			margin-top: 5px
		}
	}

	/* Settings */
	.settings {
		label {
			font-weight: bold;

			span {
				margin-right: 4px
			}
		}

		select {
			width: 120px;
			display: inline-block;

			&.wide {
				width: 170px
			}
		}
	}

	/* generate buttons */
	.generate {
		margin-bottom: 5px;

		.generate-source {
			height: 20px;
			width: 170px;
		}

		.generate-info {
			margin: 0 5px;
			min-height: 20px;
			flex-grow: 1;
			background: $lightbox;
			border-radius: 4px;
			padding: 1px 4px;
		}

		.generate-button {
			padding: 1px 8px;
			border-radius: 4px;
			cursor: pointer;
			background: #223297;
			color: #FFF;

			input[type=checkbox] {
				position: absolute;
				visibility: hidden;
			}

			&:active {
				outline: 5px auto;
				outline-offset: -2px;
			}
		}
	}

	/* Character core */
	.core {
		display: grid;
		grid-column-gap: 5px;

		&.core-info {
			grid: auto / 2.5fr 1fr .8fr;

			.info {
				flex-wrap: wrap;
				padding-right: 3px;

				.important {
					width: calc(60% - 22px);
				}

				.level {
					width: 44px
				}

				.level-rest {
					width: calc(40% - 22px)
				}
			}
		}

		&.core-stats {
			grid: auto / minmax(310px, 1.2fr) minmax(260px, 1fr) minmax(220px, .8fr);
		}

		.main-content {
			margin-top: 3px;
			display: grid;
			grid: auto / repeat(3, 1fr);
			grid-row-gap: 3px;

			.left-margin {
				margin-left: 15px
			}
		}
	}

	.strain-above-max[value="1"] ~ div .total-strain {
		color: red;
	}

	/* Saves */
	.saves .flex {
		margin-top: 4px
	}

	/* menus */
	.menus-content {
		display: grid;
		grid: auto / 1fr 1fr;
	}

	.menus button[type=roll].btn {
		color: $brightblue;
		font-size: 1.1em;

		&:hover {
			color: red
		}

		.character & {
			margin-right: auto
		}
	}

	/* Attributes */
	.attributes {
		font-size: 1.1em;
		line-height: 1.2;

		table {
			width: 100%;
			height: 100%;
		}

		td:first-child, .mod {
			font-weight: bold
		}

		td:not(:first-child) {
			text-align: center
		}

		input[type=number] {
			width: 45px
		}

		td:nth-child(2n+3) input[type=number] {
			width: 37px
		}

		.mod {
			font-size: 1.1em
		}
	}

	/* Resources */
	.editmode[value="0"] ~ .content .resources .repcontainer {
		grid: auto / 1fr 1fr;
	}

	.resources {
		.credits {
			margin-left: auto
		}

		.repcontainer {
			display: grid;
			grid-row-gap: 3px;
			margin-top: 3px;
		}

		input[type=text] {
			width: calc(100% - 8em);
			margin-right: auto;
		}

		.slash {
			margin: 0 2px
		}
	}

	/* Shells */

	.shells {
		.shells-grid {
			grid: auto / 40px 35px 35px 35px 45px 1fr;
		}
	}

	.transhuman-setting:not([value="transhuman"]) ~ .column .transhuman-enabled {
		display: none
	}

	.transhuman-setting[value="transhuman"] ~ .core .transhuman-disabled {
		display: none
	}

	/* Weapons */
	.weapons {
		.edit {
			justify-content: space-between;
			padding-right: 1px;

			.name {
				width: 138px
			}

			.ab {
				width: 45px
			}

			.weapon-skill {
				width: 80px
			}

			.attribute {
				width: 60px
			}

			.burst {
				width: 65px
			}

			.damage {
				width: 60px
			}

			.shock-damage {
				width: 55px
			}

			.shock-ac {
				width: 55px
			}

			.skill-to-damage {
				width: 30px
			}

			.range {
				width: 60px
			}

			.ammo {
				width: 80px
			}

			.enc {
				width: 40px
			}
		}

		.text-input {
			padding-right: 3px
		}

		.repitem {
			margin-bottom: 3px
		}

		.display {
			font-size: 1.1em;
			border: 1px solid #888;
			text-indent: -10px;
			padding: 2px 4px 2px 14px;

			.name {
				font-weight: bold
			}
		}

		.repitem:nth-child(odd) .display {
			background: $skillgrey
		}
	}

	/* Skills */
	.skill-container, .skills-repeating .repcontainer {
		display: grid;
		grid: auto / 1fr 1fr;
		grid-gap: 4px 1%;
	}

	.skill {
		position: relative;

		.display, .edit {
			border: 1px solid #888;
			padding: 2px 4px;
			height: 100%;
		}

		.display {
			font-weight: bold;
			font-size: 1.1em;

			.dice[value="3d6d1"] + .name::after {
				content: "3d6"
			}

			.dice[value="4d6d2"] + .name::after {
				content: "4d6"
			}

			.name {
				margin-right: auto
			}

			.name::after {
				vertical-align: super;
				margin-left: 2px;
				font-weight: normal;
				font-size: .7em;
			}

			.query {
				width: 55px;
				background: transparent;
				border-color: transparent;
				position: relative;
				height: 18px;
				z-index: 2;
				margin: 0 2px;
				outline: none;
				color: inherit;
				flex-shrink: 0;
				line-height: 16px;
				padding: 0;
			}
		}

		&:not(:hover) .display .query:not(:focus) {
			display: none
		}

		.skills-query-display {
			margin: 0 3px;
			flex-shrink: 0;
			font-weight: normal;
		}

		.edit {
			input[type="text"].name {
				width: 100%;
				margin-bottom: 2px;
			}

			div.name {
				flex-grow: 1;
				width: 0;
				padding: 1px 2px;
			}

			.level {
				margin: 0 2px;
				padding: 1px 2px;
				width: 40px;
			}

			.query {
				width: 50px
			}

			.dice {
				width: 35px
			}

			&.flex-wrap {
				select, input {
					flex-grow: 1
				}
			}
		}

		&.skill-points {
			.display {
				font-size: 1.1em;
				font-weight: bold;
				width: 100%;
			}

			.name {
				background: #000;
				color: #fff;
				flex-grow: 0;
				margin-right: auto;
				width: auto;
				padding: 0 4px;
			}

			.edit .level {
				margin: 0
			}
		}
	}

	.skill-container .skill {
		&:nth-of-type(4n+1), &:nth-of-type(4n+2) {
			background: $skillgrey
		}
	}

	.repcontainer[data-groupname="repeating_skills"] .repitem {
		&:nth-of-type(4n+1) .skill, &:nth-of-type(4n+2) .skill {
			background: $skillgrey
		}
	}

	.skills-type:not([value="neither"]) ~ div .skills-repeating,
	.psionics .skills-repeating, .magic .skills-repeating {
		margin-top: 4px
	}

	.skill-blurb {
		margin-top: 3px;
		font-style: italic;
		text-align: center;
	}

	/* name + desc sections */
	.details-button {
		margin-left: auto;
		font-weight: bold;
		color: #999;
		letter-spacing: 1px;
		cursor: pointer;
		text-transform: uppercase;
		font-size: 10px;

		input {
			visibility: hidden;
			position: absolute;

			&:checked + span {
				color: #333
			}
		}
	}

	.input-details:not([value="1"]) ~ div .details {
		display: none
	}

	.input-details:not([value="0"]) ~ div .notdetails {
		display: none
	}


	/* Supernatural section controls */
	.super-type {
		&:not([value="psionics"]) ~ div .super-psionics-only,
		&:not([value="magic"]) ~ div .super-magic-only,
		&:not([value="both"]) ~ div .super-both,
		&[value="magic"] ~ div .super-psionics,
		&[value="psionics"] ~ div .super-magic,
		&[value="neither"] ~ div .super {
			display: none
		}
	}

	.tab-input:not([value="psionics"]) ~ .psionics,
	.tab-input:not([value="magic"]) ~ .magic {
		display: none
	}


	/* Psionics */
	.psionics-effort {
		display: grid;
		grid: auto/ auto 45px 45px 45px 45px 80px;
		align-items: center;
		grid-column-gap: 4px;
		margin-top: 5px;

		h3 {
			line-height: 1
		}
	}

	.techniques {
		margin-top: 5px;

		> .flex-center {
			margin-bottom: 5px
		}

		.display .discipline {
			margin-left: auto
		}

		.edit .discipline {
			margin-left: 5px;
			width: 90px;
		}
	}

	/* Space Magic */

	.magic-effort {
		display: grid;
		grid: auto/ auto 45px 45px 45px 45px 80px;
		align-items: center;
		grid-column-gap: 4px;
		margin-top: 5px;

		h3 {
			line-height: 1
		}
	}

	.spells {
		margin-top: 5px;

		> .flex-center {
			margin-bottom: 5px
		}

		> .flex {
			border-bottom: 1px solid #666;
			margin-bottom: 3px;

			:not(:first-child) {
				text-align: center
			}
		}

		.edit {
			.name {
				width: 220px;
				flex-grow: 1;
			}

			.prepared {
				margin: 0 3px
			}

			.prepared, .damage {
				width: 60px
			}
		}

		.display {
			.name {
				padding-bottom: 1px
			}

			span.prepared {
				margin: 0 4px 0 auto
			}

			input[type=number].prepared {
				padding: 0 4px;
				position: relative;
				z-index: 2;
			}
		}
	}

	.spell-slots {
		display: grid;
		grid: auto/ auto 55px 55px 55px 55px 55px;
		align-items: center;
		grid-column-gap: 4px;
		margin-top: 5px;

		h3 {
			line-height: 1
		}
	}

	.magic-type {
		&:not([value="adept"]) ~ div .adept,
		&:not([value="magister"]) ~ div .magister,
		&:not([value="arcanist"]) ~ div .arcanist,
		&[value="adept"] ~ div .spellcaster {
			display: none
		}
	}

	/* AI */
	.ai-processing {
		display: grid;
		grid: auto/ auto 45px 45px 45px 45px 80px;
		align-items: center;
		grid-column-gap: 4px;

		h3 {
			line-height: 1
		}
	}

	.ai-processing-nodes {
		.nodes-grid {
			grid: auto / 65px 65px 1fr;
		}
	}

	.ai-setting:not([value="ai"]) ~ .ai-enabled {
		display: none
	}

	.ai-setting[value="ai"] ~ .column .ai-enabled {
		display: block
	}

	.ai-setting[value="ai"] ~ .core .ai-disabled {
		display: none
	}

	/* Foci */
	.foci-loc {
		&[value="left"] ~ .column .foci-right,
		&[value="right"] ~ .column .foci-left {
			display: none
		}
	}

	.foci {
		.details-button {
			position: relative;
			z-index: 2;
		}

		.class-ability {
			position: relative;

			.edit .name {
				font-weight: bold;
				font-size: 1.1em;
				border-bottom: 1px solid #777;
			}

			.name, .edit textarea, .display {
				margin-bottom: 3px
			}
		}

		.edit {
			.name {
				flex-grow: 1
			}

			.level {
				margin-left: 3px;
				width: 60px;
			}
		}

		.display .level {
			margin-left: auto
		}
	}

	/* Gear */
	.armor {
		.armor-grid {
			grid: auto / 40px 1fr 40px 75px 35px 35px 70px;
		}

		.details div, .details label {
			grid-column: 2 / 8;
		}

		.details .display {
			line-height: 1.3;
		}
	}

	.readied-stowed {
		display: grid;
		align-items: center;
		grid: auto / 1fr 60px 60px 80px 80px;
		grid-column-gap: 7px;

		.input-gear-over[value="1"] + .text-input input:first-child {
			color: red
		}
	}

	.cyberware {
		h3 {
			margin: 5px 0
		}

		.edit {
			flex-wrap: wrap;

			input[type=text] {
				width: 0;
				flex-grow: 1;
			}

			> span {
				margin: 0 3px
			}
		}
	}

	.equipment {
		.repcontainer[data-groupname="repeating_weapons"] + .repcontrol {
			display: none
		}

		.gear-grid {
			grid: auto / 35px minmax(130px, 1fr) 2fr 35px 70px 40px;
		}

		.other h3 {
			margin-bottom: 5px
		}

		.other-gear {
			height: 100px
		}
	}

	/* Misc */
	.misc {
		.text-input input {
			padding-left: 2px
		}

		.repitem {
			margin-bottom: 2px
		}

		.xp {
			width: 50px
		}
	}

	.notes {
		margin-top: 5px
	}

	/* Ship tab */
	.ship-class {
		&[value="fighter"] ~ .section .generate-source {
			.frigate, .cruiser, .capital {
				display: none
			}
		}

		&[value="frigate"] ~ .section .generate-source {
			.cruiser, .capital {
				display: none
			}
		}

		&[value="cruiser"] ~ .section .generate-source {
			.capital {
				display: none
			}
		}
	}

	.ship {
		margin-top: -20px;
		grid: auto/ 4fr 3fr 2fr;

		.menus {
			h3 {
				line-height: 1
			}

			button[type=roll].btn {
				line-height: 1
			}
		}

		.type {
			padding: 5px 8px;

			h3 {
				line-height: 1
			}

			select {
				height: 20px;
				width: 80px;
				background: transparent;
			}
		}

		.info {
			flex-wrap: wrap;

			.text-input {
				margin-bottom: 3px
			}
		}

		.data {
			display: grid;
			grid: auto / repeat(6, 1fr);

			.text-input, .text-input input[type=number] {
				text-align: center
			}

			.duo {
				grid-column-start: 1;
				grid-column-end: 3;
			}
		}

		.trio {
			grid-column-start: 3;
			grid-column-end: 7;
			grid: auto / 0 1fr 5px 1fr 5px 1fr 0
		}

		.duo {
			grid: auto / 0 1fr 5px 1fr 0
		}

		.stats {
			display: grid;
			grid: auto / 1fr 1fr;
		}

		.input-color-negative[value^="-"] + .text-input input:first-child {
			color: red
		}

		.repcontainer {
			display: grid;
			grid-row-gap: 3px;
		}

		.repitem {
			&, .edit, .display {
				width: 100%
			}
		}

		.grey-box-bordered {
			padding-right: 0
		}

		.ship-weapons {
			.edit {
				.name {
					width: calc(100% - 200px)
				}

				.damage {
					width: 65px
				}

				.duo {
					width: 80px
				}

				.qualities {
					width: calc(100% - 195px)
				}

				.range {
					width: 70px
				}
			}

			.display {
				text-indent: -10px;
				padding-left: 14px;
			}
		}

		.ship-defenses, .ship-fitting {
			.edit {
				.name, .effect {
					flex: 1 1 auto;
					width: 0;
				}
			}

			.display {
				text-indent: -10px;
				padding: 2px 4px 2px 14px;
			}
		}

		.edit {
			.broken {
				width: 50px
			}

			.number {
				width: 50px
			}
		}

		.display {
			.name {
				font-weight: bold
			}

			.broken {
				color: red;
				text-transform: uppercase;
			}

			.description {
				font-style: italic
			}
		}

		.input-type[value="SHIP"] ~ div .vehicle-type:not(.vehicle-type-ship),
		.input-type[value="MECH"] ~ div .vehicle-type:not(.vehicle-type-mech),
		.input-type[value="VEHICLE"] ~ div .vehicle-type:not(.vehicle-type-custom) {
			display: none;
		}

		.editmode[value="0"] ~ & {
			.ship-defenses, .ship-fitting {
				background: $lightbox;
				padding: 3px 0;
			}
		}
	}


	/* NPC tab */
	.npc {
		margin-top: -20px;
		grid: auto / 3fr .8fr 2.2fr;

		.input-individual-hide:not([value="1"]) ~ .rolls .individual-hide {
			display: none
		}

		.menus {
			h3 {
				line-height: 1
			}

			button[type=roll].btn {
				line-height: 1
			}
		}

		.info {
			display: grid;
			grid: auto / repeat(5, 1fr) 1.3fr;
		}

		.npc-hp {
			display: grid;
			grid: auto / 40px 1fr;
		}

		.individual-hide input[type="checkbox"] {
			margin-right: 2px
		}

		.npc-rep-header {
			margin: 4px
		}

		.rolls > :first-child {
			margin-bottom: 5px
		}

		.npc-checkbox {
			font-size: .9em;

			span {
				vertical-align: middle;
				margin-right: 4px;
			}
		}

		.repcontainer {
			display: grid;
			grid-gap: 3px;
		}

		.full-attacks {
			margin: 0 6px 0 auto
		}

		.grey-box-bordered {
			padding-right: 1px
		}

		.text-input {
			padding-right: 3px
		}

		.npc-attacks {
			.edit {
				.name {
					width: 0;
					flex-grow: 1;
				}

				.attacks, .ab, .range {
					width: 50px
				}

				.burst, .damage {
					width: 60px
				}

				.shock-damage {
					width: 30px
				}

				.shock-ac {
					width: 40px
				}
			}

			.display {
				font-size: 1.1em;
				font-weight: bold;
				padding: 4px 8px;

				.range[value="0"] + span {
					display: none
				}

				.attacks[value="1"] + span {
					display: none
				}

				.attacks {
					text-transform: lowercase
				}
			}
		}

		.npc-abilities {
			.npc-checkbox {
				margin-left: auto
			}

			.edit {
				.name {
					width: 100px
				}

				.description {
					width: 0;
					flex-grow: 1;
				}
			}

			.display {
				text-indent: -10px;
				padding: 4px 8px 4px 18px;

				.name {
					font-weight: bold
				}

				.description {
					font-style: italic
				}
			}
		}
	}

	/* Drone tab */
	.drone {
		display: grid;
		grid: 86px 1fr / 1fr 1fr;
		grid-gap: 5px;
		align-items: start;
		border-top: 1px solid #555;
		padding: 5px 0;

		.stats {
			display: grid;
			align-content: start;
			grid: auto / repeat(7, 1fr);
		}

		.fittings {
			.name {
				font-weight: bold;

				&:not(:empty)::after {
					content: ". "
				}
			}

			.desc {
				font-style: italic
			}

			.display {
				margin-bottom: 3px
			}
		}

		.fitting-grid {
			grid: auto / .8fr 1.2fr;
		}

		.num-fittings {
			&[value="1"], &[value="2"], &[value="3"], &[value="4"] {
				~ .fitting-5 {
					display: none
				}
			}

			&[value="1"], &[value="2"], &[value="3"] {
				~ .fitting-4 {
					display: none
				}
			}

			&[value="1"], &[value="2"] {
				~ .fitting-3 {
					display: none
				}
			}

			&[value="1"] {
				~ .fitting-2 {
					display: none
				}
			}
		}

		.weapon-grid {
			grid: auto / 35px 1fr 50px 60px 35px 70px;
		}

		.weapon {
			position: relative;

			.name {
				font-weight: bold
			}

			.display {
				margin-right: 4px;

				div::after {
					content: ","
				}
			}
		}

		.editmode[value="0"] ~ .content & .drone-weapons {
			display: flex;
			flex-wrap: wrap;
		}
	}
}

/* Roll templates */

.sheet-rolltemplate-swn-default,
.sheet-rolltemplate-swn-attack,
.sheet-rolltemplate-swn-skill,
.sheet-rolltemplate-swn-save {
	margin-left: -41px;
	width: 292px;
	color: #FFF;
	font-family: $arial;

	div {
		box-sizing: border-box;
	}

	.sheet-withoutavatars & {
		margin-left: -11px
	}

	.sheet-container .inlinerollresult {
		padding: 0;
		font-family: inherit;
		background: transparent;
		border-color: transparent;
		border: none;
	}

	.sheet-container {
		min-height: 175px;
		position: relative;
		padding: 18px 20px;
		clip-path: polygon(0 7px, 7px 0, 173px 0, 177px 3px, 281px 3px, 289px 11px, 289px 82px, 100% 87px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 22px 100%, 0 calc(100% - 22px));
	}

	.sheet-header {
		width: 198px;

		.sheet-name {
			margin-bottom: 12px;
			font-size: 13px;
			line-height: 1;
			height: 13px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-family: $times;
			font-weight: bold;
		}

		.sheet-title {
			font-size: 14px;
			height: 32px;
			line-height: 16px;
			overflow: hidden;
			font-weight: bold;
			margin-bottom: 24px;
		}
	}

	.sheet-content {
		position: relative
	}

	.sheet-rolls .inlinerollresult {
		font-size: 36px;
		font-weight: bold;
		line-height: 29px;
		white-space: nowrap;
	}

	.sheet-rolls {
		height: 35px;
		display: flex;
		align-items: start;
	}

	.sheet-rollname {
		font-size: 12px;
		line-height: 1;
	}

	a {
		color: inherit;

		&:hover {
			color: red
		}

		&[href^="~"] {
			padding: 0;
			background: transparent;
			border: none;
			line-height: 1.4;
		}
	}
}

.sheet-rolltemplate-swn-default {
	.sheet-container {
		background: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-top-black.png") top no-repeat,
		url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-bottom.png") bottom no-repeat,
		#0F0F0F;
	}

	.sheet-name {
		color: $rt-gray
	}

	.sheet-rollname {
		margin-right: auto
	}

	.sheet-desc, .sheet-buttons {
		font-size: 12px;
		line-height: 1.4;
	}

	.sheet-info {
		font-style: italic;
		font-size: 10px;
		line-height: 1;
		margin: -10px 0 5px;

		.inlinerollresult {
			font-size: 1em;
			font-weight: normal;
		}
	}
}

.sheet-rolltemplate-swn-attack {
	.sheet-container {
		background: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-top-purple.png") top no-repeat,
		url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-bottom.png") bottom no-repeat,
		#0F0F0F;
	}

	.sheet-name {
		color: $rt-purple
	}

	.sheet-title {
		.inlinerollresult {
			font-size: 1em;
			pointer-events: none;
		}
	}

	.sheet-damage {
		margin-left: auto
	}

	.sheet-roll {
		margin-left: 10px
	}

	.sheet-rolls:not(:first-of-type) {
		margin-top: 5px
	}

	.sheet-shock {
		font-style: italic;
		margin-top: 4px;
		font-size: 12px;
	}

	.sheet-info {
		font-style: italic;
		font-size: 10px;

		> span:first-child {
			margin-right: 10px
		}

		.inlinerollresult {
			font-weight: normal;
			font-size: 1em;
			margin-left: 2px;
		}
	}

	.sheet-desc {
		font-size: 12px;
		line-height: 1.4;
	}
}

.sheet-rolltemplate-swn-skill {
	.sheet-container {
		background: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-top-blue.png") top no-repeat,
		url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-bottom.png") bottom no-repeat,
		#0F0F0F;
	}

	.sheet-name {
		color: $rt-blue
	}

	.sheet-title {
		.sheet-italic {
			font-style: italic
		}

		.inlinerollresult {
			font-size: 1em;
			pointer-events: none;
		}
	}

	.sheet-rollname {
		margin-right: auto
	}
}

.sheet-rolltemplate-swn-save {
	.sheet-container {
		&.sheet-success {
			background: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-top-green.png") top no-repeat,
			url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-bottom.png") bottom no-repeat,
			#0F0F0F;

			.sheet-name {
				color: $rt-green
			}
		}

		&.sheet-failure {
			background: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-top-red.png") top no-repeat,
			url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-bottom.png") bottom no-repeat,
			#0F0F0F;

			.sheet-name {
				color: $rt-red
			}
		}
	}

	.sheet-vs {
		margin: 0 10px
	}

	.sheet-rollname {
		margin-right: auto
	}
}