conversations.css (8036B)
1 .conversationList { 2 display: block; 3 width: 100%; 4 padding: 15px 10px; 5 font-size: 0; 6 } 7 8 .conversationList > .inner { 9 padding: 20px; 10 background: #fff; 11 } 12 13 .conversationList > .inner > .heading { 14 display: block; 15 margin-bottom: 20px; 16 font-size: 22px; 17 } 18 19 .conversationList > .inner > .actionbar { 20 display: block; 21 padding-bottom: 10px; 22 margin-bottom: 10px; 23 border-bottom: 1px solid #efefed; 24 } 25 26 .conversationList > .inner > .list { 27 display: block; 28 width: 100%; 29 } 30 31 .conversationList > .inner > .list > .item { 32 display: block; 33 padding: 15px 0; 34 border-bottom: 1px solid #efefed; 35 opacity: 0.7; 36 } 37 38 .conversationList > .inner > .list > .item:hover { 39 opacity: 1; 40 } 41 42 .conversationList > .inner > .list > .item > .text { 43 display: inline-block; 44 vertical-align: top; 45 font-size: 14px; 46 width: calc(100% - 55px); 47 } 48 49 .conversationList > .inner > .list > .item > .text > .title { 50 margin-bottom: 10px; 51 } 52 53 .conversationList > .inner > .list > .item > .text > .title > a { 54 display: inline-block; 55 vertical-align: top; 56 font-size: 18px; 57 text-decoration: none; 58 color: #9b59b6; 59 } 60 61 .conversationList > .inner > .list > .item > .text > .body { 62 font-size: 14px; 63 color: #999; 64 margin-bottom: 10px; 65 white-space: nowrap; 66 overflow: hidden; 67 text-overflow: ellipsis; 68 width: 100%; 69 } 70 71 .conversationList > .inner > .list > .item > .text > .body a { 72 text-decoration: none; 73 } 74 75 .conversationList > .inner > .list > .item > .text > .timestamp { 76 color: #999; 77 font-size: 12px; 78 } 79 80 .conversationList > .inner > .list > .item.unread { 81 opacity: 1; 82 border-left: 5px solid #9b59b6 !important; 83 padding-left: 20px; 84 } 85 86 .conversationList > .inner > .list > .item.unread > .text > .title > a { 87 font-weight: bold; 88 } 89 90 .conversationList > .inner > .list > .item.unread > .text > .body { 91 font-weight: bold; 92 } 93 94 .conversationList > .inner > .list > .item:last-child { 95 border: none; 96 } 97 98 .conversationView { 99 position: relative; 100 height: calc(100vh - 60px); 101 margin-top: 60px; 102 background: #efefed; 103 overflow: hidden; 104 } 105 106 .conversationView > .messageUI { 107 max-height: calc(100vh - 120px); 108 overflow-y: auto; 109 } 110 111 .conversationView > .messageUI > .list { 112 padding: 20px; 113 } 114 115 .conversationView > .messageUI > .list > .event { 116 display: block; 117 width: 100%; 118 margin-bottom: 15px; 119 text-align: center; 120 height: 16px; 121 position: relative; 122 } 123 124 .conversationView > .messageUI > .list > .event:before { 125 position: absolute; 126 left: 0; 127 width: 100%; 128 height: 1px; 129 background: #ccc; 130 top: 50%; 131 content: ""; 132 margin: 0 auto; 133 max-width: 80%; 134 right: 0; 135 } 136 137 .conversationView > .messageUI > .list > .event > .label { 138 position: relative; 139 display: inline-block; 140 margin: 0 auto; 141 font-size: 12px; 142 color: #999; 143 text-transform: uppercase; 144 line-height: 16px; 145 height: 16px; 146 padding: 0 15px; 147 background: #efefed; 148 z-index: 2; 149 } 150 151 .conversationView > .messageUI > .list > .item { 152 display: block; 153 width: 100%; 154 margin-bottom: 10px; 155 text-align: left; 156 } 157 158 .conversationView > .messageUI > .list > .item > .user { 159 font-size: 14px; 160 display: block; 161 margin-bottom: 5px; 162 line-height: 20px; 163 } 164 165 .conversationView > .messageUI > .list > .item > .user > a { 166 text-decoration: none; 167 color: #9b59b6; 168 font-weight: bold; 169 } 170 171 .conversationView > .messageUI > .list > .item > .user > a .flair { 172 background-color: #efefef; 173 color: #000; 174 display: inline-block; 175 font-size: 12px; 176 padding: 0 5px; 177 vertical-align: middle; 178 margin-left: 3px; 179 -webkit-border-radius: 3px; 180 -moz-border-radius: 3px; 181 border-radius: 3px; 182 font-weight: normal; 183 height: 18px; 184 line-height: 18px; 185 } 186 187 .conversationView > .messageUI > .list > .item > .bubble { 188 max-width: 80%; 189 display: inline-block; 190 background: #fff; 191 padding: 10px 15px; 192 font-size: 16px; 193 line-height: 20px; 194 -webkit-border-radius: 10px 10px 10px 0; 195 -moz-border-radius: 10px 10px 10px 0; 196 border-radius: 10px 10px 10px 0; 197 margin-bottom: 5px; 198 -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06); 199 -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06); 200 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06); 201 } 202 203 .conversationView > .messageUI > .list > .item > .bubble a { 204 color: #9b59b6; 205 text-decoration: none; 206 } 207 208 .conversationView > .messageUI > .list > .item > .timestamp { 209 color: #999; 210 font-size: 12px; 211 margin-left: 5px; 212 line-height: 16px; 213 } 214 215 .conversationView > .messageUI > .list > .item.you { 216 text-align: right; 217 } 218 219 .conversationView > .messageUI > .list > .item.you > .bubble { 220 text-align: left; 221 color: #fff; 222 background: #9b59b6; 223 -webkit-border-radius: 10px 10px 0 10px; 224 -moz-border-radius: 10px 10px 0 10px; 225 border-radius: 10px 10px 0 10px; 226 } 227 228 .conversationView > .messageUI > .list > .item.you > .bubble a { 229 color: #ccc; 230 } 231 232 .conversationView > .messageHeader { 233 height: 60px; 234 padding: 10px 20px; 235 display: block; 236 width: 100%; 237 background: #fff; 238 -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06); 239 -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06); 240 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06); 241 font-size: 0; 242 position: relative; 243 z-index: 5; 244 } 245 246 .conversationView > .messageHeader > .recipient { 247 display: inline-block; 248 vertical-align: middle; 249 height: 40px; 250 width: calc(100% - 150px); 251 } 252 253 .conversationView > .messageHeader > .recipient > .text { 254 display: inline-block; 255 vertical-align: middle; 256 margin-left: 10px; 257 width: calc(100% - 60px); 258 font-size: 14px; 259 } 260 261 .conversationView > .messageHeader > .recipient > .text > .username { 262 display: inline-block; 263 text-decoration: none; 264 font-weight: bold; 265 margin-bottom: 5px; 266 } 267 268 .conversationView > .messageHeader > .recipient > .text > .username .flair { 269 background-color: #efefef; 270 color: #000; 271 display: inline-block; 272 font-size: 12px; 273 padding: 0 5px; 274 vertical-align: middle; 275 margin-left: 3px; 276 -webkit-border-radius: 3px; 277 -moz-border-radius: 3px; 278 border-radius: 3px; 279 font-weight: normal; 280 height: 18px; 281 line-height: 18px; 282 } 283 284 .conversationView > .messageHeader > .recipient > .text > .score { 285 font-size: 12px; 286 color: #999; 287 } 288 289 .conversationView > .messageHeader > .right { 290 display: inline-block; 291 vertical-align: middle; 292 width: 150px; 293 position: relative; 294 padding-right: 50px; 295 height: 40px; 296 } 297 298 .conversationView > .messageHeader > .right > .standardBtn { 299 height: 30px; 300 line-height: 30px; 301 margin: 5px 0; 302 position: relative; 303 } 304 305 .conversationView > .messageHeader > .right > .action { 306 position: absolute; 307 right: 0; 308 top: 0; 309 height: 40px; 310 width: 40px; 311 } 312 313 .conversationView > .messageHeader > .right > .action > .event:hover { 314 cursor: pointer; 315 } 316 317 .conversationView 318 > .messageHeader 319 > .right 320 > .action 321 > .event:hover 322 ~ .dropdown { 323 display: block !important; 324 } 325 326 .conversationView > .messageHeader > .right > .action > .dropdown { 327 display: none; 328 position: absolute; 329 top: 100%; 330 right: 0; 331 width: 100px; 332 background: #fff; 333 -webkit-border-radius: 3px; 334 -moz-border-radius: 3px; 335 border-radius: 3px; 336 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); 337 overflow: hidden; 338 } 339 340 .conversationView > .messageHeader > .right > .action > .dropdown:hover { 341 display: block; 342 } 343 344 .conversationView > .messageHeader > .right > .action > .dropdown > a, 345 .conversationView > .messageHeader > .right > .action > .dropdown > div { 346 display: block; 347 width: 100%; 348 height: 30px; 349 line-height: 30px; 350 color: #000; 351 font-size: 14px; 352 padding: 0 10px; 353 text-decoration: none; 354 text-align: center; 355 position: relative; 356 } 357 358 .conversationView > .messageHeader > .right > .action > .dropdown > a:hover, 359 .conversationView > .messageHeader > .right > .action > .dropdown > div:hover { 360 background: #9b59b6; 361 color: #fff; 362 }