@taskon/widget-react 0.0.1-beta.1

package/dist/WidgetShell.css

@@ -0,0 +1,182 @@
+/**
+ * Dialog 组件样式
+ * 基于 Radix UI Dialog 封装
+ * 使用 taskon-dialog-* 命名空间
+ */
+
+/* ==================== 遮罩层 ==================== */
+.taskon-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  /* 复刻 Vue --bg-page-mask-20: rgb(66 66 66 / 50%) */
+  background-color: var(--taskon-color-overlay, rgba(66, 66, 66, 0.5));
+  backdrop-filter: blur(24px);
+
+  /* 动画 */
+  animation: taskon-dialog-overlay-fade-in 150ms ease-out;
+}
+
+.taskon-dialog-overlay[data-state="closed"] {
+  animation: taskon-dialog-overlay-fade-out 150ms ease-in;
+}
+
+@keyframes taskon-dialog-overlay-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes taskon-dialog-overlay-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ==================== 弹窗内容 ==================== */
+.taskon-dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+
+  /* 尺寸 */
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+
+  /* 样式 - 复刻 Vue --bg-popup-basic-100: #0d0d0d */
+  background-color: var(--taskon-color-bg-popup, #0d0d0d);
+  color: var(--taskon-color-text, #ffffff);
+  border-radius: var(--taskon-border-radius-lg, 16px);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  /* 布局 */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* 移除默认的 focus outline */
+  outline: none;
+
+  /* 动画 */
+  animation: taskon-dialog-content-fade-in 200ms ease-out;
+}
+
+.taskon-dialog-content[data-state="closed"] {
+  animation: taskon-dialog-content-fade-out 150ms ease-in;
+}
+
+@keyframes taskon-dialog-content-fade-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes taskon-dialog-content-fade-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+}
+
+/* ==================== 无障碍标题/描述（屏幕阅读器可见） ==================== */
+.taskon-dialog-title--sr-only,
+.taskon-dialog-description--sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ==================== 头部操作区 ==================== */
+.taskon-dialog-header {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.taskon-dialog-header-slot {
+  display: flex;
+  align-items: center;
+}
+
+/* ==================== 关闭按钮 ==================== */
+.taskon-dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 32px;
+  height: 32px;
+  padding: 0;
+
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: var(--taskon-border-radius, 8px);
+  cursor: pointer;
+
+  color: var(--taskon-color-text-secondary, #888);
+  transition: all 0.2s ease;
+}
+
+.taskon-dialog-close:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: var(--taskon-color-text, #fff);
+}
+
+.taskon-dialog-close:focus-visible {
+  outline: 2px solid var(--taskon-color-primary, #3b82f6);
+  outline-offset: 2px;
+}
+
+/* ==================== 主体内容 ==================== */
+.taskon-dialog-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-dialog-content {
+    width: 95vw;
+    max-height: 90vh;
+    border-radius: var(--taskon-border-radius, 12px);
+  }
+
+  .taskon-dialog-body {
+    padding: 20px;
+  }
+
+  .taskon-dialog-header {
+    top: 12px;
+    right: 12px;
+  }
+}