BETTER SYOJ by ACnoway

/* ==UserStyle==
@name         BETTER SYOJ
@version      20231103.06.27
@namespace    userstyles.world/user/ACnoway
@description  A new UI for SYOJ, also can be used for old versions of UOJ. SYOJ的新UI，旧版本的UOJ应该也是可用的
@author       ACnoway
@license      No License
==/UserStyle== */

@-moz-document url("版本") {
/*----------------------------------前言----------------------------------*/
/*

To: The users of BETTER SYOJ,

    叮——恭喜你获得了 BETTER SYOJ 抢先体验卡 * 1！
    这意味着你可以使用更加美观和精致的 SYOJ，并获得更加愉悦的使用体验 :)
    
    这个项目为 @Bugupop 个人一时兴起发起，包含了作者对 SYOJ 和 N oi 满满的热爱（）创作初心是希望可以给OJ贡献一点有意思的东西，或许是无法磨灭的创伤。是纯用爱发电！请多多支持！

    本插件在初始状态是个半成品，大部分样式的设置基于作者本人的审美，也许你会觉得很不完美，那么就请自己动手开始修改吧！
    你将花些时间将以下 CSS 代码做一些更加个性化的改动，这个过程可能会略有些痛苦和漫长。代码中已经提前写了一些方便修改的注释，希望可以给你一些帮助。
    代码预留出了宏更改色彩变量的区域，如果不需要给网页细节分开做调整的话可以直接替换变量后的颜色编码。不知道某个变量对应的是哪些位置的可以先按自己喜好乱改一遍再慢慢摸索调整！目前来说这是最好的方法啦。

    请在调整过程中将发现的问题和优化小建议随时反馈给 @Bugupop ！包括且不限于自己觉得很酷的可以永久增添的补丁、自己修改起来麻烦或完全不会修改的样式、对作者写的又臭又长根本没有用的码的吐槽ttt

    总之！请一定将使用体验反馈给我！这对我真的很重要！！！非常感谢！！！（鞠躬）

    ps.如果你想的话也欢迎加入这个小插件的编写团队！
    pps.现在编写团队有 @Bugupop ，以及提供了强力技术支持的 @acnoway ，qwq 快来加入吧！

谢谢你的支持！！！
一切为了更好的实验oj！

                                                                                                                                          From: BETTER SYOJ WRITING TEAM
                                                                                                                                                 2023/10/18
*/



/*----------------------------------版本----------------------------------*/
/* 
@name: BETTER SYOJ
@version: 1.3.1
@update: 2023/11/2
@description: A personalized beautification patch for SYOJ
@author: BETTER SYOJ WRITING TEAM (Include @Bugupop @acnoway)
*/
}

@-moz-document url("日志") {
/*----------------------------------日志----------------------------------*/
/* 
----------------------------------2023/8/25----------------------------------
写了好多东西，不能按条罗列了，大概是把主页、比赛、博客页面基本调整好了，后面如果遇到这次写的一些重要的设置可能会补充在这里。

----------------------------------2023/10/12----------------------------------
·修复了比赛页面右侧框上圆角边框白缝bug
·添加了页码颜色设置
·对颜色进行全局变量定义 方便用户修改

----------------------------------2023/10/13----------------------------------
·更新了前言

----------------------------------2023/10/14----------------------------------
·添加了大部分按钮的颜色设置
·改变了鼠标选中高亮颜色
·替换了评价颜色

----------------------------------2023/10/17----------------------------------
·添加了私信页面美化
·试图更改hack下拉框悬停颜色无果

----------------------------------2023/10/18----------------------------------
·继续美化了博客页面
·修复了某些页面一些文本颜色缺失以及按钮颜色缺失小问题
·修复了题库页面割裂的样式设置

----------------------------------2023/10/19----------------------------------
·添加了某些遗漏按钮的颜色设置
·增添了背景卡毛玻璃自选效果（默认关闭状态 需要手动打开）
·增添了一组新的配色方案
·修复私信按钮与个人主页按钮捆绑样式 bug

----------------------------------2023/10/27----------------------------------
·修复了rating折线图悬停框图层错误
·再次修复私信按钮与个人主页按钮捆绑样式 bug

----------------------------------2023/10/30----------------------------------
·将比赛内页区块内样式应用场景改为contest,problem,user前缀网页
·添加文件传输按钮色彩样式
·替换了原有比赛菜单条悬停背景颜色
·添加了正在进行字样颜色样式设置

----------------------------------2023/11/1----------------------------------
·为了庆祝老N把网页图标改掉了 添加了图标圆角 恭喜SDSY拥有了完全意义上自己的OJ！
·修改标题为全大写
·好像补了点什么颜色设置之类的 想不起来具体改哪了


----------------------------------2023/11/2----------------------------------
·添加了鼠标悬停在菜单栏字上方的翻转效果（默认关闭状态 需要手动打开）
·修复了 Hack 页面按钮悬停效果绑定错误问题
·添加了代码页外框颜色设置
*/
}

/*----------------------------------色彩自定义区----------------------------------*/
/*配色方案1 主色：蓝粉黄*/
:root {
    --main-bg-color: #ffffffc4;
    --main-card-color: #ffffffba;
    --link: #5374ba;
    --link-dark: #2c457d;
    --main-color1: #6686ca;
    --main-color2: #d16d7b;
    --main-color3: #ffe991;
    --main-color1-dark: #5374ba;
    --main-color2-dark: #c95c6c;
    --search-focus-border: #fc0;
    --search-focus-border-dark: #f4b700;
    --running: #e3980d;
    --search-focus-light: #ffe99191;
    --back: #ffeab5de;
    --back-border: #edb730;
    --link-focus-shadow: #598eff4f;
    --focus-shadow: #bfd3ff69;
    --selected: #e3607238;
    --bar: #ffdf5ea8;
    --selected-dark: #ac545f;
    --border-normal: #4360a0;
    --border-dark: #2c457d;
    --border-dark2: #8e414b;
    --main-dark: #4b69ad;
    --high-light: #ffe9913d;
    --div-bg: #fff3f4;
    --tag: #e0909b;
    --red: #d85454;
    --green: #279f87;
}

@-moz-document url-prefix("http://oj.sdshiyan.cn/") {
/*配色方案2 主色：绿灰黄*/
/* :root {
    --main-bg-color: #ffffffb8;
    --main-card-color: #ffffffba;
    --link: #077f67;
    --link-dark: #035b49;
    --main-color1: #2eb298;
    --main-color2: #888;
    --main-color3: #6686ca;
    --main-color1-dark: #1f947c;
    --main-color2-dark: #707070;
    --search-focus-border: #fc0;
    --search-focus-border-dark: #f4b700;
    --search-focus-light: #ffe99191;
    --running: #e3980d;
    --back: #ffeab5de;
    --back-border: #edb730;
    --link-focus-shadow: #279f8742;
    --focus-shadow: #6fc5b442;
    --selected: #598eff4f;
    --bar: #ffdf5ea8;
    --selected-dark: #5374ba;
    --border-normal: #4360a0;
    --border-dark: #09705b;
    --border-dark2: #353535;
    --main-dark: #4b69ad;
    --high-light: #ffe9913d;
    --div-bg: #e8f8f5;
    --tag: #7eb28a;
    --red: #c96148;
    --green: #6686ca;
} */



/*----------------------------------主体构架----------------------------------*/
/*背景*/
body {
    background-image: url(https://cdn.luogu.com.cn/upload/image_hosting/w423539r.png)!important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /*毛玻璃特效 喜欢可以取消注释 有可能页面会变卡*/
    /*backdrop-filter:blur(3px);*/
}

/*背景卡*/
.container.theme-showcase {
    transition: .3s;
    background-color: var(--main-bg-color);
    /*毛玻璃特效 喜欢可以取消注释 有可能页面会变卡*/
    /*backdrop-filter:blur(5px);*/
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    box-shadow: 0px 5px 10px #0003;
}

.container.theme-showcase:hover {
    transition: .3s;
    background: #ffffffe0;
    box-shadow: 0px 5px 10px #00000082;
}

/*选中文字*/
::selection {
    background: var(--selected);
    /*color:var(--selected-dark);*/
}

/*上方菜单栏*/
.bg-light {
    border-radius: 10px;
    background-color: var(--main-card-color)!important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--main-color1);
}

/*字悬停翻转效果（调整中）*/
/* .nav-link{
    transition:.2s;
}
.nav-link:hover{
    transform:scalex(-1);
} */
/*输入框*/
.form-inline .form-control {
    opacity: .7;
    margin: 0px 5px 0px 5px;
    /*喜欢头首分家的可以不改这里 或者直接删掉*/
    border-radius: 5px;
}

.btn.btn-success.btn-sm {
    background-color: var(--main-color1)!important;
    border-color: var(--main-color1-dark)!important;
}

.btn.btn-success.btn-sm:hover {
    background-color: var(--main-color1-dark)!important;
    border-color: var(--border-dark)!important;
}

/*登录页面隐藏验证码*/
/* div[id="div-authcode"] {
    display: none!important;
} */
/*我的提交记录按钮*/
.float-right > a {
    height: 30px;
    margin: 3px 5px 3px 5px;
    padding-top: 5px;
    border-radius: 5px;
    background-color: var(--main-color2);
    border-color: var(--main-color2-dark);
}

.float-right > a:hover {
    margin: 3px 5px 3px 5px;
    background-color: var(--main-color2-dark);
    border-color: var(--border-dark2);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--main-color1-dark);
    border-color: var(--border-dark);
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--link-focus-shadow)!important;
}

/*页顶链接*/
.nav-link {
    transition: .2s;
    color: var(--main-color1);
}

.nav-link:hover {
    transition: .2s;
    color: var(--main-color2);
}

/*搜索按钮*/
.btn-outline-primary {
    color: var(--main-color2)!important;
    border-color: var(--main-color2);
}

.btn-outline-primary:hover {
    background-color: var(--main-color2);
    color: #fff!important;
    border-color: var(--main-color2);
}

.form-control:focus {
    border-color: var(--search-focus-border);
    box-shadow: 0 0 0 0.2rem var(--search-focus-light);
}

.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--search-focus-light);
}

.btn-outline-primary.focus,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--search-focus-light);
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--main-color2);
    color: #fff!important;
    border-color: var(--main-color2);
}

/*名字选中*/
.nav-link.dropdown-toggle:active {
    background-color: #ffffff85!important;
    border-radius: 10px;
}

/*表格*/
.table-responsive {
    transition: .3s;
    background: #ffffffad!important;
    border-radius: 10px;
}

.table-responsive:hover {
    transition: .3s;
    background: #ffffffe0!important;
    box-shadow: 0px 5px 10px #0000004a;
}

/*去除表格底边空白条*/
.table.table-bordered.table-hover.table-striped.table-text-center {
    margin-bottom: 0px;
}

.table.table-bordered.table-hover.table-striped {
    margin-bottom: 0px;
}

.table.table-bordered.table-text-center {
    margin-bottom: 0px;
}

.table-responsive {
    margin-bottom: 20px;
}

/*表格下方页码*/
.pagination.top-buffer-no.bot-buffer-sm.justify-content-center {
    margin-top: 40px;
}

/*名字下拉框*/
.dropdown-menu.show {
    margin-top: 5px;
    background-color: #ffffffe8!important;
    border-radius: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

.dropdown-item:hover {
    background-color: var(--search-focus-light);
    border-radius: 10px;
}

/*标题*/
.d-none.d-sm-block {
    padding-top: 10px;
    padding-bottom: 10px;
    text-transform: upperc...