はてなスターに付いてるコメント部分の装飾をいじるためのスタイルシート

どこかにあってもいいと思うんだけど、無かった。なんで見つからんのや…というわけで作った。

/* はてなスターのコメント */
[style^="border: 1px solid rgb(187, 187, 187);"] {
  background-color : #dfe !important;
  color : #131 !important;
  border-style : none !important;
}

[style^="border: 1px solid rgb(187, 187, 187);"] blockquote:before {
  content : "曰く、";
}

[style^="border: 1px solid rgb(187, 187, 187);"] blockquote {
  border-style : none !important;
  border-top : solid 1px #242 !important;
  background-color : #dfe !important;
  color : #131 !important;
}

結構苦労したので備忘録。
なぜこんなことになっているのかというと、スターのコメント部分の要素にはclass属性とかid属性が付いていない。しかしstyle属性は付いているので、その内容の頭から適当な文字数分だけ一致した要素を探すというようなことをしている。 コメントの要素は、コメントが表示された時、body直下に一つだけ追加されて、別のコメントを表示するときはその要素の中身を書き換えている。ちなみにカラースター選択一覧も同じようにbody直下に追加される。
あとは要素に対してstyle属性を直接指定しているので、ページに指定するスタイルシートから上書きするには!importantを付けるしかない。
欠点はもちろんはてなが実装をいじると変更しなければいけない点であるが、まぁ別にいいや。