114 lines
4.5 KiB
CSS
114 lines
4.5 KiB
CSS
/*
|
|
Copyright (c) 2010 Ivan Vanderbyl
|
|
Originally found at http://ivan.ly/ui
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
of this software and associated documentation files (the "Software"), to deal
|
|
in the Software without restriction, including without limitation the rights
|
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
copies of the Software, and to permit persons to whom the Software is
|
|
furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included in
|
|
all copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
THE SOFTWARE.
|
|
|
|
*/
|
|
|
|
/* Bar which is placed behind the progress */
|
|
.ui-progress-bar {
|
|
/* Usual setup stuff */
|
|
position: relative;
|
|
top: 27px;
|
|
height: 18px;
|
|
width: 200px;
|
|
margin: 0 0 0 auto;
|
|
|
|
/* Pad right so we don't cover the borders when fully progressed */
|
|
padding-right: 2px;
|
|
|
|
/* For browser that don't support gradients, we'll set a blanket background colour */
|
|
background-color: #abb2bc;
|
|
|
|
/* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */
|
|
/* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress */
|
|
/*border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
-webkit-border-radius: 4px;*/
|
|
|
|
/* Webkit background gradient */
|
|
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
|
|
/* Mozilla background gradient */
|
|
background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
|
|
|
|
/* Give it the inset look by adding some shadows and highlights */
|
|
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
|
|
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
|
|
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
|
|
}
|
|
|
|
/* Progress part of the progress bar */
|
|
.ui-progress {
|
|
/* Usual setup stuff */
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
|
|
/* Height should be 2px less than .ui-progress-bar so as to not cover borders and give it a look of being inset */
|
|
height: 16px;
|
|
|
|
/* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */
|
|
/* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress-bar */
|
|
/*-moz-border-radius: 4px;
|
|
-webkit-border-radius: 4px;
|
|
border-radius: 4px;*/
|
|
|
|
/* Set the background size so the stripes work correctly */
|
|
-webkit-background-size: 44px 44px; /* Webkit */
|
|
|
|
/* For browser that don't support gradients, we'll set a blanket background colour */
|
|
background-color: #74d04c;
|
|
|
|
/* Webkit background stripes and gradient */
|
|
background: -webkit-gradient(linear, 0 0, 44 44,
|
|
color-stop(0.00, rgba(255,255,255,0.17)),
|
|
color-stop(0.25, rgba(255,255,255,0.17)),
|
|
color-stop(0.26, rgba(255,255,255,0)),
|
|
color-stop(0.50, rgba(255,255,255,0)),
|
|
color-stop(0.51, rgba(255,255,255,0.17)),
|
|
color-stop(0.75, rgba(255,255,255,0.17)),
|
|
color-stop(0.76, rgba(255,255,255,0)),
|
|
color-stop(1.00, rgba(255,255,255,0))
|
|
), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
|
|
|
|
/* Mozilla (Firefox etc) background stripes */
|
|
/* Note: Mozilla's support for gradients is more true to the original design, allowing gradients at 30 degrees, as apposed to 45 degress in webkit. */
|
|
background: -moz-repeating-linear-gradient(top left -30deg,
|
|
rgba(255,255,255,0.17),
|
|
rgba(255,255,255,0.17) 15px,
|
|
rgba(255,255,255,0) 15px,
|
|
rgba(255,255,255,0) 30px
|
|
), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
|
|
|
|
/* Webkit embossing */
|
|
-webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
|
|
/* Mozilla embossing */
|
|
-moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
|
|
/* IE9 and Opera embossing */
|
|
box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
|
|
|
|
/* Give it a higher contrast outline */
|
|
border: 1px solid #4c8932;
|
|
}
|
|
|
|
/* Progress indicator text */
|
|
.ui-progress span.ui-label {
|
|
display: none;
|
|
} |