apps/docs/app/globals.css - main - githubmirror/tldraw

apps/docs/app/globals.css
143 строки3 KB
Lu Wilson
Fix overscroll on docs (#6171)
04 июн 2025, 20:23
04 июн 2025, 20:2349bb54b
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('./demo.css');

@layer base {
	.prose h2,
	.prose h3,
	.prose h4,
	.prose h5,
	.prose h6 {
		scroll-margin-top: 90px;
	}

	@media (max-width: 768px) {
		.prose h2,
		.prose h3,
		.prose h4,
		.prose h5,
		.prose h6 {
			scroll-margin-top: 130px;
		}
	}

	.prose h2 a,
	.prose h3 a,
	.prose h4 a {
		@apply font-bold;
	}
	.prose blockquote p {
		margin: 0;
	}
	.prose blockquote p:before,
	.prose blockquote p:after {
		content: none;
	}
	.prose details.article__table-of-contents {
		display: none !important;
	}
	.prose .hljs,
	.not-prose .hljs {
		background: transparent !important;
	}
	input[type='search']::-webkit-search-decoration,
	input[type='search']::-webkit-search-cancel-button,
	input[type='search']::-webkit-search-results-button,
	input[type='search']::-webkit-search-results-decoration {
		-webkit-appearance: none;
	}

	@media (max-width: 768px) {
		.prose table {
			table-layout: fixed;
		}

		.prose td {
			word-break: break-word;
		}
	}
}

.hs-form-field.hs-fieldtype-text label,
.hs-form-field.hs-fieldtype-select label,
.hs-form-field.hs-fieldtype-textarea label {
	display: none;
}

/* We don't show any descriptions or lables */
.hs-field-desc {
	display: block !important;
}

/* Make text areas span both columns */
div.hs-fieldtype-textarea {
	@apply sm:col-span-2;
}

[data-hs-forms-root] form {
	@apply flex flex-col sm:grid-cols-2 sm:grid gap-4;
}

[data-hs-forms-root] select {
	@apply w-full h-9 px-4 appearance-none rounded-lg text-white bg-zinc-700/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-zinc-900;
}
[data-hs-forms-root] select.is-placeholder {
	@apply text-white/50;
}

[data-hs-forms-root] input {
	@apply w-full h-9 px-4 rounded-lg text-white bg-zinc-700/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-zinc-900;
}

[data-hs-forms-root] textarea {
	@apply -mb-1.5 w-full px-4 py-2 rounded-lg resize-none text-white bg-zinc-700/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-zinc-900;
	height: 112px;
}

.hs-submit {
	@apply overflow-hidden items-center col-start-1 col-span-2 p-2;
}

.hs-submit input {
	@apply overflow-hidden items-center h-9 rounded-lg text-base !bg-blue-500 !text-white hover:!bg-blue-600 dark:hover:!bg-blue-400;
}

.hs_error_rollup {
	@apply flex items-center;
}

.masked-logo {
	position: relative;
	background-color: currentColor;
	z-index: 1;
	color: inherit;
}

mark {
	margin: -1px -1px;
	padding: 1px 1px;
	border-radius: 3px;
	background-color: #ffc80046;
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.special {
	--r: 18px;
	--rl: -1;
	--b: 4px;
	background: none;
	text-shadow:
		calc(var(--r) * 1) 0px var(--b) rgba(255, 208, 0, 0.03),
		calc(var(--r) * 0.75) 0px var(--b) rgba(255, 140, 0, 0.04),
		calc(var(--r) * 0.5) 0px var(--b) rgba(255, 187, 0, 0.09),
		calc(var(--r) * 0.25) 0px var(--b) rgba(255, 187, 0, 0.12),
		calc(var(--r) * 0.12) 0px var(--b) rgba(255, 217, 0, 0.32),
		calc(var(--r) * 1 * var(--rl)) 0px rgba(255, 140, 0, 0.02),
		calc(var(--r) * 0.75 * var(--rl)) 0px var(--b) rgba(255, 208, 0, 0.04),
		calc(var(--r) * 0.5 * var(--rl)) 0px var(--b) rgba(255, 187, 0, 0.08),
		calc(var(--r) * 0.25 * var(--rl)) 0px var(--b) rgba(255, 187, 0, 0.12),
		calc(var(--r) * 0.12 * var(--rl)) 0px var(--b) rgba(255, 217, 0, 0.32);
}