301194963b
一些检查失败了
automerge / automerge (push) Has been cancelled
react-native-android-build-apk / AssembleRelease (push) Has been cancelled
Build macOS M1 / Main (push) Has been cancelled
Joplin Continuous Integration / Main (macos-15-intel) (push) Has been cancelled
Joplin Continuous Integration / Main (ubuntu-22.04) (push) Has been cancelled
Joplin Continuous Integration / Main (ubuntu-22.04-arm) (push) Has been cancelled
Joplin Continuous Integration / Main (windows-11-vs2026-arm) (push) Has been cancelled
Joplin Continuous Integration / Main (windows-2025) (push) Has been cancelled
Joplin Continuous Integration / ServerDockerImage (ubuntu-22.04) (push) Has been cancelled
Joplin Continuous Integration / ServerDockerImage (ubuntu-22.04-arm) (push) Has been cancelled
Joplin UI tests / Main (ubuntu-22.04) (push) Has been cancelled
Joplin UI tests / Main (windows-2025) (push) Has been cancelled
Joplin UI tests / Mobile (push) Has been cancelled
Close stale issues / ProcessStaleIssues (push) Has been cancelled
894 行
22 KiB
SCSS
894 行
22 KiB
SCSS
// 中式极简版式重构层
|
||
//
|
||
// 目标：把「控件的堆叠」改成「内容的分层」。
|
||
// 具体手法——去掉所有可见描边，用留白与极淡分隔线建立层次；
|
||
// 交互反馈改为背景填充而非边框变化；图标统一 16px 与 1em 尺寸节奏。
|
||
// 只覆盖视觉，不改动布局结构与交互逻辑。
|
||
|
||
:root {
|
||
--cn-space-1: 4px;
|
||
--cn-space-2: 8px;
|
||
--cn-space-3: 12px;
|
||
--cn-space-4: 16px;
|
||
--cn-space-6: 24px;
|
||
--cn-icon-sm: 14px;
|
||
--cn-icon-md: 16px;
|
||
--cn-icon-lg: 18px;
|
||
--cn-control-h: 32px;
|
||
}
|
||
|
||
/* =========================================================================
|
||
侧边栏顶部按钮（折叠全部 / 新建笔记本 / 同步）
|
||
|
||
原生实现靠 padding 定位图标，这里改为等尺寸方形热区，
|
||
三个按钮沿标题行右缘等距排列。
|
||
========================================================================= */
|
||
|
||
.sidebar-header-button {
|
||
position: absolute;
|
||
top: 1px;
|
||
width: 26px;
|
||
height: 26px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: 4px;
|
||
background-color: transparent;
|
||
color: var(--joplin-color2);
|
||
opacity: 0.62;
|
||
|
||
> i {
|
||
font-size: 15px;
|
||
}
|
||
|
||
&:hover:not(:disabled) {
|
||
background-color: var(--joplin-background-color-hover2);
|
||
opacity: 1;
|
||
}
|
||
|
||
&:active:not(:disabled) {
|
||
background-color: var(--joplin-background-color-hover2);
|
||
opacity: 1;
|
||
}
|
||
|
||
&:disabled {
|
||
opacity: 0.25;
|
||
}
|
||
|
||
// 从右向左：同步（最常用）→ 显示笔记列表 → 新建笔记本 → 折叠全部
|
||
&.-sync {
|
||
inset-inline-end: var(--cn-space-1);
|
||
}
|
||
|
||
&.-toggle-note-list {
|
||
inset-inline-end: 34px;
|
||
}
|
||
|
||
&.-newfolder {
|
||
inset-inline-end: 64px;
|
||
}
|
||
|
||
&.-collapseall {
|
||
inset-inline-end: 94px;
|
||
}
|
||
|
||
// 同步进行中：图标持续旋转
|
||
&.-sync.-syncing > i {
|
||
animation: icon-infinite-rotation 1s linear infinite;
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
animation: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* =========================================================================
|
||
侧边栏：墨色面板
|
||
|
||
层级靠字重与明度区分，而不是靠圆角卡片：
|
||
分组标题（小、淡、带字距）→ 列表项（正常、较亮）→ 选中（仅底色 + 左侧细线）。
|
||
========================================================================= */
|
||
|
||
.sidebar {
|
||
// 列表项：通栏、无圆角、无动效——贴近原生桌面应用的克制
|
||
.list-item-wrapper {
|
||
height: 32px;
|
||
margin: 0;
|
||
padding-left: var(--cn-space-3);
|
||
padding-right: var(--cn-space-3);
|
||
border-radius: 0;
|
||
gap: 10px;
|
||
|
||
// 图标压暗一档，让文字成为主体
|
||
i,
|
||
[class^='icon-'],
|
||
[class*=' icon-'] {
|
||
font-size: 15px;
|
||
width: 15px;
|
||
opacity: 0.62;
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
> .list-item,
|
||
> span {
|
||
font-size: 13px;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
|
||
&.-selected {
|
||
background-color: var(--joplin-selected-color2);
|
||
box-shadow: inset 2px 0 0 var(--joplin-color2);
|
||
|
||
i,
|
||
[class^='icon-'],
|
||
[class*=' icon-'] {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
&.-highlight-on-hover:not(.-selected):hover {
|
||
background-color: var(--joplin-background-color-hover2);
|
||
}
|
||
}
|
||
|
||
// 分组标题（笔记本 / 标签）：小字号 + 字距，作为静默的层级标记。
|
||
// 写在列表项之后，确保同特异性下优先。
|
||
.sidebar-header-container {
|
||
height: 28px;
|
||
margin-top: var(--cn-space-4);
|
||
padding-left: var(--cn-space-3);
|
||
padding-right: var(--cn-space-3);
|
||
gap: 10px;
|
||
background: none;
|
||
cursor: default;
|
||
|
||
&:first-child {
|
||
margin-top: var(--cn-space-2);
|
||
}
|
||
|
||
i,
|
||
[class^='icon-'],
|
||
[class*=' icon-'] {
|
||
font-size: 13px;
|
||
width: 13px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
> span {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
color: var(--joplin-color-faded2);
|
||
}
|
||
|
||
&:hover {
|
||
background: none;
|
||
}
|
||
|
||
button,
|
||
.icon-button,
|
||
.toolbar-button {
|
||
border: none !important;
|
||
background: transparent;
|
||
border-radius: 4px;
|
||
color: var(--joplin-color2);
|
||
height: 24px;
|
||
width: 24px;
|
||
opacity: 0.6;
|
||
|
||
&:hover {
|
||
background-color: var(--joplin-background-color-hover2) !important;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 同步报告展开箭头：贴右的小图标，不再居中孤立
|
||
.sync-report-toggle {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
width: 100%;
|
||
background: none;
|
||
border: none;
|
||
padding: 0 var(--cn-space-1);
|
||
margin-bottom: var(--cn-space-2);
|
||
cursor: pointer;
|
||
opacity: 0.4;
|
||
|
||
&:hover {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
i {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* =========================================================================
|
||
笔记列表：填充式搜索框 + 幽灵按钮 + 去分隔线的行
|
||
========================================================================= */
|
||
|
||
// 顶部工具区（新建笔记 / 新建待办 / 搜索 / 排序）
|
||
// 这些控件由 styled-components 注入样式，需要提高特异性覆盖。
|
||
.new-note-todo-buttons,
|
||
.search-and-sort {
|
||
align-items: center;
|
||
gap: var(--cn-space-2);
|
||
}
|
||
|
||
.new-note-todo-buttons {
|
||
flex-shrink: 0;
|
||
|
||
button {
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.search-and-sort {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
.new-note-todo-buttons button,
|
||
.sort-order-field-button,
|
||
.sort-order-reverse-button {
|
||
border: none !important;
|
||
background-color: transparent !important;
|
||
border-radius: var(--cn-radius) !important;
|
||
color: var(--joplin-color3) !important;
|
||
height: 32px !important;
|
||
min-height: 32px !important;
|
||
max-height: 32px !important;
|
||
min-width: 32px !important;
|
||
padding: 0 var(--cn-space-2) !important;
|
||
|
||
|
||
// 图标尺寸与线性图标体系对齐（原为 11px）
|
||
.fa,
|
||
.fas,
|
||
[class^='icon-'],
|
||
[class*=' icon-'] {
|
||
font-size: var(--cn-icon-md) !important;
|
||
}
|
||
|
||
&:hover:not(:disabled) {
|
||
background-color: var(--joplin-background-color-hover3) !important;
|
||
color: var(--joplin-color) !important;
|
||
}
|
||
|
||
&:disabled {
|
||
opacity: 0.38;
|
||
}
|
||
}
|
||
|
||
// styled-components 把按钮内图标与标题的颜色单独写在子元素上（Primary 为白色），
|
||
// 只覆盖 button 的 color 不会生效，必须让子元素继承。
|
||
// 「新建笔记」是列表区的主操作，这里做成实心按钮：
|
||
// 浅色主题深底浅字、暗色主题浅底深字，跟随主题自动反色，保证任何主题下都清晰可辨。
|
||
.new-note-todo-buttons button.new-note-button {
|
||
background-color: var(--joplin-color) !important;
|
||
color: var(--joplin-background-color) !important;
|
||
padding: 0 var(--cn-space-3) !important;
|
||
|
||
> span {
|
||
color: inherit !important;
|
||
}
|
||
|
||
// 特异性需高于上面的幽灵按钮 hover 规则，否则 hover 会被改回透明底
|
||
&:hover:not(:disabled),
|
||
&:active:not(:disabled) {
|
||
background-color: var(--joplin-color) !important;
|
||
color: var(--joplin-background-color) !important;
|
||
opacity: 0.86;
|
||
}
|
||
}
|
||
|
||
.note-list-header {
|
||
padding: var(--cn-space-2) var(--cn-space-3);
|
||
gap: var(--cn-space-2);
|
||
background-color: var(--joplin-background-color3);
|
||
border-bottom: 1px solid var(--joplin-divider-color);
|
||
|
||
// 表头排序按钮：静默的标签，不是控件
|
||
> .item {
|
||
> .inner > .titlewrapper > .title,
|
||
button {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.03em;
|
||
color: var(--joplin-color3);
|
||
border: none;
|
||
background: transparent;
|
||
padding: 0 var(--cn-space-1);
|
||
|
||
&:hover {
|
||
color: var(--joplin-color);
|
||
}
|
||
}
|
||
|
||
> .inner > .titlewrapper > .chevron {
|
||
top: 6px;
|
||
right: 2px;
|
||
font-size: 9px;
|
||
}
|
||
}
|
||
|
||
// 右侧操作按钮（日历、上传等）：幽灵方形按钮
|
||
button,
|
||
.icon-button,
|
||
.toolbar-button {
|
||
border: none !important;
|
||
background: transparent;
|
||
border-radius: var(--cn-radius);
|
||
color: var(--joplin-color3);
|
||
height: 30px;
|
||
width: 30px;
|
||
min-width: 30px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
|
||
&:hover {
|
||
background-color: var(--joplin-background-color-hover3) !important;
|
||
color: var(--joplin-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-input {
|
||
// styled-components 注入了 max-height: 26px，需覆盖才能拿到舒适的行高
|
||
> .field {
|
||
height: 34px !important;
|
||
max-height: 34px !important;
|
||
box-sizing: border-box;
|
||
border: 1px solid var(--joplin-divider-color);
|
||
border-radius: var(--cn-radius);
|
||
background-color: transparent;
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
font-size: 13px;
|
||
color: var(--joplin-color);
|
||
|
||
&::placeholder {
|
||
color: var(--joplin-color-faded);
|
||
}
|
||
|
||
&:focus-visible,
|
||
&:focus {
|
||
outline: none;
|
||
border-color: var(--joplin-url-color);
|
||
background-color: transparent;
|
||
}
|
||
|
||
&.settings {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
// 放大镜移到左侧：符合中文用户的检索习惯
|
||
> .button {
|
||
right: auto;
|
||
left: 0;
|
||
width: 32px;
|
||
border-radius: var(--cn-radius);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--joplin-color-faded);
|
||
|
||
&:hover {
|
||
color: var(--joplin-color);
|
||
}
|
||
|
||
> .icon {
|
||
font-size: var(--cn-icon-sm);
|
||
color: inherit;
|
||
}
|
||
}
|
||
}
|
||
|
||
.note-list {
|
||
border-right: 1px solid var(--joplin-divider-color);
|
||
|
||
// renderer 注入的 itemCss 在运行时后加载，这里用更高特异性覆盖
|
||
.note-list-item {
|
||
// 分隔线：全宽极淡，取代 90% 宽的硬线
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 1px;
|
||
border: none;
|
||
background-color: var(--joplin-divider-color);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
&:last-child::before {
|
||
display: none;
|
||
}
|
||
|
||
> .content {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: var(--cn-space-3);
|
||
padding-right: var(--cn-space-2);
|
||
border-radius: 0;
|
||
|
||
> .item-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
min-width: 0;
|
||
flex: 1 1 0%;
|
||
gap: 3px;
|
||
|
||
> .title {
|
||
font-size: 13.5px;
|
||
font-weight: 500;
|
||
line-height: 1.35;
|
||
letter-spacing: var(--cn-letter-spacing);
|
||
display: flex;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
|
||
> .pinnedicon {
|
||
font-size: 11px;
|
||
margin-right: 5px;
|
||
color: var(--joplin-color-accent, #007aff);
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
> span {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
> .details {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
line-height: 1.3;
|
||
color: var(--joplin-color-faded);
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
|
||
> .date {
|
||
flex-shrink: 0;
|
||
font-variant-numeric: tabular-nums;
|
||
color: var(--joplin-color);
|
||
opacity: 0.75;
|
||
}
|
||
|
||
> .snippet {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
opacity: 0.65;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 选中态：左侧指示条，与侧边栏语言一致
|
||
> .content.-selected {
|
||
background-color: var(--joplin-background-color-active3);
|
||
box-shadow: inset 3px 0 0 var(--joplin-url-color);
|
||
|
||
> .item-body > .title {
|
||
font-weight: 600;
|
||
}
|
||
|
||
> .item-body > .details > .date,
|
||
> .item-body > .details > .snippet {
|
||
opacity: 0.85;
|
||
}
|
||
}
|
||
|
||
&:hover > .content,
|
||
&.-focus-visible > .content {
|
||
background-color: var(--joplin-background-color-hover3);
|
||
}
|
||
|
||
&:hover > .content.-selected,
|
||
&.-focus-visible > .content.-selected {
|
||
background-color: var(--joplin-background-color-active3);
|
||
}
|
||
}
|
||
|
||
.note-list-item-wrapper:focus-visible .note-list-item > .content {
|
||
outline: 2px solid var(--joplin-focus-outline-color);
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
// 空状态：图标 + 文案，居中留白，取代裸露的一行字
|
||
> .emptylist {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
height: 55%;
|
||
padding: var(--cn-space-6);
|
||
background-color: transparent;
|
||
// 次要信息也要满足 4.5:1，faded 色在宣纸底色上只有 3.4:1
|
||
color: var(--joplin-color3);
|
||
font-size: 12.5px;
|
||
text-align: center;
|
||
|
||
&::before {
|
||
content: '';
|
||
width: 32px;
|
||
height: 32px;
|
||
opacity: 0.22;
|
||
background-color: currentColor;
|
||
// cSpell:disable
|
||
-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
// cSpell:enable
|
||
}
|
||
}
|
||
}
|
||
|
||
/* =========================================================================
|
||
通用控件：去描边，交互用填充表达
|
||
========================================================================= */
|
||
|
||
.toolbar-button {
|
||
border-radius: var(--cn-radius);
|
||
color: var(--joplin-color3);
|
||
|
||
|
||
&:hover:not(.disabled) {
|
||
background-color: var(--joplin-background-color-hover3);
|
||
color: var(--joplin-color);
|
||
}
|
||
|
||
&.disabled {
|
||
opacity: 0.38;
|
||
}
|
||
|
||
&:focus-visible {
|
||
outline: 1px solid var(--joplin-focus-outline-color);
|
||
outline-offset: -1px;
|
||
}
|
||
}
|
||
|
||
.icon-button {
|
||
width: var(--cn-control-h);
|
||
height: var(--cn-control-h);
|
||
padding: 0 !important;
|
||
border-radius: var(--cn-radius);
|
||
color: var(--joplin-color3);
|
||
|
||
&:hover {
|
||
background-color: var(--joplin-background-color-hover3) !important;
|
||
border: none !important;
|
||
color: var(--joplin-color);
|
||
}
|
||
|
||
&:active {
|
||
background-color: var(--joplin-background-color-active3) !important;
|
||
border: none !important;
|
||
}
|
||
}
|
||
|
||
// main.scss 里遗留的透明边框 hack 已无意义，统一去掉
|
||
.editor-toolbar .button,
|
||
.header .button {
|
||
border: none;
|
||
}
|
||
|
||
/* =========================================================================
|
||
编辑器：标题行与状态栏
|
||
========================================================================= */
|
||
|
||
.note-title-wrapper {
|
||
min-height: 52px;
|
||
height: auto;
|
||
padding: var(--cn-space-3) var(--cn-space-4) var(--cn-space-1);
|
||
gap: var(--cn-space-3);
|
||
border-bottom: none !important;
|
||
background-color: var(--joplin-background-color);
|
||
|
||
> .title-input {
|
||
font-size: 26px !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1.3 !important;
|
||
letter-spacing: -0.015em;
|
||
color: var(--joplin-color);
|
||
background-color: transparent !important;
|
||
border: none !important;
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
padding: 4px 0 !important;
|
||
|
||
&::placeholder {
|
||
color: var(--joplin-color-faded);
|
||
font-weight: normal;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
&:focus {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
}
|
||
|
||
> .note-title-info-group {
|
||
align-items: center;
|
||
gap: var(--cn-space-1);
|
||
|
||
// 时间戳：静默的次要信息
|
||
> .updated-time-label {
|
||
font-size: 12px !important;
|
||
color: var(--joplin-color-faded) !important;
|
||
opacity: 1 !important;
|
||
letter-spacing: 0.02em;
|
||
margin-right: var(--cn-space-2);
|
||
}
|
||
|
||
// 标题栏工具按钮：统一尺寸与图标大小，消除参差
|
||
button,
|
||
.toolbar-button {
|
||
border: none !important;
|
||
background-color: transparent !important;
|
||
border-radius: var(--cn-radius);
|
||
color: var(--joplin-color-faded) !important;
|
||
height: 28px;
|
||
padding: 0 !important;
|
||
|
||
|
||
> .toolbar-icon,
|
||
i {
|
||
font-size: var(--cn-icon-md) !important;
|
||
}
|
||
|
||
// 纯图标按钮为正方形；带文字的按钮（如语言切换）需按内容撑开，否则文字被裁
|
||
&:not(.-has-title) {
|
||
width: 28px;
|
||
min-width: 28px;
|
||
}
|
||
|
||
&.-has-title {
|
||
width: auto;
|
||
min-width: 28px;
|
||
padding: 0 var(--cn-space-2) !important;
|
||
gap: var(--cn-space-1);
|
||
font-size: 12px;
|
||
}
|
||
|
||
&:hover:not(.disabled) {
|
||
background-color: var(--joplin-background-color-hover3) !important;
|
||
color: var(--joplin-color) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.editor-status-bar {
|
||
height: 36px;
|
||
padding: 0 var(--cn-space-4);
|
||
border-top: 1px solid var(--joplin-divider-color);
|
||
background-color: var(--joplin-background-color);
|
||
|
||
.tag-bar {
|
||
gap: var(--cn-space-2);
|
||
|
||
.content > span {
|
||
font-size: 12.5px;
|
||
color: var(--joplin-color-faded);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* =========================================================================
|
||
侧边栏：笔记计数与警告横幅
|
||
========================================================================= */
|
||
|
||
.note-count-label {
|
||
margin-left: auto;
|
||
padding-left: var(--cn-space-2);
|
||
font-size: 12px;
|
||
color: var(--joplin-color-faded2);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.warning-banner {
|
||
font-size: 12.5px;
|
||
letter-spacing: 0.01em;
|
||
|
||
&.-header {
|
||
padding: var(--cn-space-2) var(--cn-space-4);
|
||
}
|
||
|
||
.content {
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
/* =========================================================================
|
||
日志优化增强：今日日志按钮与时间戳胶囊徽章
|
||
========================================================================= */
|
||
|
||
.today-note-button {
|
||
i.fa-calendar-alt, i.far {
|
||
color: var(--joplin-color-accent, #007aff);
|
||
}
|
||
}
|
||
|
||
.cm-ext-timestamp-chip {
|
||
font-variant-numeric: tabular-nums;
|
||
background-color: var(--joplin-background-color-hover3, rgba(0, 0, 0, 0.06));
|
||
color: var(--joplin-color-accent, #007aff);
|
||
font-size: 0.88em;
|
||
font-weight: 600;
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
margin-right: 3px;
|
||
letter-spacing: 0.02em;
|
||
display: inline-block;
|
||
vertical-align: baseline;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
/* =========================================================================
|
||
双链与 @ 快速提及弹窗设计重构（macOS / 极简中式高质感）
|
||
========================================================================= */
|
||
|
||
.cm-tooltip.cm-tooltip-autocomplete {
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
|
||
border-radius: 12px !important;
|
||
border: 1px solid var(--joplin-divider-color, rgba(0, 0, 0, 0.12)) !important;
|
||
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
|
||
background-color: var(--joplin-background-color3, #ffffff) !important;
|
||
backdrop-filter: blur(24px) saturate(180%) !important;
|
||
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
|
||
padding: 6px !important;
|
||
min-width: 280px !important;
|
||
max-width: 440px !important;
|
||
overflow: hidden !important;
|
||
z-index: 1000 !important;
|
||
|
||
ul {
|
||
font-family: inherit !important;
|
||
list-style: none !important;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
max-height: 280px !important;
|
||
overflow-y: auto !important;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 5px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background: var(--joplin-divider-color, rgba(0, 0, 0, 0.15));
|
||
border-radius: 4px;
|
||
}
|
||
|
||
li {
|
||
padding: 7px 10px !important;
|
||
margin: 1px 0 !important;
|
||
border-radius: 8px !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: space-between !important;
|
||
font-size: 13px !important;
|
||
line-height: 1.4 !important;
|
||
cursor: pointer !important;
|
||
transition: background-color 0.1s ease, color 0.1s ease;
|
||
color: var(--joplin-color, #222) !important;
|
||
|
||
&:hover:not([aria-selected="true"]) {
|
||
background-color: var(--joplin-background-color-hover3, rgba(0, 0, 0, 0.04)) !important;
|
||
}
|
||
|
||
&[aria-selected="true"] {
|
||
background-color: var(--joplin-selected-color2, #007aff) !important;
|
||
color: #ffffff !important;
|
||
|
||
.cm-completionLabel {
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.cm-completionDetail {
|
||
background-color: rgba(255, 255, 255, 0.22) !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.cm-completionMatchedText {
|
||
color: #ffffff !important;
|
||
text-decoration: underline !important;
|
||
}
|
||
}
|
||
|
||
.cm-completionLabel {
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
flex: 1;
|
||
color: inherit;
|
||
}
|
||
|
||
.cm-completionMatchedText {
|
||
color: var(--joplin-color-accent, #007aff);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.cm-completionDetail {
|
||
font-size: 11px !important;
|
||
font-weight: 500 !important;
|
||
padding: 2px 7px !important;
|
||
border-radius: 6px !important;
|
||
background-color: var(--joplin-background-color-hover3, rgba(0, 0, 0, 0.06));
|
||
color: var(--joplin-color-faded, #666);
|
||
margin-left: 8px !important;
|
||
white-space: nowrap !important;
|
||
flex-shrink: 0 !important;
|
||
}
|
||
}
|
||
|
||
completion-section {
|
||
display: block !important;
|
||
font-size: 10.5px !important;
|
||
font-weight: 600 !important;
|
||
color: var(--joplin-color-faded, #888) !important;
|
||
padding: 6px 8px 3px 8px !important;
|
||
letter-spacing: 0.04em !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* =========================================================================
|
||
富文本编辑器 TinyMCE：@ 提及与双链自动补全弹窗样式（对齐 macOS 质感）
|
||
========================================================================= */
|
||
|
||
.tox.tox-tinymce-aux .tox-autocompleter .tox-menu {
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
|
||
border-radius: 12px !important;
|
||
border: 1px solid var(--joplin-divider-color, rgba(0, 0, 0, 0.12)) !important;
|
||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.06) !important;
|
||
background-color: var(--joplin-background-color3, #ffffff) !important;
|
||
backdrop-filter: blur(24px) saturate(180%) !important;
|
||
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
|
||
padding: 6px !important;
|
||
max-height: 280px !important;
|
||
|
||
.tox-collection__item {
|
||
border-radius: 8px !important;
|
||
margin: 1px 0 !important;
|
||
padding: 7px 10px !important;
|
||
font-size: 13px !important;
|
||
transition: background-color 0.1s ease !important;
|
||
color: var(--joplin-color, #222) !important;
|
||
|
||
&:hover:not(.tox-collection__item--active) {
|
||
background-color: var(--joplin-background-color-hover3, rgba(0, 0, 0, 0.04)) !important;
|
||
}
|
||
|
||
&.tox-collection__item--active {
|
||
background-color: var(--joplin-selected-color2, #007aff) !important;
|
||
color: #ffffff !important;
|
||
|
||
.tox-collection__item-label {
|
||
color: #ffffff !important;
|
||
}
|
||
}
|
||
|
||
.tox-collection__item-label {
|
||
font-weight: 500 !important;
|
||
}
|
||
}
|
||
}
|