2015-08-17 17:00:26 -07:00
/ * *
* @ file
* Visual styles for comments in Bartik .
* /
/* This is required to win over specificity of #content h2 */
# content . comment-wrapper h2 {
margin-bottom : 1em ;
}
2015-08-27 12:03:05 -07:00
# content . comment-wrapper h2 . comment-form__title {
margin-bottom : 1em ;
}
2015-08-17 17:00:26 -07:00
. comment {
2015-08-27 12:03:05 -07:00
margin-bottom : 19px ;
2015-08-17 17:00:26 -07:00
vertical-align : top ;
2015-08-27 12:03:05 -07:00
display : table ;
2015-08-17 17:00:26 -07:00
}
2015-08-27 12:03:05 -07:00
[ dir = "rtl" ] . comment {
direction : rtl ;
}
. comment__meta {
2015-08-17 17:00:26 -07:00
padding : 0 30px 0 0 ; /* LTR */
2015-08-27 12:03:05 -07:00
font-size : 1 . 071em ;
2015-08-17 17:00:26 -07:00
}
2015-08-27 12:03:05 -07:00
[ dir = "rtl" ] . comment__meta {
2015-08-17 17:00:26 -07:00
padding : 0 0 0 30px ;
}
. comment__attribution img {
border : 1px solid # d3d7d9 ;
}
/* This is required to win over specificity of .field-type-image img */
. comment . field-name-user-picture img {
margin : 0 ;
}
. comment__author . username {
white-space : nowrap ;
}
2015-08-27 12:03:05 -07:00
. comment__author {
2015-08-17 17:00:26 -07:00
margin : 4px 0 ;
line-height : 1 . 2 ;
}
. comment__time {
2015-08-27 12:03:05 -07:00
margin-bottom : 4px ;
2015-08-17 17:00:26 -07:00
color : # 68696b ;
2015-08-27 12:03:05 -07:00
font-family : "Helvetica Neue" , Helvetica , Arial , sans-serif ;
font-size : 0 . 733em ;
line-height : 1 . 2 ;
2015-08-17 17:00:26 -07:00
}
. comment__permalink {
2015-08-27 12:03:05 -07:00
font-size : 0 . 733em ;
line-height : 1 . 2 ;
2015-08-17 17:00:26 -07:00
}
. comment__content {
2015-08-27 12:03:05 -07:00
position : relative ;
2015-08-17 17:00:26 -07:00
display : table-cell ;
2015-08-27 12:03:05 -07:00
padding : 10px 25px 10px 25px ;
2015-08-17 17:00:26 -07:00
vertical-align : top ;
width : 100 % ;
2015-08-27 12:03:05 -07:00
border : 1px solid # d3d7d9 ;
font-size : 0 . 929em ;
line-height : 1 . 6 ;
2015-08-17 17:00:26 -07:00
}
2015-08-27 12:03:05 -07:00
. comment__content : before {
2015-08-17 17:00:26 -07:00
content : '' ;
position : absolute ;
right : 100 % ; /* LTR */
top : 20px ;
border-top : 20px solid transparent ;
border-right : 20px solid # d3d7d9 ; /* LTR */
border-bottom : 20px solid transparent ;
}
2015-08-27 12:03:05 -07:00
[ dir = "rtl" ] . comment__content : before {
2015-08-17 17:00:26 -07:00
right : auto ;
left : 100 % ;
border-right : none ;
border-left : 20px solid # d3d7d9 ;
}
2015-08-27 12:03:05 -07:00
. comment__content : after {
2015-08-17 17:00:26 -07:00
content : '' ;
position : absolute ;
right : 100 % ; /* LTR */
top : 20px ;
border-top : 20px solid transparent ;
border-right : 20px solid # fff ; /* LTR */
border-bottom : 20px solid transparent ;
margin-right : -1px ; /* LTR */
}
2015-08-27 12:03:05 -07:00
[ dir = "rtl" ] . comment__content : after {
2015-08-17 17:00:26 -07:00
right : auto ;
left : 100 % ;
border-right : none ;
border-left : 20px solid # fff ;
margin-right : 0 ;
margin-left : -1px ;
}
2015-08-27 12:03:05 -07:00
. comment__content h3 {
margin-top : 0 . 94em ;
margin-bottom : 0 . 45em ;
font-size : 1 . 171em ;
}
. comment__content nav {
padding-top : 1px ;
}
2015-08-17 17:00:26 -07:00
. comment . indented {
margin-left : 40px ; /* LTR */
}
[ dir = "rtl" ] . comment . indented {
margin-right : 40px ;
margin-left : 0 ;
}
2015-08-27 12:03:05 -07:00
. comment . links {
2015-08-17 17:00:26 -07:00
padding : 0 0 0 . 25em 0 ;
}
2015-08-27 12:03:05 -07:00
. comment . links li {
2015-08-17 17:00:26 -07:00
padding : 0 0 . 5em 0 0 ; /* LTR */
2015-08-27 12:03:05 -07:00
font-size : 1 . 08em ;
2015-08-17 17:00:26 -07:00
}
2015-08-27 12:03:05 -07:00
[ dir = "rtl" ] . comment . links li {
2015-08-17 17:00:26 -07:00
padding : 0 0 0 0 . 5em ;
}
. comment--unpublished {
margin-right : 5px ; /* LTR */
padding : 5px 2px 5px 5px ; /* LTR */
background : # fff4f4 ;
}
[ dir = "rtl" ] . comment--unpublished {
margin-left : 5px ;
margin-right : 0 ;
padding : 5px 5px 5px 2px ;
}
2015-08-27 12:03:05 -07:00
. comment--unpublished . comment__content : after ,
. node--unpublished . comment__content : after {
2015-08-17 17:00:26 -07:00
border-right-color : # fff4f4 ; /* LTR */
}
2015-08-27 12:03:05 -07:00
[ dir = "rtl" ] . comment--unpublished . comment__content : after ,
[ dir = "rtl" ] . node--unpublished . comment__content : after {
2015-08-17 17:00:26 -07:00
border-left-color : # fff4f4 ;
}