first commit
This commit is contained in:
184
static/css/style.css
Normal file
184
static/css/style.css
Normal file
@@ -0,0 +1,184 @@
|
||||
/* 自定义样式 */
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* 自定义滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(148, 163, 184, 0.4);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(148, 163, 184, 0.7);
|
||||
}
|
||||
|
||||
/* 高级玻璃拟态效果 */
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.glass-panel-dark {
|
||||
background: rgba(15, 23, 42, 0.7);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 高级阴影与悬浮动效 */
|
||||
.hover-card-up {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.hover-card-up:hover {
|
||||
transform: translateY(-4px) scale(1.01);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.hover-glow {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.hover-glow:hover {
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
/* 文本渐变发光 */
|
||||
.text-gradient-glow {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 渐变动画边框 */
|
||||
.animated-border {
|
||||
position: relative;
|
||||
border-radius: inherit;
|
||||
}
|
||||
.animated-border::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
|
||||
background-size: 200% 200%;
|
||||
animation: gradient-move 3s linear infinite;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.animated-border:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
@keyframes gradient-move {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/* 背景流动网格 */
|
||||
.bg-grid-pattern {
|
||||
background-size: 40px 40px;
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
|
||||
}
|
||||
.bg-grid-pattern-dark {
|
||||
background-size: 40px 40px;
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
/* 通用过渡动画 */
|
||||
.transition-all-200 {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.transition-all-300 {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 拖拽排序 */
|
||||
.question-item {
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.question-item[draggable="true"]:hover {
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
.question-item.dragging {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.drag-handle {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* 选项选中高亮 */
|
||||
.option-label:has(input:checked) {
|
||||
border-color: #3b82f6;
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
|
||||
/* 计时器闪烁 */
|
||||
@keyframes timer-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
.animate-pulse {
|
||||
animation: timer-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 题号导航按钮 */
|
||||
#nav-panel button,
|
||||
#nav-panel-mobile button {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
/* 进度条动画 */
|
||||
#progress-bar {
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 批改页面底部栏 */
|
||||
.sticky.bottom-4 {
|
||||
backdrop-filter: blur(8px);
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
}
|
||||
|
||||
/* 提交列表左侧颜色条 */
|
||||
.border-l-4.border-l-green-400 {
|
||||
border-left: 4px solid #4ade80;
|
||||
}
|
||||
.border-l-4.border-l-yellow-400 {
|
||||
border-left: 4px solid #facc15;
|
||||
}
|
||||
|
||||
/* 快速给分按钮 */
|
||||
button[onclick^="quickScore"] {
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
button[onclick^="quickScore"]:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 响应式优化 */
|
||||
@media (max-width: 640px) {
|
||||
.sticky.top-0 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
#nav-panel-mobile {
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user