X-Git-Url: https://nos-oignons.net/gitweb/website.git/blobdiff_plain/7f8f5dcc0a3f6b00b1aa35a496be65c3dfd6d9df..bad8c599a997f4150514d476e8e58336671d0c97:/local.css diff --git a/local.css b/local.css index e6349f7..bf876b1 100644 --- a/local.css +++ b/local.css @@ -382,7 +382,7 @@ thead td { /* Progress bar */ .progress-bar-wrapper { - margin: 1em auto; + margin: 2em auto; height: 85px; width: 600px; background: lightGrey url(assets/progress_bar.png) top left repeat-x; @@ -391,6 +391,7 @@ thead td { position: relative; } .progress-bar-wrapper .progress-bar { + position: absolute; height: 85px; background: grey url(assets/progress_bar.png) bottom left repeat-x; /* animate progress bar */ @@ -404,10 +405,24 @@ thead td { @-moz-keyframes progress-bar { 0% { width: 0; } } keyframes progress-bar { 0% { width: 0; } } - .progress-bar-wrapper:after { + /* Current amount */ + .progress-bar-wrapper .progress-bar:after { + content: attr(data-current); + display: block; + position: absolute; + top: -22px; + right: 0; + background: #fff; + color: #ccc; + font-size: 0.9em; + } + + /* Temperature bar */ + .progress-bar-wrapper:before { content: " "; display: block; position: absolute; + z-index: 1; bottom: -5px; left: -1px; height: 5px; @@ -423,6 +438,18 @@ thead td { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#66ff00',GradientType=1 ); /* IE6-9 */ } + /* Annual budget */ + .progress-bar-wrapper:after { + content: attr(data-total); + display: block; + position: absolute; + top: -22px; + right: 0; + background: #fff; + color: #ccc; + font-size: 0.9em; + } + /* FDN Form */