github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/views/comment.less (about) 1 /*! 2 * # Semantic UI - Comment 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributorss 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Theme 15 *******************************/ 16 17 @type : 'view'; 18 @element : 'comment'; 19 20 @import (multiple) '../../theme.config'; 21 22 /******************************* 23 Standard 24 *******************************/ 25 26 27 /*-------------- 28 Comments 29 ---------------*/ 30 31 .ui.comments { 32 margin: @margin; 33 max-width: @maxWidth; 34 } 35 36 .ui.comments:first-child { 37 margin-top: 0em; 38 } 39 .ui.comments:last-child { 40 margin-bottom: 0em; 41 } 42 43 /*-------------- 44 Comment 45 ---------------*/ 46 47 .ui.comments .comment { 48 position: relative; 49 background: @commentBackground; 50 margin: @commentMargin; 51 padding: @commentPadding; 52 border: @commentBorder; 53 border-top: @commentDivider; 54 line-height: @commentLineHeight; 55 } 56 .ui.comments .comment:first-child { 57 margin-top: @firstCommentMargin; 58 padding-top: @firstCommentPadding; 59 } 60 61 62 /*-------------------- 63 Nested Comments 64 ---------------------*/ 65 66 .ui.comments .comment .comments { 67 margin: @nestedCommentsMargin; 68 padding: @nestedCommentsPadding; 69 } 70 .ui.comments .comment .comments:before{ 71 position: absolute; 72 top: 0px; 73 left: 0px; 74 } 75 .ui.comments .comment .comments .comment { 76 border: @nestedCommentBorder; 77 border-top: @nestedCommentDivider; 78 background: @nestedCommentBackground; 79 } 80 81 /*-------------- 82 Avatar 83 ---------------*/ 84 85 .ui.comments .comment .avatar { 86 display: @avatarDisplay; 87 width: @avatarWidth; 88 height: @avatarHeight; 89 float: @avatarFloat; 90 margin: @avatarMargin; 91 } 92 .ui.comments .comment img.avatar, 93 .ui.comments .comment .avatar img { 94 display: block; 95 margin: 0em auto; 96 width: 100%; 97 height: 100%; 98 border-radius: @avatarBorderRadius; 99 } 100 101 /*-------------- 102 Content 103 ---------------*/ 104 105 .ui.comments .comment > .content { 106 display: block; 107 } 108 /* If there is an avatar move content over */ 109 .ui.comments .comment > .avatar ~ .content { 110 margin-left: @contentMargin; 111 } 112 113 /*-------------- 114 Author 115 ---------------*/ 116 117 .ui.comments .comment .author { 118 font-size: @authorFontSize; 119 color: @authorColor; 120 font-weight: @authorFontWeight; 121 } 122 .ui.comments .comment a.author { 123 cursor: pointer; 124 } 125 .ui.comments .comment a.author:hover { 126 color: @authorHoverColor; 127 } 128 129 /*-------------- 130 Metadata 131 ---------------*/ 132 133 .ui.comments .comment .metadata { 134 display: @metadataDisplay; 135 margin-left: @metadataSpacing; 136 color: @metadataColor; 137 font-size: @metadataFontSize; 138 } 139 .ui.comments .comment .metadata > * { 140 display: inline-block; 141 margin: 0em @metadataContentSpacing 0em 0em; 142 } 143 .ui.comments .comment .metadata > :last-child { 144 margin-right: 0em; 145 } 146 147 /*-------------------- 148 Comment Text 149 ---------------------*/ 150 151 .ui.comments .comment .text { 152 margin: @textMargin; 153 font-size: @textFontSize; 154 word-wrap: @textWordWrap; 155 color: @textColor; 156 line-height: @textLineHeight; 157 } 158 159 160 /*-------------------- 161 User Actions 162 ---------------------*/ 163 164 .ui.comments .comment .actions { 165 font-size: @actionFontSize; 166 } 167 .ui.comments .comment .actions a { 168 cursor: pointer; 169 display: inline-block; 170 margin: 0em @actionContentDistance 0em 0em; 171 color: @actionLinkColor; 172 } 173 .ui.comments .comment .actions a:last-child { 174 margin-right: 0em; 175 } 176 .ui.comments .comment .actions a.active, 177 .ui.comments .comment .actions a:hover { 178 color: @actionLinkHoverColor; 179 } 180 181 /*-------------------- 182 Reply Form 183 ---------------------*/ 184 185 .ui.comments > .reply.form { 186 margin-top: @replyDistance; 187 } 188 .ui.comments .comment .reply.form { 189 width: 100%; 190 margin-top: @commentReplyDistance; 191 } 192 .ui.comments .reply.form textarea { 193 font-size: @replyFontSize; 194 height: @replyHeight; 195 } 196 197 /******************************* 198 State 199 *******************************/ 200 201 .ui.collapsed.comments, 202 .ui.comments .collapsed.comments, 203 .ui.comments .collapsed.comment { 204 display: none; 205 } 206 207 208 /******************************* 209 Variations 210 *******************************/ 211 212 /*-------------------- 213 Threaded 214 ---------------------*/ 215 216 .ui.threaded.comments .comment .comments { 217 margin: @threadedCommentMargin; 218 padding: @threadedCommentPadding; 219 box-shadow: @threadedCommentBoxShadow; 220 } 221 222 /*-------------------- 223 Minimal 224 ---------------------*/ 225 226 .ui.minimal.comments .comment .actions { 227 opacity: 0; 228 position: @minimalActionPosition; 229 top: @minimalActionTop; 230 right: @minimalActionRight; 231 left: @minimalActionLeft; 232 transition: @minimalTransition; 233 transition-delay: @minimalTransitionDelay; 234 } 235 .ui.minimal.comments .comment > .content:hover > .actions { 236 opacity: 1; 237 } 238 239 /*-------------------- 240 Sizes 241 ---------------------*/ 242 243 .ui.small.comments { 244 font-size: @small; 245 } 246 .ui.comments { 247 font-size: @medium; 248 } 249 .ui.large.comments { 250 font-size: @large; 251 } 252 .ui.huge.comments { 253 font-size: @huge; 254 } 255 256 .loadUIOverrides();