使用方式

把下面代码加入 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;
}
}

关于 atcoder 页面美化的 css的更多相关文章

  1. Cnblog页面美化小记

    Cnblog页面美化小记 这两天我在网上翻找了许许多多的资料,打开了不计其数的博客,对着\(js\).\(html\).\(css\)等文件删删改改,在浏览器和\(vscode\)间辗转腾挪...总算 ...

  2. 使用chrome查看页面元素的css样式

    使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...

  3. 兼容IE6的页面底部固定层CSS代码

    有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固定层CSS代码.如下 ...

  4. Thymeleaf模版--子页面单独引入CSS、JS文件

    https://blog.csdn.net/u010392801/article/details/80465800 ****************************************** ...

  5. 使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径

    使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径 经常地,我们要在jsp等页面引入像js,css这样的文件,但是在服务器来访问的时候,这时间就有关到相对路径与绝对路径了.像网页 ...

  6. Django项目:CRM(客户关系管理系统)--29--21PerfectCRM实现King_admin查看页面美化

    {#table_data_list.html#} {## ————————08PerfectCRM实现King_admin显示注册表的字段表头————————#} {% extends 'king_m ...

  7. 将这段美化的css代码

    很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px solid #96c2f1;backgrou ...

  8. 网站美化常见CSS

    伴随网络时代日新月异的发展,用户不仅仅满足于软件系统的功能需求,对软件系统的页面显示效果以及交互模式的要求也逐渐提高.尤其是展示性质的平台页面对于界面美化效果要求更高,有一句话说的好:Html是结构, ...

  9. 页面美化代码1.x

    页面定制CSS代码 /*接下来是原美化*/ /*接下来是原美化*/ /*接下来是原美化*/ /*接下来是原美化*/ /*接下来是原美化*/ /*接下来是原美化*/ /*接下来是原美化*/ .topic ...

随机推荐

  1. 行政区划sql数据脚本

    行政区划sql数据脚本 IF (EXISTS(SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[TB_Province]') ...

  2. Python之发邮件

    使用模块yagmail(使用收藏的yagmail,现在的第三方模块不能解决中文乱码问题) import yagmail user='xxx@126.com' password='xxxxxx' #使用 ...

  3. semantic-ui 分割线

    分割线即原生html中的<hr>标签.不过semantic-ui中将<hr>美化了一下下. 1.基础分割线 需要注意的是分割线只能使用div标签和p标签,不能使用span标签. ...

  4. [转帖]TLS 1.3 VS TLS 1.2,让你明白 TLS 1.3 的强大

    TLS 1.3 VS TLS 1.2,让你明白 TLS 1.3 的强大 https://www.jianshu.com/p/efe44d4a7501?utm_source=oschina-app 又拍 ...

  5. [转帖] BMC安全隐患

    BMC再现漏洞,裸金属云服务器岌岌可危 https://zhuanlan.kanxue.com/article-8006.htm 之前有vt-x 可能有隐患 现在看起来BMC 也就是IPMI 也有隐患 ...

  6. transform: translate(-50%, -50%) 实现块元素百分比下居中

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 2.请介绍一下List和ArrayList的区别,ArrayList和HashSet区别

    第一问: List是接口,ArrayList实现了List接口. 第二问: ArrayList实现了List接口,HashSet实现了Set接口,List和Set都是继承Collection接口. A ...

  8. python之路--装饰器

    二 .通用装饰器的写法 python里面的动态代理. 存在的意义: 在不破坏原有的函数和原有函数的调用基础上,给函数添加新的功能 def wrapper(fn): # fn是目标函数. def inn ...

  9. C# 中那些常用的工具类(Utility Class)(三)

    今天来接着写这个系列的文章,这一篇主要是用来介绍关于C#中的XML序列化的问题,这个相信大家一定会经常使用它,特别是在WPF中,有时候我们需要将我们后台的数据保存在数据库中,从而在软件下一次启动的时候 ...

  10. Windows开启WMI时一些总结

    通过远程的方式连接WMI获取计算机信息时,可能会出现远程主机拒绝访问,这时就要通过下面的方式来开启当前计算机的WMI服务,下面以Win7和Win10为例来进行相关的说明,通过一步步排查去连接远程服务. ...