53 lines
1.3 KiB
CSS
53 lines
1.3 KiB
CSS
/* 旋转动画(loading 图标) */
|
||
.loader {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg) }
|
||
100% { transform: rotate(360deg) }
|
||
}
|
||
|
||
/* 拖拽高亮:与 Tailwind 共存,覆盖边框与背景 */
|
||
.drag-zone.drag-active {
|
||
border-color: #2563eb; /* blue-600 */
|
||
background-color: #eff6ff; /* blue-50 */
|
||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
|
||
}
|
||
|
||
/* 文件列表样式微调 */
|
||
#fileList li {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 0.75rem;
|
||
padding: 0.75rem 1rem;
|
||
align-items: center;
|
||
}
|
||
#fileList .file-name {
|
||
font-size: 0.95rem;
|
||
color: #111827; /* gray-900 */
|
||
word-break: break-all;
|
||
}
|
||
#fileList .file-meta {
|
||
font-size: 0.78rem;
|
||
color: #6b7280; /* gray-500 */
|
||
}
|
||
#fileList .remove-btn {
|
||
color: #ef4444; /* red-500 */
|
||
}
|
||
#fileList .remove-btn:hover {
|
||
color: #b91c1c; /* red-700 */
|
||
}
|
||
|
||
/* 隐藏但保留可访问性的类(配合HTML中的 sr-only)*/
|
||
.sr-only {
|
||
position: absolute !important;
|
||
width: 1px !important;
|
||
height: 1px !important;
|
||
padding: 0 !important;
|
||
margin: -1px !important;
|
||
overflow: hidden !important;
|
||
clip: rect(0,0,0,0) !important;
|
||
white-space: nowrap !important;
|
||
border: 0 !important;
|
||
}
|