src/themes/tizen/common/jquery.mobile.listview.less

   1 /*
   2 * jQuery Mobile Framework
   3 * Copyright (c) jQuery Project
   4 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
   5 */
   6
   7 /*** less definitions ***/
   8
   9 @import "config.less";
  10
  11 // Bubble
  12 @list-li-bubble-font-size: 19 * @unit_base;
  13 @list-li-bubble-time-font-size: 11 * @unit_base;
  14 @list-li-bubble-date-font-size: 16 * @unit_base;
  15
  16 @list-li-sub-left-width: 187 * @unit_base;
  17 @list-li-main-right-padding: 187 * @unit_base;
  18
  19 //Email
  20 @list-li-email-top-padding: 8 * @unit_base;
  21 @list-li-email-subline-top-padding: 4 * @unit_base;
  22 @list-li-email-sub-line-height: 40 * @unit_base;
  23 @list-email-icon-width: 56 * @unit_base;
  24 @list-email-icon-height: 60 * @unit_base;
  25
  26 @list-email-icon-top-padding: 16 * @unit_base;
  27 @list-email-attach-icon-width: 40 * @unit_base;
  28 @list-email-attach-icon-height: 40 * @unit_base;
  29 @list-email-warning-icon-width: 30 * @unit_base;
  30 @list-email-warning-icon-height: 30 * @unit_base;
  31 @list-email-text-padding-left: 60 * @unit_base;
  32
  33 /************************/
  34
  35 .ui-listview {
  36         margin: 0;
  37         counter-reset: listnumbering;
  38
  39         border-top-color: @color_list_border_bottom;
  40
  41         li.ui-btn > .ui-btn-hastxt > .ui-btn-text.ui-btn-text-padding-right {
  42                 padding-right: 0 * @unit_base;  // Clear default button padding-right
  43         }
  44
  45         .ui-li {
  46                 border-left-width : 0px;
  47                 border-right-width : 0px;
  48
  49                 border-top-width: 0px;
  50
  51                 > .ui-btn-inner {
  52                         border-bottom-width: 1px;
  53                         border-bottom-style: solid;
  54                         border-bottom-color: @color_list_border_bottom;
  55                         margin-left : 13 * @unit_base;
  56                         margin-right : 13 * @unit_base;
  57                 }
  58         }
  59
  60         .ui-li-static {
  61                 background-color: @color_bg;
  62
  63                 border-bottom-width: 1px;
  64                 border-bottom-style: solid;
  65                 border-bottom-color: @color_list_border_bottom;
  66                 margin-left : 13 * @unit_base;
  67                 margin-right : 13 * @unit_base;
  68         }
  69
  70
  71          .ui-li:not(.ui-li-divider) {
  72                 &:not(.ui-li-static) {
  73                         min-height : 55 * @unit_base;
  74                 }
  75         }
  76
  77          .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
  78                 &:not(.ui-li-static) {
  79                         min-height : 64 * @unit_base;
  80                 }
  81         }
  82
  83         li.ui-btn-up-s, li.ui-btn-hover-s {
  84                 background: none;
  85                 background-color: @color_bg;
  86                 color:          @color_text;
  87         }
  88         li.ui-btn-down-s {
  89                 background: none;
  90                 background-color: @color_list_press;
  91                 color:          @color_text;
  92         }
  93         /* listview: fonts for li with a link */
  94         li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
  95         li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
  96                 color:          @color_list_main_text_unfocus;
  97         }
  98
  99         li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
 100                 color:          @color_list_main_text_focus;
 101         }
 102 }
 103
 104 .ui-content {
 105         .ui-listview {
 106                 margin-left: -8 * @unit_base;
 107                 margin-right: -8 * @unit_base;
 108                 padding-bottom: 1px;
 109
 110                 .ui-listview {
 111                         margin: 0;
 112                 }
 113         }
 114         .ui-listview-inset {
 115                 margin: 1em 0;
 116         }
 117 }
 118 .ui-listview,
 119 .ui-li,
 120 .ui-collapsible-heading {
 121         list-style:none;
 122         padding:0;
 123
 124         font-size : @list-font-size-main;
 125 }
 126 .ui-li,
 127 .ui-collapsible-heading,
 128 .ui-li.ui-field-contain {
 129         display: block;
 130         margin:0;
 131         position: relative;
 132         overflow: visible;
 133         text-align: left;
 134 }
 135 .ui-li {
 136         .ui-btn {       // NOTE: For vertical aligning buttons. It breaks collapsible size. Refactor it!
 137                 top: 50%;
 138                 margin-top: -0.8em;
 139         }
 140 }
 141 .ui-li,
 142 .ui-collapsible-heading,
 143 .ui-collapsible > .ui-collapsible-content,
 144 .ui-listview li {
 145         h3 {
 146                 margin-top      : 0px;
 147                 margin-bottom : 0px;
 148
 149                 font-size : @list-font-size-main;
 150                 font-weight : normal;
 151         }
 152         form {
 153                 display : inline-block;
 154         }
 155         .ui-btn-text {
 156                 position: relative;
 157                 a.ui-link-inherit {
 158                         .LESStext-ellipsis();
 159                 }
 160         }
 161         &:last-child,
 162         &.ui-field-contain:last-child {
 163                 border-bottom-width: 1px;
 164         }
 165         &>.ui-btn-inner,
 166         &.ui-collapsible-heading>.ui-collapsible-heading-toggle {
 167                 display: block;
 168                 position: relative;
 169                 padding: 0;
 170                 border-width:0;
 171         }
 172
 173         &>.ui-btn-inner.ui-btn-hastxt {
 174                 padding: 0px 0px;
 175         }
 176
 177         .ui-btn-inner a.ui-link-inherit,
 178         .ui-collapsible-heading-toggle > .ui-btn-inner,
 179         &>li,
 180         &.ui-li-static, {
 181                 padding-top : 15 * @unit_base;
 182                 padding-bottom : 15 * @unit_base;
 183                 display: block;
 184
 185                 white-space: normal;    // default: 1line
 186
 187                 border-left-width       : 0px;
 188                 border-right-width : 0px;
 189         }
 190
 191         .ui-btn-inner a.ui-link-inherit,
 192         .ui-collapsible-heading-toggle {
 193                 .LESStext-no-ellipsis();
 194         }
 195
 196         .ui-toggle-switch {
 197                 &:last-child {
 198                         top : 50%;
 199                         margin-top : -17 * @unit_base;
 200
 201                         display : inline-block;
 202                         position : absolute;
 203
 204                         right : 0px;
 205                 }
 206         }
 207
 208         [data-role="button"] {
 209                 &:last-child {
 210                         position : absolute;
 211                         right : 0px;
 212                 }
 213         }
 214
 215         .ui-radio,
 216         .ui-checkbox {
 217                 &:first-child{
 218                         position : absolute;
 219                         top      : 50%;
 220                         margin-top : -15 * @unit_base;
 221
 222                         left : -4 * @unit_base;
 223
 224                         width : 30 * @unit_base;
 225                         height : 30 * @unit_base;
 226
 227                         .ui-btn-inner {
 228                                 line-height : 20 * @unit_base;
 229
 230                                 color : transparent;
 231
 232                                 .ui-icon {
 233                                         left : 5 * @unit_base;
 234                                 }
 235                         }
 236
 237                         label.ui-btn-icon_only {
 238                                 top : 0px;
 239                                 margin-top : 0px;
 240                         }
 241                 }
 242         }
 243
 244         img.ui-li-bigicon {
 245                 position : absolute;
 246
 247                 width : 35 * @unit_base;
 248                 height : 35 * @unit_base;
 249
 250                 top : 50%;
 251                 margin-top : -18 * @unit_base;
 252
 253                 &:first-child {
 254                         left : 0px;
 255                 }
 256
 257                 &:nth-child(2) {
 258                         left : 36 * @unit_base;
 259                 }
 260
 261                 &:last-child {
 262                         right : 16 * @unit_base;
 263                 }
 264         }
 265
 266         .ui-li-color-bar + img.ui-li-bigicon:nth-child(2) {
 267                 left : 0px;
 268         }
 269
 270         .ui-li-color-bar {
 271                 position : absolute;
 272                 width  : 3 * @unit_base;
 273                 height : 100%;
 274
 275                 top : 0 * @unit_base;
 276                 left : -13 * @unit_base;
 277
 278                 background-color : rgba(0, 0, 0, 1);
 279         }
 280 }
 281
 282 li.ui-li-thumbnail-right {
 283         img.ui-li-bigicon.ui-li-thumb {
 284                 left : auto;
 285                 right : 0px;
 286
 287                 width : 51 * @unit_base;
 288                 height : 51 * @unit_base;
 289
 290                 margin-top : -25 * @unit_base;
 291         }
 292 }
 293
 294 .ui-li.ui-li-has-multiline {
 295         .ui-btn-inner a.ui-link-inherit,
 296         &.ui-li-static {
 297                 padding-top : 7 * @unit_base;
 298                 padding-bottom : 28 * @unit_base;
 299         }
 300
 301         a {
 302                 .LESStext-no-ellipsis();
 303                 padding-right : 16 * @unit_base; /* ellipsis for normal text */
 304         }
 305 }
 306
 307 /********************************************/
 308 /************  Add ellipsis *****************/
 309 /********************************************/
 310 .ui-li.ui-li-text-ellipsis {
 311         .ui-btn-inner a.ui-link-inherit {
 312                 .LESStext-ellipsis();
 313         }
 314
 315         a {
 316                 .LESStext-ellipsis();
 317         }
 318
 319         &.ui-li-static {
 320                 .LESStext-ellipsis();
 321         }
 322 }
 323
 324 /********************************************/
 325 /*************** Edit Field *****************/
 326 /********************************************/
 327 .ui-li {
 328         > input {
 329                 border-style : none;
 330                 border-width : 0px;
 331
 332                 outline-color : @color_list_bg;
 333                 font-size : 23 * @unit_base;
 334                 line-height : 1;
 335
 336                 padding-top : 0px;
 337                 padding-bottom : 0px;
 338                 color : @color_list_editfield;
 339         }
 340 }
 341
 342 /********************************************/
 343 /*************** Divider ********************/
 344 /********************************************/
 345
 346 .ui-listview li.ui-li-divider {
 347         background: @color_list_divider_bg;
 348         color:          @color_list_divider_text;
 349
 350         border-bottom-width : 0px;
 351         border-top-width : 0px;
 352
 353         cursor: default;
 354
 355         counter-reset: listnumbering;
 356         font-weight: bold;
 357
 358         height: 38 * @unit_base;
 359
 360         font-size : @list-font-size-divider;
 361         &>.ui-btn-inner>.ui-btn-text {  // For buttonMarkup-ed dividers
 362                 font-size : @list-font-size-divider;
 363         }
 364
 365         &.ui-btn {
 366                 top : 0px;
 367                 margin-top: 0 * @unit_base;
 368                 border-radius : 0px;
 369
 370                 font-size : @list-font-size-divider;
 371                 .ui-btn-inner.ui-btn-hastxt {
 372                         height : 100%;
 373                         padding-left : 0px;
 374                         .ui-btn-text {
 375                                 position : absolute;
 376
 377                                 top : 5 * @unit_base;
 378                                 height : 18 * @unit_base;
 379                                 padding-right : 10 * @unit_base;
 380                         }
 381                 }
 382         }
 383
 384         &:not(.ui-btn) {
 385                 margin-left : 12 * @unit_base;
 386                 margin-right : 12 * @unit_base;
 387         }
 388
 389         &>.ui-btn-text {
 390                 position : absolute;
 391
 392                 top : 5 * @unit_base;
 393                 height : 18 * @unit_base;
 394                 padding-right : 10 * @unit_base;
 395         }
 396
 397         &[data-style="dialogue"] {
 398                 height: 20 * @unit_base;
 399                 padding : 0px;
 400
 401                 padding-top : 20 * @unit_base;
 402                 padding-bottom : 0 * @unit_base;
 403                 padding-left : 10 * @unit_base;
 404
 405                 margin-left : 4 * @unit_base;
 406                 margin-right : 4 * @unit_base;
 407
 408
 409                 font-size : 16 * @unit_base;
 410                 font-weight : bold;
 411                 color : @color_dialogue_main_text;
 412                 background : @color_list_bg;
 413         }
 414
 415         &[data-style="check"] {
 416                 height: 38 * @unit_base;
 417                 padding-top : 0px;
 418                 padding-bottom : 0px;
 419
 420                 padding-left : 0px;
 421
 422                 label {
 423                         top : 0px;
 424                         margin : 0;
 425
 426                         .ui-btn-inner {
 427                                 z-index : 5;
 428                                 position : absolute;
 429                                 width : 32 * @unit_base;
 430                                 height : 32 * @unit_base;
 431                                 background : @color_list_bg;
 432                                 padding : 0;
 433                         }
 434                 }
 435                 .ui-btn-text {
 436                         padding-left : 37 * @unit_base;
 437                 }
 438         }
 439
 440         .ui-divider-normal-line {
 441                 display : inline-block;
 442                 position : absolute;
 443
 444                 top : 23 * @unit_base;
 445                 width : 100%;
 446                 height : 2 * @unit_base;
 447
 448                 background : @color_list_divider_line;
 449         }
 450
 451         &.ui-btn-down-s {
 452                 background : @color_list_divider_text;
 453                 color : @color_list_bg;
 454
 455                 .ui-divider-normal-line {
 456                         background : @color_list_bg;
 457                 }
 458
 459                 label {
 460                         > .ui-btn-inner {
 461                         background : @color_list_divider_text;
 462                         }
 463                 }
 464         }
 465
 466         + li.ui-li-dialogue {
 467                 border-top-left-radius : 3px;
 468                 border-top-right-radius : 3px;
 469         }
 470 }
 471
 472 .ui-divider-expand-div {
 473         position : absolute;
 474
 475         width : 98 * @unit_base;
 476         height : 42 * @unit_base;
 477         top : 10 * @unit_base;
 478         right : 0px;
 479
 480         border-left-width : 1px;
 481         border-left-style : solid;
 482         border-left-color : @color_list_divider_expand_div;
 483 }
 484
 485 .ui-li-has-thumb:not(.ui-li-thumbnail-right) {
 486         .ui-btn-inner a.ui-link-inherit,
 487         &.ui-li-static  {
 488                 padding-left: 45 * @unit_base;
 489         }
 490         .ui-li-text-sub {
 491                 padding-left: 45 * @unit_base;
 492                 padding-right: 0px; /* ellipsis for sub text */
 493         }
 494 }
 495
 496 .ui-li-has-checkbox,
 497 .ui-li-has-radio{
 498         .ui-btn-inner a.ui-link-inherit,
 499         &.ui-li-static  {
 500                 padding-left: 36 * @unit_base;
 501         }
 502         .ui-li-text-sub {
 503                 padding-left: 36 * @unit_base;
 504         }
 505 }
 506
 507 .ui-li-has-thumb.ui-li-has-checkbox,
 508 .ui-li-has-thumb.ui-li-has-radio {
 509         .ui-btn-inner a.ui-link-inherit,
 510         &.ui-li-static  {
 511                 padding-left: 78 * @unit_base;
 512         }
 513
 514         .ui-li-text-sub {
 515                 padding-left: 78 * @unit_base;
 516         }
 517 }
 518
 519 .ui-li.ui-li-has-right-circle-btn {
 520         .ui-btn-inner a {
 521                 padding-right : 48 * @unit_base;
 522         }
 523 }
 524
 525 .ui-li.ui-li-has-right-btn:not(.ui-swipe) {
 526         .ui-btn-inner a {
 527                 padding-right : 79 * @unit_base;
 528         }
 529 }
 530
 531 .ui-li.ui-li-thumbnail-right {
 532         .ui-btn-inner a {
 533                 padding-right : 52 * @unit_base;
 534         }
 535 }
 536 .ui-li.ui-li-static.ui-li-has-right-circle-btn {
 537         padding-right : 48 * @unit_base;
 538 }
 539
 540 .ui-li.ui-li-static.ui-li-has-right-btn:not(.ui-swipe) {
 541         padding-right : 79 * @unit_base;
 542 }
 543
 544 .ui-li.ui-li-static.ui-li-thumbnail-right {
 545         padding-right : 52 * @unit_base;
 546 }
 547
 548 .ui-li-has-icon {
 549         .ui-btn-inner a.ui-link-inherit,
 550         &.ui-li-static {
 551                 min-height: 20px;
 552                 padding-left: 40px;
 553         }
 554         .ui-li-text-sub {
 555                 padding-left: 40px;
 556         }
 557 }
 558
 559 .ui-li-heading {
 560         font-size: 16px;
 561         font-weight: bold;
 562         display: block;
 563         margin: .6em 0;
 564         .LESStext-ellipsis();
 565 }
 566
 567 .ui-li-thumb,
 568 .ui-li-icon {
 569         position: absolute;
 570         left: 1px;
 571         top: 0;
 572         max-height: @list-bigicon-size2;
 573         max-width: @list-bigicon-size2;
 574 }
 575
 576 .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
 577         border-top: 0px;
 578 }
 579
 580 .ui-li-sub,
 581 .ui-li-sub-setting {
 582         float: right;
 583         text-align: right;
 584         font-size: 16 * @unit_base;
 585         margin: .3em 0;
 586 }
 587
 588 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 589 /* ~~~~~~~~~~~~~~              NEW   LIST   STYLE                   ~~~~~~~~~ */
 590 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 591 .ui-li-text-sub {
 592         float: right;
 593         text-align: right;
 594         font-size: 16 * @unit_base;
 595         color: @color_list_sub_text_default;
 596
 597         position : absolute;
 598         right : 0px;
 599         top : 20 * @unit_base;
 600
 601         width   : 95%;
 602         .LESStext-ellipsis();
 603
 604         > img {
 605                 position : relative;
 606                 width: @list-smallicon-size;
 607                 height: @list-smallicon-size;
 608                 margin: 0 @list-li-padding-horizontal 0 @list-li-padding-horizontal;
 609         }
 610 }
 611
 612 .ui-li-text-sub2 {
 613         float: right;
 614         text-align: right;
 615         font-size: 16 * @unit_base;
 616         color: @color_list_sub_text_default;
 617
 618         position : absolute;
 619         right : 0px;
 620         top : 12 * @unit_base;
 621
 622         width : 60%;
 623         .LESStext-ellipsis();
 624
 625         > img {
 626                 width: @list-smallicon-size;
 627                 height: @list-smallicon-size;
 628                 margin: 0 0 0 @list-li-padding-horizontal;
 629         }
 630 }
 631 /*
 632 li:not(.ui-li-has-multiline) .ui-li-text-sub {
 633         position : absolute;
 634         right : 16 * @unit_base;
 635         top: 22 * @unit_base;
 636         margin-top: 0px;
 637 }*/
 638
 639 .ui-li-has-multiline .ui-li-text-sub {
 640         position : absolute;
 641
 642         text-align: left;
 643         right : auto;
 644         left : 0px;
 645         top: 35 * @unit_base;
 646         margin-top: 0px;
 647
 648         width : 90%;
 649         .LESStext-ellipsis();
 650 }
 651
 652 .ui-li-has-multiline.ui-li-has-right-btn {
 653         .ui-btn-inner a {
 654                 .ui-li-text-sub {
 655                         width : 74%;
 656                 }
 657         }
 658 }
 659
 660 .ui-li-has-multiline.ui-li-has-right-btn.ui-li-has-thumb {
 661         .ui-btn-inner a {
 662                 .ui-li-text-sub {
 663                         width : 64%;
 664                 }
 665         }
 666 }
 667
 668 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn {
 669         .ui-li-text-sub {
 670                 width : 74%;
 671         }
 672 }
 673
 674 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn.ui-li-has-thumb {
 675         .ui-li-text-sub {
 676                 width : 64%;
 677         }
 678 }
 679
 680 .ui-li-icon-sub-right,
 681 .ui-li-icon-sub {
 682         position: absolute;
 683         left: auto;
 684         width: @list-smallicon-size;
 685         height: @list-smallicon-size;
 686         margin: 0 0;
 687 }
 688 .ui-li-icon-sub-right {
 689         right : 8 * @unit_base;
 690 }
 691
 692
 693
 694 // =========
 695 // Dialogue
 696 // =========
 697 .ui-listview {
 698         li.ui-li-dialogue {
 699                 margin-left: 4 * @unit_base;
 700                 margin-right : 4 * @unit_base;
 701                 padding-left : 10 * @unit_base;
 702                 padding-right : 10 * @unit_base;
 703
 704                 border-style : solid;
 705                 border-color : @color_dialogue_border_right;
 706                 border-width : 1px;
 707                 border-top-width : 0px;
 708
 709                 > .ui-btn-inner {
 710                         margin-left : 0px;
 711                         margin-right : 0px;
 712                         border-bottom-width : 0px;
 713                 }
 714
 715                 &:first-child {
 716                         border-top-width : 1px;
 717                         border-top-left-radius : 3px;
 718                         border-top-right-radius : 3px;
 719                 }
 720                 &:last-child {
 721                         border-bottom-left-radius : 3px;
 722                         border-bottom-right-radius : 3px;
 723                 }
 724
 725                 > img {
 726                         margin-left : 6 * @unit_base;
 727                 }
 728
 729                 [data-role="button"]:last-child {
 730                         margin-right : 10 * @unit_base;
 731                 }
 732
 733                 .ui-link-inherit {
 734                         >.ui-btn {
 735                                 margin-right : 0px;
 736                         }
 737                 }
 738
 739                 &.ui-li-static {
 740                         .ui-li-text-sub, .ui-toggle-switch {
 741                                 right : 10 * @unit_base;
 742                         }
 743                         &.ui-li-has-checkbox,
 744                         &.ui-li-has-radio {
 745                                 padding-left : 36 * @unit_base;
 746                         }
 747                         .ui-checkbox, .ui-radio {
 748                                 left : 0px;
 749                         }
 750                 }
 751                 &.ui-li-has-multiline.ui-li-static {
 752                         .ui-li-text-sub {
 753                                 padding-left : 10 * @unit_base;
 754                         }
 755                         .ui-li-text-sub2 {
 756                                 padding-right : 10 * @unit_base;
 757                         }
 758                         &.ui-li-has-checkbox,
 759                         &.ui-li-has-radio {
 760                                 .ui-li-text-sub {
 761                                         padding-left : 42 * @unit_base;
 762                                 }
 763                         }
 764                 }
 765         }
 766
 767         li.ui-li-divider + .ui-li-dialogue {
 768                 border-top-width : 1px;
 769         }
 770
 771         &> li.ui-li-dialogue.ui-body-s,
 772         &> li.ui-li-dialogue.ui-btn-hover-up-s:not(.ui-btn-down-s),
 773         &> li.ui-li-dialogue.ui-btn-up-s {
 774                 &:not(.ui-li-expanded){
 775                         background : @color_list_dialogue_bg;
 776                 }
 777         }
 778         &> li.ui-li-dialogue.ui-li-expanded {
 779                 padding-left : 26 * @unit_base;
 780                 background : @color_list_expanded_bg;
 781         }
 782
 783         &> li.ui-li-dialogue.ui-li-divider {
 784                 height: 32 * @unit_base;
 785                 padding : 0px;
 786         }
 787
 788         &> li.ui-li-group-title {
 789                 padding-top : 32 * @unit_base;
 790         }
 791
 792         &> li.ui-li-group-title span {
 793                 padding-left : 16 * @unit_base;
 794         }
 795
 796         &> li.ui-li-dialogue-divider {
 797                 padding-top : 20 * @unit_base;
 798                 padding-bottom : 0 * @unit_base;
 799                 padding-left : 10 * @unit_base;
 800
 801                 margin-left : 4 * @unit_base;
 802                 margin-right : 4 * @unit_base;
 803
 804                 background : @color_list_dialogue_bg;
 805                 font-size : 16 * @unit_base;
 806                 font-weight : bold;
 807                 color : @color_dialogue_main_text;
 808         }
 809 }
 810
 811 // Edit list mode
 812 .ui-listview {
 813         li.ui-li-dialogue-edit{
 814                 padding-left : 116 * @unit_base;
 815                 padding-top : 12 * @unit_base;
 816                 padding-bottom : 12 * @unit_base;
 817
 818                 .ui-edit-title {
 819                         position : absolute;
 820                         left : 10 * @unit_base;
 821                         width : 91 * @unit_base;
 822                         padding-right : 8 * @unit_base;
 823                         display : inline-block;
 824                         top : 50%;
 825                         margin-top : -13 * @unit_base;
 826
 827                         border-right-color : rgba(185, 184, 178, 1);
 828                         border-right-width : 1px;
 829                         border-right-style : solid;
 830                 }
 831
 832                 input {
 833                         font-size : 22 * @unit_base;
 834                         background : transparent;
 835                         outline-color : transparent;
 836                         width : 100%;
 837                         padding-left : 0px;
 838                         padding-right : 0px;
 839                 }
 840         }
 841
 842         > .ui-li.ui-li-dialogue-edit.ui-li-has-right-btn {
 843                 padding-right : 110 * @unit_base;
 844         }
 845 }
 846
 847 // =========
 848 // bubble li
 849 // =========
 850 .ui-listview {
 851         .ui-li-static {
 852                 &.ui-li-bubble-receive,
 853                 &.ui-li-bubble-left {
 854                         color: @color_list_bubble_receive_text;
 855                         > .ui-li-bubble-time {
 856                                 text-align: left;
 857                                 color: @color_list_bubble_time_receive_text;
 858                         }
 859                 }
 860                 &.ui-li-bubble-sent,
 861                 &.ui-li-bubble-right {
 862                         color: @color_list_bubble_sent_text;
 863                         > .ui-li-bubble-time {
 864                                 text-align: right;
 865                                 color: @color_list_bubble_time_sent_text;
 866                         }
 867                 }
 868                 &.ui-li-bubble-sos {
 869                         color: @color_list_bubble_sos_text;
 870                         > .ui-li-bubble-time {
 871                                 color: @color_list_bubble_time_sos_text;
 872                         }
 873                 }
 874                 &.ui-li-bubble-date {
 875                         background-color: @color_list_bubble_date_bg;
 876                         color: @color_list_bubble_date_text;
 877                         font-style: italic;
 878                 }
 879         }
 880
 881         span.ui-li-bubble-time {
 882                 font-weight: bold;
 883                 width: 70 * @unit_base;
 884         }
 885         // Common
 886         .ui-li-bubble-receive,
 887         .ui-li-bubble-left,
 888         .ui-li-bubble-sent,
 889         .ui-li-bubble-right,
 890         .ui-li-bubble-sos {
 891                 display: inline-block;
 892                 background-clip: padding-box;
 893                 max-width: 100%;
 894                 word-wrap: break-word;
 895                 font-size: @list-li-bubble-font-size;
 896                 p, span {
 897                         font-size: @list-li-bubble-font-size;
 898                 }
 899                 img {
 900                         position: relative;
 901                         min-width: 160 * @unit_base;
 902                         min-height: 160 * @unit_base;
 903                 }
 904         }
 905         .ui-li-bubble-receive,
 906         .ui-li-bubble-left {
 907                 //float: left;
 908                 margin-left: 0px;
 909                 margin-right: 100 * @unit_base;
 910                 border-image-source: url(images/00_messagebubble_bg_receive.9.png);
 911                 border-image-slice: 60 23 20 57 fill;
 912                 border-image-width: auto;
 913                 padding: 9px 14px 21px 48px;
 914
 915                 > .ui-li-bubble-time {
 916                         position: absolute;
 917                         display: inline-block;
 918                         bottom: 8 * @unit_base;
 919                         left: 100%;
 920                         font-size: @list-li-bubble-time-font-size;
 921                 }
 922         }
 923         .ui-li-bubble-sent,
 924         .ui-li-bubble-right {
 925                 margin-left: 100 * @unit_base;
 926                 margin-right: 0px;
 927                 border-image-source: url(images/00_messagebubble_bg_sent.9.png);
 928                 border-image-slice: 55 47 20 13 fill;
 929                 border-image-width: auto;
 930                 padding: 9px 47px 20px 13px;
 931
 932                 > .ui-li-bubble-time {
 933                         position: absolute;
 934                         display: inline-block;
 935                         bottom: 8 * @unit_base;
 936                         right: 100%;
 937                         font-size: @list-li-bubble-time-font-size;
 938                 }
 939         }
 940         .ui-li-bubble-date {
 941                 float: left;
 942                 width: 100%;
 943                 height: 24 * @unit_base;
 944                 background-image: url(images/00_messagebubble_date_bg.png);
 945                 background-repeat: repeat-x;
 946                 background-position: center center;
 947                 font-size: @list-li-bubble-date-font-size;
 948                 margin: 20 * @unit_base 6 * @unit_base;
 949                 border: 0px none red;
 950                 padding: 0 0;
 951                 padding-top: 0.5em;     // vertical text alignment to center
 952                 text-align: center;
 953                 & * {
 954                         display: inline-block;
 955                         background-color: @color_bg;
 956                         padding-left: 0.5em;
 957                         padding-right: 0.5em;
 958                 }
 959         }
 960 }
 961
 962 @-webkit-keyframes addliitem {
 963         from {
 964                 -webkit-transform:      scale(0.5);
 965                 -moz-transform: scale(0.5);
 966                 opacity:        0;
 967         }
 968         to {
 969                 -webkit-transform:      scale(1);
 970                 -moz-transform: scale(1);
 971                 opacity:        1;
 972         }
 973 }
 974 .addli
 975 {
 976         -webkit-animation-name: addliitem;
 977         -moz-animation-name: addliitem;
 978         -webkit-animation-duration:     0.5s;
 979         -moz-animation-duration: 0.5s;
 980         -webkit-transition-timing-function:     linear;
 981         -moz-transition-timing-function:        linear;
 982 }
 983
 984 @-webkit-keyframes removeliitem {
 985         from {
 986                 -webkit-transform: scale(1);
 987                 -moz-transform: scale(1);
 988                 opacity : 1;
 989         }
 990         to {
 991                 -webkit-transform: scale(0.5);
 992                 -moz-transform: scale(0.5);
 993                 opacity : 0;
 994         }
 995 }
 996 .removeli
 997 {
 998         -webkit-animation-name: removeliitem;
 999         -moz-animation-name: removeliitem;
1000         -webkit-animation-duration:     0.5s;
1001         -moz-animation-duration:        0.5s;
1002         -webkit-transition-timing-function:     linear;
1003         -moz-transition-timing-function:        linear;
1004 }