dsh-plugin 0.1.1 → 1.0.0

package/src/client/Section.module.css

@@ -1,589 +0,0 @@
-/* DSH-Plugin Hub section styles. Colors resolve through the host's
- * --dsw-alias-* design tokens with the original light-mode literal as
- * fallback, so the section follows the active theme. */
-.root {
-  height: 100%;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  color: var(--dsw-alias-label-primary, #1f2328);
-}
-
-/* —— header —— */
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-  padding: 2px 2px 0;
-}
-
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.brandText {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  min-width: 0;
-}
-
-.title {
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 600;
-  margin: 0;
-}
-
-.tagline {
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-tertiary, #8b93a1);
-  margin: 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-/* —— ad banner —— */
-
-/* 广告条：固定蓝紫渐变 + 白字，不随主题变量漂移，两种主题下都醒目。
-   与 toast 相同思路：固定颜色保证可读性。 */
-.adBanner {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 12px;
-  border: 1px solid rgba(139, 92, 246, 0.55);
-  border-radius: 8px;
-  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
-  color: #ffffff;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.28);
-  transition: filter 0.15s ease, box-shadow 0.15s ease;
-}
-
-.adBanner:hover {
-  filter: brightness(1.1);
-  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.42);
-}
-
-.adBadge {
-  flex-shrink: 0;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  line-height: 1;
-  color: #ffffff;
-  background: rgba(255, 255, 255, 0.16);
-  border: 1px solid rgba(255, 255, 255, 0.55);
-  border-radius: 4px;
-  padding: 3px 6px;
-  white-space: nowrap;
-}
-
-.adText {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  line-height: 18px;
-  color: #ffffff;
-}
-
-.adArrow {
-  flex-shrink: 0;
-  margin-left: auto;
-  font-size: 13px;
-  color: #ffffff;
-}
-
-.search {
-  width: 190px;
-  font-size: 12px;
-  line-height: 18px;
-  color: inherit;
-  background: transparent;
-  border: 1px solid var(--dsw-alias-border-l2, #e5e7eb);
-  border-radius: 6px;
-  padding: 4px 9px;
-  outline: none;
-  transition: border-color 120ms ease;
-}
-
-.search::placeholder {
-  color: var(--dsw-alias-label-tertiary, #8b93a1);
-}
-
-.search:focus {
-  border-color: var(--dsw-alias-brand-primary, #4f6ef7);
-}
-
-.sort {
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-secondary, #6b7280);
-  background: transparent;
-  border: 1px solid var(--dsw-alias-border-l2, #e5e7eb);
-  border-radius: 6px;
-  padding: 4px 8px;
-  outline: none;
-  cursor: pointer;
-  user-select: none;
-}
-
-.sort:hover {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-interactive-bg-hover, rgba(128, 128, 128, 0.08));
-  border-color: var(--dsw-alias-button-ghost-active-border, #d0d4da);
-}
-
-.langBtn {
-  flex-shrink: 0;
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-secondary, #6b7280);
-  background: transparent;
-  border: 1px solid var(--dsw-alias-border-l2, #e5e7eb);
-  border-radius: 6px;
-  padding: 4px 9px;
-  cursor: pointer;
-  user-select: none;
-  transition: color 120ms ease, border-color 120ms ease;
-}
-
-.langBtn:hover {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-interactive-bg-hover, rgba(128, 128, 128, 0.08));
-  border-color: var(--dsw-alias-button-ghost-active-border, #d0d4da);
-}
-
-.openBtn {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 20px;
-  color: var(--dsw-alias-label-secondary, #6b7280);
-  text-decoration: none;
-  border: 1px solid var(--dsw-alias-border-l2, #e5e7eb);
-  border-radius: 6px;
-  padding: 3px 9px;
-  background: transparent;
-  cursor: pointer;
-  white-space: nowrap;
-  user-select: none;
-  transition: color 120ms ease, border-color 120ms ease;
-}
-
-.openBtn:hover {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-interactive-bg-hover, rgba(128, 128, 128, 0.08));
-  border-color: var(--dsw-alias-button-ghost-active-border, #d0d4da);
-}
-
-.openArrow {
-  font-size: 12px;
-  line-height: 1;
-}
-
-/* —— category chips —— */
-
-.tabs {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 2px 2px 8px;
-  border-bottom: 1px solid var(--dsw-alias-border-l1, #eceef1);
-}
-
-.tab,
-.tabActive {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-  font-size: 12px;
-  line-height: 18px;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  padding: 3px 10px;
-  cursor: pointer;
-  user-select: none;
-  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
-}
-
-.tab {
-  color: var(--dsw-alias-label-secondary, #6b7280);
-  background: transparent;
-  border-color: var(--dsw-alias-border-l2, #e5e7eb);
-}
-
-.tab:hover {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-interactive-bg-hover, rgba(128, 128, 128, 0.08));
-  border-color: var(--dsw-alias-border-l1, #eceef1);
-}
-
-.tabActive {
-  color: var(--dsw-alias-label-primary-foreground, #fff);
-  background: var(--dsw-alias-button-primary-fill, #1f2328);
-  border-color: var(--dsw-alias-button-primary-fill, #1f2328);
-}
-
-.tabCount,
-.tabCountActive {
-  font-size: 10px;
-  line-height: 14px;
-  border-radius: 999px;
-  padding: 0 5px;
-  min-width: 16px;
-  text-align: center;
-}
-
-.tabCount {
-  color: var(--dsw-alias-label-tertiary, #8b93a1);
-  background: var(--dsw-alias-bg-layer-2, rgba(128, 128, 128, 0.1));
-}
-
-.tabActive .tabCountActive {
-  color: var(--dsw-alias-label-primary-foreground, #fff);
-  background: rgba(128, 128, 128, 0.22);
-}
-
-/* —— body / list —— */
-
-.body {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.list {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 2px 4px 4px 2px;
-}
-
-.card {
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  gap: 12px;
-  border: 1px solid var(--dsw-alias-border-l2, #e5e7eb);
-  border-radius: 8px;
-  padding: 9px 12px;
-  background: var(--dsw-alias-bg-layer-1, rgba(128, 128, 128, 0.06));
-  transition: border-color 120ms ease, background 120ms ease;
-}
-
-.card:hover {
-  border-color: var(--dsw-alias-brand-primary, #4f6ef7);
-  background: var(--dsw-alias-bg-layer-2, rgba(128, 128, 128, 0.1));
-}
-
-.cardMain {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.cardHead {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.cardTitle {
-  font-size: 13px;
-  line-height: 18px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.categoryBadge,
-.verified {
-  flex-shrink: 0;
-  font-size: 10px;
-  line-height: 16px;
-  border-radius: 4px;
-  padding: 0 6px;
-  border: 1px solid transparent;
-}
-
-.categoryBadge {
-  color: var(--dsw-alias-brand-primary, #4f6ef7);
-  border-color: var(--dsw-alias-button-ghost-active-border, rgba(79, 110, 247, 0.25));
-}
-
-.verified {
-  color: var(--dsw-alias-state-success-primary, #1a7f37);
-  border-color: var(--dsw-alias-state-success-secondary, rgba(26, 127, 55, 0.3));
-}
-
-.desc {
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-secondary, #6b7280);
-  margin: 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.topics {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-wrap: wrap;
-  min-width: 0;
-}
-
-.topic {
-  flex-shrink: 0;
-  font-size: 10px;
-  line-height: 16px;
-  color: var(--dsw-alias-label-tertiary, #8b93a1);
-  background: var(--dsw-alias-bg-layer-2, rgba(128, 128, 128, 0.1));
-  border-radius: 4px;
-  padding: 0 6px;
-  white-space: nowrap;
-}
-
-.cardSide {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 6px;
-}
-
-.stats {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 1px;
-}
-
-.star {
-  font-size: 11px;
-  line-height: 16px;
-  color: var(--dsw-alias-state-warn-primary, #b8860b);
-  white-space: nowrap;
-}
-
-.fork {
-  font-size: 11px;
-  line-height: 16px;
-  color: var(--dsw-alias-label-tertiary, #8b93a1);
-  white-space: nowrap;
-}
-
-.date {
-  font-size: 10px;
-  line-height: 14px;
-  color: var(--dsw-alias-label-tertiary, #8b93a1);
-  white-space: nowrap;
-}
-
-.installBtn,
-.installBtnCopied,
-.detailBtn {
-  font-size: 11px;
-  line-height: 18px;
-  border-radius: 6px;
-  padding: 2px 10px;
-  cursor: pointer;
-  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
-}
-
-.installBtn {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-bg-layer-2, rgba(128, 128, 128, 0.06));
-  border: 1px solid var(--dsw-alias-border-l2, #e5e7eb);
-  user-select: none;
-}
-
-.installBtn:hover {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-interactive-bg-hover, rgba(128, 128, 128, 0.12));
-  border-color: var(--dsw-alias-button-ghost-active-border, #d0d4da);
-}
-
-/* Primary action: opens the plugin detail page on dsh-plugin.org.
-   Uses the host primary-button tokens so it follows the active theme
-   (light: dark fill / dark: light fill). */
-.detailBtn {
-  color: var(--dsw-alias-label-primary-foreground, #fff);
-  background: var(--dsw-alias-button-primary-fill, #1f2328);
-  border: 1px solid transparent;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  user-select: none;
-}
-
-.detailBtn:hover {
-  background: var(--dsw-alias-button-primary-hover, #43454a);
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-/* 复制成功态：成功绿描边 + 绿字 + 淡绿底，避免亮色下黑色实心块、暗色下白色实心块
-   的强对比，两种主题下都清晰醒目，且明确表达"已复制"语义。 */
-.installBtnCopied {
-  color: var(--dsw-alias-state-success-primary, #1a7f37);
-  background: rgba(34, 197, 94, 0.14);
-  border: 1px solid var(--dsw-alias-state-success-secondary, rgba(26, 127, 55, 0.4));
-  user-select: none;
-}
-
-/* 复制成功提示条：窗口正中央浮出，无遮罩无图标。采用反色浮层——亮色模式
-   黑底白字、暗色模式白底深字（复用主按钮 token：primary-fill 与
-   label-primary-foreground 在两种主题下正好互换），与页面背景相反，始终醒目。
-   base 上直接写死居中 transform，动画结束（fill-mode 默认 none）后
-   transform 会回落到 base 值，保证动画前后位置一致、不跳动。 */
-.toast {
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1000;
-  padding: 10px 16px;
-  border-radius: 8px;
-  background: var(--dsw-alias-button-primary-fill, #1f2328);
-  border: 1px solid transparent;
-  color: var(--dsw-alias-label-primary-foreground, #fff);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 18px;
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
-  animation: toastIn 220ms ease-out;
-  pointer-events: none;
-  white-space: nowrap;
-}
-
-@keyframes toastIn {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -44%);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
-}
-
-/* —— states —— */
-
-.state {
-  flex: 1;
-  min-height: 160px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 24px;
-  text-align: center;
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-tertiary, #8b93a1);
-}
-
-.stateTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
-}
-
-.stateDesc {
-  max-width: 420px;
-}
-
-.retryBtn {
-  margin-top: 4px;
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-secondary, #6b7280);
-  border: 1px solid var(--dsw-alias-border-l2, #e5e7eb);
-  border-radius: 6px;
-  padding: 4px 12px;
-  background: transparent;
-  cursor: pointer;
-  user-select: none;
-}
-
-.retryBtn:hover {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-interactive-bg-hover, rgba(128, 128, 128, 0.08));
-  border-color: var(--dsw-alias-button-ghost-active-border, #d0d4da);
-}
-
-/* —— footer —— */
-
-.footer {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 6px 4px 0;
-  border-top: 1px solid var(--dsw-alias-border-l1, #eceef1);
-}
-
-.footText {
-  font-size: 11px;
-  line-height: 16px;
-  color: var(--dsw-alias-label-tertiary, #8b93a1);
-}
-
-.footLink {
-  font-size: 11px;
-  line-height: 16px;
-  color: var(--dsw-alias-brand-primary, #4f6ef7);
-  text-decoration: none;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.footLink:hover {
-  text-decoration: underline;
-}