[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / bbcode / media.scss

.mediaBBCode {
	display: inline-table;
	max-width: 100%;

	.mediaBBCodeCaption {
		color: var(--wcfContentDimmedText);
		// https://stackoverflow.com/a/11652170/782822
		display: table-caption;
		caption-side: bottom;
		margin-top: 5px;
		text-align: center;

		@include wcfFontSmall;

		.mediaBBCodeCaptionAlignment {
			// https://stackoverflow.com/a/43627669/782822
			display: inline-block;
			text-align: justify;
		}
	}

	video {
		max-width: 100%;
		max-height: 72vh;
	}
}

iframe.instagram-media {
	/* workaround for broken iframes without height on mobile */
	min-height: 530px;

	/* Prevent the <iframe> from overlapping adjacent elements. */
	position: relative !important;
}

.twitter-tweet > iframe {
	/* Workaround for ugly border in embedded tweets. */
	border-radius: 13px;
}

.mediaBBCodeContainerLeft {
	display: flex;
	justify-content: start;
}

.mediaBBCodeContainerRight {
	display: flex;
	justify-content: end;
}

.mediaBBCodeContainerCenter {
	display: flex;
	justify-content: center;
}
Commit	Line	Data
	1	.mediaBBCode {
	2	display: inline-table;
	3	max-width: 100%;
	4
	5	.mediaBBCodeCaption {
	6	color: var(--wcfContentDimmedText);
	7	// https://stackoverflow.com/a/11652170/782822
	8	display: table-caption;
	9	caption-side: bottom;
	10	margin-top: 5px;
	11	text-align: center;
	12
	13	@include wcfFontSmall;
	14
	15	.mediaBBCodeCaptionAlignment {
	16	// https://stackoverflow.com/a/43627669/782822
	17	display: inline-block;
	18	text-align: justify;
	19	}
	20	}
	21
	22	video {
	23	max-width: 100%;
	24	max-height: 72vh;
	25	}
	26	}
	27
	28	iframe.instagram-media {
	29	/* workaround for broken iframes without height on mobile */
	30	min-height: 530px;
	31
	32	/* Prevent the <iframe> from overlapping adjacent elements. */
	33	position: relative !important;
	34	}
	35
	36	.twitter-tweet > iframe {
	37	/* Workaround for ugly border in embedded tweets. */
	38	border-radius: 13px;
	39	}
	40
	41	.mediaBBCodeContainerLeft {
	42	display: flex;
	43	justify-content: start;
	44	}
	45
	46	.mediaBBCodeContainerRight {
	47	display: flex;
	48	justify-content: end;
	49	}
	50
	51	.mediaBBCodeContainerCenter {
	52	display: flex;
	53	justify-content: center;
	54	}