sendou.ink/app/styles/common.css

/** biome-ignore-all lint/style/noDescendingSpecificity: Biome v2 migration */
@layer base {
	* {
		margin: 0;
		overflow-wrap: break-word;
	}

	html {
		color-scheme: light dark;
		accent-color: var(--color-text-accent);
		scroll-padding-top: var(--layout-sticky-top);
	}

	body {
		width: 100%;
		min-height: 100vh;
		display: flex;
		line-height: var(--line-height);
		overflow-x: hidden;
		color: var(--color-text);
		background-color: var(--color-bg);
		font-family: lexend, sans-serif;

		-moz-osx-font-smoothing: antialiased;
		-webkit-font-smoothing: antialiased;
		-webkit-tab-highlight-color: transparent;
		-webkit-text-size-adjust: 100%;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p {
		overflow-wrap: anywhere;
	}

	h1,
	h2,
	h3 {
		text-wrap: balance;
	}
	p {
		text-wrap: pretty;
	}

	img,
	svg,
	canvas,
	video,
	audio,
	iframe,
	embed,
	object {
		display: block;
		max-width: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	details summary {
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
	}

	a {
		color: var(--color-text-accent);
		text-decoration: none;
		border-radius: var(--radius-field);

		&:focus-visible {
			outline: var(--focus-ring);
			outline-offset: 1px;
		}
	}

	/* :not([name="text"]) workaround not to select textarea on map planner  */
	textarea:not([name="text"]) {
		width: 100%;
		min-height: 8rem;
		padding: var(--field-padding);
		border: var(--border-style);
		border-radius: var(--radius-field);
		background-color: var(--color-bg);
		font-size: var(--font-sm);
		outline: none;
		resize: both;

		&:focus-within {
			outline: var(--focus-ring);
			outline-offset: 1px;
		}
	}

	.input-container {
		display: flex;
		border: var(--border-style);
		border-radius: var(--radius-field);
		background-color: var(--color-bg);
		height: var(--field-size);
		font-size: var(--font-sm);
		outline: none;
	}

	.input-container:focus-within {
		outline: var(--focus-ring);
		outline-offset: 1px;
	}

	.in-container {
		width: 100%;
		padding: 0 var(--field-padding);
		border: none;
		background: transparent;
		margin: auto 0;
		outline: none;

		&:-webkit-autofill,
		&:-webkit-autofill:hover,
		&:-webkit-autofill:focus {
			-webkit-text-fill-color: var(--color-text);
			-webkit-background-clip: text;
			caret-color: var(--color-text);
		}
	}

	.input-addon {
		--addon-radius: calc(var(--radius-field) - 2px);
		display: grid;
		border-radius: var(--addon-radius) 0 0 var(--addon-radius);
		background-color: var(--color-bg-high);
		color: var(--color-text-high);
		font-size: var(--font-sm);
		padding-inline: var(--field-padding);
		place-items: center;
		white-space: nowrap;
	}

	input:not(.in-container) {
		width: 100%;
		box-sizing: border-box;
		border: var(--border-style);
		border-radius: var(--radius-field);
		background: var(--color-bg);
		padding: 0 var(--field-padding);
		height: var(--field-size);
		font-size: var(--font-sm);
		outline: none;

		&:-webkit-autofill,
		&:-webkit-autofill:hover,
		&:-webkit-autofill:focus {
			-webkit-text-fill-color: var(--color-text);
			-webkit-background-clip: text;
			caret-color: var(--color-text);
		}

		&::placeholder {
			color: var(--color-text-high);
		}

		&:disabled {
			pointer-events: none;
			cursor: not-allowed;
			opacity: 0.5;
			outline: none;
		}

		&:focus-within:not(:read-only) {
			outline: var(--focus-ring);
			outline-offset: 1px;
		}
	}

	input[type="checkbox"] {
		appearance: none;
		cursor: pointer;
		padding: 0;
		width: var(--selector-size-sm);
		height: var(--selector-size-sm);
		border-radius: calc(var(--radius-selector) / 2);
		background-color: var(--color-bg);
		border: var(--border-style);

		&:focus-within {
			outline: none;
		}

		&:focus-visible {
			outline: var(--focus-ring);
			outline-offset: 1px;
		}

		&:checked,
		&:indeterminate {
			border-color: var(--color-text-accent);
			background-color: var(--color-text-accent);
			background-repeat: no-repeat;
			background-position: center;
			background-size: var(--field-size-icon) auto;
		}

		&:checked {
			background-image: var(--field-icon-checkbox);
		}

		&:indeterminate {
			background-image: var(--field-icon-minus);
		}

		/* Hacky selector to remove the margin bottom from the container from Label.tsx */
		&:has(+ div > label) + div {
			margin-bottom: 0;
		}
	}

	input[type="radio"] {
		appearance: none;
		cursor: pointer;
		vertical-align: middle;
		width: var(--selector-size-sm);
		height: var(--selector-size-sm);
		background-color: var(--color-bg);
		border: var(--border-style);
		border-radius: var(--radius-full);
		padding: 0;

		&:focus-within {
			outline: none;
		}

		&:focus-visible {
			outline: var(--focus-ring);
			outline-offset: 1px;
		}

		&::after {
			content: "";
			display: block;
			width: 50%;
			height: 50%;
			border-radius: var(--radius-full);
			background-color: var(--color-bg);
			margin: auto;
			margin-top: 25%;
		}

		&:checked {
			border-color: var(--color-text-accent);

			&::after {
				background-color: var(--color-text-accent);
			}
		}

		/* Hacky selector to remove the margin bottom from the container from Label.tsx */
		&:has(+ div > label) + div {
			margin-bottom: 0;
		}
	}

	label {
		display: block;
		font-size: var(--font-xs);
		font-weight: var(--weight-bold);
		margin-block-end: var(--label-margin);
	}

	fieldset {
		border: none;
		border-radius: var(--radius-box);
		background-color: var(--color-bg-high);
		font-size: var(--font-sm);
		padding-block-end: var(--s-3);
		padding-inline: var(--s-3);
	}

	legend {
		border-radius: var(--radius-field);
		background-color: transparent;
		font-size: var(--font-xs);
		font-weight: var(--weight-bold);
	}

	article {
		white-space: pre-wrap;
	}

	select {
		all: unset;
		width: 100%;
		box-sizing: border-box;
		border: var(--border-style);
		border-radius: var(--radius-field);
		background-color: var(--color-bg);
		cursor: pointer;
		padding: 0 var(--field-padding);
		padding-right: calc(
			var(--field-size-icon) +
			var(--field-padding) +
			var(--s-2)
		);
		height: var(--field-size);
		font-size: var(--font-sm);
		display: inline-flex;
		align-items: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		appearance: none;
		overflow: hidden;

		@supports (appearance: base-select) {
			appearance: base-select;
		}

		&:disabled {
			pointer-events: none;
			cursor: not-allowed;
			opacity: 0.5;
			outline: none;
		}

		&:focus-within {
			outline: var(--focus-ring);
			outline-offset: 1px;
		}

		/* biome-ignore lint: experimental CSS feature */
		&::picker(select) {
			@supports (appearance: base-select) {
				appearance: base-select;
			}

			background-color: var(--color-bg);
			border: var(--border-style);
			border-radius: var(--radius-field);
			padding: var(--s-1);
			margin: 0.5rem;
			translate: -0.5rem;
			max-height: 50dvh;
			scrollbar-width: thin;
			scrollbar-color: var(--color-bg-higher) transparent;
		}

		/* biome-ignore lint: experimental CSS feature */
		&::picker-icon {
			display: none;
		}

		optgroup {
			color: var(--color-text);
		}

		option {
			background-color: var(--color-bg);
			color: var(--color-text);
			border-radius: var(--radius-field);
			font-size: var(--font-sm);
			font-weight: var(--weight-semi);
			padding: var(--s-1-5);
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			&[disabled] {
				color: var(--color-text-high);
			}

			&:hover:not([disabled]) {
				background-color: var(--color-bg-high);
			}
		}
	}

	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	select {
		background-position: center right var(--field-padding);
		background-size: var(--field-size-icon) auto;
		background-repeat: no-repeat;
	}

	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="week"] {
		background-image: var(--field-icon-date);
	}

	input[type="time"] {
		background-image: var(--field-icon-time);
	}

	select {
		background-image: var(--field-icon-chevron);
	}

	[type="date"]::-webkit-calendar-picker-indicator,
	[type="datetime-local"]::-webkit-calendar-picker-indicator,
	[type="month"]::-webkit-calendar-picker-indicator,
	[type="time"]::-webkit-calendar-picker-indicator,
	[type="week"]::-webkit-calendar-picker-indicator {
		width: var(--field-size-icon);
		opacity: 0;
	}

	@-moz-document url-prefix() {
		[type="date"],
		[type="datetime-local"],
		[type="month"],
		[type="time"],
		[type="week"] {
			background-image: none !important;
		}
	}

	@-moz-document url-prefix() {
		input[type="date"],
		input[type="datetime-local"],
		input[type="month"],
		input[type="time"],
		input[type="week"] {
			background-image: none;
		}
	}

	input[type="color"] {
		padding: calc(var(--field-size) / 8) var(--field-padding);
	}

	input[type="color"]::-webkit-color-swatch {
		border: 0;
		border-radius: var(--radius-field);
	}

	input[type="color"]::-moz-color-swatch {
		border: 0;
		border-radius: var(--radius-field);
	}

	input[type="file"] {
		padding: 0;
		cursor: pointer;
		font-size: var(--font-sm);
		color: var(--color-text-high);
		overflow: hidden;
	}

	input[type="file"]::file-selector-button {
		height: 100%;
		border: none;
		background-color: var(--color-bg-higher);
		white-space: nowrap;
		margin-right: var(--s-2);
	}

	input[type="range"] {
		--track-color: var(--color-bg-higher);
		--thumb-color: var(--color-text-high);
		border: none;
		padding: 0;
		appearance: none;
		background: 0 0;
		width: 100%;
		height: var(--selector-size);

		&:focus {
			outline: none;
		}

		&:focus-within {
			--track-color: var(--color-bg-higher);
			--thumb-color: var(--color-text-accent);
		}
	}

	input[type="range"]::-webkit-slider-runnable-track {
		width: 100%;
		height: calc(var(--selector-size) / 4);
		background-color: var(--track-color);
		border-radius: var(--radius-full);
		transition: 100ms background-color;
	}

	input[type="range"]::-moz-range-track {
		width: 100%;
		height: calc(var(--selector-size) / 4);
		background-color: var(--track-color);
		border-radius: var(--radius-full);
		transition: 100ms background-color;
	}

	input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: var(--selector-size);
		height: var(--selector-size);
		margin-top: calc(
			(calc(var(--selector-size) / 4) - var(--selector-size)) /
			2
		);
		background-color: var(--thumb-color);
		border: 2px solid var(--color-bg);
		border-radius: var(--radius-full);
		cursor: pointer;
		transition: 100ms background-color;
	}

	input[type="range"]::-moz-range-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: var(--selector-size);
		height: var(--selector-size);
		margin-top: calc(
			(calc(var(--selector-size) / 4) - var(--selector-size)) /
			2
		);
		background-color: var(--thumb-color);
		border: 2px solid var(--color-bg);
		border-radius: var(--radius-full);
		cursor: pointer;
		transition: 100ms background-color;
	}

	progress {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: inline-block;
		width: 100%;
		height: var(--selector-size);
		overflow: hidden;
		border: none;
		border-radius: var(--radius-full);
		background-color: var(--color-bg-high);
		color: var(--color-text-accent);
		vertical-align: baseline;
	}

	progress::-webkit-progress-bar {
		border-radius: var(--radius-full);
		background: 0 0;
	}

	progress::-moz-progress-bar {
		background-color: var(--color-text-accent);
	}

	progress[value]::-webkit-progress-value {
		background-color: var(--color-text-accent);
		transition: inline-size 0.2s ease;
	}

	td > input[type="checkbox"] {
		vertical-align: middle;
	}

	hr {
		border: 1px solid var(--color-bg-high);
	}

	abbr:not([title]) {
		text-decoration: none;
	}

	abbr[title] {
		cursor: help;
	}

	.article > p {
		padding-block: var(--s-3);
	}

	.article img {
		height: auto;
	}

	/* Hack to deal with Safari bug when the image is loading. See: https://stackoverflow.com/a/73466877 */
	@media not all and (min-resolution: 0.001dpcm) {
		img[loading="lazy"] {
			clip-path: inset(0.5px);
		}
	}
}

#nprogress .bar {
	background: var(--color-text-accent) !important;
}

#nprogress .spinner {
	display: none !important;
}

#nprogress .peg {
	display: none !important;
}

.top-leaderboard {
	min-height: 100px;
	margin-top: 10px;
	display: grid;
	place-items: center;
}

@media screen and (max-width: 599px) {
	body:not(:has(.planner)) .publift-widget-sticky_footer-container {
		bottom: calc(
			var(--layout-nav-height) +
			env(safe-area-inset-bottom)
		) !important;
	}
}