jscripts/infusion/framework/fss/css/fss-mobile-layout.css

   1 body {
   2     margin:0;
   3     padding:0;
   4     font:normal 17px Helvetica, sans-serif; /* Base font rules */
   5         -webkit-user-select: none; /* prevents child elements content from being selected - desired? */
   6     -webkit-text-size-adjust:none; /* http://website-engineering.blogspot.com/2009/07/stop-adjusting-text-size-in-iphone-when.html */
   7 }
   8 h1, h2, h3, h4, h5, h6 {margin:0.25em;}
   9 h1 {font-size:1.5em;}
  10 h2 {font-size:1.1em;}
  11 h3 {font-size:1em;}
  12 h4 {}
  13 h5 {}
  14 h6 {}
  15 img {border:none;}
  16
  17
  18 /***************************************/
  19 /**
  20  * Basic overrides for fss layout
  21  */
  22
  23 .fl-icon {
  24     width:30px;
  25     height:30px;
  26     margin-top:-5px;
  27     margin-right:5px;
  28     -webkit-border-radius: 5px;
  29 }
  30 .fl-label {
  31     width:25%;
  32 }
  33
  34 /***************************************/
  35 /* iPhone general purpose gel buttons */
  36 /* effect is applied anywhere but the navbar, which has its own button look */
  37
  38 .fl-button {
  39     border-width: 10px;
  40     text-align:center;
  41     -webkit-border-radius:10px;
  42     -webkit-background-origin: border;
  43     -webkit-background-clip: border;
  44 }
  45
  46 /*************************************************/
  47 /* Navigation Bar
  48  */
  49 .fl-navbar {
  50     width:100%;
  51     text-align:center;
  52         border-style:solid;
  53         border-width:1px 0;
  54 }
  55 .fl-navbar .fl-table-row:first-child {
  56         height:45px;
  57 }
  58 .fl-navbar .fl-table-cell:not(h1) {
  59     width:1px;
  60     white-space:nowrap;
  61 }
  62
  63 .fl-navbar .fl-table-cell:first-child {
  64     padding-left:5px;
  65 }
  66 .fl-navbar .fl-table-cell:last-child {
  67     padding-right:5px;
  68 }
  69 .fl-navbar h1 {
  70     padding:0;
  71     text-align:center;
  72     font-size:1.17em;
  73     font-weight: bold;
  74 }
  75 .fl-navbar a {
  76         text-decoration:none;
  77         font-size: 0.7em;
  78     font-weight:bold;
  79 }
  80
  81 .fl-navbar [class*=fl-button] {
  82     -webkit-border-radius:5px;
  83     padding:0;
  84     display:block;
  85 }
  86
  87 .fl-navbar .fl-backButton {
  88     /*
  89      * To create the oddly shaped back button with fully customizable CSS colors, there are 2 main things:
  90      * 1) The stencil for the shadow and hilights along the angled edge
  91      * 2) The mask to crop the background along the angled edge
  92      */
  93     /* Angled effect is just a single border with a transaprent stencil image for the bevel */
  94     border-width:0 0 0 15px;
  95     -webkit-border-top-right-radius: 5px;
  96     -webkit-border-bottom-right-radius: 5px;
  97     -webkit-background-origin: border;
  98     -webkit-background-clip: border;
  99     -webkit-mask-repeat: no-repeat;
 100     -webkit-mask-origin: border;
 101     -webkit-mask-clip: border;
 102 }
 103
 104 .fl-navbar .fl-backButton .fl-button-inner {
 105     margin-left:-3px; /* close tiny gap between angled border + button-inner on Mobile Safari */
 106     border-left-width:0;
 107 }
 108 .fl-navbar .fl-button-inner {
 109     float:none;
 110     padding:5px;
 111     border-width:5px;
 112     -webkit-background-origin: border;
 113     -webkit-background-clip: border;
 114 }
 115
 116 .fl-navbar img.fl-button-inner {
 117     height:24px;
 118     vertical-align:middle;
 119     padding:0;
 120 }
 121
 122 /*************************************************/
 123 /* iPhone tabs: general purpose dividers, or fixed to the bottom of the screen
 124  */
 125 /*************************************************/
 126 .fl-tabs {
 127     margin:0;
 128     padding:0;
 129     border:none;
 130     text-align:center;
 131 }
 132 .fl-tabs li {
 133     display:inline-block;
 134     margin-right:-5px;
 135     border-width:5px 0;
 136     text-align:center;
 137 }
 138 .fl-tabs li:first-child {
 139     border-left-width:5px;
 140     -webkit-border-top-left-radius:5px;
 141     -webkit-border-bottom-left-radius:5px;
 142 }
 143 .fl-tabs li:last-child {
 144     margin-right:0;
 145     border-right-width:5px;
 146     -webkit-border-top-right-radius:5px;
 147     -webkit-border-bottom-right-radius:5px;
 148 }
 149 .fl-tabs li.fl-tabs-active a,
 150 .fl-tabs li a {
 151     display:block;
 152     margin:-4px 0;
 153     text-decoration:none;
 154     padding:0.35em 0.5em;
 155     font-weight:bold;
 156     background:none;
 157     border-width:0 1px;
 158     border-style:solid;
 159 }
 160
 161 .fl-tabs li:last-child a {
 162     border-right:none;
 163 }
 164 .fl-tabs li:first-child a {
 165     border-left:none;
 166 }
 167
 168 /*************************************************/
 169 /* iPhone list menu styles: Ordered lists, Unordererd lists, Thumbnail lists, Icon lists, Definition lists
 170  * By default, all list formats fit to width
 171  * When nested within a fl-container element, they are indented and therefore contain rounded corners
 172  */
 173 /*************************************************/
 174 /* Default list system setup */
 175 [class*=fl-list] {
 176     border: none;
 177     list-style:none;
 178     margin:0 0 10px;
 179     padding:0;
 180 }
 181 [class*=fl-list] > li {
 182         display:block;
 183         padding: 12px 0px 12px 12px;
 184         text-decoration: none;
 185         font-weight: bold;
 186         outline: none;
 187         border-style:solid;
 188         border-width:1px 0px 0 0px;
 189     overflow:auto; /* to encapsulate floating elements within */
 190 }
 191 [class*=fl-list] > li:last-child {
 192         border-bottom-width:1px;
 193 }
 194 [class*=fl-list] .fl-link-loading .fl-link-secondary {
 195     display:none;
 196 }
 197 /* secondary link info behaviour */
 198 [class*=fl-list] > li .fl-link-secondary {
 199     float:right;
 200     margin-right:25px;
 201     font-weight:normal;
 202     font-size:.9em;
 203 }
 204  /* summary link info ehaviour */
 205 [class*=fl-list] > li .fl-link-summary {
 206     display:block;
 207     clear:right;
 208     margin:0 25px 0 0px;
 209     font-weight:normal;
 210     font-size:0.8em;
 211 }
 212 [class*=fl-list] li .fl-icon ~ .fl-link-summary {
 213     margin-left:30px; /* default size of fl-icon */
 214 }
 215 /* icon behaviour */
 216 [class*=fl-list] li .fl-icon {
 217     float:left;
 218     margin-left:-6px;
 219 }
 220
 221 /*************************************************/
 222 /**
 223  * fl-listmenu is now the way to create a link list
 224  * The links create a hotspot over the entire list item, just like how it was by default
 225  */
 226 .fl-list-menu {
 227 }
 228 .fl-list-menu li {
 229         padding:0;
 230 }
 231 .fl-list-menu li a {
 232     display:block;
 233     padding: 12px 0px 12px 12px;
 234     text-decoration: none;
 235     font-weight: bold;
 236     outline: none;
 237 }
 238
 239
 240 /*************************************************/
 241 /* Thumbnail and Expanded Thumbnails list features */
 242
 243 .fl-list-thumbnails > li {
 244     margin-bottom:5px;
 245     border-bottom-width:1px;
 246 }
 247 .fl-list-thumbnails > li a {
 248     padding-top:6px;
 249     overflow:auto;
 250 }
 251 /* summary behaviour */
 252 .fl-list-thumbnails > li a  .fl-icon ~ .fl-link-summary {
 253         margin:0 25px -12px 42px;
 254 }
 255 .fl-list-thumbnails:not(.fl-thumbnails-expanded):not(.fl-list-brief) > li a > .fl-icon ~ .fl-link-summary {
 256     padding-bottom:10px;
 257 }
 258 /* icon behaviour */
 259 .fl-list-thumbnails > li a  .fl-icon {
 260     width:44px;
 261     height:44px;
 262     margin:-6px 10px -12px -12px;
 263     -webkit-border-radius:0;
 264 }
 265 .fl-list-thumbnails.fl-thumbnails-expanded li {
 266     margin:0;
 267     border-bottom-width:0;
 268 }
 269 .fl-list-thumbnails.fl-thumbnails-expanded > li:last-child {
 270     border-bottom-width:1px;
 271 }
 272 .fl-list-thumbnails.fl-thumbnails-expanded > li a {
 273     -webkit-border-radius:0;
 274     padding: 10px 0px 10px 10px;
 275 }
 276 .fl-list-thumbnails.fl-thumbnails-expanded > li a  .fl-icon {
 277     width:60px;
 278     height:60px;
 279     margin:-5px 5px -5px -5px;
 280     -webkit-border-radius:0;
 281 }
 282 .fl-list-thumbnails.fl-thumbnails-expanded > li a  .fl-icon ~ .fl-link-summary {
 283     margin: 0px 0px -5px 60px;
 284 }
 285 .fl-list-thumbnails.fl-thumbnails-expanded > li a  .fl-link-secondary {
 286     padding-top:0;
 287 }
 288
 289 /*************************************************/
 290 /* Brief lists auto trim summary content + add ellipsis if necessary */
 291
 292 .fl-list-brief > li a  {
 293     padding-bottom:6px;
 294 }
 295 .fl-list-brief > li a > .fl-link-summary {
 296     height:1.3em;
 297     overflow:hidden;
 298     text-overflow:ellipsis;
 299     white-space:nowrap;
 300 }
 301 .fl-list-brief > li a > .fl-icon ~ .fl-link-summary {
 302     margin-left:0;
 303 }
 304 .fl-list-brief.fl-list-thumbnails:not(.fl-thumbnails-expanded) > li a > .fl-icon {
 305     margin:-6px 10px -6px -12px;
 306 }
 307 .fl-list-brief.fl-list-thumbnails:not(.fl-thumbnails-expanded) > li a > .fl-link-secondary {
 308     padding-top:0px;
 309 }
 310
 311 /*************************************************/
 312 /* Thumbnails in Grid layout, changes the entire layout of the list item and contents */
 313 .fl-list-thumbnails.fl-grid {
 314         overflow:auto;
 315 }
 316 .fl-list-thumbnails.fl-grid li {
 317         display:inline-block;
 318     float:none;
 319     vertical-align:top;
 320         width:auto;
 321         height:auto;
 322         margin:4px;
 323 }
 324 .fl-list-thumbnails.fl-grid li a {
 325         padding:0;
 326         margin:0;
 327         text-indent:-5000px;
 328         overflow:hidden;
 329         width:44px;
 330         height:44px;
 331 }
 332 .fl-list-thumbnails.fl-grid li a .fl-caption {
 333 }
 334 .fl-list-thumbnails.fl-grid li a .fl-icon {
 335         display:block;
 336         float:none;
 337         margin:0 auto;
 338         padding:0;
 339         width:auto;
 340         height:auto;
 341         max-height:44px;
 342         max-width:44px;
 343 }
 344 .fl-list-thumbnails.fl-thumbnails-expanded.fl-grid li {
 345         margin:0px;
 346 }
 347 .fl-list-thumbnails.fl-thumbnails-expanded.fl-grid li a {
 348         height:64px;
 349         width:64px;
 350 }
 351 .fl-list-thumbnails.fl-thumbnails-expanded.fl-grid > li a .fl-icon {
 352         max-height:64px;
 353         max-width:64px;
 354 }
 355 /* Reiterate the properties of fl-table-cell for specificities sake */
 356 .fl-list-thumbnails.fl-grid li .fl-table {
 357 }
 358 .fl-list-thumbnails.fl-grid li .fl-table .fl-table-cell {
 359     display:table-cell;
 360     vertical-align:middle;
 361 }
 362 .fl-list-thumbnails.fl-grid .fl-grid-caption {
 363     position:relative;
 364     height:auto;
 365     text-align:center;
 366     font-size:12px;
 367 }
 368 .fl-thumbnails-expanded.fl-grid .fl-grid-caption {
 369     width:64px;
 370 }
 371 /*************************************************/
 372 /* Glossy icons (and thumbnails?) */
 373
 374 /* Glossiness for 30x30 icons */
 375 .fl-list-glossy > li a::before {
 376     position:absolute;
 377     content:" ";
 378     float:left;
 379     width:28px;
 380     height:28px;
 381     margin:-4px 0 0 -5px;
 382     -webkit-border-radius:3px;
 383     -webkit-background-size: 30px 60px;
 384     background-repeat:no-repeat;
 385 }
 386 /* Glossiness for 44x44 thumbnails */
 387 .fl-list-thumbnails.fl-list-glossy > li a::before {
 388     width:42px;
 389     height:42px;
 390     margin:-11px;
 391     -webkit-border-radius:0px;
 392     -webkit-background-size: 44px 50px;
 393 }
 394 /* Glossiness for 60x60 thumbnails */
 395 .fl-list-thumbnails.fl-thumbnails-expanded.fl-list-glossy > li a::before {
 396     width:58px;
 397     height:58px;
 398     margin:-4px;
 399     -webkit-border-radius:0px;
 400     -webkit-background-size: 60px 40px;
 401 }
 402
 403
 404 /*************************************************/
 405 /* Content Panels */
 406 /*************************************************/
 407
 408 [class*=fl-container]:not(.fl-navbar) {
 409         margin:10px;
 410     width:auto;
 411 }
 412
 413 /* Panel influence for list corners */
 414 [class*=fl-container] [class*=fl-list] > li {
 415     border-right-width: 1px;
 416     border-left-width: 1px;
 417 }
 418 [class*=fl-container] [class*=fl-list] > li:first-child,
 419 [class*=fl-container] [class*=fl-list] > li:first-child a {
 420     -webkit-border-top-left-radius: 8px;
 421     -webkit-border-top-right-radius: 8px;
 422 }
 423
 424 [class*=fl-container] [class*=fl-list] > li:last-child,
 425 [class*=fl-container] [class*=fl-list] > li:last-child a {
 426     -webkit-border-bottom-left-radius: 8px;
 427     -webkit-border-bottom-right-radius: 8px;
 428 }
 429
 430 [class*=fl-container] [class*=fl-list]:not(.fl-thumbnails-expanded) > li a .fl-icon {
 431     -webkit-border-bottom-left-radius: 8px;
 432     -webkit-border-top-left-radius: 8px;
 433 }
 434
 435 [class*=fl-container] .fl-list-thumbnails:not(.fl-thumbnails-expanded) > li,
 436 [class*=fl-container] .fl-list-thumbnails:not(.fl-thumbnails-expanded) > li a {
 437     -webkit-border-radius: 8px;
 438 }
 439 /* Panel Auto Headings */
 440 /* The first element found becomes the "heading" */
 441 .fl-container-autoHeading > *:first-child {
 442         padding:10px;
 443         margin:0;
 444         -webkit-border-top-left-radius: 8px;
 445         -webkit-border-top-right-radius: 8px;
 446 }
 447 /* The last element found becomes the "content" - list or otherwise */
 448 .fl-container-autoHeading > *:last-child {
 449         margin:0;
 450         -webkit-border-radius:0;
 451         -webkit-border-bottom-left-radius:8px;
 452         -webkit-border-bottom-right-radius:8px;
 453 }
 454
 455 .fl-container-autoHeading [class*=fl-list] > li {
 456         margin:0;
 457 }
 458 .fl-container-autoHeading [class*=fl-list] > li:first-child,
 459 .fl-container-autoHeading [class*=fl-list] > li:first-child a {
 460         -webkit-border-radius:0;
 461 }
 462 .fl-container-autoHeading [class*=fl-list] > li:first-child:last-child,
 463 .fl-container-autoHeading [class*=fl-list] > li:first-child:last-child a {
 464         -webkit-border-bottom-left-radius:8px;
 465         -webkit-border-bottom-right-radius:8px;
 466 }
 467
 468 /* Collapsing and expanding panels */
 469 .fl-container-collapsable {
 470         max-height:900px;
 471         overflow:hidden;
 472         -webkit-border-radius:8px;
 473 }
 474
 475 /***************************/
 476 .fl-table {
 477     display:table;
 478     border-collapse:collapse;
 479 }
 480 .fl-table-row {
 481     display:table-row;
 482 }
 483 .fl-table-cell {
 484     display:table-cell;
 485     vertical-align:middle;
 486 }
 487
 488
 489 /************************************************************************************************/
 490 /*
 491     Theme/Device specific layout adjustments
 492     The base CSS is modelled off the iPhone WebKit environment, which is a good UI to emulate
 493     The following CSS modifies the base slightly to be a little more device-friendly and native-ish for other Webkit environments
 494 */
 495
 496 .fl-theme-android {
 497     font:normal 17px "Droid Sans", sans-serif;
 498 }
 499 .fl-theme-android [class*=fl-list] > li {
 500     border-width:0px;
 501 }
 502 .fl-theme-android h1,
 503 .fl-theme-android h2,
 504 .fl-theme-android h3 {
 505     padding:5px;
 506     margin:0;
 507 }
 508 .fl-theme-android [class*=fl-container] h1,
 509 .fl-theme-android [class*=fl-container] h2,
 510 .fl-theme-android [class*=fl-container] h3 {
 511     margin:0 -10px;
 512 }
 513 .fl-theme-android .fl-list-menu a {
 514     font-weight:normal;
 515 }
 516 .fl-theme-android .fl-tabs li:not(:last-child) {
 517     margin-right:-4px; /* for some reason, the use of Droid Sans font make the right border dissappear (on Chrome+XP). This 1px change fixes it */
 518 }
 519 /* Panel influence for list corners */
 520 .fl-theme-android [class*=fl-container] [class*=fl-list] > li:first-child,
 521 .fl-theme-android [class*=fl-container] [class*=fl-list] > li:first-child a {
 522     -webkit-border-top-left-radius: 0px;
 523     -webkit-border-top-right-radius: 0px;
 524 }
 525 .fl-theme-android [class*=fl-container]:not(.fl-container-autoHeading) [class*=fl-list] > li:last-child,
 526 .fl-theme-android [class*=fl-container]:not(.fl-container-autoHeading) [class*=fl-list] > li:last-child a {
 527     -webkit-border-bottom-left-radius: 0px;
 528     -webkit-border-bottom-right-radius: 0px;
 529 }
 530 .fl-theme-android .fl-list-thumbnails.fl-thumbnails-expanded > li:last-child {
 531         border:0;
 532 }
 533 .fl-theme-android .fl-container-autoHeading > :first-child {
 534         margin-left:0;
 535         margin-right:0;
 536 }
 537 .fl-theme-android .fl-container-autoHeading > :last-child {
 538         border-width:0 1px 1px;
 539 }