qing
b781a8d2fe
卡片入场动画的 translateY 使卡片成为 position:fixed 后代的包含块， 全屏特效 iframe 被限制在卡片内渲染，表现为部分特效不自动启动 （in-node 特效为 relative 定位不受影响）。卡片入场改为纯 opacity 淡入； 带位移的 rise-in 仅用于无 fixed 后代的骨架元素，并排除依赖 transform 垂直居中的 .minimap。
129 lines
4.3 KiB
CSS
129 lines
4.3 KiB
CSS
/* dnfs.css — 树状笔记页专属美化（在 theme.css / codeblock.css 之后加载，视觉语言与首页 index.css 对齐） */
|
||
|
||
::selection {
|
||
background: var(--accent-glow);
|
||
color: var(--fg);
|
||
}
|
||
|
||
/* ===== 页面底纹：极淡点阵 + 顶部暖光，增加层次不影响阅读 ===== */
|
||
body::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -1;
|
||
background-image: radial-gradient(var(--border) 1px, transparent 1px);
|
||
background-size: 26px 26px;
|
||
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
|
||
mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
|
||
pointer-events: none;
|
||
}
|
||
body::after {
|
||
content: "";
|
||
position: fixed;
|
||
left: 50%;
|
||
top: -160px;
|
||
width: 720px;
|
||
height: 480px;
|
||
transform: translateX(-50%);
|
||
z-index: -1;
|
||
background: radial-gradient(ellipse, var(--accent-glow), transparent 65%);
|
||
opacity: 0.3;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ===== 节点卡片入场：逐张淡入（JS 动态插入时播放） =====
|
||
* 注意：此处只能动画 opacity，不能带 transform——特效节点的全屏 iframe 是
|
||
* position:fixed，祖先 transform 会成为 fixed 后代的包含块，把全屏特效困在卡片内
|
||
*（in-node 特效是 relative 定位不受影响，故障表现为"部分特效不自动启动"） */
|
||
@keyframes card-in {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
/* 带位移的入场仅用于不含 fixed 后代的骨架元素；
|
||
* 不含 .minimap——它自身依赖 transform: translateY(-50%) 垂直居中，动画会覆盖 */
|
||
@keyframes rise-in {
|
||
from { opacity: 0; transform: translateY(12px); }
|
||
to { opacity: 1; transform: none; }
|
||
}
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
.recommend-list .card { animation: card-in 0.45s ease both; }
|
||
.recommend-list .card:nth-of-type(2) { animation-delay: 0.05s; }
|
||
.recommend-list .card:nth-of-type(3) { animation-delay: 0.1s; }
|
||
.recommend-list .card:nth-of-type(4) { animation-delay: 0.15s; }
|
||
.recommend-list .card:nth-of-type(5) { animation-delay: 0.2s; }
|
||
.recommend-list .card:nth-of-type(6) { animation-delay: 0.25s; }
|
||
.recommend-list .card:nth-of-type(7) { animation-delay: 0.3s; }
|
||
.recommend-list .card:nth-of-type(n+8) { animation-delay: 0.35s; }
|
||
|
||
/* 首屏骨架元素入场 */
|
||
.searchbox, .node-form { animation: rise-in 0.4s ease both; }
|
||
.node-form { animation-delay: 0.1s; }
|
||
.userpanel, .minimap { animation: card-in 0.4s ease both; }
|
||
}
|
||
|
||
/* ===== 搜索框：hover 升温（focus 高亮由 theme.css 提供） ===== */
|
||
.searchbox:hover {
|
||
border-color: var(--border);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
/* ===== 节点编辑卡：品牌渐变顶条 + 聚焦光环 ===== */
|
||
.node-form {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.node-form::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
|
||
opacity: 0.85;
|
||
}
|
||
.node-form:focus-within {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-md);
|
||
}
|
||
|
||
/* ===== 编辑卡按钮：提交渐变 / 重置柔色 / 删除警示 ===== */
|
||
#input-note-submit {
|
||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
|
||
color: #fff;
|
||
box-shadow: 0 2px 10px rgba(232, 133, 58, 0.3);
|
||
transition: transform 0.18s, box-shadow 0.22s, opacity 0.15s;
|
||
}
|
||
#input-note-submit:not(:disabled):hover {
|
||
opacity: 1;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 5px 16px rgba(232, 133, 58, 0.38);
|
||
}
|
||
#input-note-submit:not(:disabled):active { transform: scale(0.96); }
|
||
|
||
#input-note-clear {
|
||
background: var(--accent-soft);
|
||
color: var(--accent-dark);
|
||
border: 1px solid var(--accent-glow);
|
||
transition: transform 0.18s, border-color 0.18s, opacity 0.15s;
|
||
}
|
||
#input-note-clear:not(:disabled):hover {
|
||
opacity: 1;
|
||
transform: translateY(-1px);
|
||
border-color: var(--accent);
|
||
}
|
||
#input-note-clear:not(:disabled):active { transform: scale(0.96); }
|
||
|
||
#delete-note {
|
||
background: var(--error-bg);
|
||
color: var(--error);
|
||
border: 1px solid transparent;
|
||
transition: transform 0.18s, border-color 0.18s, opacity 0.15s;
|
||
}
|
||
#delete-note:not(:disabled):hover {
|
||
opacity: 1;
|
||
transform: translateY(-1px);
|
||
border-color: var(--error);
|
||
}
|
||
#delete-note:not(:disabled):active { transform: scale(0.96); }
|