passerelle/passerelle/apps/qrcode/static/qrcode/css/style.scss

$red: #C4381C;
$red-light: #FCECE8;
$green: #47752F;
$green-light: #F2F7EE;
$gray-light: #CECECE;

qrcode-reader {
	position: absolute;
	inset: 0;
	box-sizing: border-box;

	display: grid;
}

%button {
	margin: 5px 10px 10px 10px;
	padding: 5px;
	font-size: 1.2rem;
}

.qrcode-reader {

	&--video-wrapper {
		grid-area: 1 / 1 / 2 / 2;
		width: fit-content;
		height: fit-content;
		display: grid;
		justify-self: center;
		align-self: center;
	}

	&--video {
		grid-area: 1 / 1 / 2 / 2;
		justify-self: center;
		align-self: center;
		width: 100%;
		height: auto;
		max-height: 100%;

		.fullscreen & {
			height: 100vh;
		}
	}


	&--fullscreen-button {
		z-index: 1;
		grid-area: 1 / 1 / 2 / 2;
		width: 1.8rem;
		height: 1.8rem;
		align-self: end;
		justify-self: end;

		border: none;
		fill: white;
		margin: 5px;

	}

	.fullscreen &--enter-fullscreen-icon {
		display: none;
	}

	&--exit-fullscreen-icon {
		display: none;

		.fullscreen & {
			display: block;
		}
	}

	&--popup {
		grid-area: 1 / 1 / 2 / 2;
		align-self: center;
		justify-self: stretch;
		z-index: 1;
		overflow: hidden;

		--border-color: #{$green};

		border: 2px solid var(--border-color);
		border-radius: 5px;
		margin: 10px;
		box-shadow: 0 0 10px 3px #ffffff;
		background: white;

		display: flex;
		flex-direction: column;
		justify-items: center;

		&.error {
			--border-color: #{$red};
		}

		&.closed {
			display: none;
		}

		&.invalid-qrcode {
			qrcode-reader-validity,
			qrcode-reader-data,
			qrcode-reader-tally {
				display: none;
			}
		}
	}

	&--popup-errors {
		display: none;
		padding: 5px;

		background-color: $red-light;
		text-align: center;
		font-weight: 1.2rem;
		font-weight: bold;
		color: $red;

		.error &:not(:empty) {
			display: block;
		}
	}

	&--close-popup-button {
		@extend %button;
	}
}

@keyframes spinner-keyframes {
  100% { transform:rotate(360deg); }
}

.qrcode-reader-section {
	--color: #{$green};
	--background-color: #{$green-light};
	display: grid;
	gap: 3px;
	margin-bottom: 10px;

	&--header {
		padding: 0 5px;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;

		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 5px;

		background: var(--background-color);
		font-size: 1.1rem;
		color: var(--color);
		fill: var(--color);
	}

	&--spinner, &--ok-icon, &--error-icon {
		grid-area: 1 / 1 / 2 / 2;
	}

	&--spinner {
		display: none;
	}

	&--spinner-animation {
		transform-origin:center;
		animation:spinner-keyframes .75s infinite linear;
	}

	&--error-icon {
		display: none;
	}

	&--title {
		font-size: 1.2rem;
		grid-area: 1 / 2 / 2 / 3;
	}

	&--errors {
		display: none;
		color: $red;
		margin: 0 15px;
	}

	&--content {
		margin: 0 15px;
	}

	&.error {
		--color: #{$red};
		--background-color: #{$red-light};

		.qrcode-reader-section--errors {
			display: block;
		}

		.qrcode-reader-section--ok-icon {
			display: none;
		}

		.qrcode-reader-section--error-icon {
			display: block;
		}
	}

	&.loading {
		--color: black;
		--background-color: #{$gray-light};

		.qrcode-reader-section--ok-icon {
			display: none;
		}

		.qrcode-reader-section--error-icon {
			display: none;
		}

		.qrcode-reader-section--spinner {
			display: block;
		}
	}
}

qrcode-reader-validity {
	.qrcode-reader-section--content {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0 5px;
	}

	.qrcode-reader-validity--label {
		  align-self: end;
		  font-weight: bold;
	}
}

qrcode-reader-data {
	.qrcode-reader-section--content {
		display: grid;
	}

	.qrcode-reader-data {
		&--retry-button {
			@extend %button;
			font-size: 1rem;
			display: none;

		}

		&--items {
			display: grid;
			grid-template-columns: auto 1fr;
		}

		&--item-label {
			font-weight: bold;
			justify-self: end;
		}

		&--item-value {
			display: flex;
			flex-wrap: wrap;
		}
	}

	.qrcode-reader-section.error .qrcode-reader-data--retry-button {
		display: block;
	}
}