Comentarios anidados: Los estilos paso a paso (2)

Seguimos con los comentarios anidados y vamos a establecer las reglas del texto del comentario en si mismo:

.comments .comments-content .comment-content {
  color: #666;
  font-family: Trebuchet MS;
  font-size: 13px;
  line-height: 1.3;
  margin: 0;
  padding: 15px 5px 10px;
}

y los enlaces Responder y Suprimir

.comments .comment .comment-actions a {
  background-color: #FFF;
  border-radius: 8px;
  box-shadow: 0 0 2px #000 inset;
  color: #888;
  float: right;
  font-family: Tahoma;
  font-size: 11px;
  margin: 0 2px;
  opacity: .7;
  padding: 1px 10px 3px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .comment .comment-actions a:hover {
  opacity: 1;
}

Y los comentarios anidados los separamos un poco hacia la izquierda y les quitamos la secuencia de color par/impar:

.comments .comments-content .comment-replies {
  clear: both;
  margin: 15px 0 0 25px;
}
.comments .comments-content .comment-thread ol li ol li {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

Debajo de todo eso, está el enlace "Responder" y nos queda un enlace que dice "Respuestas" que despliega y contrae las respuestas si es que las hay:

.comments .continue {
  display:inline-block;
}
.comments .continue a {
  background-color: #FFF;
  border-radius: 8px;
  box-shadow: 0 0 2px #000 inset;
  color: #888;
  font-family: Tahoma;
  font-size: 11px;
  margin: 0 2px;
  opacity: .7;
  padding: 1px 10px 3px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .continue a:hover {
  opacity: 1;
}
.comments .thread-toggle {
  background-color: #FFF;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 0 2px #000 inset;
  cursor:pointer
  display: inline-block;
  margin: 0 2px;
  opacity: 0.7;
  padding: 1px 10px 3px;
}
.comments .thread-toggle:hover {opacity: 1;}
.comments .thread-toggle a {
  color: #888;
  font-family: Tahoma;
  font-size: 11px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .comments-content .comment-thread:empty {
  display:none;
}

Dejamos las flechitas que usa Blogger:

.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 7px;
  width: 10px;
}
.comments .thread-expanded .thread-arrow {
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat 0 0;
}
.comments .thread-collapsed .thread-arrow {
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat 0 0;
}

Lo único que nos faltaría es el formulario de comentarios sobre el que mucho no podemos hacer, solo trataré de centrarlos. Hay dos tipos básicos:

.comment-replybox-thread  { /* el que está debajo de los comentarios */
  padding: 10px 0 0 20px;
}
.comments .comment-replybox-single { /* el que se muestra dentro de los replies */
  padding: 5px 0 0 0px;
}

Un detale extra, el enlace "Carar más ..." que se muestra al final cuando hay demasiados o no se han terminado de cargar:

.comments .comments-content .loadmore {
  background-color: #F0F0F0;
  border-radius: 16px;
  box-shadow: 0 0 10px #888 inset;
  font-family: Tahoma;
  height: 32px;
  line-height: 32px;
  margin: 20px auto;
  text-align: center;
  text-transform: lowercase;
  width: 80%;
}
.comments .comments-content .loadmore a {
  color: #888;
  font-size: 20px;
}
.comments .comments-content .loadmore:hover a {
  color: #000;
}
.comments .comments-content .loadmore.loaded {
  opacity: 0;
  overflow: hidden;
}

Y el resultado final es el que puede verse en este demo online aunque quedan cosas sin resolver con reglas de estilo que no tngo idea qué uso tendrán ya que hacen referncia a clases que no existen o carecen de contenido:

.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}