zoukankan      html  css  js  c++  java
  • 关于 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- 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;
    	}
    }
    
  • 相关阅读:
    在百度搜索"2012世界末日"所展现的地震效果的源代码
    java笔记:熟练掌握线程技术基础篇之解决资源共享的问题(中)下篇
    系统设计与架构笔记:ETL工具开发和设计的建议
    java笔记:熟练掌握线程技术基础篇之线程的协作和死锁的问题(下)
    java笔记:关于复杂数据存储的问题基础篇:数组以及浅拷贝与深拷贝的问题(上)
    java笔记:熟练掌握线程技术基础篇之解决资源共享的问题(中)中篇
    用javascript写的小键盘
    系统设计与架构笔记:对我新公司网站的技术架构初解
    java笔记:关于复杂数据存储的问题基础篇:数组以及浅拷贝与深拷贝的问题(下)
    使用 jQuery,第 1 部分: 将桌面应用程序引入浏览器
  • 原文地址:https://www.cnblogs.com/zjp-shadow/p/9505755.html
Copyright © 2011-2022 走看看