/* XJSOJ Ultimate Smart Theme - 全面优化与重构 /
/ 版本: 3.0 - 完整结合版 /
/ 功能：包含基础圆润优化 + Smart Luogu式深度重构 */
/* === 基础重置与全局样式 === */
- {
border-radius: 8px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-sizing: border-box !important;
}
/* === 全局背景和字体 === */
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) fixed !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif !important;
color: #2c3e50 !important;
line-height: 1.6 !important;
margin: 0 !important;
padding: 10px !important;
min-height: 100vh !important;
}
/* === 主容器深度优化 === */
.container,
.container-fluid,
.main-container,
.content,
content {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(20px) !important;
border-radius: 24px !important;
margin: 15px auto !important;
padding: 25px !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
max-width: 1400px !important;
}
/* === 导航栏完整优化 === */
.navbar,
.header,
nav,
.nav {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%) !important;
border-radius: 20px 20px 0 0 !important;
margin: 10px 10px 0 10px !important;
padding: 10px 20px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
border: none !important;
}
.navbar-brand {
font-size: 1.5em !important;
font-weight: bold !important;
color: white !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
border-radius: 12px !important;
padding: 8px 16px !important;
}
.nav-item,
.nav-link {
border-radius: 20px !important;
margin: 4px 6px !important;
color: rgba(255, 255, 255, 0.9) !important;
padding: 10px 20px !important;
transition: all 0.3s ease !important;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.2) !important;
color: white !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
/* === 卡片组件完整优化 === */
.card {
background: white !important;
border-radius: 20px !important;
margin: 15px 0 !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
border: none !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
}
.card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}
.card-header {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
border-bottom: none !important;
padding: 18px !important;
font-weight: bold !important;
font-size: 1.2em !important;
border-radius: 20px 20px 0 0 !important;
}
.card-body {
padding: 22px !important;
border-radius: 0 0 20px 20px !important;
}
/* === 按钮完整优化 === */
.btn,
button,
input[type="button"],
input[type="submit"] {
border-radius: 20px !important;
padding: 10px 25px !important;
font-weight: 600 !important;
border: none !important;
position: relative !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
}
.btn::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
transition: left 0.5s !important;
}
.btn:hover::before {
left: 100% !important;
}
.btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}
.btn-success {
background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%) !important;
}
.btn-danger {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
}
/* === 表格完整优化 === */
.table {
border-radius: 15px !important;
overflow: hidden !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
margin: 15px 0 !important;
}
.table th {
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%) !important;
color: white !important;
border: none !important;
padding: 15px !important;
font-weight: 600 !important;
border-radius: 0 !important;
}
.table td {
padding: 12px 15px !important;
border-color: #f8f9fa !important;
background: white !important;
border-radius: 0 !important;
}
.table tr:nth-child(even) td {
background: #f8f9fa !important;
}
.table tr:hover td {
background: #e3f2fd !important;
transform: scale(1.01) !important;
}
/* === 输入框和表单完整优化 === */
.form-control,
input,
textarea,
select {
border-radius: 12px !important;
padding: 10px 16px !important;
border: 2px solid #e0e0e0 !important;
font-size: 1em !important;
transition: all 0.3s ease !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
border-color: #667eea !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
transform: translateY(-2px) !important;
border-radius: 12px !important;
}
/* === 代码块和题目区域完整优化 === */
.code-block,
pre,
code {
border-radius: 15px !important;
margin: 10px 0 !important;
background: #2d3748 !important;
color: #e2e8f0 !important;
padding: 18px !important;
font-family: 'Fira Code', 'Consolas', monospace !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}
.problem-content,
.problem-description {
border-radius: 18px !important;
padding: 20px !important;
background: #f8f9fa !important;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
/* === 标签和徽章完整优化 === */
.badge,
.tag,
.label {
border-radius: 18px !important;
padding: 6px 14px !important;
font-size: 0.85em !important;
font-weight: 600 !important;
}
.badge-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.badge-success {
background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%) !important;
}
/* === 侧边栏完整优化 === */
.sidebar,
.aside,
.col-md-3,
.col-lg-3 {
border-radius: 18px !important;
margin: 10px !important;
padding: 15px !important;
background: rgba(255, 255, 255, 0.9) !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
}
/* === 页脚完整优化 === */
.footer {
background: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(10px) !important;
border-radius: 0 0 18px 18px !important;
margin: 0 10px 10px 10px !important;
padding: 20px !important;
text-align: center !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
}
/* === 模态框完整优化 === */
.modal-content {
border-radius: 22px !important;
border: none !important;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
overflow: hidden !important;
}
.modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
border-bottom: none !important;
padding: 22px !important;
border-radius: 22px 22px 0 0 !important;
}
.modal-footer {
border-radius: 0 0 22px 22px !important;
padding: 20px !important;
}
/* === 进度条完整优化 === */
.progress {
height: 10px !important;
border-radius: 8px !important;
background: #e0e0e0 !important;
overflow: hidden !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
margin: 10px 0 !important;
}
.progress-bar {
border-radius: 8px !important;
background: linear-gradient(90deg, #667eea, #764ba2) !important;
position: relative !important;
}
.progress-bar::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
animation: shimmer 2s infinite !important;
}
/* === 列表组完整优化 === */
.list-group-item {
border-radius: 10px !important;
margin: 5px 0 !important;
border: 1px solid #f0f0f0 !important;
padding: 15px !important;
transition: all 0.3s ease !important;
}
.list-group-item:hover {
transform: translateX(5px) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
}
.list-group-item:first-child {
border-radius: 10px 10px 0 0 !important;
}
.list-group-item:last-child {
border-radius: 0 0 10px 10px !important;
}
/* === 分页组件完整优化 === */
.pagination {
border-radius: 15px !important;
padding: 8px !important;
background: white !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
display: inline-flex !important;
}
.page-item:first-child .page-link {
border-radius: 12px 0 0 12px !important;
}
.page-item:last-child .page-link {
border-radius: 0 12px 12px 0 !important;
}
.page-item.active .page-link {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
border-radius: 10px !important;
}
.page-link {
border: none !important;
border-radius: 10px !important;
margin: 0 3px !important;
padding: 8px 15px !important;
}
/* === XJSOJ特定元素优化 === */
.contest-item,
.problem-item,
.problem-list .list-group-item {
background: white !important;
border: none !important;
margin: 12px 0 !important;
padding: 18px !important;
border-radius: 15px !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
transition: all 0.3s ease !important;
}
.contest-item:hover,
.problem-item:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}
/* === 排行榜特殊效果 === */
.rank-table,
.standing-table {
border-radius: 15px !important;
overflow: hidden !important;
}
.rank-table tr:first-child {
background: linear-gradient(135deg, #FFD700 0%, #FFF8DC 100%) !important;
}
.rank-table tr:nth-child(2) {
background: linear-gradient(135deg, #C0C0C0 0%, #F5F5F5 100%) !important;
}
.rank-table tr:nth-child(3) {
background: linear-gradient(135deg, #CD7F32 0%, #F0E68C 100%) !important;
}
/* === 用户信息卡片 === */
.user-card,
.profile-card {
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}
/* === 动画效果 === */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.fade-in {
animation: fadeIn 0.6s ease-in-out !important;
}
.loading {
animation: float 2s ease-in-out infinite !important;
}
/* === 响应式设计 === */
@media (max-width: 768px) {
body {
padding: 5px !important;
}
.container,
.main-container {margin: 8px !important;padding: 18px !important;border-radius: 18px !important;
}.navbar,
.header {margin: 8px 8px 0 8px !important;border-radius: 15px 15px 0 0 !important;padding: 8px 15px !important;
}.card {margin: 12px 0 !important;border-radius: 15px !important;
}.btn {padding: 8px 20px !important;border-radius: 18px !important;
}
}
/* === 自定义滚动条 === */
::-webkit-scrollbar {
width: 10px !important;
height: 10px !important;
}
::-webkit-scrollbar-track {
background: #f1f1f1 !important;
border-radius: 6px !important;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border-radius: 6px !important;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
}
/* === 选择文本效果 === */
::selection {
background: rgba(102, 126, 234, 0.3) !important;
border-radius: 4px !important;
}
/* === 聚焦轮廓优化 === */
:focus {
outline: none !important;
border-radius: inherit !important;
}
/* === 方案3：深绿渐变（护眼舒适）=== */
.navbar, .header, nav, .nav {
background: linear-gradient(135deg, #0F9D58 0%, #0288D1 100%) !important;
color: white !important;
}
.nav-link { color: rgba(255,255,255,0.9) !important; }
.nav-link:hover { background: rgba(255,255,255,0.15) !important; color: white !important; }
/* === 通用导航栏样式 === */
.navbar, .header, nav, .nav {
backdrop-filter: blur(20px) !important;
border-radius: 20px 20px 0 0 !important;
margin: 10px 10px 0 10px !important;
padding: 10px 20px !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.navbar-brand {
font-size: 1.5em !important;
font-weight: bold !important;
color: white !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
border-radius: 12px !important;
padding: 8px 16px !important;
background: rgba(255, 255, 255, 0.15) !important;
}
.nav-link {
border-radius: 20px !important;
margin: 4px 6px !important;
padding: 10px 20px !important;
transition: all 0.3s ease !important;
font-weight: 500 !important;
}
.nav-link:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
.nav-link.active {
background: rgba(255, 255, 255, 0.25) !important;
color: white !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}