diff --git a/css/main.css b/css/main.css index ed901f1..4157533 100644 --- a/css/main.css +++ b/css/main.css @@ -1 +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:#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(widget/img/logo@1x.png);background-image:-webkit-image-set(url(img/logo@1x.png) 1x, url(widget/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{margin-left:10px}.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}.main .spliter{position:absolute;height:80%;width:6px}.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 +*{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(widget/img/logo@1x.png);background-image:-webkit-image-set(url(img/logo@1x.png) 1x, url(widget/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{margin-left:10px}.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:#666}.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}.main .spliter{position:absolute;height:80%;width:6px}.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} diff --git a/css/widget/glyf-list.less b/css/widget/glyf-list.less index 0cd108d..3b65195 100644 --- a/css/widget/glyf-list.less +++ b/css/widget/glyf-list.less @@ -35,7 +35,7 @@ box-sizing: border-box; display: block; .path { - fill: #232830; + fill: #666; } } diff --git a/src/fonteditor/main.js b/src/fonteditor/main.js index c8cf3f9..2e498b0 100644 --- a/src/fonteditor/main.js +++ b/src/fonteditor/main.js @@ -6,22 +6,12 @@ define( function (require) { var i18n = require('./i18n/i18n'); - var GLYFViewer = require('./widget/glyfviewer/GLYFViewer'); - var GLYFEditor = require('./widget/GLYFEditor'); - var ProjectViewer = require('./widget/ProjectViewer'); - var Spliter = require('./widget/Spliter'); - var TTFManager = require('./widget/TTFManager'); - var Toolbar = require('./widget/Toolbar'); - var Pager = require('./widget/Pager'); - var program = require('./widget/program'); - var controller = require('./controller/default'); var actions = require('./controller/actions'); - - function onUpFile(e) { - var file = e.target.files[0]; + function loadFiles(files) { + var file = files[0]; if (program.data.action === 'open' && program.loader.supportLoad(file.name)) { program.loader.load(file, { type: file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase(), @@ -34,10 +24,9 @@ define( } else if (program.data.action === 'import' && program.loader.supportImport(file.name)) { if (program.ttfManager.get()) { - var ext = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase(); var reg = new RegExp('\.' + ext + '$', 'i'); - var files = Array.prototype.slice.call(e.target.files).filter(function (f) { + var files = Array.prototype.slice.call(files).filter(function (f) { return reg.test(f.name); }); @@ -59,10 +48,22 @@ define( else { alert(i18n.lang.msg_not_support_file_type); } + } + function onUpFile(e) { + loadFiles(e.target.files); e.target.value = ''; } + function onDrop(e) { + e.stopPropagation(); + e.preventDefault(); + var file = e.dataTransfer.files[0]; + var ext = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase(); + program.data.action = ext === 'svg' ? 'import' : 'open'; + loadFiles(e.dataTransfer.files); + } + function bindEvent() { $('.action-groups').delegate('[data-action]', 'click', function (e) { var action = this.getAttribute('data-action'); @@ -73,6 +74,11 @@ define( }); document.getElementById('font-import').addEventListener('change', onUpFile); + // 阻止拖拽默认事件 + $(document).on('dragleave drop dragenter dragover', function (e) { + e.preventDefault(); + }); + document.getElementById('glyf-list').addEventListener('drop', onDrop); } var entry = { @@ -88,16 +94,21 @@ define( program.config = require('./config'); + // 拖拽面板管理器 + var Spliter = require('./widget/Spliter'); program.spliter = new Spliter($('#glyf-list-spliter')); // glyf查看器命令组 + var Toolbar = require('./widget/Toolbar'); var viewerCommandMenu = new Toolbar($('#glyf-list-commandmenu'), { commands: require('./menu/viewer') }); + var Pager = require('./widget/Pager'); program.viewerPager = new Pager($('#glyf-list-pager')); // glyf查看器 + var GLYFViewer = require('./widget/glyfviewer/GLYFViewer'); program.viewer = new GLYFViewer($('#glyf-list'), { commandMenu: viewerCommandMenu }); @@ -108,15 +119,18 @@ define( }); // 字体查看器 + var GLYFEditor = require('./widget/GLYFEditor'); program.editor = new GLYFEditor($('#glyf-editor'), { commandMenu: editorCommandMenu }); // 项目管理 + var ProjectViewer = require('./widget/ProjectViewer'); program.project = require('./widget/project'); program.projectViewer = new ProjectViewer($('#project-list')); // ttf管理 + var TTFManager = require('./widget/TTFManager'); program.ttfManager = new TTFManager(); // 导入导出器 diff --git a/src/fonteditor/widget/glyfviewer/render.js b/src/fonteditor/widget/glyfviewer/render.js index d9c82427..98c2d0d 100644 --- a/src/fonteditor/widget/glyfviewer/render.js +++ b/src/fonteditor/widget/glyfviewer/render.js @@ -15,7 +15,7 @@ define( + '' + '' + '' - + '' + + '' + '' + '' + '
${unicode}
'