@taskon/widget-react 0.0.1-beta.4 → 0.0.1-beta.6

package/dist/EligibilityInfo.css

@@ -810,8 +810,8 @@
 
 .taskon-task-verify-failed-dialog-message {
   margin-top: var(--taskon-spacing-sm);
-  font-size: 16px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
   color: var(--taskon-color-text-tertiary);
   white-space: pre-wrap;
 }
@@ -870,7 +870,7 @@
   border-radius: var(--taskon-border-radius);
   background: var(--taskon-color-bg-surface-subtle);
   color: var(--taskon-color-text);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   outline: none;
   transition: border-color 0.2s ease;
 }
@@ -958,8 +958,8 @@
 
 .taskon-pow-image-upload-tip {
   margin-top: 13px;
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.43;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   white-space: pre-wrap;
@@ -1025,8 +1025,10 @@
 
 .taskon-pow-error {
   margin-top: 10px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   color: var(--taskon-color-error);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 /* ============================================
@@ -1038,9 +1040,9 @@
 .taskon-pow-review-time {
   margin-top: 10px;
   color: var(--taskon-color-warning);
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  line-height: 16px;
+  line-height: 1.33;
 }
 
 /* ============================================
@@ -1118,7 +1120,7 @@
 }
 
 .taskon-dynamic-points-value {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
   color: var(--taskon-color-text);
 }
@@ -1128,7 +1130,7 @@
 }
 
 .taskon-dynamic-points-max {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text-tertiary);
   text-transform: capitalize;
@@ -1194,7 +1196,7 @@
 }
 
 .taskon-dynamic-points-cooldown {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-link);
 }
@@ -1224,7 +1226,7 @@
 }
 
 .taskon-swap-rules-title {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text-tertiary);
   margin-bottom: var(--taskon-spacing-sm);
@@ -1238,7 +1240,7 @@
   padding: var(--taskon-spacing-md);
   border-radius: var(--taskon-border-radius);
   background: var(--taskon-color-bg-surface-subtle);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text-tertiary);
 }
@@ -1264,7 +1266,7 @@
 }
 
 .taskon-swap-instructions-title {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text-tertiary);
   margin-bottom: var(--taskon-spacing-sm);
@@ -1295,7 +1297,7 @@
 /* Dialog title */
 
 .taskon-outer-point-api-dialog-title {
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
   color: var(--taskon-color-text);
   margin: 0;
@@ -1311,8 +1313,8 @@
   border-radius: var(--taskon-border-radius);
   background: var(--taskon-color-warning-bg);
   color: var(--taskon-color-warning);
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.43;
 }
 
 .taskon-outer-point-api-dialog-warning-icon {
@@ -1324,8 +1326,8 @@
 /* Description text */
 
 .taskon-outer-point-api-dialog-desc {
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.43;
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -1338,7 +1340,7 @@
 }
 
 .taskon-outer-point-api-dialog-label {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text-secondary);
 }
@@ -1351,8 +1353,8 @@
   border: 1px solid var(--taskon-color-border);
   background: var(--taskon-color-bg-surface-subtle);
   color: var(--taskon-color-text);
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.43;
   outline: none;
   transition: border-color 0.2s ease;
   box-sizing: border-box;
@@ -1371,8 +1373,10 @@
 }
 
 .taskon-outer-point-api-dialog-error {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   color: var(--taskon-color-error);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 /* Action buttons */
@@ -1387,7 +1391,7 @@
 .taskon-outer-point-api-dialog-btn {
   padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
   border-radius: var(--taskon-border-radius);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -1474,14 +1478,14 @@
 }
 
 .taskon-task-list-section-title {
-  font-size: 22px;
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 600;
-  line-height: 21px;
+  line-height: 1;
   color: var(--taskon-color-text);
 }
 
 .taskon-task-list-section-hint {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -1597,7 +1601,7 @@
   display: flex;
   align-items: center;
   gap: var(--taskon-spacing-xs);
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -1645,8 +1649,8 @@
   height: 20px;
   /* 文字样式 */
   color: var(--taskon-color-primary);
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.33;
   font-weight: 500;
   text-align: center;
   display: flex;
@@ -1658,8 +1662,8 @@
 
 .taskon-task-item-recurrence .taskon-cooldown-timer {
   color: var(--taskon-color-primary);
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.33;
   font-weight: 500;
 }
 
@@ -1706,10 +1710,10 @@
 
 .taskon-task-item-title {
   display: inline;
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 500;
   color: var(--taskon-color-text);
-  line-height: 23px;
+  line-height: 1.28;
   overflow-wrap: break-word;
 }
 
@@ -1780,7 +1784,7 @@
   gap: 2px;
   background: var(--taskon-color-bg-surface-subtle);
   border-radius: var(--taskon-border-radius-sm);
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
 }
 
@@ -1795,7 +1799,7 @@
 }
 
 .taskon-task-item-points-time {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -1808,7 +1812,7 @@
 /* Total points */
 
 .taskon-task-item-total-points {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   color: var(--taskon-color-text-disabled);
 }
 
@@ -1824,12 +1828,12 @@
 
 .taskon-task-item-total-earn-text {
   color: var(--taskon-color-text-tertiary);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
 }
 
 .taskon-task-item-total-earn-value {
   color: var(--taskon-color-primary);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   margin: 0 4px;
 }
 
@@ -1849,8 +1853,8 @@
 }
 
 .taskon-task-item-desc {
-  font-size: 14px;
-  line-height: 21px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.5;
   color: var(--taskon-color-text-tertiary);
   word-break: break-word;
   white-space: pre-wrap;
@@ -1868,7 +1872,7 @@
   display: flex;
   align-items: baseline;
   gap: var(--taskon-spacing-sm);
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
 }
 
 .taskon-task-item-field-key {
@@ -1897,7 +1901,7 @@
   display: inline-flex;
   align-items: center;
   padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
   color: var(--taskon-color-primary);
   background: transparent;
@@ -1952,7 +1956,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--taskon-spacing-xs);
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   color: var(--taskon-color-warning);
 }
 
@@ -1967,9 +1971,9 @@
   gap: var(--taskon-spacing-xs);
   height: 34px;
   padding: 0 var(--taskon-spacing-md);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-text);
   background: transparent;
   border: 1px solid var(--taskon-color-border);
@@ -2018,7 +2022,7 @@
   gap: var(--taskon-spacing-xs);
   padding: 0;
   margin-top: var(--taskon-spacing-sm);
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
   color: var(--taskon-color-text);
   background: transparent;
@@ -2111,8 +2115,8 @@
    ============================================ */
 
 .taskon-task-time-range {
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
   margin-top: 14px;
 }
 
@@ -2205,17 +2209,29 @@
   container-type: inline-size;
   position: relative;
   width: min(520px, 92vw);
+  min-height: 500px;
+  padding: 24px var(--taskon-spacing-lg) 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   overflow: hidden;
-  padding-top: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-blindbox-dialog-title {
-  margin: 0 0 var(--taskon-spacing-md);
-  padding: 0 var(--taskon-spacing-lg);
-  font-size: 22px;
+  margin: 0;
+  font-size: 32px;
   font-weight: 600;
-  line-height: 1.4;
+  line-height: 1.25;
   color: #fff;
+  text-align: center;
+}
+
+.taskon-quest-blindbox-dialog-subtitle {
+  margin: 12px 0 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
 }
 
 /* Stage container - centered square area for animation */
@@ -2227,7 +2243,7 @@
   justify-content: center;
   width: 100%;
   max-width: 420px;
-  margin: 0 auto;
+  margin: 0 auto auto;
   aspect-ratio: 1;
   overflow: visible;
   border-radius: 32px;
@@ -2335,41 +2351,23 @@
 .taskon-quest-blindbox-reward {
   container-type: inline-size;
   position: relative;
-  width: 510px;
-  max-width: 92vw;
-  padding: 48px var(--taskon-spacing-lg);
+  width: min(520px, 92vw);
+  min-height: 500px;
+  padding: 24px var(--taskon-spacing-lg) 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
   color: #fff;
   overflow: hidden;
 }
 
-/* Light background effect */
-
-.taskon-quest-blindbox-reward-light {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: 120%;
-  max-width: none;
-  transform: translateX(-50%);
-  object-fit: contain;
-  pointer-events: none;
-  opacity: 0;
-  animation: taskon-blindbox-light-appear 2s ease-out forwards;
-}
-
-@keyframes taskon-blindbox-light-appear {
-  to {
-    opacity: 1;
-  }
-}
-
 /* Title */
 
 .taskon-quest-blindbox-reward-title {
   font-size: 32px;
   font-weight: 600;
-  line-height: 40px;
+  line-height: 1.25;
   margin: 0;
 }
 
@@ -2377,7 +2375,8 @@
 
 .taskon-quest-blindbox-reward-subtitle {
   margin-top: 12px;
-  font-size: 16px;
+  margin-bottom: 0;
+  font-size: var(--taskon-font-size-lg);
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.7);
 }
@@ -2389,7 +2388,7 @@
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  margin-top: var(--taskon-spacing-lg);
+  margin-top: 20px;
   gap: var(--taskon-spacing-sm);
   padding: 12px var(--taskon-spacing-md);
   border-radius: var(--taskon-border-radius);
@@ -2422,20 +2421,20 @@
 /* Token amount with orange color and underline like Vue version */
 
 .taskon-quest-blindbox-reward-card-amount {
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
   color: #fbb15a;
   text-decoration: underline;
 }
 
 .taskon-quest-blindbox-reward-card-name {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   color: #fbb15a;
   text-decoration: underline;
 }
 
 .taskon-quest-blindbox-reward-card-value {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   color: rgba(255, 255, 255, 0.5);
   margin-top: 2px;
 }
@@ -2445,7 +2444,8 @@
 .taskon-quest-blindbox-reward-btn-wrap {
   display: flex;
   justify-content: center;
-  margin-top: 40px;
+  margin-top: auto;
+  padding-top: 40px;
 }
 
 /* Back button - matches Vue g-button--light-border */
@@ -2453,7 +2453,7 @@
 .taskon-quest-blindbox-reward-btn {
   height: 36px;
   padding: 0 24px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: #fff;
   background: transparent;
@@ -2483,7 +2483,7 @@
   gap: 8px;
   width: 100%;
   padding: 14px 24px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
   color: #000;
   background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
@@ -2510,19 +2510,21 @@
 @supports (container-type: inline-size) {
     @container (min-width: 751px) {
   .taskon-quest-blindbox-dialog {
-    padding-top: 40px;
+    min-height: 540px;
+    padding: 32px 40px 48px;
   }
 
-  .taskon-quest-blindbox-dialog-title {
-    padding: 0 40px;
+  .taskon-quest-blindbox-dialog-subtitle {
+    margin-bottom: 28px;
   }
 
   .taskon-quest-blindbox-reward {
-    padding: 64px 40px;
+    min-height: 540px;
+    padding: 32px 40px 48px;
   }
 
   .taskon-quest-blindbox-reward-btn-wrap {
-    margin-top: 60px;
+    padding-top: 56px;
   }
     }
   }
@@ -2530,19 +2532,21 @@
 @supports not (container-type: inline-size) {
     @media (min-width: 751px) {
   .taskon-quest-blindbox-dialog {
-    padding-top: 40px;
+    min-height: 540px;
+    padding: 32px 40px 48px;
   }
 
-  .taskon-quest-blindbox-dialog-title {
-    padding: 0 40px;
+  .taskon-quest-blindbox-dialog-subtitle {
+    margin-bottom: 28px;
   }
 
   .taskon-quest-blindbox-reward {
-    padding: 64px 40px;
+    min-height: 540px;
+    padding: 32px 40px 48px;
   }
 
   .taskon-quest-blindbox-reward-btn-wrap {
-    margin-top: 60px;
+    padding-top: 56px;
   }
     }
   }
@@ -2600,8 +2604,8 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  font-size: 16px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
   cursor: pointer;
   user-select: none;
 }
@@ -2755,8 +2759,8 @@
 
 .taskon-quest-eligs-item-content {
   flex: 1;
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
   color: var(--taskon-color-text-secondary);
 }
 
@@ -2800,8 +2804,8 @@
   margin-top: 4px;
   padding: 8px 12px;
   max-width: 300px;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.33;
   color: var(--taskon-color-text);
   background-color: var(--taskon-color-bg-floating);
   border-radius: var(--taskon-border-radius-sm);
@@ -2857,8 +2861,8 @@
 }
 
 .taskon-quest-eligs-sub-list li {
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
   color: var(--taskon-color-text-secondary);
 }
 
@@ -2939,7 +2943,7 @@
   border-radius: var(--taskon-border-radius);
   box-shadow: 0 4px 16px var(--taskon-color-bg-mask);
   z-index: 100;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   line-height: 1.5;
 }
 
@@ -2975,8 +2979,8 @@
 .taskon-quest-eligs-onchain-tooltip-link {
   color: var(--taskon-color-link);
   text-decoration: underline;
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
 }
 
 .taskon-quest-eligs-onchain-tooltip-link:hover {
@@ -3011,7 +3015,7 @@
   padding: 4px 8px;
   background-color: var(--taskon-color-bg-surface);
   border-radius: var(--taskon-border-radius-sm);
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   color: var(--taskon-color-secondary);
   white-space: nowrap;
   pointer-events: none;