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