twskin 0.5.4 → 0.5.5

package/runtime/styles/manager.css

@@ -59,6 +59,7 @@ body.trae-skin-v2 #trae-dream-skin-button {
 }
 #trae-dream-skin-panel .ds-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
 #trae-dream-skin-panel .ds-config-toggle,
+#trae-dream-skin-panel .ds-sync,
 #trae-dream-skin-panel .ds-close,
 #trae-dream-skin-panel .ds-reload {
   border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px;
@@ -66,6 +67,12 @@ body.trae-skin-v2 #trae-dream-skin-button {
   font: inherit; cursor: pointer;
 }
 #trae-dream-skin-panel .ds-config-toggle { padding: 3px 7px; }
+#trae-dream-skin-panel .ds-sync { position: relative; padding: 3px 7px; }
+#trae-dream-skin-panel .ds-sync.ds-sync-pending::after {
+  content: ""; position: absolute; top: -3px; right: -3px;
+  width: 6px; height: 6px; border-radius: 50%; background: #ff8d98;
+  border: 1px solid rgba(20, 22, 34, 0.9);
+}
 #trae-dream-skin-panel .ds-close,
 #trae-dream-skin-panel .ds-reload {
   box-sizing: border-box; width: 23px; height: 23px; padding: 0;
@@ -73,6 +80,7 @@ body.trae-skin-v2 #trae-dream-skin-button {
   font-size: 14px; line-height: 1;
 }
 #trae-dream-skin-panel .ds-config-toggle:hover,
+#trae-dream-skin-panel .ds-sync:hover:not(:disabled),
 #trae-dream-skin-panel .ds-close:hover,
 #trae-dream-skin-panel .ds-reload:hover { background: rgba(255, 255, 255, 0.14); }
 @keyframes trae-skin-spin { to { transform: rotate(360deg); } }
@@ -81,6 +89,7 @@ body.trae-skin-v2 #trae-dream-skin-button {
 #trae-dream-skin-panel .ds-reload.ds-reload-loading .ds-reload-icon {
   animation: trae-skin-spin 0.8s linear infinite;
 }
+#trae-dream-skin-panel .ds-sync:disabled { opacity: 0.55; cursor: wait; }
 #trae-dream-skin-panel .ds-body {
   flex: 1 1 auto; overflow-y: auto; padding: 12px;
   scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
@@ -92,6 +101,22 @@ body.trae-skin-v2 #trae-dream-skin-button {
 #trae-dream-skin-panel .ds-gallery-view {
   display: grid; grid-template-columns: 1fr; gap: 4px;
 }
+#trae-dream-skin-panel .ds-sync-banner {
+  display: none; align-items: center; justify-content: space-between; gap: 8px;
+  margin: 0 0 9px; padding: 7px 8px; border-radius: 8px;
+  border: 1px solid rgba(124, 156, 255, 0.38); background: rgba(124, 156, 255, 0.1);
+  font-size: 10px;
+}
+#trae-dream-skin-panel .ds-sync-banner.ds-sync-error {
+  border-color: rgba(255, 102, 117, 0.58); background: rgba(255, 82, 99, 0.1);
+}
+#trae-dream-skin-panel .ds-sync-copy { min-width: 0; flex: 1 1 auto; }
+#trae-dream-skin-panel .ds-sync-action {
+  flex: 0 0 auto; padding: 3px 7px; border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, 0.2); color: inherit;
+  background: rgba(255, 255, 255, 0.1); font: inherit; cursor: pointer;
+}
+#trae-dream-skin-panel .ds-sync-action:hover { background: rgba(255, 255, 255, 0.18); }
 #trae-dream-skin-panel .ds-gallery-view,
 #trae-dream-skin-panel .ds-config-view { animation: trae-skin-fade-in 0.15s ease; }
 /* 分类 Tab */
@@ -273,6 +298,10 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-tab.ds-tab-active {
   display: block; font-size: 12px; font-weight: 600;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
+#trae-dream-skin-panel .ds-version {
+  display: block; margin-top: 1px; font-size: 9px; opacity: 0.48;
+  font-variant-numeric: tabular-nums;
+}
 #trae-dream-skin-panel .ds-desc {
   display: block; margin-top: 1px; font-size: 10px; opacity: 0.65;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -306,6 +335,7 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-body::-webkit-scrollbar-thumb { bac
 body.trae-skin-v2 #trae-dream-skin-panel .ds-body::-webkit-scrollbar-thumb:hover { background: var(--trae-skin-scrollbar-hover); }
 body.trae-skin-effects-max #trae-dream-skin-panel .ds-header { padding-right: 16px; }
 body.trae-skin-v2 #trae-dream-skin-panel .ds-config-toggle,
+body.trae-skin-v2 #trae-dream-skin-panel .ds-sync,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-close,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-reload,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-copy-config,
@@ -316,6 +346,7 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-reset-cancel {
   border-color: var(--trae-skin-border-default);
 }
 body.trae-skin-v2 #trae-dream-skin-panel .ds-config-toggle:hover,
+body.trae-skin-v2 #trae-dream-skin-panel .ds-sync:hover:not(:disabled),
 body.trae-skin-v2 #trae-dream-skin-panel .ds-close:hover,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-reload:hover,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-copy-config:hover,
@@ -337,6 +368,12 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-setting-row {
   background: var(--trae-skin-info-subtle);
   border-color: var(--trae-skin-border-subtle);
 }
+body.trae-skin-v2 #trae-dream-skin-panel .ds-sync-banner {
+  border-color: var(--trae-skin-border-default); background: var(--trae-skin-info-subtle);
+}
+body.trae-skin-v2 #trae-dream-skin-panel .ds-sync-banner.ds-sync-error {
+  border-color: var(--trae-skin-error); background: color-mix(in srgb, var(--trae-skin-error) 12%, transparent);
+}
 body.trae-skin-v2 #trae-dream-skin-panel .ds-switch[aria-checked="true"] {
   background: var(--trae-skin-accent);
   border-color: var(--trae-skin-border-strong);