slvccans/ST-Amily2-Chat-Optimisation
1
0
Fork 0
mirror of https://github.com/Wx-2025/ST-Amily2-Chat-Optimisation.git synced 2026-06-06 13:55:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update table.css

Browse Source
This commit is contained in:
Wx-2025
2025-08-09 22:36:39 +08:00
committed by GitHub
parent 8d68572a58
commit 947ff3d926
1 changed files with 126 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
assets/table.css
View File

@@ -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: "×";
}
}