@schukai/monster/source/components/style/skeleton.css

Monster is a simple library for creating fast, robust and lightweight websites.

/** generated from skeleton.pcss **/
.monster-skeleton-col-10 {
	--monster-skeleton-color: var(--monster-color-pink-2);
	--monster-skeleton-color-50: rgba(
		from var(--monster-color-pink-2) 255 255 255 / 0.5
	);
	--monster-skeleton-height: 100%;
	--monster-skeleton-width: 10%;
	--monster-skeleton: linear-gradient(
		99deg,
		var(--monster-skeleton-color) 0%,
		var(--monster-skeleton-color-50) 40%,
		transparent 70%
	);
}
.monster-skeleton-col-10,
.monster-skeleton-col-20 {
	background-image: var(--monster-skeleton);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
	color: var(--monster-skeleton-color);
	min-height: 1px;
}
.monster-skeleton-col-20 {
	--monster-skeleton-color: var(--monster-color-pink-2);
	--monster-skeleton-color-50: rgba(
		from var(--monster-color-pink-2) 255 255 255 / 0.5
	);
	--monster-skeleton-height: 100%;
	--monster-skeleton-width: 20%;
	--monster-skeleton: linear-gradient(
		99deg,
		var(--monster-skeleton-color) 0%,
		var(--monster-skeleton-color-50) 40%,
		transparent 70%
	);
}
.monster-skeleton-col-30 {
	--monster-skeleton-color: var(--monster-color-pink-2);
	--monster-skeleton-color-50: rgba(
		from var(--monster-color-pink-2) 255 255 255 / 0.5
	);
	--monster-skeleton-height: 100%;
	--monster-skeleton-width: 30%;
	--monster-skeleton: linear-gradient(
		99deg,
		var(--monster-skeleton-color) 0%,
		var(--monster-skeleton-color-50) 40%,
		transparent 70%
	);
}
.monster-skeleton-col-30,
.monster-skeleton-col-40 {
	background-image: var(--monster-skeleton);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
	color: var(--monster-skeleton-color);
	min-height: 1px;
}
.monster-skeleton-col-40 {
	--monster-skeleton-color: var(--monster-color-pink-2);
	--monster-skeleton-color-50: rgba(
		from var(--monster-color-pink-2) 255 255 255 / 0.5
	);
	--monster-skeleton-height: 100%;
	--monster-skeleton-width: 40%;
	--monster-skeleton: linear-gradient(
		99deg,
		var(--monster-skeleton-color) 0%,
		var(--monster-skeleton-color-50) 40%,
		transparent 70%
	);
}
.monster-skeleton-col-50 {
	--monster-skeleton-color: var(--monster-color-pink-2);
	--monster-skeleton-color-50: rgba(
		from var(--monster-color-pink-2) 255 255 255 / 0.5
	);
	--monster-skeleton-height: 100%;
	--monster-skeleton-width: 50%;
	--monster-skeleton: linear-gradient(
		99deg,
		var(--monster-skeleton-color) 0%,
		var(--monster-skeleton-color-50) 40%,
		transparent 70%
	);
}
.monster-skeleton-col-50,
.monster-skeleton-col-60 {
	background-image: var(--monster-skeleton);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
	color: var(--monster-skeleton-color);
	min-height: 1px;
}
.monster-skeleton-col-60 {
	--monster-skeleton-color: var(--monster-color-pink-2);
	--monster-skeleton-color-50: rgba(
		from var(--monster-color-pink-2) 255 255 255 / 0.5
	);
	--monster-skeleton-height: 100%;
	--monster-skeleton-width: 60%;
	--monster-skeleton: linear-gradient(
		99deg,
		var(--monster-skeleton-color) 0%,
		var(--monster-skeleton-color-50) 40%,
		transparent 70%
	);
}
.monster-skeleton-col-70 {
	--monster-skeleton-color: var(--monster-color-pink-2);
	--monster-skeleton-color-50: rgba(
		from var(--monster-color-pink-2) 255 255 255 / 0.5
	);
	--monster-skeleton-height: 100%;
	--monster-skeleton-width: 70%;
	--monster-skeleton: linear-gradient(
		99deg,
		var(--monster-skeleton-color) 0%,
		var(--monster-skeleton-color-50) 40%,
		transparent 70%
	);
}
.monster-skeleton-col-70,
.monster-skeleton-col-80 {
	background-image: var(--monster-skeleton);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
	color: var(--monster-skeleton-color);
	min-height: 1px;
}
.monster-skeleton-col-80 {
	--monster-skeleton-color: var(--monster-color-pink-2);
	--monster-skeleton-color-50: rgba(
		from var(--monster-color-pink-2) 255 255 255 / 0.5
	);
	--monster-skeleton-height: 100%;
	--monster-skeleton-width: 80%;
	--monster-skeleton: linear-gradient(
		99deg,
		var(--monster-skeleton-color) 0%,
		var(--monster-skeleton-color-50) 40%,
		transparent 70%
	);
}
.monster-skeleton-col-90 {
	--monster-skeleton-color: var(--monster-color-pink-2);
	--monster-skeleton-color-50: rgba(
		from var(--monster-color-pink-2) 255 255 255 / 0.5
	);
	--monster-skeleton-height: 100%;
	--monster-skeleton-width: 90%;
	--monster-skeleton: linear-gradient(
		99deg,
		var(--monster-skeleton-color) 0%,
		var(--monster-skeleton-color-50) 40%,
		transparent 70%
	);
}
.monster-skeleton-col-100,
.monster-skeleton-col-90 {
	background-image: var(--monster-skeleton);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
	color: var(--monster-skeleton-color);
	min-height: 1px;
}
.monster-skeleton-col-100 {
	--monster-skeleton-color: var(--monster-color-pink-2);
	--monster-skeleton-color-50: rgba(
		from var(--monster-color-pink-2) 255 255 255 / 0.5
	);
	--monster-skeleton-height: 100%;
	--monster-skeleton-width: 100%;
	--monster-skeleton: linear-gradient(
		99deg,
		var(--monster-skeleton-color) 0%,
		var(--monster-skeleton-color-50) 40%,
		transparent 70%
	);
}
.monster-skeleton-animated {
	animation: shimmer 4.25s linear infinite forwards;
	border-radius: 4px;
}
@keyframes shimmer {
	0%,
	to {
		filter: brightness(0.81);
	}
	50% {
		filter: brightness(0.45);
	}
}