176 lines
3.8 KiB
Stylus
176 lines
3.8 KiB
Stylus
@import colors
|
||
|
||
.comments>ul
|
||
list-style-type: none
|
||
margin: 0 0 2em 0
|
||
padding: 0
|
||
|
||
|
||
|
||
.comment-form-container
|
||
&:not(.editing)
|
||
.tabs nav
|
||
display: none
|
||
.tabs .edit.tab
|
||
display: none
|
||
.comment-content
|
||
margin-left: 0.5em
|
||
&.editing
|
||
.tab:not(.active)
|
||
display: none
|
||
.tabs-wrapper
|
||
background: $active-tab-background-color
|
||
.tab
|
||
padding: 0.3em
|
||
.comment-content-wrapper
|
||
background: $window-color
|
||
overflow: hidden
|
||
.comment-content
|
||
margin: 1em
|
||
textarea
|
||
resize: vertical
|
||
width: 100%
|
||
max-height: 80vh
|
||
box-sizing: padding-box
|
||
vertical-align: top /* ghost margin on chrome */
|
||
|
||
form
|
||
width: auto
|
||
margin: 0
|
||
|
||
nav
|
||
vertical-align: middle !important
|
||
margin: 0 0.3em 0.5em 0 !important
|
||
&.buttons
|
||
float: left
|
||
&.actions
|
||
float: left
|
||
margin-top: 0.3em !important
|
||
|
||
|
||
|
||
.comment
|
||
margin: 0 0 1em 0
|
||
padding: 0
|
||
display: -webkit-flex
|
||
display: flex
|
||
|
||
.avatar
|
||
margin-right: 1em
|
||
-webkit-flex-shrink: 0
|
||
flex-shrink: 0
|
||
vertical-align: top
|
||
|
||
.thumbnail
|
||
width: 40px
|
||
height: 40px
|
||
margin: 0
|
||
a
|
||
display: inline-block
|
||
|
||
.body
|
||
width: 100%
|
||
|
||
header
|
||
line-height: 16pt
|
||
vertical-align: middle
|
||
margin-bottom: 0.5em
|
||
background: $top-navigation-color
|
||
padding: 0.2em 0.5em
|
||
|
||
.date, .score-container, .edit, .delete
|
||
margin-left: 2em
|
||
font-size: 95%
|
||
.edit, .delete, .score-container a, .nickname a
|
||
color: mix($main-color, $inactive-tab-text-color)
|
||
.edit, .delete
|
||
font-size: 80%
|
||
|
||
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
|
||
|
||
.messages
|
||
margin: 1em 0
|
||
|
||
|
||
|
||
.comment-content
|
||
ul
|
||
list-style-position: inside
|
||
margin: 1em 0
|
||
padding: 0
|
||
|
||
.sjis
|
||
font-family: 'MS PGothic', 'ＭＳ Ｐゴシック', 'IPAMonaPGothic', 'Trebuchet MS', Verdana, Futura, Arial, Helvetica, sans-serif
|
||
background: #fbfbfb
|
||
color: #111
|
||
font-size: 12pt
|
||
line-height: 1
|
||
margin: 0
|
||
padding: 4px
|
||
overflow: auto
|
||
white-space: pre
|
||
word-wrap: normal
|
||
|
||
p:first-child
|
||
margin-top: 0
|
||
|
||
.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
|
||
|
||
blockquote :last-child
|
||
margin-bottom: 0
|
||
|
||
|
||
|
||
.global-comment-list
|
||
text-align: left
|
||
|
||
&>ul
|
||
list-style-type: none
|
||
margin: 1em 0
|
||
padding: 0
|
||
|
||
&>li
|
||
display: flex
|
||
margin-bottom: 2em
|
||
|
||
.post-thumbnail
|
||
float: left
|
||
vertical-align: top
|
||
margin-right: 1em
|
||
.thumbnail
|
||
width: 12em
|
||
height: 8em
|
||
margin: 0
|
||
a
|
||
display: inline-block
|
||
|
||
.comments-container
|
||
width: 100%
|