feat: add env task global setting

web/src/assets/index.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 
 /* Sonner toast styles */
 [data-sonner-toaster] {
@@ -135,28 +136,36 @@
 @layer base {
   * {
     @apply outline-ring/50;
+    font-family: inherit;
   }
+
   *,
   ::before,
   ::after {
     border-color: transparent;
   }
+
   .border,
   [class*="border-"] {
     border-color: var(--border);
   }
+
   body {
     @apply bg-background text-foreground antialiased;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     font-size: 14px;
     line-height: 1.5;
+    letter-spacing: -0.01em;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
   }
 
-  .font-code {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  .font-code,
+  .font-mono,
+  code,
+  pre {
+    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
   }
 }
 
@@ -189,16 +198,20 @@ body {
 }
 
 /* 按钮增强 - 更流畅的交互 */
-button, [role="button"] {
+button,
+[role="button"] {
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-button:active, [role="button"]:active {
+button:active,
+[role="button"]:active {
   transform: scale(0.98);
 }
 
 /* 输入框增强 - 聚焦效果 */
-input:focus, textarea:focus, select:focus {
+input:focus,
+textarea:focus,
+select:focus {
   box-shadow: 0 0 0 3px oklch(from var(--ring) l c h / 0.1);
   transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -218,7 +231,8 @@ table tbody tr:hover {
 }
 
 /* 模态框和弹出层增强 - 背景模糊 */
-[role="dialog"]::backdrop, [data-state="open"]::backdrop {
+[role="dialog"]::backdrop,
+[data-state="open"]::backdrop {
   backdrop-filter: blur(4px);
   animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -227,13 +241,15 @@ table tbody tr:hover {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
 }
 
 /* 代码块增强 */
-code, pre {
+code,
+pre {
   background: oklch(from var(--muted) l c h / 0.5);
   border-radius: calc(var(--radius) - 2px);
   padding: 0.125rem 0.375rem;
@@ -247,7 +263,10 @@ pre code {
 }
 
 /* Windows 小字体优化 */
-.text-xs, .text-sm, [class*="text-xs"], [class*="text-sm"] {
+.text-xs,
+.text-sm,
+[class*="text-xs"],
+[class*="text-sm"] {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-weight: 400;
@@ -255,25 +274,30 @@ pre code {
 }
 
 /* 表格和列表中的小字体优化 */
-table, [role="table"] {
+table,
+[role="table"] {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 /* 命令和路径文本优化 */
-code, pre, [class*="font-mono"] {
+code,
+pre,
+[class*="font-mono"] {
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   font-weight: 400;
 }
 
 /* 徽章和标签增强 */
-[class*="badge"], [class*="tag"] {
+[class*="badge"],
+[class*="tag"] {
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
-[class*="badge"]:hover, [class*="tag"]:hover {
+[class*="badge"]:hover,
+[class*="tag"]:hover {
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
 }
 
@@ -282,18 +306,17 @@ code, pre, [class*="font-mono"] {
   0% {
     background-position: -1000px 0;
   }
+
   100% {
     background-position: 1000px 0;
   }
 }
 
 .skeleton {
-  background: linear-gradient(
-    90deg,
-    oklch(from var(--muted) l c h / 0.3) 0%,
-    oklch(from var(--muted) l c h / 0.5) 50%,
-    oklch(from var(--muted) l c h / 0.3) 100%
-  );
+  background: linear-gradient(90deg,
+      oklch(from var(--muted) l c h / 0.3) 0%,
+      oklch(from var(--muted) l c h / 0.5) 50%,
+      oklch(from var(--muted) l c h / 0.3) 100%);
   background-size: 1000px 100%;
   animation: shimmer 2s infinite linear;
 }
@@ -341,25 +364,33 @@ code, pre, [class*="font-mono"] {
   background: oklch(from var(--primary) l c h / 0.3);
 }
 
-/* Number input spinner buttons - dark mode */
+/* Number input spinner - Refined SVG version with more spacing */
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-  opacity: 0.6;
+  -webkit-appearance: none;
+  appearance: none;
+  width: 22px;
+  /* Increased width for better hit area and visibility */
+  height: 20px;
+  cursor: pointer;
+  opacity: 0.5;
+  /* Premium SVG Arrows: Increased gap between up and down arrows */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 17 5 5 5-5'/%3E%3Cpath d='m7 7 5-5 5 5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 14px;
+  transition: opacity 0.2s ease;
+  margin-right: 2px;
 }
 
-input[type="number"]:hover::-webkit-inner-spin-button,
-input[type="number"]:hover::-webkit-outer-spin-button {
-  opacity: 1;
+/* Hover effect: Smoothly light up the arrows */
+input[type="number"]:hover::-webkit-inner-spin-button {
+  opacity: 0.9;
 }
 
-.dark input[type="number"]::-webkit-inner-spin-button,
-.dark input[type="number"]::-webkit-outer-spin-button {
-  filter: invert(0.7);
-}
-
-.dark input[type="number"]:hover::-webkit-inner-spin-button,
-.dark input[type="number"]:hover::-webkit-outer-spin-button {
-  filter: invert(0.85);
+/* Light mode support */
+:root:not(.dark) input[type="number"]::-webkit-inner-spin-button {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 17 5 5 5-5'/%3E%3Cpath d='m7 7 5-5 5 5'/%3E%3C/svg%3E");
 }
 
 /* Custom scrollbar styles */
@@ -421,4 +452,4 @@ input[type="number"]:hover::-webkit-outer-spin-button {
 
 .apexcharts-tooltip-title {
   display: none !important;
-}
+}