fonteditor/css/main.css

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}
body,
button,
input,
select,
textarea {
  font: 12px/1.5 tahoma, arial, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
address,
cite,
dfn,
em,
var {
  font-style: normal;
}
code,
kbd,
pre,
samp {
  font-family: courier new, courier, monospace;
}
small {
  font-size: 12px;
}
ol,
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
legend {
  color: #000000;
}
fieldset,
img {
  border: 0;
}
button,
input,
select,
textarea {
  font-size: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.modal-dialog {
  margin-top: 100px;
}
.modal-dialog hr {
  margin-top: 0;
}
.modal-header {
  padding-top: 6px;
  padding-bottom: 6px;
  background: #327EC0;
  color: #FFF;
}
.modal-header .close {
  margin-top: 3px;
}
.modal-header .modal-title {
  font-size: 14px;
  line-height: 25px;
}
.modal-footer {
  padding-top: 10px;
  padding-bottom: 10px;
}
.modal-body {
  min-height: 100px;
  padding-bottom: 5px;
}
.modal-content {
  border-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.dropdown-menu {
  margin-top: 0;
  border-radius: 0;
  background: #323842;
  border: none;
}
.dropdown-menu > li > a {
  cursor: pointer;
  color: #B6CBDD;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #FFF;
  background: #232830;
}
.input-group {
  margin-bottom: 10px;
}
.input-group .input-group-addon {
  text-align: left;
}
.list-group-item .from {
  float: right;
}
hr {
  margin-top: 10px;
  margin-bottom: 10px;
}
.column-2 .form-group,
.column-3 .form-group,
.column-4 .form-group {
  margin-right: 10px;
}
.column-2 .form-group {
  width: 45%;
}
.column-3 .form-group {
  width: 30%;
}
.column-4 .form-group {
  width: 22%;
}
.navbar {
  height: 50px;
  background: #F9F9F9;
}
.btn-groups {
  line-height: 50px;
}
.btn-groups > .split {
  width: 1px;
  height: 30px;
  line-height: 30px;
  background: #D8D8D8;
  margin: 0 8px;
  display: inline-block;
  vertical-align: middle;
}
.btn-flat {
  border-radius: 0;
  color: #FFF;
  background: #738089;
}
.btn-flat:hover,
.btn-flat:focus {
  background: #323842;
  color: #B6CBDD;
  outline: none;
}
.btn-flat > .ico-left {
  margin-right: 8px;
}
.btn-flat > .ico {
  pointer-events: none;
}
.btn-flat > .drop {
  display: inline-block;
}
.btn-new {
  color: #FFF;
  background: #4A90E2;
}
.btn-new:hover,
.btn-new:focus {
  background: #2275d7;
  color: #FFF;
}
.btn-preview {
  color: #FFF;
  background: #28B4A0;
}
.btn-preview:hover,
.btn-preview:focus {
  background: #3bd4be;
  color: #FFF;
}
.btn-preview.dropdown-toggle:focus {
  background: #323842;
  color: #B6CBDD;
}
.btn-confirm {
  color: #FFF;
  background: #4A90E2;
}
.btn-confirm:hover,
.btn-confirm:focus {
  background: #2275d7;
  color: #FFF;
}
.btn-ico {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.btn-ico > .ico {
  font-size: 16px;
  line-height: 18px;
  margin-right: 0;
}
.command-groups {
  height: 40px;
  padding-left: 8px;
  overflow: hidden;
  background: rgba(112, 119, 128, 0.8);
}
.command-groups > li {
  float: left;
  line-height: 40px;
  padding: 0 8px;
  color: #FFF;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.command-groups > li > i {
  font-style: normal;
  text-decoration: underline;
}
.command-groups > li > .ico {
  font-size: 20px;
  text-decoration: none;
}
.command-groups > li:hover {
  background: #8a919a;
}
.command-groups > li[data-theme="ico"] {
  padding: 0 12px;
}
.command-groups > li[data-disabled] {
  color: #B9BDC1;
}
.command-groups > li[data-on] {
  background: #585e66;
}
.command-groups > [data-split] {
  padding: 0!important;
  width: 1px;
  height: 40px;
  background: #989ea6;
  pointer-events: none;
}
.pager {
  margin: 0;
}
.pager .form-control {
  display: inline-block;
  width: 40px;
  height: 30px;
  padding: 6px;
  margin: 0 5px;
}
.pager [data-pager="goto"] {
  margin-right: 5px;
}
.pager [data-pager="info"] {
  margin: 0 5px;
  color: #FFF;
}
.form-line {
  line-height: 34px;
}
.form-title {
  vertical-align: 3px;
}
.btn-right {
  float: right;
  margin-left: 10px;
}
body,
html {
  margin: 0;
  padding: 0;
  font-size: 13px;
  height: 100%;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 1px solid transparent;
}
::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
}
::-webkit-scrollbar-thumb {
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
.navbar {
  border-radius: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 51px;
  min-width: 1024px;
  top: 0;
}
.navbar > .logo {
  float: left;
  width: 180px;
  height: 50px;
  background: url(img/logo.png) no-repeat;
  background-color: #fff;
  background-position: center;
  background-image: url(img/logo@1x.png);
  background-image: -webkit-image-set(url(img/logo@1x.png) 1x, url(img/logo@2x.png) 2x);
  background-repeat: no-repeat;
}
.navbar > .action-groups {
  margin-left: 180px;
  padding-left: 8px;
}
.container {
  display: flex;
  flex: 1;
}
.sidebar {
  position: fixed;
  width: 180px;
  top: 50px;
  bottom: 0;
  background: #232830;
}
.main {
  margin-left: 180px;
  padding-top: 90px;
  height: 100%;
  background: #BCC5CD;
}
.main .glyf-list {
  padding: 10px 0 0 10px;
}
.main .command-groups {
  margin-top: -40px;
  display: none;
}
.main .pager {
  position: absolute;
  z-index: 10;
  padding: 5px;
  right: 0;
  bottom: 0;
  background: #707780;
  display: none;
}
.main.editing {
  margin-left: 70%;
  padding-top: 50px;
}
.main.editing .command-groups {
  display: none;
}
.loading {
  position: fixed;
  left: 50%;
  top: 30%;
  width: 200px;
  margin-left: -100px;
  line-height: 24px;
  text-align: center;
  z-index: 10000;
  display: none;
}
.loading span {
  display: inline-block;
  padding: 0 6px;
  background: rgba(84, 114, 93, 0.9);
  color: #FFF;
  border: 1px solid #DDD;
}
.loading[data-status="error"] span {
  color: red;
  background: rgba(236, 234, 69, 0.9);
}
.loading[data-status="warn"] span {
  color: #FF8722;
  background: rgba(255, 255, 255, 0.9);
}
.editor {
  position: fixed;
  width: 70%;
  top: 50px;
  padding-top: 40px;
  bottom: 0;
  z-index: 1;
  background: #FEFEFE;
  border-right: 1px solid #DDD;
  display: none;
}
.editor .command-groups {
  background: #707780;
  margin-top: -40px;
}
.editor .close-editor {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 5px;
  z-index: 100;
  font-size: 20px;
  line-height: 38px;
  color: #FFF;
  display: none;
}
.editor .close-editor:hover {
  cursor: pointer;
}
.editor:hover .close-editor {
  display: block;
}
@media screen and (min-width: 1300px) and (max-width: 1600px) {
  .editor .command-groups > li,
  .editor .command-groups > li[data-theme="ico"] {
    padding: 0 8px;
  }
}
@media screen and (max-width: 1300px) {
  .editor .command-groups > li,
  .editor .command-groups > li[data-theme="ico"] {
    padding: 0 4px;
  }
}
.editor.editing {
  display: block;
}
.selection-range {
  position: absolute;
  z-index: 6;
  display: none;
  border: 1px solid #CCC;
  background: rgba(222, 222, 222, 0.5);
  pointer-events: none;
}
.forkme,
.userguide,
.switch-lang {
  position: absolute;
  color: #FFF;
  color: #333;
}
.forkme {
  right: 2px;
  top: 2px;
}
.userguide {
  right: 2px;
  top: 24px;
}
.switch-lang {
  right: 140px;
  top: 2px;
}
.switch-lang a {
  color: #666;
}
.modal {
  background: -webkit-radial-gradient(center, circle contain, rgba(255, 255, 255, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.modal-content {
  border-radius: 0;
}
.modal-header {
  background: #fff;
  color: #202430;
}
.modal-body {
  background: #F8F9F9;
}
.modal-footer {
  border-top: 0;
  background: #F8F9F9;
}
.modal-footer .btn-default {
  border-radius: 0;
  color: #FFF;
  background: #738089;
}
.modal-footer .btn-primary {
  border-radius: 0;
  background: #4A90E2;
}
@font-face {
  font-family: 'fonteditor';
  src: url('../font/fonteditor.ttf') format('truetype');
}
.ico {
  display: inline-block;
}
.ico:before,
.ico:after {
  font-family: 'fonteditor';
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.1px;
}
.i-leave:before {
  content: '\e00c';
}
.i-edit,
.i-del,
.i-leave {
  font-size: 12px;
}
.i-edit:hover,
.i-del:hover,
.i-leave:hover {
  cursor: pointer;
  color: #4A90E2;
}
.i-edit,
.i-del {
  color: #76abe9;
}
.i-edit:before {
  content: '\e021';
}
.i-del:before {
  content: '\e020';
}
.i-github:before {
  content: '\e01e';
}
.i-help:before {
  content: '\e016';
}
.i-new:before {
  content: '\e019';
}
.i-open:before {
  content: '\e01A';
}
.i-add:before {
  content: '\e003';
}
.i-undo:before {
  content: '\e001';
}
.i-redo:before {
  content: '\e002';
}
.i-down:before {
  content: '\e00e';
}
.i-left:before {
  content: '\e00a';
}
.i-ttf:before {
  content: '\e00f';
}
.i-woff:before {
  content: '\e010';
}
.i-zip:before {
  content: '\e011';
}
.i-save:before {
  content: '\e022';
}
.i-upshape:before {
  content: '\e014';
}
.i-downshape:before {
  content: '\e00b';
}
.i-reversepoints:before {
  content: '\e00d';
}
.i-alignleft:before {
  content: '\e006';
}
.i-aligncenter:before {
  content: '\e004';
}
.i-alignright:before {
  content: '\e007';
}
.i-aligntop:before {
  content: '\e008';
}
.i-alignmiddle:before {
  content: '\e005';
}
.i-aligndescent:before {
  content: '\e009';
}
.i-alignbaseline:before {
  content: '\e009';
}
.i-rotateleft:before {
  content: '\e01c';
}
.i-rotateright:before {
  content: '\e01d';
}
.i-flip:before {
  content: '\e013';
}
.i-mirror:before {
  content: '\e012';
}
.i-splitshapes:before {
  content: '\e024';
}
.i-joinshapes:before {
  content: '\e025';
}
.i-intersectshapes:before {
  content: '\e026';
}
.i-tangencyshapes:before {
  content: '\e027';
}
.i-rangemode:before {
  content: '\e029';
}
.i-pointmode:before {
  content: '\e028';
}
.project-btns {
  margin: 0 15px;
  padding: 10px 0;
  border-bottom: #353D45 1px solid;
}
.project-btns .btn {
  padding-left: 12px;
  padding-right: 12px;
}
.project-btns .btn:last-child {
  float: right;
  margin-right: 0;
}
.project .project-title {
  font-weight: bold;
  color: #6F7D88;
  padding-left: 15px;
  line-height: 32px;
}
.project .project-list dl {
  padding: 0 10px 0 15px;
  cursor: pointer;
}
.project .project-list dl dt {
  line-height: 28px;
  font-weight: normal;
  color: #9EB0C0;
}
.project .project-list dl dd {
  display: none;
  line-height: 28px;
  color: #6F7D88;
}
.project .project-list dl dd span {
  margin-right: 10px;
}
.project .project-list dl dd span:hover {
  text-decoration: underline;
}
.project .project-list dl:hover {
  background: #48515f;
}
.project .project-list dl:hover dt {
  color: #FFF;
}
.project .project-list dl.selected {
  background: #323842;
}
.project .project-list dl.selected dd {
  display: block;
}
.glyf-list {
  height: 100%;
  overflow: auto;
}
.glyf-list > .glyf-item {
  float: left;
  position: relative;
  margin: 10px;
  width: 80px;
  box-shadow: 1px 1px 4px #999;
  cursor: pointer;
  background: #ECECEC;
}
.glyf-list > .glyf-item .unicode,
.glyf-list > .glyf-item .name {
  font-size: 12px;
  line-height: 20px;
  height: 20px;
  padding-left: 4px;
  color: #45283F;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glyf-list > .glyf-item .unicode {
  color: #70A9D6;
}
.glyf-list > .glyf-item .glyf {
  width: 80px;
  height: 80px;
  border: 3px solid #FFF;
  background: #FFF;
  box-sizing: border-box;
  display: block;
}
.glyf-list > .glyf-item .glyf .path {
  fill: #232830;
}
.glyf-list > .glyf-item .i-del,
.glyf-list > .glyf-item .i-edit {
  position: absolute;
  right: 4px;
  padding: 0 2px;
  display: none;
}
.glyf-list > .glyf-item .i-edit {
  right: 20px;
}
.glyf-list > .glyf-item:hover .glyf,
.glyf-list > .selected .glyf {
  border-color: #232830;
}
.glyf-list > .glyf-item:hover .name,
.glyf-list > .selected .name {
  color: #FFF;
}
.glyf-list > .glyf-item:hover {
  background: #3C619B;
}
.glyf-list > .glyf-item:hover .name {
  color: #FFF;
}
.glyf-list > .glyf-item:hover .i-del {
  display: block;
}
.glyf-list > .glyf-item:hover .i-edit {
  display: block;
}
.glyf-list > .selected,
.glyf-list > .selected:hover {
  background: #232830;
}
.glyf-list > .editing .glyf,
.glyf-list > .editing:hover .glyf {
  border-color: #066BC5;
}
.glyf-list > .compound .path {
  fill: #80ff80 !important;
}
.glyf-list > .new .path,
.glyf-list > .edit .path {
  fill: blue!important;
}
.glyf-list.xlarge > .glyf-item {
  width: 160px;
}
.glyf-list.xlarge > .glyf-item .glyf {
  width: 160px;
  height: 160px;
}
.glyf-list.large > .glyf-item {
  width: 120px;
}
.glyf-list.large > .glyf-item .glyf {
  width: 120px;
  height: 120px;
}
.glyf-list.small > .glyf-item {
  width: 60px;
}
.glyf-list.small > .glyf-item .glyf {
  width: 60px;
  height: 60px;
}
.glyf-list.no-hover .glyf-item {
  pointer-events: none;
}
.glyf-editor {
  width: 100%;
  height: 100%;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: none;
}
.glyf-editor .marker-x,
.glyf-editor .marker-y {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 60;
  pointer-events: none;
}
.glyf-editor .marker-x {
  width: 20px;
  border-top: 1px dashed #000;
}
.glyf-editor .marker-y {
  height: 20px;
  border-left: 1px dashed #000;
}
.editor-contextmenu {
  color: #333;
  width: 150px;
  border: 1px solid #999;
  background: #FEFEFE;
  line-height: 24px;
  padding: 0 4px;
  box-shadow: 1px 1px 1px #CCC;
  position: absolute;
}
.editor-contextmenu li {
  padding-left: 4px;
  cursor: pointer;
  border-bottom: 1px solid #CCC;
}
.editor-contextmenu li > ul {
  display: none;
  color: #333;
  width: 150px;
  border: 1px solid #999;
  background: #FEFEFE;
  line-height: 24px;
  padding: 0 4px;
  box-shadow: 1px 1px 1px #CCC;
  position: absolute;
  margin-left: 130px;
}
.editor-contextmenu > li[data-sub] {
  color: #4A90E2;
}
.editor-contextmenu > li[data-sub]:after {
  content: '>';
  margin-right: 10px;
  float: right;
  font-family: 'Simsun';
}
.editor-contextmenu li[data-tag="selected"] {
  display: inline-block;
  display: block;
}
.editor-contextmenu li[data-tag="selected"]:before,
.editor-contextmenu li[data-tag="selected"]:after {
  font-family: 'fonteditor';
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.1px;
}
.editor-contextmenu li[data-tag="selected"]:after {
  content: '\e01f';
}
.editor-contextmenu li[data-tag="selected"]:after {
  float: right;
  margin-right: 4px;
  color: #4A90E2;
}
.editor-contextmenu li:hover {
  background: #EEE;
}
.editor-contextmenu li:hover > ul {
  display: block;
}
.editor-contextmenu li:last-child {
  border-bottom: none;
}
.setting-metrics .modal-dialog {
  width: 800px;
}
.setting-metrics .panose-inline {
  margin-bottom: -15px;
}
.setting-metrics .panose-inline .input-group {
  width: 100%;
}
.import-pic-dialog .modal-dialog {
  width: 960px;
}
.import-pic-dialog .modal-body {
  padding-bottom: 0;
}
.import-pic-dialog .preview-panel {
  background: #FFF;
  margin-bottom: 15px;
}
.import-pic-dialog .preview-panel .canvas-left,
.import-pic-dialog .preview-panel .canvas-right {
  display: inline-block;
  width: 50%;
  height: 420px;
  overflow: auto;
}
.import-pic-dialog .preview-panel .canvas-left {
  border-right: 1px solid #BAC1CB;
}
.import-pic-dialog .preview-panel.fitpanel canvas {
  max-width: 100%;
  max-height: 99%;
}
.import-pic-dialog .preview-panel.showleft .canvas-left {
  width: 100%;
  border-right: none;
  display: inline-block;
}
.import-pic-dialog .preview-panel.showleft .canvas-right {
  display: none;
}
.import-pic-dialog .preview-panel.showright .canvas-right {
  width: 100%;
  display: inline-block;
}
.import-pic-dialog .preview-panel.showright .canvas-left {
  display: none;
}
.import-pic-dialog .import-pic-url {
  position: absolute;
  margin-top: 30px;
  background: #4A90E2;
  padding: 10px 10px 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  display: none;
}
.import-pic-dialog .import-pic-url.show-url {
  display: block;
}