roll20-character-sheets-tester/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;
}

span {
	text-transform: uppercase;
}

label {
	width: min-content;
}

.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-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;
    }
    
	.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 {
		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-inventar {
        display: inherit;
        
		.sheet-rustung {
			padding-bottom: 4px;
        }
        
		input {
			width: 81px;

			&:first-child {
				width: 250px;
			}
		}
	}
}