openo-portal/portal-common/src/main/webapp/common/thirdparty/uniform/css/uniform.default.css

   1 /*\r
   2 \r
   3 Uniform Theme: Uniform Default\r
   4 Version: 1.8\r
   5 By: Josh Pyles\r
   6 License: MIT License\r
   7 ---\r
   8 For use with the Uniform plugin:\r
   9 http://uniformjs.com/\r
  10 \r
  11 */\r
  12 /* General settings */\r
  13 div.selector, div.selector span, div.checker span, div.radio span, div.uploader, div.uploader span.action, div.button, div.button span {\r
  14   background-image: url("../images/sprite.png");\r
  15   background-repeat: no-repeat;\r
  16   -webkit-font-smoothing: antialiased; }\r
  17 div.selector, div.checker, div.button, div.radio, div.uploader {\r
  18   display: -moz-inline-box;\r
  19   display: inline-block;\r
  20   *display: inline;\r
  21   zoom: 1;\r
  22   vertical-align: middle;\r
  23   /* Keeping this as :focus to remove browser styles */ }\r
  24   div.selector:focus, div.checker:focus, div.button:focus, div.radio:focus, div.uploader:focus {\r
  25     outline: 0; }\r
  26 div.selector, div.selector *, div.radio, div.radio *, div.checker, div.checker *, div.uploader, div.uploader *, div.button, div.button * {\r
  27   margin: 0;\r
  28   padding: 0; }\r
  29 \r
  30 .highContrastDetect {\r
  31   background: url("../images/bg-input.png") repeat-x 0 0;\r
  32   width: 0px;\r
  33   height: 0px; }\r
  34 \r
  35 /* Input & Textarea */\r
  36 input.uniform-input,\r
  37 select.uniform-multiselect,\r
  38 textarea.uniform {\r
  39   padding: 3px;\r
  40   background: url("../images/bg-input.png") repeat-x 0 0;\r
  41   outline: 0; }\r
  42   input.uniform-input.active,\r
  43   select.uniform-multiselect.active,\r
  44   textarea.uniform.active {\r
  45     background: url("../images/bg-input-focus.png") repeat-x 0 0; }\r
  46 \r
  47 /* Remove default webkit and possible mozilla .search styles.\r
  48  * Keeping this as :active to remove browser styles */\r
  49 div.checker input,\r
  50 input[type="search"],\r
  51 input[type="search"]:active {\r
  52   -moz-appearance: none;\r
  53   -webkit-appearance: none; }\r
  54 \r
  55 /* Select */\r
  56 div.selector {\r
  57   background-position: 0 -130px;\r
  58   line-height: 26px;\r
  59   height: 26px;\r
  60   padding: 0 0 0 10px;\r
  61   position: relative;\r
  62   overflow: hidden; }\r
  63   div.selector span {\r
  64     text-overflow: ellipsis;\r
  65     display: block;\r
  66     overflow: hidden;\r
  67     white-space: nowrap;\r
  68     background-position: right 0;\r
  69     height: 26px;\r
  70     line-height: 26px;\r
  71     padding-right: 25px;\r
  72     cursor: pointer;\r
  73     width: 100%;\r
  74     display: block; }\r
  75   div.selector.fixedWidth {\r
  76     width: 190px; }\r
  77     div.selector.fixedWidth span {\r
  78       width: 155px; }\r
  79   div.selector select {\r
  80     opacity: 0;\r
  81     filter: alpha(opacity=0);\r
  82     -moz-opacity: 0;\r
  83     border: none;\r
  84     background: none;\r
  85     position: absolute;\r
  86     height: 22px;\r
  87     top: 2px;\r
  88     left: 0px;\r
  89     width: 100%; }\r
  90   div.selector.active {\r
  91     background-position: 0 -156px; }\r
  92     div.selector.active span {\r
  93       background-position: right -26px; }\r
  94   div.selector.hover, div.selector.focus {\r
  95     background-position: 0 -182px; }\r
  96     div.selector.hover span, div.selector.focus span {\r
  97       background-position: right -52px; }\r
  98     div.selector.hover.active, div.selector.focus.active {\r
  99       background-position: 0 -208px; }\r
 100       div.selector.hover.active span, div.selector.focus.active span {\r
 101         background-position: right -78px; }\r
 102   div.selector.disabled, div.selector.disabled.active {\r
 103     background-position: 0 -234px; }\r
 104     div.selector.disabled span, div.selector.disabled.active span {\r
 105       background-position: right -104px; }\r
 106 \r
 107 /* Checkbox */\r
 108 div.checker {\r
 109   position: relative; }\r
 110   div.checker, div.checker span, div.checker input {\r
 111     width: 19px;\r
 112     height: 19px; }\r
 113   div.checker span {\r
 114     display: -moz-inline-box;\r
 115     display: inline-block;\r
 116     *display: inline;\r
 117     zoom: 1;\r
 118     text-align: center;\r
 119     background-position: 0 -260px; }\r
 120     div.checker span.checked {\r
 121       background-position: -76px -260px; }\r
 122   div.checker input {\r
 123     opacity: 0;\r
 124     filter: alpha(opacity=0);\r
 125     -moz-opacity: 0;\r
 126     border: none;\r
 127     background: none;\r
 128     display: -moz-inline-box;\r
 129     display: inline-block;\r
 130     *display: inline;\r
 131     zoom: 1; }\r
 132   div.checker.active span {\r
 133     background-position: -19px -260px; }\r
 134     div.checker.active span.checked {\r
 135       background-position: -95px -260px; }\r
 136   div.checker.hover span, div.checker.focus span {\r
 137     background-position: -38px -260px; }\r
 138     div.checker.hover span.checked, div.checker.focus span.checked {\r
 139       background-position: -114px -260px; }\r
 140   div.checker.hover.active span, div.checker.focus.active span {\r
 141     background-position: -57px -260px; }\r
 142     div.checker.hover.active span.checked, div.checker.focus.active span.checked {\r
 143       background-position: -133px -260px; }\r
 144   div.checker.disabled, div.checker.disabled.active {\r
 145     background-position: -152px -260px; }\r
 146     div.checker.disabled span.checked, div.checker.disabled.active span.checked {\r
 147       background-position: -171px -260px; }\r
 148 \r
 149 /* Radio */\r
 150 div.radio {\r
 151   position: relative; }\r
 152   div.radio, div.radio span, div.radio input {\r
 153     width: 18px;\r
 154     height: 18px; }\r
 155   div.radio span {\r
 156     display: -moz-inline-box;\r
 157     display: inline-block;\r
 158     *display: inline;\r
 159     zoom: 1;\r
 160     text-align: center;\r
 161     background-position: 0 -279px; }\r
 162     div.radio span.checked {\r
 163       background-position: -72px -279px; }\r
 164   div.radio input {\r
 165     opacity: 0;\r
 166     filter: alpha(opacity=0);\r
 167     -moz-opacity: 0;\r
 168     border: none;\r
 169     background: none;\r
 170     display: -moz-inline-box;\r
 171     display: inline-block;\r
 172     *display: inline;\r
 173     zoom: 1;\r
 174     text-align: center; }\r
 175   div.radio.active span {\r
 176     background-position: -18px -18px -279px; }\r
 177     div.radio.active span.checked {\r
 178       background-position: -90px -279px; }\r
 179   div.radio.hover span, div.radio.focus span {\r
 180     background-position: -36px -36px -279px; }\r
 181     div.radio.hover span.checked, div.radio.focus span.checked {\r
 182       background-position: -108px -279px; }\r
 183   div.radio.hover.active span, div.radio.focus.active span {\r
 184     background-position: -54px -279px; }\r
 185     div.radio.hover.active span.checked, div.radio.focus.active span.checked {\r
 186       background-position: -126px -279px; }\r
 187   div.radio.disabled span, div.radio.disabled.active span {\r
 188     background-position: -144px -279px; }\r
 189     div.radio.disabled span.checked, div.radio.disabled.active span.checked {\r
 190       background-position: -162px -279px; }\r
 191 \r
 192 /* Uploader */\r
 193 div.uploader {\r
 194   background-position: 0 -297px;\r
 195   height: 28px;\r
 196   width: 190px;\r
 197   cursor: pointer;\r
 198   position: relative;\r
 199   overflow: hidden; }\r
 200   div.uploader span.action {\r
 201     background-position: right -409px;\r
 202     height: 28px;\r
 203     line-height: 28px;\r
 204     width: 82px;\r
 205     text-align: center;\r
 206     float: left;\r
 207     display: inline;\r
 208     overflow: hidden;\r
 209     cursor: pointer; }\r
 210   div.uploader span.filename {\r
 211     text-overflow: ellipsis;\r
 212     display: block;\r
 213     overflow: hidden;\r
 214     white-space: nowrap;\r
 215     float: left;\r
 216     cursor: default;\r
 217     height: 24px;\r
 218     margin: 2px 0 2px 2px;\r
 219     line-height: 24px;\r
 220     width: 85px;\r
 221     padding: 0 10px; }\r
 222   div.uploader input {\r
 223     opacity: 0;\r
 224     filter: alpha(opacity=0);\r
 225     -moz-opacity: 0;\r
 226     border: none;\r
 227     background: none;\r
 228     position: absolute;\r
 229     top: 0;\r
 230     right: 0;\r
 231     float: right;\r
 232     cursor: default;\r
 233     width: 100%;\r
 234     height: 100%; }\r
 235   div.uploader.active span.action {\r
 236     background-position: right -465px; }\r
 237   div.uploader.hover, div.uploader.focus {\r
 238     background-position: 0 -353px; }\r
 239     div.uploader.hover span.action, div.uploader.focus span.action {\r
 240       background-position: right -437px; }\r
 241     div.uploader.hover.active span.action, div.uploader.focus.active span.action {\r
 242       background-position: right -493px; }\r
 243   div.uploader.disabled, div.uploader.disabled.active {\r
 244     background-position: 0 -325px; }\r
 245     div.uploader.disabled span.action, div.uploader.disabled.active span.action {\r
 246       background-position: right -381px; }\r
 247 \r
 248 /* Buttons */\r
 249 div.button {\r
 250   background-position: 0 -641px;\r
 251   height: 30px;\r
 252   cursor: pointer;\r
 253   position: relative;\r
 254   /* Keep buttons barely visible so they can get focus */ }\r
 255   div.button a, div.button button, div.button input {\r
 256     opacity: 0.01;\r
 257     filter: alpha(opacity=1);\r
 258     -moz-opacity: 0.01;\r
 259     display: block;\r
 260     top: 0;\r
 261     left: 0;\r
 262     right: 0;\r
 263     bottom: 0;\r
 264     position: absolute; }\r
 265   div.button span {\r
 266     display: -moz-inline-box;\r
 267     display: inline-block;\r
 268     *display: inline;\r
 269     zoom: 1;\r
 270     line-height: 22px;\r
 271     text-align: center;\r
 272     background-position: right -521px;\r
 273     height: 22px;\r
 274     margin-left: 13px;\r
 275     padding: 8px 15px 0 2px; }\r
 276   div.button.active {\r
 277     background-position: 0 -671px; }\r
 278     div.button.active span {\r
 279       background-position: right -551px;\r
 280       cursor: default; }\r
 281   div.button.hover, div.button.focus {\r
 282     background-position: 0 -701px; }\r
 283     div.button.hover span, div.button.focus span {\r
 284       background-position: right -581px; }\r
 285   div.button.disabled, div.button.disabled.active {\r
 286     background-position: 0 -731px; }\r
 287     div.button.disabled span, div.button.disabled.active span {\r
 288       background-position: right -611px;\r
 289       cursor: default; }\r
 290 \r
 291 /* INPUT & TEXTAREA */\r
 292 input.uniform-input,\r
 293 select.uniform-multiselect,\r
 294 textarea.uniform {\r
 295   font-size: 12px;\r
 296   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;\r
 297   font-weight: normal;\r
 298   color: #777;\r
 299   border-top: solid 1px #aaaaaa;\r
 300   border-left: solid 1px #aaaaaa;\r
 301   border-bottom: solid 1px #cccccc;\r
 302   border-right: solid 1px #cccccc;\r
 303   -webkit-border-radius: 3px;\r
 304   -moz-border-radius: 3px;\r
 305   border-radius: 3px; }\r
 306   input.uniform-input.hover, input.uniform-input.focus,\r
 307   select.uniform-multiselect.hover,\r
 308   select.uniform-multiselect.focus,\r
 309   textarea.uniform.hover,\r
 310   textarea.uniform.focus {\r
 311     -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);\r
 312     -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);\r
 313     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);\r
 314     border-color: #999; }\r
 315 \r
 316 /* PRESENTATION */\r
 317 /* Buttons */\r
 318 div.button span {\r
 319   font-weight: bold;\r
 320   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;\r
 321   font-size: 12px;\r
 322   letter-spacing: 1px;\r
 323   text-transform: uppercase; }\r
 324 div.button.hover span, div.button.focus span {\r
 325   color: #555; }\r
 326 div.button.disabled span, div.button.disabled.active span {\r
 327   color: #bbb; }\r
 328 \r
 329 /* Select */\r
 330 div.selector {\r
 331   font-size: 12px; }\r
 332   div.selector span {\r
 333     color: #666;\r
 334     text-shadow: 0 1px 0 white; }\r
 335   div.selector select {\r
 336     font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;\r
 337     font-size: 12px; }\r
 338   div.selector.disabled span, div.selector.disabled.active span {\r
 339     color: #bbb; }\r
 340 \r
 341 /* Checker */\r
 342 div.checker {\r
 343   margin-right: 5px; }\r
 344 \r
 345 /* Radio */\r
 346 div.radio {\r
 347   margin-right: 3px; }\r
 348 \r
 349 /* Uploader */\r
 350 div.uploader span.action {\r
 351   text-shadow: white 0px 1px 0px;\r
 352   background-color: #fff;\r
 353   font-size: 11px;\r
 354   font-weight: bold; }\r
 355 div.uploader span.filename {\r
 356   color: #777;\r
 357   border-right: solid 1px #bbbbbb;\r
 358   font-size: 11px; }\r
 359 div.uploader.disabled span.action, div.uploader.disabled.active span.action {\r
 360   color: #aaa; }\r
 361 div.uploader.disabled span.filename, div.uploader.disabled.active span.filename {\r
 362   border-color: #ddd;\r
 363   color: #aaa; }\r
 364 \r
 365 input.uniform-input, input.uniform-input:focus {\r
 366   background-color: #fff; }\r