Skin:community-bubbles

This commit is contained in:
Armstrong
2013-02-01 16:59:29 +08:00
parent 787b8b9c27
commit 4dd3616fc3
43 changed files with 2893 additions and 0 deletions

View File

@@ -0,0 +1,135 @@
/* ------------------------------------------
PURE CSS SPEECH BUBBLES
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/
http://nicolasgallagher.com
http://twitter.com/necolas
Created: 02 March 2010
Version: 1.2 (03 March 2011)
Dual licensed under MIT and GNU GPLv2 <20> Nicolas Gallagher
------------------------------------------ */
/* NOTE: Some declarations use longhand notation so that it can be clearly
explained what specific properties or values do and what their relationship
is to other properties or values in creating the effect */
/* ============================================================================================================================
== GENERAL STYLES
** ============================================================================================================================ */
/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */
/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 3em;
border:5px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* Variant : for left positioned triangle
------------------------------------------ */
.triangle-border.left {
margin-left:30px;
}
/* Variant : for right positioned triangle
------------------------------------------ */
.triangle-border.right {
margin-right:30px;
}
/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* Variant : left
------------------------------------------ */
/* creates the larger triangle */
.triangle-border.left:before {
top:10px; /* controls vertical position */
bottom:auto;
left:-30px; /* value = - border-left-width - border-right-width */
border-width:15px 30px 15px 0;
border-color:transparent #5a8f00;
}
/* creates the smaller triangle */
.triangle-border.left:after {
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
bottom:auto;
left:-21px; /* value = - border-left-width - border-right-width */
border-width:9px 21px 9px 0;
border-color:transparent #fff;
}
/* Variant : right
------------------------------------------ */
/* creates the larger triangle */
.triangle-border.right:before {
top:10px; /* controls vertical position */
bottom:auto;
left:auto;
right:-30px; /* value = - border-left-width - border-right-width */
border-width:15px 0 15px 30px;
border-color:transparent pink;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
bottom:auto;
left:auto;
right:-21px; /* value = - border-left-width - border-right-width */
border-width:9px 0 9px 21px;
border-color:transparent #fff;
}

View File

@@ -0,0 +1,759 @@
@charset "utf-8";
/*
* skin community style
*
* @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
* @version 1.0.0.7, May 15, 2012
*/
body {
background-color: #EFEFEF;
color: #555555;
min-width: 960px;
}
.copyright {
background:#E2E2E2;
text-align:left;
margin:20px 0;
padding:3px 0 3px 10px;
color:#333;
font-size:9pt;
line-height:22px;
border-left:5px solid #797979;
}
a, a:link {
color:#000000;
text-decoration: none;
}
a:active, a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.content {
width: 940px;
margin: 0 auto;
}
.content>h2 {
margin: -20px 0 20px 0;
}
.hr {
background: url("../images/indentline-light.png") repeat-x scroll left top transparent;
margin: 20px 0 40px;
clear: both;
height: 2px;
}
.arrow-right {
background: url("../images/icon.png") 0px -64px no-repeat;
float: left;
height: 38px;
width: 14px;
}
input[type='button'] {
border-radius:5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.29);
background-color: #000000;
background-image: linear-gradient(top,#333333,#000000);
background-image: -moz-linear-gradient(top,#333333,#000000);
background-image: -ms-linear-gradient(top,#333333,#000000);
background-image: -o-linear-gradient(top,#333333,#000000);
background-image: -webkit-gradient(linear,left top,left bottom,from(#333333),to(#000000));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#000000');
border: 1px solid #000000;
color: white;
margin: 15px 0 0 200px;
padding: 7px 13px;
height: auto;
}
input[type='button']:hover {
background-color: #333333;
background-image: linear-gradient(top,#333333,#212121);
background-image: -moz-linear-gradient(top,#333333,#212121);
background-image: -ms-linear-gradient(top,#333333,#212121);
background-image: -o-linear-gradient(top,#333333,#212121);
background-image: -webkit-gradient(linear,left top,left bottom,from(#333333),to(#212121));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#212121');
}
.minwidth20per{
max-width:20%;
}
.minwidth70per{
max-width:70%;
}
.marginBottom40 {
margin-bottom: 40px;
}
/* header */
.header-user {
background-color: #DEDEDE;
padding-top: 1px;
}
.header-navi {
background: url("../images/icon.png") 0px -130px repeat-x #333333;
margin-bottom: 50px;
}
a.header-title {
color: #FFFFFF;
text-decoration: none;
line-height: 49px;
font: bold 35px/53px '微软雅黑,Arial,Helvetica';
}
.sub-title {
color: #9BC4CE;
margin-left: 10px;
}
.header-navi-main .tabs {
list-style: none;
height: 57px;
}
.header-navi-main .tab {
float: left;
font-size: 16px;
margin-left: 1px;
height: 57px;
}
.header-navi-main .tab:hover {
background: url("../images/icon.png") repeat-x scroll 0 -130px #9BC4CE;
}
#header-pages {
position: relative;
}
.header-navi-main .tab a {
color: #FFFFFF;
display: block;
font-weight: bold;
line-height: 22px;
padding: 19px 16px 16px;
text-decoration: none;
}
#header-pages:hover .sub-tabs {
left: 0px;
list-style: none;
position: absolute;
top: 57px;
display: block;
}
.header-navi-main .sub-tab {
background-color: #9BC4CE;
border-bottom: 1px solid #76A0AA;
border-top: 1px solid #B4D9E2;
margin-left: 0px;
}
.header-navi-main .sub-tab a {
min-width: 98px;
padding: 0 16px;
line-height: 42px;
font-size: 14px;
}
.header-navi-main .sub-tab:hover {
background-color: #76A0AA;
}
/* article list */
.article-header {
color: #9F9F9F;
float: left;
font-size: 12px;
padding-top: 15px;
/* width: 180px; */
display:inline-block;
}
.article-header ul {
background-color: #333333;
list-style: none;
width: 160px;
}
.article-header ul li {
background: url("../images/indentline.png") repeat-x scroll left bottom transparent;
font-weight: bold;
padding: 7px 15px 8px;
margin-left: 0px;
}
.article-header ul li a {
color: #FFFFFF;
display: block;
}
.article-main {
background-color: #FFFFFF;
border-bottom: 1px solid #E3E3E3;
border-right: 1px solid #E3E3E3;
margin-right:20px;
padding: 20px 20px 0;
/* width: 499px; */
/* float: left; */
overflow: hidden;
display:inline-block;
}
.article-main-right {
background-color: #FFFFFF;
border-bottom: 1px solid #E3E3E3;
border-left: 1px solid #E3E3E3;
border-right:none;
margin-right:20px;
padding: 20px 20px 0;
/* width: 499px; */
/* float: left; */
overflow: hidden;
display:inline-block;
}
.article-body {
line-height: 145%;
}
.article-body a {
color: #075181;
}
.article-body a:hover {
color: #68ADD5;
}
.article-main h2.title {
font: bold 30px Arial,Helvetica,sans-serif;
margin: 0 0 20px;
}
.article-main h2.title sup {
font-size: 12px;
}
.read-more a {
background-color:#F2F2F2;
color: #333333;
font-size: 12px;
padding: 8px 18px 8px 12px;
margin: 20px 0;
float: left;
}
.article-footer {
width: 200px;
float: left;
}
.article-footer h3 {
background: url("../images/indentline-light.png") repeat-x scroll left bottom transparent;
font-size: 17px;
padding: 25px 0 10px;
}
.article-footer ul {
list-style: none;
}
.article-footer li {
margin-left: 0px;
border-bottom: 1px solid #E0E0E0;
padding: 8px 5px;
}
.article-footer a {
color: #888888;
margin-bottom: 2px;
display: block;
}
.pagination {
background-color: #FFFFFF;
border-right: 1px solid #E3E3E3;
border-bottom: 1px solid #E3E3E3;
margin: 0 0 20px 0px;
text-align: center;
padding: 12px 20px;
}
.pagination a {
color: #555555;
padding: 0 3px;
text-decoration: none;
}
.pagination a.selected {
font-weight: bold;
}
.pagination a:hover, .pagination a.selected {
text-decoration: underline;
}
/* article detail */
.article-detail-body {
width: 716px;
margin-right: 0px;
}
.article-detail-body .tags, #replyForm {
margin: 20px 0;
}
.article-detail-footer {
background-color: #FFFFFF;
border-bottom: 1px solid #E3E3E3;
border-right: 1px solid #E3E3E3;
margin: 40px 0 40px 181px;
padding:20px;
width: 716px;
}
.article-detail-footer>a{
font-weight: bold;
}
.article-relative {
margin-top: 20px;
width: 360px;
}
.article-relative h4 {
font-size: 14px;
line-height: 25px;
}
.article-relative a {
color: #555555;
line-height: 145%;
}
#comments {
background: url("../images/indentline-light.png") repeat-x scroll left top transparent;
padding-top: 30px;
position: relative;
}
#comments>div{
margin-top: 10px;
}
#comments>div>img {
height: 80px;
width: 80px;
margin: 1px 10px 10px 0;
}
#comments .comment-panel {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #E3E3E3;
border-right: 1px solid #E3E3E3;
padding: 20px;
width: 798px;
margin-bottom: 10px;
word-wrap:break-word;
overflow: hidden;
}
#comments .comment-top {
margin-bottom: 10px;
}
#comments .comment-panel .reply {
margin-top: 20px;
}
#comments .comment-panel .reply a {
border-radius:5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.29);
background-color: #EEEEEE;
border: 1px solid #888888;
color: #555555;
padding: 2px 10px;
}
#comments .comment-panel .reply a:hover {
background-color: #E6E6E6;
text-decoration: none;
}
.comment-body-ref {
position: absolute;
border: 1px solid #E3E3E3;
background-color: #FFFFFF;
padding: 10px 0 0 10px;
left: 177px;
opacity: 0.9;
}
#comments .comment-body-ref .comment-panel{
border-width: 0px;
margin-bottom: 0;
width: 620px;
padding: 10px;
}
.comment-title {
color: #333333;
font-size: 30px;
margin: 20px 0 15px 0;
font-family: \5fae\8f6f\96c5\9ed1;
}
.comment {
margin-bottom: 40px;
}
.comment th {
padding: 10px 0px 10px 0;
text-align: left;
}
.comment input[type="text"], .comment textarea {
outline: none;
color: #666666;
padding: 10px 7px;
background-color: #FFFFFF;
font-family: Arial,Helvetica,sans-serif;
width: 723px;
border: 1px solid #DDDDDD;
font-size: 12px;
height: 16px;
line-height: 16px;
}
.comment textarea {
margin: 10px 0;
padding: 7px;
height: auto;
}
.comment #captchaReply {
margin-left: 10px;
}
#commentValidate, #commentValidateReply {
width: 240px;
}
.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, .em10, .em11, .em12, .em13, .em14 {
background-image: url("../../community/images/emotions/emotions-black.png");
margin: 0 12px;
}
/* header notice */
.header-notice {
background: url("../images/indentline-light.png") repeat-x scroll left top #DEDEDE;
padding: 40px 0;
}
.header-cnt{
border:5px dashed blue;
}
.notice-cnt{
padding:15px;
font-size:24px;
}
.header-notice h4 {
background-color: #333333;
color: #FFFFFF;
float: left;
font-size: 17px;
font-weight: bold;
height: 37px;
line-height: 37px;
padding-left: 15px;
width: 145px;
}
/* footer secondary */
.footer-secondary {
background: url("../images/indentline-light.png") repeat-x scroll left top #DEDEDE;
padding: 40px 0;
}
.footer-secondary h4, .article-date, .comment th span.comment-label {
background-color: #333333;
color: #FFFFFF;
float: left;
font-size: 17px;
font-weight: bold;
height: 37px;
line-height: 37px;
padding-left: 15px;
width: 145px;
}
.most-view-count-articles, .recent-comments, .notice {
float: left;
width: 700px;
margin-left: 65px;
word-break:break-all;
word-wrap:break-word;
}
.most-view-count-articles a {
font: 18px ;
margin-right: 20px;
font-weight: bold;
}
.most-view-count-articles sup {
font-size: 12px;
color: #555555;
font-weight: normal;
margin-right: 3px;
}
.recent-comments div {
float: left;
margin: 0 25px 10px 0px;
text-align: center;
width: 91px;
}
.recent-comments div a {
display: block;
line-height: 22px;
}
.recent-comments img, #comments>div>img {
background-color: #FFFFFF;
border-bottom: 1px solid #C2C2C2;
border-right: 1px solid #C2C2C2;
padding: 8px 7px 7px 8px;
width: 75px;
height: 75px;
}
.recent-comments img:hover, #comments>div>img:hover {
border-color: #5A5A5A;
}
/* footer widgets */
.footer-widgets {
background: url("../images/indentline-light.png") repeat-x scroll left top transparent;
padding: 40px 0;
}
.footer-block {
margin-right: 20px;
width: 220px;
}
.footer-block h4{
font: bold 18px ;
color: #000000;
height: 25px;
padding: 0 0 15px;
background: url("../images/indentline.png") repeat-x scroll left bottom transparent;
}
.footer-block ul {
list-style: none;
}
.footer-block li {
margin-left: 0px;
height: 30px;
padding-left: 10px;
background: url("../images/indentline-light.png") repeat-x scroll left bottom transparent;
}
.footer-block li.mostUsedTags a{
padding-left: 20px;
}
.footer-block li img{
cursor: pointer;
height: 16px;
left: 0px;
position: relative;
top: -20px;
width: 16px;
}
.footer-block li a {
color: #555555;
display: block;
height: 19px;
line-height: 19px;
overflow: hidden;
padding: 6px 0 1px 0px;
}
.footer-block li sup {
float: left;
margin: 5px 3px 0 0;
}
.footer-block li:hover {
background: url("../images/icon.png") repeat-x 0px -34px;
}
/* footer copyright */
.footer {
background: url("../images/indentline-light.png") repeat-x scroll left top #DEDEDE;
text-align: left;
}
.footer .content {
line-height: 22px;
}
.footer a {
color: #000000;
}
.footer .goTop {
background: url("../images/icon.png") no-repeat -12px -64px;
cursor: pointer;
padding-left: 15px;
height: 17px;
line-height: 17px;
}
/* error */
.error-msg {
color: #333333;
font-weight: bold;
}
.error-footer {
bottom: 0;
position: fixed;
width: 100%;
}
.error-panel {
background-color: #FFFFFF;
border-bottom: 1px solid #E3E3E3;
border-right: 1px solid #E3E3E3;
margin-bottom: 50px;
padding: 20px;
}
.error-panel h2 {
font: bold 30px/24px;
margin: 0 0 20px;
}
/* icon */
.read-more-icon, .arrow-dowm-icon, .tag-icon, .atom-icon, .up-icon, .down-icon {
background-image: url("../images/icon.png");
background-repeat: no-repeat;
float: left;
}
.read-more-icon {
background-position: 0 -22px;
height: 12px;
margin: 2px 0 0 6px;
width: 12px;
}
.arrow-dowm-icon {
background-position: -13px -22px;
height: 13px;
margin: 8px 0 0 6px;
width: 13px;
cursor: pointer;
}
.tag-icon {
background-position: 0px -102px;
margin-right: 6px;
height: 16px;
width: 16px;
}
.atom-icon {
height: 22px;
margin-left: 6px;
width: 22px;
}
.up-icon {
background-position: -11px -118px;
height: 12px;
margin: 6px 0 0 10px;
width: 11px;
cursor: pointer;
}
.down-icon {
background-position: 0 -118px;
height: 12px;
margin: 6px 0 0 10px;
width: 11px;
cursor: pointer;
}
.star-current-icon, .star-icon, .moon-icon, .moon-current-icon {
height: 58px;
width: 64px;
background-image: url("../images/author-header.png");
float: right;
white-space:normal;
text-align: center;
word-break:break-all;
padding-top: 6px;
word-wrap:break-word;
font-weight: bold;
}
.star-current-icon {
background-position: 0px -64px;
}
a.star-current-icon {
color: #333333;
}
.star-icon {
background-position: 0 -192px;
}
a.star-icon {
color: orange;
}
.moon-icon {
float: right;
margin-top: 4px;
}
.moon-current-icon {
float: right;
background-position: 0 -128px;
margin: 1px 0 3px 0;
}
#tagsPanel a.tagPanel:hover {
border: 1px dashed;
}
#tagsPanel a.tagPanel {
border: 1px solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 3px;
cursor: pointer;
float: left;
}