Skip to content

Instantly share code, notes, and snippets.

@webhasan
Last active May 13, 2018 05:47
Show Gist options
  • Save webhasan/8629054 to your computer and use it in GitHub Desktop.
Save webhasan/8629054 to your computer and use it in GitHub Desktop.
wp: comment css
.comments-area {
margin-top: 3em;
}
.comments-area > h3 {
font-size: 18px;
}
#comments {
font-size: 16px;
color:#333;
}
.nocomments {
display: none;
}
.commentlist {
margin-top: 4em;
counter-reset: name;
}
.commentlist li {
counter-increment: name;
}
.commentlist ul li,
.commentlist ul ol {
padding-left: 1.5em;
border-left: 1px dotted #d7d7d7;
margin-left: 1.5em;
}
.comment-body {
background: white;
border: 1px solid #d7d7d7;
box-shadow: 0 0 5px #d7d7d7;
padding: 1.5em 3em;
margin-bottom: 1.5em;
position: relative;
}
.comment-body::before {
content: counter(name);
position: absolute;
right: 0;
color: #e4e4e4;
font-size: 45px;
padding: 16px 48px 0 0;
font-family: "BreeSerifRegularRegular", Arial, sans-serif;
}
.comment-author {
border-bottom: 1px solid #e9e9e9;
margin-bottom: 1.5em;
font-size: 12px !important;
overflow: hidden;
clear: both;
}
.comment-author cite .fn {
font-size: 17px;
font-weight: bold;
}
.vcard img.avatar {
width: 60px;
height: 60px;
max-width: 100%;
box-shadow: 0 0 2px #d7d7d7;
display: inline-block;
margin-bottom: 1.5em;
float: left;
margin-right: 1.5em;
}
.comment-meta a {
font-style: italic;
color: #c9c9c9;
}
#respond h3 {
font-size: 1em;
margin-bottom: 2em;
font-weight: normal;
clear: both;
}
#respond h3 a,
#cancel-comment-reply a {
color: #3d99ca;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#respond h3 a:hover,
#cancel-comment-reply a:hover {
color: #2b3039;
}
#navigation {
margin-top: 3em;
}
/********* Style For comment form ***********/
#respond form {
margin-top: 2em;
}
#respond form label {
display: inline;
margin-left: 1em ;
}
#respond form input[type=text],
#respond form input[type=url],
#respond form input[type=email]{
width: 50%;
margin-bottom: 1em;
border-radius: 4px;
padding:7px 10px;
border: solid 1px #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: none;
-moz-transition: none;
-webkit-transition: none;
}
input[type=text],input[type=email],input[type=password] {
margin-bottom: 1em;
border-radius: 4px;
padding:7px 10px;
border: solid 1px #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: none;
-moz-transition: none;
-webkit-transition: none;
}
#respond form input[type=text]:focus,
#respond form input[type=url]:focus,
#respond form input[type=email]:focus,input[type=text]:focus{
outline: 0;
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
#respond form textarea {
border: 1px solid #d7d7d7;
width: 70%;
height: 150px;
padding: 1em;
box-shadow: 0px 0px 7px #e4e4e4;
font-size: 16px;
line-height: 1.5em;
margin-bottom: 13px !important;
margin-top: 13px;
}
form textarea {
border: 1px solid #d7d7d7;
padding: 1em;
height: 150px;
box-shadow: 0px 0px 7px #e4e4e4;
font-size: 16px;
line-height: 1.5em;
margin-bottom: 13px !important;
margin-top: 13px;
}
#respond form textarea:focus,form textarea:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
.says {
display: none;
}
.bypostauthor .fn::before {
content: 'admin';
margin-right: 3px;
background: rgba(90, 212, 134, 0.56);
padding: 3px;
font-size: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: white;
position: relative;
top: -3px;
}
.fn {
font-size: 19px;
margin-top: 10px;
text-transform: uppercase;
display: inline-block;
font-family: serif;
color: rgba(0, 0, 0, 0.6);
font-weight: bold;
}
.comment-meta {
position: absolute;
top: 54px;
left: 115px;
padding-right: 5px;
}
#respond form input[type=submit],input[type=button] {
-moz-box-shadow:inset 0px 39px 0px -24px #e67a73;
-webkit-box-shadow:inset 0px 39px 0px -24px #e67a73;
box-shadow:inset 0px 39px 0px -24px #e67a73;
background-color:#e4685d;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:15px;
padding:6px 15px;
text-decoration:none;
text-shadow:0px 1px 0px #b23e35;
cursor: pointer;
}
input[type=submit] {
-moz-box-shadow:inset 0px 39px 0px -24px #e67a73;
-webkit-box-shadow:inset 0px 39px 0px -24px #e67a73;
box-shadow:inset 0px 39px 0px -24px #e67a73;
background-color:#e4685d;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:15px;
padding:6px 15px;
text-decoration:none;
text-shadow:0px 1px 0px #b23e35;
cursor: pointer;
}
#respond form input[type=submit]:hover {
background-color:#eb675e;
}
#respond form input[type=submit]:active {
position: relative;
top: 1px;
}
/***
* Css for responsive layout
*/
@media only screen and (max-width: 479px) {
.comment-body::before {
content: '';
}
.commentlist ul li,
.commentlist ul ol {
padding-left: 0;
border-left: none;
margin-left: 0;
}
#respond form textarea {
width: 100%;
}
.bypostauthor .fn::before {
content: 'admin';
padding: 1px;
font-size: 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: white;
position: relative;
top: -2px;
}
.fn {
font-size: 10px;
margin-top: 10px;
text-transform: uppercase;
display: inline-block;
}
.vcard img.avatar {
margin-right: 7px;
}
.comment-meta {
position: absolute;
top: 54px;
left: 110px;
}
}
/*This is old file*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment