diff --git a/static/public/css/auth.css b/static/public/css/auth.css new file mode 100644 index 0000000..151ad62 --- /dev/null +++ b/static/public/css/auth.css @@ -0,0 +1,125 @@ +/* auth.css — 注册/重置密码页专属美化(在 theme.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) 1.2px, transparent 1.2px); + background-size: 26px 26px; + -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 38%, #000 18%, transparent 72%); + mask-image: radial-gradient(ellipse 78% 68% at 50% 38%, #000 18%, transparent 72%); + pointer-events: none; +} +body::after { + content: ""; + position: fixed; + left: 50%; + top: 32%; + width: 560px; + height: 560px; + transform: translate(-50%, -50%); + z-index: -1; + background: radial-gradient(circle, var(--accent-glow), transparent 62%); + opacity: 0.35; + pointer-events: none; +} + +/* ===== 卡片:顶部品牌渐变条 + 加深阴影 ===== */ +.card { + position: relative; + overflow: hidden; + box-shadow: 0 10px 30px rgba(74, 55, 40, 0.1); +} +.card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--accent), var(--accent-dark)); +} +@media (prefers-color-scheme: dark) { + .card { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } +} + +/* ===== 品牌 eyebrow + 居中标题(渐变短杠,对齐首页章节标题) ===== */ +.auth-eyebrow { + text-align: center; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.26em; + text-indent: 0.26em; /* 视觉居中补偿字距 */ + color: var(--accent); + margin-bottom: 0.4rem; +} +.card h2 { + text-align: center; +} +.card h2::after { + content: ""; + display: block; + width: 40px; + height: 3px; + margin: 0.55rem auto 0; + border-radius: 2px; + background: linear-gradient(90deg, var(--accent), var(--accent-dark)); + opacity: 0.9; +} + +/* ===== 按钮:主按钮品牌渐变 + 上浮;次按钮描边反馈 ===== */ +.card input[type="submit"] { + background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); + color: #fff; + box-shadow: 0 2px 10px rgba(232, 133, 58, 0.32); + transition: transform 0.18s, box-shadow 0.22s, opacity 0.15s; +} +.card input[type="submit"]:not(:disabled):hover { + opacity: 1; + transform: translateY(-1px); + box-shadow: 0 6px 18px rgba(232, 133, 58, 0.4); +} +.card input[type="submit"]:not(:disabled):active { transform: scale(0.96); } + +.card input[type="button"] { + border: 1px solid var(--accent-glow); + transition: transform 0.18s, border-color 0.18s, opacity 0.15s; +} +.card input[type="button"]:not(:disabled):hover { + opacity: 1; + transform: translateY(-1px); + border-color: var(--accent); +} +.card input[type="button"]:not(:disabled):active { transform: scale(0.96); } + +.card input[type="reset"] { transition: transform 0.18s, color 0.18s, border-color 0.18s, opacity 0.15s; } +.card input[type="reset"]:hover { + opacity: 1; + color: var(--accent); + border-color: var(--accent); +} + +/* ===== 图形验证码:hover 描边 + 阴影 ===== */ +.code-box .captcha-img { + transition: border-color 0.18s, box-shadow 0.18s; +} +.code-box .captcha-img:hover { + border-color: var(--accent); + box-shadow: var(--shadow-md); +} + +/* ===== 入场动画 ===== */ +@keyframes auth-in { + from { opacity: 0; transform: translateY(14px); } + to { opacity: 1; transform: none; } +} +@media (prefers-reduced-motion: no-preference) { + .card { animation: auth-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } +} diff --git a/static/public/css/dnfs.css b/static/public/css/dnfs.css new file mode 100644 index 0000000..e402198 --- /dev/null +++ b/static/public/css/dnfs.css @@ -0,0 +1,118 @@ +/* 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 动态插入时播放) ===== */ +@keyframes card-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 cubic-bezier(0.22, 1, 0.36, 1) 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, .userpanel, .minimap, .node-form { animation: card-in 0.4s ease both; } + .node-form { animation-delay: 0.1s; } +} + +/* ===== 搜索框: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); } diff --git a/static/public/dnfs.html b/static/public/dnfs.html index 9becaf2..861e540 100644 --- a/static/public/dnfs.html +++ b/static/public/dnfs.html @@ -7,6 +7,7 @@
DNFS 树状笔记