init

themes/duckquill/sass/_media.scss

@@ -0,0 +1,164 @@
+img,
+video {
+	display: block;
+	margin: 1rem auto;
+	box-shadow: var(--edge-highlight), var(--shadow);
+	border-radius: var(--rounded-corner);
+	background-color: var(--fg-muted-1);
+	max-width: 100%;
+
+	&.full,
+	&[src*="#full"] {
+		width: 100%;
+	}
+
+	&.full-bleed,
+	&[src*="#full-bleed"] {
+		margin-inline-start: calc((-100vw + 100%) / 2);
+		margin-inline-end: calc((-100vw + 100%) / 2);
+		width: 100vw;
+		max-width: 100vw;
+	}
+
+	&.start,
+	&.end,
+	&[src*="#start"],
+	&[src*="#end"] {
+		margin: 0;
+		width: 30%;
+
+		@media only screen and (max-width: 720px) {
+			float: none;
+			margin-inline-start: 0;
+			margin-inline-end: 0;
+			margin-block-start: 1rem;
+			margin-block-end: 1rem;
+			width: 100%;
+		}
+	}
+
+	&.start,
+	&[src*="#start"] {
+		float: inline-start;
+		transform-origin: left;
+		margin-inline-end: 1rem;
+
+		:root[dir*="rtl"] & {
+			transform-origin: right;
+		}
+	}
+
+	&.end,
+	&[src*="#end"] {
+		float: inline-end;
+		transform-origin: right;
+		margin-inline-start: 1rem;
+
+		:root[dir*="rtl"] & {
+			transform-origin: left;
+		}
+	}
+
+	&.pixels,
+	&[src*="#pixels"] {
+		image-rendering: pixelated;
+	}
+
+	&.transparent,
+	&.full-bleed,
+	&[src*="#transparent"],
+	&[src*="#full-bleed"] {
+		box-shadow: none;
+		border-radius: 0;
+		background-color: transparent;
+	}
+
+	&.spoiler,
+	&[src*="#spoiler"] {
+		opacity: var(--dim-opacity);
+		clip-path: inset(0 0 0 0 round var(--rounded-corner));
+		filter: blur(1rem);
+
+		&:hover,
+		&:active {
+			opacity: 1;
+			clip-path: inset(
+				-0.75rem -0.75rem -0.75rem -0.75rem round
+					var(--rounded-corner-small)
+			);
+			filter: none;
+		}
+
+		&.solid,
+		&[src*="#solid"] {
+			clip-path: none;
+			filter: brightness(0) contrast(0.5);
+			box-shadow: none;
+
+			&:hover,
+			&:active {
+				filter: none;
+			}
+		}
+	}
+}
+
+img {
+	transition: var(--transition-longer);
+
+	&:not(
+			.no-hover,
+			.full-bleed,
+			[src*="#no-hover"],
+			[src*="#full-bleed"],
+			.emoji
+		) {
+		cursor: zoom-in;
+
+		&:hover {
+			position: relative;
+			transform: var(--hover);
+			z-index: 1;
+			box-shadow: var(--edge-highlight), var(--shadow-raised);
+			border-radius: var(--rounded-corner-small);
+		}
+
+		&.start,
+		&.end,
+		&[src*="#start"],
+		&[src*="#end"] {
+			&:hover {
+				transform: scale(2);
+			}
+
+			@media only screen and (max-width: 720px) {
+				transform-origin: center;
+
+				&:hover {
+					transform: var(--hover);
+				}
+			}
+		}
+
+		&.transparent,
+		&[src*="#transparent"] {
+			&:hover {
+				box-shadow: none;
+			}
+		}
+	}
+}
+
+a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) {
+	cursor: pointer;
+}
+
+video:fullscreen {
+	box-shadow: none;
+	border-radius: 0;
+}
+
+video:-webkit-full-screen {
+	box-shadow: none;
+	border-radius: 0;
+}