关于 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 ...
随机推荐
- Is-a
在知识表示.面向对象程序设计与面向对象设计的领域里, is-a(英语:subsumption,包含架构)指的是类的父子继承关系, 例如类D是另一个类B的子类(类B是类D的父类). 换句话说,通常&qu ...
- ipython安装( jupyter)
生产环境:win10 64位 pip的版本不是最新的,输入命令 python -m pip install --upgrade pip 更新我们的pip,pip不是最新的也会导致安装不了ipython ...
- MySQL 性能调优之索引
原文:http://bbs.landingbj.com/t-0-245452-1.html 对于索引的优化,我们第一需要找到合适的字段,第二创建索引找到合适的顺序,第三要找到合适的比例,第四是要做合适 ...
- freemarker数值格式化
语法:number?string(exp) 说明:根据给定的格式化表达式将数值格式化为字符串. 参数:格式化字符串,"0"表示固定占位(至少有这个位数,不足位数用0代替),&quo ...
- laravel打印sql
DB::connection()->enableQueryLog(); print_r(DB::getQueryLog());
- [转帖]一键获取 所有连接过的wifi 密码
cmd 一键获取 所有连接过的wifi 密码 转帖来源: http://www.cnblogs.com/hookjoy/p/5537623.html for /f "skip=9 token ...
- 缓存session,cookie,sessionStorage,localStorage的区别
https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...
- 五句话搞定JavaScript作用域(ES5)
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...
- CRM/PLM/SCM/MES与ERP的联系与区别
企业通过专设信息机构.信息主管,配备适应现代企业管理运营要求的自动化.智能化.高技术硬件.软件.设备.设施,建立包括网络.数据库和各类信息管理系统在内的工作平台,提高企业经营管理效率的发展模式. 那么 ...
- 模仿jdk编译代码去除注释,多行注释
package com.jachs.mvc; import java.*; import ch.qos.logback.classic.net.SyslogAppender; /**** * * @a ...