λ在Chito的第二個CSS設置［原主題：SimpleModern］

λ posted @ 2012年1月07日 17:30 in Mixture with tags -chito- chito css firebug , 214 阅读

第一個設置見「λ在Chito的第一個CSS配置［原主題：Earthy］」

大致特徵

字體按百分比來設置（%|em|ex|px）
準備好了供Windows/Linux系統用的備選字體
回覆列表有較好的縮進效果（Blog設置::使用Thread Comment）
對IE用戶不怎麼友好
只對這些插件樣式進行了修改：隨機文章，鏈接，RSS訂閱，搜索，計數器，相關文章
SyntaxHighlighter無法設置……

具體細節

裝飾了原Chito導航欄（看到那個ProjectEuler了吧？）
鏈接都加上了「∷」標記（a:before|a:after）
裝飾了各級標題（沒自動加章節號）
列表、塊引用、段落都有縮進，表格除外
美化了段內引用（q）和塊引用（blockquote），和圖片框（兼容MathJAX）
回覆列表不但有縮進，還標示了每個最後嵌套的回覆是哪個

個人添置［不在以下的代碼裡］

增加對IE用戶的友好提示……
設置了Ubuntu的多種格式WebFont（woff|eot|ttf|svg）

CSS代碼參考

預覽部分CSS測試效果請至：http://jakwings.is-programmer.com/posts/30319.html

上次修正時間：2012年5月8日 23:30

修正內容：

去掉表格缩进。

段落縮進還是不用:before {content...來設置了，改回text-indent了。

发现自建页面没有缩进，故改#article_content为#article_body

改用#XXXXXX颜色表示值＆改善默认字体设置

更改文章内容中列表、段落、表格、图片缩进样式

修正背景色变换失效问题

修正上下篇文章标志

不加<br>缩进了

Firefox中鏈接顏色問題解決＆回覆框的回覆按鈕消失問題解決

/*-----------------------------------------------------------------*\
 |     2012 LinuxGem | Design by jakwings.is-programmer.com        |
 |          Theme: Simple-ex                                       |
 |          Modified by lambda                                     |
 |          Last update: May.8, 2012                               |
\*-----------------------------------------------------------------*/

/* 只适用于这个原主题的页面哦～到后台管理设置外观 */

/*=================================================================*\
| Body                                                              |
\*=================================================================*/
/* 把这个body(整个页面内容)放到最前，设置好默认的东西。
 * margin即「排斥其它元素的边界」
 * padding即「把内容往内压挤的边界」
 * 长度单位有两种，一种是按比例来的，不太适合打印，适合屏幕显示：
 *   em(字体高度), ex(字母x的高度), %(继承大小百分比), px(像素pixels)
 * 另一种是绝对的，就是方便打印的了：
 *   pt(点), pc(皮卡picas), in(英寸), cm(厘米), mm(毫米)
 * font-family中的字体从左到右，后面的都是备用的，最后一个sans-serif是根据浏览器设置确定的，通用
 */
body {
    width: 95%;
    margin: auto;
    padding: 0;
    font-size: 15px;
    font-family: "明兰", "文泉驿微米黑", "微软雅黑", "宋体", "细黑体", Ubuntu, Arial, sans-serif;
    line-height: 140%;
    color: #000000;
    background-color: #FDFDFD;
    background-image: none;
}


/*=================================================================*\
| Font-Size & Text-Style                                            |
\*=================================================================*/
/* h1-6 是标题
 * bold 粗体
 * margin: 顶 右 底 左 相当于 margin-width: 顶 右 底 左
 * letter-spacing 字符的间隔
 * text-align 文字的
 */
h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 1.2em 0 0 0;
    font-weight: bold;
    line-height: 150%;
    letter-spacing: 1px;
    color: #000000;
    text-align: left;
}

h1 {
    font-size: 200%;
    border-top: 1px solid #777;
    border-bottom: 1px solid #AAAAAA;
}
h2 {
    font-size: 170%;
    border-bottom: 1px dotted #000000;

}
h3 { font-size: 150%; }
h4 { font-size: 130%; }
h5 { font-size: 120%; }
h6 { font-size: 105%; }

/* p是段落
 * display: none 即不显示，也不占体积
 */
p {
    display: block;
    line-height: 120%;
    margin: 0.5em 0 0.5em 0;
    text-align: left;
}

/* 以下是各种字体样式 */
/* 缩小 */
small {
    font-size: smaller;
}

/* 放大 */
big {
    font-size: larger;
}

/* 粗体 */
strong, b {
    font-weight: bolder;
}

/* 代码 */
tt, code, kbd, samp {
    font-family: Courier, "文泉驿等宽微米黑", monospace;
}

/* 下划线 插入 */
u, ins {
    text-decoration: underline;
}

/* 删除线 */
s, strike, del {
    text-decoration: line-through;
}

/* 斜体 强调 地址 变量 引用(不是quote或blockquote) */
i, cite, em, var, address {
    font-style: italic;
}
/* 字体样式结束 */

/* 水平分隔线 */
hr {
    display: block;
    margin: 0.5em auto 0.5em auto;
    border-style: inset;
    border-width: 1px;
}

/* ul 列表，前有数字
 * ol 列表，前有黑点
 * list-style-position 标记符号的位置(1. 2. 3.)
 */
ul, ol {
    text-align: left;
    margin: 0.5em 0 0.5em 0em;
    padding: 0 5px 0 2em;
    list-style-position: outside;
}

/* 列表项目 */
li {
    margin: 0.2em 0 0.2em 0;
}

/* 为行内引用(inline-quote)添加前后引号 */
q:before {content: open-quote}
q:after {content: close-quote}

/* q 行内引用(inline-quote)
 * border-radius 边框四个角的弧度
 * quotes 引号内容
 */
q {
    margin: 0;
    padding: 0;
    background: #F0F8FF;
    quotes: "" "";
    border-radius: 2px;
}

/* :hover 即鼠标移到上面的效果 */
q:hover {
    color: #FF0000;
}

/* 块引用
 * color 的值主要有三种格式：#xxxxxx 颜色名称 rgb(r,g,b)
 */
blockquote{
    color: #202020;
    margin-left: 2em;
    padding: 0px 5px 0px 5px;
    background: #EFF2DF;
    border: 1px #A9A9A9;
    border-style: dotted dashed;
}

blockquote:hover {
    background: #BECB69;
    color: #000000;
    border-style: solid;
}


/*=================================================================*\
| Container                                                         |
\*=================================================================*/

/* Top-Nav 导航栏
 * small-caps 是全大写，首字符加大的样式
 * !important 可提高优先级
 */
#top-nav {
    font-size: 125% !important;
    text-transform: none !important;
    font-variant: small-caps !important;
}

/* 导航栏的项目 */
.page_item {
    border-top: 3px ridge !important;
    border-bottom: 3px ridge !important;
    border-radius: 10px !important;
    margin-left: 5px !important;
}

/* Content 内容
 * # 表示那是元素的id，像body那样不用加的叫做标签(tags e.g. <body></body>)
 * float 即浮动设置，none表示不浮动
 */
#content {
    float: none;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 100%;
    background-color: #FDFDFD;
    text-align: inherit;
}

/* Header 博客标题 */
#header {
    margin: 0;
    padding: 0;
}

/* 标题文字 */
#headertext h1 {
    text-align: center;
    font-size: 300%;
}

/* 标题标注 */
#headertext .description {
    margin-top: 5px;
    font-size: 130%;
    text-transform: uppercase;
}

/* Entry Title 文章标题 */
.post h2 {
    font-size: 150%;
    text-align: left;
    font-variant: small-caps;
    line-height: 140%;
    font-weiight: bold;
    border-top: 1px solid;
    padding-top: 5px;
}

/* text-shadow 字体阴影
 * FILTER 是IE8下用的阴影设置
 */
.post h2, .post h2:hover {
    text-shadow: #D3D3D3 0px 0px 20px;
    FILTER: Shadow(Color=#E9E9E7, Direction=135, Strength=1);
}

/* 文章简介 */
.post_brief {
    padding-left: 5px;
    font-size: 95%;
}

/* 继续阅读 */
.read-more.align-right {
    text-align: right;
    margin: 0;
    padding-right: 5px;
    font-size: 105%;
}

/* 文章相关信息 */
.postmetadata {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 80%;
    border-top: 1px solid #F8F8FF;
    border-bottom: 1px solid #F8F8FF;
}

/* Article 文章 */
#article_wrap {
    margin-top: 0 !important;
}

/* 页首
 * line-height 行高
 */
#article_header {
    color: #000000;
    margin: 0;
    padding-left: 2em;
    line-height: 140%;
    font-size: 90%;
    margin-top: 1em;
    margin-bottom: 1em;
    letter-spacing: 1px;
}

/* 页身 */
#article_body {
    font-size: 100%;
    letter-spacing: 1px;
    line-height: 120%;
    margin: 0;
    padding: 0 0 0 1.7em;
}

/* 段落缩进 */
#article_body p:not([style*="right"]):not([style*="center"]) {
    text-indent: 2em;
}

/* 列表缩进 */
#article_body ul, #article_body ol {
    margin-left: 2em;
}

/* 图片边框效果
 * box-shadow 边框阴影
 * transparent 透明
 */
#article_body img {
    border: 1px solid #808080;
    border-radius: 5px;
    padding: 5px;
    margin: 0.5em;
    background-color: transparent;
    box-shadow: 1px 1px 5px rgba(132,133,8,0.5);
}

#article_body img:hover {
    box-shadow: 1px 1px 10px rgba(132,133,8,0.5);
}

/* MathJAX公式图片 */
nobr img, nobr img:hover {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 页脚 */
.articlefooter {
    background: transparent;
    border-top: 1px solid #ACACAC;
    padding: 3px 4px 4px 4px;
    margin-top: 3em;
    margin-bottom: 5px;
    border-bottom: 1px solid;
}

/* Pre/Next Article 同一分类文章前后导航 */
div.pre_next_post {
    margin: 5px 0 2em 0px;
    width: 100%;
    border-bottom: 1px dashed #808000;
    height: 1.5em;
    float: right;
}

div.pre_next_post a {
    display: block;
    font-size: 100%;
    line-height: 100%;
}

/* 导航栏 */
a.down {
    background: none;
    padding: 0;
    float: right;
}

a.up {
    background: none;
    padding: 0;
    float: left;
}

/* 导航栏标记 */
a.down:before {
    content: "▶▷∷" !important;
}

a.up:after {
    content: "∷◁◀" !important;
}

/* Comment 文章评论 */
/* textarea 文本框
 * #comment_content 评论内容
 */
textarea#comment_content {
    width: 90%;
    display: inline;
}

/* 头 */
.comment_header {
    display: inline;
    background: none;
    border: 0;
    float: right;
    margin: 0;
    padding: 0;
}

/* 身 */
.comment_content {
    padding: 0 0 1em 48px;
    border-left: 2px ridge #808000;
}

/* 评论序数 */
.comments_count {
    display: none;
}

/* last-child 评论嵌套的最内层元素 */
.comment_body:last-child .relative_time_comment:after {
    content: " Latest-Reply";
    color: #4682B4;
}

/* Twitter按钮 */
.twitter_comment_button {
    display: none;
}

/* 下面的懒得说 */
.comment_box {
    padding: 0;
    width: 95%;
    margin-left: 10px;
    margin-bottom: 0;
    background: #FAFAFA;
    margin-top: 0;
    border-top: 1px solid #F8F8FF;
    border-bottom: 0;
    border-left: 0;
    border-right: 1px dashed #F8F8FF;
}

.reply_comment_box {
    float: right;
    margin-top: -1.5em;
    padding-left: 0;
    padding-bottom: 2.5em;
    padding-top: 0;
    background: transparent !important;
    border: 0;
    width: 95%;
}

.reply_comment_box:last-child {
    padding-left: 0;
    padding-bottom: 0.5em;
    padding-top: 0;
    background: transparent !important;
    border-top: 1px inset #F8F8FF;
    width: 99.4%;
}

/* Avatar头像 */
.comment_avatar {
    float: left;
    padding: 5px;
}

.comment_avatar img {
    width: 36px;
}

/* 回复输入框 */
input:focus, textarea:focus {
    background: #BECB69;
    color: #000000;
}

/* Footer 博客页脚 */
#foot1 { float: left; width: 50% }
#foot2 { float: right; width: 20% }

/*=================================================================*\
| Other                                                             |
\*=================================================================*/
/* Chito中加入的边栏东东 */
/* 列表 */
.navlist {
    padding: 0;
    margin-left: 20px;
    margin-top: 2px;
    margin-bottom: 0;
    font-size: 90%;
    line-height: 125%;
}

/* 搜索框 */
div#chito_search {
    padding: 0;
    margin-left: 20px;
    margin-right: 10px;
}

#search_form #s {
    width: 90%;
    margin: 5px 0 5px 0;
}

/* 来访者计数器 */ 
#count {
    font-size: 130%;
    color: #000000;
    margin-bottom: 5px;
    text-align: center;
    font-family: Tahoma, Georgia, Serif;
    font-weight: bold;
    font-style: italic;
}

/* Relative Articles Navigator 相关文章 */
.ui-tabs ul{
    margin: 5px 0 5px 0;
    list-style-type: circle
}

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
    font-size: 90%;
}
.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 0;
    background: none;
}
.ui-widget-header {
    border: 1px solid #AAAAAA;
    background: none;
    color: #CCACCA;
    font-weight: bold;
    line-height: 90%;
}
.ui-widget {
    font-size: 100%;
    font-family: "明兰", "文泉驿微米黑", "微软雅黑", Ubuntu, Arial, sans-serif;
    line-height: 120%;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: none;
}

/* Web Link 链接 */
a:-webkit-any-link {
    color: #000000 !important;
    background: inherit !important;
    text-decoration: none !important;
}

a:-webkit-any-link:hover {
    color: #808000 !important;
    text-decoration: none !important;
}

a:-webkit-any-link:before, a:-webkit-any-link:after {
    color: #444444 !important;
    font-size: inherit !important;
    text-shadow: #EEEEEE 0px 0px 20px !important;
    FILTER: Shadow(Color=#EEEEEE, Direction=135, Strength=1) !important;
}

a:-webkit-any-link:not(#more):not(.up):not(.down):before, a:-webkit-any-link:not(#more):not(.up):not(.down):after {
    content: "∷" !important;
}

/* 上面是给webkit用户的 */
a {
    color: #000000 !important;
    background: inherit !important;
    text-decoration: none !important;
}

a:hover {
    color: #808000 !important;
    text-decoration: none !important;
}

a:before, a:after {
    color: #444444 !important;
    font-size: inherit !important;
    text-shadow: #EEEEEE 0px 0px 20px !important;
    FILTER: Shadow(Color=#EEEEEE, Direction=135, Strength=1) !important;
}

/* <!--more>和文章导航以外的链接 */
a:not(#more):not(.up):not(.down):before, a:not(#more):not(.up):not(.down):after {
    content: "∷" !important;
}

/* Transitions 变换效果 */
* {
    transition: color 0.5s, background 1s !important;
    -webkit-transition: color 0.5s, background 1s !important;
    -moz-transition: color 0.5s, background 1s !important;
    -o-transition: color 0.5s, background 1s !important;
}