156 lines
4.1 KiB
Stylus
156 lines
4.1 KiB
Stylus
@import colors
|
||
$comment-header-background-color = $top-navigation-color
|
||
$comment-border-color = #DDD
|
||
|
||
.comment-container
|
||
padding: 0 0 0 60px
|
||
|
||
.avatar
|
||
float: left
|
||
margin-left: -60px
|
||
vertical-align: top
|
||
|
||
.thumbnail
|
||
width: 40px
|
||
height: 40px
|
||
a
|
||
display: inline-block
|
||
|
||
nav:not(.active), .tab:not(.active)
|
||
display: none
|
||
|
||
.comment
|
||
border: 1px solid $comment-border-color
|
||
|
||
header
|
||
white-space: nowrap
|
||
font-size: 95%
|
||
vertical-align: middle
|
||
position: relative
|
||
background: $comment-header-background-color
|
||
border-bottom: 1px solid $comment-border-color
|
||
|
||
nav.edit
|
||
padding: 0.25em 1em 0 1em
|
||
line-height: 2em
|
||
ul
|
||
list-style-type: none
|
||
margin: -1px 0 -1px 0
|
||
padding: 0
|
||
li
|
||
display: inline-block
|
||
border: 1px solid transparent
|
||
a
|
||
padding: 0 1em
|
||
&.active
|
||
background: $window-color
|
||
border: 1px solid $comment-border-color
|
||
border-bottom: 1px solid $window-color
|
||
|
||
nav.readonly
|
||
padding: 0 1em
|
||
line-height: 2.25em
|
||
|
||
.date, .score-container, .edit
|
||
margin-right: 2em
|
||
|
||
.score-container, .link-container
|
||
display: inline-block
|
||
|
||
&:before
|
||
position: absolute
|
||
display: block
|
||
content: ' '
|
||
width: 0
|
||
height: 0
|
||
left: -1.5em
|
||
top: calc(50% - 0.75em)
|
||
border: 0.75em solid transparent
|
||
border-right: 0.75em solid darken($comment-border-color, 10%)
|
||
|
||
&:after
|
||
position: absolute
|
||
display: block
|
||
content: ' '
|
||
width: 0
|
||
height: 0
|
||
left: calc(-1.5em + 1px)
|
||
top: calc(50% - 0.75em)
|
||
border: 0.75em solid transparent
|
||
border-right: 0.75em solid $comment-header-background-color
|
||
|
||
.edit, .delete, .score-container a, .nickname a
|
||
&:not(.inactive)
|
||
color: mix($main-color, $inactive-tab-text-color)
|
||
|
||
i
|
||
margin-right: 0.3em
|
||
.downvote i
|
||
text-align: right
|
||
.upvote i
|
||
display: inline-block
|
||
width: 1em
|
||
margin: 0
|
||
.value
|
||
text-align: center
|
||
display: inline-block
|
||
width: 2em
|
||
|
||
.body
|
||
width: auto
|
||
margin: 1em
|
||
|
||
.keep-height
|
||
position: relative
|
||
textarea
|
||
position: absolute
|
||
width: 100%
|
||
height: 100%
|
||
.tab.edit
|
||
min-height: 150px
|
||
|
||
.messages
|
||
margin: 1em 0
|
||
|
||
|
||
.comment-content
|
||
ul, ol
|
||
list-style-position: inside
|
||
margin: 1em 0
|
||
padding: 0 0 0 1.5em
|
||
|
||
.sjis
|
||
font-family: 'MS PGothic', 'ＭＳ Ｐゴシック', 'IPAMonaPGothic', 'Trebuchet MS', Verdana, Futura, Arial, Helvetica, sans-serif
|
||
background: #fbfbfb
|
||
color: #111
|
||
font-size: 1em
|
||
line-height: 1
|
||
margin: 0
|
||
padding: 4px
|
||
overflow: auto
|
||
white-space: pre
|
||
word-wrap: normal
|
||
|
||
.spoiler
|
||
background: #eee
|
||
color: #eee
|
||
&:hover
|
||
color: dimgray
|
||
&:before
|
||
content: '['
|
||
color: #000
|
||
&:after
|
||
content: ']'
|
||
color: #000
|
||
|
||
blockquote
|
||
border-left: 3px solid #eee
|
||
margin-left: 0
|
||
padding: 0.3em 0.3em 0.3em 0.7em
|
||
background: #fafafa
|
||
color: #444
|
||
|
||
:first-child
|
||
margin-top: 0
|
||
:last-child
|
||
margin-bottom: 0
|