docs/themes/mobile/moz.css

   1 /*
   2  * Contributed by Mark McLaren on the Infusion Users List
   3  * http://fluidproject.org/pipermail/infusion-users/2010-April/000186.html
   4  This should be deleted from mobile/when it is committed to mobile FSS.
   5  */
   6
   7 .fl-icon {
   8     -moz-border-radius: 5px;
   9 }
  10
  11 /*****************************************/
  12 /*                                       */
  13 /*                                       */
  14 /*         fl-theme-android              */
  15 /*                                       */
  16 /*                                       */
  17 /*****************************************/
  18
  19 .fl-theme-android h1,
  20 .fl-theme-android h2,
  21 .fl-theme-android h3 {
  22     background: #999 -moz-linear-gradient(
  23         center top,
  24         #ccc,
  25         #999) no-repeat top left;
  26 }
  27
  28 /***************************************/
  29 /* Navigation Bar */
  30
  31 .fl-theme-android .fl-navbar {
  32     background-image: -moz-linear-gradient(
  33         center top,
  34         #666,
  35         #333 50%,
  36         #000 50%,
  37         #000
  38     );
  39     -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
  40 }
  41
  42 .fl-theme-android .fl-navbar .fl-button {
  43     -moz-border-image:none;
  44     background-image: -moz-linear-gradient(
  45         center top,
  46         #444,
  47         #666 50%,
  48         #333 50%,
  49         #000
  50     );
  51 }
  52 .fl-theme-android .fl-navbar [class*=fl-button]:active {
  53     background-image: -moz-linear-gradient(
  54         center top,
  55         #ffb347,
  56         #ff702f
  57     );
  58 }
  59
  60 .fl-theme-android .fl-navbar .fl-backButton {
  61     -moz-border-image: url(../images/themes/android/navbar_back_button_insetShadow.png) 0 15 stretch;
  62 }
  63
  64 .fl-theme-android .fl-navbar .fl-button-inner {
  65     -moz-border-image: url(../images/themes/android/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
  66 }
  67
  68 /***************************************/
  69 /* general purpose gel buttons */
  70 /* effect is applied anywhere but the navbar, which has its own button look */
  71
  72 .fl-theme-android .fl-button {
  73     -moz-border-image: url(../images/themes/android/button_bg_insetShadow.png) 10 stretch;
  74     -moz-background-origin: border;
  75     -moz-background-clip: border;
  76 }
  77 .fl-theme-android .fl-button-white {
  78     background-image: -moz-linear-gradient(
  79         center top,
  80         rgba(240,240,240,0.25),
  81         rgba(220,220,220,0.75),
  82         rgba(240,240,240,1) 50%,
  83         rgba(200,200,200,0.8) 50%
  84     );
  85 }
  86 .fl-theme-android .fl-button-black {
  87     background-image: -moz-linear-gradient(
  88         center top,
  89         rgba(106,106,106,0.25),
  90         rgba(00,00,00,0.75),
  91         rgba(130,130,130,1)  50%,
  92         rgba(75,75,75,0.8) 50%
  93     );
  94 }
  95 .fl-theme-android .fl-button-green {
  96     background-image: -moz-linear-gradient(
  97         center top,
  98         rgba(120,190,130,0.2),
  99         rgba(50,170,60,0.75),
 100         rgba(120,190,130,1) 50%,
 101         rgba(0,150,10,0.8) 50%
 102     );
 103 }
 104 .fl-theme-android .fl-button-blue {
 105     background-image: -moz-linear-gradient(
 106         center top,
 107         rgba(149, 184, 239,0.2),
 108         rgba(35,109,229,0.75),
 109         rgba(149, 184, 239,1)  50%,
 110         rgba(75,148,244,0.8) 50%
 111     );
 112 }
 113 /***************************************/
 114 /* tabs 1: small general purpose content dividers */
 115 .fl-theme-android .fl-tabs li {
 116     background-image: -moz-linear-gradient(
 117         center top,
 118         #666,
 119         #666 50%,
 120         #000 50%,
 121         #000
 122     );
 123     -moz-border-image: url(../images/themes/android/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
 124     -moz-border-left-image: none;
 125     -moz-background-origin: border;
 126     -moz-background-clip: border;
 127 }
 128
 129 .fl-theme-android .fl-tabs .fl-tabs-active {
 130     background-image: -moz-linear-gradient(
 131         center top,
 132         #ff702f,
 133         #ffb347
 134     );
 135 }
 136
 137 /*************************************************/
 138 /* Ordered lists, Unordererd lists, Thumbnail lists, Icon lists, Definition lists */
 139 /*************************************************/
 140 /* Default list system setup */
 141
 142 .fl-theme-android [class*=fl-list] > li {
 143     background: transparent -moz-radial-gradient(center 45deg, circle farthest-side,
 144         #FFF 0%,
 145         #000 100%) no-repeat bottom center;;
 146     -moz-background-size: 100% 1px;
 147 }
 148
 149 /* A simulation for a:active on the device, requires JS */
 150 .fl-theme-android [class*=fl-list]:not(.fl-list):not(.fl-grid) a:active,
 151 .fl-theme-android [class*=fl-list]:not(.fl-list):not(.fl-grid) a.fl-link-hilight {
 152     background: -moz-linear-gradient(
 153         center top,
 154         #ffb347,
 155         #ff702f);
 156 }
 157
 158 .fl-theme-android [class*=fl-list]:not(.fl-list) a.fl-link-loading {
 159     background: url(../images/themes/android/listmenu_loader.gif) no-repeat 97% center,
 160                         -moz-linear-gradient(
 161         center top,
 162         #ffb347,
 163         #ff702f);
 164 }
 165
 166 /***************************************/
 167 /* Grid overrides, removes nav coloring */
 168
 169 .fl-theme-android .fl-grid li a:active,
 170 .fl-theme-android .fl-grid .fl-link-hilight {
 171     background: -moz-linear-gradient(
 172         center top,
 173         #ffb347, #ff702f);
 174 }
 175
 176 /****************************/
 177 /* Collapsing and expanding panels */
 178
 179 .fl-theme-android .fl-container-autoHeading > *:first-child {
 180     background: -moz-linear-gradient(
 181         center top,
 182         #CCC, #999);
 183 }
 184 .fl-theme-android .fl-container-autoHeading > *:first-child:focus {
 185     background: -moz-linear-gradient(
 186         center top,
 187         #FFF,
 188         #CCC);
 189 }
 190 .fl-theme-android .fl-container-autoHeading > :last-child {
 191         background: transparent
 192         -moz-radial-gradient(50% 0, circle, rgba(100,100,100,1) 0%, rgba(0,0,0,0) 100%);
 193     );
 194 }
 195
 196 /*****************************************/
 197 /*                                       */
 198 /*                                       */
 199 /*         fl-theme-iphone               */
 200 /*                                       */
 201 /*                                       */
 202 /*****************************************/
 203
 204 .fl-theme-iphone {
 205     background: -moz-repeating-linear-gradient(top left 0deg, #c5ccd3, #c5ccd3 1px, #cfd5dd 10px, #c5ccd3 10px);
 206 }
 207
 208
 209 /***************************************/
 210 /* Navigation Bar */
 211
 212 .fl-theme-iphone .fl-navbar {
 213     background-image: -moz-linear-gradient(
 214         center top,
 215         #B0BCCD,
 216         #889BB3 50%,
 217         #6D84A2 50%,
 218         #6D84A2
 219     )
 220 }
 221
 222 .fl-theme-iphone .fl-navbar .fl-button {
 223     -moz-border-image:none;
 224     background-image: -moz-linear-gradient(
 225         center top,
 226         #9aafca,
 227         #6d8cb3 50%,
 228         #4b6b90 50%,
 229         #4b6b90
 230     );
 231 }
 232
 233 .fl-theme-iphone .fl-navbar [class*=fl-button]:active {
 234     background-image: -moz-linear-gradient(
 235         center top,
 236         rgba(149, 184, 239,1),
 237         rgba(35,109,229,1),
 238         rgba(149, 184, 239,1) 35%,
 239         rgba(75,148,244,1) 50%
 240     );
 241 }
 242
 243 .fl-theme-iphone .fl-navbar .fl-backButton {
 244     /* See mobile layout for details */
 245     -moz-border-image: url(../images/themes/iphone/navbar_back_button_insetShadow.png) 0 15 stretch;
 246 }
 247
 248 .fl-theme-iphone .fl-navbar .fl-button-inner {
 249     -moz-border-image: url(../images/themes/iphone/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
 250 }
 251
 252
 253 /***************************************/
 254 /* general purpose gel buttons */
 255 /* effect is applied anywhere but the navbar, which has its own button look */
 256
 257 .fl-theme-iphone .fl-button {
 258     -moz-border-image: url(../images/themes/iphone/button_bg_insetShadow.png) 10 stretch stretch;
 259     -moz-background-origin: border;
 260     -moz-background-clip: border;
 261 }
 262 .fl-theme-iphone .fl-button-white {
 263     background-image: -moz-linear-gradient(center top,
 264         rgba(240,240,240,0.25),
 265         rgba(220,220,220,0.75),
 266         rgba(240,240,240,1),
 267         rgba(200,200,200,0.8)
 268     );
 269 }
 270 .fl-theme-iphone .fl-button-black {
 271     background-image: -moz-linear-gradient(center top,
 272         rgba(106,106,106,0.25),
 273         rgba(00,00,00,0.75),
 274         rgba(130,130,130,1),
 275         rgba(75,75,75,0.8)
 276     );
 277 }
 278 .fl-theme-iphone .fl-button-green {
 279     background-image: -moz-linear-gradient(center top,
 280         rgba(120,190,130,0.2),
 281         rgba(50,170,60,0.75),
 282         rgba(120,190,130,1),
 283         rgba(0,150,10,0.8)
 284     );
 285 }
 286 .fl-theme-iphone .fl-button-blue {
 287     background-image: -moz-linear-gradient(center top,
 288         rgba(149, 184, 239,0.2),
 289         rgba(35,109,229,0.75),
 290         rgba(149, 184, 239,1),
 291         rgba(75,148,244,0.8)
 292     );
 293 }
 294
 295 /***************************************/
 296 /* tabs 1: small general purpose content dividers */
 297
 298 .fl-theme-iphone .fl-tabs li {
 299     background-image: -moz-linear-gradient(
 300         center top,
 301         #9aafca,
 302         #4b6b90,
 303         #6d8cb3 50%,
 304         #4b6b90 50%
 305     );
 306     -moz-border-image: url(../images/themes/iphone/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
 307     -moz-background-origin: border;
 308     -moz-background-clip: border;
 309 }
 310
 311 .fl-theme-iphone .fl-tabs .fl-tabs-active {
 312     background-image: -moz-linear-gradient(
 313         center top,
 314         rgba(149, 184, 239,1),
 315         rgba(35,109,229,1),
 316         rgba(149, 184, 239,1)  50%,
 317         rgba(75,148,244,1) 50%
 318     );
 319 }
 320
 321 /* A simulation for a:active on the device, requires JS */
 322 /* since .fl-list is for mixed material lists, dont include them in these effects */
 323 .fl-theme-iphone [class*=fl-list]:not(.fl-list):not(.fl-grid) a:active,
 324 .fl-theme-iphone [class*=fl-list]:not(.fl-list):not(.fl-grid) a.fl-link-hilight {
 325     background: url(../images/themes/iphone/listmenu_arrow.png) no-repeat right -25px,
 326                 -moz-linear-gradient(#4a94f4, #236de5);
 327 }
 328
 329 .fl-theme-iphone [class*=fl-list]:not(.fl-list) a.fl-link-loading {
 330     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
 331                  -moz-linear-gradient(center top, #4a94f4, #236de5);
 332 }
 333
 334 /****************************/
 335 /* Collapsing and expanding panels */
 336 .fl-theme-iphone .fl-container-autoHeading > *:first-child {
 337     background: -moz-linear-gradient(center top, #999, #000);
 338 }
 339 .fl-theme-iphone .fl-container-autoHeading > *:first-child:focus {
 340     background: -moz-linear-gradient(center top, #FFF, #CCC);
 341 }
 342
 343
 344
 345 /*****************************************/
 346 /*                                       */
 347 /*                                       */
 348 /* Originates from fss-mobile-layout.css */
 349 /*                                       */
 350 /*                                       */
 351 /*****************************************/
 352
 353
 354
 355 /***************************************/
 356 /**
 357  * Basic overrides for fss layout
 358  */
 359
 360 .fl-icon {
 361     -moz-border-radius: 5px;
 362 }
 363
 364 /***************************************/
 365 /* iPhone general purpose gel buttons */
 366 /* effect is applied anywhere but the navbar, which has its own button look */
 367
 368 .fl-button {
 369     -moz-border-radius: 10px;
 370 }
 371
 372 .fl-navbar .fl-button-inner {
 373     -moz-background-origin: border;
 374     -moz-background-clip: border;
 375 }
 376
 377
 378 /*************************************************/
 379 /* Navigation Bar
 380  */
 381 .fl-navbar [class*=fl-button] {
 382     -moz-border-radius: 5px;
 383 }
 384
 385 .fl-navbar .fl-backButton {
 386     -moz-border-radius: 0 5px 5px 0;
 387     -moz-background-origin: border;
 388     -moz-background-clip: border;
 389 }
 390
 391
 392
 393 /*************************************************/
 394 /* iPhone tabs: general purpose dividers, or fixed to the bottom of the screen
 395  */
 396 /*************************************************/
 397
 398 .fl-tabs li:first-child {
 399     -moz-border-radius-topleft:5px;
 400     -moz-border-radius-bottomleft:5px;
 401 }
 402 .fl-tabs li:last-child {
 403     -moz-border-radius-topright:5px;
 404     -moz-border-radius-bottomright:5px;
 405 }
 406
 407 /*************************************************/
 408 /* Glossy icons (and thumbnails?) */
 409
 410 /* Glossiness for 30x30 icons */
 411 .fl-list-glossy > li a::before {
 412     -moz-border-radius: 3px;
 413 }
 414
 415 /*************************************************/
 416 /* Content Panels */
 417 /*************************************************/
 418 [class*=fl-container] [class*=fl-list] > li:first-child,
 419 [class*=fl-container] [class*=fl-list] > li:first-child a {
 420     -moz-border-radius-topleft: 8px;
 421     -moz-border-radius-topright: 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     -moz-border-radius-bottomleft:8px;
 427     -moz-border-radius-bottomright:8px;
 428 }
 429
 430 [class*=fl-container] [class*=fl-list]:not(.fl-thumbnails-expanded) > li a .fl-icon {
 431     -moz-border-radius-bottomleft:8px;
 432     -moz-border-radius-topleft: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     -moz-border-radius: 8px;
 438 }
 439 /* Panel Auto Headings */
 440 /* The first element found becomes the "heading" */
 441 .fl-container-autoHeading > *:first-child {
 442         -moz-border-radius-topleft: 8px;
 443         -moz-border-radius-topright: 8px;
 444 }
 445 /* The last element found becomes the "content" - list or otherwise */
 446 .fl-container-autoHeading > *:last-child {
 447         -moz-border-radius:0px;
 448         -moz-border-radius-bottomleft:8px;
 449         -moz-border-radius-bottomright:8px;
 450 }
 451 .fl-container-autoHeading [class*=fl-list] > li:first-child,
 452 .fl-container-autoHeading [class*=fl-list] > li:first-child a {
 453         -moz-border-radius:0;
 454 }
 455 .fl-container-autoHeading [class*=fl-list] > li:first-child:last-child,
 456 .fl-container-autoHeading [class*=fl-list] > li:first-child:last-child a {
 457         -moz-border-radius-bottomleft:8px;
 458         -moz-border-radius-bottomright:8px;
 459 }
 460
 461 /* Collapsing and expanding panels */
 462 .fl-container-collapsable {
 463         -moz-border-radius:8px;
 464 }