diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css index 676fa7c..2ea4674 100644 --- a/assets/webui/ofdgo.css +++ b/assets/webui/ofdgo.css @@ -868,6 +868,28 @@ button:not(:disabled):hover { font-size: 14px; } +.remove-button { + border: 0; + background: transparent; + color: var(--text-muted); +} + +.remove-button:not(:disabled):hover { + background: var(--danger-soft); + color: var(--danger); +} + +.remove-button:focus-visible { + outline-offset: -2px; +} + +.remove-button::before { + content: ""; + width: 14px; + height: 14px; + background: currentColor; +} + .arrow-prev::before, .arrow-next::before { width: 5px; @@ -902,7 +924,8 @@ button:not(:disabled):hover { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V3h6l3 4h9v14H3Z'/%3E%3C/svg%3E") center / contain no-repeat; } -.close-icon { +.close-icon, +.remove-button::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 3 18 18M21 3 3 21'/%3E%3C/svg%3E") center / contain no-repeat; } @@ -4438,14 +4461,8 @@ audio.page-media { } .font-delete { - display: inline-grid; - place-items: center; width: 26px; height: 26px; - padding: 0; - color: var(--danger); - font-size: 18px; - line-height: 1; } .font-empty { diff --git a/assets/webui/ofdgo.js b/assets/webui/ofdgo.js index f0eb5f7..48bd4a4 100644 --- a/assets/webui/ofdgo.js +++ b/assets/webui/ofdgo.js @@ -1090,8 +1090,7 @@ function addInfoRow(container, values, sourceIndex) { } const remove = document.createElement("button"); remove.type = "button"; - remove.className = "icon-button"; - remove.textContent = "×"; + remove.className = "icon-button remove-button"; remove.title = values.length === 1 ? "删除词条" : "删除属性"; remove.addEventListener("click", () => row.remove()); row.append(remove); @@ -2434,8 +2433,7 @@ function addGradientStop(position, color, transparency, source) { } const remove = document.createElement("button"); remove.type = "button"; - remove.className = "icon-button"; - remove.textContent = "×"; + remove.className = "icon-button remove-button"; remove.title = "删除色标"; remove.addEventListener("click", () => row.remove()); row.append(remove); @@ -6637,10 +6635,9 @@ function renderFontList() { toggle.append(enabled, enabledText); const remove = document.createElement("button"); - remove.className = "font-delete"; + remove.className = "icon-button remove-button font-delete"; remove.type = "button"; remove.title = "删除字体"; - remove.textContent = "×"; remove.addEventListener("click", async () => { await changeFont(font); }); @@ -9973,8 +9970,7 @@ function renderBatchList() { const action = row.insertCell(); const remove = document.createElement("button"); remove.type = "button"; - remove.className = "icon-button"; - remove.textContent = "×"; + remove.className = "icon-button remove-button"; remove.title = "移除"; remove.disabled = batch.running; remove.addEventListener("click", () => { batch.items.splice(batch.items.indexOf(item), 1); renderBatchList(); }); @@ -12033,8 +12029,7 @@ function addStructureAttribute(attribute = {}) { } const remove = document.createElement("button"); remove.type = "button"; - remove.className = "icon-button"; - remove.textContent = "×"; + remove.className = "icon-button remove-button"; remove.title = "删除属性"; remove.addEventListener("click", () => row.remove()); row.append(remove); @@ -12052,9 +12047,9 @@ function addStructureReference(reference = {}) { for (const [index, item] of state.doc.pages.entries()) page.add(new Option(`第${index + 1}页`, item.id)); if (reference.pageId) page.value = reference.pageId; const remove = document.createElement("button"), add = document.createElement("button"); - for (const [button, label, text] of [[remove, "删除引用", "×"], [add, "添加图元", "+"]]) { + for (const [button, label, text] of [[remove, "删除引用", ""], [add, "添加图元", "+"]]) { button.type = "button"; - button.className = "icon-button"; + button.className = button === remove ? "icon-button remove-button" : "icon-button"; button.textContent = text; button.title = label; }