/* * styles.css(插件样式表) * 文件作用:Obsidian 会自动加载插件根目录下的 styles.css,为插件界面提供样式。 * 说明:本文件是「基础重建版」。原 styles.css 已从项目仓库中丢失,这里根据代码里实际使用的 * workout-* 类,用 Obsidian 的 CSS 变量重新写了一份干净、能适配明暗主题的样式。 * 变量说明:var(--background-primary) 背景、var(--text-normal) 正文、 * var(--interactive-accent) 主题强调色、var(--background-modifier-border) 边框等, * Obsidian 会按当前明暗主题自动替换这些变量,所以无需为亮/暗各写一套。 * 想改界面:直接改下面的规则即可,比如把输入框圆角、间距、强调色等调成你喜欢的样子。 */ /* ===== 根容器 ===== */ /* 弹窗/视图内最外层容器,统一一点内边距 */ .workout-plugin, .workout-settings, .workout-config { padding: 4px 0; } /* ===== 表单控件(输入框 / 下拉 / 文本域)===== */ /* 让插件里的输入框长得和 Obsidian 原生输入框一致,并统一高度(36px)解决"长短不一" */ .workout-input, .workout-select, .workout-textarea { width: 100%; min-height: 36px; padding: 7px 12px; border: 1px solid var(--background-modifier-border); border-radius: var(--workout-radius, 6px); background: var(--background-modifier-form-field); color: var(--text-normal); font-size: var(--font-ui-small, 14px); line-height: 1.4; box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease; } .workout-textarea { min-height: 64px; resize: vertical; font-family: var(--font-text, inherit); } .workout-input:focus, .workout-select:focus, .workout-textarea:focus { outline: none; border-color: var(--workout-accent, var(--interactive-accent)); } /* disabled 态(如编辑模式锁定的训练项):弱化但保持统一高度 */ .workout-input:disabled, .workout-select:disabled { opacity: 0.6; cursor: not-allowed; } /* ID 字段的轻量实时校验提示:默认隐藏,触发时淡入;用主题错误色 */ .workout-id-hint { flex-basis: 100%; font-size: var(--font-ui-smaller, 12px); color: var(--text-error, #e05656); margin: 2px 0 0; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.15s ease, max-height 0.15s ease; } .workout-id-hint.is-visible { opacity: 1; max-height: 2em; } /* 弹窗内灰色辅助提示(如"编辑时不可修改"),只读说明性文字 */ .workout-hint { font-size: var(--font-ui-smaller, 12px); color: var(--text-muted, #888); margin-left: 6px; } /* ===== 布局行(flex 横向排列,带间距)===== */ .workout-row, .workout-duration-row, .workout-btn-row, .workout-plan-toolbar { display: flex; align-items: center; gap: 8px; margin: 6px 0; } /* 单位选「自定义」时才出现的自定义单位输入框 */ .workout-field-card .workout-custom-unit { display: none; margin-top: 4px; } .workout-field-card .workout-custom-unit.is-custom { display: block; } /* 时长输入行的三个小框(时/分/秒)均匀撑开 */ .workout-duration-row .workout-input { flex: 1; text-align: center; } /* ===== 按钮 ===== */ /* 普通操作按钮:主题强调色填充样式 */ .workout-action-btn { padding: 4px 12px; border: 1px solid var(--interactive-accent); border-radius: var(--radius-s, 4px); background: var(--interactive-accent); color: var(--text-on-accent, #fff); cursor: pointer; font-size: var(--font-ui-small, 13px); } .workout-action-btn:hover { background: var(--interactive-accent-hover, var(--interactive-accent)); color: var(--text-on-accent, #fff); } /* 危险按钮(删除类):红色描边 */ .workout-danger-btn { padding: 4px 12px; border: 1px solid var(--text-error, #e05656); border-radius: var(--radius-s, 4px); background: transparent; color: var(--text-error, #e05656); cursor: pointer; font-size: var(--font-ui-small, 13px); } .workout-danger-btn:hover { background: var(--text-error, #e05656); color: #fff; } /* 按钮行里多个按钮靠右排列 */ .workout-btn-row { justify-content: flex-end; } /* ===== 表格(训练记录表)===== */ .workout-log-table, .workout-day-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: var(--font-ui-small, 13px); } .workout-log-table th, .workout-log-table td, .workout-day-table th, .workout-day-table td { border: 1px solid var(--background-modifier-border); padding: 4px 8px; text-align: left; } .workout-log-table th, .workout-day-table th { background: var(--background-secondary); color: var(--text-muted); font-weight: 600; } /* 操作列(最后一个 td)收缩到刚好容纳按钮,右对齐消除两端空白 */ .workout-log-table td:last-child { width: 1%; white-space: nowrap; padding-right: 8px; } .workout-log-table td:last-child .workout-card-actions { justify-content: flex-end; } .workout-log-table th:last-child { width: 1%; white-space: nowrap; text-align: center; } .workout-log-table tbody tr:hover, .workout-day-table tbody tr:hover { background: var(--background-modifier-hover); } /* 代码块渲染的日志容器 */ .workout-log-container { margin: 8px 0; } .workout-log-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } /* workout-day 代码块的头部:左为"查看日期",右为"固定为当日"按钮 */ .workout-day-container { margin: 8px 0; } .workout-day-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .workout-day-date { font-weight: 600; color: var(--text-normal); } /* 分组头行:有统计 / 无统计(纯日期) */ .workout-log-stat td:first-child { font-weight: 600; color: var(--text-normal); } .workout-log-stat td[colspan] { color: var(--interactive-accent); font-size: var(--font-ui-large, 15px); font-weight: 600; } /* 统计值单元格:多条统计用换行排列时,保留 \n 换行并给足行距 */ .workout-log-stat-cell { white-space: pre-line; line-height: 1.6; } .workout-log-group-header td:first-child { font-weight: 600; color: var(--text-muted); } .workout-plan-remove-btn { margin-left: auto; } /* ===== 管理类弹窗(训练类型/训练项/肌肉列表)===== */ .workout-manager-modal, .workout-edit-modal { display: flex; flex-direction: column; gap: 4px; } /* 管理弹窗顶部搜索框:吸顶,长列表滚动时始终可见,便于随时筛选 */ .workout-manager-search { position: sticky; top: 0; z-index: 5; background: var(--modal-background, var(--background-primary)); padding: 2px 0 6px; margin-bottom: 4px; } .workout-manager-search .workout-input { margin: 0; } .workout-muscles-list { display: flex; flex-direction: column; gap: 8px; } .workout-manager-detail { color: var(--text-muted); font-size: var(--font-ui-smaller, 12px); } .workout-fields, .workout-fields-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; } /* ===== 肌肉列表行 ===== */ .workout-muscles-container, .workout-muscles-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; } /* ===== 空状态提示 ===== */ .workout-empty { color: var(--text-faint, var(--text-muted)); font-style: italic; padding: 16px 0; text-align: center; } /* ===== 入口/辅助按钮(笔记里嵌的"记一组"等链接)===== */ .workout-record-set, .workout-record-plan, .workout-new-exercise, .workout-new-type { cursor: pointer; color: var(--interactive-accent); } /* ===== 肌肉热力图 workout-heatmap ===== */ .workout-heatmap-container { margin: 8px 0; } .workout-heatmap-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; } .workout-heatmap-switch { display: flex; gap: 6px; } .workout-heatmap-switch button { padding: 4px 12px; border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s, 4px); background: var(--background-secondary); color: var(--text-normal); cursor: pointer; font-size: var(--font-ui-small, 13px); } .workout-heatmap-switch button.mod-cta { background: var(--interactive-accent); color: var(--text-on-accent, #fff); border-color: var(--interactive-accent); } .workout-heatmap-info { display: flex; gap: 12px; font-size: var(--font-ui-smaller, 12px); color: var(--text-muted); } .workout-heatmap-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; } .workout-heatmap-legend-item { display: flex; align-items: center; gap: 4px; font-size: var(--font-ui-smaller, 12px); color: var(--text-muted); } .workout-heatmap-views { position: relative; } .workout-heatmap-view svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; } /* 肌肉路径悬停时显示可交互光标(默认会继承 Obsidian 的文本型 I-beam 光标) */ .workout-heatmap-view svg path, .workout-heatmap-view svg g[id] { cursor: pointer; } .workout-heatmap-empty { color: var(--text-faint, var(--text-muted)); font-style: italic; text-align: center; padding: 12px 0; } /* 肌肉悬停提示气泡:自定义黑框,进入肌肉即时显示、跟随光标。背景/文字硬编码深色, 避免某些 Obsidian 主题下 --background-modifier-tooltip 变成浅色而显示成白框。 */ .workout-heatmap-tooltip { position: fixed; z-index: 9999; pointer-events: none; display: none; padding: 4px 8px; border-radius: var(--radius-s, 4px); background: rgba(0, 0, 0, 0.88); color: #fff; font-size: var(--font-ui-small, 13px); line-height: 1.4; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); white-space: nowrap; } /* ===== 训练计划:选择计划下拉(代码块无 plan 时)===== */ .workout-plan-select { display: flex; align-items: center; gap: 8px; margin: 8px 0; } .workout-plan-select-label { font-weight: 600; color: var(--text-normal); } .workout-plan-select .workout-select { width: auto; min-width: 200px; } /* ===== 训练计划完成面板(workout-plan 代码块)===== */ .workout-plan-panel { margin: 8px 0; border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m, 8px); padding: 12px; background: var(--background-secondary); } .workout-plan-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--background-modifier-border); } .workout-plan-name { font-size: var(--font-ui-large, 15px); font-weight: 700; color: var(--text-normal); } .workout-plan-time { font-size: var(--font-ui-small, 13px); color: var(--text-muted); } .workout-plan-progress { margin-left: auto; font-size: var(--font-ui-small, 13px); color: var(--interactive-accent); font-weight: 600; } .workout-plan-panel .workout-plan-item { margin: 10px 0; } .workout-plan-item-title { font-weight: 600; color: var(--text-normal); margin-bottom: 4px; } .workout-plan-sets { display: flex; flex-direction: column; gap: 6px; padding-left: 8px; border-left: 2px solid var(--background-modifier-border); } .workout-plan-set { display: flex; align-items: center; gap: 8px; } .workout-plan-setno { font-weight: 600; color: var(--text-muted); min-width: 3em; } .workout-plan-setfields { flex: 1; min-width: 0; color: var(--text-normal); font-size: var(--font-ui-small, 13px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workout-plan-completed { color: var(--text-success, #4caf50); font-size: var(--font-ui-small, 13px); font-weight: 600; } .workout-plan-set .workout-plan-set-edit, .workout-plan-set .workout-plan-set-complete { padding: 2px 10px; font-size: var(--font-ui-small, 13px); } /* ===== 新增训练计划弹窗(配置形态)===== */ .workout-plan-time-controls { margin: 4px 0; } .workout-plan-weekdays { display: flex; gap: 6px; flex-wrap: wrap; } .workout-plan-weekday { width: 32px; height: 32px; border-radius: var(--radius-s, 4px); border: 1px solid var(--background-modifier-border); background: var(--background-primary); color: var(--text-normal); cursor: pointer; font-size: var(--font-ui-small, 13px); } .workout-plan-weekday.is-active { background: var(--interactive-accent); color: var(--text-on-accent, #fff); border-color: var(--interactive-accent); } .workout-plan-items { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .workout-plan-modal .workout-plan-item { border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s, 4px); padding: 8px; background: var(--background-primary); } .workout-plan-set-del { padding: 2px 8px; } .workout-plan-addset { margin-top: 4px; } .workout-plan-selectall { align-items: center; } /* 应用内确认弹窗(替代原生 confirm,避免 Electron 焦点丢失 bug) */ .workout-confirm-msg { margin: 4px 0 18px; line-height: 1.6; white-space: pre-wrap; } .workout-confirm-row { display: flex; gap: 10px; justify-content: flex-end; } /* ============================================================ * 设置页 - 训练设置:管理列表拖拽排序样式 * 对应 SettingsTab.renderManagersSection 渲染的五个平铺管理条目。 * ============================================================ */ /* 管理列表:五个条目平铺,纯间距分隔,无分隔线 */ .workout-manager-list { display: flex; flex-direction: column; gap: 6px; } /* 左侧拖拽手柄:仅手柄可发起拖拽,避免与右侧"打开管理"按钮冲突 */ .workout-manager-handle { display: flex; align-items: center; justify-content: center; width: 18px; min-width: 18px; margin-right: 6px; color: var(--text-faint); cursor: grab; flex: 0 0 auto; } .workout-manager-handle:hover { color: var(--text-muted); } .workout-manager-handle:active { cursor: grabbing; } /* 拖拽中:源行半透明,提示正在移动 */ .workout-manager-row--dragging { opacity: 0.5; } /* 拖拽悬停目标:顶部高亮一条插入线,指示松手后的插入位置 */ .workout-manager-row--over { box-shadow: inset 0 2px 0 0 var(--interactive-accent); } /* ============================================================ * 重设计样式体系(2026-07-13) * 设计目标:标签在控件上方、输入框 100% 等宽、统一 36px 行高、 * 布尔开关组件、列表卡片、复选框网格、字段卡片、两列网格。 * 兼容 Obsidian 明暗主题:背景/文字/边框用原生变量; * 强调色用插件自有 --workout-accent(紫),明暗下都协调。 * ============================================================ */ :root { --workout-accent: #7c3aed; --workout-accent-hover: #6d28d9; --workout-accent-soft: rgba(124, 58, 237, 0.12); --workout-accent-border: rgba(124, 58, 237, 0.35); --workout-accent-text: #a78bfa; --workout-radius: 6px; --workout-radius-lg: 8px; --workout-row-gap: 16px; --workout-control-h: 36px; } /* ---- 表单:标签在上方(替换旧的"标签在左" workout-row)---- */ .workout-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--workout-row-gap); } .workout-field:last-child { margin-bottom: 0; } .workout-field > label { font-size: var(--font-ui-smaller, 12px); font-weight: 500; color: var(--text-muted); letter-spacing: 0.02em; } .workout-field .workout-input, .workout-field .workout-select, .workout-field .workout-textarea { width: 100%; } /* 双列紧凑网格(如记录弹窗"训练项 / 训练类型"同行) */ .workout-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: var(--workout-row-gap); } .workout-two-col .workout-field { margin-bottom: 0; } /* ---- 只读派生类型胶囊(记录弹窗"训练类型"随训练项自动带出)---- */ .workout-type-pill { display: flex; align-items: center; min-height: var(--workout-control-h); padding: 7px 12px; background: var(--background-modifier-form-field); border: 1px solid var(--background-modifier-border); border-left: 3px solid var(--workout-accent, var(--interactive-accent)); border-radius: var(--workout-radius, 6px); color: var(--text-normal); font-size: var(--font-ui-small, 14px); } /* ---- 布尔开关(toggle switch)组件 ---- */ /* 外层框(含文字 + 开关),与相邻输入框同高 */ .workout-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--workout-control-h); padding: 7px 12px; box-sizing: border-box; background: var(--background-modifier-form-field); border: 1px solid var(--background-modifier-border); border-radius: var(--workout-radius, 6px); } .workout-toggle > span { font-size: var(--font-ui-small, 14px); color: var(--text-normal); } /* 原生 checkbox 重皮肤为滑动开关(保持 DOM 不变、事件不变) */ input[type="checkbox"].workout-switch { appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; flex: 0 0 auto; width: 40px; height: 22px; margin: 0; padding: 0; border: none; border-radius: 11px; background: var(--background-modifier-border); outline: none; cursor: pointer; transition: background 0.2s ease; } input[type="checkbox"].workout-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-on-accent, #fff); transition: transform 0.2s ease; } input[type="checkbox"].workout-switch:checked { background: var(--workout-accent, var(--interactive-accent)); } input[type="checkbox"].workout-switch:checked::after { transform: translateX(18px); } /* ---- 列表卡片(管理窗口:统计/类型/训练项/肌肉/计划 共用)---- */ .workout-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--workout-radius-lg, 8px); margin-bottom: 10px; } .workout-card:last-child { margin-bottom: 0; } .workout-card-info { flex: 1; min-width: 0; } .workout-card-title { font-size: var(--font-ui-small, 14px); font-weight: 600; color: var(--text-normal); margin-bottom: 6px; } .workout-card-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--font-ui-smaller, 12px); color: var(--text-muted); } .workout-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ---- 内联勾选框(管理列表卡片里的「启用」等)---- */ .workout-inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-ui-small, 13px); color: var(--text-normal); cursor: pointer; } .workout-inline-check input { width: 16px; height: 16px; accent-color: var(--workout-accent, var(--interactive-accent)); flex-shrink: 0; margin: 0; } .workout-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px; } .workout-check-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--background-modifier-form-field); border: 1px solid var(--background-modifier-border); border-radius: var(--workout-radius, 6px); font-size: var(--font-ui-small, 13px); color: var(--text-normal); cursor: pointer; } .workout-check-item input { accent-color: var(--workout-accent, var(--interactive-accent)); width: 15px; height: 15px; flex-shrink: 0; margin: 0; } /* ---- 字段卡片(新建/编辑训练类型的字段列表,替换旧表格)---- */ .workout-field-card { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--workout-radius-lg, 8px); padding: 14px 16px; margin-bottom: 12px; } .workout-field-card:last-child { margin-bottom: 0; } .workout-field-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--background-modifier-border); } .workout-field-card-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-ui-small, 13px); font-weight: 600; color: var(--text-normal); } .workout-field-card-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--workout-accent-soft); color: var(--workout-accent-text); font-size: var(--font-ui-smaller, 12px); font-weight: 600; } .workout-field-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .workout-field-card-body .workout-field { margin-bottom: 0; } .workout-field-card-cond { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--background-modifier-border); } /* ---- 时长三列等宽网格(时/分/秒)---- */ .workout-duration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .workout-duration-grid .workout-input { text-align: center; } /* ---- 添加按钮(虚线描边,轻盈)---- */ .workout-btn-outline { width: 100%; background: transparent; color: var(--workout-accent-text); border: 1px dashed var(--workout-accent-border); border-radius: var(--workout-radius, 6px); font-size: var(--font-ui-small, 13px); font-weight: 500; padding: 9px; cursor: pointer; transition: all 0.15s ease; font-family: inherit; } .workout-btn-outline:hover { border-color: var(--workout-accent, var(--interactive-accent)); background: var(--workout-accent-soft); color: var(--workout-accent-text); } /* ---- 区块标题(SVG 映射 / 公式 / 字段列表 等小节)---- */ .workout-section-title { font-size: var(--font-ui-small, 13px); font-weight: 600; color: var(--text-normal); margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--background-modifier-border); } .workout-section-title:first-child { margin-top: 0; } /* ---- 映射工具栏(搜索 + 计数 + 操作)---- */ .workout-mapping-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .workout-mapping-toolbar .workout-input { flex: 1; } .workout-mapping-count { font-size: var(--font-ui-smaller, 12px); color: var(--text-muted); white-space: nowrap; } .workout-mapping-group { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--workout-radius-lg, 8px); padding: 12px; margin-bottom: 10px; } .workout-mapping-group-title { font-size: var(--font-ui-smaller, 12px); font-weight: 600; color: var(--text-normal); margin-bottom: 10px; } .workout-mapping-group .workout-check-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* ---- 计划项卡片(新增训练计划)---- */ .workout-plan-card { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--workout-radius-lg, 8px); padding: 14px; margin-bottom: 12px; } .workout-plan-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--background-modifier-border); } .workout-plan-card-header .workout-select { flex: 1; min-width: 0; } .workout-plan-set-grid { display: grid; grid-template-columns: 56px 1fr 32px; gap: 12px; align-items: start; margin-bottom: 10px; } .workout-plan-set-no { font-size: var(--font-ui-smaller, 12px); font-weight: 600; color: var(--text-muted); padding-top: 9px; } .workout-plan-set-fields { display: flex; flex-direction: column; gap: 10px; } .workout-plan-set-field { display: flex; flex-direction: column; gap: 4px; } .workout-plan-set-field > label { font-size: 11px; color: var(--text-muted); } .workout-plan-set-field .workout-input, .workout-plan-set-field .workout-select { padding: 6px 8px; font-size: var(--font-ui-smaller, 12px); } /* 训练计划弹窗:组列表容器(卡片内,逐条 set-grid 堆叠,每条自带下间距) */ .workout-plan-set-list { display: flex; flex-direction: column; } /* ---- 热力图颜色分级行(编辑肌肉弹窗:色块 / 十六进制 / ≤ / 阈值)---- */ /* 对应重设计稿「编辑肌肉」页面的 scale-row 网格:32 / 100 / 24 / 1fr */ .workout-scale-row { display: grid; grid-template-columns: 32px 100px 24px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; } .workout-scale-row:last-child { margin-bottom: 0; } /* 色块:原生 color 拾色器兼作预览小圆点 */ .workout-scale-swatch { width: 28px; height: 28px; padding: 0; border: 1px solid var(--background-modifier-border); border-radius: 50%; background: transparent; cursor: pointer; } /* 十六进制代码输入框 */ .workout-scale-hex { width: 100px; } /* 「≤」分隔符 */ .workout-scale-sep { margin: 0 6px; font-weight: 600; color: var(--text-muted); } /* 阈值输入框 */ .workout-scale-max { width: 80px; } /* 末档"无穷大"占位文字 */ .workout-scale-unbounded { font-size: var(--font-ui-smaller, 12px); color: var(--text-muted); white-space: nowrap; } /* ===== 训练项搜索 Combobox ===== */ .workout-combo-wrapper { position: relative; } .workout-combo-input { width: 100%; cursor: text; } .workout-combo-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; max-height: 200px; overflow-y: auto; background: var(--background-primary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s, 4px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15)); } .workout-combo-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; cursor: pointer; font-size: var(--font-normal, 14px); line-height: 1.4; } .workout-combo-item:hover, .workout-combo-highlighted { background: var(--background-modifier-hover); } .workout-combo-selected { background: var(--background-modifier-border); /* 轻微高亮已选中项 */ font-weight: 600; } .workout-combo-selected:hover { background: var(--background-modifier-hover); } .workout-combo-empty { color: var(--text-muted); padding: 8px 12px; font-size: var(--font-smaller, 13px); cursor: default; } .workout-combo-type-tag { font-size: var(--font-ui-smaller, 11px); color: var(--text-faint); margin-left: 8px; white-space: nowrap; } /* ============================================================ 移动端适配(根类 .is-mobile 由 main.ts 在 app.isMobile 时注入 ) 桌面端不添加该 class,故以下规则对桌面端零回归。 ============================================================ */ /* 表单行:label 与控件上下堆叠,控件占满宽度 */ .is-mobile .workout-row { flex-direction: column; align-items: stretch; } .is-mobile .workout-row > label { margin-bottom: 2px; } /* 时长三框:无论 .workout-duration-grid(RecordModal)还是 .workout-duration-row (NewPlanModal / PlanSetEditModal),移动端统一为可收缩的三列网格 */ .is-mobile .workout-duration-grid, .is-mobile .workout-duration-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .is-mobile .workout-duration-grid .workout-input, .is-mobile .workout-duration-row .workout-input { min-width: 0; flex: none; } /* 下拉不再写死最小宽度,移动端占满可用空间 */ .is-mobile .workout-plan-select .workout-select { min-width: 0; width: 100%; } /* 触控靶与字号:≥44px 保证可点,16px 防止 iOS 聚焦时整页缩放 */ .is-mobile .workout-input, .is-mobile .workout-select, .is-mobile .workout-btn-row button, .is-mobile .workout-manager-move { min-height: 44px; font-size: 16px; } /* 弹窗内容安全区(刘海 / 底部手势条) */ .is-mobile .modal-content { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* 表格横向滚动:容器可滚动,表格按内容宽度展开而非撑破视口 */ .is-mobile .workout-log-container, .is-mobile .workout-day-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } .is-mobile .workout-log-table, .is-mobile .workout-day-table { width: max-content; min-width: 100%; } /* 吸底保存栏:须为 .modal-content(滚动容器)的直接子元素才生效 */ .is-mobile .workout-btn-row { position: sticky; bottom: 0; background: var(--background-primary); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--background-modifier-border); z-index: 5; } /* 触摸 / 键盘反馈(补充桌面 :hover) */ .is-mobile .workout-btn-row button:active, .is-mobile .workout-manager-row:active, .is-mobile .workout-manager-move:active { opacity: 0.7; } .is-mobile .workout-input:focus-visible, .is-mobile .workout-select:focus-visible, .is-mobile .workout-manager-move:focus-visible { outline: 2px solid var(--interactive-accent); } /* 管理器排序:移动端隐藏拖拽手柄(改用上下移按钮);上移/下移按钮更易点 */ .is-mobile .workout-manager-handle { display: none; } .is-mobile .workout-manager-move { min-width: 36px; padding: 0 8px; } /* ============ 插入代码块弹窗 ============ */ .workout-insert-modal .workout-insert-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .workout-insert-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); background: var(--background-secondary); cursor: pointer; transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; } .workout-insert-card:hover { border-color: var(--interactive-accent); background: var(--background-secondary-alt); } .workout-insert-card:active { transform: scale(0.99); } .workout-insert-card-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--radius-s); background: var(--background-modifier-active-hover); color: var(--interactive-accent); } .workout-insert-card-icon svg { width: 18px; height: 18px; } .workout-insert-card-text { min-width: 0; flex: 1 1 auto; } .workout-insert-card-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-normal); } .workout-insert-card-badge { font-size: var(--font-ui-smaller); font-weight: 500; color: var(--text-muted); background: var(--background-modifier-active-hover); border-radius: 999px; padding: 1px 8px; white-space: nowrap; } .workout-insert-card-desc { margin-top: 2px; color: var(--text-muted); font-size: var(--font-ui-smaller); line-height: 1.4; } .workout-insert-empty { padding: 16px; text-align: center; color: var(--text-muted); } /* 参数弹窗 */ .workout-insert-param-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .workout-insert-param-header h2 { margin: 0; } .workout-insert-param-subtitle { margin: 12px 0 4px; font-weight: 600; color: var(--text-normal); } .workout-insert-params { display: flex; flex-direction: column; gap: 4px; } .workout-insert-param-label { display: flex; align-items: center; gap: 6px; } .workout-insert-param-optional { font-size: var(--font-ui-smaller); color: var(--text-faint); border: 1px solid var(--background-modifier-border); border-radius: 999px; padding: 0 6px; } .workout-insert-param-hint { color: var(--text-muted); font-size: var(--font-ui-smaller); margin-top: 2px; }