alpinesmuseum-public/assets/less/components/ContribView.less

.ContribView {
	background-color: @accent-color;
	width: 100%;

	h1 {
		margin: 0;
		margin-left: @modal-left-spacing;
		transform: translateY(4px);
	}
}

.ContribViewContent {
	padding: (2 * @spacing) @spacing;
	padding-right: @modal-left-spacing;
	max-width: 1200px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	@media @tablet {
		padding: 15px @spacing;
		padding-right: 2 * @spacing;
	}
	@media @phone {
		padding: 15px @spacing;
		padding-right: @spacing;
	}

	.spinner {
		margin: auto;
	}
}

.CVText {
	padding-left: @modal-left-spacing;
	@media @phone {
		padding-left: @spacing;
	}
}

@inputs-width: 100%;

.flex-break {
	flex-basis: 100%;
	height: 0;
}
.offset-label {
	flex-basis: 100px;
}

.CVForm {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: @spacing * 2;
}
.CVForm label.small-text {
	flex-basis: @modal-left-spacing;
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
	max-height: 32px;
}

.CVForm .errors {
	display: flex;
	.small-text {
		flex-shrink: 0;
		display: flex;
		align-items: flex-end;
		max-height: 32px;
		color: red;
	}
}
.CVForm input[type='radio'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	background: white;

	border-radius: 50%;
	width: 20px;
	height: 20px;

	border: 2px solid black;
	transition: 0.2s all linear;
	margin-right: 5px;

	position: relative;
	top: 4px;

	&:focus {
		outline: none;
	}

	&:checked {
		border: 7px solid black;
	}
}
.CVObjectTypeRadio {
	ul {
		padding: 0;
	}
	li {
		list-style: none;
	}
}

.CVForm input[type='checkbox'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	background: white;

	width: 20px;
	height: 20px;

	border: 2px solid black;
	border-radius: 0;
	transition: 0.2s all linear;
	margin: 3px 5px 3px 4px;

	position: relative;
	top: 4px;

	&:focus {
		outline: none;
	}

	&:checked {
		border: 8px solid black;
	}
}

.CVDescInput .textarea {
	flex-grow: 1;
	resize: none;
	padding: 0px;
	border: none;
	background: none;
	background-image: repeating-linear-gradient(
		transparent,
		transparent 30px,
		black -1px,
		black 31px
	);
	@media @phone {
		background-image: repeating-linear-gradient(
			transparent,
			transparent 24px,
			black -1px,
			black 25px
		);
	}
}
.CVDescInput .textarea:focus {
	outline: none;
}

.CVUploadInput {
	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
		display: none;
	}

	padding-top: @spacing * 2;
	#wt_embed {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		@media @phone {
			width: 100%;
		}

		.wt_embed_wrapper {
			border: 1px solid black;
			background: none;
			border-radius: 15px;
			padding-left: 2 * @spacing;
			padding-right: 2 * @spacing;
			&:hover {
				background: none;
				opacity: 0.6;
			}
		}

		.wt_embed__message {
			max-width: 100%;
			.main {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-family: 'MonumentGrotesk-Medium', system-ui, -apple-system, BlinkMacSystemFont,
					'Segoe UI', Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
				font-size: 26px;
				color: #000;
				letter-spacing: 0.008em;
				line-height: 1.25;
				font-weight: 400;
			}
			.sub {
				font-family: 'MonumentGrotesk-Regular', system-ui, -apple-system, BlinkMacSystemFont,
					'Segoe UI', Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
				font-size: 13px;
				color: #000;
				letter-spacing: 0.01em;
				line-height: 1.3;
				font-weight: 400;
			}
		}
		.wt_embed__icon {
			display: none;
		}
	}
}

.CVUploaded {
	button {
		cursor: pointer;
		background: none;
		border: none;
	}
}

.CVForm h3 {
	margin: 0px;
}

.CVPersonalInfosInputs input {
	flex-grow: 1;
	resize: none;
	padding: 0px;
	border: none;
	background: none;
	border-radius: 0;
	border-bottom: black solid 1px;
	padding-bottom: 0.7px;

	&:focus {
		outline: none;
		padding-bottom: 0;
		border-bottom: black solid 1.7px;
	}
}

.CVPersonalInfosInputs .CVForm {
	margin: 0;
	padding-bottom: 0;
}
.CVPersonalInfosInputs {
	padding-bottom: 0;
}
.CVKeepInput {
	padding-top: @spacing * 2;
	padding-left: @modal-left-spacing;
	@media @phone {
		padding-left: @spacing;
	}
	ul {
		padding: 0;
	}
	li {
		list-style: none !important;
	}
}
.CVAGBInput {
	padding-top: @spacing * 2;
	padding-left: @modal-left-spacing;
	@media @phone {
		padding-left: @spacing;
	}

	a {
		text-decoration: underline;
		cursor: pointer;
	}
	ul {
		padding: 0;
	}
	li {
		list-style: none;
	}
}
.CVSubmit {
	padding-top: @spacing * 2;
	padding-left: @modal-left-spacing;
	@media @phone {
		padding-left: @spacing;
	}

	.submitbtn {
		background: none;
		border: none;
		cursor: pointer;
		margin: 0;
		line-height: 1;
		transform: translateY(4px);
		padding: 0;

		&:focus {
			outline: none;
		}

		&:hover {
			opacity: 0.6;
		}
	}
}

.CVBody.participated {
	height: 1px;
	flex-grow: 1;
	margin-bottom: 30%;
}
.participated .CVBody {
	display: none;
}
.CVParticipatedMessage {
	min-height: 60%;
	padding: 0 @modal-left-spacing;
	@media @phone {
		padding: @spacing;
	}
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

div.full-screen-overlay {
	width: 100vw;
	height: 100vh;
	align-items: stretch;
}
div.modal-box {
	background: none;
	margin: auto;
}
.Modal--container {
	max-width: 990px;
	padding: @spacing;
	@media @phone {
		padding: 0;
	}
}
.Modal--body {
	text-align: initial;
	background: white;
	padding: @spacing;
	padding-left: @modal-left-spacing;
	padding-right: @modal-left-spacing;
	padding-top: 2 * @spacing + @big-font-size;
	padding-bottom: 2 * @spacing + @big-font-size;
	@media @tablet {
		padding-top: 2 * @spacing + @big-font-size-tablet;
	}
	@media @phone {
		padding-right: @spacing;
		padding-left: @spacing;
		padding-top: 2 * @spacing + @big-font-size-phone;
	}

	button {
		background: none;
		border: none;
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 7px;
		padding-left: 9px;
		@media @tablet {
			padding-top: 19px;
			padding-left: 28px;
		}
		@media @phone {
			padding-top: 6px;
		}
		display: flex;
		justify-content: center;
		z-index: 1;
		img {
			height: 92px;
			width: 92px;
			@media @tablet {
				height: 75px;
				width: 75px;
			}
			@media @phone {
				height: 40px;
				width: 40px;
			}
		}
	}

	h1 {
		margin: 0;
	}

	h4 {
		margin-bottom: 0;
		padding-bottom: 0.5rem;
	}

	p {
		margin: 0;
	}

	.small-text {
		font-size: 120%;
	}
}