static/css/compare.css
/*
这里是对本页面样式的主要更改部分
****
包括之前你写在标签内的所有style=""部分
****
如有任何对页面设计的更改都会在此处进行修改
如果有看不懂的代码可以尝试联系王小黑 @名为王小黑!
*/


/* 页面红色文字的修改 */
.red_text {
    color: red;
}
/* 主题样式 */
body {
    margin: 0;
    padding: 0;
    position: relative;
}
.background {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px; /* 设置背景图片宽度 */
    height: 200px; /* 设置背景图片高度 */
    background-image: url('../img/keobeCG.png');
    background-repeat: no-repeat;
    background-size: cover;
    /* z-index: -1;  使背景图片处于内容下方 */
}

.bg {
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    background-image: url('../img/bg.png');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top;
    background-size: 100% auto;
}



/* 版心 */
.w {
    width: 1200px;
    margin: 0px auto;
}

/* 比较模块 */
.compare,
.footer,
.final_table {
    margin: 10px auto 0;
    padding: 20px;
    border-radius: 8px;
    background: rgba(250, 250, 250, 0.87);
    box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}


.compare:hover,
.footer:hover,
.final_table:hover {
    box-shadow: 0 3px 5px 5px rgba(0, 0, 0, 0.2);
}

.operator-container {
    position: relative;
}

.operator-container:hover {
    background-color: transparent;
    display: inline-block;
    filter: drop-shadow(0 0 7px rgba(0, 0, 0, .7));
    transition: All 50ms ease-in-out;
    cursor: pointer;
}

.zh {
    position: absolute;
    right: 0;
    bottom: 1px;
    z-index: 3;
    color: #fff;
    text-shadow: 1px 1px 10px #000;
    width: 100%;
    text-align: center;
}
/* 比较核心头部标题恒定宽带 */
.compare .compare_header {
    width: 315px;
}

/* 干员图片大小设置 */
.compare tr td img {
    width: 100%;
}

/* 干员比较部分标题文字样式设置 */
.compare tr td h1 {
    text-align: center;
    font-size: 32px;
    margin: 0 0 11px;
}

/* 干员比较部分作者文字样式设置 */
.compare tr td h4 {
    text-align: center;
    font-size: 16px;
    margin: 11px 0;
}

/* 干员比较核心盒子 */
.compare_block {
    margin: 0px;
    text-align: center;
}

/* 干员比较核心中的所有按钮 */
.compare_block input, .final_table input {
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.compare_block input:hover, .final_table input:hover {
    background-color: #ccc;
}

/* 比较核心中投票按钮设计 */
.vote_button {
    cursor: pointer;
}

.compare_block .vote_button {
    width: 70px;
    margin: 0px 25px;
    font-size: 40px;
    white-space: normal;
}

.compare_block #toupiao_success {
    text-align: center;
    font-size: 20px;
    color: orangered;
}

/* 比较核心中其他功能按钮设计 */
.compare_block .function {
    margin-top: 14.5px;
}

/* 比较核心中跳过按钮设计 */
.compare_block .skip {
    margin: 0 10px;
    font-size: 20px;
}

.new_compare_mode_open,
.new_compare_mode_close {
    margin: auto;
    font-size: 20px;
}

.new_compare_mode_open {
    display: none;
    background-color: #4CAF50;
}

.compare_block .new_compare_mode_open:hover {
    background-color: darkgreen;
}

/* 比较核心中查看结果按钮设计 */
.compare_block .result,
.compare_block .close {
    margin: 0 10px;
    font-size: 20px;
}

.compare_block .result {
    display: inline;
}

.compare_block .close {
    display: none;
}

/* 下方规则等文字设计 */
.footer {
    width: 723px;
    margin-bottom: 10px;
}

.footer h2 {
    margin: 0 0 20px;
    text-align: center;
    font-size: 24px;
}

.footer h3 {
    text-align: center;
    font-size: 19px;
}


.link-container { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    overflow-wrap: break-word; /*使得文本在单词之间换行*/
    word-wrap: breakword; /*这种写法兼容更广*/
    white-space: normal; /*防止因为缩进导致的换行*/
    max-width: 100%;/*设置一个最大宽度，防止过长*/
    justify-content: center;
}


.final {
    display: none;
}

/* 投票结果表格部分设计 */
.final table thead tr th {
    padding: 0 40px;
    font-size: 25px;
}

.final table caption {
    /* display: flex; */
    /* justify-content: space-between; */
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    margin-bottom: 1rem;
}

.final table thead tr th:nth-child(2),
.final table thead tr th:nth-child(3) {
    padding: 0 40px;
}

.final table thead tr th:nth-child(4) {
    padding: 0 45px;
}

.final table tbody tr td {
    font-size: 25px;
}

.final_table_group {
    display: flex;
    /* 如果需要按列分布总表和个人表，去掉注释 */
    /* flex-direction: column; */
    justify-content: space-between;
}

.final_table {
    display: none;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.final_table_text {
    filter: grayscale(1) contrast(999) invert(1)
}

.sort-icon {
    display: inline-block;
    width: 0;
    height: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    vertical-align: middle;
    border-width: 5px;
    border-style: solid;
}

.sort-icon.down {
    border-color: #000000 transparent transparent;
}

.sort-icon.up {
    border-color: transparent transparent #000000;
}

.sort-icon.select.down {
    border-color: #00FFFF transparent transparent;
}

.sort-icon.select.up {
    border-color: transparent transparent #00FFFF;
}

.nclassesInput {
    display: none;
    /* 默认情况下隐藏按钮 */
    position: fixed;
    bottom: 150px;
    right: 100px;
    background-color: #dddddd;
    color: #000;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    transition: all 0.5s ease;
    z-index: 2;
}

#topBtn {
    display: none;
    /* 默认情况下隐藏按钮 */
    position: fixed;
    bottom: 100px;
    right: 100px;
    background-color: #dddddd;
    color: #000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px 20px;
    transition: all 0.5s ease;
    z-index: 2;
}

#topBtn:hover {
    background-color: #ccc;
}

#refreshBtn {
    display: none;
    /* 默认情况下隐藏按钮 */
    position: fixed;
    bottom: 50px;
    right: 100px;
    background-color: #dddddd;
    color: #000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px 20px;
    transition: all 0.5s ease;
    z-index: 2;
}

#refreshBtn:hover {
    background-color: #ccc;
}

#mouse_follower {
    position: absolute;
    width: 100px;
    pointer-events: none;
    z-index: 9;
}

.ioport {
    padding: 5px 5px;
    background: #00b0f0;
    color: #FFF;
    border: none;
    border-radius: 5px;
    font-size: 10px;
}


/* 上移动画类 */
.move-up-animation {
    animation: moveUp 1s forwards; /* 动画持续1秒，结束后保持最终状态 */
    opacity: 0; /* 初始透明度为0 */
}

@keyframes moveUp {
    0% {
        transform: translateY(100%); /* 初始位置：垂直方向下移100% */
        opacity: 0; /* 初始透明度为0 */
    }
    100% {
        transform: translateY(0); /* 最终位置：垂直方向不移动 */
        opacity: 1; /* 最终透明度为1 */
    }
}


/* 1v1 matrix */
#vote_1v1_matrix_container {
    display: none;
    width: 80vw;
    min-width: 723px;
    overflow: auto;
}

#operators-1v1-transfer{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.operators-1v1-button{
    width: 200px;
    font-size: 20px;
    margin: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 15px;
    transition: all 0.5s ease;
}

.operators-1v1-button:hover {
    background-color: #ccc;
}