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

   1
   2 @import "config.less";
   3
   4 /***************************************************************************
   5                     Header / Footer
   6                     NavigationBar
   7 ***************************************************************************/
   8
   9 .ui-bar-s {
  10         border: none;
  11         background : rgba(248, 246, 239, 1); // #F8F6EF /* Header Background */
  12         color: @color_bar_title_text;
  13         font-family: Helvetica, Arial, sans-serif;
  14         font-weight: bold;
  15         font-size : 28 * @unit_base;
  16
  17         .ui-link-inherit {
  18                 color: @color_bar_title_text;
  19         }
  20
  21
  22         > .ui-btn.ui-btn-back {
  23                 background : transparent;
  24
  25                 position : absolute;
  26                 right : 0px;
  27
  28                 .ui-icon-header-back-btn {
  29                         top : 8 * @unit_base;
  30                         left : auto;
  31                         right : 13 * @unit_base;
  32
  33                         margin-top : 0px
  34                 }
  35         }
  36 }
  37
  38 /* Header style */
  39 .ui-header.ui-bar-s{
  40         position : fixed;
  41         top : 0px;
  42
  43         min-height : 55 * @unit_base;
  44
  45         .ui-title {
  46                 display: inline-block;
  47                 color : @color_bar_title_text;
  48                 min-height : 28 * @unit_base;
  49                 max-height : 34 * @unit_base; /* temporary UX strange */
  50                 font-size  : 28 * @unit_base;
  51                 text-overflow: ellipsis;
  52                 overflow: hidden;
  53                 white-space: nowrap;
  54                 outline: 0 !important;
  55
  56                 text-align: left;
  57                 margin: 16*@unit_base 8*@unit_base 5*@unit_base 8*@unit_base;
  58
  59         }
  60
  61         /* header button position : need to press area more... */
  62         >.ui-btn {
  63                 .ui-btn-inner.ui-btn-icon-only .ui-icon {
  64                         left : 0px;
  65                         top : 0px;
  66                         margin-top : 0px;
  67                 }
  68         }
  69
  70         > .ui-btn.ui-btn-back {
  71                 right : 13 * @unit_base;
  72         }
  73
  74         img {
  75                 display: inline-block;
  76                 height: 16 * @unit_base;
  77                 width: 16 * @unit_base;
  78                 margin-left: 8 * @unit_base;
  79         }
  80
  81         .ui-title-text-sub {
  82                 position : absolute;
  83                 top : 36 * @unit_base;
  84                 left : 8 * @unit_base;
  85
  86                 font-size : 12 * @unit_base;
  87
  88                 img {
  89                         height: 16 * @unit_base;
  90                         width: 16 * @unit_base;
  91                         margin-left: 8 * @unit_base;
  92                 }
  93         }
  94
  95         > .ui-btn{
  96                 position : absolute;
  97                 top : 19 * @unit_base;
  98                 margin-top : 0px;
  99
 100                 height : 32 * @unit_base;
 101                 width : 32 * @unit_base;
 102
 103                 background: transparent;
 104                 color   : red;
 105
 106         }
 107
 108         > .ui-btn.ui-btn-right:nth-child(2) {
 109                 right : 11 * @unit_base;
 110         }
 111
 112         > .ui-btn.ui-btn-right:nth-child(3) {
 113                 right : 58 * @unit_base;
 114         }
 115
 116         > img + h1 + a.ui-btn.ui-btn-right:nth-child(3) {
 117                 right : 11 * @unit_base;
 118         }
 119
 120         > img + h1 + a.ui-btn.ui-btn-right:nth-child(4) {
 121                 right : 58 * @unit_base;
 122         }
 123
 124         > img + h1 + span.ui-title-text-sub + a.ui-btn.ui-btn-right:nth-child(4) {
 125                 right : 11 * @unit_base;
 126         }
 127
 128         > img + h1 + span.ui-title-text-sub + a.ui-btn.ui-btn-right:nth-child(5) {
 129                 right : 58 * @unit_base;
 130         }
 131
 132         > .ui-btn.ui-btn-down-s {
 133                 background : @color_bar_btn_press;
 134                 color : @color_bar_title_text;
 135         }
 136
 137         &.ui-title-multiline {
 138                 .ui-title {
 139                         min-height : 24 * @unit_base;
 140                         max-height : 24 * @unit_base; /* temporary UX strange */
 141                         font-size  : 22 * @unit_base;
 142
 143                         margin: 9*@unit_base 8*@unit_base 22*@unit_base 8*@unit_base;
 144                 }
 145         }
 146
 147 }
 148
 149 .ui-footer.ui-bar-s {
 150         height : 49 * @unit_base;
 151         text-align : center;
 152         bottom : 0px;
 153         >.ui-btn.ui-btn-back,
 154         >[data-icon="naviframe-more"] {
 155                 background : transparent;
 156
 157                 >.ui-btn-icon-only {
 158                         width : 56 * @unit_base;
 159                         height : 49 * @unit_base;
 160                         padding : 0px;
 161                         -webkit-box-shadow : none /* temp code */
 162                 }
 163                 .ui-btn-footer-right .ui-btn-icon-only .ui-icon {
 164                         left : 8 * @unit_base;
 165                 }
 166         }
 167
 168         [data-icon="naviframe-more"] {
 169                 position : absolute;
 170                 left : 0 * @unit_base;
 171                 top : 0 * @unit_base;
 172
 173                 box-shadow : none;
 174                 border-width : 0px;
 175
 176                 .ui-icon-naviframe-more {
 177                         left : 13 * @unit_base;
 178                         top : 8 * @unit_base;
 179
 180                         margin-top : 0px;
 181                 }
 182                 .ui-btn-inner {
 183                         border: none;
 184                         background: transparent;
 185                         box-shadow: none;
 186                 }
 187         }
 188
 189         [data-role="controlgroup"] {
 190                 width : 245 * @unit_base; /* temp value */
 191
 192                 margin-left : auto;
 193                 margin-right : auto;
 194                 margin-top : 6 * @unit_base; /* temp value */
 195                 margin-bottom : 6 * @unit_base; /* temp value */
 196
 197                 [data-role="button"] {
 198                         background : transparent;
 199
 200                         width : 77 * @unit_base;
 201
 202                         border-style : solid;
 203                         border-color : black;
 204                         border-top-width : 0px;
 205                         border-bottom-width : 0px;
 206                         border-left-width : 1px;
 207                         border-right-width : 1px;
 208
 209                         border-radius : 0px;
 210                         box-shadow : none;
 211                         .ui-btn-text {
 212                                 font-size : 17 * @unit_base;
 213                                 color : rgba(58, 58, 58, 1);
 214                         }
 215
 216                         &.ui-corner-right {
 217                                 border-right-width : 0px;
 218                         }
 219
 220                         &.ui-corner-left {
 221                                 border-left-width : 0px;
 222                         }
 223                 }
 224                 }
 225
 226         > [data-role="button"]:not([data-icon="naviframe-more"]) {
 227                 top : 6 * @unit_base;
 228         }
 229 }
 230
 231 /***************************************************************************
 232                     Content Top calculate
 233 ***************************************************************************/
 234 .ui-content {
 235         position : relative;
 236         top : 55  * @unit_base;
 237 }
 238
 239 .ui-title-content-normal-height {
 240         top : 55  * @unit_base;
 241 }
 242
 243 .ui-title-content-multi-controlbar-height {
 244         top : 75  * @unit_base;
 245 }
 246
 247 .ui-title-content-search {
 248         top : 111  * @unit_base;
 249 }
 250
 251
 252 /***************************************************************************
 253                     Content Top calculate
 254 ***************************************************************************/
 255
 256
 257 .ui-body-s {
 258         border: 1px solid #2a2a2a;
 259         background:                     @color_bg;
 260         color:                                  @color_text;
 261         font-weight: normal;
 262
 263         font-family: Helvetica, Arial, sans-serif;
 264
 265         .ui-link-inherit { color:       #fff; }
 266         .ui-link {
 267                 /* ui-body-link */
 268                 color: #2489CE;
 269                 font-weight: bold;
 270                 &:hover { color: #2489CE; }
 271                 &:active { color: #2489CE; }
 272                 &:visited {     color: #2489CE; }
 273         }
 274 }
 275
 276 .ui-br {
 277 }
 278 .ui-btn-box-s {
 279         padding: 1 * @unit_base;
 280 }
 281 .ui-btn-box-s.ui-btn-up-s {
 282         .LESSbutton_box_style;
 283         .LESSborder-radius-all( 0.3rem );
 284         .LESSbutton_text1_style;
 285 }
 286
 287 .ui-ctxpopup .ui-btn-box-s{
 288         &.ui-btn-up-s,
 289         &.ui-btn-hover-s {
 290                 background: transparent !important;
 291                 border: none;
 292                 box-shadow: none;
 293                 padding: 0;
 294                 color: white !important;
 295         }
 296         &.ui-btn-down-s {
 297                 background: @color_ctxbutton_press !important;
 298                 border: none;
 299                 box-shadow: none;
 300                 padding: 0;
 301                 color: white !important;
 302                 .LESSborder-radius-all( 0 );
 303         }
 304         .ui-btn-inner {
 305                 background: transparent ! important;
 306                 box-shadow: none;
 307                 border: none;
 308         }
 309 }
 310
 311 .ui-ctxpopup .ui-btn-down-s {
 312         background: @color_ctxbutton_press !important;
 313 }
 314
 315 .ui-btn-box-s .ui-btn-inner {
 316         border: 1px solid;
 317         border-color: rgb(199, 197, 190);
 318         .LESSborder-radius-all( 0.3rem );
 319         .LESSbox-boxsizing( border-box );
 320         .LESSbutton_inner_box_style;
 321         height: 100%;
 322 }
 323
 324 .ui-header .ui-btn-box-s,
 325 .ui-footer .ui-btn-box-s,
 326 .ui-btn-back.ui-btn-up-s,
 327 .ui-btn-back.ui-btn-hover-s,
 328 .ui-btn-back.ui-btn-down-s,
 329 .ui-popup-container .ui-btn-box-s {
 330         font-weight: normal;
 331         .LESSborder-radius-all( 0.9 rem );
 332 }
 333
 334 .ui-btn-box-s.ui-btn-hover-s {
 335         .LESSbutton_hover_style;
 336         .LESSbutton_text1_style;
 337 }
 338 /*
 339 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle{
 340         .LESScirclebutton_hover_style;
 341 }
 342 */
 343 .ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
 344         .LESSbutton_down_style;
 345 }
 346
 347 .ui-btn-up-s,
 348 .ui-btn-hover-s,
 349 .ui-btn-down-s {
 350         font-family: Helvetica, Arial, sans-serif;
 351         text-decoration: none;
 352 }
 353 /*
 354 .ui-btn-down-s.ui-btn-corner-circle{
 355         .LESScirclebutton_press_style;
 356 }
 357
 358 /* Structure */
 359 /* links within "buttons"
 360 -----------------------------------------------------------------------------------------------------------*/
 361
 362 a.ui-link-inherit {
 363         text-decoration: none !important;
 364 }
 365
 366
 367 /* Active class used as the "on" state across all themes
 368 -----------------------------------------------------------------------------------------------------------*/
 369
 370 /* button default color for active state */
 371 .ui-btn-active {
 372         /* global-active */
 373         color:                                  @color_button_text_normal;
 374         cursor: pointer;
 375         text-decoration: none;
 376         background:                     @color_button_press;
 377         outline: none;
 378         //font-family: Helvetica, Arial, sans-serif;
 379
 380         a.ui-link-inherit {
 381                 color:                                  @color_button_text_normal;
 382         }
 383 }
 384
 385 /* button inner top highlight
 386 -----------------------------------------------------------------------------------------------------------*/
 387
 388 .ui-btn-inner {
 389         //border : none;
 390 }
 391
 392
 393
 394
 395 /* corner rounding classes
 396 -----------------------------------------------------------------------------------------------------------*/
 397
 398 .ui-corner-tl {
 399         .LESSborder-radius-topleft(.3em);
 400 }
 401 .ui-corner-tr {
 402         .LESSborder-radius-topright(.3em);
 403 }
 404 .ui-corner-bl {
 405         .LESSborder-radius-bottomleft(.3em);
 406 }
 407 .ui-corner-br {
 408         .LESSborder-radius-bottomright(.3em);
 409 }
 410 .ui-corner-top {
 411         .LESSborder-radius-topleft(.3em);
 412         .LESSborder-radius-topright(.3em);
 413 }
 414 .ui-corner-bottom {
 415         .LESSborder-radius-bottomleft(.3em);
 416         .LESSborder-radius-bottomright(.3em);
 417 }
 418 .ui-corner-right {
 419         .LESSborder-radius-topright(.3em);
 420         .LESSborder-radius-bottomright(.3em);
 421 }
 422 .ui-corner-left {
 423         .LESSborder-radius-topleft(.3em);
 424         .LESSborder-radius-bottomleft(.3em);
 425 }
 426 .ui-corner-all {
 427         //.LESSborder-radius-all(.3em);
 428 }
 429 .ui-corner-none {
 430         .LESSborder-radius-all(0);
 431 }
 432
 433 /***************************************************************************
 434                     Icon (Naviframe)
 435 ***************************************************************************/
 436 .ui-header, .ui-footer {
 437         .ui-btn .ui-btn-icon-only .ui-icon {
 438                 width: 32 * @unit_base;
 439                 height: 32 * @unit_base;
 440
 441         }
 442 }
 443
 444 .ui-btn-back .ui-btn-inner .ui-icon-header-back-btn {
 445         width: 32 * @unit_base;
 446         height: 32 * @unit_base;
 447
 448         background-repeat: no-repeat;
 449         background-size: 100% 100%;
 450
 451 }
 452
 453 .ui-btn-up-s {
 454         .ui-icon-header-back-btn { background-image: url(images/00_icon_Back.png); }
 455         .ui-icon-naviframe-more { background-image: url(images/00_icon_more.png); }
 456         .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); }
 457         .ui-icon-naviframe-edit { background-image: url(images/00_icon_edit.png); }
 458         .ui-icon-naviframe-plus { background-image: url(images/00_icon_plus.png); }
 459 }
 460
 461 .ui-btn-down-s, .ui-btn-hover-s {
 462         .ui-icon-header-back-btn { background-image: url(images/00_icon_Back_press.png); }
 463         .ui-icon-naviframe-more { background-image: url(images/00_icon_more_press.png); }
 464         .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); }
 465         .ui-icon-naviframe-edit { background-image: url(images/00_icon_edit_press.png); }
 466         .ui-icon-naviframe-plus { background-image: url(images/00_icon_plus_press.png); }
 467 }