github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/comment.css (about) 1 /*! 2 * # Semantic UI x.x - 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 Standard 15 *******************************/ 16 17 18 /*-------------- 19 Comments 20 ---------------*/ 21 22 .ui.comments { 23 margin: 1.5em 0em; 24 max-width: 650px; 25 } 26 .ui.comments:first-child { 27 margin-top: 0em; 28 } 29 .ui.comments:last-child { 30 margin-bottom: 0em; 31 } 32 33 /*-------------- 34 Comment 35 ---------------*/ 36 37 .ui.comments .comment { 38 position: relative; 39 background: none; 40 margin: 0.5em 0em 0em; 41 padding: 0.5em 0em 0em; 42 border: none; 43 border-top: none; 44 line-height: 1.2; 45 } 46 .ui.comments .comment:first-child { 47 margin-top: 0em; 48 padding-top: 0em; 49 } 50 51 /*-------------------- 52 Nested Comments 53 ---------------------*/ 54 55 .ui.comments .comment .comments { 56 margin: 0em 0em 0.5em 0.5em; 57 padding: 1em 0em 1em 1em; 58 } 59 .ui.comments .comment .comments:before { 60 position: absolute; 61 top: 0px; 62 left: 0px; 63 } 64 .ui.comments .comment .comments .comment { 65 border: none; 66 border-top: none; 67 background: none; 68 } 69 70 /*-------------- 71 Avatar 72 ---------------*/ 73 74 .ui.comments .comment .avatar { 75 display: block; 76 width: 2.5em; 77 height: auto; 78 float: left; 79 margin: 0.2em 0em 0em; 80 } 81 .ui.comments .comment img.avatar, 82 .ui.comments .comment .avatar img { 83 display: block; 84 margin: 0em auto; 85 width: 100%; 86 height: 100%; 87 border-radius: 0.25rem; 88 } 89 90 /*-------------- 91 Content 92 ---------------*/ 93 94 .ui.comments .comment > .content { 95 display: block; 96 } 97 98 /* If there is an avatar move content over */ 99 .ui.comments .comment > .avatar ~ .content { 100 margin-left: 3.5em; 101 } 102 103 /*-------------- 104 Author 105 ---------------*/ 106 107 .ui.comments .comment .author { 108 font-size: 1em; 109 color: rgba(0, 0, 0, 0.8); 110 font-weight: bold; 111 } 112 .ui.comments .comment a.author { 113 cursor: pointer; 114 } 115 .ui.comments .comment a.author:hover { 116 color: #00b2f3; 117 } 118 119 /*-------------- 120 Metadata 121 ---------------*/ 122 123 .ui.comments .comment .metadata { 124 display: inline-block; 125 margin-left: 0.5em; 126 color: rgba(0, 0, 0, 0.4); 127 font-size: 0.875em; 128 } 129 .ui.comments .comment .metadata > * { 130 display: inline-block; 131 margin: 0em 0.5em 0em 0em; 132 } 133 .ui.comments .comment .metadata > :last-child { 134 margin-right: 0em; 135 } 136 137 /*-------------------- 138 Comment Text 139 ---------------------*/ 140 141 .ui.comments .comment .text { 142 margin: 0.25em 0em 0.5em; 143 font-size: 1em; 144 word-wrap: break-word; 145 color: rgba(0, 0, 0, 0.8); 146 line-height: 1.3; 147 } 148 149 /*-------------------- 150 User Actions 151 ---------------------*/ 152 153 .ui.comments .comment .actions { 154 font-size: 0.875em; 155 } 156 .ui.comments .comment .actions a { 157 cursor: pointer; 158 display: inline-block; 159 margin: 0em 0.75em 0em 0em; 160 color: rgba(0, 0, 0, 0.4); 161 } 162 .ui.comments .comment .actions a:last-child { 163 margin-right: 0em; 164 } 165 .ui.comments .comment .actions a.active, 166 .ui.comments .comment .actions a:hover { 167 color: rgba(0, 0, 0, 0.8); 168 } 169 170 /*-------------------- 171 Reply Form 172 ---------------------*/ 173 174 .ui.comments > .reply.form { 175 margin-top: 1em; 176 } 177 .ui.comments .comment .reply.form { 178 width: 100%; 179 margin-top: 1em; 180 } 181 .ui.comments .reply.form textarea { 182 font-size: 1em; 183 height: 12em; 184 } 185 186 187 /******************************* 188 State 189 *******************************/ 190 191 .ui.collapsed.comments, 192 .ui.comments .collapsed.comments, 193 .ui.comments .collapsed.comment { 194 display: none; 195 } 196 197 198 /******************************* 199 Variations 200 *******************************/ 201 202 203 /*-------------------- 204 Threaded 205 ---------------------*/ 206 207 .ui.threaded.comments .comment .comments { 208 margin: -1.5em 0 -1em 1.25em; 209 padding: 3em 0em 2em 2.25em; 210 box-shadow: -1px 0px 0px rgba(39, 41, 43, 0.15); 211 } 212 213 /*-------------------- 214 Minimal 215 ---------------------*/ 216 217 .ui.minimal.comments .comment .actions { 218 opacity: 0; 219 position: absolute; 220 top: 0px; 221 right: 0px; 222 left: auto; 223 -webkit-transition: opacity 0.2s ease; 224 transition: opacity 0.2s ease; 225 -webkit-transition-delay: 0.1s; 226 transition-delay: 0.1s; 227 } 228 .ui.minimal.comments .comment > .content:hover > .actions { 229 opacity: 1; 230 } 231 232 /*-------------------- 233 Sizes 234 ---------------------*/ 235 236 .ui.small.comments { 237 font-size: 0.9em; 238 } 239 .ui.comments { 240 font-size: 1em; 241 } 242 .ui.large.comments { 243 font-size: 1.1em; 244 } 245 .ui.huge.comments { 246 font-size: 1.2em; 247 } 248 249 250 /******************************* 251 Theme Overrides 252 *******************************/ 253 254 255 256 /******************************* 257 User Variable Overrides 258 *******************************/ 259