dsh-plugin 0.1.1 → 1.0.0

package/src/client/styles/List.module.css

@@ -0,0 +1,324 @@
+/* Plugin Hub catalog list: the scrollable body, plugin cards (name, badges,
+ * description, topics, stats, actions), loading / empty states and the
+ * browse-all footer. Colors resolve through the --hub-* design tokens. */
+
+.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(--hub-border-2);
+  border-radius: 8px;
+  padding: 9px 12px;
+  background: var(--hub-bg-1);
+  transition: border-color 120ms ease, background 120ms ease;
+}
+
+.card:hover {
+  border-color: var(--hub-brand);
+  background: var(--hub-bg-2);
+}
+
+.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,
+.versionBadge,
+.updateBadge {
+  flex-shrink: 0;
+  font-size: 10px;
+  line-height: 16px;
+  border-radius: 4px;
+  padding: 0 6px;
+  border: 1px solid transparent;
+}
+
+.categoryBadge {
+  color: var(--hub-brand);
+  border-color: var(--hub-border-ghost);
+}
+
+.verified {
+  color: var(--hub-success);
+  border-color: var(--hub-success-border);
+}
+
+/* 版本号徽标：中性灰，紧凑展示已发布版本（有 release 的仓库） */
+.versionBadge {
+  color: var(--hub-text-secondary);
+  border-color: var(--hub-border-input);
+}
+
+/* 有更新徽标：警示色（与 star 的琥珀同族），已安装且有新版本/新提交时醒目提示 */
+.updateBadge {
+  color: var(--hub-warn);
+  border-color: var(--hub-warn-border);
+  background: var(--hub-warn-tint);
+}
+
+.desc {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--hub-text-secondary);
+  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(--hub-text-tertiary);
+  background: var(--hub-bg-3);
+  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(--hub-warn);
+  white-space: nowrap;
+}
+
+.fork {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--hub-text-tertiary);
+  white-space: nowrap;
+}
+
+.date {
+  font-size: 10px;
+  line-height: 14px;
+  color: var(--hub-text-tertiary);
+  white-space: nowrap;
+}
+
+.installBtn,
+.installBtnCopied,
+.installBtnInstalled,
+.installBtnUpdate,
+.uninstallBtn,
+.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;
+}
+
+/* 已安装态：绿色禁用按钮，明确表达"已安装"，不可再次点击安装 */
+.installBtnInstalled {
+  color: var(--hub-success);
+  background: var(--hub-success-tint);
+  border: none;
+  cursor: default;
+  user-select: none;
+}
+
+/* 可更新：琥珀警示色实底按钮（与 star / 有更新徽标同族），点击直接覆盖安装更新 */
+.installBtnUpdate {
+  color: #fff;
+  background: var(--hub-warn);
+  border: none;
+  font-weight: 500;
+  user-select: none;
+}
+
+.installBtnUpdate:hover {
+  background: var(--hub-warn-strong);
+}
+
+/* 卸载：危险色文字按钮，默认无底，悬浮转鲜红实底白字 */
+.uninstallBtn {
+  color: var(--hub-danger);
+  background: transparent;
+  border: none;
+  user-select: none;
+}
+
+.uninstallBtn:hover {
+  color: #ffffff;
+  background: var(--hub-danger);
+}
+
+.installBtn {
+  color: var(--hub-text-on-fill);
+  background: var(--hub-btn-fill);
+  border: none;
+  font-weight: 500;
+  user-select: none;
+}
+
+.installBtn:hover {
+  background: var(--hub-btn-hover);
+}
+
+/* 查看详情：次级文字按钮（安装为主 CTA，详情为辅助入口），无默认底、悬浮加深 */
+.detailBtn {
+  color: var(--hub-text-secondary);
+  background: transparent;
+  border: none;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+}
+
+.detailBtn:hover {
+  color: var(--hub-text-primary);
+  background: var(--hub-bg-hover);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 复制成功态：成功绿字 + 淡绿底，避免亮色下黑色实心块、暗色下白色实心块
+   的强对比，两种主题下都清晰醒目，且明确表达"已复制"语义。 */
+.installBtnCopied {
+  color: var(--hub-success);
+  background: var(--hub-success-tint);
+  border: none;
+  user-select: none;
+}
+
+/* —— 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(--hub-text-tertiary);
+}
+
+.stateTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--hub-text-primary);
+}
+
+.stateDesc {
+  max-width: 420px;
+}
+
+.retryBtn {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--hub-text-secondary);
+  border: none;
+  border-radius: 6px;
+  padding: 4px 12px;
+  background: transparent;
+  cursor: pointer;
+  user-select: none;
+}
+
+.retryBtn:hover {
+  color: var(--hub-text-primary);
+  background: var(--hub-bg-hover);
+}
+
+/* —— footer —— */
+
+.footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 6px 4px 0;
+  border-top: 1px solid var(--hub-border-1);
+}
+
+.footLink {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--hub-brand);
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.footLink:hover {
+  text-decoration: underline;
+}