Skip to content

Instantly share code, notes, and snippets.

@whusnoopy whusnoopy/styles.css
Last active Nov 1, 2015

Embed
What would you like to do?
Mod CSS for felix021.com
/*
Bo-Blog v2.1 default skin mod by snoopy for felix021.com
link-color: #0d80bd;
light-link-color: #3d99ca;
border-color: #9ecce4;
light-border-color: #bee6fd;
background-color: #2e93c9;
light-background-color: #effaff;
*/
/* General Styles */
* {
box-sizing: border-box;
}
html, body, div, p, a, img, span, h1, h2, h3, h4, h5, h6, ul, li, button {
padding: 0;
margin: 0;
border: 0;
}
html, body, div, p, h1, h2, h3, h4, ul, li {
display: block;
}
a, img, span, button {
display: inline-block;
}
body {
width: 100%;
font-size: 14px;
line-height: 20px;
font-family: Tahoma, Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 微软雅黑, STXihei, 华文细黑, 'Helvetica Neue', Helvetica, SimSun, 宋体, Heiti, 黑体, sans-serif;
background-color: #fff;
color: #000;
text-align: left;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: none;
color: #777;
}
hr {
height: 1px;
border: none;
border-top: 1px solid #333;
}
/* end of General Styles */
/* form */
form {
display: inline;
}
input, textarea {
font-size: 14px;
}
input.text, input.button, textarea, select {
background-color: #fff;
border: 1px solid #bee6fd;
}
input.button {
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
input[type=checkbox], input[type=radio] {
cursor: pointer;
}
/* end of form */
/* input form (table) */
.formbox,
.formbox-comment {
border: 1px solid #9ecce4;
padding: 5px;
}
.formbox-title,
.formbox-comment-title,
.messagebox-title,
.linkgroup,
#pagelocation-archive td[colspan="4"] {
background-color: #bee6fd;
font-size: 16px;
line-height: 28px;
font-weight: bold;
padding: 2px 12px 0;
}
.formbox-rowheader {
padding: 6px;
text-align: right;
font-weight: bold;
}
.formbox-content {
padding: 6px;
}
.formbox-comment-content {
line-height: 24px;
}
/* TODO: padding/margin hack on commentbox can be removed now */
/* end of input form (table) */
/* layout */
#wrapper {}
#innerWrapper {
width: 1170px;
margin: 0 auto;
}
#header {
margin: 8px auto;
}
#mainWrapper {}
#content {
float: left;
width: 840px;
}
#sidebar {
float: right;
width: 320px;
}
#footer {
display: none;
}
/* enf of layout */
/* header */
#innerHeader {}
#blogLogo {
display: none;
}
.blog-header {}
.blog-title {
font-size: 28px;
line-height: 56px;
}
.blog-desc {
display: none;
}
#menu {
text-align: center;
border-bottom: 4px solid #bee6fd;
}
#menu ul {
font-size: 0;
margin-top: -30px;
float: right;
}
#menu li {
font-size: 14px;
display: inline-block;
}
#menu a {
width: 72px;
padding: 6px 0 3px;
color: #999;
font-weight: bold;
border: 1px solid #fff;
border-bottom: none;
}
#menu a:hover, #menu .activepage a {
color: #000;
background-color: #effaff;
border: 1px solid #bee6fd;
border-bottom: none;
}
/* end of header */
/* page layout */
.announce {
display: none;
}
.article-top {
background-color: #effaff;
padding: 8px;
margin-bottom: 8px;
}
.article-top div {
display: inline-block;
}
.article-top img {
margin-right: 4px;
}
.article-top .next-article {
float: right;
}
.pagebox-title {
margin-bottom: 12px;
}
.pagebox-title h4 {
border-bottom: 2px solid #effaff;
font-size: 24px;
line-height: 42px;
}
.article-bottom {
margin: 16px auto;
}
/* end of page layout */
/* page links */
.pages, .comment-pages {
padding: 5px;
color: #0d80bd;
}
.pages {
border: 1px solid #9ecce4;
margin-bottom: 8px;
}
.pagebar-selections {
font-size: 0;
height: 0;
}
.pagelink-current {
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #2e93c9;
padding: 0 6px;
}
.pages img {
height: 100%;
}
.pages .pagebar-selections a {
font-size: 14px;
padding: 0 6px;
}
.pages .pagebar-selections a:hover {
color: #fff;
background-color: #bee6fd;
}
/* end of page */
/* sidebar */
#innerSidebar {
border: 1px solid #9ecce4;
padding: 6px;
margin-bottom: 16px;
}
#innserSidebarSearch {
display: none;
}
#innerSidebar .panel {
margin-bottom: 10px;
}
#innerSidebar .panel h5 {
background-color: #bee6fd;
font-size: 16px;
line-height: 28px;
padding: 2px 12px 0;
}
#innerSidebar .panel h5:hover {
cursor: pointer;
}
#innerSidebar .panel .panel-content {
padding: 6px 12px 0;
}
#innerSidebar .panel .panel-content ul {
margin: 0 -6px;
}
#innerSidebar .panel li {
padding: 2px 6px;
border-bottom: 1px solid #bee6fd;
}
#innerSidebar .panel li:hover {
background-color: #effaff;
}
#innerSidebar .panel li.indent {
padding-left: 9px;
}
#innerSidebar .panel li.indent:before {
content: "» ";
}
#innerSidebarTwo {
display: none;
}
#innerSidebarFooter {
display: none;
}
/* end of sidebar */
/* main content */
.textbox {
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid #bee6fd;
}
.textbox-calendar {
float: left;
border: 1px solid #2e93c9;
font-family: Arial, serif;
text-align: center;
width: 48px;
}
.textbox-calendar-month {
display: block;
background-color: #2e93c9;
color: #fff;
text-transform: uppercase;
font-weight: bold;
line-height: 18px;
}
.textbox-calendar-day {
display: block;
background-color: #effaff;
font-size: 24px;
line-height: 32px;
}
.textbox-title {
padding-left: 54px;
}
.textbox-title h4 {
padding-left: 4px;
margin-right: 200px;
font-size: 18px;
line-height: 28px;
font-weight: bold;
border-bottom: 2px solid #effaff;
}
.textbox-title h4 a {
color: #0d80bd;
}
.textbox-label {
padding-left: 4px;
line-height: 28px;
}
.text-label-indented {
float: right;
font-size: 12px;
}
.textbox-tburl {
background-color: #effaff;
font-size: 12px;
line-height: 16px;
padding: 4px 8px;
}
.textbox-content {
clear: both;
word-wrap: break-word;
padding: 6px;
}
.textbox-content a,
.commentbox-content > a,
.trackbackbox-content > a,
.quote-content > a {
color: #0d80bd;
border-bottom: 1px dotted #0d80bd;
}
.textbox-bottom {
display: none;
}
.tags {
padding: 4px 8px;
background-color: #effaff;
}
.tags a {
color: #0d80bd;
}
/* end of main content */
/* blocks */
.code, .quote {
border-left: 4px solid #ccc;
padding: 6px 9px;
margin: 6px;
}
.code {
border-left-color: #bee6fd;
background-color: #effaff;
color: #000;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
.kw {
font-weight: bold;
color: #3d99ca;
}
.quote {
background-color: #f7f7f7;
}
.quote-title {
background-color: #ddd;
margin: -6px -9px 6px -9px;
padding: 6px 9px;
font-weight: bold;
}
.quote-title img {
vertical-align: text-bottom;
margin-right: 4px;
}
/* end of blocks */
/* listbox page */
.listbox-header {
background-color: #bee6fd;
line-height: 28px;
font-weight: bold;
padding: 2px 12px 0;
}
.listbox-entry {
line-height: 24px;
border-bottom: 1px solid #bee6fd;
}
.listbox-table tr:hover {
background: #effaff;
}
.listbox-table tr td.listbox-entry:last-child {
font-size: 12px;
}
/* TODO: change width=70 hack on listbox-header last td to width=84, then
.listbox-header can merge as .formbox-title on line 72 (limit by width now),
and can remove td.listbox-entry:last-child hack on a small font for date
*/
/* end of listbox page */
/* comments */
#commentForm {
margin-bottom: 8px;
}
.commentbox, .trackbackbox {
margin-bottom: 8px;
}
.commentbox-title, .trackbackbox-title {
padding: 6px 9px;
background-color: #bee6fd;
font-weight: bold;
}
.commentbox-title a, .trackbackbox-title a{
color: #0d80bd;
}
.commentbox-label, .trackbackbox-label{
display: inline-block;
font-size: 12px;
font-weight: normal;
}
.commentbox-content, .trackbackbox-content {
padding: 6px 9px;
}
.panel-smilies {
border: 1px solid #bee6fd;
margin-bottom: 4px;
}
.panel-smilies .panel-smilies-title {
background-color: #bee6fd;
padding: 2px 4px;
}
.panel-smilies .panel-smilies-content {
padding: 4px;
}
/* end of comments */
/* messagebox */
.messagebox {
width: 600px;
margin-top: 120px;
border: 1px solid #9ecce4;
}
.messagebox-content {
padding: 12px;
text-align: left;
}
.messagebox-bottom {
padding: 4px;
background-color: #effaff;
border-top: 1px solid #bee6fd;
}
/* end of messagebox */
/* links page */
.linkover {
margin-bottom: 8px;
}
.linkgroupcontent {
padding: 0 8px;
}
.linkbody {
padding: 6px;
}
.linktitle {
font-weight: bold;
}
.linktitle a {
color: #0d80bd;
}
/* end of links page */
/* archive page */
#pagelocation-archive td:not([colspan="4"]) {
padding: 2px 16px;
}
#pagelocation-archive td:not([colspan="4"]) a {
color: #0d80bd;
}
/* TODO: assign a css class to archive year td then the css selector can be
more simple */
/* end of archive page */
/* fit for diffrent screen */
@media (max-width: 1250px) {
#innerWrapper {
width: 970px;
}
#content {
width: 690px;
}
#sidebar {
width: 270px;
}
.textbox-title h4 {
margin-right: 0;
}
}
@media (max-width: 1000px) {
#innerWrapper {
width: 770px;
}
#content {
width: 520px;
}
#sidebar {
width: 240px;
font-size: 12px;
}
.textbox-label {
font-size: 12px;
}
}
/* end of fit for diffrent screen */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.