Skip to content

Instantly share code, notes, and snippets.

@updateing
Created April 10, 2016 13:01
Show Gist options
  • Save updateing/49b549beda4dce2be3f5fe0e11ff7be0 to your computer and use it in GitHub Desktop.
Save updateing/49b549beda4dce2be3f5fe0e11ff7be0 to your computer and use it in GitHub Desktop.
Custom black-themed stylesheet for HUDBT, based on AlanGao's work.
/* 初始化 */
body {
border: 0;
padding: 0;
margin: 0;
font-family: "Microsoft Yahei",tahoma,arial,helvetica,sans-serif;
background: rgb(238,238,238);
}
table,tbody,tr,td,th,div,#header-info {
border: 0
}
/* 控制面板和趣味盒错位修复 */
dl dt {
padding: 5px 5px 0 0;
}
input.a {
font-size:1.1em
}
/* 主页面 */
#header-userinfo {
display: table-cell;
}
#header-userinfo > .minor-list.compact {
line-height: 2em;
font-size: 1.1em;
}
#header-icons > .minor-list {
font-size: 1.1em;
line-height: 2em;
}
.minor-list.list-seperator li {
border-left: none;
}
h2 {
background-image: none;
background-color: rgb(145,145,145);
color: white
}
#wrap {
min-width: 960px;
max-width: 1200px;
width: auto
}
#page {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 0 8px black;
background-color: rgb(238,238,238)
}
/* 头部 */
header {
display: none;
background-image: none;
height: 26px
}
header div a {
display: none
}
/* 主导航 */
#mainmenu {
position: fixed;
width: 100%;
margin: 0;
padding: 10px;
left: 0;
top: 0;
font-size: 13px;
background-color: rgb(53,53,60);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
z-index: 1000
}
#mainmenu li a {
border: 0;
padding: 2px 10px;
margin: 0;
background-image: none;
background-color: rgba(255,255,255,0);
font-weight: normal;
font-size: 11pt;
height: 22px;
border-radius: 0 0 0 0;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease
}
#mainmenu li a:hover {
box-shadow: 0 0 0;
background-color: rgba(255,255,255,0.15)
}
#mainmenu li a:link,#mainmenu li a:visited {
color: white
}
#mainmenu li.selected a {
background-color: rgba(255,255,255,0.15)
}
/* 常驻信息栏 */
#header-info {
position: relative;
top: 45px;
margin: 0;
padding: 10px 15px 10px 15px;
background-color: rgb(255,255,255);
border-radius: 0px;
box-shadow: 0 0 5px rgba(0,0,0,0.5)
}
/* 尾部 */
footer,#tech-stats a {
color: black
}
/* 全局 */
.td,dl.table,table {
border: 0;
background-color: white
}
.table,#outer > table {
background-color: white;
border-radius: 4px;
box-shadow: 0 1px 5px rgba(0,0,0,.35)
}
table.no-vertical-line tr:nth-of-type(2n) td {
background-color: rgb(245,245,245);
border-top: 1px solid rgb(230,230,230);
border-bottom: 1px solid rgb(230,230,230)
}
.main {
border: 0;
background-color: white;
border-radius: 4px;
box-shadow: 0 1px 5px rgba(0,0,0,.35)
}
#outer {
padding: 50px 10px 0 10px
}
#outer > div {
position: relative
}
ul.menu:not([id="mainmenu"]) li:not([class="selected"]) {
opacity: 0.5;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
ul.menu:not([id="mainmenu"]) li:hover {
opacity: 1
}
ul.menu:not([id="mainmenu"]) li.selected a,ul.menu:not([id="mainmenu"]) li a {
background-image: none;
border: 0;
box-shadow: 0 -2px 5px -5px black;
background-color: white;
z-index: 1
}
ul.menu:not([id="mainmenu"]) li.selected a:hover,ul.menu:not([id="mainmenu"]) li a:hover {
border: 0;
background-image: none;
background-color: white;
color: black;
box-shadow: 0px -2px 5px -5px black
}
.poll:first-child,.forum-post:first-child,table.no-vertical-line > thead > tr:first-child > th {
border: 0
}
td.colhead,thead > tr > th {
background-color: rgb(145,145,145);
background-image: none;
border-bottom: 1px solid rgba(0,0,0,0.1)
}
tr:first-child td.colhead:first-child,thead > tr > th:first-child {
border-top-left-radius: 4px
background: none
}
tr:first-child td.colhead:last-child,thead > tr > th:last-child {
border-top-right-radius: 4px
}
div.niceTitle {
background-color: white;
box-shadow: 0 0 3px rgba(0,0,0,0.5)
}
#funcomment {
max-width: 100%
}
#funcomment + form {
width: 940px;
max-width: 100%;
margin: 5px auto;
text-align: center
}
#fun_text {
width: calc(100% - 40px) !important
}
#sns {
float: left;
width: 38%;
margin-top: -6px
}
#page #outer div > table.main {
float: right
}
#page #outer div > h2.page-titles:nth-of-type(4) {
margin-top: 147px
}
/* Site statistics */
#page #outer div > h2.page-titles:nth-of-type(3) {
float: right;
width: calc(62% - 20pt);
}
#page #outer div > h2.page-titles:nth-of-type(n+4),#page #outer div > div:nth-of-type(n+4):not([class="minor-list"]):not([id="host-search"]):not([class*="frame"]) {
width: calc(38% - 20pt);
margin-left: 0;
margin-right: 0;
padding: 3px 13px
}
#page #outer div > div[class="main center medium"] {
overflow: hidden;
margin-top: 205px;
margin-bottom: 0;
padding: 5px 0 !important;
width: 100% !important
}
#form-searchbox {
margin-top: 10px
}
li.forum-post {
border-radius: 0
}
li.forum-post:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px
}
li.forum-post:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px
}
#page #outer div > div.frame:nth-of-type(n+4) + h2 {
margin-top: 10px;
width: auto
}
.progress.seeding {
background-color: #b4b4b4
}
.progress.downloading {
background-color: #9ea8c2
}
div.frame > table {
float: none !important
}
/* 13px is the same as h2.page-titles:nth-of-type(n+4) */
.text.table.td.center {
padding: 10px 13px !important;
}
@media screen and (min-width: 1200px) {
.torrents {
width:100%
}
.torrents > tbody > tr > td:nth-child(n+3) {
width: 0
}
.torrents .torrent {
width: 9999px
}
.torrents .torrent > div,table.torrents h3,table.torrents h2 {
width: auto
}
table.torrents h3,table.torrents h2 {
max-width: 700px
}
#page #outer div > div[class="main center medium"] {
margin-top: 260px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment