Foxnouns.NET/Foxnouns.Frontend/src/app.scss

@use "bootstrap/scss/bootstrap" with (
	$color-mode-type: media-query,
	$font-family-sans-serif: (
		"FiraGO",
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		"Noto Sans",
		"Liberation Sans",
		Arial,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol",
		"Noto Color Emoji",
	)
);

@import "bootstrap-icons/font/bootstrap-icons.css";
@import "@fontsource/firago/400.css";
@import "@fontsource/firago/400-italic.css";
@import "@fontsource/firago/700.css";
@import "@fontsource/firago/700-italic.css";

// This is necessary for line breaks in translation strings to show up. Don't ask me why
.text-has-newline {
	white-space: pre-line;
}

// Make tippy tooltips look like bootstrap's
.tippy-box {
	padding: bootstrap.$spacer * 0.25 bootstrap.$spacer * 0.5;
	opacity: 0.9;
	color: var(--bs-body-bg);
	background-color: var(--bs-emphasis-color);
	border-radius: var(--bs-border-radius);
}

// Add breakpoint-dependent w-{size} utilities
// Source: https://stackoverflow.com/questions/47760132/any-way-to-get-breakpoint-specific-width-classes
@each $breakpoint in map-keys(bootstrap.$grid-breakpoints) {
	@each $size, $length in (25: 25%, 50: 50%, 75: 75%, 100: 100%) {
		@include bootstrap.media-breakpoint-up($breakpoint) {
			.w-#{$breakpoint}-#{$size} {
				width: $length !important;
			}
		}
	}
}

// Give identicons a background distinguishable from the page
.identicon {
	@media (prefers-color-scheme: dark) {
		background-color: var(--bs-secondary-border-subtle);
	}

	background-color: var(--bs-light-border-subtle);
}

.profile-flag {
	height: 1.5rem;
	max-width: 200px;
	border-radius: 3px;
}