Hugging Face's logo

Spaces:
yangtb24
/
pre
Sleeping

App Files Community
pre
File size: 3,278 Bytes 
bbb6398
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 
/* 组件样式

 * 包含各种UI组件的样式定义，如按钮、模态框、标签等

 */

/* 浮动添加按钮 - 固定在右下角的主操作按钮 */
.floating-add-btn {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    transition: all 0.2s ease-in-out;
}

.floating-add-btn:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.15));
}

.floating-add-btn:active {
    transform: scale(0.98);
}

/* 回到顶部按钮 - 滚动时显示的返回顶部快捷按钮 */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #0284c7; /* primary-600 */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.back-to-top.visible {
    opacity: 0.9;
    visibility: visible;
}

.back-to-top:hover {
    background-color: #0369a1; /* primary-700 */
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

/* 模态框样式 - 简化的弹窗设计 */
.simplified-modal {
    max-width: 400px;
    border-radius: 12px;
}

.modal-field-hint {
    font-size: 11px;
    color: #6b7280;
    margin-left: 4px;
}

/* 背景模糊效果 - 增强模态框层次感 */
.backdrop-blur-md {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 卡片式输入组 - 表单元素容器 */
.input-card {
    transition: all 0.3s ease;
}

.input-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

/* 复制按钮 - 用于复制API密钥 */
.clipboard-btn {
    background: transparent;
    transition: all 0.2s ease;
    border-radius: 50%;
    padding: 4px;
}

.clipboard-btn:hover {
    background: rgba(2, 132, 199, 0.1);
    transform: scale(1.1);
}

/* 快捷键提示 - 显示键盘快捷键 */
.shortcut-hint {
    position: absolute;
    bottom: -18px;
    right: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 4px;
    border-radius: 3px;
    pointer-events: none;
}

.shortcut-hint-box {
    font-size: 10px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 3px;
    left: 6px;
}

.shortcut-hint-box svg {
    margin-right: 4px;
    width: 14px;
    height: 14px;
}

/* 批量操作工具栏 - 多选时出现的操作栏 */
.bulk-toolbar {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(99, 102, 241, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 选中行样式增强 - 给选中的行添加渐变背景 */
.bg-blue-50 {
    position: relative;
    overflow: hidden;
}

.bg-blue-50::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, rgba(96, 165, 250, 0.1) 50%, rgba(59, 130, 246, 0.05) 100%);
    z-index: -1;
    opacity: 0.7;
}