关于 atcoder 页面美化的 css

使用方式

把下面代码加入 ESI Stylish 即可。

这是一个 chrome 的插件,可以翻\(~\)墙(或者不需要)去下载。
这是本人瞎魔改的。。。

代码

Update on 12-17

\(atcoder\) 竟然变成 \(beta\) 版本了。。更新了一下 css。

@-moz-document regexp("http://atcoder.jp/.*"), regexp("https://atcoder.jp/.*") {
    #main-div.float-container{
        background: url(http://images.cnblogs.com/cnblogs_com/zjp-shadow/1056673/o_atcoder.jpg) fixed no-repeat;
    }
    #main-div {
        background: url(http://images.cnblogs.com/cnblogs_com/zjp-shadow/1056673/o_atcoder.jpg) fixed no-repeat;
    }
    .float-container>#main-container {
        border-radius: 15px;
        opacity: 0.75;
        background: #fff;
        box-shadow: 0px 0px 10px 5px #888;
    }
    .panel {
        border-radius: 15px;
        /*opacity: 0.7;*/
        word-wrap: break-word;
    }
    .panel-primary>.panel-heading {
        color: white;
        background-color: #836592;
        border-color: #836592;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .panel-info>.panel-heading {
        color: white;
        background-color: #836592;
        border-color: #836592;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .panel-default>.panel-heading {
        color: white;
        background-color: #836592;
        border-color: #836592;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .panel-default .panel-title a {
        color: white;
    }
    .post-footer {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        background-color: #fff;
    }
}

@-moz-document regexp("https://atcoder.jp/contests/.*"), regexp("http://atcoder.jp/contests/.*") {
    html body {
        background: url(https://cdnb.artstation.com/p/assets/images/images/009/569/479/large/jorge-rocha-cn3-ep-313-an-templo-exterior-v014.jpg?1519726679) fixed no-repeat;
        line-height: 150%;
    }

    div#outer-inner{
        border-radius: 15px;
        /*  opacity: 0.7;*/
        min-height: 70%;
    }
    .label-warning {
        background-color: red;
    }
    .standings-score {
        color: orangered;
        font-weight: bold;
    }
    .standings-wa {
        color: red;
        font-weight: 600;
    }

    pre.source-code {
        max-height: 350px;
        overflow-x: scroll;
        overflow-y: scroll;
        border: 1px solid #ccc;
        font-size: 15px;
    }
    .well {
        font-size: 15px;
        color: darkslategray;
    }
    .label-success {
        background-color: forestgreen;
    }
    pre {
        display: block;
        padding: 8.5px;
        margin: 0 0 9px;
        font-size: 13px;
        line-height: 20px;
        background-color: #f9f4ff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.15);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        white-space: pre;
        white-space: pre-wrap;
        word-break: break-all;
        word-wrap: break-word;
    }
    #task-statement code {
        /* padding: 4px 4px 2px 4px; */
        padding: 0;
        margin: 0;
        border-width: 0;
        font-size: 13px;
    }
    .nav-tabs>li>a:hover {
        border-color: #eee #eee #ddd;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    .nav-tabs > .active > a, .nav-tabs > .active > a:hover {
        color: #555555;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }
}

@-moz-document regexp("http://atcoder.jp/contest.*"), regexp("http://atcoder.jp/ranking.*"), regexp("https://atcoder.jp/contest.*"), regexp("https://atcoder.jp/ranking.*") {
    #main-div {
        background: url(https://cdnb.artstation.com/p/assets/images/images/009/569/479/large/jorge-rocha-cn3-ep-313-an-templo-exterior-v014.jpg?1519726679) fixed no-repeat;
    }
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
        color: #555;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
        border-top-left-radius: 15px;
    }
    .row {
        border-radius: 15px;
        margin-left: -15px;
        margin-right: -15px;
        background: white;
        /*opacity: 0.68;*/
    }
    p {
        margin-top: 50px;
    }
}

@-moz-document regexp("https://atcoder.jp/user/.*"), regexp("http://atcoder.jp/user/.*") {
    .row {
        border-radius: 15px;
        margin-left: -15px;
        margin-right: -15px;
        background: white;
        opacity: 0.8;
    }

    dl {
        margin-top: 30px;
        margin-bottom: 20px;
    }
}

@-moz-document regexp("https://atcoder.jp/contests/.*/submissions") {
    .panel-default>.panel-heading {
        color: white;
        background-color: white;
        border-color: white;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
}

转载于:https://www.cnblogs.com/zjp-shadow/p/9505755.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值