data/public/webkit.css

   1 * {
   2     -webkit-tap-highlight-color: rgba(160,160,160,0.70);
   3     margin: 0;
   4     padding: 0;
   5 }
   6
   7 body {
   8     -webkit-user-select: auto;
   9     -webkit-text-size-adjust: none;
  10     overflow-x: hidden;
  11     font-family: Helvetica;
  12     background: #000;
  13 }
  14
  15 body > * {
  16     display: none;
  17     position: absolute;
  18     left: 0;
  19     width: 100%;
  20     height: 100%;
  21     height: 416px !important;
  22     background: url(stripe.png) #c5ccd3;
  23 }
  24
  25 body > .current {
  26     display: block !important;
  27 }
  28
  29 .in, .out {
  30     -webkit-animation-timing-function: ease-in-out;
  31     animation-timing-function: ease-in-out;
  32     -webkit-animation-duration: 350ms;
  33     animation-duration: 350ms;
  34 }
  35
  36 .slide.in {
  37     -webkit-animation-name: slideinfromright;
  38     animation-name: slideinfromright;
  39 }
  40
  41 .slide.out {
  42     -webkit-animation-name: slideouttoleft;
  43     animation-name: slideouttoleft;
  44 }
  45
  46 .slide.in.reverse {
  47     -webkit-animation-name: slideinfromleft;
  48     animation-name: slideinfromleft;
  49 }
  50
  51 .slide.out.reverse {
  52     -webkit-animation-name: slideouttoright;
  53     animation-name: slideouttoright;
  54 }
  55
  56 @-webkit-keyframes slideinfromright {
  57     from { -webkit-transform: translateX(100%); }
  58     to { -webkit-transform: translateX(0); }
  59 }
  60
  61 @keyframes slideinfromright {
  62     from { transform: translateX(100%); }
  63     to { transform: translateX(0); }
  64 }
  65
  66 @-webkit-keyframes slideinfromleft {
  67     from { -webkit-transform: translateX(-100%); }
  68     to { -webkit-transform: translateX(0); }
  69 }
  70
  71 @keyframes slideinfromleft {
  72     from { transform: translateX(-100%); }
  73     to { transform: translateX(0); }
  74 }
  75
  76 @-webkit-keyframes slideouttoleft {
  77     from { -webkit-transform: translateX(0); }
  78     to { -webkit-transform: translateX(-100%); }
  79 }
  80
  81 @keyframes slideouttoleft {
  82     from { transform: translateX(0); }
  83     to { transform: translateX(-100%); }
  84 }
  85
  86 @-webkit-keyframes slideouttoright {
  87     from { -webkit-transform: translateX(0); }
  88     to { -webkit-transform: translateX(100%); }
  89 }
  90
  91 @keyframes slideouttoright {
  92     from { transform: translateX(0); }
  93     to { transform: translateX(100%); }
  94 }
  95
  96
  97 .toolbar {
  98     border-bottom: 1px solid #2d3642;
  99     height: 45px;
 100     background: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bccd), color-stop(.5,#889bb3), color-stop(.5,#8195af), to(#6d84a2));
 101     position: relative;
 102 }
 103
 104 .toolbar > h1 {
 105     position: absolute;
 106     overflow: hidden;
 107     left: 50%;
 108     top: 10px;
 109     line-height: 1em;
 110     margin: 1px 0 0 -75px;
 111     height: 40px;
 112     font-size: 20px;
 113     width: 150px;
 114     font-weight: bold;
 115     text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
 116     text-align: center;
 117     text-overflow: ellipsis;
 118     white-space: nowrap;
 119     color: #fff;
 120 }
 121
 122 .toolbar a .nav, .toolbar a img {
 123     position: absolute;
 124     left: 7px;
 125     right: auto;
 126     top: 7px;
 127     border: none;
 128 }
 129
 130 .toolbar a .nav.left_2nd_icon, .toolbar a img.left_2nd_icon {
 131     left: 40px;
 132 }
 133
 134 .toolbar a .nav.right_icon, .toolbar a img.right_icon {
 135     left: auto;
 136     right: 7px;
 137 }
 138
 139 .toolbar a .nav.right_2nd_icon, .toolbar a img.right_2nd_icon {
 140     left: auto;
 141     right: 40px;
 142 }
 143
 144 .button {
 145     position: absolute;
 146     overflow: hidden;
 147     top: 6px;
 148     right: 6px;
 149     margin: 0;
 150     padding: 0 8px;
 151     width: auto;
 152     height: 30px;
 153     line-height: 30px;
 154     font-family: inherit;
 155     font-size: 12px;
 156     font-weight: bold;
 157     color: #fff;
 158     text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0;
 159     text-overflow: ellipsis;
 160     text-decoration: none;
 161     white-space: nowrap;
 162     border: 1px solid #000;
 163     background-color:#4A6D9B;
 164     -webkit-border-radius: 8px;
 165     -moz-border-radius: 8px;
 166     -o-border-radius: 8px;
 167     border-radius: 8px;
 168     -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
 169     -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
 170     -o-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
 171     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 172     background-image: -webkit-gradient(linear,
 173                                        left top, left bottom,
 174                                        color-stop(0.0, rgba(255, 255, 255, 0.8)),
 175                                        color-stop(0.01, rgba(255, 255, 255, 0.6)),
 176                                        color-stop(0.4, rgba(255, 255, 255, 0.3)),
 177                                        color-stop(0.4, rgba(255, 255, 255, 0.2)),
 178                                        color-stop(1.0, rgba(255, 255, 255, 0.0)));
 179     background-image: -moz-linear-gradient(top,
 180                                            rgba(255, 255, 255, 1.0) 0%,
 181                                            rgba(255, 255, 255, 0.6) 1px,
 182                                            rgba(255, 255, 255, 0.3) 40%,
 183                                            rgba(255, 255, 255, 0.2) 40%,
 184                                            rgba(255, 255, 255, 0.0) 100%);
 185 }
 186
 187 .whiteButton {
 188     display: block;
 189     border: 1px solid #000;
 190     background-color: #999;
 191     padding: 8px;
 192     text-align: center;
 193     font-size: 20px;
 194     font-weight: bold;
 195     text-decoration: inherit;
 196     text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
 197     color: #fff;
 198     -webkit-border-radius: 10px;
 199     -moz-border-radius: 10px;
 200     -o-border-radius: 10px;
 201     border-radius: 10px;
 202     -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
 203     -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
 204     -o-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
 205     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 206     background-image: -webkit-gradient(linear,
 207                                        left top, left bottom,
 208                                        color-stop(0.0, rgba(255, 255, 255, 0.8)),
 209                                        color-stop(0.01, rgba(255, 255, 255, 0.6)),
 210                                        color-stop(0.4, rgba(255, 255, 255, 0.3)),
 211                                        color-stop(0.4, rgba(255, 255, 255, 0.2)),
 212                                        color-stop(1.0, rgba(255, 255, 255, 0.0)));
 213     background-image: -moz-linear-gradient(top,
 214                                            rgba(255, 255, 255, 1.0) 0%,
 215                                            rgba(255, 255, 255, 0.6) 1px,
 216                                            rgba(255, 255, 255, 0.3) 40%,
 217                                            rgba(255, 255, 255, 0.2) 40%,
 218                                            rgba(255, 255, 255, 0.0) 100%);
 219 }
 220
 221 ul {
 222     color: black;
 223     background: #fff;
 224     border: 1px solid #B4B4B4;
 225     font: bold 17px Helvetica;
 226     padding: 0;
 227     margin: 15px 10px;
 228     -webkit-border-radius: 8px;
 229     -moz-border-radius: 8px;
 230     -o-border-radius: 8px;
 231     border-radius: 8px;
 232 }
 233
 234 ul li {
 235     color: #666;
 236     border-top: 1px solid #B4B4B4;
 237     list-style-type: none;
 238     padding: 10px 10px 10px 10px;
 239 }
 240
 241 li:first-child, li:first-child a {
 242     border-top: 0;
 243     -webkit-border-top-left-radius: 8px;
 244     -moz-border-radius-topleft: 8px;
 245     -o-border-top-left-radius: 8px;
 246     border-top-left-radius: 8px;
 247     -webkit-border-top-right-radius: 8px;
 248     -moz-border-radius-topright: 8px;
 249     -o-border-top-right-radius: 8px;
 250     border-top-right-radius: 8px;
 251 }
 252
 253 li:last-child, li:last-child a {
 254     -webkit-border-bottom-left-radius: 8px;
 255     -moz-border-radius-bottomleft: 8px;
 256     -o-border-bottom-left-radius: 8px;
 257     border-bottom-left-radius: 8px;
 258     -webkit-border-bottom-right-radius: 8px;
 259     -moz-border-radius-bottomright: 8px;
 260     -o-border-bottom-right-radius: 8px;
 261     border-bottom-right-radius: 8px;
 262 }
 263
 264 ul li a {
 265     color: #000;
 266     text-decoration: none;
 267     text-overflow: ellipsis;
 268     white-space: nowrap;
 269     overflow: hidden;
 270     display: block;
 271     padding: 12px 10px 12px 10px;
 272     margin: -10px;
 273 }
 274
 275 .edgetoedge {
 276     margin: 0;
 277     padding: 0;
 278     background-color: #fff;
 279 }
 280
 281 .edgetoedge ul {
 282     -webkit-border-radius: 0;
 283     -moz-border-radius: 0;
 284     -o-border-radius: 0;
 285     border-radius: 0;
 286     margin: 0;
 287     border-left: 0;
 288     border-right: 0;
 289     border-top: 0;
 290 }
 291
 292 .edgetoedge li {
 293     -webkit-border-radius: 0;
 294     -moz-border-radius: 0;
 295     -o-border-radius: 0;
 296     border-radius: 0;
 297 }
 298
 299 .edgetoedge ul li:first-child,
 300 .edgetoedge ul li:first-child a,
 301 .edgetoedge ul li:last-child,
 302 .edgetoedge ul li:last-child a {
 303     -webkit-border-radius: 0;
 304     -moz-border-radius: 0;
 305     -o-border-radius: 0;
 306     border-radius: 0;
 307 }
 308
 309 .edgetoedge ul li small {
 310     font-size: 16px;
 311     line-height: 28px;
 312 }
 313
 314 .edgetoedge li em {
 315     font-weight: normal;
 316     font-style: normal;
 317 }
 318
 319 ul li small {
 320     color: #369;
 321     font: 17px Helvetica;
 322     text-align: right;
 323     text-overflow: ellipsis;
 324     white-space: nowrap;
 325     overflow: hidden;
 326     display: block;
 327     width: 23%;
 328     float: right;
 329     padding: 3px 0px;
 330 }
 331
 332 ul li.arrow small {
 333     padding: 0 15px;
 334 }
 335
 336 ul li small.counter {
 337     font-size: 17px !important;
 338     line-height: 13px !important;
 339     font-weight: bold;
 340     background: rgb(154,159,170);
 341     color: #fff;
 342     -webkit-border-radius: 11px;
 343     -moz-border-radius: 11px;
 344     -o-border-radius: 11px;
 345     border-radius: 11px;
 346     padding: 4px 10px 5px 10px;
 347     display: inline !important;
 348     width: auto;
 349     margin-top: -22px;
 350 }
 351
 352 ul li.arrow small.counter {
 353     margin-right: 15px;
 354 }
 355
 356
 357 ul li {
 358     position: relative;
 359     margin: 0;
 360     border-bottom: 1px solid #E0E0E0;
 361     padding: 8px 0 8px 10px;
 362     font-size: 20px;
 363     font-weight: bold;
 364     list-style: none;
 365     word-break: break-all;
 366 }
 367
 368 ul li a {
 369     display: block;
 370     margin: -8px 15px -8px -10px;
 371     padding: 8px 20px 8px 10px;
 372     text-decoration: none;
 373     color: inherit;
 374     background: url(right_arrow.png) no-repeat right center;
 375     white-space: normal;
 376     -webkit-tap-highlight-color: rgba(160,160,160,0.70);
 377 }
 378
 379 ul li.message {
 380     padding: 4px 0 4px 10px;
 381     font-size: 16px;
 382     font-weight: normal;
 383     color: black;
 384 }
 385
 386 ul li.messagenew {
 387     padding: 4px 0 4px 10px;
 388     font-size: 16px;
 389     font-weight: normal;
 390     background: #aaccff;
 391     color: black;
 392 }
 393
 394 ul li.sep {
 395     background: #fff;
 396     color: #7b9ba5;
 397     font-size: 14px;
 398     font-weight: normal;
 399     padding: 1px 10px;
 400 }
 401
 402 ul li.group {
 403     background: #7b9ba5;
 404     font-size: 16px;
 405     padding: 0 0 0 10px;
 406     height: 20px;
 407 }
 408
 409 ul li.group a {
 410     padding: 0 0 8px 8px;
 411     height: 20px;
 412     display: inline;
 413     background-image: none;
 414 }
 415
 416 ul li a.inline {
 417     color: #00f;
 418     display: inline;
 419 }
 420
 421 ul.no_arrow li a {
 422     background-image: none;
 423 }
 424
 425 span.nick {
 426       margin: 0 5px 0 0;
 427       padding: 3px 3px 3px 5px;
 428       line-height: 30px;
 429       font-weight: bold;
 430       color: #fff;
 431       text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
 432       text-overflow: ellipsis;
 433       -webkit-border-radius: 8px;
 434       -moz-border-radius: 8px;
 435       -o-border-radius: 8px;
 436       border-radius: 8px;
 437       background: #434A4D;
 438 }
 439
 440 /* input form */
 441 form.edit {
 442     padding: 0px 10px;
 443 }
 444
 445 form.edit button {
 446     margin:0 auto;
 447     font-size: 14px;
 448     width: 100%;
 449 }
 450
 451 form.edit.bottom {
 452     box-sizing: border-box;
 453     -webkit-box-sizing: border-box;
 454     -moz-box-sizing: border-box;
 455     position: absolute;
 456     left: 0px;
 457     bottom: 22px;
 458     width: 100%;
 459     height: 47px;
 460 }
 461
 462 form.edit.bottom input[type="text"] {
 463     margin-top: 8px;
 464 }
 465
 466 input[type="text"], input[type="password"] {
 467     box-sizing: border-box;
 468     -webkit-box-sizing: border-box;
 469     -moz-box-sizing: border-box;
 470     width: 100%;
 471     font-size: 16px;
 472     font-weight: normal;
 473     padding-left: 32px;
 474     background: white;
 475     color: #777;
 476     display: block;
 477     -webkit-border-radius: 8px;
 478     -moz-border-radius: 8px;
 479     -o-border-radius: 8px;
 480     border-radius: 8px;
 481     padding: 8px;
 482     margin: 5px auto;
 483     border: 1px solid #b4b4b4;
 484 }
 485
 486 /* floating menu */
 487 .floaty {
 488     position: absolute;
 489     top: 50px;
 490     left: 0px;
 491     display: none;
 492     background: transparent;
 493     width: 100%;
 494 }
 495
 496 .floaty_in {
 497     -webkit-border-radius: 10px;
 498     -moz-border-radius: 10px;
 499     -o-border-radius: 10px;
 500     border-radius: 10px;
 501     -webkit-box-shadow: rgba(0,0,0, .5) 0px 1px 1px;
 502     -moz-box-shadow: rgba(0,0,0, .5) 0px 1px 1px;
 503     box-shadow: rgba(0,0,0, .5) 0px 1px 1px;
 504     position: relative;
 505     width: 98%;
 506     margin: 0px auto;
 507     padding: 5px 0px;
 508     background: rgba(255,255,255,.7);
 509     color: #000;
 510 }
 511
 512 /* info */
 513 .info {
 514     background: #dce1eb;
 515     font-size: 12px;
 516     line-height: 12px;
 517     text-align: center;
 518     text-shadow: rgba(255,255,255,.8) 0 1px 0;
 519     color: rgb(76, 86, 108);
 520     border-top: 1px solid rgba(76, 86, 108, .3);
 521     font-weight: bold;
 522     margin-top: 5px;
 523     padding: 3px;
 524 }
 525
 526 .info.bottom {
 527     box-sizing: border-box;
 528     -webkit-box-sizing: border-box;
 529     -moz-box-sizing: border-box;
 530     position: absolute;
 531     left: 0px;
 532     bottom: 0px;
 533     width: 100%;
 534     height: 20px;
 535 }
 536
 537 /* operation icon */
 538 .icon {
 539     -webkit-border-radius: 5px;
 540     -moz-border-radius: 5px;
 541     -o-border-radius: 5px;
 542     border-radius: 5px;
 543     -webkit-box-shadow: 3px 3px 3px gray;
 544     -moz-box-shadow: 3px 3px 3px gray;
 545     box-shadow: 3px 3px 3px gray;
 546     background: #6D84A2;
 547     color: #fff;
 548     width: 48px;
 549     height: 48px;
 550     align: center;
 551     font-size: 10px;
 552     text-align: center;
 553     margin: 0px auto;
 554 }
 555
 556 .icon .nav {
 557     margin: 0px auto;
 558 }
 559
 560 .icon img {
 561     margin: 0px auto;
 562     width: 30px;
 563     height: 30px;
 564     display: block;
 565     border: none;
 566 }
 567
 568 .icon_box {
 569     width: 100%;
 570 }
 571
 572 .icon_box a {
 573     padding: 3px;
 574 }
 575
 576
 577 #loading {
 578     z-index: 20;
 579     position: absolute;
 580     top: 0px;
 581     left: 0px;
 582     width: 100%;
 583     display: none;
 584     background: rgba(255,255,255,.5);
 585 }
 586
 587 #loading img {
 588     position: relative;
 589     top: 100px;
 590     margin: 0 auto;
 591     background: transparent;
 592     display: block;
 593 }
 594
 595 #loading a {
 596     display: block;
 597     position: relative;
 598     top: 100px;
 599     float: right;
 600     margin-right: 10px;
 601     -webkit-border-radius: 8px;
 602     -moz-border-radius: 8px;
 603     -o-border-radius: 8px;
 604     border-radius: 8px;
 605     background: #434A4D;
 606     text-decoration: none;
 607     padding: 3px 5px;
 608     color: #fff;
 609     font-size: 12px;
 610 }
 611
 612 #map_canvas {
 613     width: 100%;
 614     display: block;
 615     position: absolute;
 616     top: 45px;
 617     left: 0px;
 618     margin: 0px;
 619     padding: 0px;
 620     background-attachment: scroll;
 621 }
 622
 623 #preloader {
 624     display: none;
 625     background-image:
 626       url(right_arrow.png),
 627       url(stripe.png),
 628       url(twg_iphone_toolbar_icons/icon_arrow_left.png),
 629       url(twg_iphone_toolbar_icons/icon_circle_arrow_right.png),
 630       url(twg_iphone_toolbar_icons/icon_blog.png),
 631       url(twg_iphone_toolbar_icons/icon_users.png),
 632       url(twg_iphone_toolbar_icons/icon_post.png),
 633       url(twg_iphone_toolbar_icons/icon_flag.png),
 634       url(twg_iphone_toolbar_icons/icon_cancel.png),
 635       url(ajax-loader.gif);
 636 }
 637
 638 #reload_mark {
 639     position: absolute;
 640     width: 100%;
 641     height: 35px;
 642     font-size: 28px;
 643     display: none;
 644     top: -35px;
 645 }
 646
 647 #reload_mark div {
 648     background-color: transparent;
 649     background-position: top left;
 650     background-repeat: no-repeat;
 651     background-image: url(twg_iphone_toolbar_icons/icon_circle_arrow_right.png);
 652     padding-left: 30px;
 653     height: 35px;
 654     margin: 0px auto;
 655     width: 85px;
 656     color: #f0f0f0;
 657 }
 658
 659 .scroll_wrap {
 660     overflow: hidden;
 661     box-sizing: border-box;
 662     -webkit-box-sizing: border-box;
 663     -moz-box-sizing: border-box;
 664     height: 303px;
 665     width: 100%;
 666 }
 667
 668 #scroll {
 669     min-height: 101%;
 670     padding-bottom: 10px;
 671 }
 672
 673 .scrollbar {
 674     position: absolute;
 675     z-index: 10;
 676     width: 1px;
 677     height: 1px;
 678     border-width: 3px;
 679     -webkit-border-image: url(iscroll/scrollbar.png) 3;
 680     -moz-border-image: url(iscroll/scrollbar.png) 3;
 681     -o-border-image: url(iscroll/scrollbar.png) 3;
 682     border-image: url(iscroll/scrollbar.png) 3;
 683 }
 684
 685 .scrollbar.horizontal {
 686     bottom: 1px;
 687     left: 1px;
 688 }
 689
 690 .scrollbar.vertical {
 691     top: 1px;
 692     right: 1px;
 693 }
 694
 695 @media screen and (width: 480px) {
 696     /* iPhone landscape */
 697     body > * {
 698         height: 268px !important;
 699     }
 700 }
 701
 702 @media screen and (device-height: 800px) and (device-width: 480px) {
 703     /* Nexus One */
 704     body > * {
 705         height: 508px !important;
 706     }
 707 }