feat(前端界面): 精简渲染设置，统一DPI控制，优化工具栏宽窄屏布局

assets/webui/ofdgo.css

@@ -607,8 +607,7 @@ button:not(:disabled):hover {
 }
 
 .format-select,
-.order-select,
-.render-panel select {
+.order-select {
 	width: 58px;
 	height: var(--control-height);
 	min-width: 0;
@@ -619,8 +618,46 @@ button:not(:disabled):hover {
 	color: #1f2428;
 }
 
-.dpi-select {
-	width: 79px;
+.toolbar-select {
+	position: relative;
+	display: inline-flex;
+}
+
+.toolbar-select .format-select {
+	width: calc(2em + 22px);
+	border-color: var(--line-strong);
+	appearance: none;
+	color: transparent;
+}
+
+.toolbar-select option {
+	color: #1f2428;
+}
+
+.toolbar-select > span {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-right: 12px;
+	pointer-events: none;
+}
+
+.toolbar-select::after {
+	position: absolute;
+	right: 7px;
+	top: calc(50% - 2px);
+	border: 4px solid transparent;
+	border-bottom: 0;
+	border-top-color: currentColor;
+	pointer-events: none;
+	content: "";
+}
+
+.toolbar-select select:disabled + span,
+.toolbar-select:has(select:disabled)::after {
+	opacity: 0.48;
 }
 
 .form-dialog {
@@ -1014,99 +1051,6 @@ body[data-hide-meta] .meta-panel {
 	font-size: 12px;
 }
 
-.render-panel {
-	--render-controls-width: 166px;
-	--render-modes-width: 79px;
-	position: relative;
-	margin-bottom: 12px;
-	padding-bottom: 12px;
-	border-bottom: 1px solid var(--line);
-}
-
-.render-panel select {
-	width: 100%;
-	height: 28px;
-	font-size: 12px;
-}
-
-.render-mode-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	font-size: 12px;
-}
-
-.render-panel .panel-row {
-	flex-wrap: nowrap;
-	margin-bottom: 6px;
-}
-
-.render-controls {
-	display: grid;
-	grid-template-columns: var(--render-modes-width) minmax(0, 1fr);
-	align-items: center;
-	width: var(--render-controls-width);
-	gap: 8px;
-}
-
-.render-modes {
-	display: flex;
-	flex: none;
-}
-
-.render-modes .small-button {
-	width: 40px;
-	height: 28px;
-	padding: 0;
-}
-
-.render-modes .small-button + .small-button {
-	margin-left: -1px;
-}
-
-.render-modes .small-button[aria-pressed="true"] {
-	position: relative;
-	border-color: var(--accent);
-	background: var(--accent-soft);
-	color: var(--accent-strong);
-}
-
-.render-support {
-	font-size: 12px;
-	color: var(--text-muted);
-}
-
-.render-support summary {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: calc(var(--render-controls-width) - var(--render-modes-width) - 8px);
-	text-align: center;
-	line-height: 28px;
-	cursor: pointer;
-	color: var(--accent-strong);
-}
-
-.render-support dl {
-	margin: 8px 0 0;
-}
-
-.render-support dl > div {
-	display: flex;
-	justify-content: space-between;
-	gap: 16px;
-	margin-top: 6px;
-}
-
-.render-support dd {
-	min-width: 0;
-	margin: 0;
-	text-align: right;
-	overflow-wrap: anywhere;
-	color: #1f2428;
-}
-
 .app-refresh {
 	width: 26px;
 	padding: 0;
@@ -2660,12 +2604,17 @@ button.outline-link:hover {
 		min-width: 34px;
 	}
 
-	.format-select {
-		width: 52px;
-		padding: 0 3px;
+	.toolbar-select .format-select {
+		width: var(--control-height);
+		padding: 0;
 	}
 
-	.dpi-select {
-		width: 79px;
+	.toolbar-select::after {
+		display: none;
+	}
+
+	.toolbar-select > span {
+		padding: 0;
+		font-size: 11px;
 	}
 }