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

   1 @import "config.less";
   2
   3 /* Resource color mapping table
   4
   5 @color_popup_title_bg:  popup_title_bg.png
   6 @color_popup_text_bg:   popup_bg.png
   7 @color_popup_button_bg: popup_button_bg.png
   8 @color_popup_font:              Popup title & default
   9 @color_popup_text_font: Popup text
  10
  11 */
  12
  13
  14 @popupwindow-text-padding-vert: 22 * @unit_base;
  15 @popupwindow-text-padding-hori: 16 * @unit_base;
  16
  17
  18 .ui-popupwindow-screen {
  19     background: #000000;
  20     opacity: 0;
  21         position: absolute;
  22         top: 0;
  23         left: 0;
  24         width: 100%;
  25         height: 100%;
  26         z-index: @z_base_popup;
  27 }
  28
  29 .ui-popupwindow {
  30
  31         position: absolute;
  32         z-index: (@z_base_popup + 1) !important;
  33         color: @color_popup_font;
  34
  35         //FIXME : remove background & padding if there is no padding.
  36         padding: 2*@unit_base 2*@unit_base;
  37         background:             @color_popup_text_bg;
  38
  39         // --------- common style in popup window ------------- //
  40         .popup-title {
  41                 width: 100%;
  42                 height: 100%;
  43                 font-size: @font_size_popup_basic_style_title;
  44                 background: @color_popup_title_bg;
  45                 p {
  46                         margin: 0*@unit_base 0*@unit_base;
  47                         padding: 13*@unit_base 0*@unit_base;
  48                 }
  49         }
  50
  51         .popup-text {
  52                 width: 100%;
  53                 color: @color_popup_text_font;
  54                 font-size: @font_size_popup_info_style;
  55                 background: @color_popup_text_bg;
  56                 p {
  57                         text-align: center;
  58                         padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
  59                 }
  60         }
  61         // ----------------------------------------------------- //
  62
  63         .center_info {
  64
  65                 .LESSdisplaybox();
  66                 .LESSbox-orient(vertical);
  67                 .LESSbox-align(center);
  68                 .LESSbox-pack(center);
  69
  70                 // .popup-text
  71         }
  72
  73         .center_title {
  74                 .LESSdisplaybox();
  75                 .LESSbox-orient(vertical);
  76                 .LESSbox-align(center);
  77                 .LESSbox-pack(center);
  78
  79             text-align: center;
  80
  81                 // .popup-title
  82                 // .popup-text
  83         }
  84
  85         .center_basic_1btn {
  86
  87                 .LESSdisplaybox();
  88                 .LESSbox-orient(vertical);
  89                 .LESSbox-align(center);
  90                 .LESSbox-pack(center);
  91
  92             text-align: center;
  93
  94                 // .popup-text
  95
  96                 .popup-button-bg {
  97                         font-size: @font_size_popup_button_text;
  98                         background: @color_popup_button_bg;
  99                         width: 100%;
 100                         padding-top: 11*@unit_base;
 101                         padding-bottom: 11*@unit_base;
 102                         vertical-align: middle;
 103
 104                         .ui-btn {
 105                                 width: 402*@unit_base;
 106                                 height: 74*@unit_base;
 107                                 margin:auto;
 108
 109                         }
 110                 }
 111         }
 112         .center_basic_2btn {
 113
 114                 .LESSdisplaybox();
 115                 .LESSbox-orient(vertical);
 116                 .LESSbox-align(center);
 117                 .LESSbox-pack(center);
 118
 119             text-align: center;
 120
 121                 // .popup-text
 122
 123                 .popup-button-bg {
 124                         font-size: @font_size_popup_button_text;
 125                         background: @color_popup_button_bg;
 126                         width: 100%;
 127                         padding-top: 11*@unit_base;
 128                         padding-bottom: 11*@unit_base;
 129                         vertical-align: middle;
 130
 131                         .ui-btn {
 132                                 width: 274*@unit_base;
 133                                 height: 74*@unit_base;
 134                                 margin-top: 0*@unit_base;
 135                                 margin-bottom: 0*@unit_base;
 136                                 margin-left: 5*@unit_base;
 137                                 margin-right: 5*@unit_base;
 138
 139                                 display: inline-block;
 140                         }
 141                 }
 142         }
 143         .center_basic_3btn {
 144
 145                 .LESSdisplaybox();
 146                 .LESSbox-orient(vertical);
 147                 .LESSbox-align(center);
 148                 .LESSbox-pack(center);
 149
 150             text-align: center;
 151
 152                 // .popup-text
 153
 154                 .popup-button-bg {
 155                         font-size: @font_size_popup_button_text;
 156                         background: @color_popup_button_bg;
 157                         width: 100%;
 158                         padding-top: 11*@unit_base;
 159                         padding-bottom: 11*@unit_base;
 160                         vertical-align: middle;
 161
 162                         .ui-btn {
 163                                 width: 186*@unit_base;
 164                                 height: 74*@unit_base;
 165                                 margin-top: 0*@unit_base;
 166                                 margin-bottom: 0*@unit_base;
 167                                 margin-left: 5*@unit_base;
 168                                 margin-right: 5*@unit_base;
 169
 170                                 display: inline-block;
 171                         }
 172                 }
 173         }
 174         .center_title_1btn {
 175
 176                 .LESSdisplaybox();
 177                 .LESSbox-orient(vertical);
 178                 .LESSbox-align(center);
 179                 .LESSbox-pack(center);
 180
 181                 text-align: center;
 182
 183                 // .popup-title
 184                 // .popup-text
 185
 186                 .popup-button-bg {
 187                         font-size: @font_size_popup_button_text;
 188                         background: @color_popup_button_bg;
 189                         width: 100%;
 190                         padding-top: 11*@unit_base;
 191                         padding-bottom: 11*@unit_base;
 192                         vertical-align: middle;
 193
 194                         .ui-btn {
 195                                 width: 402*@unit_base;
 196                                 height: 74*@unit_base;
 197                                 margin:auto;
 198
 199                         }
 200                 }
 201         }
 202         .center_title_2btn {
 203
 204                 .LESSdisplaybox();
 205                 .LESSbox-orient(vertical);
 206                 .LESSbox-align(center);
 207                 .LESSbox-pack(center);
 208
 209                 text-align: center;
 210
 211                 // .popup-title
 212                 // .popup-text
 213
 214                 .popup-button-bg {
 215                         font-size: @font_size_popup_button_text;
 216                         background: @color_popup_button_bg;
 217                         width: 100%;
 218                         padding-top: 11*@unit_base;
 219                         padding-bottom: 11*@unit_base;
 220                         vertical-align: middle;
 221
 222                         .ui-btn {
 223                                 width: 274*@unit_base;
 224                                 height: 74*@unit_base;
 225                                 margin-top: 0*@unit_base;
 226                                 margin-bottom: 0*@unit_base;
 227                                 margin-left: 5*@unit_base;
 228                                 margin-right: 5*@unit_base;
 229
 230                                 display: inline-block;
 231                         }
 232                 }
 233         }
 234         .center_title_3btn {
 235
 236                 .LESSdisplaybox();
 237                 .LESSbox-orient(vertical);
 238                 .LESSbox-align(center);
 239                 .LESSbox-pack(center);
 240
 241             text-align: center;
 242
 243                 // .popup-title
 244                 // .popup-text
 245
 246                 .popup-button-bg {
 247                         font-size: @font_size_popup_button_text;
 248                         background: @color_popup_button_bg;
 249                         width: 100%;
 250                         padding-top: 11*@unit_base;
 251                         padding-bottom: 11*@unit_base;
 252                         vertical-align: middle;
 253
 254                         .ui-btn {
 255                                 width: 186*@unit_base;
 256                                 height: 74*@unit_base;
 257                                 margin-top: 0*@unit_base;
 258                                 margin-bottom: 0*@unit_base;
 259                                 margin-left: 5*@unit_base;
 260                                 margin-right: 5*@unit_base;
 261
 262                                 display: inline-block;
 263                         }
 264                 }
 265         }
 266         .center_button_vertical {
 267
 268                 .LESSdisplaybox();
 269                 .LESSbox-orient(vertical);
 270                 .LESSbox-align(center);
 271                 .LESSbox-pack(center);
 272
 273             text-align: center;
 274
 275                 // .popup-text
 276
 277                 .popup-button-bg {
 278                         font-size: @font_size_popup_button_text;
 279                         background: @color_popup_button_bg;
 280                         width: 100%;
 281                         padding-top: 1px;
 282                         padding-bottom: 16*@unit_base;
 283                         vertical-align: middle;
 284
 285                         .ui-btn {
 286                                 width: 356*@unit_base;
 287                                 height: 74*@unit_base;
 288                                 margin-top: 16*@unit_base;
 289                                 margin-bottom: 0*@unit_base;
 290                                 margin-left: auto;
 291                                 margin-right: auto;
 292                         }
 293                 }
 294         }
 295         .center_checkbox {
 296
 297                 .LESSdisplaybox();
 298                 .LESSbox-orient(vertical);
 299                 .LESSbox-align(center);
 300                 .LESSbox-pack(center);
 301
 302             text-align: center;
 303
 304                 // .popup-text
 305
 306                 .popup-check-bg {
 307                         font-size: @font_size_popup_info_style;
 308                         background: @color_popup_text_bg;
 309                         width: 100%;
 310                         padding-top: 0*@unit_base;
 311                         padding-bottom: 22*@unit_base;
 312                         vertical-align: middle;
 313
 314                         .ui-checkbox {
 315                                 .ui-btn {
 316                                         text-align: center;
 317                                         background: @color_popup_text_bg;
 318                                         border: 0*@unit_base;
 319
 320                                         .ui-btn-inner {
 321                                                 border: 0*@unit_base;
 322                                         }
 323                                 }
 324                         }
 325                 }
 326
 327                 .popup-button-bg {
 328                         font-size: @font_size_popup_button_text;
 329                         background: @color_popup_button_bg;
 330                         width: 100%;
 331                         padding-top: 11*@unit_base;
 332                         padding-bottom: 11*@unit_base;
 333                         vertical-align: middle;
 334
 335                         .ui-btn {
 336                                 width: 274*@unit_base;
 337                                 height: 74*@unit_base;
 338                                 margin-top: 0*@unit_base;
 339                                 margin-bottom: 0*@unit_base;
 340                                 margin-left: 5*@unit_base;
 341                                 margin-right: 5*@unit_base;
 342
 343                                 display: inline-block;
 344                         }
 345                 }
 346         }
 347         .center_liststyle_1btn {
 348
 349                 .LESSdisplaybox();
 350                 .LESSbox-orient(vertical);
 351                 .LESSbox-align(center);
 352                 .LESSbox-pack(center);
 353
 354                 text-align: center;
 355
 356                 // .popup-title
 357
 358                 .popup-scroller-bg {
 359                         width: 100%;
 360                         overflow: hidden;
 361                         background: black;
 362
 363                         .ui-listview {
 364                                 height: 512*@unit_base;
 365                         }
 366                 }
 367                 .popup-button-bg {
 368                         font-size: @font_size_popup_button_text;
 369                         background: @color_popup_button_bg;
 370                         width: 100%;
 371                         padding-top: 11*@unit_base;
 372                         padding-bottom: 11*@unit_base;
 373                         vertical-align: middle;
 374
 375                         .ui-btn {
 376                                 width: 402*@unit_base;
 377                                 height: 74*@unit_base;
 378                                 margin:auto;
 379
 380                         }
 381                 }
 382         }
 383         .center_liststyle_2btn {
 384
 385                 .LESSdisplaybox();
 386                 .LESSbox-orient(vertical);
 387                 .LESSbox-align(center);
 388                 .LESSbox-pack(center);
 389
 390                 text-align: center;
 391
 392                 // .popup-title
 393
 394                 .popup-scroller-bg {
 395                         width: 100%;
 396                         overflow: hidden;
 397                         background: black;
 398
 399                         .ui-listview {
 400                                 height: 512*@unit_base;
 401                         }
 402                 }
 403                 .popup-button-bg {
 404                         font-size: @font_size_popup_button_text;
 405                         background: @color_popup_button_bg;
 406                         width: 100%;
 407                         padding-top: 11*@unit_base;
 408                         padding-bottom: 11*@unit_base;
 409                         vertical-align: middle;
 410
 411                         .ui-btn {
 412                                 width: 274*@unit_base;
 413                                 height: 74*@unit_base;
 414                                 margin-top: 0*@unit_base;
 415                                 margin-bottom: 0*@unit_base;
 416                                 margin-left: 5*@unit_base;
 417                                 margin-right: 5*@unit_base;
 418
 419                                 display: inline-block;
 420                         }
 421                 }
 422         }
 423         .center_liststyle_3btn {
 424
 425                 .LESSdisplaybox();
 426                 .LESSbox-orient(vertical);
 427                 .LESSbox-align(center);
 428                 .LESSbox-pack(center);
 429
 430                 text-align: center;
 431
 432                 // .popup-title
 433
 434                 .popup-scroller-bg {
 435                         width: 100%;
 436                         overflow: hidden;
 437                         background: black;
 438
 439                         .ui-listview {
 440                                 height: 512*@unit_base;
 441                         }
 442                 }
 443                 .popup-button-bg {
 444                         font-size: @font_size_popup_button_text;
 445                         background: @color_popup_button_bg;
 446                         width: 100%;
 447                         padding-top: 11*@unit_base;
 448                         padding-bottom: 11*@unit_base;
 449                         vertical-align: middle;
 450
 451                         .ui-btn {
 452                                 width: 186*@unit_base;
 453                                 height: 74*@unit_base;
 454                                 margin-top: 0*@unit_base;
 455                                 margin-bottom: 0*@unit_base;
 456                                 margin-left: 5*@unit_base;
 457                                 margin-right: 5*@unit_base;
 458
 459                                 display: inline-block;
 460                         }
 461                 }
 462         }
 463
 464         .center_progressbar {
 465
 466                 .LESSdisplaybox();
 467                 .LESSbox-orient(vertical);
 468                 .LESSbox-align(center);
 469                 .LESSbox-pack(center);
 470
 471                 text-align: center;
 472
 473                 .popup-text {
 474                         font-size: @font_size_popup_center_progressbar_title;
 475                         font-color: @color_popup_center_progressbar_title;
 476                         background: @color_popup_text_bg;
 477                         width: 100%;
 478                         height: 70*@unit_base;
 479                         p {
 480                                 height: 100%;
 481                                 text-align: center;
 482                                 padding: 22*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 483                         }
 484                 }
 485
 486                 .popup-text-bottom-bg {
 487                         font-size: @font_size_popup_center_progressbar_title;
 488                         font-color: @color_popup_center_progressbar_title;
 489                         background: @color_popup_text_bg;
 490                         width: 100%;
 491                         vertical-align: middle;
 492
 493                         .text-left {
 494                                 width: 40%;
 495                                 height: 48*@unit_base;
 496                                 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 497                                 text-align: left;
 498
 499                                 display: inline-block;
 500                         }
 501                         .text-right {
 502                                 width: 40%;
 503                                 height: 48*@unit_base;
 504                                 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 505                                 text-align: right;
 506
 507                                 display: inline-block;
 508                         }
 509
 510                 }
 511
 512                 .popup-button-bg {
 513                         font-size: @font_size_popup_button_text;
 514                         background: @color_popup_button_bg;
 515                         width: 100%;
 516                         padding-top: 11*@unit_base;
 517                         padding-bottom: 11*@unit_base;
 518                         vertical-align: middle;
 519
 520                         .ui-btn {
 521                                 width: 402*@unit_base;
 522                                 height: 74*@unit_base;
 523                                 margin:auto;
 524
 525                         }
 526                 }
 527
 528                 .popup-progress-bg {
 529                         background: @color_popup_text_bg;
 530                         width: 100%;
 531                         height: 100%;
 532                 }
 533         }
 534
 535         .centertext_progressbar {
 536
 537                 .LESSdisplaybox();
 538                 .LESSbox-orient(vertical);
 539                 .LESSbox-align(center);
 540                 .LESSbox-pack(center);
 541
 542                 text-align: center;
 543
 544                 .popup-text {
 545                         font-size: @font_size_popup_center_progressbar_title;
 546                         font-color: @color_popup_center_progressbar_title;
 547                         background: @color_popup_text_bg;
 548                         width: 100%;
 549                         padding-top: 22*@unit_base;
 550                         padding-bottom: 16*@unit_base;
 551                         p {
 552                                 text-align: center;
 553                         }
 554                 }
 555
 556                 .popup-text-bottom-bg {
 557                         font-size: @font_size_popup_center_progressbar_title;
 558                         font-color: @color_popup_center_progressbar_title;
 559                         background: @color_popup_text_bg;
 560                         width: 100%;
 561                         vertical-align: middle;
 562
 563                         .text-left {
 564                                 width: 40%;
 565                                 height: 40*@unit_base;
 566                                 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
 567                                 text-align: left;
 568
 569                                 display: inline-block;
 570                         }
 571                         .text-right {
 572                                 width: 40%;
 573                                 height: 40*@unit_base;
 574                                 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
 575                                 text-align: right;
 576
 577                                 display: inline-block;
 578                         }
 579
 580                 }
 581
 582                 .popup-button-bg {
 583                         font-size: @font_size_popup_button_text;
 584                         background: @color_popup_button_bg;
 585                         width: 100%;
 586                         padding-top: 11*@unit_base;
 587                         padding-bottom: 11*@unit_base;
 588                         vertical-align: middle;
 589
 590                         .ui-btn {
 591                                 width: 402*@unit_base;
 592                                 height: 74*@unit_base;
 593                                 margin:auto;
 594
 595                         }
 596                 }
 597
 598                 .popup-progress-bg {
 599                         background: @color_popup_text_bg;
 600                         width: 100%;
 601                         height: 100%;
 602                 }
 603         }
 604         .ui-btn{
 605                 .LESSpopup_button_style;
 606         }
 607         .ui-btn.ui-btn-hover-s{
 608                 .LESSpopup_button_hover_style;
 609         }
 610         .ui-btn.ui-btn-down-s{
 611                 .LESSpopup_button_press_style;
 612         }
 613 }
 614 .ui-popupwindow > .ui-volumecontrol {
 615
 616         display: table;
 617         margin: auto;
 618         background: rgba(0, 0, 0, 0.666667);
 619         width: 416*@unit_base;
 620         height: 676*@unit_base;
 621         padding-top: 22*@unit_base;
 622
 623         h1 {
 624                 font-size: @font_size_popup_info_style;
 625                 display: table;
 626                 margin: auto;
 627                 color: #c0c0c0;
 628         }
 629
 630         .ui-volumecontrol-icon {
 631                 display: table;
 632                 width: 100%;
 633                 height: 128*@unit_base;
 634                 padding-top: 21*@unit_base;
 635                 padding-bottom: 21*@unit_base;
 636                 padding-left: 165*@unit_base;
 637                 padding-right: 165*@unit_base;
 638         }
 639
 640         .ui-volumecontrol-indicator {
 641                 display: table;
 642                 width: 100%;
 643                 height: 420*@unit_base;
 644                 padding-left: 68*@unit_base;
 645                 padding-right: 68*@unit_base;
 646         }
 647
 648         .ui-corner-all {
 649                 -moz-border-radius: 0.3em !important;
 650                 -webkit-border-radius: 0.3em !important;
 651                 border-radius: 0.3em !important;
 652         }
 653 }
 654
 655 .ui-popupwindow-corner-all {
 656         -moz-border-radius: 0em !important;
 657         -webkit-border-radius: 0em !important;
 658         border-radius: 0em !important;
 659 }