mirror of
https://github.com/filamentphp/filament.git
synced 2026-10-16 07:17:49 +08:00
761 lines
17 KiB
CSS
761 lines
17 KiB
CSS
.fi-color-danger {
|
|
--color-50: var(--danger-50);
|
|
--color-100: var(--danger-100);
|
|
--color-200: var(--danger-200);
|
|
--color-300: var(--danger-300);
|
|
--color-400: var(--danger-400);
|
|
--color-500: var(--danger-500);
|
|
--color-600: var(--danger-600);
|
|
--color-700: var(--danger-700);
|
|
--color-800: var(--danger-800);
|
|
--color-900: var(--danger-900);
|
|
--color-950: var(--danger-950);
|
|
}
|
|
|
|
.fi-color-gray {
|
|
--color-50: var(--gray-50);
|
|
--color-100: var(--gray-100);
|
|
--color-200: var(--gray-200);
|
|
--color-300: var(--gray-300);
|
|
--color-400: var(--gray-400);
|
|
--color-500: var(--gray-500);
|
|
--color-600: var(--gray-600);
|
|
--color-700: var(--gray-700);
|
|
--color-800: var(--gray-800);
|
|
--color-900: var(--gray-900);
|
|
--color-950: var(--gray-950);
|
|
}
|
|
|
|
.fi-color-info {
|
|
--color-50: var(--info-50);
|
|
--color-100: var(--info-100);
|
|
--color-200: var(--info-200);
|
|
--color-300: var(--info-300);
|
|
--color-400: var(--info-400);
|
|
--color-500: var(--info-500);
|
|
--color-600: var(--info-600);
|
|
--color-700: var(--info-700);
|
|
--color-800: var(--info-800);
|
|
--color-900: var(--info-900);
|
|
--color-950: var(--info-950);
|
|
}
|
|
|
|
.fi-color-primary {
|
|
--color-50: var(--primary-50);
|
|
--color-100: var(--primary-100);
|
|
--color-200: var(--primary-200);
|
|
--color-300: var(--primary-300);
|
|
--color-400: var(--primary-400);
|
|
--color-500: var(--primary-500);
|
|
--color-600: var(--primary-600);
|
|
--color-700: var(--primary-700);
|
|
--color-800: var(--primary-800);
|
|
--color-900: var(--primary-900);
|
|
--color-950: var(--primary-950);
|
|
}
|
|
|
|
.fi-color-success {
|
|
--color-50: var(--success-50);
|
|
--color-100: var(--success-100);
|
|
--color-200: var(--success-200);
|
|
--color-300: var(--success-300);
|
|
--color-400: var(--success-400);
|
|
--color-500: var(--success-500);
|
|
--color-600: var(--success-600);
|
|
--color-700: var(--success-700);
|
|
--color-800: var(--success-800);
|
|
--color-900: var(--success-900);
|
|
--color-950: var(--success-950);
|
|
}
|
|
|
|
.fi-color-warning {
|
|
--color-50: var(--warning-50);
|
|
--color-100: var(--warning-100);
|
|
--color-200: var(--warning-200);
|
|
--color-300: var(--warning-300);
|
|
--color-400: var(--warning-400);
|
|
--color-500: var(--warning-500);
|
|
--color-600: var(--warning-600);
|
|
--color-700: var(--warning-700);
|
|
--color-800: var(--warning-800);
|
|
--color-900: var(--warning-900);
|
|
--color-950: var(--warning-950);
|
|
}
|
|
|
|
.fi-bg-color-50 {
|
|
--bg: var(--color-50);
|
|
}
|
|
|
|
.fi-bg-color-100 {
|
|
--bg: var(--color-100);
|
|
}
|
|
|
|
.fi-bg-color-200 {
|
|
--bg: var(--color-200);
|
|
}
|
|
|
|
.fi-bg-color-300 {
|
|
--bg: var(--color-300);
|
|
}
|
|
|
|
.fi-bg-color-400 {
|
|
--bg: var(--color-400);
|
|
}
|
|
|
|
.fi-bg-color-500 {
|
|
--bg: var(--color-500);
|
|
}
|
|
|
|
.fi-bg-color-600 {
|
|
--bg: var(--color-600);
|
|
}
|
|
|
|
.fi-bg-color-700 {
|
|
--bg: var(--color-700);
|
|
}
|
|
|
|
.fi-bg-color-800 {
|
|
--bg: var(--color-800);
|
|
}
|
|
|
|
.fi-bg-color-900 {
|
|
--bg: var(--color-900);
|
|
}
|
|
|
|
.fi-bg-color-950 {
|
|
--bg: var(--color-950);
|
|
}
|
|
|
|
.hover\:fi-bg-color-50 {
|
|
--hover-bg: var(--color-50);
|
|
}
|
|
|
|
.hover\:fi-bg-color-100 {
|
|
--hover-bg: var(--color-100);
|
|
}
|
|
|
|
.hover\:fi-bg-color-200 {
|
|
--hover-bg: var(--color-200);
|
|
}
|
|
|
|
.hover\:fi-bg-color-300 {
|
|
--hover-bg: var(--color-300);
|
|
}
|
|
|
|
.hover\:fi-bg-color-400 {
|
|
--hover-bg: var(--color-400);
|
|
}
|
|
|
|
.hover\:fi-bg-color-500 {
|
|
--hover-bg: var(--color-500);
|
|
}
|
|
|
|
.hover\:fi-bg-color-600 {
|
|
--hover-bg: var(--color-600);
|
|
}
|
|
|
|
.hover\:fi-bg-color-700 {
|
|
--hover-bg: var(--color-700);
|
|
}
|
|
|
|
.hover\:fi-bg-color-800 {
|
|
--hover-bg: var(--color-800);
|
|
}
|
|
|
|
.hover\:fi-bg-color-900 {
|
|
--hover-bg: var(--color-900);
|
|
}
|
|
|
|
.hover\:fi-bg-color-950 {
|
|
--hover-bg: var(--color-950);
|
|
}
|
|
|
|
.dark\:fi-bg-color-50 {
|
|
--dark-bg: var(--color-50);
|
|
}
|
|
|
|
.dark\:fi-bg-color-100 {
|
|
--dark-bg: var(--color-100);
|
|
}
|
|
|
|
.dark\:fi-bg-color-200 {
|
|
--dark-bg: var(--color-200);
|
|
}
|
|
|
|
.dark\:fi-bg-color-300 {
|
|
--dark-bg: var(--color-300);
|
|
}
|
|
|
|
.dark\:fi-bg-color-400 {
|
|
--dark-bg: var(--color-400);
|
|
}
|
|
|
|
.dark\:fi-bg-color-500 {
|
|
--dark-bg: var(--color-500);
|
|
}
|
|
|
|
.dark\:fi-bg-color-600 {
|
|
--dark-bg: var(--color-600);
|
|
}
|
|
|
|
.dark\:fi-bg-color-700 {
|
|
--dark-bg: var(--color-700);
|
|
}
|
|
|
|
.dark\:fi-bg-color-800 {
|
|
--dark-bg: var(--color-800);
|
|
}
|
|
|
|
.dark\:fi-bg-color-900 {
|
|
--dark-bg: var(--color-900);
|
|
}
|
|
|
|
.dark\:fi-bg-color-950 {
|
|
--dark-bg: var(--color-950);
|
|
}
|
|
|
|
.dark\:hover\:fi-bg-color-50 {
|
|
--dark-hover-bg: var(--color-50);
|
|
}
|
|
|
|
.dark\:hover\:fi-bg-color-100 {
|
|
--dark-hover-bg: var(--color-100);
|
|
}
|
|
|
|
.dark\:hover\:fi-bg-color-200 {
|
|
--dark-hover-bg: var(--color-200);
|
|
}
|
|
|
|
.dark\:hover\:fi-bg-color-300 {
|
|
--dark-hover-bg: var(--color-300);
|
|
}
|
|
|
|
.dark\:hover\:fi-bg-color-400 {
|
|
--dark-hover-bg: var(--color-400);
|
|
}
|
|
|
|
.dark\:hover\:fi-bg-color-500 {
|
|
--dark-hover-bg: var(--color-500);
|
|
}
|
|
|
|
.dark\:hover\:fi-bg-color-600 {
|
|
--dark-hover-bg: var(--color-600);
|
|
}
|
|
|
|
.dark\:hover\:fi-bg-color-700 {
|
|
--dark-hover-bg: var(--color-700);
|
|
}
|
|
|
|
.dark\:hover\:fi-bg-color-800 {
|
|
--dark-hover-bg: var(--color-800);
|
|
}
|
|
|
|
.dark\:hover\:fi-bg-color-900 {
|
|
--dark-hover-bg: var(--color-900);
|
|
}
|
|
|
|
.dark\:hover\:fi-bg-color-950 {
|
|
--dark-hover-bg: var(--color-950);
|
|
}
|
|
|
|
.fi-text-color-0 {
|
|
--text: oklch(1 0 0);
|
|
}
|
|
|
|
.fi-text-color-50 {
|
|
--text: var(--color-50);
|
|
}
|
|
|
|
.fi-text-color-100 {
|
|
--text: var(--color-100);
|
|
}
|
|
|
|
.fi-text-color-200 {
|
|
--text: var(--color-200);
|
|
}
|
|
|
|
.fi-text-color-300 {
|
|
--text: var(--color-300);
|
|
}
|
|
|
|
.fi-text-color-400 {
|
|
--text: var(--color-400);
|
|
}
|
|
|
|
.fi-text-color-500 {
|
|
--text: var(--color-500);
|
|
}
|
|
|
|
.fi-text-color-600 {
|
|
--text: var(--color-600);
|
|
}
|
|
|
|
.fi-text-color-700 {
|
|
--text: var(--color-700);
|
|
}
|
|
|
|
.fi-text-color-800 {
|
|
--text: var(--color-800);
|
|
}
|
|
|
|
.fi-text-color-900 {
|
|
--text: var(--color-900);
|
|
}
|
|
|
|
.fi-text-color-950 {
|
|
--text: var(--color-950);
|
|
}
|
|
|
|
.hover\:fi-text-color-0 {
|
|
--hover-text: oklch(1 0 0);
|
|
}
|
|
|
|
.hover\:fi-text-color-50 {
|
|
--hover-text: var(--color-50);
|
|
}
|
|
|
|
.hover\:fi-text-color-100 {
|
|
--hover-text: var(--color-100);
|
|
}
|
|
|
|
.hover\:fi-text-color-200 {
|
|
--hover-text: var(--color-200);
|
|
}
|
|
|
|
.hover\:fi-text-color-300 {
|
|
--hover-text: var(--color-300);
|
|
}
|
|
|
|
.hover\:fi-text-color-400 {
|
|
--hover-text: var(--color-400);
|
|
}
|
|
|
|
.hover\:fi-text-color-500 {
|
|
--hover-text: var(--color-500);
|
|
}
|
|
|
|
.hover\:fi-text-color-600 {
|
|
--hover-text: var(--color-600);
|
|
}
|
|
|
|
.hover\:fi-text-color-700 {
|
|
--hover-text: var(--color-700);
|
|
}
|
|
|
|
.hover\:fi-text-color-800 {
|
|
--hover-text: var(--color-800);
|
|
}
|
|
|
|
.hover\:fi-text-color-900 {
|
|
--hover-text: var(--color-900);
|
|
}
|
|
|
|
.hover\:fi-text-color-950 {
|
|
--hover-text: var(--color-950);
|
|
}
|
|
|
|
.dark\:fi-text-color-0 {
|
|
--dark-text: oklch(1 0 0);
|
|
}
|
|
|
|
.dark\:fi-text-color-50 {
|
|
--dark-text: var(--color-50);
|
|
}
|
|
|
|
.dark\:fi-text-color-100 {
|
|
--dark-text: var(--color-100);
|
|
}
|
|
|
|
.dark\:fi-text-color-200 {
|
|
--dark-text: var(--color-200);
|
|
}
|
|
|
|
.dark\:fi-text-color-300 {
|
|
--dark-text: var(--color-300);
|
|
}
|
|
|
|
.dark\:fi-text-color-400 {
|
|
--dark-text: var(--color-400);
|
|
}
|
|
|
|
.dark\:fi-text-color-500 {
|
|
--dark-text: var(--color-500);
|
|
}
|
|
|
|
.dark\:fi-text-color-600 {
|
|
--dark-text: var(--color-600);
|
|
}
|
|
|
|
.dark\:fi-text-color-700 {
|
|
--dark-text: var(--color-700);
|
|
}
|
|
|
|
.dark\:fi-text-color-800 {
|
|
--dark-text: var(--color-800);
|
|
}
|
|
|
|
.dark\:fi-text-color-900 {
|
|
--dark-text: var(--color-900);
|
|
}
|
|
|
|
.dark\:fi-text-color-950 {
|
|
--dark-text: var(--color-950);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-0 {
|
|
--dark-hover-text: oklch(1 0 0);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-50 {
|
|
--dark-hover-text: var(--color-50);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-100 {
|
|
--dark-hover-text: var(--color-100);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-200 {
|
|
--dark-hover-text: var(--color-200);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-300 {
|
|
--dark-hover-text: var(--color-300);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-400 {
|
|
--dark-hover-text: var(--color-400);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-500 {
|
|
--dark-hover-text: var(--color-500);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-600 {
|
|
--dark-hover-text: var(--color-600);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-700 {
|
|
--dark-hover-text: var(--color-700);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-800 {
|
|
--dark-hover-text: var(--color-800);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-900 {
|
|
--dark-hover-text: var(--color-900);
|
|
}
|
|
|
|
.dark\:hover\:fi-text-color-950 {
|
|
--dark-hover-text: var(--color-950);
|
|
}
|
|
|
|
.fi-sr-only {
|
|
@apply sr-only;
|
|
}
|
|
|
|
.fi-prose {
|
|
--prose-color: var(--color-gray-700);
|
|
--prose-heading-color: var(--color-gray-950);
|
|
--prose-strong-color: var(--color-gray-950);
|
|
--prose-link-color: var(--color-gray-950);
|
|
--prose-code-color: var(--color-gray-950);
|
|
--prose-marker-color: color-mix(
|
|
in oklab,
|
|
var(--color-gray-700) 25%,
|
|
transparent
|
|
);
|
|
--prose-link-underline-color: var(--color-primary-400);
|
|
--prose-th-borders: var(--color-gray-300);
|
|
--prose-td-borders: var(--color-gray-200);
|
|
--prose-hr-color: color-mix(
|
|
in oklab,
|
|
var(--color-gray-950) 5%,
|
|
transparent
|
|
);
|
|
--prose-blockquote-border-color: var(--color-gray-300);
|
|
|
|
@variant dark {
|
|
--prose-color: var(--color-gray-300);
|
|
--prose-heading-color: var(--color-white);
|
|
--prose-strong-color: var(--color-white);
|
|
--prose-link-color: var(--color-white);
|
|
--prose-code-color: var(--color-white);
|
|
--prose-marker-color: color-mix(
|
|
in oklab,
|
|
var(--color-gray-300) 35%,
|
|
transparent
|
|
);
|
|
--prose-link-underline-color: var(--color-sky-400);
|
|
--prose-th-borders: var(--color-gray-600);
|
|
--prose-td-borders: var(--color-gray-700);
|
|
--prose-hr-color: color-mix(
|
|
in oklab,
|
|
var(--color-white) 10%,
|
|
transparent
|
|
);
|
|
--prose-blockquote-border-color: var(--color-gray-600);
|
|
}
|
|
|
|
color: var(--prose-color);
|
|
font-size: var(--text-sm);
|
|
line-height: 1.5;
|
|
|
|
*:where(:not(.fi-not-prose, .fi-not-prose *))
|
|
+ *:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
margin-top: calc(var(--spacing) * 4);
|
|
}
|
|
|
|
h1:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
font-size: var(--text-xl);
|
|
line-height: calc(28 / 18);
|
|
letter-spacing: -0.025em;
|
|
color: var(--prose-code-color);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
h2:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
font-size: var(--text-lg);
|
|
line-height: calc(28 / 18);
|
|
letter-spacing: -0.025em;
|
|
color: var(--prose-code-color);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
h3:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
font-size: var(--text-base);
|
|
line-height: calc(28 / 18);
|
|
color: var(--prose-heading-color);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
h4:where(:not(.fi-not-prose, .fi-not-prose *)),
|
|
h5:where(:not(.fi-not-prose, .fi-not-prose *)),
|
|
h6:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
font-size: var(--text-sm);
|
|
line-height: calc(28 / 14);
|
|
color: var(--prose-heading-color);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
:is(h2, h3, h4, h5, h6):where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
scroll-margin-top: calc(var(--spacing) * 32);
|
|
@variant lg {
|
|
scroll-margin-top: calc(var(--spacing) * 18);
|
|
}
|
|
}
|
|
|
|
ol:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
padding-left: calc(var(--spacing) * 6);
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
ul:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
padding-left: calc(var(--spacing) * 6);
|
|
list-style-type: disc;
|
|
}
|
|
|
|
ol li:where(:not(.fi-not-prose, .fi-not-prose *)),
|
|
ul li:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
padding-left: calc(var(--spacing) * 3);
|
|
}
|
|
|
|
ol li + li:where(:not(.fi-not-prose, .fi-not-prose *)),
|
|
ul li + li:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
margin-top: calc(var(--spacing) * 4);
|
|
}
|
|
|
|
ol li:where(:not(.fi-not-prose, .fi-not-prose *))::marker,
|
|
ul li:where(:not(.fi-not-prose, .fi-not-prose *))::marker {
|
|
color: var(--prose-marker-color);
|
|
}
|
|
|
|
a:not(:where(:is(h2, h3, h4, h5, h6) *)):where(
|
|
:not(.fi-not-prose, .fi-not-prose *)
|
|
) {
|
|
color: var(--prose-link-color);
|
|
font-weight: var(--font-weight-semibold);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
text-decoration-color: var(--prose-link-underline-color);
|
|
text-decoration-thickness: 1px;
|
|
& code {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
}
|
|
|
|
a:hover:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
strong:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
color: var(--prose-strong-color);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
code:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
font-variant-ligatures: none;
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--prose-code-color);
|
|
}
|
|
|
|
:where(h2, h3, h4, h5, h6)
|
|
code:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
code:where(:not(.fi-not-prose, .fi-not-prose *))::before,
|
|
code:where(:not(.fi-not-prose, .fi-not-prose *))::after {
|
|
display: inline;
|
|
content: '`';
|
|
}
|
|
|
|
pre:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
margin-top: calc(var(--spacing) * 4);
|
|
margin-bottom: calc(var(--spacing) * 10);
|
|
}
|
|
|
|
pre code * + *:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
pre code:where(:not(.fi-not-prose, .fi-not-prose *))::before,
|
|
pre code:where(:not(.fi-not-prose, .fi-not-prose *))::after {
|
|
content: none;
|
|
}
|
|
|
|
pre code:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
font-variant-ligatures: none;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
line-height: 2;
|
|
}
|
|
|
|
table:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
width: 100%;
|
|
table-layout: auto;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
font-size: var(--text-sm);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
thead:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: var(--prose-th-borders);
|
|
}
|
|
|
|
thead th:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
color: var(--prose-heading-color);
|
|
font-weight: 600;
|
|
vertical-align: bottom;
|
|
padding-inline-end: 0.6em;
|
|
padding-bottom: 0.8em;
|
|
padding-inline-start: 0.6em;
|
|
}
|
|
|
|
thead th:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
padding-inline-start: 0;
|
|
}
|
|
|
|
thead th:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
padding-inline-end: 0;
|
|
}
|
|
|
|
tbody tr:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: var(--prose-td-borders);
|
|
}
|
|
|
|
tbody tr:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
tbody td:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
tfoot:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
border-top-width: 1px;
|
|
border-top-color: var(--prose-th-borders);
|
|
}
|
|
|
|
tfoot td:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
vertical-align: top;
|
|
}
|
|
|
|
tbody td:where(:not(.fi-not-prose, .fi-not-prose *)),
|
|
tfoot td:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
padding-top: 0.8em;
|
|
padding-inline-end: 0.6em;
|
|
padding-bottom: 0.8em;
|
|
padding-inline-start: 0.6em;
|
|
}
|
|
|
|
tbody td:first-child:where(:not(.fi-not-prose, .fi-not-prose *)),
|
|
tfoot td:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
padding-inline-start: 0;
|
|
}
|
|
|
|
tbody td:last-child:where(:not(.fi-not-prose, .fi-not-prose *)),
|
|
tfoot td:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
padding-inline-end: 0;
|
|
}
|
|
|
|
th:where(:not(.fi-not-prose, .fi-not-prose *)),
|
|
td:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
text-align: start;
|
|
}
|
|
|
|
td code:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
hr:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
border-color: var(--prose-hr-color);
|
|
margin-block: --spacing(8);
|
|
& + h2 {
|
|
margin-top: --spacing(8);
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
font-style: italic;
|
|
border-inline-start-width: 0.25rem;
|
|
border-inline-start-color: var(--prose-blockquote-border-color);
|
|
padding-inline-start: calc(var(--spacing) * 4);
|
|
}
|
|
|
|
blockquote p:first-of-type::before {
|
|
content: open-quote;
|
|
}
|
|
|
|
blockquote p:last-of-type::after {
|
|
content: close-quote;
|
|
}
|
|
|
|
figure:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
figcaption:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
margin-top: calc(var(--spacing) * 3);
|
|
text-align: center;
|
|
font-size: var(--text-sm);
|
|
line-height: var(--text-sm--line-height);
|
|
font-style: italic;
|
|
color: color-mix(in oklab, var(--prose-color) 75%, transparent);
|
|
}
|
|
}
|
|
|
|
:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& .lead:where(:not(.fi-not-prose, .fi-not-prose *)) {
|
|
font-size: var(--text-base);
|
|
}
|
|
}
|