github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/feed.css (about) 1 /*! 2 * # Semantic UI x.x - Feed 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 Activity Feed 15 *******************************/ 16 17 .ui.feed { 18 margin: 1em 0em; 19 } 20 .ui.feed:first-child { 21 margin-top: 0em; 22 } 23 .ui.feed:last-child { 24 margin-top: 0em; 25 } 26 27 28 /******************************* 29 Content 30 *******************************/ 31 32 33 /* Event */ 34 .ui.feed > .event { 35 display: table; 36 width: 100%; 37 padding: 0.5rem 0em; 38 margin: 0em; 39 background: none; 40 border-top: none; 41 } 42 .ui.feed > .event:first-child { 43 border-top: 0px; 44 padding-top: 0em; 45 } 46 .ui.feed > .event:last-child { 47 padding-bottom: 0em; 48 } 49 50 /* Event Label */ 51 .ui.feed > .event > .label { 52 display: table-cell; 53 width: 2.5em; 54 height: 2.5em; 55 vertical-align: top; 56 text-align: left; 57 } 58 .ui.feed > .event > .label .icon { 59 opacity: 1; 60 font-size: 1.5em; 61 width: 100%; 62 padding: 0.25em; 63 background: none; 64 border: none; 65 border-radius: none; 66 color: rgba(0, 0, 0, 0.6); 67 } 68 .ui.feed > .event > .label img { 69 width: 100%; 70 height: auto; 71 border-radius: 500rem; 72 } 73 .ui.feed > .event > .label + .content { 74 padding: 0.5em 0em 0.5em 1.25em; 75 } 76 77 /* Content */ 78 .ui.feed > .event > .content { 79 display: table-cell; 80 vertical-align: top; 81 text-align: left; 82 word-wrap: break-word; 83 } 84 .ui.feed > .event:last-child > .content { 85 padding-bottom: 0em; 86 } 87 88 /* Link */ 89 .ui.feed > .event > .content a { 90 cursor: pointer; 91 } 92 93 /*-------------- 94 Date 95 ---------------*/ 96 97 .ui.feed > .event > .content .date { 98 margin: -0.5rem 0em 0em; 99 padding: 0em; 100 font-weight: normal; 101 font-size: 1em; 102 font-style: normal; 103 color: rgba(0, 0, 0, 0.4); 104 } 105 106 /*-------------- 107 Summary 108 ---------------*/ 109 110 .ui.feed > .event > .content .summary { 111 margin: 0em; 112 font-size: 1em; 113 font-weight: bold; 114 color: rgba(0, 0, 0, 0.8); 115 } 116 117 /* Summary Image */ 118 .ui.feed > .event > .content .summary img { 119 display: inline-block; 120 width: auto; 121 height: 2em; 122 margin: -0.25em 0.25em 0em 0em; 123 border-radius: 0.25em; 124 vertical-align: middle; 125 } 126 127 /*-------------- 128 User 129 ---------------*/ 130 131 .ui.feed > .event > .content .user { 132 display: inline-block; 133 font-weight: bold; 134 margin-right: 0em; 135 vertical-align: baseline; 136 } 137 .ui.feed > .event > .content .user img { 138 margin: -0.25em 0.25em 0em 0em; 139 width: auto; 140 height: 2em; 141 vertical-align: middle; 142 } 143 144 /*-------------- 145 Inline Date 146 ---------------*/ 147 148 149 /* Date inside Summary */ 150 .ui.feed > .event > .content .summary > .date { 151 display: inline-block; 152 float: none; 153 font-weight: normal; 154 font-size: 0.875em; 155 font-style: normal; 156 margin: 0em 0em 0em 0.5em; 157 padding: 0em; 158 color: rgba(0, 0, 0, 0.4); 159 } 160 161 /*-------------- 162 Extra Summary 163 ---------------*/ 164 165 .ui.feed > .event > .content .extra { 166 margin: 0.5em 0em 0em; 167 background: none; 168 padding: 0em; 169 color: rgba(0, 0, 0, 0.8); 170 } 171 172 /* Images */ 173 .ui.feed > .event > .content .extra.images img { 174 display: inline-block; 175 margin: 0em 0.25em 0em 0em; 176 width: 6em; 177 } 178 179 /* Text */ 180 .ui.feed > .event > .content .extra.text { 181 padding: 0.5em 1em; 182 border-left: 3px solid rgba(0, 0, 0, 0.2); 183 font-size: 1em; 184 max-width: 500px; 185 line-height: 1.33; 186 } 187 188 /*-------------- 189 Meta 190 ---------------*/ 191 192 .ui.feed > .event > .content .meta { 193 display: inline-block; 194 font-size: 0.875em; 195 margin: 0.5em 0em 0em; 196 background: none; 197 border: none; 198 border-radius: 0; 199 box-shadow: none; 200 padding: 0em; 201 color: rgba(0, 0, 0, 0.6); 202 } 203 .ui.feed > .event > .content .meta > * { 204 position: relative; 205 margin-left: 0.75em; 206 } 207 .ui.feed > .event > .content .meta > *:after { 208 content: ''; 209 color: rgba(0, 0, 0, 0.2); 210 top: 0em; 211 left: -1em; 212 opacity: 1; 213 position: absolute; 214 vertical-align: top; 215 } 216 .ui.feed > .event > .content .meta .like { 217 color: ''; 218 -webkit-transition: 0.2s color ease; 219 transition: 0.2s color ease; 220 } 221 .ui.feed > .event > .content .meta .like:hover .icon { 222 color: #ff2733; 223 } 224 .ui.feed > .event > .content .meta .active.like .icon { 225 color: #ef404a; 226 } 227 228 /* First element */ 229 .ui.feed > .event > .content .meta > :first-child { 230 margin-left: 0em; 231 } 232 .ui.feed > .event > .content .meta > :first-child::after { 233 display: none; 234 } 235 236 /* Action */ 237 .ui.feed > .event > .content .meta a, 238 .ui.feed > .event > .content .meta > .icon { 239 cursor: pointer; 240 opacity: 1; 241 color: rgba(0, 0, 0, 0.5); 242 -webkit-transition: color 0.2s ease; 243 transition: color 0.2s ease; 244 } 245 .ui.feed > .event > .content .meta a:hover, 246 .ui.feed > .event > .content .meta a:hover .icon, 247 .ui.feed > .event > .content .meta > .icon:hover { 248 color: rgba(0, 0, 0, 0.8); 249 } 250 251 252 /******************************* 253 Variations 254 *******************************/ 255 256 .ui.small.feed { 257 font-size: 0.9em; 258 } 259 .ui.feed { 260 font-size: 1em; 261 } 262 .ui.large.feed { 263 font-size: 1.1em; 264 } 265 266 267 /******************************* 268 Theme Overrides 269 *******************************/ 270 271 272 273 /******************************* 274 User Variable Overrides 275 *******************************/ 276