From 7126568b4795cb4d1e04b3f972ed787e328d6c4e Mon Sep 17 00:00:00 2001
From: xiaoqidun <xiaoqidun@gmail.com>
Date: Sun, 18 Oct 2026 02:33:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=B7=A5=E5=85=B7=E5=9B=BE=E6=A0=87):=20?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E5=B7=A5=E5=85=B7=E6=A0=8F=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E8=BD=AE=E5=BB=93=E4=B8=8E=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/webui/index.html |   6 +--
 assets/webui/ofdgo.css  | 109 ++++++++++------------------------------
 2 files changed, 30 insertions(+), 85 deletions(-)

diff --git a/assets/webui/index.html b/assets/webui/index.html
index 09ab43c..82d7224 100644
--- a/assets/webui/index.html
+++ b/assets/webui/index.html
@@ -23,9 +23,9 @@
 					<button id="newButton" class="icon-button" type="button" title="新建"><span class="new-icon"></span></button>
 					<button id="saveButton" class="icon-button" type="button" title="保存" disabled><span class="save-icon"></span></button>
 					<button id="editButton" class="icon-button" type="button" title="编辑" data-pressed="false" disabled><span class="edit-icon"></span></button>
-					<button id="convertButton" class="icon-button" type="button" title="转换"><span>&#8644;</span></button>
-					<button id="togglePagesButton" class="icon-button" type="button" title="页面栏" data-pressed="true">&#9776;</button>
-					<button id="toggleMetaButton" class="icon-button" type="button" title="信息栏" data-pressed="true">&#9432;</button>
+					<button id="convertButton" class="icon-button" type="button" title="转换"><span class="convert-icon"></span></button>
+					<button id="togglePagesButton" class="icon-button" type="button" title="页面栏" data-pressed="true"><span class="pages-icon"></span></button>
+					<button id="toggleMetaButton" class="icon-button" type="button" title="信息栏" data-pressed="true"><span class="info-icon"></span></button>
 				</div>
 				<div class="toolbar-space"></div>
 				<div class="tool-group">
diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css
index 6f45d4f..c9dd61f 100644
--- a/assets/webui/ofdgo.css
+++ b/assets/webui/ofdgo.css
@@ -559,105 +559,50 @@ button:not(:disabled):hover {
 	transform: rotate(180deg);
 }
 
-.open-icon {
-	position: relative;
-	width: 14px;
-	height: 12px;
-}
-
-.open-icon::before {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 6px;
-	height: 4px;
-	border: 1px solid currentColor;
-	border-bottom: 0;
-	content: "";
-}
-
-.open-icon::after {
-	position: absolute;
-	inset: 3px 0 0;
-	border: 1px solid currentColor;
-	content: "";
-}
-
+.open-icon,
 .close-icon,
-.new-icon {
-	position: relative;
-	width: 15px;
-	height: 15px;
-}
-
-.new-icon {
-	border: 1px solid currentColor;
-}
-
-.close-icon::before,
-.close-icon::after,
-.new-icon::before,
-.new-icon::after {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	width: 6px;
-	height: 1px;
-	background: currentColor;
-	content: "";
-	transform: translate(-50%, -50%);
-}
-
-.new-icon::after {
-	transform: translate(-50%, -50%) rotate(90deg);
-}
-
-.close-icon::before,
-.close-icon::after {
+.new-icon,
+.save-icon,
+.edit-icon,
+.convert-icon,
+.pages-icon,
+.info-icon {
 	width: 16px;
+	height: 16px;
+	flex: 0 0 16px;
+	background: currentColor;
 }
 
-.close-icon::before {
-	transform: translate(-50%, -50%) rotate(45deg);
+.open-icon {
+	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 7V4h6l3 3h9v13H3Z'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 
-.close-icon::after {
-	transform: translate(-50%, -50%) rotate(-45deg);
+.close-icon {
+	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='m5 5 14 14M19 5 5 19'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.new-icon {
+	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='M12 4v16M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 
 .save-icon {
-	width: 16px;
-	height: 16px;
-	background: currentColor;
 	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='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 
 .edit-icon {
-	position: relative;
-	width: 15px;
-	height: 15px;
-	transform: rotate(-45deg);
+	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='m15 4 5 5M3 21l2-7L16 3a2 2 0 0 1 5 5L10 19Z'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 
-.edit-icon::before {
-	position: absolute;
-	top: 5px;
-	left: 4px;
-	width: 9px;
-	height: 3px;
-	border: 1px solid currentColor;
-	content: "";
+.convert-icon {
+	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 7h18l-4-4M21 17H3l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 
-.edit-icon::after {
-	position: absolute;
-	top: 5px;
-	left: 0;
-	width: 4px;
-	height: 5px;
-	background: currentColor;
-	clip-path: polygon(0 50%, 100% 0, 100% 100%);
-	content: "";
+.pages-icon {
+	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='M4 5h16M4 12h16M4 19h16'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.info-icon {
+	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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 
 .toolbar-space {