XJSOJ优化(Stylus脚本)

news/2025/9/27 22:18:01/文章来源:https://www.cnblogs.com/Fire-poetry/p/19115798

/* 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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/920014.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用mpm-itk让Apache以不同用户身份运行的完整指南

本文详细介绍了如何使用Apache的mpm-itk模块实现每个虚拟主机以不同用户身份运行,解决WordPress开发和生产环境中的文件权限问题,包含Docker容器配置和PHP邮件功能故障排除方案。使用mpm-itk让Apache以不同用户身份运…

sg.如何打开PySimpleGUI调试器窗口?

在PySimpleGUI中,调试器窗口的打开方式主要有以下三种,每种方式均适用于不同调试场景,且均通过内置调试器实现: 方法一:使用show_debugger_window()函数适用场景:需要快速查看变量值或交互式执行代码时。 操作步…

第6篇、Flask 表单处理与用户认证完全指南:从零到实战

标签:Python Flask Web开发 表单验证 Session Cookie 用户认证 安全编程🎯 为什么选择这篇文章? 在Web开发的世界里,表单处理和用户认证是每个开发者必须掌握的核心技能。无论是构建电商网站、社交平台还是企业管…

做视频网站收费标准wordpress.org密码

近日,全球IT市场研究和咨询公司Gartner发布最新报告《Magic Quadrant™ for Cloud Database Management Systems》(全球云数据库管理系统魔力象限)。全自研分布式数据库 OceanBase 入选“荣誉提及”,2022 年推出的云数据库 OB Clo…

腾讯开源 AudioStory!能生成 150 秒故事长音频,还会剧情拆解 + 自动配乐 - 详解

腾讯开源 AudioStory!能生成 150 秒故事长音频,还会剧情拆解 + 自动配乐 - 详解2025-09-27 22:09 tlnshuju 阅读(0) 评论(0) 收藏 举报pre { white-space: pre !important; word-wrap: normal !important; overf…

First blog of HannesZ

First blog of HannesZ这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/202501SoftwareEngineering这个作业要求在哪里 https://edu.cnblogs.com/campus/fzu/202501SoftwareEngineering/homework/13546这个作…

威联通 NAS Docker 容器更新详解:从备份、推送到重建的全流程指南

本文针对在威联通(QNAP)等 NAS 平台上,因网络限制导致从 Docker Hub 更新容器困难或速度缓慢的问题,提出了一套完整且高效的解决方案。文章以更新 Sun-Panel 导航面板为例,详细阐述了如何利用 PC 作为跳板,结合 …

parameter和defparam的简单用法

parameter和defparam的用法 1.parameter (1)“C语言中的宏定义”功能 对于parameter来说,在我们的verilog语言中,在写.v的文件中,对于同一个变量多次出现,每次都是同时改变这些变量,可以使用parameter来替换变量…

9.27学习笔记

今日速览 环境拓扑(安全开启后) 表格 节点 新增角色 Principal 样例 node1 KDC (kerberos) kadmin/admin@HADOOP.COM node2 YARN RM + Queue Mgmt yarn/node2@HADOOP.COM node3 Phoenix RS hbase/node3@HADOOP.COM 关…

什么网站做兼职最好平台经济是什么意思

首先,我的结论是,如果是对对象进行 操作的话,传的是地址,如果是对基本数据类型进行操作的话,传的是值!下面,我再用一个小的实例来测试我的结论:class Person {int age;public void setAge(int a…

开学日记

dse好玩的dse好玩 我选了M2/物理/化学,物理和M2老师允许我不听课,所以理论上我可以偶尔去隔壁中国文学&&历史客串一下,好玩的 M2目前就是在学代数入门,感觉学的东西和深度不是很牛,但是我们神秘的M2老师说…

生活随笔

2025.9.27 今天不用上课(开心 做了一些题水了会洛谷一天就结束了!

网站免费建站广告机创新的南昌网站制作

目录 1 填算式 2 提取子串 3 机器人行走 4 地址格式转换 5 排日程 前言:以下代码仅供参考,若有错误欢迎指正哦~ 1 填算式 【结果填空】 (满分11分)看这个算式:☆☆☆ ☆☆☆ ☆☆☆如果每个五角星代表 1 ~ 9 的不同的数字。这个算式有多少种…

西宁商城网站建设公司免费解析素材网站

制造执行系统MES是一种应用于制造工厂的实际操作系统,它通过实时监控和控制生产流程,为生产过程提供全面的管理和优化。在MES管理系统解决方案中,设备管理功能是非常重要的一部分,它可以实现设备实时监控、故障预警、维护保养等功…

NOIP模拟赛 十八

DP/生成函数+博弈论+构造/倍增+根号重构A. 神秘 DP 的神秘做法。 先考虑朴素 DP ,发现最短路是可以钦定的,具体的,设 \(1\) 到其最短路为 \(d\) ,则称其为第 \(d\) 层。 要求,每一层如果存在点,一定要向上一层连…

网站建设与设计毕业设计西安加盟代理网站建设

转自:http://xilinx.eetrend.com/content/2019/100042384.html xilinx7系列FPGA主要包括:Spartan-7、Artix-7、Kintex-7、Virtex-7。其性能/密度/价格也随着系列的不同而提升。 Spartan7系列是7系列中的屌丝青年,拥有最低的价格、最低的功耗…

UNIQUE VISION Programming Contest 2024 Autumn (AtCoder Beginner Contest 425)

A - Sigma Cubes点击查看代码 #include <bits/stdc++.h>using i64 = long long;void solve() {int n;std::cin >> n;int ans = 0;for (int i = 1; i <= n; ++ i) {ans += (i % 2 ? -1 : 1) * i * i * …

WPF Canvas draw circle,triangle,rectangle such as mark

//Window.xaml <Window x:Class="WpfApp15.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quo…

论文解读-《Less is More on the Over-Globalizing Problem in Graph Transformers》 - zhang

1. 论文介绍 论文题目:Less is More on the Over-Globalizing Problem in Graph Transformers 论文领域:图神经网络,graph transformer 论文发表: ICML 2024 论文代码:https://github.com/null-xyj/CoBFormer 论文…

发布软文网站济南建设工程交易中心

在互联网的世界中&#xff0c;不同应用程序的数据传输方法各异。P2P文件共享&#xff08;Peer-to-Peer File Sharing&#xff09; 作为一种高效的文件传输方式&#xff0c;使得用户可以在没有中央服务器的情况下直接进行文件交换。本文将详细介绍P2P文件共享的基本原理、优势及…