jscripts/infusion/framework/fss/css/fss-mobile-theme-iphone.css

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