From ebbde370b0ba6a2622e386bc6c360ee2a26fbeaf Mon Sep 17 00:00:00 2001 From: kekee000 Date: Mon, 29 Feb 2016 17:35:08 +0800 Subject: [PATCH] move css modules, add css compile --- build.sh | 4 + build/build-css.js | 54 + css/common/common.less | 301 ----- css/common/dialog.less | 22 - css/common/util.less | 14 - css/main.css | 1026 +---------------- css/main.less | 21 +- css/preview.css | 138 +-- css/preview.less | 3 +- .../bootstrap-overwrite.less} | 42 - css/widget/common.less | 39 + css/{common => widget}/def.less | 0 css/widget/dialog.less | 81 ++ css/widget/editor.less | 154 +++ .../glyf-download-dialog.less} | 0 .../editor.less => widget/glyf-editor.less} | 6 +- css/{common => widget}/glyf-list.less | 15 +- css/{common => widget}/ico.less | 8 +- .../import-pic-dialog.less} | 2 +- css/widget/loading.less | 34 + css/widget/page.less | 121 ++ css/{common => widget}/project.less | 3 +- css/{common => widget}/reset.less | 5 + css/widget/util.less | 43 + demo/css/editor.css | 256 +--- demo/css/editor.less | 6 +- demo/css/editortest.css | 12 +- demo/css/editortest.less | 7 +- demo/css/render.css | 27 - demo/css/render.less | 4 +- demo/css/reset.css | 17 - edp-build-config.js | 16 +- edp-webserver-config.js | 6 +- package.json | 11 +- 34 files changed, 601 insertions(+), 1897 deletions(-) create mode 100644 build/build-css.js delete mode 100644 css/common/common.less delete mode 100644 css/common/dialog.less delete mode 100644 css/common/util.less rename css/{common/bootstrap.less => widget/bootstrap-overwrite.less} (85%) create mode 100644 css/widget/common.less rename css/{common => widget}/def.less (100%) create mode 100644 css/widget/dialog.less create mode 100644 css/widget/editor.less rename css/{common/glyf-download.less => widget/glyf-download-dialog.less} (100%) rename css/{common/editor.less => widget/glyf-editor.less} (98%) rename css/{common => widget}/glyf-list.less (91%) rename css/{common => widget}/ico.less (94%) rename css/{common/import-pic.less => widget/import-pic-dialog.less} (98%) create mode 100644 css/widget/loading.less create mode 100644 css/widget/page.less rename css/{common => widget}/project.less (97%) rename css/{common => widget}/reset.less (91%) create mode 100644 css/widget/util.less delete mode 100644 demo/css/render.css delete mode 100644 demo/css/reset.css diff --git a/build.sh b/build.sh index 35591dc..d0f901d 100644 --- a/build.sh +++ b/build.sh @@ -11,6 +11,10 @@ build_index() { # build静态资源 build_asset() { edp build --stage=release --force + if [ $? != 0 ]; then + echo "edp build failed!" + exit 1 + fi echo "asset path：./release" } diff --git a/build/build-css.js b/build/build-css.js new file mode 100644 index 0000000..382251a --- /dev/null +++ b/build/build-css.js @@ -0,0 +1,54 @@ +/** + * @file 单独编译css文件 + * @author mengke01(kekee000@gmail.com) + */ + +var path = require('path'); +var fs = require('fs'); +var less = require('less'); +var BASE_DIR = process.cwd(); + +// 默认的文件列表 +var DEFAULT_FILES = [ + 'css/main.less', + 'css/preview.less' +]; + + +main(process.argv.slice(2)); + +function main(fileList) { + var list = fileList.length ? fileList : DEFAULT_FILES; + list.forEach(function (filePath) { + filePath = path.resolve(BASE_DIR, filePath); + less2css(filePath); + }); +} + + +function compileLess(code, options, onsuccess) { + less.render(code, options).then(function (output) { + onsuccess(output.css); + }, function (error) { + throw error; + }); +} + +function less2css(filePath) { + if (!fs.existsSync(filePath)) { + throw new Error('file not exist:' + filePath); + } + var paths = [ + __dirname + ]; + var options = { + relativeUrls: true, + compress: true, + paths: paths, + filename: filePath + }; + compileLess(fs.readFileSync(filePath, 'utf-8'), options, function (code) { + fs.writeFileSync(filePath.replace(/\.less$/, '.css'), code); + console.log('build less success:' + filePath); + }); +} diff --git a/css/common/common.less b/css/common/common.less deleted file mode 100644 index bb8bf88..0000000 --- a/css/common/common.less +++ /dev/null @@ -1,301 +0,0 @@ -@import './reset.less'; - -@import './bootstrap.less'; - -@import './def.less'; - -body, html { - margin: 0; - padding: 0; - font-size: 13px; - height: 100%; -} - -// scroll bar -::-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,.2) inset; -} - -::-webkit-scrollbar-thumb { - min-height: 20px; - background-clip: content-box; - box-shadow: 0 0 0 5px rgba(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; - - >.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; - } - - >.action-groups { - margin-left: 180px; - padding-left: 8px; - - [data-disabled="1"] { - color: #ccc; - cursor: not-allowed; - - a { - color: #ccc; - cursor: not-allowed; - } - } - } -} - -.container { - display: flex; - flex: 1; -} - -.sidebar { - position: fixed; - width: 180px; - top: @top-height; - bottom: 0; - background: #232830; -} - -.main { - margin-left: 180px; - padding-top: @top-height + @command-groups-height; - height: 100%; - background: #BCC5CD; - - .glyf-list { - padding: 10px 0 0 10px; - } - - .command-groups { - margin-top: -40px; - display: none; - } - - .pager { - position: absolute; - z-index: 10; - padding: 5px; - right: 0; - bottom: 0; - background: #707780; - display: none; - } -} - - - -.main.editing { - margin-left: 70%; - padding-top: @top-height; - - .command-groups { - display: none; - } -} - -// loading 动画 -.loading { - position: fixed; - left: 50%; - top: 30%; - width: 200px; - margin-left: -100px; - line-height: 24px; - text-align: center; - z-index: 10000; - display: none; - - 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: @top-height; - padding-top: @command-groups-height; - bottom: 0; - z-index: 1; - background: #FEFEFE; - border-right: 1px solid #DDD; - display: none; - - .command-groups { - background: rgba(112, 119, 128, 1); - margin-top: -40px; - } - - .close-editor { - position: absolute; - right: 0; - top: 0; - padding-right: 5px; - z-index: 100; - font-size: 20px; - line-height: 38px; - color: #FFF; - display: none; - &:hover { - cursor: pointer - } - } - - &:hover { - .close-editor { - display: block; - } - } - @media screen and (min-width:1300px) and (max-width:1600px){ - .command-groups { - >li, - >li[data-theme="ico"] { - padding: 0 8px; - } - } - } - - @media screen and (max-width:1300px){ - .command-groups { - >li, - >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; - a { - color: #666; - } -} - -// modal - -.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; - - .btn-default { - border-radius: 0; - color: #FFF; - background: #738089; - } - - .btn-primary { - border-radius: 0; - background: #4A90E2; - } - -} - - -// 百度统计反馈样式 -html .hm-t-feedback-trigger { - bottom: 90px!important; -} diff --git a/css/common/dialog.less b/css/common/dialog.less deleted file mode 100644 index e82f161..0000000 --- a/css/common/dialog.less +++ /dev/null @@ -1,22 +0,0 @@ - - -.setting-metrics { - - .modal-dialog { - width: 800px; - } - - .panose-inline { - margin-bottom: -15px; - .input-group { - width: 100%; - } - } - -} - - -.list-font-online { - max-height: 400px; - overflow: auto; -} diff --git a/css/common/util.less b/css/common/util.less deleted file mode 100644 index 39ba9e4..0000000 --- a/css/common/util.less +++ /dev/null @@ -1,14 +0,0 @@ - - -.ellipsis() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.ellipsis(@width) when (@width > 0px) { - width: @width; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} \ No newline at end of file diff --git a/css/main.css b/css/main.css index 380bcab..88729cf 100644 --- a/css/main.css +++ b/css/main.css @@ -1,1025 +1 @@ -* { - 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; -} -.navbar > .action-groups [data-disabled="1"] { - color: #ccc; - cursor: not-allowed; -} -.navbar > .action-groups [data-disabled="1"] a { - color: #ccc; - cursor: not-allowed; -} -.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; -} -html .hm-t-feedback-trigger { - bottom: 90px!important; -} -@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%; -} -.list-font-online { - max-height: 400px; - overflow: auto; -} -.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; -} -.glyf-download-dialog .field-margin { - margin-left: 15px; -} -.glyf-download-dialog .color-picker { - width: 25px; - height: 25px; -} -.glyf-download-dialog .preview-panel { - height: 360px; - text-align: center; - overflow: auto; - position: relative; -} -.glyf-download-dialog .preview-panel > canvas { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -.glyf-download-dialog .glyf-download-btn { - text-align: center; -} -.glyf-download-dialog .glyf-download-btn .btn-flat { - padding: 10px 15px; -} -.glyf-download-dialog .glyf-download-btn .field-margin { - margin-left: 30px; -} -.cp-color-picker { - z-index: 10000; -} +*{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:#000}fieldset,img{border:0}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}.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}@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:.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'}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}.navbar>.action-groups [data-disabled="1"]{color:#ccc;cursor:not-allowed}.navbar>.action-groups [data-disabled="1"] a{color:#ccc;cursor:not-allowed}.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}.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}html .hm-t-feedback-trigger{bottom:90px !important}.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)}.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}.selection-range{position:absolute;z-index:6;display:none;border:1px solid #ccc;background:rgba(222,222,222,0.5);pointer-events:none}.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}.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:.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}.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:.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}.modal{background:-webkit-radial-gradient(center, circle contain, rgba(255,255,255,0.6) 0, rgba(0,0,0,0.6) 100%)}.modal-dialog{margin-top:100px}.modal-dialog hr{margin-top:0}.modal-header{padding-top:6px;padding-bottom:6px;background:#fff;color:#202430}.modal-header .close{margin-top:3px}.modal-header .modal-title{font-size:14px;line-height:25px}.modal-body{min-height:100px;padding-bottom:5px;background:#f8f9f9}.modal-content{border-radius:0;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}.modal-footer{border-top:0;background:#f8f9f9;padding-top:10px;padding-bottom:10px}.modal-footer .btn-default{border-radius:0;color:#fff;background:#738089}.modal-footer .btn-primary{border-radius:0;background:#4a90e2}.setting-metrics .modal-dialog{width:800px}.setting-metrics .panose-inline{margin-bottom:-15px}.setting-metrics .panose-inline .input-group{width:100%}.list-font-online{max-height:400px;overflow:auto}.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}.glyf-download-dialog .field-margin{margin-left:15px}.glyf-download-dialog .color-picker{width:25px;height:25px}.glyf-download-dialog .preview-panel{height:360px;text-align:center;overflow:auto;position:relative}.glyf-download-dialog .preview-panel>canvas{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.glyf-download-dialog .glyf-download-btn{text-align:center}.glyf-download-dialog .glyf-download-btn .btn-flat{padding:10px 15px}.glyf-download-dialog .glyf-download-btn .field-margin{margin-left:30px}.cp-color-picker{z-index:10000} \ No newline at end of file diff --git a/css/main.less b/css/main.less index 84f6a41..eed433d 100644 --- a/css/main.less +++ b/css/main.less @@ -1,9 +1,12 @@ -@import './common/common.less'; -@import './common/util.less'; -@import './common/ico.less'; -@import './common/project.less'; -@import './common/glyf-list.less'; -@import './common/editor.less'; -@import './common/dialog.less'; -@import './common/import-pic.less'; -@import './common/glyf-download.less'; +@import './widget/util.less'; +@import './widget/common.less'; +@import './widget/page.less'; + +@import './widget/loading.less'; +@import './widget/project.less'; +@import './widget/glyf-list.less'; +@import './widget/editor.less'; +@import './widget/glyf-editor.less'; +@import './widget/dialog.less'; +@import './widget/import-pic-dialog.less'; +@import './widget/glyf-download-dialog.less'; diff --git a/css/preview.css b/css/preview.css index 80c25b1..5e61649 100644 --- a/css/preview.css +++ b/css/preview.css @@ -1,137 +1 @@ -* { - 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; -} -.main { - padding: 30px 100px; -} -.main h1 { - font-size: 36px; - color: #333; - text-align: left; - margin-bottom: 30px; - border-bottom: 1px solid #eeeeee; -} -.helps { - margin-top: 40px; -} -.helps pre { - padding: 20px; - margin: 10px 0; - border: solid 1px #e7e1cd; - background-color: #fffdef; - overflow: auto; -} -.iconfont-list { - overflow: hidden; -} -.iconfont-list li { - float: left; - width: 100px; - height: 150px; - text-align: center; -} -.iconfont-list .icon { - font-size: 42px; - line-height: 100px; - margin: 10px 0; - color: #333; - font-style: normal; - -webkit-transition: font-size 0.25s ease-out 0s; - -moz-transition: font-size 0.25s ease-out 0s; - transition: font-size 0.25s ease-out 0s; -} -.iconfont-list .icon:hover { - font-size: 100px; -} -.iconfont-list .code { - color: green; - font-weight: bold; -} +*{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:#000}fieldset,img{border:0}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}.main{padding:30px 100px}.main h1{font-size:36px;color:#333;text-align:left;margin-bottom:30px;border-bottom:1px solid #eee}.helps{margin-top:40px}.helps pre{padding:20px;margin:10px 0;border:solid 1px #e7e1cd;background-color:#fffdef;overflow:auto}.iconfont-list{overflow:hidden}.iconfont-list li{float:left;width:100px;height:150px;text-align:center}.iconfont-list .icon{font-size:42px;line-height:100px;margin:10px 0;color:#333;font-style:normal;-webkit-transition:font-size .25s ease-out 0s;-moz-transition:font-size .25s ease-out 0s;transition:font-size .25s ease-out 0s}.iconfont-list .icon:hover{font-size:100px}.iconfont-list .code{color:green;font-weight:bold} \ No newline at end of file diff --git a/css/preview.less b/css/preview.less index 007531c..5a5ba52 100644 --- a/css/preview.less +++ b/css/preview.less @@ -1,5 +1,4 @@ - -@import './common/reset'; +@import './widget/reset.less'; .main { padding:30px 100px; diff --git a/css/common/bootstrap.less b/css/widget/bootstrap-overwrite.less similarity index 85% rename from css/common/bootstrap.less rename to css/widget/bootstrap-overwrite.less index 7e897dd..c998433 100644 --- a/css/common/bootstrap.less +++ b/css/widget/bootstrap-overwrite.less @@ -1,47 +1,5 @@ - // overwrite bootstrap themes - -.modal-dialog { - margin-top: 100px; - - hr { - margin-top: 0; - } -} - -.modal-header { - padding-top: 6px; - padding-bottom: 6px; - background: #327EC0; - color: #FFF; - .close { - margin-top: 3px; - } - - .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,.5); - -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2); - box-shadow: 0 2px 4px rgba(0,0,0,.2); - overflow: hidden; -} - .dropdown-menu { margin-top: 0; border-radius: 0; diff --git a/css/widget/common.less b/css/widget/common.less new file mode 100644 index 0000000..75c379f --- /dev/null +++ b/css/widget/common.less @@ -0,0 +1,39 @@ +// 页面背景样式定义 +@import './reset.less'; +@import './bootstrap-overwrite.less'; +@import './def.less'; +@import './ico.less'; + +body, +html { + margin: 0; + padding: 0; + font-size: 13px; + height: 100%; +} + +// scroll bar +::-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,.2) inset; +} + +::-webkit-scrollbar-thumb { + min-height: 20px; + background-clip: content-box; + box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset; +} + +::-webkit-scrollbar-corner { + background: transparent; +} diff --git a/css/common/def.less b/css/widget/def.less similarity index 100% rename from css/common/def.less rename to css/widget/def.less diff --git a/css/widget/dialog.less b/css/widget/dialog.less new file mode 100644 index 0000000..02b3b9c --- /dev/null +++ b/css/widget/dialog.less @@ -0,0 +1,81 @@ +// 对话框样式 + +.modal { + background: -webkit-radial-gradient(center, circle contain, rgba(255,255,255,0.6) 0%, rgba(0,0,0,0.6) 100%); +} + +.modal-dialog { + margin-top: 100px; + + hr { + margin-top: 0; + } +} + +.modal-header { + padding-top: 6px; + padding-bottom: 6px; + background: #fff; + color: #202430; + .close { + margin-top: 3px; + } + + .modal-title { + font-size: 14px; + line-height: 25px; + } +} + + + +.modal-body { + min-height: 100px; + padding-bottom: 5px; + background: #F8F9F9; +} + +.modal-content { + border-radius: 0; + border-color: rgba(0,0,0,.5); + -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2); + box-shadow: 0 2px 4px rgba(0,0,0,.2); + overflow: hidden; +} + +.modal-footer { + border-top: 0; + background: #F8F9F9; + padding-top: 10px; + padding-bottom: 10px; + + .btn-default { + border-radius: 0; + color: #FFF; + background: #738089; + } + + .btn-primary { + border-radius: 0; + background: #4A90E2; + } +} + +.setting-metrics { + .modal-dialog { + width: 800px; + } + .panose-inline { + margin-bottom: -15px; + .input-group { + width: 100%; + } + } + +} + + +.list-font-online { + max-height: 400px; + overflow: auto; +} diff --git a/css/widget/editor.less b/css/widget/editor.less new file mode 100644 index 0000000..c2780fb --- /dev/null +++ b/css/widget/editor.less @@ -0,0 +1,154 @@ +// 编辑器样式集合 + +.editor { + position: fixed; + width: 70%; + top: @top-height; + padding-top: @command-groups-height; + bottom: 0; + z-index: 1; + background: #FEFEFE; + border-right: 1px solid #DDD; + display: none; + + .command-groups { + background: rgba(112, 119, 128, 1); + margin-top: -40px; + } + + .close-editor { + position: absolute; + right: 0; + top: 0; + padding-right: 5px; + z-index: 100; + font-size: 20px; + line-height: 38px; + color: #FFF; + display: none; + &:hover { + cursor: pointer + } + } + + &:hover { + .close-editor { + display: block; + } + } + @media screen and (min-width:1300px) and (max-width:1600px){ + .command-groups { + >li, + >li[data-theme="ico"] { + padding: 0 8px; + } + } + } + + @media screen and (max-width:1300px){ + .command-groups { + >li, + >li[data-theme="ico"] { + padding: 0 4px; + } + } + } +} + + + +.editor.editing { + display: block; +} + +.glyf-editor { + width: 100%; + height: 100%; + font-size: 12px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + display: none; + + .marker-x, + .marker-y { + position: absolute; + width: 0; + height: 0; + z-index: 60; + pointer-events: none; + } + + .marker-x { + width: 20px; + border-top: 1px dashed #000; + } + + .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; + + li { + padding-left: 4px; + cursor: pointer; + border-bottom: 1px solid #CCC; + >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; + } + } + + >li[data-sub] { + color: #4A90E2; + &:after { + content:'>'; + margin-right: 10px; + float: right; + font-family: 'Simsun'; + } + } + + li[data-tag="selected"] { + .icon(); + .i-ico('\e01f', 'after'); + display: block; + &:after { + float: right; + margin-right: 4px; + color: #4A90E2; + } + } + + li:hover { + background: #EEE; + >ul { + display: block; + } + } + + li:last-child { + border-bottom: none; + } +} + diff --git a/css/common/glyf-download.less b/css/widget/glyf-download-dialog.less similarity index 100% rename from css/common/glyf-download.less rename to css/widget/glyf-download-dialog.less diff --git a/css/common/editor.less b/css/widget/glyf-editor.less similarity index 98% rename from css/common/editor.less rename to css/widget/glyf-editor.less index 6645acf..d05e1e1 100644 --- a/css/common/editor.less +++ b/css/widget/glyf-editor.less @@ -1,8 +1,5 @@ - -// 编辑器样式集合 - +// glyf编辑器样式 .glyf-editor { - width: 100%; height: 100%; font-size: 12px; @@ -32,7 +29,6 @@ } .editor-contextmenu { - color: #333; width: 150px; border: 1px solid #999; diff --git a/css/common/glyf-list.less b/css/widget/glyf-list.less similarity index 91% rename from css/common/glyf-list.less rename to css/widget/glyf-list.less index 8b819be..0cd108d 100644 --- a/css/common/glyf-list.less +++ b/css/widget/glyf-list.less @@ -1,3 +1,4 @@ +// glyf列表样式 .glyf-list { height: 100%; overflow: auto; @@ -21,7 +22,7 @@ color: #45283F; .ellipsis(); } - + .unicode { color: #70A9D6; } @@ -138,4 +139,14 @@ .glyf-item { pointer-events: none; } -} \ No newline at end of file +} + +// 选择范围矩形 +.selection-range { + position: absolute; + z-index: 6; + display: none; + border: 1px solid #CCC; + background: rgba(222, 222, 222, 0.5); + pointer-events: none; +} diff --git a/css/common/ico.less b/css/widget/ico.less similarity index 94% rename from css/common/ico.less rename to css/widget/ico.less index 0c88448..d8e089f 100644 --- a/css/common/ico.less +++ b/css/widget/ico.less @@ -1,9 +1,9 @@ - +// 图标集合 // fontface @font-face { font-family: 'fonteditor'; - src: url('../font/fonteditor.ttf') format('truetype'); + src: url('../../font/fonteditor.ttf') format('truetype'); } .icon() { @@ -13,7 +13,7 @@ font-family: 'fonteditor'; font-style:normal; -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0.1px; + -webkit-text-stroke-width: 0.1px; } } @@ -194,4 +194,4 @@ .i-pointmode { .i-ico('\e028'); -} \ No newline at end of file +} diff --git a/css/common/import-pic.less b/css/widget/import-pic-dialog.less similarity index 98% rename from css/common/import-pic.less rename to css/widget/import-pic-dialog.less index dd069f9..2458583 100644 --- a/css/common/import-pic.less +++ b/css/widget/import-pic-dialog.less @@ -1,4 +1,4 @@ - +// 导入图片对话框 .import-pic-dialog { .modal-dialog { width: 960px; diff --git a/css/widget/loading.less b/css/widget/loading.less new file mode 100644 index 0000000..49ae037 --- /dev/null +++ b/css/widget/loading.less @@ -0,0 +1,34 @@ +// loading 动画 +.loading { + position: fixed; + left: 50%; + top: 30%; + width: 200px; + margin-left: -100px; + line-height: 24px; + text-align: center; + z-index: 10000; + display: none; + + 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); + } +} diff --git a/css/widget/page.less b/css/widget/page.less new file mode 100644 index 0000000..8a89e6a --- /dev/null +++ b/css/widget/page.less @@ -0,0 +1,121 @@ +// 页面元素相关 +// 菜单 +.navbar { + border-radius: 0; + margin: 0; + padding: 0; + position: fixed; + z-index: 10; + width: 100%; + height: 51px; + min-width: 1024px; + top: 0; + + >.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; + } + + >.action-groups { + margin-left: 180px; + padding-left: 8px; + + [data-disabled="1"] { + color: #ccc; + cursor: not-allowed; + + a { + color: #ccc; + cursor: not-allowed; + } + } + } +} + +.container { + display: flex; + flex: 1; +} + +.sidebar { + position: fixed; + width: 180px; + top: @top-height; + bottom: 0; + background: #232830; +} + +.main { + margin-left: 180px; + padding-top: @top-height + @command-groups-height; + height: 100%; + background: #BCC5CD; + + .glyf-list { + padding: 10px 0 0 10px; + } + + .command-groups { + margin-top: -40px; + display: none; + } + + .pager { + position: absolute; + z-index: 10; + padding: 5px; + right: 0; + bottom: 0; + background: #707780; + display: none; + } +} + + + +.main.editing { + margin-left: 70%; + padding-top: @top-height; + + .command-groups { + display: 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; + a { + color: #666; + } +} + +// 百度统计反馈样式 +html .hm-t-feedback-trigger { + bottom: 90px!important; +} diff --git a/css/common/project.less b/css/widget/project.less similarity index 97% rename from css/common/project.less rename to css/widget/project.less index 47f4a6d..ddccd49 100644 --- a/css/common/project.less +++ b/css/widget/project.less @@ -1,6 +1,5 @@ - +// 项目模块相关样式 .project-btns { - margin: 0 15px; padding: 10px 0; border-bottom: #353D45 1px solid; diff --git a/css/common/reset.less b/css/widget/reset.less similarity index 91% rename from css/common/reset.less rename to css/widget/reset.less index c750d34..ddbf443 100644 --- a/css/common/reset.less +++ b/css/widget/reset.less @@ -1,3 +1,8 @@ +/** + * @file 重置样式 + * @author mengke01(kekee000@gmail.com) + */ + * { margin:0; padding:0; diff --git a/css/widget/util.less b/css/widget/util.less new file mode 100644 index 0000000..bf0f18a --- /dev/null +++ b/css/widget/util.less @@ -0,0 +1,43 @@ +/** + * @file 页面相关工具 + * @author mengke01(kekee000@gmail.com) + */ + +.ellipsis() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ellipsis(@width) when (@width > 0px) { + width: @width; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// 各种渐变 +.gradient-horizontal(@startColor: #555, @endColor: #333) { + background-color: @endColor; + background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ + background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 + background-repeat: repeat-x; +} +.gradient-vertical(@startColor: #555, @endColor: #333) { + background-color: @endColor; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ + background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 + background-repeat: repeat-x; +} +.gradient-directional(@startColor: #555, @endColor: #333, @deg: 45deg) { + background-color: @endColor; + background-repeat: repeat-x; + background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ + background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 +} diff --git a/demo/css/editor.css b/demo/css/editor.css index 0196460..56b362c 100644 --- a/demo/css/editor.css +++ b/demo/css/editor.css @@ -1,255 +1 @@ -* { - margin: 0; - padding: 0; -} -ul { - list-style: none; -} -a { - color: #03C; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -.hide { - display: none; -} -@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'; -} -.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; -} -body, -html { - height: 100%; -} -#render-view { - font-size: 12px; - width: 100%; - height: 100%; - position: relative; - -webkit-text-size-adjust: none; - display: block; -} +*{margin:0;padding:0}ul{list-style:none}a{color:#03c;text-decoration:none}a:hover{text-decoration:underline}.hide{display:none}@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:.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'}.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:.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}body,html{height:100%}#render-view{font-size:12px;width:100%;height:100%;position:relative;-webkit-text-size-adjust:none;display:block} \ No newline at end of file diff --git a/demo/css/editor.less b/demo/css/editor.less index d15848c..3a59d7d 100644 --- a/demo/css/editor.less +++ b/demo/css/editor.less @@ -1,6 +1,6 @@ -@import './reset'; -@import '../../css/common/ico'; -@import '../../css/common/editor'; +@import './reset.less'; +@import '../../css/widget/ico.less'; +@import '../../css/widget/glyf-editor.less'; body, html { height: 100%; diff --git a/demo/css/editortest.css b/demo/css/editortest.css index 689a09b..b9e0fd6 100644 --- a/demo/css/editortest.css +++ b/demo/css/editortest.css @@ -17,7 +17,7 @@ a:hover { } @font-face { font-family: 'fonteditor'; - src: url('../font/fonteditor.ttf') format('truetype'); + src: url('../../font/fonteditor.ttf') format('truetype'); } .ico { display: inline-block; @@ -179,7 +179,7 @@ a:hover { } .editor-contextmenu { color: #333; - width: 140px; + width: 150px; border: 1px solid #999; background: #FEFEFE; line-height: 24px; @@ -188,21 +188,21 @@ a:hover { position: absolute; } .editor-contextmenu li { - padding-left: 10px; + padding-left: 4px; cursor: pointer; border-bottom: 1px solid #CCC; } .editor-contextmenu li > ul { display: none; color: #333; - width: 140px; + width: 150px; border: 1px solid #999; background: #FEFEFE; line-height: 24px; padding: 0 4px; box-shadow: 1px 1px 1px #CCC; position: absolute; - margin-left: 120px; + margin-left: 130px; } .editor-contextmenu > li[data-sub] { color: #4A90E2; @@ -229,7 +229,7 @@ a:hover { } .editor-contextmenu li[data-tag="selected"]:after { float: right; - margin-right: 10px; + margin-right: 4px; color: #4A90E2; } .editor-contextmenu li:hover { diff --git a/demo/css/editortest.less b/demo/css/editortest.less index d5fd1fb..687f51b 100644 --- a/demo/css/editortest.less +++ b/demo/css/editortest.less @@ -1,7 +1,4 @@ - - - -@import './editor'; +@import './editor.less'; .pan-left { float: left; @@ -19,4 +16,4 @@ #render-view { margin-left: 200px; width: auto; -} \ No newline at end of file +} diff --git a/demo/css/render.css b/demo/css/render.css deleted file mode 100644 index 20bd4db..0000000 --- a/demo/css/render.css +++ /dev/null @@ -1,27 +0,0 @@ -* { - margin: 0; - padding: 0; -} -ul { - list-style: none; -} -a { - color: #03C; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -.hide { - display: none; -} -body, -html { - height: 100%; -} -#render-view { - width: 100%; - height: 100%; - position: relative; - -webkit-text-size-adjust: none; -} diff --git a/demo/css/render.less b/demo/css/render.less index d9cffb3..5e18dc1 100644 --- a/demo/css/render.less +++ b/demo/css/render.less @@ -1,4 +1,4 @@ -@import './reset'; +@import './reset.less'; body, html { height: 100%; @@ -9,4 +9,4 @@ body, html { height: 100%; position: relative; -webkit-text-size-adjust: none; -} \ No newline at end of file +} diff --git a/demo/css/reset.css b/demo/css/reset.css deleted file mode 100644 index ae62564..0000000 --- a/demo/css/reset.css +++ /dev/null @@ -1,17 +0,0 @@ -* { - margin: 0; - padding: 0; -} -ul { - list-style: none; -} -a { - color: #03C; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -.hide { - display: none; -} diff --git a/edp-build-config.js b/edp-build-config.js index d7042d6..6d36abb 100644 --- a/edp-build-config.js +++ b/edp-build-config.js @@ -8,15 +8,13 @@ exports.getProcessors = function () { return [ - // new LessCompiler({ - // files: [ - // 'css/main.less', - // 'css/preview.less' - // ], - // compileOptions: { - // relativeUrls: false - // } - // }), + new LessCompiler({ + files: [ + 'css/main.less', + 'css/preview.less' + ], + entryFiles: [] + }), new Html2JsCompiler({ diff --git a/edp-webserver-config.js b/edp-webserver-config.js index 22fa8df..718bd03 100644 --- a/edp-webserver-config.js +++ b/edp-webserver-config.js @@ -11,11 +11,7 @@ exports.getLocations = function () { { location: /\.css($|\?)/, handler: [ - autocss({ - less: { - relativeUrls: false - } - }) + autocss() ] }, diff --git a/package.json b/package.json index 62b7d83..7235a90 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,15 @@ } ], "description": "ttf to woff,svg,eot convert, ttf adjust", - "dependencies": { - "fonteditor": "*" + "scripts": { + "start": "edp webserver start", + "build": "sh build.sh", + "build-index": "node build/build-index.js", + "build-css": "node build/build-css.js" + }, + "devDependencies": { + "less": "~2.0.0", + "q": "^1.2.0" }, "homepage": "https://github.com/ecomfe/fonteditor", "keywords": [