关于 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;
}
}
关于 atcoder 页面美化的 css的更多相关文章
- Cnblog页面美化小记
Cnblog页面美化小记 这两天我在网上翻找了许许多多的资料,打开了不计其数的博客,对着\(js\).\(html\).\(css\)等文件删删改改,在浏览器和\(vscode\)间辗转腾挪...总算 ...
- 使用chrome查看页面元素的css样式
使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...
- 兼容IE6的页面底部固定层CSS代码
有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固定层CSS代码.如下 ...
- Thymeleaf模版--子页面单独引入CSS、JS文件
https://blog.csdn.net/u010392801/article/details/80465800 ****************************************** ...
- 使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径
使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径 经常地,我们要在jsp等页面引入像js,css这样的文件,但是在服务器来访问的时候,这时间就有关到相对路径与绝对路径了.像网页 ...
- Django项目:CRM(客户关系管理系统)--29--21PerfectCRM实现King_admin查看页面美化
{#table_data_list.html#} {## ————————08PerfectCRM实现King_admin显示注册表的字段表头————————#} {% extends 'king_m ...
- 将这段美化的css代码
很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px solid #96c2f1;backgrou ...
- 网站美化常见CSS
伴随网络时代日新月异的发展,用户不仅仅满足于软件系统的功能需求,对软件系统的页面显示效果以及交互模式的要求也逐渐提高.尤其是展示性质的平台页面对于界面美化效果要求更高,有一句话说的好:Html是结构, ...
- 页面美化代码1.x
页面定制CSS代码 /*接下来是原美化*/ /*接下来是原美化*/ /*接下来是原美化*/ /*接下来是原美化*/ /*接下来是原美化*/ /*接下来是原美化*/ /*接下来是原美化*/ .topic ...
随机推荐
- 行政区划sql数据脚本
行政区划sql数据脚本 IF (EXISTS(SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[TB_Province]') ...
- Python之发邮件
使用模块yagmail(使用收藏的yagmail,现在的第三方模块不能解决中文乱码问题) import yagmail user='xxx@126.com' password='xxxxxx' #使用 ...
- semantic-ui 分割线
分割线即原生html中的<hr>标签.不过semantic-ui中将<hr>美化了一下下. 1.基础分割线 需要注意的是分割线只能使用div标签和p标签,不能使用span标签. ...
- [转帖]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 又拍 ...
- [转帖] BMC安全隐患
BMC再现漏洞,裸金属云服务器岌岌可危 https://zhuanlan.kanxue.com/article-8006.htm 之前有vt-x 可能有隐患 现在看起来BMC 也就是IPMI 也有隐患 ...
- transform: translate(-50%, -50%) 实现块元素百分比下居中
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 2.请介绍一下List和ArrayList的区别,ArrayList和HashSet区别
第一问: List是接口,ArrayList实现了List接口. 第二问: ArrayList实现了List接口,HashSet实现了Set接口,List和Set都是继承Collection接口. A ...
- python之路--装饰器
二 .通用装饰器的写法 python里面的动态代理. 存在的意义: 在不破坏原有的函数和原有函数的调用基础上,给函数添加新的功能 def wrapper(fn): # fn是目标函数. def inn ...
- C# 中那些常用的工具类(Utility Class)(三)
今天来接着写这个系列的文章,这一篇主要是用来介绍关于C#中的XML序列化的问题,这个相信大家一定会经常使用它,特别是在WPF中,有时候我们需要将我们后台的数据保存在数据库中,从而在软件下一次启动的时候 ...
- Windows开启WMI时一些总结
通过远程的方式连接WMI获取计算机信息时,可能会出现远程主机拒绝访问,这时就要通过下面的方式来开启当前计算机的WMI服务,下面以Win7和Win10为例来进行相关的说明,通过一步步排查去连接远程服务. ...