improve:调整配色方案
This commit is contained in:
martin committed
1 parent
90f55e65b1
commit
82f7f56cba
11 files changed
+117
-117
No files matched your search
+41
-41
@@ -11,7 +11,7 @@
|
||||
租户端采用一套轻量、明亮、低对比度的现代控制台设计语言，核心视觉方向为：
|
||||
|
||||
- 冷白蓝雾背景，避免传统后台常见的纯灰或纯白大面积铺底。
|
||||
- 蓝紫色作为品牌主色，冰青、天蓝、薄荷绿、暖橙和珊瑚粉作为功能辅助色。
|
||||
- 青绿色作为品牌主色，冰青、天蓝、靛蓝、暖橙和珊瑚粉作为功能辅助色，与落地页保持一致。
|
||||
- 参考 macOS Liquid Glass 的视觉特征，以半透明材质、环境色折射、镜面高光和柔和阴影表现层级。
|
||||
- 卡片边界尽量通过透明度、内高光和冷色阴影区分，避免使用过深边框。
|
||||
- 信息密度保持适中，使用大圆角、充足留白和紧凑的数据排版。
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
### 2.2 玻璃以中性色为主
|
||||
|
||||
玻璃主体保持冷白透明，蓝色、紫色和青色只用于边缘折射或局部光晕，不应形成明显的彩色实心区域。
|
||||
玻璃主体保持冷白透明，青绿、青色和少量靛蓝只用于边缘折射或局部光晕，不应形成明显的彩色实心区域。
|
||||
|
||||
### 2.3 层级由材质区分
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
|
||||
### 2.4 色彩承担语义
|
||||
|
||||
- 蓝紫：品牌、主要操作、当前状态。
|
||||
- 青绿：品牌、主要操作、当前状态。
|
||||
- 天蓝：请求、数据、信息类功能。
|
||||
- 冰青：Token、连接、实时状态。
|
||||
- 绿色：成功、安全、余额正常。
|
||||
@@ -50,26 +50,26 @@
|
||||
|
||||
### 3.1 品牌主色
|
||||
|
||||
主色使用蓝紫色阶，默认品牌色为 `Primary 500`。
|
||||
主色使用与落地页一致的 Teal 色阶，默认品牌色为 `Primary 500`。
|
||||
|
||||
| Token | 色值 | 建议用途 |
|
||||
| --- | --- | --- |
|
||||
| `primary-50` | `#F4F3FF` | 浅色选中背景、图标底色 |
|
||||
| `primary-100` | `#ECE9FF` | 聚焦环、浅色悬停 |
|
||||
| `primary-200` | `#D9D4FF` | 浅色边框 |
|
||||
| `primary-300` | `#BBB2FF` | 装饰、高亮边缘 |
|
||||
| `primary-400` | `#9588FF` | 次级品牌强调 |
|
||||
| `primary-500` | `#7568F8` | 默认品牌色、主要按钮 |
|
||||
| `primary-600` | `#6558EA` | 按钮悬停、链接 |
|
||||
| `primary-700` | `#5547D1` | 按压状态、强调文字 |
|
||||
| `primary-800` | `#463BAB` | 深色品牌元素 |
|
||||
| `primary-900` | `#3C3588` | 高对比品牌文字 |
|
||||
| `primary-950` | `#251F5C` | 极深品牌背景 |
|
||||
| `primary-50` | `#F0FDFA` | 浅色选中背景、图标底色 |
|
||||
| `primary-100` | `#CCFBF1` | 聚焦环、浅色悬停 |
|
||||
| `primary-200` | `#99F6E4` | 浅色边框 |
|
||||
| `primary-300` | `#5EEAD4` | 装饰、高亮边缘 |
|
||||
| `primary-400` | `#2DD4BF` | 次级品牌强调 |
|
||||
| `primary-500` | `#14B8A6` | 默认品牌色、主要按钮 |
|
||||
| `primary-600` | `#0D9488` | 按钮悬停、链接 |
|
||||
| `primary-700` | `#0F766E` | 按压状态、强调文字 |
|
||||
| `primary-800` | `#115E59` | 深色品牌元素 |
|
||||
| `primary-900` | `#134E4A` | 高对比品牌文字 |
|
||||
| `primary-950` | `#042F2E` | 极深品牌背景 |
|
||||
|
||||
品牌渐变：
|
||||
|
||||
```css
|
||||
linear-gradient(135deg, #7b72ff, #6457e8)
|
||||
linear-gradient(135deg, #14b8a6, #0d9488)
|
||||
```
|
||||
|
||||
### 3.2 功能辅助色
|
||||
@@ -111,10 +111,10 @@ linear-gradient(135deg, #7b72ff, #6457e8)
|
||||
环境 Mesh Gradient：
|
||||
|
||||
```css
|
||||
radial-gradient(at 12% 8%, rgba(87, 168, 255, 0.08) 0, transparent 36%),
|
||||
radial-gradient(at 72% 0%, rgba(137, 117, 255, 0.065) 0, transparent 40%),
|
||||
radial-gradient(at 95% 70%, rgba(70, 213, 219, 0.055) 0, transparent 38%),
|
||||
radial-gradient(at 45% 100%, rgba(121, 151, 255, 0.045) 0, transparent 42%)
|
||||
radial-gradient(at 12% 8%, rgba(20, 184, 166, 0.09) 0, transparent 36%),
|
||||
radial-gradient(at 72% 0%, rgba(6, 182, 212, 0.07) 0, transparent 40%),
|
||||
radial-gradient(at 95% 70%, rgba(20, 184, 166, 0.055) 0, transparent 38%),
|
||||
radial-gradient(at 45% 100%, rgba(99, 102, 241, 0.035) 0, transparent 42%)
|
||||
```
|
||||
|
||||
背景光晕只用于提供环境色，不应成为页面的视觉主体。
|
||||
@@ -161,9 +161,9 @@ radial-gradient(at 45% 100%, rgba(121, 151, 255, 0.045) 0, transparent 42%)
|
||||
|
||||
```css
|
||||
background:
|
||||
radial-gradient(circle at 4% 7%, rgba(80, 171, 255, 0.16), transparent 31%),
|
||||
radial-gradient(circle at 105% 62%, rgba(139, 111, 248, 0.13), transparent 35%),
|
||||
radial-gradient(circle at 28% 106%, rgba(64, 211, 211, 0.10), transparent 30%),
|
||||
radial-gradient(circle at 4% 7%, rgba(6, 182, 212, 0.13), transparent 31%),
|
||||
radial-gradient(circle at 105% 62%, rgba(20, 184, 166, 0.11), transparent 35%),
|
||||
radial-gradient(circle at 28% 106%, rgba(45, 212, 191, 0.10), transparent 30%),
|
||||
rgba(250, 252, 255, 0.62);
|
||||
backdrop-filter: blur(32px) saturate(1.35);
|
||||
```
|
||||
@@ -175,7 +175,7 @@ backdrop-filter: blur(32px) saturate(1.35);
|
||||
菜单选中态采用接近 macOS Liquid Glass 的纯 CSS 近似效果：
|
||||
|
||||
- 中性半透明白色为主体。
|
||||
- 左下角冰青、右下角蓝紫作为极淡折射色。
|
||||
- 左下角冰青、右下角青绿作为极淡折射色。
|
||||
- `blur(26px) saturate(1.7) brightness(1.06)` 增强背景折射。
|
||||
- 顶部椭圆形高光模拟镜面反射。
|
||||
- 底部 `1px` 虹彩线模拟玻璃边缘色散。
|
||||
@@ -208,7 +208,7 @@ backdrop-filter: blur(32px) saturate(1.35);
|
||||
| `shadow-glass` | `0 18px 55px rgba(76, 91, 142, 0.11)` | 大型玻璃容器 |
|
||||
| `shadow-card` | 冷色外阴影 + 白色内高光 | 普通卡片 |
|
||||
| `shadow-card-hover` | `0 18px 48px rgba(91, 104, 151, 0.14)` | 卡片悬停 |
|
||||
| `shadow-glow` | 蓝紫色柔光 | 品牌图标和少量强调 |
|
||||
| `shadow-glow` | 青绿色柔光 | 品牌图标和少量强调 |
|
||||
|
||||
阴影颜色使用蓝灰或品牌色透明值，不使用纯黑重阴影。
|
||||
|
||||
@@ -263,19 +263,19 @@ sans-serif
|
||||
推荐图表序列：
|
||||
|
||||
```text
|
||||
#7568F8 蓝紫，主数据
|
||||
#399CF4 天蓝，次数据
|
||||
#2CC5C1 冰青
|
||||
#FFB552 暖橙
|
||||
#F487A8 珊瑚粉
|
||||
#9F74EE 紫色扩展
|
||||
#67D49D 薄荷绿
|
||||
#FF826F 珊瑚红
|
||||
#14B8A6 青绿，主数据
|
||||
#06B6D4 冰青，次数据
|
||||
#6366F1 靛蓝
|
||||
#F59E0B 暖橙
|
||||
#EC4899 珊瑚粉
|
||||
#3B82F6 天蓝
|
||||
#10B981 薄荷绿
|
||||
#EF4444 珊瑚红
|
||||
```
|
||||
|
||||
图表使用规范：
|
||||
|
||||
- 主曲线使用蓝紫，第二曲线使用天蓝。
|
||||
- 主曲线使用青绿，第二曲线使用天蓝或冰青。
|
||||
- 填充区域透明度控制在 `0.04–0.12`。
|
||||
- 网格线使用低透明度 Slate 色。
|
||||
- Tooltip 使用深蓝灰半透明背景，不使用纯黑。
|
||||
@@ -335,13 +335,13 @@ ease-out
|
||||
|
||||
- 使用透明白色、内高光和冷色阴影建立材质层次。
|
||||
- 让背景保留极淡的环境色，为玻璃提供折射内容。
|
||||
- 使用蓝紫色表达品牌和主要状态。
|
||||
- 使用青绿色表达品牌和主要状态。
|
||||
- 使用功能色区分数据类别和业务状态。
|
||||
- 保持大圆角、低对比边界和充足留白。
|
||||
|
||||
### 避免
|
||||
|
||||
- 避免大面积高饱和蓝紫渐变。
|
||||
- 避免大面积高饱和青绿渐变。
|
||||
- 避免纯黑阴影、纯黑正文和深灰粗边框。
|
||||
- 避免在同一视图中使用过多发光元素。
|
||||
- 避免所有卡片都设置悬浮动画，静态信息卡可保持稳定。
|
||||
@@ -367,11 +367,11 @@ ease-out
|
||||
### 15.1 表格容器
|
||||
|
||||
- 圆角：`20px`。
|
||||
- 背景：半透明冷白玻璃，叠加极淡的天蓝和蓝紫环境光。
|
||||
- 背景：半透明冷白玻璃，叠加极淡的冰青和青绿环境光。
|
||||
- 模糊：`blur(22px) saturate(1.2)`。
|
||||
- 描边：半透明白色，不使用传统灰色实线外框。
|
||||
- 阴影：冷色轻阴影与顶部内高光。
|
||||
- 横向滚动条使用蓝紫渐变滑块，宽表格在移动端保持横向滚动。
|
||||
- 横向滚动条使用冰青到青绿的渐变滑块，宽表格在移动端保持横向滚动。
|
||||
|
||||
当表格已经位于带有 `overflow-hidden` 的卡片内部时，使用 `.table-container-flush` 移除重复的圆角、描边和阴影。
|
||||
|
||||
@@ -381,7 +381,7 @@ ease-out
|
||||
- 字号：`12px`。
|
||||
- 字重：`650`。
|
||||
- 文字颜色：`#64748B`。
|
||||
- 背景：冷白玻璃叠加低透明度蓝紫渐变。
|
||||
- 背景：冷白玻璃叠加低透明度冰青到青绿渐变。
|
||||
- 使用顶部镜面高光和底部柔和分隔线表现玻璃厚度。
|
||||
- 相邻表头之间使用短竖向渐变分隔，不使用贯穿整行的深色边框。
|
||||
- 表头内容默认不换行，长表格通过横向滚动查看。
|
||||
@@ -391,8 +391,8 @@ ease-out
|
||||
- 单元格默认背景为低透明度白色。
|
||||
- 偶数行使用极淡蓝灰背景，形成弱斑马纹。
|
||||
- 行分隔线使用低透明度 Slate 色。
|
||||
- 悬停或行内元素获得焦点时，整行显示冰蓝至淡紫的液态渐变。
|
||||
- 悬停行首显示 `3px` 蓝紫色内侧指示条。
|
||||
- 悬停或行内元素获得焦点时，整行显示冰青至淡青绿的液态渐变。
|
||||
- 悬停行首显示 `3px` 青绿色内侧指示条。
|
||||
- 数字统一使用 `tabular-nums`，避免金额和计数变化造成宽度跳动。
|
||||
- 表格内普通链接使用 `primary-600`，悬停时切换为 `primary-800`。
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<{
|
||||
data: () => [],
|
||||
})
|
||||
|
||||
const colors = ['#7568f8', '#42a4f5', '#2cc5c1', '#ffb552', '#f487a8', '#9f74ee', '#67d49d', '#ff826f']
|
||||
const colors = ['#14b8a6', '#06b6d4', '#6366f1', '#f59e0b', '#ec4899', '#3b82f6', '#10b981', '#ef4444']
|
||||
|
||||
function formatCost(value: number): string {
|
||||
if (value === 0) return '$0.00'
|
||||
|
||||
@@ -55,14 +55,14 @@ const chartData = computed<ChartData<'line'>>(() => ({
|
||||
{
|
||||
label: 'Token 用量',
|
||||
data: props.data.map((item) => item.input_tokens + item.output_tokens),
|
||||
borderColor: '#7568f8',
|
||||
backgroundColor: 'rgba(117, 104, 248, 0.1)',
|
||||
borderColor: '#14b8a6',
|
||||
backgroundColor: 'rgba(20, 184, 166, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.42,
|
||||
pointRadius: 2.5,
|
||||
pointHoverRadius: 5,
|
||||
pointBackgroundColor: '#ffffff',
|
||||
pointBorderColor: '#7568f8',
|
||||
pointBorderColor: '#14b8a6',
|
||||
pointBorderWidth: 2,
|
||||
borderWidth: 2.25,
|
||||
yAxisID: 'y',
|
||||
|
||||
@@ -147,19 +147,19 @@ function submitJump() {
|
||||
}
|
||||
|
||||
.pagination-page:hover {
|
||||
border-color: rgba(117, 104, 248, 0.45);
|
||||
border-color: rgba(20, 184, 166, 0.45);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #6558ea;
|
||||
color: #0d9488;
|
||||
}
|
||||
|
||||
.pagination-page-active {
|
||||
border-color: #7568f8;
|
||||
background: #7568f8;
|
||||
border-color: #14b8a6;
|
||||
background: #14b8a6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pagination-page-active:hover {
|
||||
background: #6558ea;
|
||||
background: #0d9488;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -192,8 +192,8 @@ function submitJump() {
|
||||
}
|
||||
|
||||
.pagination-jump-input:focus {
|
||||
border-color: #7568f8;
|
||||
box-shadow: 0 0 0 3px rgba(117, 104, 248, 0.12);
|
||||
border-color: #14b8a6;
|
||||
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
/* 主色 - 蓝紫色系 */
|
||||
--color-primary-50: #f4f3ff;
|
||||
--color-primary-100: #ece9ff;
|
||||
--color-primary-200: #d9d4ff;
|
||||
--color-primary-300: #bbb2ff;
|
||||
--color-primary-400: #9588ff;
|
||||
--color-primary-500: #7568f8;
|
||||
--color-primary-600: #6558ea;
|
||||
--color-primary-700: #5547d1;
|
||||
--color-primary-800: #463bab;
|
||||
--color-primary-900: #3c3588;
|
||||
--color-primary-950: #251f5c;
|
||||
/* 主色 - 与落地页一致的青绿色系 */
|
||||
--color-primary-50: #f0fdfa;
|
||||
--color-primary-100: #ccfbf1;
|
||||
--color-primary-200: #99f6e4;
|
||||
--color-primary-300: #5eead4;
|
||||
--color-primary-400: #2dd4bf;
|
||||
--color-primary-500: #14b8a6;
|
||||
--color-primary-600: #0d9488;
|
||||
--color-primary-700: #0f766e;
|
||||
--color-primary-800: #115e59;
|
||||
--color-primary-900: #134e4a;
|
||||
--color-primary-950: #042f2e;
|
||||
|
||||
/* 多彩辅助色（与设计图对齐） */
|
||||
--color-accent-blue: #3B82F6;
|
||||
@@ -38,16 +38,16 @@
|
||||
/* 阴影 - 轻量精致（对齐设计图） */
|
||||
--shadow-glass: 0 18px 55px rgba(76, 91, 142, 0.11);
|
||||
--shadow-glass-sm: 0 8px 24px rgba(76, 91, 142, 0.08);
|
||||
--shadow-glow: 0 10px 30px rgba(117, 104, 248, 0.28);
|
||||
--shadow-glow-lg: 0 18px 46px rgba(117, 104, 248, 0.34);
|
||||
--shadow-glow: 0 10px 30px rgba(20, 184, 166, 0.26);
|
||||
--shadow-glow-lg: 0 18px 46px rgba(20, 184, 166, 0.32);
|
||||
--shadow-card: 0 10px 34px rgba(91, 104, 151, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
--shadow-card-hover: 0 18px 48px rgba(91, 104, 151, 0.14);
|
||||
--shadow-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
|
||||
/* 背景渐变（对齐设计图） */
|
||||
--background-image-gradient-primary: linear-gradient(135deg, #7b72ff, #6457e8);
|
||||
--background-image-gradient-primary: linear-gradient(135deg, #14b8a6, #0d9488);
|
||||
--background-image-gradient-dark: linear-gradient(135deg, #1e293b, #0f172a);
|
||||
--background-image-mesh-gradient: radial-gradient(at 12% 8%, rgba(87, 168, 255, 0.08) 0px, transparent 36%), radial-gradient(at 72% 0%, rgba(137, 117, 255, 0.065) 0px, transparent 40%), radial-gradient(at 95% 70%, rgba(70, 213, 219, 0.055) 0px, transparent 38%), radial-gradient(at 45% 100%, rgba(121, 151, 255, 0.045) 0px, transparent 42%);
|
||||
--background-image-mesh-gradient: radial-gradient(at 12% 8%, rgba(20, 184, 166, 0.09) 0px, transparent 36%), radial-gradient(at 72% 0%, rgba(6, 182, 212, 0.07) 0px, transparent 40%), radial-gradient(at 95% 70%, rgba(20, 184, 166, 0.055) 0px, transparent 38%), radial-gradient(at 45% 100%, rgba(99, 102, 241, 0.035) 0px, transparent 42%);
|
||||
|
||||
/* 动画 */
|
||||
--animate-fade-in: fade-in 0.3s ease-out;
|
||||
@@ -83,8 +83,8 @@
|
||||
to { background-position: 200% 0; }
|
||||
}
|
||||
@keyframes glow {
|
||||
from { box-shadow: 0 0 20px rgba(123, 143, 245, 0.22); }
|
||||
to { box-shadow: 0 0 30px rgba(123, 143, 245, 0.38); }
|
||||
from { box-shadow: 0 0 20px rgba(20, 184, 166, 0.22); }
|
||||
to { box-shadow: 0 0 30px rgba(20, 184, 166, 0.38); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -373,7 +373,7 @@ body.modal-open {
|
||||
border-radius: 1.25rem;
|
||||
background:
|
||||
radial-gradient(circle at 0 0, rgba(92, 177, 255, 0.055), transparent 28%),
|
||||
radial-gradient(circle at 100% 100%, rgba(132, 105, 246, 0.045), transparent 30%),
|
||||
radial-gradient(circle at 100% 100%, rgba(20, 184, 166, 0.055), transparent 30%),
|
||||
rgba(255, 255, 255, 0.42);
|
||||
box-shadow:
|
||||
0 10px 30px rgba(75, 91, 137, 0.07),
|
||||
@@ -381,7 +381,7 @@ body.modal-open {
|
||||
backdrop-filter: blur(22px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(22px) saturate(1.2);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(117, 104, 248, 0.28) transparent;
|
||||
scrollbar-color: rgba(20, 184, 166, 0.28) transparent;
|
||||
}
|
||||
.table-container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
@@ -393,7 +393,7 @@ body.modal-open {
|
||||
.table-container::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 9999px;
|
||||
background: linear-gradient(90deg, rgba(65, 168, 244, 0.4), rgba(117, 104, 248, 0.42));
|
||||
background: linear-gradient(90deg, rgba(6, 182, 212, 0.4), rgba(20, 184, 166, 0.44));
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@@ -480,7 +480,7 @@ body.modal-open {
|
||||
color: #64748b;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(242, 246, 255, 0.72)),
|
||||
linear-gradient(100deg, rgba(63, 163, 247, 0.065), rgba(117, 104, 248, 0.075));
|
||||
linear-gradient(100deg, rgba(6, 182, 212, 0.055), rgba(20, 184, 166, 0.075));
|
||||
border-bottom: 1px solid rgba(191, 203, 225, 0.42);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.98),
|
||||
@@ -528,13 +528,13 @@ body.modal-open {
|
||||
.table tbody tr:focus-within td {
|
||||
color: #334155;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(235, 247, 255, 0.76), rgba(244, 240, 255, 0.68)),
|
||||
linear-gradient(90deg, rgba(236, 254, 255, 0.72), rgba(240, 253, 250, 0.76)),
|
||||
rgba(255, 255, 255, 0.74);
|
||||
}
|
||||
.table tbody tr:hover td:first-child,
|
||||
.table tbody tr:focus-within td:first-child {
|
||||
box-shadow:
|
||||
inset 3px 0 0 rgba(117, 104, 248, 0.62),
|
||||
inset 3px 0 0 rgba(20, 184, 166, 0.64),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.table tbody tr:hover td:last-child,
|
||||
@@ -543,11 +543,11 @@ body.modal-open {
|
||||
}
|
||||
.table tbody a:not(.btn) {
|
||||
font-weight: 550;
|
||||
color: #6558ea;
|
||||
color: #0d9488;
|
||||
transition: color 160ms ease;
|
||||
}
|
||||
.table tbody a:not(.btn):hover {
|
||||
color: #463bab;
|
||||
color: #0f766e;
|
||||
}
|
||||
.table tbody .btn-ghost {
|
||||
border: 1px solid transparent;
|
||||
@@ -602,12 +602,12 @@ body.modal-open {
|
||||
color: #64748b;
|
||||
}
|
||||
.table-pagination .btn:hover:not(:disabled) {
|
||||
border-color: rgba(217, 212, 255, 0.9);
|
||||
border-color: rgba(153, 246, 228, 0.9);
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
box-shadow:
|
||||
0 7px 18px rgba(76, 91, 142, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 1);
|
||||
color: #6558ea;
|
||||
color: #0d9488;
|
||||
}
|
||||
.table-pagination .btn:disabled {
|
||||
border-color: rgba(226, 232, 240, 0.58);
|
||||
@@ -756,7 +756,7 @@ body.modal-open {
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 18%),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 20%),
|
||||
radial-gradient(ellipse 105% 34% at 8% 108%, rgba(44, 199, 218, 0.11), transparent 70%),
|
||||
radial-gradient(ellipse 92% 32% at 104% 106%, rgba(117, 104, 248, 0.1), transparent 72%);
|
||||
radial-gradient(ellipse 92% 32% at 104% 106%, rgba(20, 184, 166, 0.11), transparent 72%);
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -804,27 +804,27 @@ body.modal-open {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.sidebar-link-active {
|
||||
color: #5547d1;
|
||||
background: rgba(117, 104, 248, 0.13);
|
||||
color: #0f766e;
|
||||
background: rgba(20, 184, 166, 0.13);
|
||||
background: color-mix(in srgb, var(--color-primary-500) 14%, rgba(255, 255, 255, 0.24));
|
||||
border-color: transparent;
|
||||
box-shadow:
|
||||
0 2px 8px rgba(85, 71, 209, 0.08),
|
||||
0 2px 8px rgba(13, 148, 136, 0.09),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||
inset 1px 0 0 rgba(255, 255, 255, 0.28),
|
||||
inset -1px 0 0 rgba(255, 255, 255, 0.08),
|
||||
inset 0 -1px 0 rgba(85, 71, 209, 0.05);
|
||||
inset 0 -1px 0 rgba(13, 148, 136, 0.05);
|
||||
}
|
||||
.sidebar-link-active:hover {
|
||||
color: #463bab;
|
||||
background: rgba(117, 104, 248, 0.17);
|
||||
color: #115e59;
|
||||
background: rgba(20, 184, 166, 0.17);
|
||||
background: color-mix(in srgb, var(--color-primary-500) 18%, rgba(255, 255, 255, 0.28));
|
||||
box-shadow:
|
||||
0 3px 10px rgba(85, 71, 209, 0.1),
|
||||
0 3px 10px rgba(13, 148, 136, 0.11),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.56),
|
||||
inset 1px 0 0 rgba(255, 255, 255, 0.32),
|
||||
inset -1px 0 0 rgba(255, 255, 255, 0.1),
|
||||
inset 0 -1px 0 rgba(85, 71, 209, 0.06);
|
||||
inset 0 -1px 0 rgba(13, 148, 136, 0.06);
|
||||
}
|
||||
.sidebar-link > * {
|
||||
position: relative;
|
||||
@@ -846,12 +846,12 @@ body.modal-open {
|
||||
.sidebar-toggle:hover {
|
||||
border-color: rgba(255, 255, 255, 0.34);
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
color: #5547d1;
|
||||
color: #0f766e;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.sidebar-toggle:focus-visible,
|
||||
.sidebar-link:focus-visible {
|
||||
outline: 2px solid rgba(117, 104, 248, 0.62);
|
||||
outline: 2px solid rgba(20, 184, 166, 0.62);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
@@ -870,8 +870,8 @@ body.modal-open {
|
||||
color: rgba(17, 24, 39, 0.92);
|
||||
}
|
||||
.sidebar-link-active {
|
||||
border-color: rgba(85, 71, 209, 0.38);
|
||||
background: rgba(117, 104, 248, 0.22);
|
||||
border-color: rgba(13, 148, 136, 0.38);
|
||||
background: rgba(20, 184, 166, 0.22);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
@@ -248,7 +248,7 @@ onBeforeUnmount(() => {
|
||||
>
|
||||
<!-- Sidebar Header -->
|
||||
<div class="sidebar-header">
|
||||
<div class="relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl shadow-glow bg-gradient-to-br from-blue-400 via-primary-500 to-violet-500">
|
||||
<div class="relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl shadow-glow bg-gradient-to-br from-cyan-400 via-primary-500 to-emerald-500">
|
||||
<span class="absolute h-5 w-8 -rotate-12 rounded-[50%] border border-white/60"></span>
|
||||
<span class="relative text-white font-bold text-sm">{{ tenantInfo.name.charAt(0) || 'T' }}</span>
|
||||
</div>
|
||||
@@ -550,12 +550,12 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid rgba(117, 104, 248, 0.28);
|
||||
border: 1px solid rgba(20, 184, 166, 0.28);
|
||||
border-radius: 9999px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
padding: 0 0.65rem;
|
||||
box-shadow: 0 8px 22px rgba(92, 82, 210, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.94);
|
||||
color: #6558d9;
|
||||
box-shadow: 0 8px 22px rgba(13, 148, 136, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.94);
|
||||
color: #0d9488;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
|
||||
@@ -564,9 +564,9 @@ onBeforeUnmount(() => {
|
||||
.docs-nav-entry:hover,
|
||||
.docs-nav-entry-active {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(117, 104, 248, 0.5);
|
||||
border-color: rgba(20, 184, 166, 0.5);
|
||||
background: #fff;
|
||||
box-shadow: 0 10px 26px rgba(92, 82, 210, 0.18), inset 0 1px 0 #fff;
|
||||
box-shadow: 0 10px 26px rgba(13, 148, 136, 0.18), inset 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
.docs-nav-badge {
|
||||
|
||||
@@ -460,7 +460,7 @@ onMounted(refreshAll)
|
||||
.refresh-button:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
background: white;
|
||||
color: #6558ea;
|
||||
color: #0d9488;
|
||||
}
|
||||
|
||||
.refresh-button:disabled {
|
||||
|
||||
@@ -556,7 +556,7 @@ onMounted(refreshAll)
|
||||
.personal-refresh:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
background: white;
|
||||
color: #6558ea;
|
||||
color: #0d9488;
|
||||
}
|
||||
|
||||
.personal-refresh:disabled {
|
||||
@@ -649,7 +649,7 @@ onMounted(refreshAll)
|
||||
|
||||
.quota-card {
|
||||
background:
|
||||
radial-gradient(circle at 100% 0, rgba(117, 104, 248, 0.11), transparent 34%),
|
||||
radial-gradient(circle at 100% 0, rgba(20, 184, 166, 0.11), transparent 34%),
|
||||
var(--glass-bg-strong);
|
||||
}
|
||||
|
||||
@@ -660,8 +660,8 @@ onMounted(refreshAll)
|
||||
}
|
||||
|
||||
.quota-icon {
|
||||
background: rgba(117, 104, 248, 0.12);
|
||||
color: #7568f8;
|
||||
background: rgba(20, 184, 166, 0.12);
|
||||
color: #14b8a6;
|
||||
}
|
||||
|
||||
.quality-icon {
|
||||
@@ -721,7 +721,7 @@ onMounted(refreshAll)
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #42a4f5, #7568f8);
|
||||
background: linear-gradient(90deg, #06b6d4, #14b8a6);
|
||||
}
|
||||
|
||||
.cache-strip {
|
||||
@@ -761,7 +761,7 @@ onMounted(refreshAll)
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #42a4f5, #7568f8);
|
||||
background: linear-gradient(90deg, #06b6d4, #14b8a6);
|
||||
}
|
||||
|
||||
.model-progress span {
|
||||
|
||||
@@ -771,12 +771,12 @@ onBeforeUnmount(() => {
|
||||
|
||||
.amount-pill small { margin-right: 0.125rem; font-size: 0.6875rem; font-weight: 500; }
|
||||
.amount-pill em { margin-top: 0.15rem; color: #059669; font-size: 0.5625rem; font-style: normal; font-weight: 700; }
|
||||
.amount-pill:hover { border-color: #c7d2fe; color: #6558d9; }
|
||||
.amount-pill:hover { border-color: #99f6e4; color: #0d9488; }
|
||||
.amount-pill-active {
|
||||
border-color: #a5b4fc;
|
||||
background: #f5f3ff;
|
||||
box-shadow: 0 0 0 3px rgba(117, 104, 248, 0.08);
|
||||
color: #6558d9;
|
||||
border-color: #5eead4;
|
||||
background: #f0fdfa;
|
||||
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.08);
|
||||
color: #0d9488;
|
||||
}
|
||||
|
||||
.pay-method-card {
|
||||
@@ -792,11 +792,11 @@ onBeforeUnmount(() => {
|
||||
transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.pay-method-card:hover { border-color: #c7d2fe; }
|
||||
.pay-method-card:hover { border-color: #99f6e4; }
|
||||
.pay-method-card-active {
|
||||
border-color: #a5b4fc;
|
||||
background: #f5f3ff;
|
||||
box-shadow: 0 0 0 3px rgba(117, 104, 248, 0.08);
|
||||
border-color: #5eead4;
|
||||
background: #f0fdfa;
|
||||
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.08);
|
||||
}
|
||||
|
||||
.pay-method-icon {
|
||||
|
||||
@@ -445,7 +445,7 @@ onMounted(() => {
|
||||
z-index: 5;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 244, 255, 0.94)),
|
||||
linear-gradient(100deg, rgba(63, 163, 247, 0.08), rgba(117, 104, 248, 0.1));
|
||||
linear-gradient(100deg, rgba(6, 182, 212, 0.07), rgba(20, 184, 166, 0.1));
|
||||
backdrop-filter: blur(24px) saturate(1.35);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.35);
|
||||
}
|
||||
|
||||
@@ -1002,7 +1002,7 @@ onMounted(() => {
|
||||
z-index: 5;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 244, 255, 0.94)),
|
||||
linear-gradient(100deg, rgba(63, 163, 247, 0.08), rgba(117, 104, 248, 0.1));
|
||||
linear-gradient(100deg, rgba(6, 182, 212, 0.07), rgba(20, 184, 166, 0.1));
|
||||
backdrop-filter: blur(24px) saturate(1.35);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.35);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user