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;
}

Aunque quedan cosas sin resolver con reglas de estilo que no tengo idea qué uso tendrán ya que hacen referencia 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;
}