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     min-height: 420px !important;
  21     background: url(iui/pinstripes.png) #c5ccd3;
  22 }
  23
  24 body > .current {
  25     display: block !important;
  26 }
  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: url(iui/toolbar.png) #6d84a2 repeat-x;
 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: 8px;
 148     right: 6px;
 149     margin: 0;
 150     border-width: 0 5px;
 151     padding: 0 3px;
 152     width: auto;
 153     height: 30px;
 154     line-height: 30px;
 155     font-family: inherit;
 156     font-size: 12px;
 157     font-weight: bold;
 158     color: #fff;
 159     text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0;
 160     text-overflow: ellipsis;
 161     text-decoration: none;
 162     white-space: nowrap;
 163     background: none;
 164     -webkit-border-image: url(iui/toolButton.png) 0 5 0 5;
 165     -moz-border-image: url(iui/toolButton.png) 0 5 0 5;
 166     -o-border-image: url(iui/toolButton.png) 0 5 0 5;
 167     border-image: url(iui/toolButton.png) 0 5 0 5;
 168 }
 169
 170 .whiteButton {
 171     display: block;
 172     border-width: 0 12px;
 173     padding: 10px;
 174     text-align: center;
 175     font-size: 20px;
 176     font-weight: bold;
 177     text-decoration: inherit;
 178     color: inherit;
 179 }
 180
 181 .whiteButton {
 182     -webkit-border-image: url(iui/whiteButton.png) 0 12 0 12;
 183     -moz-border-image: url(iui/whiteButton.png) 0 12 0 12;
 184     -o-border-image: url(iui/whiteButton.png) 0 12 0 12;
 185     border-image: url(iui/whiteButton.png) 0 12 0 12;
 186     text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
 187 }
 188
 189 ul {
 190     color: black;
 191     background: #fff;
 192     border: 1px solid #B4B4B4;
 193     font: bold 17px Helvetica;
 194     padding: 0;
 195     margin: 15px 10px;
 196     -webkit-border-radius: 8px;
 197     -moz-border-radius: 8px;
 198     -o-border-radius: 8px;
 199     border-radius: 8px;
 200 }
 201
 202 ul li {
 203     color: #666;
 204     border-top: 1px solid #B4B4B4;
 205     list-style-type: none;
 206     padding: 10px 10px 10px 10px;
 207 }
 208
 209 li:first-child, li:first-child a {
 210     border-top: 0;
 211     -webkit-border-top-left-radius: 8px;
 212     -moz-border-radius-topleft: 8px;
 213     -o-border-top-left-radius: 8px;
 214     border-top-left-radius: 8px;
 215     -webkit-border-top-right-radius: 8px;
 216     -moz-border-radius-topright: 8px;
 217     -o-border-top-right-radius: 8px;
 218     border-top-right-radius: 8px;
 219 }
 220
 221 li:last-child, li:last-child a {
 222     -webkit-border-bottom-left-radius: 8px;
 223     -moz-border-radius-bottomleft: 8px;
 224     -o-border-bottom-left-radius: 8px;
 225     border-bottom-left-radius: 8px;
 226     -webkit-border-bottom-right-radius: 8px;
 227     -moz-border-radius-bottomright: 8px;
 228     -o-border-bottom-right-radius: 8px;
 229     border-bottom-right-radius: 8px;
 230 }
 231
 232 ul li.arrow {
 233     background-image: url(iui/chevron.png);
 234     background-position: right center;
 235     background-repeat: no-repeat;
 236 }
 237
 238 ul li a {
 239     color: #000;
 240     text-decoration: none;
 241     text-overflow: ellipsis;
 242     white-space: nowrap;
 243     overflow: hidden;
 244     display: block;
 245     padding: 12px 10px 12px 10px;
 246     margin: -10px;
 247 }
 248
 249 .edgetoedge {
 250     margin: 0;
 251     padding: 0;
 252     background-color: #fff;
 253 }
 254
 255 .edgetoedge ul {
 256     -webkit-border-radius: 0;
 257     -moz-border-radius: 0;
 258     -o-border-radius: 0;
 259     border-radius: 0;
 260     margin: 0;
 261     border-left: 0;
 262     border-right: 0;
 263     border-top: 0;
 264 }
 265
 266 .edgetoedge li {
 267     -webkit-border-radius: 0;
 268     -moz-border-radius: 0;
 269     -o-border-radius: 0;
 270     border-radius: 0;
 271 }
 272
 273 .edgetoedge ul li:first-child,
 274 .edgetoedge ul li:first-child a,
 275 .edgetoedge ul li:last-child,
 276 .edgetoedge ul li:last-child a {
 277     -webkit-border-radius: 0;
 278     -moz-border-radius: 0;
 279     -o-border-radius: 0;
 280     border-radius: 0;
 281 }
 282
 283 .edgetoedge ul li small {
 284     font-size: 16px;
 285     line-height: 28px;
 286 }
 287
 288 .edgetoedge li em {
 289     font-weight: normal;
 290     font-style: normal;
 291 }
 292
 293 ul li small {
 294     color: #369;
 295     font: 17px Helvetica;
 296     text-align: right;
 297     text-overflow: ellipsis;
 298     white-space: nowrap;
 299     overflow: hidden;
 300     display: block;
 301     width: 23%;
 302     float: right;
 303     padding: 3px 0px;
 304 }
 305
 306 ul li.arrow small {
 307     padding: 0 15px;
 308 }
 309
 310 ul li small.counter {
 311     font-size: 17px !important;
 312     line-height: 13px !important;
 313     font-weight: bold;
 314     background: rgb(154,159,170);
 315     color: #fff;
 316     -webkit-border-radius: 11px;
 317     -moz-border-radius: 11px;
 318     -o-border-radius: 11px;
 319     border-radius: 11px;
 320     padding: 4px 10px 5px 10px;
 321     display: inline !important;
 322     width: auto;
 323     margin-top: -22px;
 324 }
 325
 326 ul li.arrow small.counter {
 327     margin-right: 15px;
 328 }
 329
 330
 331 ul li {
 332     position: relative;
 333     margin: 0;
 334     border-bottom: 1px solid #E0E0E0;
 335     padding: 8px 0 8px 10px;
 336     font-size: 20px;
 337     font-weight: bold;
 338     list-style: none;
 339     word-break: break-all;
 340 }
 341
 342 ul li a {
 343     display: block;
 344     margin: -8px 0 -8px -10px;
 345     padding: 8px 32px 8px 10px;
 346     text-decoration: none;
 347     color: inherit;
 348     background: url(iui/chevron.png) no-repeat right center;
 349     white-space: normal;
 350     -webkit-tap-highlight-color: rgba(160,160,160,0.70);
 351 }
 352
 353 ul li.message {
 354     padding: 4px 0 4px 10px;
 355     font-size: 16px;
 356     font-weight: normal;
 357     color: black;
 358 }
 359
 360 ul li.messagenew {
 361     padding: 4px 0 4px 10px;
 362     font-size: 16px;
 363     font-weight: normal;
 364     background: #aaccff;
 365     color: black;
 366 }
 367
 368 ul li.sep {
 369     background: #fff;
 370     color: #7b9ba5;
 371     font-size: 14px;
 372     font-weight: normal;
 373     padding: 1px 10px;
 374 }
 375
 376 ul li.group {
 377     background: #7b9ba5;
 378     font-size: 16px;
 379     padding: 0 0 0 10px;
 380     height: 20px;
 381 }
 382
 383 ul li.group a {
 384     padding: 0 0 8px 8px;
 385     height: 20px;
 386     display: inline;
 387     background-image: none;
 388 }
 389
 390 ul li a.inline {
 391     color: #00f;
 392     display: inline;
 393 }
 394
 395 ul.no_arrow li a {
 396     background-image: none;
 397 }
 398
 399 span.nick {
 400       margin: 0 5px 0 0;
 401       padding: 3px 3px 3px 5px;
 402       line-height: 30px;
 403       font-weight: bold;
 404       color: #fff;
 405       text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
 406       text-overflow: ellipsis;
 407       -webkit-border-radius: 8px;
 408       -moz-border-radius: 8px;
 409       -o-border-radius: 8px;
 410       border-radius: 8px;
 411       background: #434A4D;
 412 }
 413
 414 /* input form */
 415 form.edit {
 416     padding: 0px 10px;
 417 }
 418
 419 form.edit label {
 420     position: absolute;
 421     margin-top: 10px;
 422     margin-left: 6px;
 423     font-size: 14px;
 424     color: #666;
 425 }
 426
 427 form.edit button {
 428     margin:0 auto;
 429     font-size: 14px;
 430     width: 100%;
 431 }
 432
 433 form.edit.bottom {
 434     box-sizing: border-box;
 435     -webkit-box-sizing: border-box;
 436     -moz-box-sizing: border-box;
 437     position: absolute;
 438     left: 0px;
 439     bottom: 22px;
 440     width: 100%;
 441     height: 47px;
 442 }
 443
 444 form.edit.bottom label {
 445     top: 10px;
 446 }
 447
 448 form.edit.bottom input[type="text"] {
 449     margin-top: 8px;
 450 }
 451
 452 input[type="text"], input[type="password"] {
 453     box-sizing: border-box;
 454     -webkit-box-sizing: border-box;
 455     -moz-box-sizing: border-box;
 456     width: 100%;
 457     font-size: 16px;
 458     font-weight: normal;
 459     padding-left: 32px;
 460     background: white;
 461     color: #777;
 462     display: block;
 463     -webkit-border-radius: 8px;
 464     -moz-border-radius: 8px;
 465     -o-border-radius: 8px;
 466     border-radius: 8px;
 467     padding: 8px;
 468     margin: 5px auto;
 469     border: 1px solid #b4b4b4;
 470 }
 471
 472 /* floating menu */
 473 .floaty {
 474     position: absolute;
 475     top: 50px;
 476     left: 0px;
 477     display: none;
 478     background: transparent;
 479     width: 100%;
 480 }
 481
 482 .floaty_in {
 483     -webkit-border-radius: 10px;
 484     -moz-border-radius: 10px;
 485     -o-border-radius: 10px;
 486     border-radius: 10px;
 487     -webkit-box-shadow: rgba(0,0,0, .5) 0px 1px 1px;
 488     -moz-box-shadow: rgba(0,0,0, .5) 0px 1px 1px;
 489     box-shadow: rgba(0,0,0, .5) 0px 1px 1px;
 490     position: relative;
 491     width: 98%;
 492     margin: 0px auto;
 493     padding: 5px 0px;
 494     background: rgba(255,255,255,.7);
 495     color: #000;
 496 }
 497
 498 /* info */
 499 .info {
 500     background: #dce1eb;
 501     font-size: 12px;
 502     line-height: 12px;
 503     text-align: center;
 504     text-shadow: rgba(255,255,255,.8) 0 1px 0;
 505     color: rgb(76, 86, 108);
 506     border-top: 1px solid rgba(76, 86, 108, .3);
 507     font-weight: bold;
 508     margin-top: 5px;
 509     padding: 3px;
 510 }
 511
 512 .info.bottom {
 513     box-sizing: border-box;
 514     -webkit-box-sizing: border-box;
 515     -moz-box-sizing: border-box;
 516     position: absolute;
 517     left: 0px;
 518     bottom: 0px;
 519     width: 100%;
 520     height: 20px;
 521 }
 522
 523 /* operation icon */
 524 .icon {
 525     -webkit-border-radius: 5px;
 526     -moz-border-radius: 5px;
 527     -o-border-radius: 5px;
 528     border-radius: 5px;
 529     -webkit-box-shadow: 3px 3px 3px gray;
 530     -moz-box-shadow: 3px 3px 3px gray;
 531     box-shadow: 3px 3px 3px gray;
 532     background: #6D84A2;
 533     color: #fff;
 534     width: 48px;
 535     height: 48px;
 536     align: center;
 537     font-size: 10px;
 538     text-align: center;
 539     margin: 0px auto;
 540 }
 541
 542 .icon .nav {
 543     margin: 0px auto;
 544 }
 545
 546 .icon img {
 547     margin: 0px auto;
 548     width: 30px;
 549     height: 30px;
 550     display: block;
 551     border: none;
 552 }
 553
 554 .icon_box {
 555     width: 100%;
 556 }
 557
 558 .icon_box a {
 559     padding: 3px;
 560 }
 561
 562
 563
 564 #password {
 565     padding-left: 76px;
 566 }
 567
 568 #m_c {
 569     padding-left: 86px;
 570 }
 571
 572 #m {
 573     padding-left: 34px;
 574 }
 575
 576 #loading {
 577     z-index: 20;
 578     position: absolute;
 579     top: 0px;
 580     left: 0px;
 581     width: 100%;
 582     display: none;
 583     background: rgba(255,255,255,.5);
 584 }
 585
 586 #loading img {
 587     position: relative;
 588     top: 100px;
 589     margin: 0 auto;
 590     background: transparent;
 591     display: block;
 592 }
 593
 594 #loading a {
 595     display: block;
 596     position: relative;
 597     top: 100px;
 598     float: right;
 599     margin-right: 10px;
 600     -webkit-border-radius: 8px;
 601     -moz-border-radius: 8px;
 602     -o-border-radius: 8px;
 603     border-radius: 8px;
 604     background: #434A4D;
 605     text-decoration: none;
 606     padding: 3px 5px;
 607     color: #fff;
 608     font-size: 12px;
 609 }
 610
 611 #map_canvas {
 612     width: 100%;
 613     display: block;
 614     position: absolute;
 615     top: 45px;
 616     left: 0px;
 617     margin: 0px;
 618     padding: 0px;
 619     background-attachment: scroll;
 620 }
 621
 622 #preloader {
 623     display: none;
 624     background-image:
 625       url(iui/chevron.png),
 626       url(iui/pinstripes.png),
 627       url(iui/toolbar.png),
 628       url(iui/toolButton.png),
 629       url(twg_iphone_toolbar_icons/icon_arrow_left.png),
 630       url(twg_iphone_toolbar_icons/icon_circle_arrow_right.png),
 631       url(twg_iphone_toolbar_icons/icon_blog.png),
 632       url(twg_iphone_toolbar_icons/icon_users.png),
 633       url(twg_iphone_toolbar_icons/icon_post.png),
 634       url(twg_iphone_toolbar_icons/icon_flag.png),
 635       url(twg_iphone_toolbar_icons/icon_cancel.png),
 636       url(ajax-loader.gif);
 637 }
 638
 639 #reload_mark {
 640     position: absolute;
 641     width: 100%;
 642     height: 35px;
 643     font-size: 28px;
 644     display: none;
 645     top: -35px;
 646 }
 647
 648 #reload_mark div {
 649     background-color: transparent;
 650     background-position: top left;
 651     background-repeat: no-repeat;
 652     background-image: url(twg_iphone_toolbar_icons/icon_circle_arrow_right.png);
 653     padding-left: 30px;
 654     height: 35px;
 655     margin: 0px auto;
 656     width: 85px;
 657     color: #f0f0f0;
 658 }
 659
 660 .scroll_wrap {
 661     height: 0px;
 662     overflow: hidden;
 663     box-sizing: border-box;
 664     -webkit-box-sizing: border-box;
 665     -moz-box-sizing: border-box;
 666     width: 100%;
 667 }
 668
 669 .scrollbar {
 670     position: absolute;
 671     z-index: 10;
 672     width: 1px;
 673     height: 1px;
 674     border-width: 3px;
 675     -webkit-border-image: url(iscroll/scrollbar.png) 3;
 676 }
 677
 678 .scrollbar.horizontal {
 679     bottom: 1px;
 680     left: 1px;
 681 }
 682
 683 .scrollbar.vertical {
 684     top: 1px;
 685     right: 1px;
 686 }