Yuhang Wu
827075bdef
- 新增应用图标资源 - 调整玻璃面板背景色优化视觉效果 - 重构标题栏布局，替换品牌Logo为应用图标 - 为检查更新按钮添加徽标，有更新时显示提示点 - 修改更新逻辑，保留已检测更新状态避免重复检查 - 简化模板代码格式，提升可读性 - 版本号从1.0.0更新为0.9.0
427 lines
10 KiB
CSS
427 lines
10 KiB
CSS
@import 'tailwindcss';
|
||
|
||
/* 使用 class 方式控制暗色模式（配合 @vueuse/core 的 useDark） */
|
||
@custom-variant dark (&:where(.dark, .dark *));
|
||
|
||
html,
|
||
body,
|
||
#app {
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 窗口背景色与渐变（供 html / #app 复用，避免重复定义） */
|
||
:root {
|
||
--app-bg-color: #eef2ff;
|
||
--app-bg-gradient:
|
||
radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.28), transparent 60%),
|
||
radial-gradient(1000px 500px at 110% 10%, rgba(34, 211, 238, 0.28), transparent 55%),
|
||
linear-gradient(160deg, #eef2ff 0%, #f8fafc 45%, #eef7ff 100%);
|
||
}
|
||
|
||
html.dark {
|
||
--app-bg-color: #0b1220;
|
||
--app-bg-gradient:
|
||
radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.35), transparent 60%),
|
||
radial-gradient(1000px 500px at 110% 10%, rgba(14, 165, 233, 0.28), transparent 55%),
|
||
linear-gradient(160deg, #0b1220 0%, #0f172a 45%, #111827 100%);
|
||
}
|
||
|
||
/*
|
||
* 默认（Windows / Linux）：背景绘制在 <html> 上。
|
||
* 根元素的背景会被绘制到整个画布（canvas）上，铺满窗口的每一个像素，
|
||
* 不会出现“元素高度(100vh) 与实际窗口差几个像素”导致的上下留白；
|
||
* 窗口圆角交给系统裁切（Windows 11 的 DWM 默认就是 8px 圆角）。
|
||
*/
|
||
html {
|
||
background-color: var(--app-bg-color);
|
||
background-image: var(--app-bg-gradient);
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
/* 选中自定义背景图时替换为图片：等比缩放铺满，不拉伸变形 */
|
||
html.has-bg-image {
|
||
background-image: var(--app-bg-image, none);
|
||
background-size: cover;
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
/*
|
||
* macOS：无边框窗口系统不会自动裁圆角（不像 Windows 11 的 DWM），
|
||
* 因此通过 tauri.macos.conf.json 开启 transparent 窗口，
|
||
* 再把背景从 <html> 移到 #app 上并由 #app 裁出 8px 圆角，
|
||
* html/body 保持完全透明，让圆角之外的区域透出桌面壁纸。
|
||
*/
|
||
html.is-macos,
|
||
html.is-macos body {
|
||
background: transparent !important;
|
||
}
|
||
|
||
html.is-macos #app {
|
||
position: fixed;
|
||
inset: 0;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background-color: var(--app-bg-color);
|
||
background-image: var(--app-bg-gradient);
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
html.is-macos.has-bg-image #app {
|
||
background-image: var(--app-bg-image, none);
|
||
background-size: cover;
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
/* 全屏遮罩跟随窗口圆角，避免弹窗打开时遮罩把圆角「填方」 */
|
||
html.is-macos .ant-modal-mask {
|
||
border-radius: 8px;
|
||
}
|
||
|
||
body {
|
||
overflow: hidden;
|
||
font-family: 'Inter', 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
/* 背景交由 <html>（或 macOS 下的 #app）绘制，body 保持透明避免覆盖画布背景 */
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* Antd 按钮：图标与文字按 flex 垂直居中（Tailwind preflight 会把 svg 设为 block，导致行内对齐偏移） */
|
||
.ant-btn {
|
||
display: inline-flex !important;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 主内容区卡片：去掉投影，避免上下卡片之间的阴影透过半透明背景叠加成灰色遮罩 */
|
||
.glass-panel.glass-panel-flat,
|
||
.dark .glass-panel.glass-panel-flat {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 窗口圆角固定 8px，与 Windows 11 系统默认圆角保持一致 */
|
||
#app {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 悬浮磨砂玻璃面板 */
|
||
.glass-panel {
|
||
border-radius: 16px;
|
||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||
background: rgba(255, 255, 255, 0.45);
|
||
backdrop-filter: blur(18px) saturate(160%);
|
||
-webkit-backdrop-filter: blur(18px) saturate(160%);
|
||
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
|
||
}
|
||
|
||
.dark .glass-panel {
|
||
border-color: rgba(255, 255, 255, 0.08);
|
||
background: rgba(15, 23, 42, 0.45);
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
/*
|
||
* 透明磨砂玻璃卡片（服务器 / 隧道 / Frpc 列表卡片）
|
||
* 叠加在 .glass-panel 之上，用 .ant-card 提升优先级，
|
||
* 覆盖 Antd 运行时注入的卡片背景与边框（需 !important 才能稳定生效）。
|
||
*/
|
||
.glass-card.ant-card {
|
||
border: 1px solid rgba(255, 255, 255, 0.5) !important;
|
||
background: rgba(255, 255, 255, 0.45) !important;
|
||
backdrop-filter: blur(16px) saturate(160%);
|
||
-webkit-backdrop-filter: blur(16px) saturate(160%);
|
||
box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08) !important;
|
||
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.glass-card.ant-card:hover {
|
||
border-color: rgba(99, 102, 241, 0.45) !important;
|
||
background: rgba(255, 255, 255, 0.62) !important;
|
||
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
|
||
}
|
||
|
||
.dark .glass-card.ant-card {
|
||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||
background: rgba(30, 41, 59, 0.5) !important;
|
||
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important;
|
||
}
|
||
|
||
.dark .glass-card.ant-card:hover {
|
||
border-color: rgba(129, 140, 248, 0.5) !important;
|
||
background: rgba(30, 41, 59, 0.62) !important;
|
||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
|
||
}
|
||
|
||
/*
|
||
* 表单弹窗通用布局 + 透明磨砂玻璃背景：
|
||
* 1. 弹窗整体高度不超过窗口的 80%；
|
||
* 2. 内容过多时仅弹窗主体（body）滚动，标题与底部按钮固定可见；
|
||
* 3. 只保留纵向滚动条，避免出现横向滚动条。
|
||
*/
|
||
.form-modal-wrap .ant-modal {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.form-modal-wrap .ant-modal-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-height: 80vh;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||
background: rgba(255, 255, 255, 0.62) !important;
|
||
backdrop-filter: blur(24px) saturate(170%);
|
||
-webkit-backdrop-filter: blur(24px) saturate(170%);
|
||
box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18) !important;
|
||
}
|
||
|
||
.form-modal-wrap .ant-modal-header,
|
||
.form-modal-wrap .ant-modal-footer {
|
||
flex: 0 0 auto;
|
||
border-color: rgba(15, 23, 42, 0.06);
|
||
background: transparent !important;
|
||
}
|
||
|
||
.dark .form-modal-wrap .ant-modal-content {
|
||
border-color: rgba(255, 255, 255, 0.1);
|
||
background: rgba(30, 41, 59, 0.62) !important;
|
||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
|
||
}
|
||
|
||
.dark .form-modal-wrap .ant-modal-header,
|
||
.dark .form-modal-wrap .ant-modal-footer {
|
||
border-color: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.form-modal-wrap .ant-modal-body {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/*
|
||
* 更新弹窗：高度不超过窗口的 60%，内容过多时仅主体（body）滚动，
|
||
* 标题与底部按钮固定可见；沿用磨砂玻璃质感。
|
||
*/
|
||
.update-modal-wrap .ant-modal {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.update-modal-wrap .ant-modal-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-height: 60vh;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||
background: rgba(255, 255, 255, 0.72) !important;
|
||
backdrop-filter: blur(24px) saturate(170%);
|
||
-webkit-backdrop-filter: blur(24px) saturate(170%);
|
||
box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18) !important;
|
||
}
|
||
|
||
.update-modal-wrap .ant-modal-header,
|
||
.update-modal-wrap .ant-modal-footer {
|
||
flex: 0 0 auto;
|
||
border-color: rgba(15, 23, 42, 0.06);
|
||
background: transparent !important;
|
||
}
|
||
|
||
.dark .update-modal-wrap .ant-modal-content {
|
||
border-color: rgba(255, 255, 255, 0.1);
|
||
background: rgba(30, 41, 59, 0.72) !important;
|
||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
|
||
}
|
||
|
||
.dark .update-modal-wrap .ant-modal-header,
|
||
.dark .update-modal-wrap .ant-modal-footer {
|
||
border-color: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.update-modal-wrap .ant-modal-body {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/*
|
||
* Markdown 渲染内容（更新日志等）的排版。类名唯一，使用全局样式；
|
||
* 内容由 v-html 注入，不参与组件 scoped 样式，故放在此处统一维护。
|
||
*/
|
||
.markdown-body {
|
||
font-size: 13px;
|
||
line-height: 1.75;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.markdown-body > :first-child {
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.markdown-body > :last-child {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.markdown-body h1,
|
||
.markdown-body h2,
|
||
.markdown-body h3,
|
||
.markdown-body h4,
|
||
.markdown-body h5,
|
||
.markdown-body h6 {
|
||
margin: 14px 0 8px;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.markdown-body h1 {
|
||
font-size: 17px;
|
||
}
|
||
|
||
.markdown-body h2 {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.markdown-body h3 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.markdown-body h4,
|
||
.markdown-body h5,
|
||
.markdown-body h6 {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.markdown-body p {
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.markdown-body ul,
|
||
.markdown-body ol {
|
||
margin: 8px 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.markdown-body ul {
|
||
list-style: disc;
|
||
}
|
||
|
||
.markdown-body ol {
|
||
list-style: decimal;
|
||
}
|
||
|
||
.markdown-body li {
|
||
margin: 4px 0;
|
||
}
|
||
|
||
.markdown-body li > ul,
|
||
.markdown-body li > ol {
|
||
margin: 4px 0;
|
||
}
|
||
|
||
.markdown-body a {
|
||
color: #6366f1;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.markdown-body a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.markdown-body code {
|
||
padding: 1px 5px;
|
||
border-radius: 5px;
|
||
background: rgba(148, 163, 184, 0.22);
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.markdown-body pre {
|
||
margin: 10px 0;
|
||
padding: 10px 12px;
|
||
border-radius: 8px;
|
||
background: rgba(15, 23, 42, 0.06);
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.markdown-body pre code {
|
||
padding: 0;
|
||
background: transparent;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.markdown-body blockquote {
|
||
margin: 8px 0;
|
||
padding: 2px 12px;
|
||
border-left: 3px solid rgba(99, 102, 241, 0.5);
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.markdown-body hr {
|
||
margin: 12px 0;
|
||
border: none;
|
||
border-top: 1px solid rgba(15, 23, 42, 0.1);
|
||
}
|
||
|
||
.markdown-body table {
|
||
width: 100%;
|
||
margin: 10px 0;
|
||
border-collapse: collapse;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.markdown-body th,
|
||
.markdown-body td {
|
||
padding: 6px 10px;
|
||
border: 1px solid rgba(15, 23, 42, 0.12);
|
||
}
|
||
|
||
.markdown-body th {
|
||
background: rgba(148, 163, 184, 0.14);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.markdown-body img {
|
||
max-width: 100%;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.dark .markdown-body a {
|
||
color: #a5b4fc;
|
||
}
|
||
|
||
.dark .markdown-body pre {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
}
|
||
|
||
.dark .markdown-body hr {
|
||
border-top-color: rgba(255, 255, 255, 0.12);
|
||
}
|
||
|
||
.dark .markdown-body th,
|
||
.dark .markdown-body td {
|
||
border-color: rgba(255, 255, 255, 0.14);
|
||
}
|
||
|
||
.dark .markdown-body th {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
/* 细滚动条 */
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
border-radius: 9999px;
|
||
background: rgba(100, 116, 139, 0.35);
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|