jappixmini/jappix/css/channel.css

   1 /*
   2
   3 Jappix - An open social platform
   4 This is the channel CSS stylesheet for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Author: Vanaryon
  10 Last revision: 26/08/11
  11
  12 */
  13
  14 #channel .top div.update {
  15         position: absolute;
  16         top: 12px;
  17         left: 115px;
  18         right: 15px;
  19         bottom: 15px;
  20         border-radius: 20px;
  21         -moz-border-radius: 20px;
  22         -webkit-border-radius: 20px;
  23 }
  24
  25 #channel .top p {
  26         font-size: 0.9em;
  27         margin-bottom: 10px;
  28 }
  29
  30 #channel .top h2 {
  31         font-size: 1.6em;
  32         margin-bottom: 10px;
  33         color: #232323;
  34 }
  35
  36 #channel .top a {
  37         font-size: 0.9em;
  38         color: #232323;
  39 }
  40
  41 #channel .top.individual div.update {
  42         right: 36px;
  43 }
  44
  45 #channel .top.individual div.shortcuts,
  46 #userinfos .main-infos div.shortcuts {
  47         width: 16px;
  48         float: right;
  49 }
  50
  51 #channel .top.individual div.shortcuts {
  52         margin: 2px 5px 0 0;
  53 }
  54
  55 #channel .top.individual div.shortcuts a,
  56 #userinfos .main-infos div.shortcuts a {
  57         height: 16px;
  58         width: 16px;
  59         margin-bottom: 4px;
  60         display: block;
  61 }
  62
  63 #channel .top.individual div.shortcuts a.message,
  64 #userinfos .main-infos a.message {
  65         background-position: 0 -1717px;
  66 }
  67
  68 #channel .top.individual div.shortcuts a.chat,
  69 #userinfos .main-infos a.chat {
  70         background-position: 0 -1737px;
  71 }
  72
  73 #channel .top.individual div.shortcuts a.command,
  74 #userinfos .main-infos a.command {
  75         background-position: 0 -1758px;
  76 }
  77
  78 #channel .microblog-body {
  79         height: 20px;
  80         margin-right: 50px;
  81 }
  82
  83 #channel .microblog-body input {
  84         width: 100%;
  85         height: 100%;
  86         padding: 8px;
  87 }
  88
  89 #channel .one-microblog-icon {
  90         position: absolute;
  91         top: 38px;
  92         right: 0;
  93 }
  94
  95 #channel div.update .one-microblog-icon,
  96 #channel div.update .postit {
  97         width: 16px;
  98         height: 16px;
  99         display: block;
 100 }
 101
 102 #channel div.update .attach {
 103         background-position: 0 -79px;
 104         display: none;
 105 }
 106
 107 #attach {
 108         position: absolute;
 109         width: 263px;
 110         margin-left: -227px;
 111         color: white;
 112         font-size: 0.85em;
 113         z-index: 9998;
 114         text-align: left;
 115         display: none;
 116 }
 117
 118 #attach p {
 119         margin-bottom: 6px !important;
 120 }
 121
 122 #attach input[type=submit] {
 123         margin: 8px 0 6px 0;
 124 }
 125
 126 #attach .wait {
 127         float: right;
 128         margin: 7px 5px;
 129 }
 130
 131 #attach div.one-file {
 132         height: 16px;
 133         margin-top: 2px;
 134 }
 135
 136 #attach div.one-file a.link {
 137         color: white;
 138         width: 215px;
 139         height: 14px;
 140         margin-left: 2px;
 141         overflow: hidden;
 142         float: left;
 143 }
 144
 145 #attach div.one-file a.remove {
 146         width: 16px;
 147         height: 16px;
 148         float: left;
 149 }
 150
 151 .attach-subarrow {
 152         background-position: 0 -241px;
 153         opacity: 0.8;
 154         height: 10px;
 155         width: 18px;
 156         margin-left: 226px;
 157 }
 158
 159 .attach-subitem {
 160         background-color: rgb(0,0,0);
 161         background-color: rgba(0,0,0,0.8);
 162         padding: 10px;
 163         text-shadow: 0 1px 1px black;
 164         border-radius: 5px;
 165         -moz-border-radius: 5px;
 166         -webkit-border-radius: 5px;
 167 }
 168
 169 .attach-p {
 170         font-weight: bold;
 171         float: left;
 172 }
 173
 174 #channel .one-update {
 175         margin-bottom: 12px;
 176         padding: 6px 6px 8px 6px;
 177         border-bottom: 1px dotted #d0d0d0;
 178         min-height: 50px;
 179         color: black;
 180         position: relative;
 181         display: none;
 182 }
 183
 184 #channel .one-update .avatar-container {
 185         text-align: center;
 186         margin-right: 16px;
 187         float: left;
 188         height: 50px;
 189         width: 50px;
 190 }
 191
 192 #channel .one-update .avatar-container:hover {
 193         cursor: pointer;
 194 }
 195
 196 #channel .one-update img.avatar {
 197         max-height: 50px;
 198         max-width: 50px;
 199 }
 200
 201 #channel .one-update div.body {
 202         margin-left: 65px;
 203         opacity: 0.8;
 204 }
 205
 206 #channel .one-update:hover div.body {
 207         opacity: 1;
 208 }
 209
 210 #channel .one-update a.repeat {
 211         background-position: 0 -1681px;
 212         height: 16px;
 213         width: 16px;
 214         margin-right: 4px;
 215         float: left;
 216 }
 217
 218 #channel .one-update span a {
 219         text-decoration: underline;
 220 }
 221
 222 #channel .one-update p {
 223         display: block;
 224         margin: 0 12px 5px 0;
 225 }
 226
 227 #channel .one-update p b.name:hover {
 228         cursor: pointer;
 229         text-decoration: underline;
 230 }
 231
 232 #channel .one-update p.infos {
 233         font-size: 0.9em;
 234 }
 235
 236 #channel .one-update p.infos a.geoloc {
 237         background-position: 0 -1778px;
 238         color: #363636;
 239         margin-left: 18px;
 240         padding-left: 14px;
 241 }
 242
 243 #channel .one-update p.infos a.geoloc:hover,
 244 #channel .one-update p.infos a.geoloc:focus,
 245 #channel .one-update p.infos a.geoloc:active {
 246         color: #141414;
 247 }
 248
 249 #channel .one-update p.file {
 250         font-size: 0.9em;
 251         margin: 6px 0 5px 10px;
 252 }
 253
 254 #channel .one-update p.file a.link,
 255 #inbox .inbox-new-file a.file {
 256         min-height: 16px;
 257         padding-left: 22px;
 258         text-decoration: underline;
 259         display: block;
 260 }
 261
 262 #channel .one-update p.file a.link {
 263         margin-top: 4px;
 264 }
 265
 266 #channel p.file a,
 267 #inbox .inbox-new-file a.file {
 268         background-position: 0 -988px;
 269 }
 270
 271 #channel p.file a.audio,
 272 #inbox .inbox-new-file a.file.audio {
 273         background-position: 0 -899px;
 274 }
 275
 276 #channel p.file a.image,
 277 #inbox .inbox-new-file a.file.image {
 278         background-position: 0 -917px;
 279 }
 280
 281 #channel p.file a.video,
 282 #inbox .inbox-new-file a.file.video {
 283         background-position: 0 -935px;
 284 }
 285
 286 #channel p.file a.document,
 287 #inbox .inbox-new-file a.file.document {
 288         background-position: 0 -953px;
 289 }
 290
 291 #channel p.file a.package,
 292 #inbox .inbox-new-file a.file.package {
 293         background-position: 0 -971px;
 294 }
 295
 296 #channel .one-update p.file a.thumb img {
 297         border: 1px solid #a2a2a2;
 298         max-width: 140px;
 299         max-height: 105px;
 300         margin: 4px 10px 2px 0;
 301         padding: 1px;
 302 }
 303
 304 #channel .one-update p.file a.thumb img:hover {
 305         border-color: #464646;
 306 }
 307
 308 #channel .one-update div.comments,
 309 .popup.large div.comments {
 310         width: 410px;
 311         margin: 2px 0 2px 76px;
 312 }
 313
 314 #channel .one-update div.comments div.arrow,
 315 .popup.large div.comments div.arrow {
 316         background-position: 0 -1702px;
 317         width: 20px;
 318         height: 8px;
 319         margin-left: 20px;
 320         display: block;
 321 }
 322
 323 #channel .one-update div.comments div.comments-content,
 324 .popup.large div.comments div.comments-content {
 325         background-color: #e5ebec;
 326         color: black;
 327         font-size: 0.9em;
 328         text-shadow: 0 1px 0 white;
 329 }
 330
 331 #channel .one-update div.comments input,
 332 .popup.large div.comments input {
 333         width: 356px;
 334         margin: 6px 0;
 335         padding: 4px 5px;
 336 }
 337
 338 #channel .one-update div.comments span.icon,
 339 .popup.large div.comments span.icon {
 340         background-position: 0 -1082px;
 341         height: 16px;
 342         width: 16px;
 343         margin: 10px;
 344         float: left;
 345 }
 346
 347 #channel .one-update div.comments .one-comment.loading span.icon,
 348 .popup.large div.comments .one-comment.loading span.icon {
 349         margin: 0 10px 0 0;
 350 }
 351
 352 #channel .one-update div.comments .one-comment,
 353 .popup.large div.comments .one-comment {
 354         border-bottom: 1px solid #f4f4f4;
 355         padding: 4px 8px 0px 8px;
 356         position: relative;
 357         display: block;
 358 }
 359
 360 #channel .one-update div.comments .one-comment.compose,
 361 .popup.large div.comments .one-comment.compose {
 362         border-bottom: 2px solid #f4f4f4;
 363         height: 36px;
 364         padding: 0;
 365 }
 366
 367 #channel .one-update div.comments .one-comment.new,
 368 .popup.large div.comments .one-comment.new {
 369         display: none;
 370 }
 371
 372 #channel .one-update div.comments a.one-comment,
 373 .popup.large div.comments a.one-comment {
 374         text-decoration: none;
 375 }
 376
 377 #channel .one-update div.comments a.one-comment:hover,
 378 #channel .one-update div.comments a.one-comment:focus,
 379 .popup.large div.comments a.one-comment:hover,
 380 .popup.large div.comments a.one-comment:focus {
 381         text-decoration: underline;
 382 }
 383
 384 #channel .one-update div.comments .one-comment.loading,
 385 .popup.large div.comments .one-comment.loading {
 386         padding-bottom: 5px;
 387 }
 388
 389 #channel .one-update div.comments .one-comment div.marker,
 390 .popup.large div.comments .one-comment div.marker {
 391         background-color: #6d8387;
 392         width: 2px;
 393         position: absolute;
 394         top: 0;
 395         left: 0;
 396         bottom: 0;
 397 }
 398
 399 #channel .one-update div.comments .one-comment .avatar-container,
 400 .popup.large div.comments .one-comment .avatar-container {
 401         text-align: center;
 402         width: 30px;
 403         height: 30px;
 404         margin: 2px 8px 0 0;
 405         float: left;
 406 }
 407
 408 #channel .one-update div.comments .one-comment .avatar-container:hover,
 409 .popup.large div.comments .one-comment .avatar-container:hover {
 410         cursor: pointer;
 411 }
 412
 413 #channel .one-update div.comments .one-comment img.avatar,
 414 .popup.large div.comments .one-comment img.avatar {
 415         max-height: 30px;
 416         max-width: 30px;
 417 }
 418
 419 #channel .one-update div.comments .one-comment .comment-container,
 420 .popup.large div.comments .one-comment .comment-container {
 421         float: left;
 422 }
 423
 424 #channel .one-update div.comments .one-comment a.name,
 425 .popup.large div.comments .one-comment a.name {
 426         font-weight: bold;
 427         text-decoration: none;
 428         font-size: 0.95em;
 429         padding-bottom: 2px;
 430         float: left;
 431 }
 432
 433 #channel .one-update div.comments .one-comment a.name:hover,
 434 #channel .one-update div.comments .one-comment a.name:focus,
 435 .popup.large div.comments .one-comment a.name:hover,
 436 .popup.large div.comments .one-comment a.name:focus {
 437         text-decoration: underline;
 438 }
 439
 440 #channel .one-update div.comments .one-comment span.date,
 441 #channel .one-update div.comments .one-comment a.remove,
 442 .popup.large div.comments .one-comment span.date,
 443 .popup.large div.comments .one-comment a.remove {
 444         font-size: 0.85em;
 445         float: right;
 446 }
 447
 448 #channel .one-update div.comments .one-comment.me:hover span.date,
 449 .popup.large div.comments .one-comment.me:hover span.date {
 450         display: none;
 451 }
 452
 453 #channel .one-update div.comments .one-comment.me a.remove,
 454 .popup.large div.comments .one-comment.me a.remove {
 455         display: none;
 456 }
 457
 458 #channel .one-update div.comments .one-comment.me:hover a.remove,
 459 .popup.large div.comments .one-comment.me:hover a.remove {
 460         display: block;
 461 }
 462
 463 #channel .one-update div.comments .one-comment p.body,
 464 .popup.large div.comments .one-comment p.body {
 465         clear: both;
 466 }
 467
 468 #channel a.more {
 469         background-position: 0 -334px;
 470         color: black;
 471         height: 16px;
 472         text-decoration: none;
 473         margin: -2px 0 0 4px;
 474         padding: 0 0 14px 20px;
 475         display: block;
 476         visibility: hidden;
 477 }
 478
 479 #channel a.more:hover,
 480 #channel a.more:focus {
 481         text-decoration: underline;
 482 }
 483
 484 #channel a.mbtool {
 485         width: 11px;
 486         height: 11px;
 487         display: none;
 488         position: absolute;
 489         right: 0;
 490 }
 491
 492 #channel .one-update:hover a.mbtool {
 493         display: block;
 494 }
 495
 496 #channel a.mbtool:hover,
 497 #channel a.mbtool:focus {
 498         text-decoration: none;
 499 }
 500
 501 #channel a.mbtool.profile {
 502         background-position: -1px -1333px;
 503         top: 24px;
 504 }
 505
 506 #channel a.mbtool.repost {
 507         background-position: -1px -1354px;
 508 }
 509
 510 #channel a.mbtool.remove {
 511         background-position: -1px -1312px;
 512 }
 513
 514 #channel a.mbtool.repost,
 515 #channel a.mbtool.remove {
 516         top: 6px;
 517 }
 518
 519 #channel .footer {
 520         bottom: 0;
 521         border-bottom-left-radius: 4px;
 522         border-bottom-right-radius: 4px;
 523         -moz-border-radius-bottomleft: 4px;
 524         -moz-border-radius-bottomright: 4px;
 525         -webkit-border-bottom-left-radius: 4px;
 526         -webkit-border-bottom-right-radius: 4px;
 527 }
 528
 529 #channel .footer div {
 530         margin-left: 5px;
 531         padding-left: 24px;
 532         min-height: 16px;
 533         font-size: 0.85em;
 534         width: auto !important;
 535 }
 536
 537 #channel .footer .sync {
 538         background-position: 0 -804px;
 539         display: none;
 540 }
 541
 542 #channel .footer .unsync {
 543         background-position: 0 -830px;
 544         display: none;
 545 }