From 364403c9d88c45deb17dddf52a220a6e6634f126 Mon Sep 17 00:00:00 2001 From: Wx-2025 <351320169@qq.com> Date: Mon, 6 Oct 2025 03:25:46 +0800 Subject: [PATCH] Update table.css --- assets/table.css | 120 +++++++++++++++++++++++++++++++---------------- 1 file changed, 79 insertions(+), 41 deletions(-) diff --git a/assets/table.css b/assets/table.css index c72c0b2..cc59865 100644 --- a/assets/table.css +++ b/assets/table.css @@ -57,6 +57,7 @@ gap: var(--am2-gap-main); padding: var(--am2-padding-main); box-sizing: border-box; + min-width: 0; } #upper-controls-wrapper { @@ -96,45 +97,68 @@ margin-bottom: var(--am2-controls-margin-bottom); } +.amily2-table-wrapper { + overflow-x: auto; + margin-bottom: 20px; +} + #amily2_memorisation_forms_panel table[id^="amily2-table-"] { - width: 100%; border-collapse: collapse; background-color: transparent; - transition: box-shadow 0.5s ease-in-out; + transition: box-shadow 0.5s ease-in-out; + table-layout: fixed; } #amily2_memorisation_forms_panel table[id^="amily2-table-"] th, #amily2_memorisation_forms_panel table[id^="amily2-table-"] td { border: var(--am2-table-border); - padding: var(--am2-table-cell-padding); + padding: 0; /* Padding will be on the inner div */ text-align: left; - - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-word; + vertical-align: top; /* Align content to the top */ } -#amily2_memorisation_forms_panel table[id^="amily2-table-"] th, -#amily2_memorisation_forms_panel table[id^="amily2-table-"] td { - max-width: 250px; +.amily2-cell-content { + padding: var(--am2-table-cell-padding); + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + word-break: break-word; + height: 100%; } #amily2_memorisation_forms_panel table[id^="amily2-table-"] th { background-color: transparent; color: var(--am2-header-color); - min-width: 120px; font-weight: bold; position: relative; } +#amily2_memorisation_forms_panel .amily2-resizer { + position: absolute; + top: 0; + right: -5px; /* Center the larger handle on the border */ + width: 10px; /* Increase hit area for easier grabbing */ + height: 100%; + cursor: col-resize; + user-select: none; + background-color: transparent; /* Make the larger hit area invisible until hovered */ + transition: background-color 0.2s ease; +} + +#amily2_memorisation_forms_panel .amily2-resizer:hover, +#amily2_memorisation_forms_panel .amily2-resizer:active { + background-color: rgba(158, 138, 255, 0.5); +} + #amily2_memorisation_forms_panel .index-col { background-color: transparent; text-align: center !important; font-weight: bold; color: var(--am2-index-col-color); - width: 30px !important; - min-width: 30px !important; padding: var(--am2-table-cell-padding); word-break: normal; position: relative; @@ -513,6 +537,25 @@ .amily2-row-context-menu { position: absolute; + top: 0; + left: 100%; + z-index: 10000; + display: none; /* Initially hidden */ + flex-direction: column; + gap: 4px; + padding: 8px; + width: max-content; + background-color: rgba(30, 30, 40, 0.98); + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: 6px; + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} + +/* Now controlled by a class on the parent TD for consistency */ +td.amily2-menu-open .amily2-row-context-menu { + display: flex; } .amily2-context-menu.amily2-menu-active { @@ -520,26 +563,27 @@ } th .amily2-context-menu { - position: static; - display: none; + position: absolute; + top: 100%; + left: 0; + z-index: 10000; + display: none; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 8px; - width: 100%; - box-sizing: border-box; - box-shadow: none; - border: none; - background-color: transparent; + width: max-content; + background-color: rgba(30, 30, 40, 0.98); + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: 6px; + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); } th.amily2-menu-open .amily2-context-menu { display: grid; } -th.amily2-menu-open .amily2-header-text { - display: none; -} - #amily2_memorisation_forms_panel .amily2-context-menu .menu_button { white-space: nowrap; border: none !important; @@ -561,11 +605,6 @@ th.amily2-menu-open .amily2-header-text { box-shadow: none !important; } -.amily2-row-context-menu { - top: 0; - left: 100%; -} - @media (max-width: 768px) { #amily2_memorisation_forms_panel { padding: 0; @@ -578,6 +617,11 @@ th.amily2-menu-open .amily2-header-text { #amily2_memorisation_forms_panel #all-tables-container { padding: 10px 2px; } + + #amily2_memorisation_forms_panel .amily2-resizer { + width: 15px; + right: -7px; + } } #amily2_memorisation_forms_panel .cell-highlight { @@ -585,7 +629,6 @@ th.amily2-menu-open .amily2-header-text { transition: background-color 0.3s ease-in-out; } -/* 自定义列名编辑对话框样式 */ .custom-input-dialog { border: none; border-radius: 12px; @@ -626,7 +669,6 @@ th.amily2-menu-open .amily2-header-text { transform: translateY(-1px); } -/* Nccs API 按钮行样式 */ .nccs-button-row { display: flex; gap: 10px; @@ -666,14 +708,13 @@ th.amily2-menu-open .amily2-header-text { box-shadow: 0 4px 15px rgba(120, 120, 120, 0.4); } -/* Styles for tables injected into chat messages */ #amily2-chat-table-container { margin-top: 10px; padding: 10px; border: 1px solid var(--am2-container-border, rgba(255, 255, 255, 0.2)); border-radius: 8px; background-color: var(--am2-container-bg, rgba(0,0,0,0.1)); - overflow-x: auto; /* Ensure horizontal scrolling on small screens */ + overflow-x: auto; } .amily2-chat-table { @@ -704,7 +745,6 @@ th.amily2-menu-open .amily2-header-text { border: 1px solid var(--am2-table-border, rgba(255, 255, 255, 0.25)); padding: 5px 8px; text-align: left; - /* white-space: nowrap; will be applied via media query for mobile only */ } .amily2-chat-table th { @@ -712,19 +752,18 @@ th.amily2-menu-open .amily2-header-text { font-weight: bold; } -/* Styles for collapsible in-chat tables */ .amily2-chat-table-summary { cursor: pointer; font-weight: bold; padding: 5px; border-radius: 4px; transition: background-color 0.2s ease; - list-style: none; /* Hide the default triangle */ + list-style: none; display: block; } .amily2-chat-table-summary::-webkit-details-marker { - display: none; /* Hide the default triangle in Chrome/Safari */ + display: none; } .amily2-chat-table-summary:before { @@ -746,15 +785,14 @@ th.amily2-menu-open .amily2-header-text { @media (max-width: 768px) { .amily2-chat-table th, .amily2-chat-table td { - padding: 4px 6px; /* Reduce padding on mobile */ - font-size: 0.85em; /* Slightly smaller font on mobile */ + padding: 4px 6px; + font-size: 0.85em; } #amily2-chat-table-container { - padding: 5px; /* Reduce container padding on mobile */ + padding: 5px; } - /* On mobile, prevent text wrapping to enable horizontal scrolling */ .amily2-chat-table th, .amily2-chat-table td { white-space: nowrap;