roll20-character-sheets/ButterflyAspect/ButterflyAspect.less

input {
	background   : transparent;
	width        : 100%;
	border       : 1px solid #ddd;
	border-radius: 3px;
}

input[type=number] {
	text-align        : center;
	-moz-appearance   : textfield;
	-webkit-appearance: textfield;
}

textarea {
	margin       : 0;
	width        : 100%;
	height       : 65px;
	resize       : vertical;
	box-sizing   : border-box;
	border       : 1px solid #ddd;
	border-radius: 3px;
}

label {
	width: auto;
}

.sheet-container {
	width: 850px;

	button[type="roll"] {
		width                     : 100%;
		height                    : 24px;
		padding                   : 0;
		margin                    : 0;
		border-top-left-radius    : 10px;
		border-bottom-right-radius: 10px;
		border-radius             : unset;
		background-image          : none;
		background-color          : transparent;
		box-sizing                : border-box;
		-moz-box-sizing           : border-box;
		-webkit-box-sizing        : border-box;

		&:hover {
			background: black;
			color     : white;
		}

		label {
			line-height: 24px;
			font-size  : 13px;
			text-align : center;
			font-weight: 700;
		}

		input {
			line-height: 24px;
			font-size  : 13px;
			text-align : center;
			font-weight: 700;
		}
	}

	.sheet-options-flag,
	.sheet-options-flag+span {
		position: absolute;
		top     : -10px;
		left    : -10px;
	}

	.sheet-options-flag {
		opacity   : 0;
		width     : 16px;
		min-height: 16px;
		z-index   : 2;

		&+span {
			white-space: nowrap;
			width      : 16px;
			height     : 16px;
			font-size  : 16px;
			font-family: pictos;
			color      : #bbb;
			cursor     : pointer;
			margin-top : 0;
			display    : none;
		}

		~textarea {
			display: none;
		}

		&:checked~textarea {
			display: inherit;
		}
	}

	.sheet-skills {
		display: inherit;

		input {
			border: none;
		}

		select {
			border: none;
		}

		button[type="roll"] {
			border: none;
		}

		.sheet-grid {
			display              : grid;
			grid-template-columns: 405px 155px 75px 75px 55px 55px;
			grid-gap             : 5px;
			height               : 40px;
			height               : inherit;

			>div {
				background-color: #EEE;
				font-weight     : bold;
				text-align      : center;
			}
		}

		.sheet-gridplace {

			.repcontainer {

				.repitem {
					display              : grid;
					grid-template-columns: 405px 155px 75px 75px 55px 55px;
					grid-gap             : 5px;
					height               : 40px;

					input {
						width: -webkit-fill-available;
						width: -moz-available;
					}

					select {
						width: -webkit-fill-available;
						width: -moz-available;
					}

					button {
						width: -webkit-fill-available;
						width: -moz-available;
					}

					button.repcontrol_del {
						width: auto;
					}

					div {
						margin    : auto 0;
						text-align: center;
					}
				}
			}

			.sheet-repcontainer {

				.sheet-repitem {
					display              : grid;
					grid-template-columns: 405px 155px 75px 75px 55px 55px;
					grid-gap             : 5px;
					height               : 40px;

					input {
						width: -webkit-fill-available;
						width: -moz-available;
					}

					select {
						width: -webkit-fill-available;
						width: -moz-available;
					}

					button {
						width: -webkit-fill-available;
						width: -moz-available;
					}

					div {
						margin    : auto 0;
						text-align: center;
					}
				}
			}
		}
	}

	.sheet-number-20 {
		font-size: 20px;
	}

	.sheet-float {
		float        : left;
		box-sizing   : border-box;
		width        : 100%;
		margin       : 4px 0;
		padding-right: 5px;
	}

	.sheet-full {
		min-width: 100%;
	}

	.sheet-threequarters {
		max-width: 75%;
	}

	.sheet-half {
		max-width: 50%;
	}

	.sheet-quarter {
		max-width: 25%;
	}

	.sheet-textcenter {
		text-align: center;
	}

	.sheet-bottomspace {
		margin-bottom: 5px;
	}

	.sheet-formular {
		padding      : 9px;
		margin-top   : 15px;
		border       : 1px solid #ddd;
		border-radius: 3px;

		label {
			display      : block;
			float        : left;
			height       : 20px;
			margin-top   : -19px;
			margin-bottom: 0px;
			background   : #fff;
			padding      : 2px 5px 2px 5px;
			color        : #b9b9b9;
			font-weight  : normal;
		}

		input {
			box-sizing: border-box;
			border    : 0;
		}
	}

	.sheet-header {
		margin-bottom             : 4px;
		padding                   : 2px 8px;
		background                : black;
		color                     : white;
		font-weight               : bold;
		border-top-left-radius    : 10px;
		border-bottom-right-radius: 10px;

		span {
			text-transform: uppercase;
		}
	}

	.sheet-head-logo {
		width         : 200px;
		vertical-align: middle;
	}

	.sheet-logo {
		height: 200px;
	}

	.sheet-gmroll {
		text-align: center;

		select {
			width: -webkit-fill-available;
			width: -moz-available;
		}
	}

	.sheet-schicksal {
		text-align: center;

		.sheet-bspace {
			padding-bottom: 2px;
		}

		.sheet-input {
			height            : 100%;
			margin            : 0;
			padding           : 0;
			-webkit-appearance: none;
			-moz-appearance   : none;
			appearance        : none;
			border            : none;
			margin            : 0;
			height            : 100%;

			&::after {
				display    : block;
				width      : 100%;
				height     : 100%;
				text-align : center;
				font-size  : 16px;
				line-height: normal;
			}
		}

		.sheet-button {
			height: 25px;
			width : 25px;

			&::before {
				display: none;
			}
		}

		input {

			&:checked {
				background-color: black;
				color           : white;
			}
		}
	}

	.sheet-head-info {
		width: calc(100% - 200px);
	}

	.sheet-head-info-boxes {
		width    : 100%;
		max-width: calc(100% - 100px);

		>div {

			&:first-child {
				height: 36px;
			}
		}

		input {
			width     : 100%;
			box-sizing: border-box;
		}

		textarea {
			height: 64px;
			border: none;
		}
	}

	.sheet-head-info-sideboxes {
		width: 100px;
		float: right;

		>div {
			height: 36px;
		}

		button {
			display   : block;
			float     : left;
			margin-top: -21px;
			background: #fff;
			padding   : 2px 5px 2px 5px;
			color     : #b9b9b9;
			border    : none;
		}

		input {
			width     : -webkit-fill-available;
			width     : -moz-available;
			text-align: center;
		}

		button[type="roll"] {

			&:before {
				content: "";
				display: none;
			}
		}
	}

	.sheet-attribut-stats {
		display        : flex;
		width          : 100%;
		justify-content: space-evenly;
		flex-flow      : row wrap;

		.sheet-formular {
			width : 26%;
			height: 56px;
		}

		input {
			width     : -webkit-fill-available;
			width     : -moz-available;
			text-align: center;
		}

		button {
			display   : block;
			float     : left;
			margin-top: -21px;
			background: #fff;
			padding   : 2px 5px 2px 5px;
			color     : #b9b9b9;
			border    : none;
		}

		button[type="roll"] {

			&:before {
				content: "";
				display: none;
			}
		}
	}

	.sheet-head-stats {
		display        : flex;
		width          : 100%;
		justify-content: space-between;

		>div {
			width : min-content;
			height: 36px;
		}

		input {
			max-width : 100px;
			float     : right;
			text-align: center;
		}

		.sheet-formular {

			>input {
				width: -webkit-fill-available;
				width: -moz-available;
			}
		}
	}

	.sheet-head-stats-health,
	.sheet-head-stats-mana {
		display: flex;
		width  : max-content;

		input {
			max-width: 80px;
		}
	}

	.sheet-head-stats-bewegung {
		display: flex;
		width  : max-content;
	}

	.sheet-attribut {
		display: inherit;
	}

	.sheet-aspects {
		display: inherit;
	}

	.sheet-stunts {
		display: inherit;

		.sheet-repeat-stunt:hover .sheet-options-flag+span {
			display: block;
		}
	}

	.sheet-inventar {
		display: inherit;

		.sheet-rustung {
			padding-bottom: 4px;
		}

		input[type=text],
		input[type=number] {
			width: 81px;
		}

		input[name=attr_name],
		input[name=attr_ruestungName] {
			width: 250px;
		}

		.sheet-repeat-inv:hover .sheet-options-flag+span {
			display: block;
		}
	}

	.sheet-xp {
		display: inherit;

		.sheet-totalxp {
			display       : grid;
			grid-auto-flow: column;
			grid-gap      : 50px;

			input {
				width     : 100%;
				text-align: end;
			}
		}

		.repcontainer {
			padding-top: 15px;

			.repitem {
				display              : grid;
				grid-template-columns: 210px 50px 10px 210px 50px 10px 210px 50px;
				grid-gap             : 5px;
				height               : 40px;

				div {
					margin: auto 0;
				}
			}
		}

		.sheet-brackets {
			border-left  : 1px solid #aaa;
			border-right : 1px solid #aaa;
			border-radius: 12px;

			input {
				border    : none;
				text-align: center;
			}
		}
	}
}