For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
预约演示登录免费开始
  • 入门
    • 概览
    • 工作原理
    • 快速开始
    • 项目结构
    • Customer showcase
    • 变更日志
  • 配置
    • 概览
    • 站点级设置
    • 页面级设置
  • 编写内容
    • Markdown 基础
    • Markdown 中的富媒体
    • Fern 编辑器
    • 可复用代码片段
  • AI 功能
    • 概览
    • Fern Writer
    • AI 生成的示例
    • Markdown 访问
      • 概览
      • Agent 指令
      • 智能体指令
      • 分析与集成
    • MCP 服务器
    • API 目录发现
      • 概览
      • 嵌入模式
      • Hiding content
      • Search
      • 收集用户反馈和建议
      • 完全自定义文档
      • CSS 选择器参考
      • 自定义 React 组件
      • 页眉和页脚
      • 全局主题
  • Public API
    • GETJWT from Fern API key
    • GETAlgolia search credentials
    • GETCurrent user information
  • Fern Writer API
    • GETGet Fern Writer Install Link
Checking status...
SOC2Soc 2 Type II
© 2026 Fern • Birch Solutions, Inc., a Postman company

Documentation

SDKsDocsAsk FernCLI Reference

API Definitions

OpenAPIAsyncAPIOpenRPCgRPC

Resources

BlogSupportPricing

Company

Brand KitPrivacy PolicyTerms of Service
LogoLogo
预约演示登录免费开始
在本页
  • 布局与结构
  • 头部组件
  • 侧边栏组件
  • 导航组件
  • 按钮组件
  • 卡片组件
  • 表单组件
  • 下拉菜单与选择器组件
  • 手风琴组件
  • 滚动区域组件
  • 徽章组件
  • MDX 内容组件
  • 变更日志筛选器组件
  • API Reference 组件
  • 工具组件
  • 变更日志组件
配置

CSS 选择器参考

||以 Markdown 格式查看|
此页面是否有帮助?
在仪表板中编辑
上一个

完全自定义你的文档

下一个

自定义 React 组件

Fern 选择器使用 Tailwind CSS 工具类和 CSS 自定义属性。本页面列出了用于自定义文档站点的所有 .fern-* 选择器。

布局与结构

用于页面布局、背景和标题的选择器。

.fern-background-image

固定背景图片。

Default CSS
1.fern-background-image {
2 background-attachment: fixed;
3 background-size: cover;
4 background-repeat: no-repeat;
5 background-position-x: center;
6 background-position-y: center;
7}
.fern-page-heading

主页面标题(h1)。

Default CSS
1.fern-page-heading {
2 margin-top: 0;
3 margin-bottom: 0;
4 display: inline-block;
5 leading-tight: 1.25;
6 text-wrap: balance;
7 word-wrap: break-word;
8}
.fern-layout-page

页面布局容器。

Default CSS
1.fern-layout-page {
2 max-width: var(--page-width-padded);
3 padding-left: var(--page-padding);
4 padding-right: var(--page-padding);
5 margin-left: auto;
6 margin-right: auto;
7 min-width: 0;
8 flex: 1 1 0%;
9 min-height: calc(100vh - var(--header-height));
10 display: flex;
11 flex-direction: column;
12}
.fern-layout-guide

指南页面布局。

Default CSS
1.fern-layout-guide {
2 padding-left: var(--page-padding);
3 padding-right: var(--page-padding);
4 margin-left: auto;
5 margin-right: auto;
6 margin-bottom: 3rem;
7 min-width: 0;
8 flex-shrink: 1;
9 min-height: calc(100vh - var(--header-height));
10 display: flex;
11 flex-direction: column;
12}
.fern-layout-reference

带两列网格的 API Reference 布局。

Default CSS
1.fern-layout-reference {
2 padding-left: var(--page-padding);
3 margin-left: auto;
4 margin-right: auto;
5 min-width: 0;
6 flex-shrink: 1;
7 padding-right: calc(var(--page-padding) + var(--aside-offset));
8 min-height: calc(100vh - var(--header-height));
9 display: flex;
10 flex-direction: column;
11}
12
13.fern-layout-reference-content {
14 margin-top: 1.5rem;
15 margin-bottom: 1.5rem;
16}
17
18@media (min-width: 768px) {
19 .fern-layout-reference-content {
20 display: grid;
21 grid-template-columns: repeat(2, 1fr);
22 gap: 2rem;
23 }
24}
25
26@media (min-width: 1024px) {
27 .fern-layout-reference-content {
28 gap: 3rem;
29 }
30}
.fern-layout-overview

概览页面布局。

Default CSS
1.fern-layout-overview {
2 padding-left: var(--page-padding);
3 padding-right: var(--page-padding);
4 margin-left: auto;
5 margin-right: auto;
6 margin-bottom: 3rem;
7 min-width: 0;
8 flex-shrink: 1;
9 min-height: calc(100vh - var(--header-height));
10 display: flex;
11 flex-direction: column;
12}
.fern-layout-changelog

变更日志页面布局。

Default CSS
1.fern-layout-changelog[data-aside-state="hidden"] {
2 max-width: var(--page-width-padded);
3 padding-left: var(--page-padding);
4 padding-right: var(--page-padding);
5 margin-left: auto;
6 margin-right: auto;
7 min-width: 0;
8}
9
10.fern-layout-changelog[data-aside-state="visible"] {
11 padding-left: var(--page-padding);
12 padding-right: var(--page-padding);
13 margin-left: auto;
14 margin-right: auto;
15 margin-bottom: 3rem;
16 min-width: 0;
17 flex-shrink: 1;
18}

头部组件

用于站点头部、标签页和移动端菜单的选择器。

.fern-header

站点头部容器。

Default CSS
1.fern-header {
2 backdrop-filter: blur(0.5rem);
3 background-color: transparent;
4}
.fern-header-tabs

头部导航标签(仅桌面端)。

Default CSS
1.fern-header-tabs {
2 backdrop-filter: blur(0.5rem);
3 background-color: transparent;
4 display: none;
5 max-width: 100%;
6 user-select: none;
7}
8
9@media (min-width: 1024px) {
10 .fern-header-tabs {
11 display: flex;
12 align-items: center;
13 justify-content: space-between;
14 }
15}
.fern-header-logo-container

头部 Logo 容器。

Default CSS
1.fern-header-logo-container {
2 position: relative;
3 display: flex;
4 height: 100%;
5 min-width: fit-content;
6 flex: 1 1 0%;
7 flex-shrink: 0;
8 gap: 0.5rem;
9 padding-top: 0.25rem;
10 padding-bottom: 0.25rem;
11}
.fern-header-search-bar

头部搜索输入框(仅桌面端)。

Default CSS
1.fern-header-search-bar {
2 display: none;
3 width: 100%;
4 min-width: 0;
5 flex-shrink: 1;
6}
7
8@media (min-width: 1024px) {
9 .fern-header-search-bar {
10 display: inline-flex;
11 }
12}
.fern-header-navbar-links

头部导航链接容器。

Default CSS
1.fern-header-navbar-links {
2 display: none;
3 flex: 1 1 0%;
4}
5
6@media (min-width: 1024px) {
7 .fern-header-navbar-links {
8 display: flex;
9 align-items: center;
10 justify-content: flex-end;
11 }
12}
.fern-header-mobile-menu-button

移动端菜单切换按钮。

Default CSS
1.fern-header-mobile-menu-button {
2 display: flex;
3 flex: 1 1 0%;
4 align-items: center;
5 justify-content: flex-end;
6}

侧边栏组件

用于侧边栏导航和标签页的选择器。

.fern-sidebar-header

侧边栏顶部。

Default CSS
1.fern-sidebar-header {
2 height: var(--header-height);
3 margin-left: 0.75rem;
4 margin-right: 0.75rem;
5 display: none;
6 border-bottom: 1px solid transparent;
7}
8
9@media (min-width: 1024px) {
10 .fern-sidebar-header {
11 display: flex;
12 align-items: center;
13 justify-content: space-between;
14 }
15}
.fern-sidebar-heading

侧边栏分组标题。

Default CSS
1.fern-sidebar-heading {
2 margin-bottom: 0.25rem;
3 display: flex;
4 min-height: 32px;
5 align-items: center;
6 padding-left: 1rem;
7 padding-right: 1rem;
8}
9
10@media (min-width: 1024px) {
11 .fern-sidebar-heading {
12 min-height: 36px;
13 padding-left: 0.5rem;
14 padding-right: 0.5rem;
15 }
16}
.fern-sidebar-heading-content

侧边栏标题文本。

Default CSS
1.fern-sidebar-heading-content {
2 margin: 0;
3 font-size: 1rem;
4 font-weight: 600;
5 line-height: 1.5rem;
6}
7
8@media (min-width: 1024px) {
9 .fern-sidebar-heading-content {
10 font-size: 0.875rem;
11 line-height: 1.25rem;
12 }
13}
.fern-sidebar-link

侧边栏链接。

Default CSS
1.fern-sidebar-link {
2 color: var(--grayscale-a11);
3 display: flex;
4 width: 100%;
5 align-items: center;
6 gap: 0.75rem;
7 padding: 0.5rem 1rem;
8 text-align: left;
9 font-size: 1rem;
10 line-height: 1.25;
11 transition-property: color, background-color;
12}
13
14@media (min-width: 1024px) {
15 .fern-sidebar-link {
16 border-radius: var(--radius-2);
17 padding: 0.5rem;
18 font-size: 0.875rem;
19 }
20}
21
22.fern-sidebar-link:hover {
23 color: var(--grayscale-a12);
24 background-color: var(--grayscale-a3);
25 transition: none;
26}
27
28.fern-sidebar-link[data-state="active"] {
29 color: var(--accent-a11);
30 background-color: var(--accent-a3);
31 font-weight: 500;
32}
.fern-sidebar-link-title

侧边栏链接文本。

Default CSS
1.fern-sidebar-link-title {
2 overflow: hidden;
3 text-overflow: ellipsis;
4 white-space: nowrap;
5 min-width: 0;
6}
7
8.fern-sidebar-link-title.marquee-active {
9 text-overflow: clip;
10}
11
12.fern-sidebar-link-title.wrap-mode {
13 white-space: normal;
14 overflow-wrap: anywhere;
15 text-overflow: clip;
16}
.fern-sidebar-link-title-inner

长标题的跑马灯动画。

Default CSS
1.fern-sidebar-link-title-inner {
2 display: inline;
3 will-change: transform;
4 transform: translateX(0);
5}
6
7.fern-sidebar-link-title-inner.is-marquee {
8 display: inline-block;
9 animation: fern-sidebar-marquee var(--marquee-duration, 4s) linear forwards;
10}
11
12@keyframes fern-sidebar-marquee {
13 to {
14 transform: translateX(var(--marquee-translate, 0));
15 }
16}
.fern-sidebar-group

分组的侧边栏项目。

Default CSS
1.fern-sidebar-group {
2 list-style: none;
3 margin-left: -1rem;
4 margin-right: -1rem;
5}
6
7@media (min-width: 1024px) {
8 .fern-sidebar-group {
9 margin-left: 0;
10 margin-right: 0;
11 }
12}
13
14.fern-sidebar-group .fern-sidebar-group {
15 margin-left: 0;
16 margin-right: 0;
17}
.fern-sidebar-tabs

侧边栏标签导航。

Default CSS
1.fern-sidebar-tabs {
2 margin-top: 1.25rem;
3 margin-bottom: 1.5rem;
4 display: flex;
5 flex-direction: column;
6 list-style: none;
7}

导航组件

用于面包屑导航的选择器。

.fern-breadcrumb

面包屑导航。

Default CSS
1.fern-breadcrumb {
2 display: inline-flex;
3 height: fit-content;
4 max-width: 100%;
5 flex-wrap: wrap;
6 align-items: baseline;
7 font-weight: 500;
8}
.fern-breadcrumb-item

面包屑链接或文本。

Default CSS
1.fern-breadcrumb-item {
2 color: var(--accent-a11);
3 min-width: 0;
4 flex-shrink: 1;
5 font-size: 0.875rem;
6}
.fern-breadcrumb-arrow

面包屑分隔符。

Default CSS
1.fern-breadcrumb-arrow {
2 color: var(--grayscale-a9);
3 margin-left: 0.125rem;
4 margin-right: 0.125rem;
5 width: 1rem;
6 height: 1rem;
7 align-self: center;
8}

按钮组件

用于按钮的选择器。

.fern-button

带变体的按钮。

Default CSS
1.fern-button {
2 transition-property: color, background-color;
3 display: inline-flex;
4 align-items: center;
5 justify-content: center;
6 border-radius: var(--radius-2);
7 height: 2.5rem;
8 padding: 0.25rem 0.75rem;
9 font-size: 0.875rem;
10 cursor: pointer;
11}
12
13@media (min-width: 640px) {
14 .fern-button {
15 height: 2rem;
16 }
17}
18
19.fern-button:hover {
20 transition: none;
21}

变体:

  • .minimal - 透明背景,悬停时有轻微样式
  • .filled - 实心背景色
  • .outlined - 带边框,背景透明
  • .primary - 强调色变体
  • .success - 绿色变体
  • .warning - 琥珀色变体
  • .danger - 红色变体

尺寸修饰符:

  • .small - 较小的按钮(桌面端 1.75rem 高,移动端 1.5rem 高)
  • .large - 较大的按钮(桌面端 2.75rem 高,移动端 2.5rem 高)
  • .square - 等宽等高的方形按钮
.fern-button-content

按钮内容包装器。

Default CSS
1.fern-button-content {
2 display: inline-flex;
3 min-width: 0;
4 flex-shrink: 1;
5 align-items: center;
6 height: 1.5rem;
7 gap: 0.375rem;
8}
.fern-button-text

按钮文本。

Default CSS
1.fern-button-text {
2 min-width: 0;
3 flex-shrink: 1;
4 font-weight: 500;
5}
6
7.fern-button:not(.multiline) .fern-button-text {
8 overflow: hidden;
9 text-overflow: ellipsis;
10 white-space: nowrap;
11}
.fern-button-group

按钮组。

Default CSS
1.fern-button-group {
2 display: inline-flex;
3 align-items: center;
4}
5
6.fern-button-group > .fern-button:has(+ .fern-button.outlined, + .fern-button.filled),
7.fern-button-group > .fern-button.outlined:has(+ .fern-button.minimal),
8.fern-button-group > .fern-button.filled:has(+ .fern-button.minimal) {
9 margin-right: 0.5rem;
10}
.fern-copy-button

代码块 的复制按钮。

Default CSS
1.fern-copy-button {
2 width: fit-content;
3 height: fit-content;
4 backdrop-filter: blur(8px);
5}
.fern-expand-button

设置 maxLines 的代码块 的展开按钮。

Default CSS
1.fern-expand-button {
2 width: fit-content;
3 height: fit-content;
4 backdrop-filter: blur(8px);
5}
.fern-page-actions

页面操作按钮(编辑、反馈、分享)。

Default CSS
1.fern-page-actions {
2 display: flex;
3 border-radius: var(--radius-2);
4 border: 1px solid var(--border-default);
5}
6
7.fern-page-actions > *:not(:last-child) {
8 border-right: 1px solid var(--border-default);
9 margin-right: -1px;
10}

变体:

  • .fern-toolbar - 移除边框样式,呈现工具栏式外观

卡片组件

用于卡片的选择器。

.fern-card

卡片容器。

Default CSS
1.fern-card {
2 color: var(--text-body);
3 background-color: var(--card-background);
4 border: 1px solid var(--border-default);
5 box-shadow: 0 2px 4px var(--grayscale-a3);
6 transition-property: all;
7}
8
9.fern-card:hover {
10 color: var(--text-body);
11 transition: none;
12}
13
14.fern-card.interactive:hover {
15 box-shadow: 0 4px 8px var(--grayscale-a4);
16 border-color: var(--accent-a9);
17}
18
19.fern-card.elevated {
20 border-color: var(--accent-a9);
21 box-shadow: 0 4px 12px var(--accent-a4);
22}

变体:

  • .interactive - 添加悬停效果
  • .elevated - 突出外观,带强调色边框
  • .active - 激活状态样式

表单组件

用于表单输入和控件的选择器。

.fern-input

文本输入框。

Default CSS
1.fern-input {
2 width: 100%;
3 border: none;
4 background-color: transparent;
5 outline: none;
6 caret-color: var(--accent);
7 padding: 0.5rem 0.625rem;
8 font-size: 0.875rem;
9}
10
11@media (max-width: 640px) {
12 .fern-input {
13 font-size: 1rem;
14 }
15}
16
17input.fern-input::-webkit-outer-spin-button,
18input.fern-input::-webkit-inner-spin-button {
19 appearance: none;
20 margin: 0;
21}
22
23input.fern-input[type="number"] {
24 appearance: textfield;
25}
.fern-input-group

带聚焦边框的输入容器。

Default CSS
1.fern-input-group {
2 display: flex;
3 align-items: center;
4 overflow: hidden;
5 border-radius: var(--radius-2);
6 background-color: white;
7 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8 border: 1px solid var(--border-default);
9 height: 2.5rem;
10}
11
12@media (prefers-color-scheme: dark) {
13 .fern-input-group {
14 background-color: var(--grayscale-a2);
15 }
16}
17
18@media (min-width: 640px) {
19 .fern-input-group {
20 height: 2rem;
21 }
22}
23
24.fern-input-group:focus-within {
25 outline: none;
26 border-color: var(--accent-a5);
27 box-shadow: 0 0 0 2px var(--accent-a5);
28}
29
30.fern-input-group.error {
31 background: rgba(252, 100, 100, 0.63);
32}
.fern-input-icon

输入框图标。

Default CSS
1.fern-input-icon {
2 display: flex;
3 align-items: center;
4 justify-content: center;
5 height: 100%;
6 width: 2rem;
7 flex-shrink: 0;
8}
9
10.fern-input-icon + .fern-input {
11 margin-left: -2rem;
12 padding-left: 2rem;
13}
.fern-input-right-element

输入框右侧元素。

Default CSS
1.fern-input-right-element {
2 display: flex;
3 align-items: center;
4 justify-content: center;
5 margin-left: -0.5rem;
6 height: 100%;
7 min-width: 2rem;
8 flex-shrink: 0;
9 padding-left: 0;
10 padding-right: 0;
11}
.fern-input-clear-button

输入框清除按钮。

Default CSS
1.fern-input-clear-button {
2 display: flex;
3 align-items: center;
4 justify-content: center;
5 color: var(--grayscale-a9);
6 width: 1.5rem;
7 height: 1.5rem;
8 flex-shrink: 0;
9 margin-right: 0.25rem;
10 cursor: pointer;
11 border: none;
12 background-color: transparent;
13 transition: color 0.15s;
14}
15
16.fern-input-clear-button:hover {
17 color: var(--grayscale-a11);
18}
.fern-textarea

多行文本输入框。

Default CSS
1.fern-textarea {
2 width: 100%;
3 resize: none;
4 border: none;
5 background-color: transparent;
6 outline: none;
7 caret-color: var(--accent);
8 padding: 0.5rem 0.625rem;
9 font-size: 0.875rem;
10}
11
12@media (max-width: 640px) {
13 .fern-textarea {
14 font-size: 1rem;
15 }
16}
.fern-textarea-group

文本域容器。

Default CSS
1.fern-textarea-group {
2 display: flex;
3 align-items: center;
4 overflow: hidden;
5 border-radius: var(--radius-2);
6 background-color: white;
7 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8 border: 1px solid var(--border-default);
9}
10
11@media (prefers-color-scheme: dark) {
12 .fern-textarea-group {
13 background-color: var(--grayscale-a2);
14 }
15}
16
17.fern-textarea-group:focus-within {
18 outline: none;
19 border-color: var(--accent-a5);
20 box-shadow: 0 0 0 2px var(--accent-a5);
21}
.fern-checkbox-label

复选框标签。

Default CSS
1.fern-checkbox-label {
2 display: flex;
3 cursor: pointer;
4}
.fern-checkbox-item

复选框输入。

Default CSS
1.fern-checkbox-item {
2 border-radius: var(--radius-1);
3 position: relative;
4 margin-top: 0.125rem;
5 display: inline-block;
6 width: 1rem;
7 height: 1rem;
8 border: 1px solid var(--border-default);
9}
10
11.fern-checkbox-item:hover {
12 background-color: var(--accent-a3);
13}
14
15.fern-checkbox-item:focus {
16 outline: 4px solid var(--accent-a3);
17 outline-offset: 0;
18}
.fern-checkbox-indicator

选中指示符。

Default CSS
1.fern-checkbox-indicator {
2 background-color: var(--accent);
3 color: var(--accent-contrast);
4 border-radius: var(--radius-1);
5 display: flex;
6 width: 1rem;
7 height: 1rem;
8 align-items: center;
9 justify-content: center;
10}
.fern-radio-group

单选按钮组。

Default CSS
1.fern-radio-group {
2 display: flex;
3 flex-direction: column;
4 gap: 1rem;
5}
6
7.fern-radio-group.compact {
8 gap: 0.5rem;
9 font-size: 0.875rem;
10}
.fern-radio-label

单选按钮标签。

Default CSS
1.fern-radio-label {
2 display: flex;
3 cursor: pointer;
4}
.fern-radio-item

单选按钮输入。

Default CSS
1.fern-radio-item {
2 border: 1px solid var(--border-default);
3 position: relative;
4 margin-top: 0.125rem;
5 display: inline-block;
6 width: 1rem;
7 height: 1rem;
8 border-radius: 9999px;
9}
10
11.fern-radio-item:hover {
12 background-color: var(--accent-a3);
13}
14
15.fern-radio-item:focus {
16 outline: 4px solid var(--accent-a3);
17 outline-offset: 0;
18}
.fern-radio-indicator

选中指示符。

Default CSS
1.fern-radio-indicator {
2 background-color: var(--accent);
3 display: flex;
4 width: 1rem;
5 height: 1rem;
6 align-items: center;
7 justify-content: center;
8 border-radius: 9999px;
9}
10
11.fern-radio-indicator::after {
12 background-color: var(--background);
13 position: absolute;
14 width: 0.5rem;
15 height: 0.5rem;
16 border-radius: 9999px;
17 content: "";
18}
.fern-segmented-control

分段切换控件。

Default CSS
1.fern-segmented-control {
2 border-radius: var(--radius-3/2);
3 height: 2.25rem;
4 background-color: white;
5 display: flex;
6 align-items: center;
7 gap: 1px;
8 padding: 0.125rem;
9 border: 1px solid var(--border-default);
10}
11
12@media (prefers-color-scheme: dark) {
13 .fern-segmented-control {
14 background-color: rgba(255, 255, 255, 0.05);
15 }
16}
17
18.fern-segmented-control .fern-button {
19 border-radius: var(--radius-1);
20 min-width: 0;
21 flex-shrink: 1;
22}
.fern-numeric-input-group

带步进按钮的数字输入框。

Default CSS
1.fern-numeric-input-group {
2 display: flex;
3 align-items: center;
4 overflow: hidden;
5 border-radius: var(--radius-2);
6 background-color: white;
7 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8 border: 1px solid var(--border-default);
9 height: 2.5rem;
10}
11
12@media (min-width: 640px) {
13 .fern-numeric-input-group {
14 height: 2rem;
15 }
16}
17
18.fern-numeric-input-group:focus-within {
19 outline: none;
20 border-color: var(--accent-a5);
21 box-shadow: 0 0 0 2px var(--accent-a5);
22}
.fern-numeric-input-step

数字输入框的步进按钮。

Default CSS
1.fern-numeric-input-group .fern-numeric-input-step {
2 border-color: var(--border-default);
3 height: 100%;
4 border-radius: 0;
5}
6
7.fern-numeric-input-group .fern-numeric-input-step:first-child {
8 border-top-left-radius: var(--radius-3/2);
9 border-bottom-left-radius: var(--radius-3/2);
10 border-right: 1px solid;
11}
12
13.fern-numeric-input-group .fern-numeric-input-step:last-child {
14 border-top-right-radius: var(--radius-3/2);
15 border-bottom-right-radius: var(--radius-3/2);
16 border-left: 1px solid;
17}
18
19.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled) {
20 color: var(--accent-a11);
21 border-color: var(--accent-a5);
22}
23
24.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled):hover {
25 color: var(--accent-a11);
26 background-color: var(--accent-a3);
27}

下拉菜单与选择器组件

用于下拉菜单和产品选择器的选择器。

.fern-dropdown

下拉菜单容器。

Default CSS
1.fern-dropdown {
2 position: relative;
3 z-index: 50;
4 animation: popover-in 150ms ease-out;
5 min-width: var(--radix-dropdown-menu-trigger-width);
6 background-color: var(--background);
7 border: 1px solid var(--border-default);
8 border-radius: var(--radius-2);
9 display: flex;
10 max-height: 300px;
11 flex-direction: column;
12 backdrop-filter: blur(8px);
13 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
14}
.fern-dropdown-item

下拉菜单项。

Default CSS
1.fern-dropdown-item {
2 border-radius: var(--radius-1);
3 display: flex;
4 width: 100%;
5 cursor: default;
6 align-items: center;
7 justify-content: flex-start;
8 padding: 0.25rem 0.5rem;
9 text-align: left;
10 font-size: 0.875rem;
11}
12
13.fern-dropdown-item[data-highlighted] {
14 color: var(--accent-contrast);
15 background-color: var(--accent);
16}
.fern-dropdown-item-indicator

下拉菜单选中指示符。

Default CSS
1.fern-dropdown-item-indicator {
2 margin-right: 0.25rem;
3 display: flex;
4 height: 100%;
5 width: 1rem;
6 flex: none;
7 align-items: center;
8 justify-content: center;
9}
.fern-selection-item

选择项。

Default CSS
1.fern-selection-item {
2 border-radius: var(--radius-3/2);
3 display: flex;
4 flex: 1 1 0%;
5 cursor: pointer;
6 align-items: center;
7 justify-content: space-between;
8 gap: 0.5rem;
9 border: 1px solid transparent;
10 padding: 0.25rem 0.625rem 0.25rem 0.25rem;
11 width: 100%;
12 text-align: left;
13 transition: all 200ms ease-in-out;
14}
15
16.fern-selection-item:hover {
17 color: var(--accent);
18 background-color: var(--grayscale-a3);
19}
.fern-selection-item-icon

选择项图标。

Default CSS
1.fern-selection-item-icon {
2 border-radius: var(--radius-2);
3 color: var(--grayscale-a11);
4 margin: 0.25rem;
5 display: flex;
6 height: 56px;
7 width: 56px;
8 flex-shrink: 0;
9 align-items: center;
10 justify-content: center;
11 overflow: hidden;
12}
13
14.fern-selection-item-icon.use-icon {
15 border: 1px solid var(--grayscale-a5);
16 padding: 0.25rem;
17}
18
19.fern-selection-item-icon svg,
20.fern-selection-item-icon .fern-file-icon {
21 display: block;
22 height: 50%;
23 width: 50%;
24 transition: all 300ms ease-in-out;
25}
26
27.fern-selection-item:hover .fern-selection-item-icon svg,
28.fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
29 transform: scale(1.2);
30}
31
32.fern-selection-item.dense .fern-selection-item-icon {
33 margin: 0.125rem;
34 height: 36px;
35 width: 36px;
36 padding: 0.125rem;
37}
.fern-selection-item-title

选择项标题。

Default CSS
1.fern-selection-item-title {
2 color: var(--grayscale-a12);
3 font-weight: 700;
4 line-height: 1.25;
5}
6
7@media (min-width: 1024px) {
8 .fern-selection-item-title {
9 font-size: 0.875rem;
10 }
11}
.fern-selection-item-end-icon

选择项末端图标。

Default CSS
1.fern-selection-item-end-icon {
2 color: var(--grayscale-a11);
3}
.fern-product-selector

产品选择器。示例参见 styles.css。

Default CSS
1.fern-product-selector {
2 width: 100%;
3}
4
5@media (min-width: 1024px) {
6 .fern-product-selector {
7 width: auto;
8 }
9}
.fern-product-selector-radio-group

产品选择器单选按钮组。示例参见 styles.css。

手风琴组件

用于手风琴组件的选择器。

.fern-accordion

手风琴容器。

Default CSS
1.fern-accordion {
2 border-radius: var(--radius-3);
3 border-top: 1px solid var(--border-default);
4}
5
6.fern-accordion li {
7 list-style-position: outside;
8}
.fern-accordion-item

手风琴项。

Default CSS
1.fern-accordion-item {
2 overflow: hidden;
3}
4
5.fern-accordion-item:first-child {
6 border-top-left-radius: inherit;
7 border-top-right-radius: inherit;
8}
9
10.fern-accordion-item:last-child {
11 border-bottom-left-radius: inherit;
12 border-bottom-right-radius: inherit;
13}
.fern-accordion-trigger

展开/折叠触发器。

Default CSS
1.fern-accordion-trigger {
2 display: flex;
3 cursor: pointer;
4 align-items: center;
5 gap: 0.75rem;
6 border-radius: inherit;
7 padding: 1rem;
8 transition-property: background-color;
9 list-style: none;
10 overflow: auto;
11}
12
13.fern-accordion-trigger:hover {
14 background-color: var(--grayscale-a2);
15 transition: none;
16}
17
18.fern-accordion-trigger[data-state="open"] {
19 border-bottom-left-radius: 0;
20 border-bottom-right-radius: 0;
21}
22
23.fern-accordion-trigger::-webkit-details-marker {
24 display: none;
25}
.fern-accordion-trigger-arrow

展开/折叠箭头。

Default CSS
1.fern-accordion-trigger-arrow {
2 color: var(--grayscale-a11);
3 width: 1rem;
4 height: 1rem;
5 flex-shrink: 0;
6 transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
7}
8
9.fern-accordion-trigger[data-state="open"] .fern-accordion-trigger-arrow {
10 transform: rotate(90deg);
11}
.fern-accordion-trigger-title

手风琴触发器标题。

Default CSS
1.fern-accordion-trigger-title {
2 color: var(--text-body);
3 margin: 0;
4 margin-bottom: -1px;
5 display: flex;
6 max-width: max-content;
7 text-align: left;
8 font-size: 1rem;
9 line-height: 1.5rem;
10}
11
12.fern-accordion-trigger-title p {
13 margin: 0 !important;
14 padding: 0 !important;
15 line-height: inherit !important;
16}

滚动区域组件

用于可滚动区域的选择器。

.fern-scroll-area

可滚动区域容器。

Default CSS
1.fern-scroll-area {
2 z-index: 0;
3 display: flex;
4 height: 100%;
5 width: 100%;
6 flex-direction: column;
7 overflow: hidden;
8}
.fern-scroll-area-viewport

滚动视口。

Default CSS
1.fern-scroll-area-viewport {
2 display: flex;
3 height: 100%;
4 min-height: 0;
5 width: 100%;
6 flex-shrink: 1;
7 flex-direction: column;
8 border-radius: inherit;
9}
10
11.fern-scroll-area-viewport:has(.fern-scroll-area-scrollbar[data-orientation="horizontal"]) {
12 overscroll-behavior-x: contain;
13}
14
15.fern-scroll-area-viewport > div {
16 display: block !important;
17 flex-grow: 1;
18}
19
20.fern-scroll-area-viewport[data-scrollbars="vertical"] > div {
21 max-width: 100%;
22}
.fern-scroll-area-scrollbar

滚动条。

Default CSS
1.fern-scroll-area-scrollbar {
2 z-index: 10;
3 margin: 0.25rem;
4 display: flex;
5 touch-action: none;
6 user-select: none;
7 border-radius: 9999px;
8 transition: all 150ms ease-out;
9 background-color: var(--grayscale-a3);
10}
11
12.fern-scroll-area-scrollbar[data-state="hidden"] {
13 opacity: 0;
14}
15
16.fern-scroll-area-scrollbar[data-orientation="vertical"] {
17 margin-top: 5px;
18 margin-bottom: 5px;
19 width: 4px;
20}
21
22.fern-scroll-area-scrollbar[data-orientation="vertical"]:hover {
23 width: 6px;
24}
25
26.fern-scroll-area-scrollbar[data-orientation="horizontal"] {
27 margin-left: 5px;
28 margin-right: 5px;
29 height: 4px;
30 flex-direction: column;
31}
32
33.fern-scroll-area-scrollbar[data-orientation="horizontal"]:hover {
34 height: 6px;
35}
.fern-scroll-area-thumb

滚动条滑块。

Default CSS
1.fern-scroll-area-thumb {
2 position: relative;
3 z-index: auto;
4 display: flex;
5 background-color: var(--accent-track);
6 flex: 1 1 0%;
7 border-radius: 9999px;
8}
9
10.fern-scroll-area-thumb::before {
11 content: "";
12 position: absolute;
13 top: 50%;
14 left: 50%;
15 transform: translate(-50%, -50%);
16 width: 100%;
17 height: 100%;
18 min-width: 28px;
19 min-height: 28px;
20}
.fern-scroll-area-corner

滚动条角落。

Default CSS
1.fern-scroll-area-corner {
2 background-color: transparent;
3}

徽章组件

用于徽章和 HTTP 方法标签的选择器。

.fern-docs-badge

用于标签、状态和 HTTP 方法的徽章。

Default CSS
1.fern-docs-badge {
2 align-items: center;
3 display: inline-flex;
4 gap: 0.25rem;
5 justify-content: center;
6 line-height: 1rem;
7 box-sizing: border-box;
8 font-weight: 600;
9 white-space: nowrap;
10}
11
12.fern-docs-badge.small {
13 border-radius: var(--radius-1);
14 font-size: 0.75rem;
15 height: 1.25rem;
16 padding: 0 0.375rem;
17}
18
19.fern-docs-badge.large {
20 border-radius: var(--radius-3/2);
21 font-size: 0.875rem;
22 height: 1.5rem;
23 padding: 0.25rem 0.5rem;
24}
25
26.fern-docs-badge.rounded {
27 border-radius: 9999px !important;
28}
29
30.fern-docs-badge:disabled {
31 opacity: 0.5;
32 cursor: not-allowed;
33}
34
35.fern-docs-badge[data-badge-type="http-method"],
36.fern-docs-badge[data-badge-type="status-code"] {
37 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
38 font-variant-numeric: slashed-zero;
39 text-transform: uppercase;
40}

MDX 内容组件

用于链接、提示框、步骤组件和表格的选择器。

.fern-mdx-link

带外部链接图标和悬停下划线的链接。

Default CSS
1.fern-mdx-link {
2 color: var(--accent-a11);
3 font-weight: 600;
4 text-decoration-line: underline;
5 text-decoration-color: currentcolor;
6 text-decoration-thickness: 1px !important;
7 text-underline-offset: 0.25rem;
8}
9
10.fern-mdx-link:hover {
11 text-decoration-thickness: 2px !important;
12}
13
14.fern-mdx-link svg.external-link-icon {
15 margin-left: 0.125rem;
16 display: inline-block;
17 width: 0.875rem;
18 height: 0.875rem;
19 color: currentColor;
20 opacity: 0.7;
21 overflow: visible;
22}
23
24.fern-mdx-link:hover svg.external-link-icon path:nth-child(1),
25.fern-mdx-link:hover svg.external-link-icon path:nth-child(2) {
26 transform: translate(2px, -2px);
27 transition: transform 0.2s ease;
28}
.fern-callout

标注,颜色与 intent 相匹配。

Default CSS
1.fern-callout {
2 border-radius: var(--radius-3);
3 margin-bottom: 1.5rem;
4 margin-top: 1rem;
5 border: 1px solid;
6 padding: 1rem;
7}
8
9.fern-callout:first-child {
10 margin-top: 0;
11}

Intent 变体:

  • [data-intent="info"] - 灰色/中性(默认)
  • [data-intent="warning"] - 琥珀色/黄色
  • [data-intent="success"] - 绿色
  • [data-intent="error"] - 红色
  • [data-intent="note"] - 蓝色
  • [data-intent="launch"] - 强调色
  • [data-intent="tip"] - 绿色
  • [data-intent="check"] - 绿色
.fern-indent

带垂直引导线的缩进组件。

Default CSS
1.fern-indent {
2 position: relative;
3 margin-left: 1rem;
4 padding-left: 1rem;
5}
6
7.fern-indent > * + * {
8 margin-top: 0.25rem;
9}
10
11.fern-indent::before {
12 content: '';
13 position: absolute;
14 left: 0;
15 top: 0.5rem;
16 bottom: 0.5rem;
17 border-left: 1px solid transparent;
18}
.fern-steps

步骤组件的容器。

Default CSS
1.fern-steps {
2 border-left: 1px solid var(--border-default);
3 margin-bottom: 3rem;
4 margin-left: 0.75rem;
5 margin-top: 1rem;
6 padding-left: 1.75rem;
7}
.fern-step

单个步骤。

Default CSS
1.fern-step > .fern-anchor {
2 position: absolute;
3 margin-left: -40px;
4 margin-top: 0.25rem;
5}
.fern-anchor

用于深度链接的锚点组件。

Default CSS
1a.fern-anchor {
2 border-radius: var(--radius-3/2);
3 position: relative;
4 display: flex;
5 width: 1.5rem;
6 height: 1.5rem;
7 align-items: center;
8 border: 0;
9}
10
11.fern-anchor-icon {
12 border-radius: var(--radius-3/2);
13 position: absolute;
14 left: 0;
15 display: flex;
16 width: 1.5rem;
17 height: 1.5rem;
18 align-items: center;
19 justify-content: center;
20}
21
22.fern-anchor-icon:not(.copied) {
23 color: var(--grayscale-a11);
24 background-color: var(--card-background);
25 border: 1px solid var(--card-border);
26 backdrop-filter: blur(8px);
27}
28
29.fern-anchor-icon.copied {
30 background-color: var(--accent-a3);
31 border: 1px solid var(--accent-a5);
32 backdrop-filter: blur(8px);
33}
34
35.fern-anchor-icon.copied > svg {
36 color: var(--accent-a11);
37}
38
39.fern-anchor-icon > svg {
40 width: 1rem;
41 height: 1rem;
42}
.fern-table-root

表格容器。

Default CSS
1.fern-table-root {
2 border: 1px solid var(--card-border);
3 border-radius: var(--radius-3/2);
4 background-color: var(--card-background);
5 overflow: hidden;
6 font-size: 0.875rem;
7 backdrop-filter: blur(32px);
8 display: flex;
9 flex-direction: column;
10}
.fern-table

支持 .sticky 类的表格,可启用粘性表头。

Default CSS
1.fern-table {
2 width: 100%;
3}
4
5.fern-table thead tr th {
6 background-color: var(--grayscale-a2);
7}
8
9.fern-table td,
10.fern-table th {
11 height: 2.25rem;
12 padding: 0.5rem;
13 text-align: left;
14 border-bottom: 1px solid var(--card-border);
15}
16
17.fern-table tbody > tr:last-child > td {
18 border-bottom: 0;
19}
20
21.fern-table.sticky {
22 font-size: 0.875rem;
23}
24
25.fern-table.sticky thead {
26 position: sticky;
27 top: var(--header-height, var(--spacing-header-height-real));
28}
29
30.fern-table.sticky thead tr th {
31 background-color: var(--grayscale-2);
32}
33
34.fern-table.sticky td,
35.fern-table.sticky th {
36 max-width: 0;
37}

变更日志筛选器组件

用于变更日志筛选 UI 的选择器。仅在带有标签的变更日志页面上出现。

.fern-filter-dropdown-button

筛选器下拉菜单触发按钮。

Default CSS
1.fern-filter-dropdown-button {
2 /* Inherits from .fern-button with variant="outlined" */
3}
Example: Customize the filter button appearance
1/* Style the filter dropdown button */
2.fern-filter-dropdown-button {
3 border-color: var(--accent-a7);
4 background-color: var(--accent-a2);
5}
6
7.fern-filter-dropdown-button:hover {
8 border-color: var(--accent-a9);
9 background-color: var(--accent-a3);
10}
.fern-filter-dropdown-button-text

筛选器按钮文本。

Default CSS
1.fern-filter-dropdown-button-text {
2 /* Inherits text styles from parent button */
3}
Example: Visually replace the default label text
1/* Replace "Select filters" with custom text using CSS */
2.fern-filter-dropdown-button-text {
3 font-size: 0;
4}
5
6.fern-filter-dropdown-button-text::after {
7 content: "Select product";
8 font-size: 0.875rem;
9}
.fern-filter-dropdown-button-icon

筛选器按钮的尖角图标。

Default CSS
1.fern-filter-dropdown-button-icon {
2 width: 1rem;
3 height: 1rem;
4}
Example: Customize the chevron icon
1/* Change the chevron color */
2.fern-filter-dropdown-button-icon {
3 color: var(--accent-a11);
4}
.fern-filter-dropdown-item

筛选器下拉项。

Default CSS
1.fern-filter-dropdown-item {
2 /* Inherits from .fern-dropdown-item */
3}
Example: Style filter dropdown items
1/* Customize filter dropdown items */
2.fern-filter-dropdown-item {
3 padding: 0.5rem 0.75rem;
4}
5
6.fern-filter-dropdown-item[data-highlighted] {
7 background-color: var(--accent-a4);
8 color: var(--accent-a12);
9}
.fern-filter-badge

筛选徽章基类。

Default CSS
1.fern-filter-badge {
2 display: inline;
3 max-width: 100%;
4 cursor: pointer;
5 overflow: hidden;
6 text-overflow: ellipsis;
7}
.fern-filter-badge-selected

已选中的筛选徽章。

Default CSS
1.fern-filter-badge-selected {
2 /* Inherits from .fern-docs-badge with variant="outlined" */
3}
Example: Style selected filter badges with your brand color
1/* Make selected badges use your accent color */
2.fern-filter-badge.fern-filter-badge-selected {
3 background-color: var(--accent-a9);
4 color: var(--accent-contrast);
5 border-color: var(--accent-a9);
6}
.fern-filter-badge-unselected

未选中的筛选徽章。

Default CSS
1.fern-filter-badge-unselected {
2 /* Inherits from .fern-docs-badge with variant="outlined-subtle" */
3}
Example: Mute unselected filter badges
1/* Style unselected badges with muted appearance */
2.fern-filter-badge.fern-filter-badge-unselected {
3 background-color: transparent;
4 color: var(--grayscale-a10);
5 border-color: var(--grayscale-a6);
6}
.fern-dropdown-checkmark

筛选器下拉勾选标记。

Default CSS
1.fern-dropdown-checkmark {
2 width: 1rem;
3 height: 1rem;
4}
Example: Customize the checkmark color
1/* Change the checkmark color to match your brand */
2.fern-dropdown-checkmark {
3 color: var(--accent-a11);
4}
5
6/* Or target only changelog filter checkmarks */
7.fern-filter-dropdown-item .fern-dropdown-checkmark {
8 color: var(--accent-a11);
9}

API Reference 组件

用于 API Reference 组件的选择器。

.fern-api-property

API 属性容器。

Default CSS
1.fern-api-property {
2 display: flex;
3 flex-direction: column;
4 gap: 1rem;
5 padding-top: 1rem;
6 padding-bottom: 1rem;
7}
8
9.fern-api-property p:last-child {
10 margin-bottom: 0;
11}
.fern-api-property-header

API 属性头部。

Default CSS
1.fern-api-property-header {
2 display: flex;
3 align-items: baseline;
4 gap: 0.5rem;
5}
.fern-api-property-key

API 属性名。

Default CSS
1.fern-api-property-key {
2 color: var(--text-body);
3 font-family: var(--font-mono);
4 font-size: 0.875rem;
5 font-weight: 600;
6}
.fern-api-property-meta

API 属性元数据(类型、是否必填)。

Default CSS
1.fern-api-property-meta {
2 color: var(--grayscale-a11);
3 display: inline-flex;
4 align-items: baseline;
5 gap: 0.5rem;
6 font-size: 0.75rem;
7}
.fern-api-property-constraint

API 属性约束。

Default CSS
1.fern-api-property-constraint {
2 display: inline-block;
3 max-width: 100%;
4 min-width: 0;
5}

工具组件

用于图标、工具提示和其他元素的选择器。

.fern-highlight

高亮文本。

Default CSS
1.fern-highlight {
2 color: var(--accent-a12);
3 background-color: transparent;
4 font-weight: 700;
5}
.fern-mdx-icon

行内图标(自适应主题)。

Default CSS
1.fern-mdx-icon {
2 color: var(--grayscale-a11);
3 display: inline-block;
4 vertical-align: baseline;
5}
6
7@variant dark {
8 .fern-mdx-icon {
9 color: var(--fa-icon-dark, var(--grayscale-a11));
10 }
11}
.fern-mdx-tooltip-trigger

带下划线的工具提示触发器。

Default CSS
1.fern-mdx-tooltip-trigger {
2 --tooltip-underline-color: var(--grayscale-a10);
3 --tooltip-underline-hover-color: var(--grayscale-12);
4 --tooltip-underline-thickness: 1px;
5 --tooltip-underline-offset: 1px;
6 --tooltip-transition-duration: 0.15s;
7
8 display: inline-block;
9 cursor: help;
10 text-decoration: underline dashed var(--tooltip-underline-color) var(--tooltip-underline-thickness);
11 text-underline-position: under;
12 text-underline-offset: var(--tooltip-underline-offset);
13 transition: text-decoration-color var(--tooltip-transition-duration) ease;
14}
15
16.fern-mdx-tooltip-trigger:hover {
17 text-decoration-color: var(--tooltip-underline-hover-color);
18}
.fern-mdx-tooltip-content

工具提示内容。

Default CSS
1.fern-mdx-tooltip-content {
2 --tooltip-padding-x: 0.75rem;
3
4 padding-left: var(--tooltip-padding-x) !important;
5 padding-right: var(--tooltip-padding-x) !important;
6}
.fern-file-icon

文件类型图标。

Default CSS
1.fern-selection-item-icon .fern-file-icon {
2 display: block;
3 height: 50%;
4 width: 50%;
5 transition: all 300ms ease-in-out;
6}
7
8.fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
9 transform: scale(1.2);
10}
.fern-collapsible-child

可折叠子元素。

Default CSS
1.fern-collapsible[data-state="open"] .fern-collapsible-child {
2 animation: slide-down 0.18s var(--ease-collapse) none;
3 width: var(--radix-collapsible-content-width);
4}
5
6.fern-collapsible[data-state="closed"] .fern-collapsible-child {
7 animation: slide-up 0.18s var(--ease-collapse) none;
8 width: var(--radix-collapsible-content-width);
9}
10
11@keyframes slide-down {
12 0% {
13 transform: translateY(-100%);
14 }
15 100% {
16 transform: translateY(0);
17 }
18}
19
20@keyframes slide-up {
21 0% {
22 transform: translateY(0);
23 }
24 100% {
25 transform: translateY(-100%);
26 }
27}
.fern-runnable-endpoint

可运行端点。

Default CSS
1.fern-runnable-endpoint ul {
2 padding-left: 0 !important;
3 margin-top: 0 !important;
4}
5
6.fern-runnable-endpoint button {
7 margin-top: 0 !important;
8}
9
10.fern-runnable-endpoint .fern-input:disabled,
11.fern-runnable-endpoint .fern-textarea:disabled {
12 cursor: not-allowed;
13 opacity: 0.6;
14}
15
16.fern-runnable-endpoint .fern-input-group:has(.fern-input:disabled),
17.fern-runnable-endpoint .fern-textarea-group:has(.fern-textarea:disabled),
18.fern-runnable-endpoint .fern-numeric-input-group:has(.fern-input:disabled) {
19 opacity: 0.6;
20 cursor: not-allowed;
21 background-color: var(--grayscale-a2);
22 pointer-events: none;
23}
.fern-rss-feed-button

RSS 订阅按钮。

Default CSS
1.fern-rss-feed-button .fern-button-content {
2 gap: 0.5rem;
3}
.fern-layout-footer

文档页脚。

Default CSS
1.fern-layout-footer.not-prose {
2 margin-top: 4rem !important;
3}
.fern-layout-footer-toolbar

页脚工具栏。

Default CSS
1.fern-layout-footer-toolbar {
2 display: flex;
3 gap: 1rem;
4 justify-content: space-between;
5}
6
7@media (max-width: 640px) {
8 .fern-layout-footer-toolbar {
9 flex-direction: column;
10 gap: 2rem;
11 }
12}
.fern-footer-nav

上一页/下一页导航。

Default CSS
1.fern-footer-nav {
2 display: flex;
3 background-color: var(--grayscale-a3);
4 border-radius: var(--radius-4);
5 padding: 0.25rem;
6 margin-left: -0.25rem;
7 margin-right: -0.25rem;
8}

变体:

  • .fern-footer-nav--simple - 不带背景的简化导航样式
.fern-footer-prev

上一页链接。

Default CSS
1.fern-footer-prev {
2 display: flex;
3 height: 4rem;
4 flex-shrink: 0;
5 align-items: center;
6 gap: 0.25rem;
7 padding: 0.75rem;
8 padding-right: 1.5rem;
9}
.fern-footer-next

下一页链接。

Default CSS
1.fern-footer-next {
2 display: flex;
3 position: relative;
4 height: 4rem;
5 min-width: 0;
6 flex: 1 1 0%;
7 flex-shrink: 1;
8 align-items: center;
9 justify-content: flex-end;
10 gap: 1rem;
11 overflow: clip;
12 border: 1px solid var(--card-border);
13 padding: 0.75rem;
14 background-color: var(--card-solid);
15 transition: all 0.15s;
16}
17
18.fern-footer-next:hover {
19 border-color: var(--accent-a9);
20}

变更日志组件

用于变更日志页面的选择器。

.fern-changelog

变更日志页面容器。

Default CSS
1.fern-changelog {
2 display: flex;
3 justify-content: space-between;
4 padding-left: 1rem;
5 padding-right: 1rem;
6}
7
8@media (min-width: 768px) {
9 .fern-changelog {
10 padding-left: 1.5rem;
11 padding-right: 1.5rem;
12 }
13}
14
15@media (min-width: 1024px) {
16 .fern-changelog {
17 padding-left: 2rem;
18 padding-right: 2rem;
19 }
20}
21
22.fern-changelog > main {
23 margin-left: auto;
24 margin-right: auto;
25 width: 100%;
26 max-width: 1024px;
27 word-wrap: break-word;
28}

变体:

  • .full-width - 全宽布局,日期显示于侧边栏
.fern-changelog-entry

变更日志条目。

Default CSS
1.fern-changelog-entry {
2 display: flex;
3 align-items: stretch;
4}
5
6.fern-changelog-entry:is(article) {
7 padding-top: 2rem;
8 padding-bottom: 2rem;
9}
10
11@media (min-width: 1024px) {
12 .fern-changelog-entry:is(article) {
13 padding-top: 4rem;
14 padding-bottom: 4rem;
15 }
16}
.fern-changelog-date

变更日志日期。

Default CSS
1.fern-changelog-date {
2 color: var(--grayscale-a11);
3 font-size: 1rem;
4 margin-bottom: 2rem;
5}
6
7@media (min-width: 1024px) {
8 .fern-changelog.full-width .fern-changelog-entry > aside .fern-changelog-date {
9 position: sticky;
10 top: calc(var(--header-height) + 1rem);
11 }
12}
.fern-changelog-content

变更日志内容区域。

Default CSS
1.fern-changelog-content {
2 position: relative;
3 margin-left: auto;
4 margin-right: auto;
5 display: grid;
6 width: 100%;
7 max-width: var(--content-wide-width);
8 grid-template-columns: 1fr;
9 gap: 1rem;
10}
.fern-changelog-label

变更日志条目标签。

Default CSS
1.fern-changelog-label {
2 display: flex;
3 width: 100%;
4 flex-direction: row;
5 gap: 0.5rem;
6}
7
8@media (min-width: 1280px) {
9 .fern-changelog-label {
10 flex-direction: column;
11 }
12}