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