docs/jscripts/infusion/framework/fss/css/fss-mobile-theme-android.css

   1 /***************************************/
   2 /* general styles */
   3 .fl-theme-android {
   4     background:#222;
   5     color:#fff;
   6 }
   7
   8 .fl-theme-android .fl-bevel-black {
   9     text-shadow: rgba(0,0,0,0.35) 0px -1px 0px;
  10 }
  11 .fl-theme-android .fl-bevel-white {
  12     text-shadow: rgba(200,200,200,0.85) 0px 1px 0px;
  13 }
  14
  15 .fl-theme-android a {
  16     -webkit-touch-callout:none; /* prevents iphone popup menu to copy / follow / bookmark a particular link */
  17     -webkit-tap-highlight-color: rgba(0,0,0,0);
  18     text-decoration:none;
  19     color:#fff;
  20 }
  21
  22 .fl-theme-android h1,
  23 .fl-theme-android h2,
  24 .fl-theme-android h3 {
  25     text-shadow: rgba(255,255,255,1) 0px 1px 0px;
  26     color:#000;
  27     background: #999 -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)) no-repeat top left;
  28 }
  29
  30 /***************************************/
  31 /* Navigation Bar */
  32
  33 .fl-theme-android .fl-navbar {
  34     border-top-color:#333;
  35     border-bottom-color:#000;
  36     background-image: -webkit-gradient(linear, left top, left bottom,
  37         from(#666),
  38         color-stop(0.5, #333),
  39         color-stop(0.50, #000),
  40         to(#000)
  41     );
  42     -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
  43 }
  44
  45 .fl-theme-android .fl-navbar {
  46     color:#fff;
  47 }
  48
  49 .fl-theme-android .fl-navbar h1 {
  50     color:#fff;
  51     background:transparent;
  52     text-shadow: rgba(0,0,0,0.5) 0px -1px 0px;
  53 }
  54 .fl-theme-android .fl-navbar a {
  55         color: #fff;
  56     text-shadow: rgba(0,0,0,0.5) 0px -1px 0px;
  57 }
  58 .fl-theme-android .fl-navbar .fl-button {
  59     -webkit-border-image:none;
  60     background-image: -webkit-gradient(linear, left top, left bottom,
  61         from(#444),
  62         color-stop(0.5, #666),
  63         color-stop(0.50, #333),
  64         to(#000)
  65     );
  66 }
  67 .fl-theme-android .fl-navbar [class*=fl-button]:active {
  68     background-image: -webkit-gradient(linear, left top, left bottom,
  69         from(#ffb347),
  70         to(#ff702f)
  71     );
  72 }
  73
  74 .fl-theme-android .fl-navbar .fl-backButton {
  75     /* See mobile layout for details */
  76     -webkit-border-image: url(../images/themes/android/navbar_back_button_insetShadow.png) 0 15 stretch;
  77     -webkit-mask-box-image: url(../images/themes/android/backbutton_mask.png) 0 15 stretch;
  78 }
  79
  80 .fl-theme-android .fl-navbar .fl-button-inner {
  81     -webkit-border-image: url(../images/themes/android/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
  82 }
  83
  84 /***************************************/
  85 /* general purpose gel buttons */
  86 /* effect is applied anywhere but the navbar, which has its own button look */
  87 .fl-theme-android .fl-button {
  88     text-decoration:none;
  89     font-weight:bold;
  90     -webkit-border-image: url(../images/themes/android/button_bg_insetShadow.png) 10 stretch;
  91 }
  92 .fl-theme-android .fl-button.fl-bevel-white {
  93     color:#333333;
  94 }
  95 .fl-theme-android .fl-button.fl-bevel-black {
  96     color:#FFFFFF;
  97 }
  98 .fl-theme-android .fl-button-white {
  99     background-image: -webkit-gradient(linear, left top, left bottom,
 100         from(rgba(240,240,240,0.25)),
 101         to(rgba(220,220,220,0.75)),
 102         color-stop(0.5, rgba(240,240,240,1)),
 103         color-stop(0.50, rgba(200,200,200,0.8))
 104     );
 105 }
 106 .fl-theme-android .fl-button-black {
 107     background-image: -webkit-gradient(linear, left top, left bottom,
 108         from(rgba(106,106,106,0.25)),
 109         to(rgba(00,00,00,0.75)),
 110         color-stop(0.5, rgba(130,130,130,1)),
 111         color-stop(0.50, rgba(75,75,75,0.8))
 112     );
 113 }
 114 .fl-theme-android .fl-button-green {
 115     background-image: -webkit-gradient(linear, left top, left bottom,
 116         from(rgba(120,190,130,0.2)),
 117         to(rgba(50,170,60,0.75)),
 118         color-stop(0.5, rgba(120,190,130,1)),
 119         color-stop(0.50, rgba(0,150,10,0.8))
 120     );
 121 }
 122 .fl-theme-android .fl-button-blue {
 123     background-image: -webkit-gradient(linear, left top, left bottom,
 124         from(rgba(149, 184, 239,0.2)),
 125         to(rgba(35,109,229,0.75)),
 126         color-stop(0.5, rgba(149, 184, 239,1)),
 127         color-stop(0.50, rgba(75,148,244,0.8))
 128     );
 129 }
 130 /***************************************/
 131 /* tabs 1: small general purpose content dividers */
 132 .fl-theme-android .fl-tabs li {
 133     background-image: -webkit-gradient(linear, left top, left bottom,
 134         from(#666),
 135         color-stop(0.5, #666),
 136         color-stop(0.50, #000),
 137         to(#000)
 138     );
 139     -webkit-border-image: url(../images/themes/android/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
 140     -webkit-border-left-image: none;
 141     -webkit-background-origin: border;
 142     -webkit-background-clip: border;
 143 }
 144
 145 .fl-theme-android .fl-tabs li a {
 146         color:#fff;
 147 }
 148
 149 .fl-theme-android .fl-tabs li a,
 150 .fl-theme-android .fl-tabs .fl-tabs-active a {
 151     border-right-color:rgba(255,255,255,0.35);
 152     border-left-color:rgba(0,0,0,1);
 153 }
 154
 155 .fl-theme-android .fl-tabs .fl-tabs-active {
 156     background-image: -webkit-gradient(linear, left top, left bottom,
 157         from(#ff702f),
 158         to(#ffb347)
 159     );
 160 }
 161 .fl-theme-android .fl-tabs .fl-tabs-active a {
 162     color:#000;
 163     text-shadow:none;
 164 }
 165
 166 /*************************************************/
 167 /* Ordered lists, Unordererd lists, Thumbnail lists, Icon lists, Definition lists */
 168 /*************************************************/
 169 /* Default list system setup */
 170
 171 .fl-theme-android .fl-list a {
 172     color:#ffb347;
 173 }
 174 .fl-theme-android .fl-list-menu a {
 175     color:#fff;
 176 }
 177
 178 .fl-theme-android [class*=fl-list] > li {
 179         color: #fff;
 180     background:transparent -webkit-gradient(linear, left bottom, right bottom,
 181         from(rgba(0,0,0,0)),
 182         to(rgba(0,0,0,0)),
 183         color-stop(0.35, rgba(255,255,255,1)),
 184         color-stop(0.75, rgba(255,255,255,1))
 185     ) no-repeat bottom center;
 186
 187     -webkit-background-size: 100% 1px;
 188 }
 189
 190 .fl-theme-android [class*=fl-list] > li:last-child {
 191     background:transparent;
 192 }
 193
 194 /* secondary link info behaviour */
 195 .fl-theme-android [class*=fl-list] > li .fl-link-secondary {
 196     color: #fff;
 197 }
 198
 199  /* summary link info ehaviour */
 200 .fl-theme-android [class*=fl-list] > li .fl-link-summary {
 201     color:#999;
 202 }
 203
 204 .fl-theme-android [class*=fl-list]:not(.fl-list):not(.fl-grid) a {
 205 }
 206
 207 /* A simulation for a:active on the device, requires JS */
 208 .fl-theme-android [class*=fl-list]:not(.fl-list):not(.fl-grid) a:active,
 209 .fl-theme-android [class*=fl-list]:not(.fl-list):not(.fl-grid) a.fl-link-hilight {
 210         color: #000;
 211     background: -webkit-gradient(linear, left top, left bottom, from(#ffb347), to(#ff702f));
 212 }
 213
 214 .fl-theme-android [class*=fl-list]:not(.fl-list) a:active,
 215 .fl-theme-android [class*=fl-list]:not(.fl-list) a:active .fl-link-secondary,
 216 .fl-theme-android [class*=fl-list]:not(.fl-list) a:active .fl-link-summary,
 217 .fl-theme-android [class*=fl-list]:not(.fl-list) a.fl-link-loading * {
 218     color: #000;
 219 }
 220
 221 .fl-theme-android [class*=fl-list]:not(.fl-list) a.fl-link-loading {
 222     color: #fff;
 223     background: url(../images/themes/android/listmenu_loader.gif) no-repeat 97% center,
 224                         -webkit-gradient(linear, left top, left bottom, from(#ffb347), to(#ff702f));
 225 }
 226
 227 /***************************************/
 228 /* Grid overrides, removes nav coloring */
 229 .fl-theme-android .fl-grid li {
 230     background-color:transparent;
 231 }
 232 .fl-theme-android .fl-grid li,
 233 .fl-theme-android .fl-grid li a {
 234     background-image:none;
 235     border:none;
 236 }
 237 .fl-theme-android .fl-grid li a {
 238     background-color:#333;
 239 }
 240 .fl-theme-android .fl-grid li a:active,
 241 .fl-theme-android .fl-grid .fl-link-hilight {
 242         color: #fff;
 243     background: -webkit-gradient(linear, left top, left bottom, from(#ffb347), to(#ff702f));
 244 }
 245 .fl-theme-android .fl-grid .fl-grid-caption {
 246         font-weight:normal;
 247 }
 248 /***************************************/
 249 /* instructional text (usually embossed too)*/
 250 .fl-theme-android .fl-note {
 251     color:#999;
 252 }
 253
 254 /****************************/
 255 /* Collapsing and expanding panels */
 256 .fl-theme-android .fl-container-autoHeading > *:first-child {
 257     color:#444;
 258     background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#999));
 259         text-shadow:rgba(0, 0, 0, 0.292969) 0px 2px 2px;
 260 }
 261 .fl-theme-android .fl-container-autoHeading > *:first-child:focus {
 262     color:#000;
 263     background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
 264 }
 265 .fl-theme-android .fl-container-autoHeading > :last-child {
 266         background: transparent -webkit-gradient(radial, 50% 0, 10, 50% 0%, 300,
 267         from(rgba(100,100,100,1)),
 268         to(rgba(0,0,0,0))
 269     );
 270         border-color:#666;
 271         border-style:solid;
 272 }
 273
 274 /****************************/
 275 /* Gloss tint for glossy icons/thumbnails */
 276
 277 .fl-theme-android .fl-list-glossy > li a::before {
 278     background-image: -webkit-gradient(radial, 50% -15%, 10, 50% -50%, 45, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)), color-stop(90%, rgba(255,255,255,.65)));
 279 }