feat(工具图标): 统一工具栏图标轮廓与对齐

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="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">&#9776;</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">&#9432;</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">

assets/webui/ofdgo.css

@@ -559,105 +559,50 @@ button:not(:disabled):hover {
 	transform: rotate(180deg);
 }
 
-.open-icon {
+.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: "";
-}
-
 .close-icon,
-.new-icon {
+.new-icon,
-	position: relative;
+.save-icon,
-	width: 15px;
+.edit-icon,
-	height: 15px;
+.convert-icon,
-}
+.pages-icon,
-
+.info-icon {
-.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 {
 	width: 16px;
+	height: 16px;
+	flex: 0 0 16px;
+	background: currentColor;
 }
 
-.close-icon::before {
+.open-icon {
-	transform: translate(-50%, -50%) 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='M3 7V4h6l3 3h9v13H3Z'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 
-.close-icon::after {
+.close-icon {
-	transform: translate(-50%, -50%) 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='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;
+	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;
-	width: 15px;
-	height: 15px;
-	transform: rotate(-45deg);
 }
 
-.edit-icon::before {
+.convert-icon {
-	position: absolute;
+	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;
-	top: 5px;
-	left: 4px;
-	width: 9px;
-	height: 3px;
-	border: 1px solid currentColor;
-	content: "";
 }
 
-.edit-icon::after {
+.pages-icon {
-	position: absolute;
+	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;
-	top: 5px;
+}
-	left: 0;
+
-	width: 4px;
+.info-icon {
-	height: 5px;
+	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;
-	background: currentColor;
-	clip-path: polygon(0 50%, 100% 0, 100% 100%);
-	content: "";
 }
 
 .toolbar-space {