//@TODO优化在js中引入
@import '../variable.less';

.uploader {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: default;
  padding: 0px;
  margin: 0px 0px;
  -moz-box-shadow: 0px 0px 5px #ddd;
  -webkit-box-shadow: 0px 0px 5px #ddd;
  box-shadow: 0px 0px 5px #ddd;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.uploader .filename {
  float: left;
  display: inline-block;
  outline: 0 none;
  height: 32px;
  width: 180px;
  margin: 0;
  padding: 8px 10px;
  overflow: hidden;
  cursor: default;
  border: 1px solid;
  border-right: 0;
  font: 9pt/100% Arial, Helvetica, sans-serif;
  color: #777;
  text-shadow: 1px 1px 0px #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  -moz-border-radius: 5px 0px 0px 5px;
  -webkit-border-radius: 5px 0px 0px 5px;
  border-radius: 5px 0px 0px 5px;
  background: #f5f5f5;
  background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #f5f5f5));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5', GradientType=0);
  border-color: #ccc;
  -moz-box-shadow: 0px 0px 1px #fff inset;
  -webkit-box-shadow: 0px 0px 1px #fff inset;
  box-shadow: 0px 0px 1px #fff inset;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.uploader .button {
  float: left;
  height: 32px;
  display: inline-block;
  outline: 0 none;
  padding: 8px 12px;
  margin: 0;
  cursor: pointer;
  border: 1px solid;
  font: bold 9pt/100% Arial, Helvetica, sans-serif;
  -moz-border-radius: 0px 5px 5px 0px;
  -webkit-border-radius: 0px 5px 5px 0px;
  border-radius: 0px 5px 5px 0px;
  -moz-box-shadow: 0px 0px 1px #fff inset;
  -webkit-box-shadow: 0px 0px 1px #fff inset;
  box-shadow: 0px 0px 1px #fff inset;
}

.uploader input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  padding: 0;
  margin: 0;
  height: 30px;
  cursor: pointer;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  display: block;
}

.uploader input[type=button]::-moz-focus-inner {
  padding: 0;
  border: 0 none;
  -moz-box-sizing: content-box;
}

.uploader input[type=button]::-webkit-focus-inner {
  padding: 0;
  border: 0 none;
  -webkit-box-sizing: content-box;
}

.uploader input[type=text]::-moz-focus-inner {
  padding: 0;
  border: 0 none;
  -moz-box-sizing: content-box;
}

.uploader input[type=text]::-webkit-focus-inner {
  padding: 0;
  border: 0 none;
  -webkit-box-sizing: content-box;
}

.uploader.blue .button {
  color: #fff;
  text-shadow: 1px 1px 0px #09365f;
  background: #064884;
  background: -moz-linear-gradient(top, #3b75b4 0%, #064884 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3b75b4), color-stop(100%, #064884));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b75b4', endColorstr='#064884', GradientType=0);
  border-color: #09365f;
}

.uploader.blue:hover .button {
  background: #3b75b4;
  background: -moz-linear-gradient(top, #064884 0%, #3b75b4 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #064884), color-stop(100%, #3b75b4));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#064884', endColorstr='#3b75b4', GradientType=0);
}