主要功能
- URL链接属性替换为icon，悬浮在卡片右上角，便于点击
- 鼠标悬浮缩放、属性栏隐藏等美化
- 无封面的卡片，使用标题替代封面位置（2025-08-20 16_23更新）
- 其他改进不定期更新…
效果展示
URL图标
原效果（文本链接） - 美化后（右上角图标）
点击链接图标跳转URL，点击卡片主体进入笔记，可以替代很多gallery插件了
→
鼠标悬浮卡片放大
无封面卡片 - 使用标题替代封面位置
其他改进
不定期更新中…
代码
/* Bases卡片 - 鼠标悬浮放大 */
.bases-cards-item{
/* 卡片尺寸 - 悬浮缩放 */
transition: transform 0.3s, box-shadow 0.5s!important; /* 移开过渡 */
box-shadow:var(--shadow-s); /* 不悬浮时阴影 */
&:hover{
transform: scale(1.05)!important; /* 悬浮时尺寸 */
box-shadow:var(--shadow-l); /* 悬浮时阴影 */
z-index: 999; /* 当前卡片及其阴影在最上方 */
transition: transform 0.1s, box-shadow 0.3s!important; /* 移入过渡 */
};
cursor:auto!important; /* 鼠标悬浮样式 - 改为默认 */
/* 卡片属性栏 - 隐藏（除标题） */
.bases-cards-property:not(.mod-title){
display: none;
& > .bases-cards-label{
display: none; /* 属性名称 - 隐藏 */
};
};
/* 卡片上下边距 - 调整 */
padding-top: 0px;
padding-bottom: 0px;
/* 卡片标题 - 换行、高度调整 */
.bases-cards-property.mod-title{
padding-top: 4px;
padding-bottom: 4px;
& > .bases-cards-line{
text-wrap-mode: wrap;
padding-top: 0;
padding-bottom: 0;
height: 2em!important;
text-overflow:clip!important; /* 超出文本 - 隐藏（原为省略号） */
font-size:medium; /* 字号 - 中等 */
word-break:break-all; /* 单词换行中断 - 中断 */
}
};
}
/* ----------- */
/* Bases视图url属性 - 悬浮于图片上方 */
.bases-cards-item{
.bases-cards-property[data-property="note.url"]:has(a){
position: absolute!important;
top: 0!important;
right: 0!important;
width: 30px!important;
height: 30px!important;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #ffffff80;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxpbmsiPjxwYXRoIGQ9Ik0xMCAxM2E1IDUgMCAwIDAgNy41NC41NGwzLTNhNSA1IDAgMCAwLTcuMDctNy4wN2wtMS43MiAxLjcxIi8+PHBhdGggZD0iTTE0IDExYTUgNSAwIDAgMC03LjU0LS41NGwtMyAzYTUgNSAwIDAgMCA3LjA3IDcuMDdsMS43MS0xLjcxIi8+PC9zdmc+);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: block!important;
inset-inline-start:unset!important;
cursor:pointer;
opacity: 0;
transition: opacity .3s!important; /* 移出过渡 */
.bases-cards-line{
padding: 0;
width: 100%!important;
height: 100%!important;
a{
width: 100%!important;
height: 100%!important;
font-size: 0em!important;
display: block!important;
}
}
};
/* Bases视图url属性 - 仅在悬浮时显示 */
&:hover{
.bases-cards-property[data-property="note.url"]:has(a){
opacity: .75;
transition: opacity .05s!important; /* 移入过渡 */
}
};
}
/* ----------- */
/* Bases视图无封面卡片 - 使用标题替代封面位置 */
.bases-cards-item .bases-cards-cover:not([style*="background-image"]) {
display: none;
& + .mod-title {
top: 0px!important;
height:fit-content!important;
inset-inline-end: 12px!important; /* 右边距 */
& > .bases-cards-line.bases-rendered-value{
font-size:larger!important;
height:fit-content!important;
}
}
}
/* ----------- */
相关
- URL除了网址也可以是各类app的URI，例如打开某个zotero文件条目
zotero://open-pdf/library/items/XXX - 卡片属性暂时选择全部隐藏，只隐藏URL部分会导致卡片高度有空，暂不清楚原因，如果需要其他属性，可以注释掉相应部分；
- 其他进一步改进需等待官方重构，例如卡片位置和高度等，目前是OB实时计算的，用css修改不够灵活
- 如何设置Bases卡片视图封面为第一张图：「Bases」设置笔记中第一张图片为卡片封面
- 如何添加css脚本：【新手向教程】OB样式调整基础课：CSS入门科普