zui/src/less/modules/kindeditor.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// Kindeditor: kindeditor.less
/// https://github.com/kindsoft/kindeditor/blob/master/themes/default/default.css
///
/// ZUI: The file has been changed in ZUI. It will not keep update with the
/// Kindeditor version in the future.
/// http://openzui.com
/// ========================================================================
/// GNU LESSER GENERAL PUBLIC LICENSE
/// https://github.com/kindsoft/kindeditor/blob/master/license.txt
/// ========================================================================
// Kindeditor theme in ZUI style

/*! KindEditor Copyright (C) kindsoft.net, Licence: http://kindeditor.net/license.php */
/* common */
.ke-inline-block {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-clearfix {
  zoom: 1;
}
.ke-clearfix:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.ke-shadow {
  box-shadow: 0 6px 12px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.1);
}

/* icons */
[class^="ke-icon-"],
[class*=" ke-icon-"] {
  width: 16px;
  height: 16px;
}
.ke-icon-source { background-position: 0 0; }
.ke-icon-preview { background-position: 0 -16px; }
.ke-icon-print { background-position: 0 -32px; }
.ke-icon-undo { background-position: 0 -48px; }
.ke-icon-redo { background-position: 0 -64px; }
.ke-icon-cut { background-position: 0 -80px; }
.ke-icon-copy { background-position: 0 -96px; }
.ke-icon-paste { background-position: 0 -112px; }
.ke-icon-selectall { background-position: 0 -128px; }
.ke-icon-justifyleft { background-position: 0 -144px; }
.ke-icon-justifycenter { background-position: 0 -160px; }
.ke-icon-justifyright { background-position: 0 -176px; }
.ke-icon-justifyfull { background-position: 0 -192px; }
.ke-icon-insertorderedlist { background-position: 0 -208px; }
.ke-icon-insertunorderedlist { background-position: 0 -224px; }
.ke-icon-indent { background-position: 0 -240px; }
.ke-icon-outdent { background-position: 0 -256px; }
.ke-icon-subscript { background-position: 0 -272px; }
.ke-icon-superscript { background-position: 0 -288px; }
.ke-icon-date { background-position: 0 -304px; width: 25px; }
.ke-icon-time { background-position: 0 -320px; width: 25px; }
.ke-icon-formatblock { background-position: 0 -336px; width: 25px; }
.ke-icon-fontname { background-position: 0 -352px; width: 21px; }
.ke-icon-fontsize { background-position: 0 -368px; width: 23px; }
.ke-icon-forecolor { background-position: 0 -384px; width: 20px; }
.ke-icon-hilitecolor { background-position: 0 -400px; width: 23px; }
.ke-icon-bold { background-position: 0 -416px; }
.ke-icon-italic { background-position: 0 -432px; }
.ke-icon-underline { background-position: 0 -448px; }
.ke-icon-strikethrough { background-position: 0 -464px; }
.ke-icon-removeformat { background-position: 0 -480px; }
.ke-icon-image { background-position: 0 -496px; }
.ke-icon-flash { background-position: 0 -512px; }
.ke-icon-media { background-position: 0 -528px; }
.ke-icon-div { background-position: 0 -544px; }
.ke-icon-formula { background-position: 0 -576px; }
.ke-icon-hr { background-position: 0 -592px; }
.ke-icon-emoticons { background-position: 0 -608px; }
.ke-icon-link { background-position: 0 -624px; }
.ke-icon-unlink { background-position: 0 -640px; }
.ke-icon-fullscreen { background-position: 0 -656px; }
.ke-icon-about { background-position: 0 -672px; }
.ke-icon-plainpaste { background-position: 0 -704px; }
.ke-icon-wordpaste { background-position: 0 -720px; }
.ke-icon-table { background-position: 0 -784px; }
.ke-icon-tablemenu { background-position: 0 -768px; }
.ke-icon-tableinsert { background-position: 0 -784px; }
.ke-icon-tabledelete { background-position: 0 -800px; }
.ke-icon-tablecolinsertleft { background-position: 0 -816px; }
.ke-icon-tablecolinsertright { background-position: 0 -832px; }
.ke-icon-tablerowinsertabove { background-position: 0 -848px; }
.ke-icon-tablerowinsertbelow { background-position: 0 -864px; }
.ke-icon-tablecoldelete { background-position: 0 -880px; }
.ke-icon-tablerowdelete { background-position: 0 -896px; }
.ke-icon-tablecellprop { background-position: 0 -912px; }
.ke-icon-tableprop { background-position: 0 -928px; }
.ke-icon-checked { background-position: 0 -944px; }
.ke-icon-code { background-position: 0 -960px; }
.ke-icon-map { background-position: 0 -976px; }
.ke-icon-baidumap { background-position: 0 -976px; }
.ke-icon-lineheight { background-position: 0 -992px; }
.ke-icon-clearhtml { background-position: 0 -1008px; }
.ke-icon-pagebreak { background-position: 0 -1024px; }
.ke-icon-insertfile { background-position: 0 -1040px; }
.ke-icon-quickformat { background-position: 0 -1056px; }
.ke-icon-template { background-position: 0 -1072px; }
.ke-icon-tablecellsplit { background-position: 0 -1088px; }
.ke-icon-tablerowmerge { background-position: 0 -1104px; }
.ke-icon-tablerowsplit { background-position: 0 -1120px; }
.ke-icon-tablecolmerge { background-position: 0 -1136px; }
.ke-icon-tablecolsplit { background-position: 0 -1152px; }
.ke-icon-anchor { background-position: 0 -1168px; }
.ke-icon-search { background-position: 0 -1184px; }
.ke-icon-new { background-position: 0 -1200px; }
.ke-icon-specialchar { background-position: 0 -1216px; }
.ke-icon-multiimage { background-position: 0 -1232px; }

/* container */
.ke-container {
  position: relative;
  display: block;
  border: 1px solid @input-border;
  background-color: @input-bg;
  border-radius: @input-border-radius;
  overflow: hidden;
  margin: 0;
  padding: 0;
  // .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
  &.focus
  {
    @color:       @input-border-focus;
    @color-rgba:  rgba(red(@color), green(@color), blue(@color), .6);
    border-color: @color;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;
  }

  &.ke-loading {
    > .ke-toolbar,
    > .ke-edit,
    > .ke-statusbar,
    + textarea.kindeditor {display: none}
  }
}
/* toolbar */
.ke-toolbar {
  border-bottom: 1px solid @input-border;
  background-color: @input-bg;
  padding: 2px 5px;
  text-align: left;
  overflow: hidden;
  zoom: 1;
}
.ke-toolbar-icon {
  background-repeat: no-repeat;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  display: block;
  .ke-menu & {display: inline-block;}
}
.ke-toolbar-icon-url {
  background-image: url(themes/default/default.png);
}

.ke-toolbar {
  .ke-outline {
    border: 1px solid @input-bg;
    margin: 1px;
    padding: 1px 2px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    cursor: pointer;
    display: block;
    float: left;
    border-radius: @input-border-radius;
    .opacity(0.8);
  }
  .ke-on,
  .ke-selected {
    .opacity(1);
    border-color: @color-gray-light;
  }
  .ke-selected {
    background-color: @color-gray-pale;
  }
  .ke-disabled {
    cursor: default;
  }
  .ke-separator {
    height: 16px;
    margin: 2px 3px;
    border-left: 1px dotted @color-gray-light;
    border-top: 0;
    border-bottom: 0;
    width: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    display: block;
    float: left;
  }
}

.ke-toolbar .ke-hr {
  overflow: hidden;
  height: 1px;
  clear: both;
}
/* edit */
.ke-edit {
  padding: 0;
}
.ke-edit-iframe,
.ke-edit-textarea {
  border: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
}
.ke-edit-textarea {
  font-size: @font-size-small;
  font-family: @font-family-monospace;
  background-color: @color-back;
  color: @color-fore;
  overflow: auto;
  resize: none;
}
.ke-edit-textarea:focus {
  outline: none;
}
/* statusbar */
.ke-statusbar {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: @input-bg;
  border-left: 1px solid @input-border;
  border-top: 1px solid @input-border;
  width: 14px;
  font-size: 0;
  line-height: 0;
  height: 14px;
  overflow: hidden;
  text-align: center;
  transition: opacity .2s;
  cursor: s-resize;
  .opacity(0);

  .ke-statusbar-resize-icon {
    position: relative;

    &:before,
    &:after {
      left: -4px;
      content: ' ';
      display: block;
      position: absolute;
      top: 2px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 4px 4px 4px;
      border-color: transparent transparent @color-gray transparent;
    }
    &:after {
      top: 7px;
      border-width: 4px 4px 0 4px;
      border-color: @color-gray transparent transparent transparent;
    }
  }

  &.ke-dragging,
  .ke-container:hover & {
    .opacity(1);
  }
}

/* menu */
.ke-menu {
  padding: 5px 0;
  font-family: @font-family-base;
  font-size: 12px;
  text-align: left;
  overflow: hidden;
  background-color: @dropdown-bg;
  border: 1px solid @dropdown-fallback-border; // IE8 fallback
  border: 1px solid @dropdown-border;
  border-radius: @border-radius-base;
}
.ke-menu-item {
  height: 24px;
  overflow: hidden;
  cursor: pointer;
}
.ke-menu-item-on {
  color: @dropdown-link-active-color;
  text-decoration: none;
  outline: 0;
  background-color: @dropdown-link-active-bg;
}
.ke-menu-item-left {
  width: 27px;
  text-align: center;
  overflow: hidden;
}
.ke-menu-item-center {
  width: 0;
  height: 24px;
  border-left: 1px solid #E3E3E3;
  border-right: 1px solid #FFFFFF;
  border-top: 0;
  border-bottom: 0;
}
.ke-menu-item-center-on {
  border-left: 1px solid #E9EFF6;
  border-right: 1px solid #E9EFF6;
}
.ke-menu-item-right {
  border: 0;
  padding: 0 0 0 5px;
  line-height: 24px;
  text-align: left;
  overflow: hidden;
}
.ke-menu-separator {
  margin: 2px 0;
  height: 0;
  overflow: hidden;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #FFFFFF;
  border-left: 0;
  border-right: 0;
}
/* colorpicker */
.ke-colorpicker {
  background-color: @dropdown-bg;
  border: 1px solid @dropdown-fallback-border; // IE8 fallback
  border: 1px solid @dropdown-border;
  border-radius: @border-radius-base;
}
.ke-colorpicker-table {
  border:0;
  margin:0;
  padding:0;
  border-collapse: separate;
}
.ke-colorpicker-cell {
  font-size: 0;
  line-height: 0;
  border: none;
  cursor: pointer;
  padding:0;
}
.ke-colorpicker-cell-color {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
}
.ke-colorpicker-cell-top {
  font-family: @font-family-base;
  font-size: 12px;
  line-height: 25px;
  cursor: pointer;
  margin:0;
  padding:0;
  text-align: center;
}
.ke-colorpicker-cell-on
{
  color: @dropdown-link-active-color;
  background-color: @dropdown-link-active-bg;
  .ke-colorpicker-cell-color
  {
    border: 2px solid @color-fore;
  }
}
.ke-colorpicker-cell-selected
{
  .ke-colorpicker-cell-color
  {
    border: 2px solid @color-fore;
  }
}

/* dialog */
.ke-dialog {
  position: absolute;
  margin: 0;
  padding: 0;
}
.ke-dialog .ke-header {
  width: 100%;
  margin-bottom: 10px;
}
.ke-dialog .ke-header .ke-left {
  float: left;
}
.ke-dialog .ke-header .ke-right {
  float: right;
}
.ke-dialog .ke-header label {
  margin-right: 0;
  cursor: pointer;
  font-weight: normal;
  display: inline;
  vertical-align: top;
}
.ke-dialog-content {
  width: 100%;
  height: 100%;
  background-color: @modal-content-bg;
  border-radius: @border-radius-base;
  overflow: hidden;
}
.ke-dialog-shadow {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 9px rgba(0,0,0,.5);
  border-radius: @border-radius-base;
  background-color: #F0F0EE;
}
.ke-dialog-header {
  border:0;
  margin:0;
  background: @color-gray-pale;
  font-weight: bold;
  font-family: @headings-font-family;
  font-size: @font-size-base;
  text-align: left;
  cursor: move;
  padding: @modal-title-padding /2 @modal-title-padding;
  border-bottom: 1px solid @modal-header-border-color;
  min-height: (@modal-title-padding + @modal-title-line-height);
}
.ke-dialog-icon-close {
  display: block;
  background: url(themes/default/default.png) no-repeat scroll 0 -688px;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 8px;
  top: 10px;
  cursor: pointer;
  .opacity(0.6);

  &:hover {
    .opacity(1);
  }
}
.ke-dialog-body {
  font-family: @font-family-base;
  font-size: @font-size-small;
  text-align: left;
  overflow: hidden;
  width: 100%;
}
.ke-dialog-body textarea {
  display: block;
  overflow: auto;
  padding: 0;
  resize: none;
}
.ke-dialog-body textarea:focus,
.ke-dialog-body input:focus,
.ke-dialog-body select:focus {
  outline: none;
}
.ke-dialog-body label {
  margin-right: 10px;
  cursor: pointer;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-dialog-body img {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-dialog-body select {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
  width: auto;
}
.ke-dialog-body .ke-textarea {
  display: block;
  width: 408px;
  height: 260px;
  background-color: @input-bg;
  border: 1px solid @input-border;
  border-radius: @input-border-radius;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
}
.ke-dialog-body .ke-form {
  margin: 0;
  padding: 0;
}
.ke-dialog-loading {
  position: absolute;
  top: 0;
  left: 1px;
  z-index: 1;
  text-align: center;
}
.ke-dialog-loading-content {
  background: url("../themes/common/loading.gif") no-repeat;
  color: #666;
  font-size: 14px;
  font-weight: bold;
  height: 31px;
  line-height: 31px;
  padding-left: 36px;
}
.ke-dialog-row {
  margin-bottom: 10px;
}
.ke-dialog-footer {
  text-align: right;
  padding: 5px;
  width: 100%;
  border-top: 1px solid @modal-footer-border-color;
}
.ke-dialog-preview,
.ke-dialog-yes {
  margin: 5px;
}
.ke-dialog-no {
  margin: 5px 10px 5px 5px;
}
.ke-dialog-mask {
  background-color: @modal-backdrop-bg;
  .opacity(.5);
}
.ke-button-common {
  cursor: pointer;
  height: 22px;
  line-height: 21px;
  overflow: visible;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.ke-button-outer {
  padding: 0;
  position: relative;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-button {
  padding: 0 12px;
  margin: 0;
  border-radius: @border-radius-base;
  border: 1px solid @btn-default-border;
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
  font-size: 12px;
  left: 2px;
  text-decoration: none;
}
/* inputbox */
.ke-input-text {
  font-family: "sans serif",tahoma,verdana,helvetica;
  font-size: 12px;
  line-height: 22px;
  height: 22px;
  padding: 0 4px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
  background-color: @input-bg;
  border: 1px solid @input-border;
  border-radius: @input-border-radius;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
  .form-control-focus();

  &[disabled] {background: #eee}
}
.ke-input-number {
  width: 50px;
}
.ke-input-color, ke-dialog-content select {
  border: 1px solid @input-border;
  background-color: @color-back;
  font-size: 12px;
  width: 60px;
  height: 20px;
  line-height: 20px;
  padding-left: 5px;
  overflow: hidden;
  cursor: pointer;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-upload-button {
  position: relative;
}
.ke-upload-area {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.ke-upload-area .ke-upload-file {
  position: absolute;
  font-size: 60px;
  top: 0;
  right: 0;
  padding: 0;
  margin: 0;
  z-index: 811212;
  border: 0 none;
  opacity: 0;
  filter: alpha(opacity=0);
}
/* tabs */
.ke-tabs {
  font: 12px/1 "sans serif",tahoma,verdana,helvetica;
  border-bottom:1px solid #A0A0A0;
  padding-left:5px;
  margin-bottom:20px;
}
.ke-tabs-ul  {
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
}
.ke-tabs-li {
  position: relative;
  border: 1px solid #A0A0A0;
  background-color: #F0F0EE;
  margin: 0 2px -1px 0;
  padding: 0 20px;
  float: left;
  line-height: 25px;
  text-align: center;
  color: #555555;
  cursor: pointer;
}
.ke-tabs-li-selected {
  background-color: #FFF;
  border-bottom: 1px solid #FFF;
  color: #000;
  cursor: default;
}
.ke-tabs-li-on {
  background-color: #FFF;
  color: #000;
}
/* progressbar */
.ke-progressbar {
  position: relative;
  margin: 0;
  padding: 0;
}
.ke-progressbar-bar {
  border: 1px solid #6FA5DB;
  width: 80px;
  height: 5px;
  margin: 10px 10px 0 10px;
  padding: 0;
}
.ke-progressbar-bar-inner {
  width: 0;
  height: 5px;
  background-color: #6FA5DB;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.ke-progressbar-percent {
  position: absolute;
  top: 0;
  left: 40%;
  display: none;
}
/* swfupload */
.ke-swfupload-top {
  position: relative;
  margin-bottom: 10px;
  _width: 608px;
}
.ke-swfupload-button {
  height: 23px;
  line-height: 23px;
}
.ke-swfupload-desc {
  padding: 0 10px;
  height: 23px;
  line-height: 23px;
}
.ke-swfupload-startupload {
  position: absolute;
  top: 0;
  right: 0;
}
.ke-swfupload-body {
  overflow: scroll;
  background-color:#FFFFFF;
  border: 1px solid @input-border;
  width: auto;
  height: 370px;
  padding: 5px;
}
.ke-swfupload-body .ke-item {
  width: 100px;
  margin: 5px;
}
.ke-swfupload-body .ke-photo {
  position: relative;
  border: 1px solid #DDDDDD;
  background-color:#FFFFFF;
  padding: 10px;
}
.ke-swfupload-body .ke-delete {
  display: block;
  background: url(themes/default/default.png) no-repeat scroll 0 -688px;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}
.ke-swfupload-body .ke-status  {
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100px;
  height: 17px;
}
.ke-swfupload-body .ke-message  {
  width: 100px;
  text-align: center;
  overflow: hidden;
  height:17px;
}
.ke-swfupload-body .ke-error  {
  color: red;
}
.ke-swfupload-body .ke-name {
  width: 100px;
  text-align: center;
  overflow: hidden;
  height:16px;
}
.ke-swfupload-body .ke-on {
  border: 1px solid #5690D2;
  background-color: #E9EFF6;
}

/* emoticons */
.ke-plugin-emoticons {
  position: relative;
}
.ke-plugin-emoticons .ke-preview {
  position: absolute;
  text-align: center;
  margin: 2px;
  padding: 10px;
  top: 0;
  border: 1px solid #A0A0A0;
  background-color: #FFFFFF;
  display: none;
}
.ke-plugin-emoticons .ke-preview-img {
  border:0;
  margin:0;
  padding:0;
}
.ke-plugin-emoticons .ke-table {
  border:0;
  margin:0;
  padding:0;
  border-collapse:separate;
}
.ke-plugin-emoticons .ke-cell {
  margin:0;
  padding:1px;
  border:1px solid #F0F0EE;
  cursor:pointer;
}
.ke-plugin-emoticons .ke-on {
  border: 1px solid #5690D2;
  background-color: #E9EFF6;
}
.ke-plugin-emoticons .ke-img {
  display:block;
  background-repeat:no-repeat;
  overflow:hidden;
  margin:2px;
  width:24px;
  height:24px;
  margin: 0;
  padding: 0;
  border: 0;
}
.ke-plugin-emoticons .ke-page {
  text-align: right;
  margin: 5px;
  padding: 0;
  border: 0;
  font: 12px/1 "sans serif",tahoma,verdana,helvetica;
  color: #333;
  text-decoration: none;
}
.ke-plugin-plainpaste-textarea,
.ke-plugin-wordpaste-iframe {
  display: block;
  width: 408px;
  height: 260px;
  font-family: "sans serif",tahoma,verdana,helvetica;
  font-size: 12px;
  border: 1px solid @input-border;
}
/* filemanager */
.ke-plugin-filemanager-header {
  width: 100%;
  margin-bottom: 10px;
}
.ke-plugin-filemanager-header .ke-left {
  float: left;
}
.ke-plugin-filemanager-header .ke-right {
  float: right;
}
.ke-plugin-filemanager-body {
  overflow: scroll;
  background-color:#FFFFFF;
  border: 1px solid @input-border;
  width: auto;
  height: 370px;
  padding: 5px;
}
.ke-plugin-filemanager-body .ke-item {
  width: 100px;
  margin: 5px;
}
.ke-plugin-filemanager-body .ke-photo {
  border: 1px solid #DDDDDD;
  background-color:#FFFFFF;
  padding: 10px;
}
.ke-plugin-filemanager-body .ke-name {
  width: 100px;
  text-align: center;
  overflow: hidden;
  height:16px;
}
.ke-plugin-filemanager-body .ke-on {
  border: 1px solid #5690D2;
  background-color: #E9EFF6;
}
.ke-plugin-filemanager-body .ke-table {
  width: 95%;
  border: 0;
  margin: 0;
  padding: 0;
  border-collapse: separate;
}
.ke-plugin-filemanager-body .ke-table .ke-cell {
  margin: 0;
  padding: 0;
  border: 0;
}
.ke-plugin-filemanager-body .ke-table .ke-name {
  width: 55%;
  text-align: left;
}
.ke-plugin-filemanager-body .ke-table .ke-size {
  width: 15%;
  text-align: left;
}
.ke-plugin-filemanager-body .ke-table .ke-datetime {
  width: 30%;
  text-align: center;
}

.ke-dialog {
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  input[type=number] {
      -moz-appearance:textfield;
  }
}