Skip to content

Instantly share code, notes, and snippets.

@Erreur32
Created October 19, 2012 17:09
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Erreur32/3919374 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>UI Transparent</title>
</head>
<body>
<div class="container">
<h1>UI Transparent</h1>
<div class="buttons">
<h2>Buttons</h2>
<div class="circles">
<button>Download</button>
<button>Download</button>
<button>Download</button>
</div>
<div class="rectangles">
<button>Download</button>
<button>Download</button>
<button>Download</button>
</div>
<div class="warning">
<div class="box">
<i class="icon-warning-sign"></i>
<p>Not working in every background!</p>
</div>
</div>
</div>
<form class="" action="">
<h2>Inputs</h2>
<fieldset>
<div>
<div class="fake-input checkbox">
<span><input type="checkbox" id="checkbox1" value="checkbox1"></span>
</div>
<div class="fake-input checkbox">
<span><input type="checkbox" id="checkbox2" value="checkbox2"></span>
</div>
</div>
<div>
<div class="fake-input radio">
<span><input type="radio" name="radio" id="radio1" value="options1" checked></span>
</div>
<div class="fake-input radio">
<span><input type="radio" name="radio" id="radio2" value="options2"></span>
</div>
</div>
<div>
<div class="fake-input checkbox misc">
<span><input type="checkbox" id="checkbox1" value="checkbox1"></span>
</div>
<div class="fake-input checkbox misc">
<span><input type="checkbox" id="checkbox2" value="checkbox2"></span>
</div>
</div>
<div>
<div class="fake-input radio disk">
<span><input type="radio" name="radio" id="radio1" value="options1" checked></span>
</div>
<div class="fake-input radio disk">
<span><input type="radio" name="radio" id="radio2" value="options2"></span>
</div>
</div>
<div>
<div class="interrupt">
<div class="fake-input">
<span><input type="radio" name="radio" id="radio1" value="options1" checked></span>
</div>
<div class="fake-input">
<span class="hide"><input type="radio" name="radio" id="radio2" value="options2"></span>
</div>
</div>
<div class="interrupt small">
<div class="fake-input">
<span><input type="radio" name="radio" id="radio1" value="options1" checked></span>
</div>
<div class="fake-input">
<span class="hide"><input type="radio" name="radio" id="radio2" value="options2"></span>
</div>
</div>
</div>
<div class="password">
<div>
<input type="password" name="password" id="password" placeholder="password"/>
</div>
<div class="interrupt small">
<div class="fake-input">
<span class="hidepass"><input type="radio" name="radio" id="hidepass" value="options1" checked></span>
</div>
<div class="fake-input">
<span class="hide showpass"><input type="radio" name="radio" id="showpass" value="options2"></span>
</div>
</div>
<div>
<label for="" id="show-pass-text">show password</label>
</div>
</div>
</fieldset>
</form>
<h2>Progress bars</h2>
<div class="progressbars">
<progress max="100" value="35"></progress>
<progress class="gradiented" max="100" value="60"></progress>
<progress class="gradiented animated" max="100" value="100"></progress>
</div>
</div><!-- /container -->
</body>
</html>
(function( $ ){
/* ==========> =Global Variables ========== */
var $inputRadio = $('input[type="radio"], input[type="checkbox"]'),
$inputInterrupt = $('.interrupt input'),
$body = $('body'),
$bgButtons = $('.bgs button'),
$inputPass = $('input[type="password"]'),
$menuButton = $('.menu-bt');
$inputRadio.on('click', function(){
var $this = $(this);
$this.parent().addClass('checked');
$this.closest('div').siblings().find('span').removeClass('checked');
});
$inputInterrupt.on('click', function(){
var $this = $(this);
$this.parent().removeClass('hide');
$this.closest('div').siblings().find('span').addClass('hide');
});
$inputPass.each(function(index,input){
var $input = $(input),
inputType = $input.get(0).type,
$showPassText = $('#show-pass-text'),
showPassTextS = $showPassText.text();
$('#showpass').on('click', function(){
$input.get(0).type = 'text';
$showPassText.text('hide password');
});
$('#hidepass').on('click', function(){
$input.get(0).type = 'password';
$showPassText.text(showPassTextS);
});
});
$menuButton.on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $this = $(this);
$this.toggleClass('show-menu');
});
})(jQuery);
@charset 'UTF-8';
.box-sizing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.fl {
float: left;
width: 100%;
}
.bg-1 {
background-color: rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.4) , EndColorStr= rgba(180, 180, 180, 0.4) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(180, 180, 180, 0.4) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
}
.bg-2 {
background-color: rgba(255, 255, 255, 0.5);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.5) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
}
.bg-3 {
background-color: rgba(200, 200, 200, 0.2);
background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(200, 200, 200, 0.2) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(200, 200, 200, 0.2) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
-webkit-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
}
.font {
font-family: 'Myriad Pro', sans-serif;
font-size: 19px;
line-height: 19px;
}
.transparent {
color: rgba(40, 40, 40, 0.6);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
border: none;
}
.transparent-text {
color: rgba(255, 255, 255, 0.96);
text-shadow: 0 1px 2px rgba(100, 100, 100, 0.5);
}
body {
font-family: 'Myriad Pro', sans-serif;
font-size: 19px;
line-height: 19px;
color: rgba(40, 40, 40, 0.6);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
border: none;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png) repeat #f1f1f1;
}
.container {
width: 520px;
margin: 0 auto;
padding: 50px;
overflow: hidden;
}
.container > div {
float: left;
width: 100%;
margin-bottom: 40px;
}
* {
word-wrap: break-word;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
ul,
li,
p,
ol {
padding: 0;
margin: 0;
list-style: none;
}
strong {
font-weight: 700;
}
em {
font-style: italic;
}
button {
cursor: pointer;
}
::selection {
background-color: #595959;
color: #eee;
text-shadow: 0 0 transparent;
}
i {
float: left;
position: relative;
top: 0;
left: 0;
margin-right: 20px;
font-size: 54px;
color: rgba(255, 255, 255, 0.96);
text-shadow: 0 1px 2px rgba(100, 100, 100, 0.5);
}
a {
color: rgba(40, 40, 40, 0.6);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
border: none;
text-decoration: none;
}
a:hover {
color: rgba(40, 40, 40, 0.9);
}
button {
position: relative;
display: inline-block;
margin-right: 20px;
padding: 10px 20px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-family: 'Myriad Pro', sans-serif;
font-size: 19px;
line-height: 19px;
color: rgba(40, 40, 40, 0.6);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
border: none;
}
.bgs button {
display: inline-block;
margin-right: 20px;
padding: 6px 10px;
background-color: rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.4) , EndColorStr= rgba(180, 180, 180, 0.4) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(180, 180, 180, 0.4) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
}
.bgs button:last-child {
margin-right: 0;
}
.bgs button:hover {
background-color: rgba(255, 255, 255, 0.5);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.5) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
}
.bgs button:active {
background-color: rgba(200, 200, 200, 0.2);
background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(200, 200, 200, 0.2) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(200, 200, 200, 0.2) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
-webkit-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
}
.buttons > div {
float: left;
width: 100%;
margin: 0 0 30px 0;
}
.buttons > div:last-child {
margin: 0;
}
.buttons button:nth-child(1) {
background-color: rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.4) , EndColorStr= rgba(180, 180, 180, 0.4) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(180, 180, 180, 0.4) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
}
.buttons button:nth-child(1):hover {
background-color: rgba(255, 255, 255, 0.5);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.5) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
}
.buttons button:nth-child(1):active {
background-color: rgba(200, 200, 200, 0.2);
background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(200, 200, 200, 0.2) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(200, 200, 200, 0.2) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
-webkit-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
}
.buttons button:nth-child(2) {
background-color: rgba(255, 255, 255, 0.5);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.5) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
}
.buttons button:nth-child(3) {
background-color: rgba(200, 200, 200, 0.2);
background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(200, 200, 200, 0.2) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(200, 200, 200, 0.2) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
-webkit-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
margin: 0;
}
.circles button {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.warning {
clear: both;
}
.box {
float: left;
width: 100%;
position: relative;
padding: 24px;
font-size: 20px;
line-height: 20px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.4) , EndColorStr= rgba(180, 180, 180, 0.4) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(180, 180, 180, 0.4) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
color: rgba(40, 40, 40, 0.6);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
border: none;
}
.box p {
line-height: 28px;
}
.menu-bt,
.email {
width: 70px;
padding: 10px;
margin: 0;
background-color: rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.4) , EndColorStr= rgba(180, 180, 180, 0.4) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(180, 180, 180, 0.4) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
}
.menu-bt i,
.email i {
top: 2px;
margin: 0;
font-size: 32px;
line-height: 20px;
}
.menu-bt:hover,
.email:hover {
background-color: rgba(255, 255, 255, 0.5);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.5) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
}
.menu-bt:hover i,
.email:hover i {
color: #ffffff;
text-shadow: 0 1px 4px rgba(100, 100, 100, 0.6);
}
.menu-bt {
z-index: 1;
-moz-border-radius: 4px 4px 0 4px;
-webkit-border-radius: 4px 4px 0 4px;
border-radius: 4px 4px 0 4px;
}
.menu-bt:after {
float: right;
position: absolute;
content: "";
right: 10px;
top: 17px;
width: 0;
height: 0;
float: left;
border: 8px solid transparent;
border-top-color: rgba(255, 255, 255, 0.8);
-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
-moz-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
-ms-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
-o-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.menu-bt:hover:after {
border-top-color: #ffffff;
-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
-moz-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
-ms-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
-o-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.menu-bt i {
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.menu-bt + .menu-list {
display: none;
position: absolute;
width: 120px;
top: 43px;
right: 0;
background-color: rgba(255, 255, 255, 0.7);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(230, 230, 230, 0.3));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(230, 230, 230, 0.3));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(230, 230, 230, 0.3));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.7) , EndColorStr= rgba(230, 230, 230, 0.3) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(230, 230, 230, 0.3) 100%);
-moz-border-radius: 4px 0 4px 4px;
-webkit-border-radius: 4px 0 4px 4px;
border-radius: 4px 0 4px 4px;
z-index: 100;
}
.menu-bt.show-menu {
background-color: rgba(255, 255, 255, 0.7);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(230, 230, 230, 0.3));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(230, 230, 230, 0.3));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(230, 230, 230, 0.3));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.7) , EndColorStr= rgba(230, 230, 230, 0.3) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(230, 230, 230, 0.3) 100%);
}
.menu-bt.show-menu + .menu-list {
display: block;
}
.menu-bt.show-menu i {
color: rgba(74, 177, 234, 0.9);
text-shadow: none;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.menu-bt.show-menu:after {
border-top-color: rgba(74, 177, 234, 0.9);
-webkit-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
-moz-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
-ms-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
-o-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
.menu-bt.show-menu:after:hover:after {
border-top-color: rgba(74, 177, 234, 0.9);
-webkit-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
-moz-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
-ms-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
-o-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
.email {
width: auto;
}
.email i {
font-size: 23px;
}
fieldset {
margin: 0;
padding: 0;
border: none;
}
fieldset > div {
float: left;
margin: 0 20px 20px 0;
position: relative;
}
fieldset > div .fake-input {
position: relative;
display: block;
margin: 0 0 10px 0;
}
fieldset > div span {
display: block;
width: 21px;
height: 21px;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(180, 180, 180, 0.4));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.4) , EndColorStr= rgba(180, 180, 180, 0.4) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(180, 180, 180, 0.4) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.5);
}
fieldset > div .radio span:hover,
fieldset > div .checkbox span:hover {
background-color: rgba(255, 255, 255, 0.5);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(255, 255, 255, 0.5) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.6);
}
fieldset > div .radio span:active,
fieldset > div .checkbox span:active,
fieldset > div .radio span.checked,
fieldset > div .checkbox span.checked {
background-color: rgba(200, 200, 200, 0.2);
background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(200, 200, 200, 0.2) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(200, 200, 200, 0.2) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
-webkit-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
}
fieldset > div .radio span {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
fieldset > div .radio span:before {
content: '';
position: absolute;
top: 7px;
left: 7px;
width: 7px;
height: 7px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background-color: rgba(50, 50, 50, 0.4);
background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.4), rgba(150, 150, 150, 0.2));
background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.4), rgba(150, 150, 150, 0.2));
background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.4), rgba(150, 150, 150, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(50, 50, 50, 0.4) , EndColorStr= rgba(150, 150, 150, 0.2) , GradientType=0);
background: linear-gradient(top, rgba(50, 50, 50, 0.4) 0%, rgba(150, 150, 150, 0.2) 100%);
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}
fieldset > div .radio span:hover:before {
background-color: rgba(50, 50, 50, 0.5);
background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.5), rgba(150, 150, 150, 0.3));
background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.5), rgba(150, 150, 150, 0.3));
background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.5), rgba(150, 150, 150, 0.3));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(50, 50, 50, 0.5) , EndColorStr= rgba(150, 150, 150, 0.3) , GradientType=0);
background: linear-gradient(top, rgba(50, 50, 50, 0.5) 0%, rgba(150, 150, 150, 0.3) 100%);
}
fieldset > div .radio span:active:before,
fieldset > div .radio span.checked:before {
background-color: rgba(50, 50, 50, 0.5);
background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.5), rgba(150, 150, 150, 0.3));
background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.5), rgba(150, 150, 150, 0.3));
background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.5), rgba(150, 150, 150, 0.3));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(50, 50, 50, 0.5) , EndColorStr= rgba(150, 150, 150, 0.3) , GradientType=0);
background: linear-gradient(top, rgba(50, 50, 50, 0.5) 0%, rgba(150, 150, 150, 0.3) 100%);
}
fieldset > div .checkbox span {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
fieldset > div .checkbox span:active:before,
fieldset > div .checkbox span.checked:before {
content: '';
position: absolute;
font-size: 17px;
top: 2px;
left: 4px;
background: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color: rgba(50, 50, 50, 0.6);
text-shadow: inset 0 1px 5px rgba(120, 120, 120, 0.8), 0 1px 1px #ffffff;
}
fieldset > div .misc span {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
fieldset > div .misc span:active:before,
fieldset > div .misc span.checked:before {
content: '';
top: 0;
left: 2px;
font-size: 27px;
font-weight: 700;
color: #ffffff;
text-shadow: 0 1px 5px rgba(120, 120, 120, 0.8);
}
fieldset > div .disk span:before {
content: '';
position: absolute;
top: 7px;
left: 7px;
width: 7px;
height: 7px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background-color: #ffffff;
background-image: -webkit-linear-gradient(top, #ffffff, rgba(240, 240, 240, 0.4));
background-image: -moz-linear-gradient(top, #ffffff, rgba(240, 240, 240, 0.4));
background-image: -o-linear-gradient(top, #ffffff, rgba(240, 240, 240, 0.4));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= #ffffff , EndColorStr= rgba(240, 240, 240, 0.4) , GradientType=0);
background: linear-gradient(top, #ffffff 0%, rgba(240, 240, 240, 0.4) 100%);
-moz-box-shadow: 0 1px 1px rgba(60, 60, 60, 0.5);
-webkit-box-shadow: 0 1px 1px rgba(60, 60, 60, 0.5);
box-shadow: 0 1px 1px rgba(60, 60, 60, 0.5);
}
fieldset > div .disk span:hover:before {
background-color: #ffffff;
background-image: -webkit-linear-gradient(top, #ffffff, rgba(240, 240, 240, 0.4));
background-image: -moz-linear-gradient(top, #ffffff, rgba(240, 240, 240, 0.4));
background-image: -o-linear-gradient(top, #ffffff, rgba(240, 240, 240, 0.4));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= #ffffff , EndColorStr= rgba(240, 240, 240, 0.4) , GradientType=0);
background: linear-gradient(top, #ffffff 0%, rgba(240, 240, 240, 0.4) 100%);
-moz-box-shadow: 0 1px 2px rgba(60, 60, 60, 0.8);
-webkit-box-shadow: 0 1px 2px rgba(60, 60, 60, 0.8);
box-shadow: 0 1px 2px rgba(60, 60, 60, 0.8);
}
fieldset > div .disk span:active:before,
fieldset > div .disk span.checked:before {
background-color: #ffffff;
background-image: -webkit-linear-gradient(top, #ffffff, rgba(240, 240, 240, 0.4));
background-image: -moz-linear-gradient(top, #ffffff, rgba(240, 240, 240, 0.4));
background-image: -o-linear-gradient(top, #ffffff, rgba(240, 240, 240, 0.4));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= #ffffff , EndColorStr= rgba(240, 240, 240, 0.4) , GradientType=0);
background: linear-gradient(top, #ffffff 0%, rgba(240, 240, 240, 0.4) 100%);
-moz-box-shadow: 0 1px 1px rgba(60, 60, 60, 0.5);
-webkit-box-shadow: 0 1px 1px rgba(60, 60, 60, 0.5);
box-shadow: 0 1px 1px rgba(60, 60, 60, 0.5);
}
fieldset > div input[type="radio"],
fieldset > div input[type="checkbox"] {
width: 21px;
height: 21px;
cursor: pointer;
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
fieldset > div input[type="text"],
fieldset > div input[type="email"],
fieldset > div input[type="password"],
fieldset > div input[type="url"],
fieldset > div textarea {
float: left;
width: 100%;
padding: 6px 8px;
color: rgba(0, 0, 0, 0.6);
font-family: sans-serif;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
border: none;
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
background-color: rgba(200, 200, 200, 0.2);
background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(200, 200, 200, 0.2) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(200, 200, 200, 0.2) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
-webkit-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
fieldset > div input[type="text"]:focus,
fieldset > div input[type="email"]:focus,
fieldset > div input[type="password"]:focus,
fieldset > div input[type="url"]:focus,
fieldset > div textarea:focus {
background-color: rgba(200, 200, 200, 0.5);
background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 0.5), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(200, 200, 200, 0.5), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(200, 200, 200, 0.5), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(200, 200, 200, 0.5) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(200, 200, 200, 0.5) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 1px 4px #232323, 0 0 2px #ffffff;
-webkit-box-shadow: inset 0 1px 4px #232323, 0 0 2px #ffffff;
box-shadow: inset 0 1px 4px #232323, 0 0 2px #ffffff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
fieldset .interrupt {
float: left;
clear: both;
width: 42px;
margin-bottom: 14px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background-color: rgba(200, 200, 200, 0.2);
background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(200, 200, 200, 0.2) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(200, 200, 200, 0.2) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
-webkit-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
}
fieldset .interrupt > div {
float: left;
margin: 0;
}
fieldset .interrupt span {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background-color: #ffffff;
background-image: -webkit-linear-gradient(top, #ffffff, #d7d9db);
background-image: -moz-linear-gradient(top, #ffffff, #d7d9db);
background-image: -o-linear-gradient(top, #ffffff, #d7d9db);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= #ffffff , EndColorStr= #d7d9db , GradientType=0);
background: linear-gradient(top, #ffffff 0%, #d7d9db 100%);
border: 1px solid #b3b2b2;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
fieldset .interrupt span:before {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 5px;
height: 5px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background-color: rgba(50, 50, 50, 0.4);
background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.4), rgba(150, 150, 150, 0.1));
background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.4), rgba(150, 150, 150, 0.1));
background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.4), rgba(150, 150, 150, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(50, 50, 50, 0.4) , EndColorStr= rgba(150, 150, 150, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(50, 50, 50, 0.4) 0%, rgba(150, 150, 150, 0.1) 100%);
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}
fieldset .interrupt .hide {
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
fieldset .interrupt.small {
position: relative;
height: 16px;
}
fieldset .interrupt.small span {
position: relative;
top: -3px;
}
fieldset .interrupt.small span:before {
top: 7px;
left: 7px;
}
fieldset .password {
float: left;
width: 100%;
margin-bottom: 30px;
}
fieldset .password .interrupt {
margin: 6px 0 0;
}
fieldset .password .interrupt .hidepass {
background-color: rgba(74, 177, 234, 0.9);
background-image: -webkit-linear-gradient(top, rgba(74, 177, 234, 0.9), rgba(39, 120, 200, 0.8));
background-image: -moz-linear-gradient(top, rgba(74, 177, 234, 0.9), rgba(39, 120, 200, 0.8));
background-image: -o-linear-gradient(top, rgba(74, 177, 234, 0.9), rgba(39, 120, 200, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(74, 177, 234, 0.9) , EndColorStr= rgba(39, 120, 200, 0.8) , GradientType=0);
background: linear-gradient(top, rgba(74, 177, 234, 0.9) 0%, rgba(39, 120, 200, 0.8) 100%);
border-color: rgba(10, 70, 103, 0.4);
}
fieldset .password .interrupt .showpass {
background-color: rgba(234, 74, 74, 0.7);
background-image: -webkit-linear-gradient(top, rgba(234, 74, 74, 0.7), rgba(200, 39, 39, 0.6));
background-image: -moz-linear-gradient(top, rgba(234, 74, 74, 0.7), rgba(200, 39, 39, 0.6));
background-image: -o-linear-gradient(top, rgba(234, 74, 74, 0.7), rgba(200, 39, 39, 0.6));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(234, 74, 74, 0.7) , EndColorStr= rgba(200, 39, 39, 0.6) , GradientType=0);
background: linear-gradient(top, rgba(234, 74, 74, 0.7) 0%, rgba(200, 39, 39, 0.6) 100%);
border-color: rgba(174, 14, 14, 0.4);
}
fieldset .password #show-pass-text {
margin-left: 8px;
font-size: 16px;
font-weight: 400;
line-height: 25px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
filter: alpha(opacity=0);
-moz-opacity: 0.8;
opacity: 0.8;
}
progress,
progress[role] {
width: 100%;
height: 26px;
margin-bottom: 20px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: none;
background-size: auto;
}
progress[role]:after {
background-image: none;
}
progress[role] strong {
display: none;
}
progress::-webkit-progress-bar {
background-color: rgba(200, 200, 200, 0.2);
background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -moz-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
background-image: -o-linear-gradient(top, rgba(200, 200, 200, 0.2), rgba(230, 230, 230, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(200, 200, 200, 0.2) , EndColorStr= rgba(230, 230, 230, 0.1) , GradientType=0);
background: linear-gradient(top, rgba(200, 200, 200, 0.2) 0%, rgba(230, 230, 230, 0.1) 100%);
-moz-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
-webkit-box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
box-shadow: inset 0 1px 4px rgba(35, 35, 35, 0.7), 0 0 2px rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
progress.gradiented::-webkit-progress-value {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
background-size: 50px 50px;
}
progress.animated::-webkit-progress-value {
-webkit-animation: move 2s linear infinite;
}
progress::-webkit-progress-value {
position: relative;
background-color: rgba(54, 157, 214, 0.9);
background-image: -webkit-linear-gradient(top, rgba(54, 157, 214, 0.9), rgba(39, 120, 200, 0.8));
background-image: -moz-linear-gradient(top, rgba(54, 157, 214, 0.9), rgba(39, 120, 200, 0.8));
background-image: -o-linear-gradient(top, rgba(54, 157, 214, 0.9), rgba(39, 120, 200, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= rgba(54, 157, 214, 0.9) , EndColorStr= rgba(39, 120, 200, 0.8) , GradientType=0);
background: linear-gradient(top, rgba(54, 157, 214, 0.9) 0%, rgba(39, 120, 200, 0.8) 100%);
-moz-box-shadow: inset 0 1px 3px rgba(10, 70, 103, 0.8);
-webkit-box-shadow: inset 0 1px 3px rgba(10, 70, 103, 0.8);
box-shadow: inset 0 1px 3px rgba(10, 70, 103, 0.8);
}
@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment