This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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