/* Extracted from templates/index.html */
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
overflow: auto;
background-color: var(--color-surface);
color: var(--color-text);
}
.lg-container,
.lg-content,
.lg-inner,
.lg-item,
.lg-img-wrap {
touch-action: none;
overscroll-behavior: contain;
}
.app-shell {
display: grid;
grid-template-columns: 288px minmax(0, 1fr) 260px;
grid-template-rows: auto minmax(0, 1fr);
grid-template-areas:
"site-header site-header site-header"
"sidebar content toc";
height: 100vh;
transition: grid-template-columns 0.3s ease;
}
/* 隐藏左侧边栏（仅PC端） */
.app-shell.sidebar-hidden {
grid-template-columns: 0 minmax(0, 1fr) 260px;
}
.app-shell.sidebar-hidden .sidebar {
display: none;
}
/* 隐藏右侧 TOC（仅PC端） */
.app-shell.toc-hidden {
grid-template-columns: 288px minmax(0, 1fr) 0;
}
.app-shell.toc-hidden .toc-container {
display: none;
}
/* 同时隐藏两侧（仅PC端） */
.app-shell.sidebar-hidden.toc-hidden {
grid-template-columns: 0 minmax(0, 1fr) 0;
}
/* 浮动显示按钮 */
.floating-show-btn {
position: fixed;
z-index: 100;
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.2s ease;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px var(--color-shadow);
}
.floating-show-btn:hover {
background: var(--color-primary-light);
color: var(--color-primary-dark);
border-color: var(--color-primary);
}
.floating-show-btn svg,
.floating-show-btn i {
width: 20px;
height: 20px;
}
.floating-show-sidebar {
top: 80px;
left: 12px;
}
.floating-show-toc {
top: 80px;
right: 12px;
}
/* 当侧边栏隐藏时显示浮动按钮 */
.app-shell.sidebar-hidden .floating-show-sidebar {
display: flex;
}
.app-shell.toc-hidden .floating-show-toc {
display: flex;
}
.site-header {
grid-area: site-header;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 18px;
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
border-bottom: 1px solid var(--color-border);
box-shadow: 0 2px 12px var(--color-shadow);
backdrop-filter: blur(14px);
position: relative;
z-index: 20;
}
.site-header-left {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
.site-brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.site-brand-logo {
width: 38px;
height: 38px;
border-radius: 12px;
object-fit: cover;
box-shadow: 0 4px 12px var(--color-shadow);
flex-shrink: 0;
}
.site-brand-text {
min-width: 0;
}
.site-brand-title {
font-size: 18px;
font-weight: 800;
color: var(--color-text);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.site-brand-subtitle {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.site-header-right {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.header-action-link,
.header-action-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
text-decoration: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.header-action-link:hover,
.header-action-btn:hover {
background: var(--color-primary-light);
color: var(--color-primary-dark);
border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
/* 用户菜单样式 */
.user-menu-wrapper {
position: relative;
}
.user-avatar-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
}
.user-avatar-btn:hover {
background: var(--color-primary-light);
color: var(--color-primary-dark);
border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
.user-avatar-btn .user-name {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 180px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
z-index: 1000;
}
.user-dropdown.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.user-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
color: var(--color-text);
text-decoration: none;
font-size: 14px;
transition: background-color 0.15s ease;
}
.user-dropdown-item:hover {
background: var(--color-hover);
}
.user-dropdown-item-danger {
color: #dc2626;
}
.user-dropdown-item-danger:hover {
background: rgba(220, 38, 38, 0.1);
}
.user-dropdown-divider {
margin: 8px 0;
border: none;
border-top: 1px solid var(--color-border);
}
/* 移动端TOC按钮样式 */
.sidebar {
grid-area: sidebar;
width: auto;
background: var(--color-background);
border-right: 1px solid var(--color-border);
padding: 14px 12px;
overflow: hidden;
box-shadow: 2px 0 12px var(--color-shadow);
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
}
/* Notion/Yuque-like sidebar structure */
.sidebar-header,
.sidebar-nav,
.sidebar-footer {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 14px;
}
.sidebar-header {
padding: 12px 12px 10px;
}
.sidebar-header .sidebar-site-tagline {
white-space: normal;
}
.sidebar-panel-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 8px 10px 8px;
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
margin-bottom: 8px;
}
.sidebar-panel-title strong {
font-size: 13px;
color: var(--color-text-muted);
letter-spacing: 0.02em;
}
.sidebar-brand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sidebar-site {
min-width: 0;
flex: 1;
}
.sidebar-site-name {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.01em;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-site-tagline {
margin-top: 4px;
font-size: 12px;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 侧边栏操作按钮 */
.sidebar-actions {
display: flex;
align-items: center;
gap: 4px;
}
.sidebar-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-surface);
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.sidebar-icon-btn:hover {
background: var(--color-hover);
color: var(--color-text);
border-color: var(--color-primary);
}
.sidebar-icon-btn svg,
.sidebar-icon-btn i {
width: 18px;
height: 18px;
}
.sidebar-chip {
flex: 0 0 auto;
font-size: 12px;
font-weight: 800;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-primary-light);
color: var(--color-primary-dark);
display: none; /* 隐藏chip，为按钮腾出空间 */
}
.sidebar-nav {
padding: 10px;
}
.sidebar-nav a {
display: flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 10px;
margin: 2px 0;
border-radius: 10px;
text-decoration: none;
color: var(--color-text);
font-weight: 700;
font-size: 13px;
transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-nav a:hover {
background: var(--color-primary-light);
}
.sidebar-nav a.active {
background: var(--color-primary-light);
box-shadow: inset 3px 0 0 var(--color-primary);
color: var(--color-primary-dark);
}
.sidebar-panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: 8px 6px;
overflow: auto;
flex: 1 1 auto;
min-height: 0;
}
.sidebar-panel::-webkit-scrollbar {
width: 8px;
}
.sidebar-panel::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: 999px;
}
.sidebar-panel::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-footer {
padding: 10px;
}
.sidebar-footer-title {
font-size: 12px;
font-weight: 800;
color: var(--color-text-muted);
margin: 0 0 8px 0;
letter-spacing: 0.02em;
}
.sidebar h3 {
display: none;
}
/* Theme selector styles */
.theme-selector {
padding: 0;
border-bottom: none;
position: fixed;
top: 64px;
right: 18px;
z-index: 9999;
display: block !important;
}
.theme-selector.show {
z-index: 10000;
}
.theme-selector > .theme-toggle-btn {
display: none;
}
.theme-toggle-btn {
width: 100%;
padding: 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
color: var(--color-text);
font-size: 0.9em;
transition: all 0.2s;
pointer-events: auto;
}
.theme-toggle-btn:hover {
background: var(--color-primary-light);
}
.theme-dropdown {
display: none;
position: absolute;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 12px;
box-shadow: 0 10px 28px rgba(0,0,0,0.14);
z-index: 10001;
width: 240px;
right: 0;
top: calc(100% + 8px);
margin-top: 0;
}
.theme-dropdown.show {
display: block;
}
.theme-section {
margin-bottom: 12px;
}
.theme-section:last-child {
margin-bottom: 0;
}
.theme-section h4 {
margin: 0 0 8px 0;
font-size: 0.85em;
color: var(--color-text-muted);
}
.theme-colors {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.theme-color-btn {
padding: 8px;
border: 2px solid transparent;
border-radius: 6px;
cursor: pointer;
background: var(--color-surface);
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85em;
transition: all 0.2s;
}
.theme-color-btn:hover {
background: var(--color-primary-light);
}
.theme-color-btn.active {
border-color: var(--color-primary);
background: var(--color-primary-light);
}
.color-preview {
width: 20px;
height: 20px;
border-radius: 4px;
}
.mode-toggle-btn {
width: 100%;
padding: 8px;
border: 1px solid var(--color-border);
border-radius: 6px;
cursor: pointer;
background: var(--color-surface);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 0.85em;
transition: all 0.2s;
}
.mode-toggle-btn:hover {
background: var(--color-primary-light);
}
.file-list {
list-style: none;
padding: 4px 0;
margin: 0;
}
.file-list li {
padding: 0;
position: relative;
}
/* unify file links (Notion-like) */
.file-list a {
display: flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 10px;
color: var(--color-text);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
font-size: 13px;
border-radius: 10px;
margin: 2px 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-list a:hover {
background-color: color-mix(in srgb, var(--color-primary-light) 60%, transparent);
}
.file-list a.active {
background: var(--color-primary-light);
color: var(--color-primary-dark);
box-shadow: inset 3px 0 0 var(--color-primary);
font-weight: 800;
}
.file-row {
display: flex;
align-items: center;
gap: 6px;
margin: 2px 0;
}
.file-row > a {
flex: 1 1 auto;
min-width: 0;
}
.tree-item-actions {
display: inline-flex;
align-items: center;
gap: 4px;
padding-right: 8px;
opacity: 0;
transition: opacity 0.2s ease;
}
.file-list li:hover .tree-item-actions,
.dir-item:hover .tree-item-actions {
opacity: 1;
}
@media (min-width: 901px) {
.tree-item-actions {
display: none;
}
}
.tree-action-btn {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-muted);
width: 28px;
height: 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.tree-action-btn:hover {
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
/* 文件树行：让箭头/标题在同一行体系里 */
.tree-row {
display: flex;
align-items: center;
gap: 6px;
margin: 2px 6px;
}
.tree-row .toggle {
width: 22px;
height: 22px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 0 0 auto;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tree-row .toggle:hover {
background: color-mix(in srgb, var(--color-primary-light) 55%, transparent);
border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
color: var(--color-primary-dark);
}
.tree-row .toggle svg {
width: 16px;
height: 16px;
transition: transform 0.15s ease;
}
/* 使用 children.open 来控制箭头状态（因为我们点击 toggle 是在 dir-children 上切 open） */
.tree-row + .dir-children.open {
display: block;
}
/* 展开时箭头旋转：tree-row 后面紧跟的 dir-children.open */
.tree-row:has(+ .dir-children.open) .toggle svg {
transform: rotate(90deg);
}
/* 目录链接本身：不再带 margin（由 tree-row 控制），padding 更像 Notion */
.dir-item {
cursor: pointer;
padding: 0 10px;
height: 36px;
color: var(--color-text);
font-weight: 700;
display: inline-flex;
align-items: center;
user-select: none;
transition: background-color 0.15s ease;
border-radius: 10px;
margin: 0;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.dir-item:hover {
background-color: color-mix(in srgb, var(--color-primary-light) 55%, transparent);
}
.dir-children {
display: none;
list-style: none;
padding-left: 22px;
margin: 2px 0 6px 12px;
border-left: 1px dashed color-mix(in srgb, var(--color-border) 75%, transparent);
}
.dir-children.open {
display: block;
}
.tree-controls {
padding: 0;
display: flex;
gap: 8px;
border-bottom: none;
flex-wrap: wrap;
margin-top: 10px;
}
.tree-controls button {
background: var(--color-surface);
border: 1px solid var(--color-border);
padding: 8px 10px;
border-radius: 10px;
font-size: 12px;
color: var(--color-text);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
font-weight: 800;
box-shadow: none;
flex: 0 0 auto;
}
.tree-controls button:hover {
background: var(--color-primary-light);
border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
transform: none;
}
.tree-controls button.primary {
background: var(--color-primary);
color: var(--color-surface);
border-color: var(--color-primary);
box-shadow: none;
}
/* 已移除原先影响排版的 .user-bar，通过内容区 header 统一展示 */
/* 中间内容区 */
.content {
grid-area: content;
position: relative;
min-width: 0;
min-height: 0;
padding: 40px 60px 40px 60px;
overflow-y: auto;
background-color: var(--color-surface);
scroll-behavior: smooth;
}
/* 文档头部 & 动作按钮 */
.document-header {
max-width: 1000px;
margin: 0 auto 20px auto;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: 0.9em;
color: var(--color-text-muted);
flex-wrap: wrap;
gap: 15px;
}
.header-left {
flex: 1 1 200px;
}
.header-right {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.action-btn {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
padding: 7px 12px;
border-radius: 12px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
margin-left: 0;
font-weight: 700;
color: var(--color-text);
}
.action-btn:hover {
background-color: var(--color-primary-light);
border-color: var(--color-primary);
transform: translateY(-1px);
}
.action-btn.save {
background: var(--color-primary);
color: var(--color-surface);
border-color: #1f8f4d;
}
.action-btn.save:hover {
background: var(--color-primary-dark);
}
.global-access-status {
max-width: 1000px;
margin: 0 auto 20px auto;
padding: 14px 16px;
border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
border-radius: 16px;
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-light) 92%, #ffffff), color-mix(in srgb, var(--color-surface) 86%, var(--color-primary-light)));
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.global-access-status-main {
display: flex;
align-items: center;
gap: 12px;
flex: 1 1 380px;
min-width: 0;
}
.global-access-badge {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
padding: 7px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 12%, #ffffff);
color: var(--color-primary-dark);
font-size: 12px;
font-weight: 800;
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
}
.global-access-text {
color: var(--color-text-muted);
font-size: 13px;
line-height: 1.7;
}
.global-access-exit {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
min-height: 38px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
background: var(--color-surface);
color: var(--color-text);
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: all 0.2s ease;
}
.global-access-exit:hover {
background: var(--color-primary-light);
color: var(--color-primary-dark);
border-color: var(--color-primary);
}
.markdown-body {
max-width: 800px;
margin: 0 auto;
line-height: 1.7;
font-size: 16px;
}
.post-intro {
max-width: 800px;
margin: 0 auto 24px;
padding: 22px 24px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-light));
}
.post-intro h1 {
margin: 0 0 10px;
font-size: 34px;
line-height: 1.15;
color: var(--color-text);
}
.post-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
color: var(--color-text-muted);
font-size: 14px;
margin-bottom: 10px;
}
.post-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.post-summary {
margin: 0;
color: var(--color-text-muted);
line-height: 1.8;
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.post-cover {
max-width: 800px;
margin: 0 auto 24px;
border-radius: 22px;
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: 0 18px 42px rgba(18, 43, 63, 0.08);
background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-light));
}
.post-cover img {
width: 100%;
height: auto;
display: block;
}
.post-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
background: #eef7f5;
color: #0f766e;
font-size: 13px;
font-weight: 700;
}
.post-nav {
max-width: 800px;
margin: 28px auto 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.post-nav-card {
padding: 18px 20px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-primary-light);
}
.post-nav-label {
color: var(--color-text-muted);
font-size: 13px;
margin-bottom: 8px;
}
.post-nav-title {
color: var(--color-text);
font-weight: 800;
line-height: 1.5;
}
.listing-hero,
.archive-hero {
max-width: 960px;
margin: 0 auto 24px;
padding: 26px 28px;
border: 1px solid var(--color-primary-medium);
border-radius: 16px;
background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-medium) 100%);
box-shadow: 0 8px 24px var(--color-shadow);
}
.listing-hero h1,
.archive-hero h1 {
margin: 0 0 10px;
font-size: 42px;
line-height: 1.08;
color: var(--color-primary-dark);
}
.listing-hero p,
.archive-hero p {
margin: 0;
color: var(--color-text-muted);
line-height: 1.8;
}
.listing-nav {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
.search-inline {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
.search-inline input {
flex: 1 1 280px;
min-width: 220px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--color-border);
font-size: 14px;
background: var(--color-surface);
}
.search-inline input:focus {
outline: none;
border-color: var(--color-primary-dark);
box-shadow: 0 0 0 3px var(--color-shadow);
}
.search-inline button {
padding: 12px 16px;
border-radius: 10px;
border: 1px solid var(--color-primary);
background: var(--color-primary);
color: var(--color-surface);
cursor: pointer;
font-weight: 600;
transition: background-color 0.2s, box-shadow 0.2s;
}
.search-inline button:hover {
background: var(--color-primary-dark);
box-shadow: 0 4px 12px rgba(0, 86, 179, 0.25);
}
.app-modal-backdrop {
position: fixed;
inset: 0;
background: var(--color-shadow);
display: none;
align-items: center;
justify-content: center;
z-index: 1200;
padding: 20px;
}
.app-modal-backdrop.show {
display: flex;
}
.app-modal {
width: min(100%, 460px);
background: var(--color-surface);
border-radius: 20px;
border: 1px solid var(--color-border);
box-shadow: 0 24px 60px var(--color-shadow);
overflow: hidden;
}
.app-modal-header {
padding: 18px 20px 10px;
}
.app-modal-title {
margin: 0;
font-size: 22px;
color: var(--color-text);
}
.app-modal-body {
padding: 0 20px 18px;
color: var(--color-text-muted);
line-height: 1.7;
}
.app-modal-body input,
.app-modal-body select {
width: 100%;
margin-top: 12px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: 12px;
font: inherit;
box-sizing: border-box;
}
.app-modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 0 20px 20px;
}
.app-modal-btn {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-muted);
border-radius: 12px;
padding: 10px 16px;
font-weight: 700;
cursor: pointer;
}
.app-modal-btn.primary {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-surface);
}
.share-modal-backdrop {
position: fixed;
inset: 0;
z-index: 1300;
background: rgba(15, 23, 42, 0.36);
backdrop-filter: blur(6px);
display: none;
align-items: flex-start;
justify-content: center;
padding: 22px;
overflow-y: auto;
}
.share-modal-backdrop.show {
display: flex;
}
.share-modal {
width: min(100%, 940px);
max-height: calc(100vh - 44px);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 28px;
box-shadow: 0 28px 64px rgba(15, 23, 42, 0.18);
overflow: hidden;
display: flex;
flex-direction: column;
}
.share-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 24px 26px 0;
}
.share-modal-eyebrow {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--color-primary-dark);
text-transform: uppercase;
}
.share-modal-header h3,
.share-result-hero h4 {
margin: 6px 0 0;
font-size: 28px;
color: var(--color-text);
}
.share-modal-tabs {
display: flex;
gap: 10px;
padding: 18px 26px 0;
}
.share-modal-tab {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-background) 88%, white 12%);
color: var(--color-text-muted);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.share-modal-tab.active {
border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
background: color-mix(in srgb, var(--color-primary-light) 42%, white 58%);
color: var(--color-primary-dark);
}
.share-tab-count {
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
box-sizing: border-box;
}
.share-modal-close {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.share-modal-body {
padding: 22px 26px 26px;
overflow-y: auto;
min-height: 0;
}
.share-modal-panel {
display: grid;
gap: 20px;
}
.share-target-card,
.share-link-box,
.share-qrcode-card,
.share-result-actions,
.share-result-layout {
box-sizing: border-box;
}
.share-target-card {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 18px;
border-radius: 22px;
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary-light) 45%, transparent), transparent 36%),
linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 96%, white 4%), var(--color-surface));
}
.share-target-icon {
width: 52px;
height: 52px;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--color-primary-light) 70%, transparent);
color: var(--color-primary-dark);
flex: 0 0 auto;
}
.share-target-main {
min-width: 0;
}
.share-target-main strong,
.share-target-main span {
display: block;
}
.share-target-main strong {
font-size: 17px;
color: var(--color-text);
}
.share-target-main span {
margin-top: 6px;
color: var(--color-text-muted);
font-size: 13px;
word-break: break-all;
}
.share-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.share-form-field {
display: grid;
gap: 8px;
}
.share-form-field span {
font-size: 13px;
font-weight: 700;
color: var(--color-text-muted);
}
.share-form-field input,
.share-form-field select {
height: 46px;
padding: 0 14px;
border-radius: 14px;
border: 1px solid var(--color-border);
background: var(--color-background);
color: var(--color-text);
font: inherit;
}
.share-switch-row {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-background) 86%, white 14%);
}
.share-switch-row strong,
.share-switch-row small {
display: block;
}
.share-switch-row strong {
font-size: 15px;
color: var(--color-text);
}
.share-switch-row small {
margin-top: 4px;
font-size: 12px;
color: var(--color-text-muted);
line-height: 1.6;
}
.share-switch-row input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--color-primary);
flex: 0 0 auto;
}
.share-form-footer {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 4px;
}
.share-form-hint {
color: var(--color-text-muted);
font-size: 13px;
line-height: 1.8;
max-width: 520px;
}
.share-result-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.share-result-hero p {
margin: 10px 0 0;
color: var(--color-text-muted);
line-height: 1.8;
}
.share-link-box {
display: flex;
gap: 12px;
padding: 14px;
border-radius: 20px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-background) 88%, white 12%);
}
.share-link-box input {
flex: 1 1 auto;
min-width: 0;
height: 44px;
padding: 0 14px;
border-radius: 14px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
}
.share-result-layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 18px;
align-items: stretch;
}
.share-qrcode-card {
padding: 18px;
border-radius: 22px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-surface) 94%, white 6%);
}
.share-qrcode-title {
font-size: 16px;
font-weight: 800;
color: var(--color-text);
}
.share-qrcode-box {
min-height: 216px;
margin-top: 14px;
border-radius: 18px;
border: 1px dashed var(--color-border);
background: color-mix(in srgb, var(--color-background) 90%, white 10%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.share-qrcode-tip {
margin-top: 12px;
color: var(--color-text-muted);
font-size: 13px;
line-height: 1.7;
}
.share-result-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
align-content: start;
}
.share-primary-btn,
.share-secondary-btn {
height: 44px;
border-radius: 14px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.share-primary-btn {
background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 72%, #0f766e));
color: #fff;
border-color: transparent;
}
.share-secondary-btn:hover {
background: color-mix(in srgb, var(--color-primary-light) 24%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
}
.share-secondary-btn.danger {
color: #b91c1c;
border-color: color-mix(in srgb, #ef4444 26%, var(--color-border));
background: rgba(254, 242, 242, 0.92);
}
.share-secondary-btn.danger:hover {
background: rgba(254, 226, 226, 0.96);
border-color: rgba(239, 68, 68, 0.48);
}
.share-manage-head,
.share-manage-editor-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.share-manage-head-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
}
.share-manage-scope {
display: inline-flex;
gap: 6px;
padding: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--color-background) 88%, white 12%);
border: 1px solid var(--color-border);
}
.share-scope-btn {
height: 34px;
padding: 0 14px;
border-radius: 999px;
border: none;
background: transparent;
color: var(--color-text-muted);
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.share-scope-btn.active {
background: var(--color-surface);
color: var(--color-primary-dark);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.share-manage-title {
margin-top: 8px;
font-size: 20px;
font-weight: 800;
color: var(--color-text);
}
.share-manage-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.share-manage-metric {
padding: 14px 16px;
border-radius: 18px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-background) 88%, white 12%);
}
.share-manage-metric strong,
.share-manage-metric span {
display: block;
}
.share-manage-metric strong {
font-size: 24px;
color: var(--color-text);
}
.share-manage-metric span {
margin-top: 4px;
font-size: 12px;
color: var(--color-text-muted);
}
.share-manage-empty {
padding: 26px;
border-radius: 22px;
border: 1px dashed var(--color-border);
background: color-mix(in srgb, var(--color-background) 86%, white 14%);
color: var(--color-text-muted);
text-align: center;
line-height: 1.8;
}
.share-manage-list {
display: grid;
gap: 14px;
}
.share-manage-item {
padding: 18px;
border-radius: 22px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-surface) 95%, white 5%);
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}
.share-manage-item-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.share-manage-item-main {
min-width: 0;
}
.share-manage-item-main strong,
.share-manage-item-main span {
display: block;
}
.share-manage-item-main strong {
font-size: 16px;
color: var(--color-text);
}
.share-manage-item-main span {
margin-top: 6px;
font-size: 12px;
color: var(--color-text-muted);
word-break: break-all;
line-height: 1.6;
}
.share-manage-target {
margin-top: 8px;
color: var(--color-primary-dark) !important;
font-weight: 700;
}
.modal-overlay {
position: fixed;
inset: 0;
z-index: 2200;
display: none;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.38);
padding: 20px;
}
.modal-content {
width: min(100%, 440px);
max-width: 440px;
max-height: calc(100vh - 40px);
padding: 22px;
border-radius: 20px;
border: 1px solid var(--color-border);
background: var(--color-surface);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
box-sizing: border-box;
overflow: auto;
}
.modal-content h3 {
margin: 0 0 10px;
font-size: 22px;
color: var(--color-text);
}
.modal-content p {
margin: 0;
color: var(--color-text-muted);
line-height: 1.8;
white-space: pre-line;
overflow-wrap: anywhere;
word-break: break-word;
}
.modal-content .form-control,
.modal-content input[type="text"] {
width: 100%;
height: 44px;
margin-top: 14px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid var(--color-border);
background: var(--color-background);
color: var(--color-text);
font: inherit;
box-sizing: border-box;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 18px;
}
.modal-actions .btn {
height: 40px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.modal-actions .btn-primary {
background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 72%, #0f766e));
color: #fff;
border-color: transparent;
}
.share-manage-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.share-manage-badge {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-background) 88%, white 12%);
color: var(--color-text-muted);
font-size: 12px;
font-weight: 700;
}
.share-manage-badge.is-active {
border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
color: var(--color-primary-dark);
background: color-mix(in srgb, var(--color-primary-light) 34%, white 66%);
}
.share-manage-badge.is-inactive {
border-color: rgba(239, 68, 68, 0.28);
color: #b91c1c;
background: rgba(254, 242, 242, 0.95);
}
.share-manage-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 14px;
font-size: 12px;
color: var(--color-text-muted);
}
.share-manage-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.share-manage-editor {
padding: 18px;
border-radius: 24px;
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary-light) 36%, transparent), transparent 36%),
linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 96%, white 4%), var(--color-surface));
}
.share-manage-editor-head strong,
.share-manage-editor-head span {
display: block;
}
.share-manage-editor-head strong {
font-size: 18px;
color: var(--color-text);
}
.share-manage-editor-head span {
margin-top: 6px;
font-size: 12px;
color: var(--color-text-muted);
line-height: 1.7;
word-break: break-all;
}
.app-toast {
position: fixed !important;
right: 24px !important;
bottom: 24px !important;
left: auto !important;
top: auto !important;
width: auto !important;
height: auto !important;
z-index: 9999 !important;
min-width: 280px !important;
max-width: 420px !important;
min-height: auto !important;
max-height: 300px !important;
padding: 16px 20px !important;
margin: 0 !important;
border-radius: 12px !important;
background: var(--color-surface) !important;
color: var(--color-text) !important;
border: 1px solid var(--color-border) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
display: none !important;
font-size: 15px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
word-wrap: break-word !important;
overflow: auto !important;
pointer-events: auto !important;
box-sizing: border-box !important;
}
.app-toast.show {
display: block !important;
animation: slideInUp 0.3s ease;
}
.app-toast.success {
background: var(--color-primary-light) !important;
color: var(--color-primary-dark) !important;
border-color: var(--color-primary) !important;
border-width: 2px !important;
}
.app-toast.error {
background: rgba(239, 68, 68, 0.15) !important;
color: #dc2626 !important;
border-color: #fca5a5 !important;
border-width: 2px !important;
}
@media (max-width: 860px) {
.share-modal {
width: min(100%, 720px);
}
.share-form {
grid-template-columns: 1fr;
}
.share-form-footer,
.share-result-hero,
.share-manage-head,
.share-manage-editor-head {
flex-direction: column;
align-items: flex-start;
}
.share-result-layout {
grid-template-columns: 1fr;
}
.share-manage-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.share-manage-item-head {
flex-direction: column;
}
.share-manage-badges {
justify-content: flex-start;
}
}
.app-toast.info {
background: var(--color-primary-light) !important;
color: var(--color-primary-dark) !important;
border-color: var(--color-primary) !important;
border-width: 2px !important;
}
@keyframes slideInUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.listing-nav a {
padding: 10px 15px;
border-radius: 8px;
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
box-shadow: 0 2px 4px var(--color-shadow);
transition: background-color 0.2s, box-shadow 0.2s;
}
.listing-nav a:hover {
background: var(--color-primary-light);
box-shadow: 0 4px 8px var(--color-shadow);
}
.listing-grid {
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 22px;
align-items: start;
}
.post-list-card {
padding: 0;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-surface);
box-shadow: 0 4px 12px var(--color-shadow);
overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.post-list-card:hover {
transform: translateY(-2px);
border-color: var(--color-primary-medium);
box-shadow: 0 8px 24px var(--color-shadow);
}
.post-list-cover {
width: 100%;
height: 188px;
background: linear-gradient(135deg, var(--color-primary-medium), var(--color-primary-medium));
background-size: cover;
background-position: center;
}
.post-list-inner {
padding: 20px 22px 22px;
}
.post-list-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
color: var(--color-text-muted);
font-size: 13px;
margin-bottom: 12px;
}
.post-list-meta span,
.post-list-meta a {
display: inline-flex;
align-items: center;
gap: 6px;
color: inherit;
text-decoration: none;
}
.post-list-card h3 {
margin: 0 0 12px;
font-size: 25px;
line-height: 1.22;
color: var(--color-text);
letter-spacing: -0.02em;
}
.post-list-card h3 a {
color: var(--color-text);
text-decoration: none;
}
.post-list-card h3 a:hover {
color: var(--color-primary);
}
.post-list-card p {
margin: 0;
color: var(--color-text-muted);
line-height: 1.75;
font-size: 15px;
}
.post-list-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.post-list-tags a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 8px;
background: var(--color-primary-light);
color: var(--color-primary);
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: background-color 0.2s;
}
.post-list-tags a:hover {
background: var(--color-primary-medium);
}
.read-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
transition: color 0.2s;
}
.read-link:hover {
color: var(--color-primary-dark);
}
.archive-group-list {
max-width: 960px;
margin: 0 auto;
display: grid;
gap: 18px;
}
.archive-group-card {
padding: 22px;
border: 1px solid var(--color-border);
border-radius: 20px;
background: var(--color-surface);
}
.archive-group-card h3 {
margin: 0 0 12px;
font-size: 24px;
}
.archive-item-link {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 12px 0;
border-bottom: 1px dashed var(--color-border);
color: var(--color-text-muted);
text-decoration: none;
}
.archive-item-link:last-child {
border-bottom: none;
}
.side-panel-block { padding: 0 20px 18px; }
.side-panel-block + .side-panel-block { border-top: 1px solid var(--color-background); padding-top: 18px; }
.side-panel-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.side-panel-tags a { padding: 8px 12px; border-radius: 999px; background: var(--color-primary-light); color: #0f766e; text-decoration: none; font-size: 13px; font-weight: 700; }
.empty-listing { max-width: 960px; margin: 0 auto; padding: 28px; border: 1px dashed var(--color-border); border-radius: 18px; color: var(--color-text-muted); background: var(--color-surface); }
.pagination-bar {
max-width: 960px;
margin: 22px auto 0;
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.pagination-bar a,
.pagination-bar span {
padding: 10px 14px;
border-radius: 12px;
border: 1px solid #e5d7bc;
background: var(--color-surface);
color: #8c5a22;
text-decoration: none;
font-weight: 700;
}
.pagination-bar .current {
background: #c66a2d;
border-color: #c66a2d;
color: var(--color-surface);
}
.context-menu {
position: fixed;
z-index: 1250;
min-width: 180px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 14px;
box-shadow: 0 18px 36px var(--color-shadow);
padding: 8px;
display: none;
}
.context-menu.show { display: block; }
.context-menu button {
width: 100%;
text-align: left;
border: none;
background: transparent;
padding: 10px 12px;
border-radius: 10px;
color: var(--color-text-muted);
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.context-menu button:hover {
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
.mention-wrap { position: relative; }
.mention-suggestions {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 40;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
box-shadow: 0 14px 28px rgba(15,23,42,.12);
display: none;
overflow: hidden;
}
.mention-suggestions.show { display: block; }
.mention-item {
width: 100%;
text-align: left;
border: none;
background: var(--color-surface);
padding: 10px 12px;
cursor: pointer;
display: block;
}
.mention-item:hover { background: var(--color-background); }
mark.search-hit {
background: linear-gradient(180deg, rgba(255, 232, 166, 0.18), rgba(255, 217, 102, 0.68));
color: inherit;
padding: 0 2px;
border-radius: 4px;
}
@media (max-width: 760px) {
.post-nav {
grid-template-columns: 1fr;
}
.listing-grid {
grid-template-columns: 1fr;
}
.listing-hero h1,
.archive-hero h1 {
font-size: 34px;
}
}
.site-footer {
max-width: 1000px;
margin: 28px auto 0;
padding: 18px 22px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-background);
color: var(--color-text-muted);
font-size: 14px;
line-height: 1.7;
}
.icon-inline {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: -3px;
flex: 0 0 auto;
opacity: 0.9;
}
.sidebar-nav a {
display: flex;
align-items: center;
}
.tree-row button.toggle svg {
width: 16px;
height: 16px;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
color: var(--color-text);
border-bottom: 1px solid #eee;
padding-bottom: 0.3em;
margin-top: 1.5em;
}
.markdown-body pre {
background-color: var(--color-background);
padding: 16px;
border-radius: 6px;
overflow-x: auto;
border: 1px solid var(--color-border);
}
.markdown-body code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
background-color: var(--color-background);
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 85%;
color: #e83e8c;
}
.markdown-body pre code {
background-color: transparent;
padding: 0;
color: inherit;
font-size: 90%;
}
.markdown-body blockquote {
border-left: 4px solid var(--color-primary);
margin: 0 0 16px 0;
padding: 0 15px;
color: var(--color-text-muted);
background-color: var(--color-background);
padding-top: 10px;
padding-bottom: 10px;
border-radius: 0 4px 4px 0;
}
.markdown-body img {
max-width: 100%;
border-radius: 6px;
}
.markdown-body .doc-image-link {
display: inline-block;
text-decoration: none;
line-height: 0;
cursor: zoom-in;
}
.markdown-body .doc-image-link img {
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 8px 18px var(--color-shadow);
}
.markdown-body .doc-image-link:hover img {
transform: translateY(-2px);
box-shadow: 0 14px 28px var(--color-shadow);
}
.editor-note {
margin-top: 10px;
color: var(--color-text-muted);
font-size: 13px;
}
.meta-panel {
margin: 12px 0 16px;
padding: 16px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-background);
display: none;
}
.meta-panel.show {
display: block;
}
.meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.meta-grid label {
display: block;
margin-bottom: 6px;
font-size: 13px;
color: var(--color-text-muted);
font-weight: 700;
}
.meta-grid input,
.meta-grid textarea,
.meta-grid select {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--color-border);
font: inherit;
box-sizing: border-box;
background: var(--color-surface);
}
.meta-grid input.is-valid {
border-color: rgba(15, 118, 110, 0.45);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
}
.meta-grid input.is-invalid {
border-color: rgba(190, 24, 93, 0.45);
box-shadow: 0 0 0 3px rgba(190, 24, 93, 0.08);
}
.meta-grid textarea {
resize: vertical;
min-height: 92px;
}
.meta-field-hint {
margin-top: 6px;
color: var(--color-text-muted);
font-size: 12px;
line-height: 1.55;
}
.meta-field-hint.is-success {
color: #0f766e;
}
.meta-field-hint.is-error {
color: #be123c;
}
.meta-field-hint.is-warning {
color: #b45309;
}
.meta-slug-suggestion {
display: inline;
padding: 0;
border: none;
background: transparent;
color: currentColor;
font: inherit;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}
.meta-slug-suggestion:hover {
opacity: 0.82;
}
.meta-grid .full {
grid-column: 1 / -1;
}
.meta-checks {
display: flex;
gap: 18px;
flex-wrap: wrap;
padding-top: 8px;
}
.meta-checks label {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-weight: 600;
}
.meta-panel-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 14px;
}
@media (max-width: 760px) {
.meta-grid {
grid-template-columns: 1fr;
}
}
.markdown-body table {
border-collapse: collapse;
width: 100%;
margin-bottom: 16px;
}
.markdown-body table th,
.markdown-body table td {
border: 1px solid var(--color-border);
padding: 8px 12px;
}
.markdown-body table th {
background-color: var(--color-background);
font-weight: 600;
}
.markdown-body table th {
background-color: var(--color-background);
font-weight: 600;
}
.markdown-body a {
color: var(--color-primary);
text-decoration: none;
}
.markdown-body a:hover {
text-decoration: underline;
}
.directory-landing {
display: grid;
gap: 24px;
}
.directory-hero {
position: relative;
overflow: hidden;
padding: 24px;
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
border-radius: 24px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary-light) 70%, transparent), transparent 42%),
linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 92%, white 8%), var(--color-surface));
box-shadow: 0 16px 36px var(--color-shadow);
}
.directory-hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.directory-badge,
.directory-browser-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
}
.directory-badge {
color: var(--color-primary-dark);
background: color-mix(in srgb, var(--color-primary-light) 78%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.directory-hero h2 {
margin: 14px 0 10px;
font-size: clamp(18px, 2.4vw, 26px);
line-height: 1.35;
font-weight: 800;
color: var(--color-text);
}
.directory-hero h2 code {
padding: 2px 8px;
border-radius: 8px;
background: color-mix(in srgb, var(--color-background) 76%, transparent);
color: var(--color-primary-dark);
font-size: 0.88em;
}
.directory-hero p {
margin: 0;
max-width: 760px;
color: var(--color-text-muted);
line-height: 1.75;
font-size: 14px;
}
.directory-upload-hint {
margin-top: 8px;
}
.directory-hero-actions {
display: flex;
gap: 12px;
margin-top: 16px;
}
.directory-hero-actions .btn {
font-size: 13px;
padding: 8px 16px;
}
.directory-stats {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 16px;
margin-top: 0;
}
.directory-stat {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
cursor: default;
}
.directory-stat strong {
font-size: 15px;
font-weight: 800;
color: var(--color-text);
line-height: 1;
}
.directory-stat::before {
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 6px);
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(15, 23, 42, 0.92);
opacity: 0;
pointer-events: none;
transition: opacity 0.16s ease, transform 0.16s ease;
}
.directory-stat::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 16px);
transform: translateX(-50%);
padding: 7px 10px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.92);
color: #fff;
font-size: 12px;
line-height: 1;
white-space: nowrap;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
opacity: 0;
pointer-events: none;
transition: opacity 0.16s ease, transform 0.16s ease;
z-index: 2;
}
.directory-stat:hover::before,
.directory-stat:hover::after,
.directory-stat:focus-visible::before,
.directory-stat:focus-visible::after {
opacity: 1;
transform: translateX(-50%) translateY(-2px);
}
.directory-stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 10px;
background: color-mix(in srgb, var(--color-primary-light) 66%, transparent);
color: var(--color-primary-dark) !important;
flex: 0 0 auto;
}
.directory-stat-icon svg,
.directory-stat-icon i {
width: 14px;
height: 14px;
}
.directory-browser {
padding: 22px;
border: 1px solid var(--color-border);
border-radius: 24px;
background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 96%, white 4%), var(--color-surface));
box-shadow: 0 12px 28px var(--color-shadow);
}
.directory-browser-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.directory-browser-header h3 {
margin: 0 0 6px;
font-size: 18px;
color: var(--color-text);
}
.directory-browser-header p {
margin: 0;
color: var(--color-text-muted);
font-size: 14px;
}
.directory-browser-badge {
color: var(--color-text-muted);
background: color-mix(in srgb, var(--color-background) 76%, transparent);
border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
white-space: nowrap;
}
.directory-browser-tree {
display: grid;
gap: 12px;
}
.directory-node {
margin-left: calc(var(--directory-depth, 0) * 18px);
}
.directory-node-dir {
display: block;
}
.directory-node + .directory-node,
.directory-node-children {
margin-top: 12px;
}
.markdown-body .directory-node-link,
.markdown-body .directory-node-file {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-surface) 95%, white 5%);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
box-sizing: border-box;
text-decoration: none !important;
}
.markdown-body .directory-node-link:hover,
.markdown-body .directory-node-file:hover {
transform: translateY(-1px);
text-decoration: none !important;
border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
background: color-mix(in srgb, var(--color-primary-light) 26%, var(--color-surface));
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}
.directory-node-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 14px;
color: var(--color-primary-dark);
background: color-mix(in srgb, var(--color-primary-light) 78%, transparent);
flex: 0 0 auto;
}
.directory-node-main {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1 1 auto;
}
.directory-node-main strong {
color: var(--color-text);
font-size: 14px;
line-height: 1.4;
word-break: break-word;
}
.directory-node-main span {
color: var(--color-text-muted);
font-size: 12px;
line-height: 1.5;
}
.directory-node-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
flex: 0 0 auto;
}
.directory-node-children {
padding-left: 18px;
border-left: 1px dashed color-mix(in srgb, var(--color-border) 82%, transparent);
}
@media (max-width: 900px) {
.directory-hero,
.directory-browser {
padding: 20px;
border-radius: 20px;
}
.directory-hero-top {
flex-direction: column;
align-items: flex-start;
}
.directory-hero h2 {
font-size: 18px;
}
.directory-stats {
justify-content: flex-start;
gap: 12px;
}
.directory-browser-header {
flex-direction: column;
}
.directory-node {
margin-left: calc(var(--directory-depth, 0) * 10px);
}
.directory-node-link,
.directory-node-file {
padding: 14px 15px;
}
.directory-node-children {
padding-left: 12px;
}
}
/* 右侧目录树 (TOC) */
.toc-container {
grid-area: toc;
width: auto;
min-width: 0;
min-height: 0;
background-color: var(--color-surface);
border-left: 1px solid var(--color-border);
padding: 20px 0;
overflow-y: auto;
box-shadow: -2px 0 5px var(--color-shadow);
font-size: 0.9em;
}
.toc-container h3 {
padding: 0 20px 10px 20px;
margin-top: 0;
color: var(--color-text);
font-size: 1.1em;
border-bottom: 1px solid var(--color-border);
}
.toc-container .toc {
padding: 0 20px;
margin: 0;
}
.toc-container .toc ul {
list-style: none;
padding-left: 15px;
margin: 5px 0;
}
/* 顶级ul不缩进 */
.toc-container>.toc>ul {
padding-left: 0;
}
.toc-container .toc a {
display: block;
color: var(--color-text-muted);
text-decoration: none;
padding: 4px 0;
transition: color 0.2s;
line-height: 1.4;
}
.toc-container .toc a:hover {
color: var(--color-primary);
}
.toc-container .toc a.active {
color: var(--color-primary);
font-weight: 600;
}
/* Pygments Code Highlight Base styles */
.codehilite .hll {
background-color: var(--color-surface)fcc
}
.codehilite .c {
color: var(--color-text-muted)
}
/* Comment */
.codehilite .k {
color: #d73a49
}
/* Keyword */
.codehilite .o {
color: #d73a49
}
/* Operator */
.codehilite .s {
color: #032f62
}
/* String */
.codehilite .m {
color: #005cc5
}
/* Number */
.codehilite .n {
color: var(--color-text)
}
/* Name */
.codehilite .nf {
color: #6f42c1
}
/* Name.Function */
.codehilite .nc {
color: #6f42c1
}
/* Name.Class */
.codehilite .nb {
color: #005cc5
}
/* Name.Builtin */
.codehilite .nd {
color: #d73a49
}
/* Name.Decorator */
.codehilite .ni {
color: var(--color-text)
}
/* Name.Entity */
.codehilite .ne {
color: #d73a49
}
/* Name.Exception */
.codehilite .nn {
color: var(--color-text)
}
/* Name.Namespace */
.codehilite .nx {
color: var(--color-text)
}
/* Name.Other */
.codehilite .py {
color: #e36209
}
/* Name.Property */
.codehilite .nt {
color: #22863a
}
/* Name.Tag */
.codehilite .nv {
color: #e36209
}
/* Name.Variable */
.codehilite .p {
color: var(--color-text)
}
/* Punctuation */
/* 移动端适配 */
.mobile-header {
display: none;
background: var(--color-background);
border-bottom: 1px solid var(--color-border);
padding: 10px 15px;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 990;
height: 56px;
box-sizing: border-box;
gap: 10px;
}
.mobile-header h2 {
margin: 0;
font-size: 1.1em;
color: var(--color-text);
}
.mobile-site-brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.mobile-site-logo {
width: 30px;
height: 30px;
border-radius: 10px;
object-fit: cover;
box-shadow: 0 4px 10px var(--color-shadow);
flex-shrink: 0;
}
.menu-btn {
background: none;
border: none;
font-size: 24px;
color: var(--color-primary);
cursor: pointer;
padding: 5px;
}
/* 移动端纯图标按钮 */
.menu-btn-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border-radius: 8px;
transition: background-color 0.2s ease;
}
.menu-btn-icon:hover,
.menu-btn-icon:active {
background: var(--color-hover);
}
.menu-btn-icon svg,
.menu-btn-icon i {
width: 22px;
height: 22px;
}
.backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-shadow);
z-index: 998;
}
@media (max-width: 900px) {
.app-shell {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
grid-template-areas:
"mobile-header"
"content";
height: 100vh;
}
/* 移动端禁用PC端的隐藏功能 */
.app-shell.sidebar-hidden,
.app-shell.toc-hidden,
.app-shell.sidebar-hidden.toc-hidden {
grid-template-columns: minmax(0, 1fr) !important;
}
.app-shell.sidebar-hidden .sidebar,
.app-shell.toc-hidden .toc-container {
display: flex !important;
}
/* 移动端隐藏浮动按钮 */
.floating-show-btn {
display: none !important;
}
/* 移动端隐藏PC端的切换按钮 */
#toggleSidebarBtn,
#toggleTocBtn {
display: none !important;
}
.site-header {
display: none;
}
body {
overflow: hidden;
}
.mobile-header {
display: flex;
grid-area: mobile-header;
}
.sidebar {
position: fixed;
left: -100%;
top: 0;
bottom: 0;
width: 300px;
z-index: 999;
transition: left 0.3s ease;
}
.theme-selector {
top: 64px;
right: 12px;
}
.sidebar.show {
left: 0;
}
.toc-container {
position: fixed;
right: -280px;
top: 0;
bottom: 0;
width: 260px;
z-index: 999;
transition: right 0.3s ease;
}
.toc-container.show {
right: 0;
}
.content {
grid-area: content;
padding: 76px 15px 20px 15px;
}
.backdrop.show {
display: block;
}
/* 移动端文档头部和操作按钮优化 */
.document-header {
margin-bottom: 16px;
padding-bottom: 12px;
gap: 10px;
}
.global-access-status {
margin-bottom: 16px;
padding: 12px;
border-radius: 14px;
}
.global-access-status-main {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
.global-access-exit {
width: 100%;
justify-content: center;
}
.header-left {
font-size: 13px;
line-height: 1.4;
}
.header-right {
width: 100%;
}
.action-btn {
font-size: 13px;
padding: 6px 12px;
white-space: nowrap;
}
/* 移动端隐藏桌面端用户菜单 */
.user-menu-wrapper {
display: none;
}
}
/* 移动端用户菜单弹出层 */
.mobile-user-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1001;
display: none;
align-items: flex-end;
backdrop-filter: blur(4px);
}
.mobile-user-menu.show {
display: flex;
}
.mobile-user-menu-content {
width: 100%;
background: var(--color-surface);
border-radius: 16px 16px 0 0;
padding: 20px;
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.mobile-user-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.mobile-user-menu-header span {
font-size: 16px;
font-weight: 600;
color: var(--color-text);
}
.mobile-user-menu-close {
background: transparent;
border: none;
padding: 4px;
cursor: pointer;
color: var(--color-text-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.mobile-user-menu-body {
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-user-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 8px;
color: var(--color-text);
text-decoration: none;
font-size: 15px;
transition: background-color 0.15s ease;
}
.mobile-user-menu-item:hover {
background: var(--color-hover);
}
.mobile-user-menu-item-danger {
color: #dc2626;
}
.mobile-user-menu-item-danger:hover {
background: rgba(220, 38, 38, 0.1);
}
.mobile-user-menu-divider {
margin: 8px 0;
border: none;
border-top: 1px solid var(--color-border);
}
.public-posts-modal {
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(15, 23, 42, 0.38);
z-index: 1600;
}
.public-posts-dialog {
width: min(1120px, calc(100vw - 32px));
max-height: min(88vh, 920px);
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 18px;
box-shadow: 0 20px 56px rgba(15, 23, 42, 0.18);
}
.public-posts-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 18px 12px;
border-bottom: 1px solid var(--color-border);
}
.public-posts-kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 4px;
}
.public-posts-header h3 {
margin: 0;
font-size: 20px;
line-height: 1.15;
}
.public-posts-header p {
margin: 6px 0 0;
color: var(--color-text-muted);
font-size: 12px;
}
.public-posts-header-actions {
display: flex;
align-items: center;
gap: 6px;
}
.public-posts-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 8px;
padding: 10px 18px 8px;
border-bottom: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-surface) 92%, var(--color-background));
}
.public-posts-search,
.public-posts-sort,
.public-posts-filter {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-surface);
padding: 0 10px;
color: var(--color-text-secondary);
font-size: 12px;
font-weight: 600;
}
.public-posts-search input,
.public-posts-sort select {
border: none;
outline: none;
background: transparent;
color: var(--color-text);
font: inherit;
width: 100%;
}
.public-posts-sort select {
width: auto;
min-width: 108px;
cursor: pointer;
}
.public-posts-filter input {
margin: 0;
}
.public-posts-dialog .btn {
min-height: 34px;
padding: 0 10px;
border-radius: 9px;
font-size: 12px;
font-weight: 700;
}
.public-posts-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px 18px 4px;
}
.public-posts-stat {
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 6px 10px;
background: color-mix(in srgb, var(--color-surface) 92%, var(--color-background));
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.public-posts-stat strong {
display: inline;
font-size: 13px;
color: var(--color-text);
margin: 0;
}
.public-posts-stat span {
display: inline;
color: var(--color-text-muted);
font-size: 11px;
white-space: nowrap;
}
.public-posts-status {
padding: 4px 18px 8px;
color: var(--color-text-muted);
font-size: 12px;
}
.public-posts-timeline {
flex: 1 1 auto;
overflow: auto;
padding: 2px 18px 18px;
}
.public-posts-group {
position: relative;
padding-left: 20px;
}
.public-posts-group + .public-posts-group {
margin-top: 12px;
}
.public-posts-group::before {
content: '';
position: absolute;
left: 6px;
top: 42px;
bottom: 0;
width: 2px;
background: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
}
.public-posts-group:last-child::before {
bottom: 10px;
}
.public-posts-group-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.public-posts-group-kicker {
margin: 0 0 2px;
font-size: 10px;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.public-posts-group-head h4 {
margin: 0;
font-size: 15px;
}
.public-posts-group-head > span {
font-size: 11px;
font-weight: 700;
color: var(--color-primary-dark);
background: var(--color-primary-light);
padding: 4px 8px;
border-radius: 999px;
}
.public-posts-group-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.public-posts-item {
position: relative;
display: flex;
gap: 8px;
}
.public-posts-item-line {
flex: 0 0 12px;
position: relative;
}
.public-posts-item-line::before {
content: '';
position: absolute;
left: -1px;
top: 14px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--color-surface);
background: var(--color-primary);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}
.public-posts-item-body {
flex: 1 1 auto;
min-width: 0;
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-surface);
padding: 10px 12px;
}
.public-posts-item.is-current .public-posts-item-body {
border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.public-posts-item-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.public-posts-item-date {
font-size: 11px;
font-weight: 700;
color: var(--color-text-muted);
}
.public-posts-item-actions {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.public-posts-item-title {
margin: 0 0 6px;
font-size: 15px;
line-height: 1.3;
}
.public-posts-item-title a {
color: var(--color-text);
text-decoration: none;
}
.public-posts-item-title a:hover {
color: var(--color-primary-dark);
}
.public-posts-item-status {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.public-posts-visibility-badge {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 24px;
padding: 0 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
background: color-mix(in srgb, var(--color-surface) 94%, var(--color-background));
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
.public-posts-visibility-badge.is-public {
color: #166534;
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.22);
}
.public-posts-visibility-badge.is-private {
color: #9a3412;
background: rgba(249, 115, 22, 0.12);
border-color: rgba(249, 115, 22, 0.22);
}
.public-posts-visibility-badge.is-blog {
color: #0f766e;
background: rgba(20, 184, 166, 0.12);
border-color: rgba(20, 184, 166, 0.2);
}
.public-posts-visibility-badge.is-doc {
color: #1d4ed8;
background: rgba(59, 130, 246, 0.11);
border-color: rgba(59, 130, 246, 0.18);
}
.public-posts-item-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
margin-bottom: 6px;
color: var(--color-text-muted);
font-size: 11px;
}
.public-posts-item-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.public-posts-item-summary {
margin: 0;
color: var(--color-text-secondary);
font-size: 12px;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.public-posts-readonly-badge {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 10px;
border-radius: 8px;
background: color-mix(in srgb, var(--color-background) 78%, var(--color-surface));
color: var(--color-text-muted);
font-size: 11px;
font-weight: 700;
}
.public-posts-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 900px) {
.public-posts-modal {
padding: 10px;
}
.public-posts-dialog {
width: min(100vw - 16px, 100%);
max-height: calc(100vh - 24px);
border-radius: 16px;
}
.public-posts-header,
.public-posts-toolbar,
.public-posts-summary,
.public-posts-status,
.public-posts-timeline {
padding-left: 12px;
padding-right: 12px;
}
.public-posts-header,
.public-posts-item-top {
flex-direction: column;
}
.public-posts-toolbar,
.public-posts-summary {
grid-template-columns: 1fr;
}
.public-posts-item-actions {
justify-content: flex-start;
}
.public-posts-group {
padding-left: 14px;
}
.public-posts-item-line {
flex-basis: 6px;
}
}