diff --git a/assets/table.css b/assets/table.css index 6e61cf1..9565bc5 100644 --- a/assets/table.css +++ b/assets/table.css @@ -1,4 +1,3 @@ - #amily2_memorisation_forms_panel { --am2-font-size-base: 14px; @@ -21,22 +20,19 @@ --am2-table-bg: rgba(0,0,0,0.2); --am2-table-border: 1px solid rgba(255, 255, 255, 0.25); - --am2-table-cell-padding: 4px 6px; + --am2-table-cell-padding: 6px 8px; --am2-table-cell-font-size: 0.95em; - --am2-header-bg: rgba(255, 255, 255, 0.1); --am2-header-color: #e0e0e0; --am2-header-editable-bg: rgba(172, 216, 255, 0.1); --am2-header-editable-focus-bg: rgba(172, 216, 255, 0.25); --am2-header-editable-focus-outline: 1px solid #79b8ff; - --am2-cell-editable-bg: rgba(255, 255, 172, 0.1); --am2-cell-editable-focus-bg: rgba(255, 255, 172, 0.25); --am2-cell-editable-focus-outline: 1px solid #ffc107; - --am2-index-col-bg: rgba(0, 0, 0, 0.3) !important; --am2-index-col-color: #aaa !important; --am2-index-col-width: 40px; @@ -86,17 +82,28 @@ #amily2_memorisation_forms_panel .table-controls { display: flex; - flex-direction: row; /* Explicitly horizontal */ + flex-direction: row; gap: var(--am2-controls-gap); justify-content: flex-end; margin-bottom: var(--am2-controls-margin-bottom); } +/* ===================================================================== */ +/* ================== 【V65.0】最终布局圣旨 - 智能兼容 ================== */ +/* ===================================================================== */ + +#amily2_memorisation_forms_panel .table-instance-container { + margin-bottom: 20px; + /* 【V65.0 核心】为表格容器启用水平滚动,作为最终保险 */ + overflow-x: auto; +} #amily2_memorisation_forms_panel table[id^="amily2-table-"] { width: 100%; border-collapse: collapse; background-color: var(--am2-table-bg); + /* 【V65.0 修正】在桌面端,我们依然希望表格能自适应,而不是固定布局 */ + /* table-layout: fixed; */ } #amily2_memorisation_forms_panel table[id^="amily2-table-"] th, @@ -105,11 +112,19 @@ padding: var(--am2-table-cell-padding); text-align: left; font-size: var(--am2-table-cell-font-size); + + /* 【V65.0 核心】使用更智能的断词策略 */ + overflow-wrap: break-word; + word-wrap: break-word; /* 兼容旧版浏览器 */ + word-break: break-word; /* 优先在单词边界换行 */ } #amily2_memorisation_forms_panel table[id^="amily2-table-"] th { background-color: var(--am2-header-bg); color: var(--am2-header-color); + /* 【V65.0 新增】为表头设置一个最小宽度,保证可读性 */ + min-width: 120px; + font-weight: bold; } #amily2_memorisation_forms_panel .index-col { @@ -117,8 +132,11 @@ text-align: center !important; font-weight: bold; color: var(--am2-index-col-color); - width: var(--am2-index-col-width); - padding: var(--am2-index-col-padding); + /* 【V72.0 谢罪圣旨】直接硬编码最终宽度,不再使用变量 */ + width: 30px !important; + min-width: 30px !important; + padding: var(--am2-table-cell-padding); + word-break: normal; } #amily2_memorisation_forms_panel th[contenteditable="true"] { @@ -174,11 +192,11 @@ } #amily2_memorisation_forms_panel .menu_button.small_button { - padding: 5px 12px; /* Adjusted for a more horizontal look */ + padding: 5px 12px; font-size: 0.9em; border-radius: 6px; - writing-mode: horizontal-tb !important; /* Override global vertical writing mode */ - white-space: nowrap; /* Prevent text from wrapping */ + writing-mode: horizontal-tb !important; + white-space: nowrap; } /* ================== 起居注 (日志) 样式 ================== */ @@ -187,14 +205,14 @@ border-radius: 8px; padding: 12px; border: 1px solid #444; - max-height: 100px; /* 调整为较小的高度 */ + max-height: 100px; overflow-y: auto; font-size: 0.9em; color: #ccc; display: flex; flex-direction: column; gap: 5px; - margin-bottom: 10px; /* 与下方内容隔开 */ + margin-bottom: 10px; } #amily2_memorisation_forms_panel .hly-log-entry { @@ -399,7 +417,7 @@ .action-center-buttons .menu_button { flex-grow: 1; - min-width: 180px; /* 保证按钮不会过窄 */ + min-width: 180px; } .notes { @@ -476,3 +494,97 @@ input:focus + .slider { input:checked + .slider:before { transform: translateX(22px); } + +/* ===================================================================== */ +/* ================== 【V65.0】最终布局圣旨 - 移动端优化 ================== */ +/* ===================================================================== */ + +@media (max-width: 768px) { + /* 【V65.0 修正】在移动端,不再需要容器的水平滚动 */ + #amily2_memorisation_forms_panel .table-instance-container { + overflow-x: initial; + } + + #amily2_memorisation_forms_panel table[id^="amily2-table-"], + #amily2_memorisation_forms_panel table[id^="amily2-table-"] thead, + #amily2_memorisation_forms_panel table[id^="amily2-table-"] tbody, + #amily2_memorisation_forms_panel table[id^="amily2-table-"] th, + #amily2_memorisation_forms_panel table[id^="amily2-table-"] td, + #amily2_memorisation_forms_panel table[id^="amily2-table-"] tr { + display: block; + } + + #amily2_memorisation_forms_panel table[id^="amily2-table-"] thead tr { + position: absolute; + top: -9999px; + left: -9999px; + } + + #amily2_memorisation_forms_panel table[id^="amily2-table-"] tr { + border: 1px solid var(--am2-table-border, #444); + border-radius: 8px; + margin-bottom: 15px; + background: rgba(0,0,0,0.1); + position: relative; + padding-top: 35px; + } + + #amily2_memorisation_forms_panel table[id^="amily2-table-"] td { + border: none; + border-bottom: 1px dotted rgba(255, 255, 255, 0.15); + position: relative; + padding-left: 45% !important; + text-align: right !important; + min-height: 30px; + display: flex; + align-items: center; + justify-content: flex-end; + /* 【V65.0 核心】确保在移动端也能正确断词 */ + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + } + + #amily2_memorisation_forms_panel table[id^="amily2-table-"] td:last-child { + border-bottom: none; + } + + #amily2_memorisation_forms_panel table[id^="amily2-table-"] td:before { + content: attr(data-label); + position: absolute; + left: 10px; + width: 40%; + padding-right: 10px; + white-space: nowrap; + text-align: left !important; + font-weight: bold; + color: var(--am2-header-color, #e0e0e0); + } + + #amily2_memorisation_forms_panel table[id^="amily2-table-"] td.index-col { + display: none; + } + + #amily2_memorisation_forms_panel table[id^="amily2-table-"] tr .delete-row-handle { + display: block; + position: absolute; + top: 8px; + right: 8px; + width: 28px; + height: 28px; + background-color: rgba(255, 82, 82, 0.5) !important; + color: white !important; + border-radius: 50%; + text-align: center; + line-height: 28px; + font-size: 16px; + cursor: pointer; + padding: 0 !important; + border: none; + z-index: 10; + } + + #amily2_memorisation_forms_panel table[id^="amily2-table-"] tr .delete-row-handle:before { + content: "×"; + } +}