iter(g105): 标签页支持可关闭页签

packages/skin/ui/ui.css

@@ -1461,6 +1461,47 @@ button.ua-step-dot:hover {
   color: var(--ua-color-accent);
   font-weight: 500;
 }
+.ua-tab-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.ua-tab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: -4px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--ua-color-text-muted);
+  font-size: var(--ua-font-size-md);
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, background-color 0.15s, color 0.15s;
+}
+.ua-tab-item:hover .ua-tab-close,
+.ua-tab-item:focus-within .ua-tab-close {
+  opacity: 1;
+}
+.ua-tab-close:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--ua-color-accent);
+  outline-offset: 1px;
+}
+.ua-tab-close:hover {
+  color: var(--ua-color-text);
+  background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent);
+}
+@media (hover: none) {
+  .ua-tab-close {
+    opacity: 1;
+  }
+}
 .ua-tabs-indicator {
   position: absolute;
   bottom: -1px;