5etools-mirror-2.github.io/scss/decks.scss

@use "sass:color";

@use "includes/vars";

:root {
	--rgb-card-glint--edge: #d5592e;
}

:root.night-mode {
	--rgb-card-glint--edge: #ffd21f;
}

// region Roller
.rollbox-min {
	right: unset;
	left: 7px;
}

.rollbox {
	right: unset;
	left: 1em;
}

#listcontainer {
	padding-bottom: 24px;
}
// endregion

.decks {
	&__ {
		&h-cards {
			font-size: 20px;
		}

		&wrp-btn-show-card {
			z-index: 1;
			top: 0;
			right: 0;
			opacity: 0;
			pointer-events: none;
			transition: opacity vars.$time-3-frames;
		}

		&wrp-card-face {
			&:hover {
				.decks__wrp-btn-show-card {
					opacity: 1;
					pointer-events: initial;
					transition: opacity vars.$time-3-frames;
				}
			}

			.rd__image {
				transition: filter 0.15s;
			}

			&--drawn {
				.rd__image {
					filter: grayscale(100%) brightness(25%);
					transition: filter 0.15s;
				}
			}

			.rd__wrp-image {
				margin: 0;
			}
		}

		&wrp-card-rows {
			display: flex;

			.rd__image-title {
				display: none;
			}

			&--list {
				flex-direction: column;

				.decks__wrp-row {
					padding-top: vars.$spacer;
					padding-bottom: vars.$spacer;
					border-bottom: 1px solid vars.$rgb-border-grey;
				}

				.decks__wrp-card-face {
					width: 100px;
				}

				.decks__wrp-card-text {
					display: block;
				}
			}

			&--grid {
				flex-wrap: wrap;
				padding-top: vars.$spacer;

				.decks__wrp-row {
					width: 33%;
					padding-bottom: vars.$spacer;
				}

				.decks__wrp-card-face {
					width: 100%;
				}

				.decks__wrp-card-text {
					display: none;
				}
			}
		}
	}

	&-draw__ {
		$time-intro: 500ms;
		$time-flip: 750ms;
		$time-sway: 7s;

		@keyframes anim-sway {
			0% {
				transform: translateX(0) translateY(0);
			}

			25% {
				transform: translateX(1rem) translateY(1rem);
			}

			37.5% {
				transform: translateX(1.15rem) translateY(0.5rem);
			}

			50% {
				transform: translateX(1rem) translateY(0);
			}

			75% {
				transform: translateX(0) translateY(1rem);
			}

			87.5% {
				transform: translateX(-0.15rem) translateY(0.5rem);
			}

			100% {
				transform: translateX(0) translateY(0);
			}
		}

		&stg {
			position: fixed;
			z-index: vars.$z-hwin;
			inset: 0;
			width: 100vw;
			height: 100vh;

			&--visible {
				box-shadow: inset 0 0 100vh 100vh #0008;
				transition: box-shadow $time-intro;
			}
		}

		&wrp-sparkle-sway {
			animation-name: anim-sway;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}

		&img-sparkle {
			@keyframes anim-sparkle-twinkle {
				0% {
					filter: initial;
				}

				25% {
					filter: blur(1px) brightness(90%) contrast(150%) drop-shadow(0 0 17px #f6f6f6) hue-rotate(5deg) opacity(75%) saturate(80%);
				}

				50% {
					filter: blur(1px) brightness(110%) contrast(75%) drop-shadow(0 0 5px #fff) hue-rotate(-5deg) opacity(75%) saturate(110%);
				}

				100% {
					filter: initial;
				}
			}

			@keyframes anim-sparkle-warp {
				0% {
					transform: rotateX(0) rotateY(0) rotateZ(0);
				}

				25% {
					transform: rotateX(20deg) rotateY(0) rotateZ(90deg);
				}

				50% {
					transform: rotateX(0) rotateY(20deg) rotateZ(180deg);
				}

				75% {
					transform: rotateX(10deg) rotateY(0) rotateZ(270deg);
				}

				100% {
					transform: rotateX(0) rotateY(0) rotateZ(360deg);
				}
			}

			max-width: 67%;
			max-height: 67%;
			top: -25%;
			left: -25%;

			opacity: 0;

			animation-name: anim-sparkle-twinkle, anim-sparkle-warp;
			animation-timing-function: linear, linear;
			animation-iteration-count: infinite, infinite;

			&--visible {
				opacity: 1;
				transition: opacity calc($time-intro / 2);
			}
		}

		&wrp-card {
			@keyframes anim-card-pop-in {
				0% {
					scale: 0;
				}

				65% {
					scale: 1.2;
				}

				100% {
					scale: 1;
				}
			}

			padding: vars.$spacer;
			background: vars.$rgb-name-red;
			border-radius: vars.$spacer;
			box-shadow: 0 0 30px 10px color.adjust(vars.$rgb-name-red, $alpha: - 0.7);

			scale: 0;

			&:hover {
				cursor: none;
			}

			&--visible {
				animation-name: anim-card-pop-in;
				animation-duration: calc($time-intro * 0.67);
				animation-timing-function: ease-in-out;
				animation-iteration-count: 1;
				scale: 1;
			}
		}

		&img-card {
			z-index: 0;
			max-height: 50vh;
			max-width: 60vw;
		}

		&img-card-back {
			z-index: -1;

			width: calc(100% - #{2 * vars.$spacer});
			height: calc(100% - #{2 * vars.$spacer});

			transform: rotateY(180deg);

			transition: z-index $time-flip;
		}

		&wrp-card-sway {
			animation-name: anim-sway;
			animation-duration: $time-sway;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}

		&wrp-card-flip {
			transition: transform $time-flip;

			&--flipped {
				transform: rotateY(180deg);

				transition: transform $time-flip;

				.decks-draw__img-card-back {
					z-index: 0;
				}
			}
		}

		&disp-glint {
			z-index: 2;

			inset: 0;

			border-radius: vars.$spacer;
		}

		&wrp-rhs {
			@keyframes anim-rhs-pop-in {
				0% {
					scale: 0;
				}

				60% {
					scale: 0;
				}

				100% {
					scale: 1;
				}
			}

			width: min(30vw, 360px);
			margin-left: 50px;
			scale: 0;

			&--visible {
				animation-name: anim-rhs-pop-in;
				animation-duration: calc($time-intro * 0.8);
				animation-timing-function: ease-in-out;
				scale: 1;
			}
		}

		&wrp-desc {
			border-top: 3px solid vars.$rgb-name-red;
			border-bottom: 3px solid vars.$rgb-name-red;
			background-color: #e5c4ba;
			font-size: 1em;
			padding-top: 35px;
			padding-bottom: 40px;
			box-shadow: 0 0 20px 1px #0008;

			.rd__h {
				justify-content: center;
			}
		}
	}
}

.night-mode .decks {
	&__ {
		&wrp-card-rows {
			&--list {
				.decks__wrp-row {
					border-color: vars.$rgb-border-grey--night;
				}
			}
		}
	}

	&-draw__ {
		&wrp-card {
			background-color: vars.$rgb-name-red--night;
			box-shadow: 0 0 30px 10px color.adjust(vars.$rgb-name-red--night, $alpha: - 0.7);
			color: rgb(255 255 255 / 53%);
		}

		&wrp-desc {
			border-color: vars.$rgb-name-red--night;
			background-color: #574930;
			box-shadow: 0 0 10px 0 #000;
		}
	}
}