关于 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 ...
随机推荐
- session与cookie的区别以及HTML5中WebStorage理解
一.session与cookie的区别 二.HTML5中WebStorage理解 WebStorage的目的是克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回 ...
- Day9 Python基础之函数基础(七)
参考链接:https://www.cnblogs.com/yuanchenqi/articles/5828233.html 1.函数的定义 定义: 函数是指将一组语句的集合通过一个函数名封装起来,要想 ...
- eclipse如何添加web dynamic project
很多eclipse版本是不能直接新建web dynamic project的,需要从网上找插件或更新. 比较方便的是在Help → Install-New-Software,点击add按钮,在Loca ...
- 关于spring的源码的理解
从最基础的Hello World开始. spring的Hello World就三行代码: public void test() { ApplicationContext context = new C ...
- [转帖]Windows注册表内容详解
Windows注册表内容详解 来源:http://blog.sina.com.cn/s/blog_4d41e2690100q33v.html 对 windows注册表一知半解 不是很清晰 这里学习一下 ...
- 【学亮IT手记】Servlet的生命周期
1.1 Servlet的生命周期 1.1.1 Servlet的生命周期概述 1.1.1.1 什么是生命周期 生命周期:一个对象从创建到销毁过程. 1.1.1.2 Servlet的生命周期(*****) ...
- 解决tab标签页,相同id时切换失灵的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Flutter 常用工具类库common_utils
地址:https://pub.flutter-io.cn/packages/common_utils#-readme-tab- Dart常用工具类库 common_utils 1.TimelineUt ...
- springmvc配置文件
1 springMVC的配置文件路径问题 https://www.cnblogs.com/ysloong/p/6071450.html
- Centos6.8 安装git
1.下载安装包 wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.8.0.tar.gz 2.安装依赖 sudo yum - ...