diff --git a/css/common/bootstrap.less b/css/common/bootstrap.less index 4620b89..78514b3 100644 --- a/css/common/bootstrap.less +++ b/css/common/bootstrap.less @@ -66,3 +66,25 @@ hr { width: 30%; } } + + +.navbar { + height: 50px; + background: #F9F9F9; +} + +.btn-flat { + border-radius: 0; + color: #FFF; + background: #738089; + + &:hover, + &:focus { + color: #FFF; + background: darken(#738089, 10%); + } + + .ico { + margin-right: 8px; + } +} \ No newline at end of file diff --git a/css/common/common.less b/css/common/common.less index 5377d34..5a30ec2 100644 --- a/css/common/common.less +++ b/css/common/common.less @@ -40,9 +40,11 @@ body, html { .navbar { border-radius: 0; margin: 0; + padding: 0; position: fixed; z-index: 10; width: 100%; + height: 51px; min-width: 1024px; top: 0; @@ -51,11 +53,20 @@ body, html { margin-top: 10px; } - >.btn:first-child { - margin-left: 10px; + >.logo { + width: 180px; + height: 50px; + background: url(./img/logo.png) no-repeat; + float: left; + } + + >.action-groups { + margin-left: 180px; + padding-left: 8px; } } + #export-btn { margin-right: 10px; margin-top: 10px; @@ -72,21 +83,24 @@ body, html { .sidebar { position: fixed; - width: 200px; + width: 180px; top: @top-height; bottom: 0; - background: #FCFCFC; - padding: 4px; - border-right: 1px solid #DDD; + background: #232830; } .main { - margin-left: 200px; - padding: 4px 0 4px 10px; + margin-left: 180px; padding-top: @top-height; height: 100%; + background: #BCC5CD; + .glyf-list { + padding: 10px 0 0 10px; + } } + + .main.editing { margin-left: 70%; } @@ -138,10 +152,9 @@ body, html { } .forkme { - float: right; + position: absolute; color: #FFF; - - &:hover { - color: #EEE - } + right: 2px; + top: 2px; + color: #333 } \ No newline at end of file diff --git a/css/common/editor.less b/css/common/editor.less index f1e29f0..1aa1b82 100644 --- a/css/common/editor.less +++ b/css/common/editor.less @@ -60,7 +60,7 @@ } >li[data-sub] { - color: green; + color: #4A90E2; &:after { content:'>'; margin-right: 10px; @@ -70,12 +70,13 @@ } li[data-tag="selected"] { - .ico(); + .icon(); + .i-ico('\e01f', 'after'); display: block; &:after { - content:'\e610'; float: right; margin-right: 10px; + color: #4A90E2; } } diff --git a/css/common/glyf-list.less b/css/common/glyf-list.less new file mode 100644 index 0000000..13c5993 --- /dev/null +++ b/css/common/glyf-list.less @@ -0,0 +1,96 @@ +.glyf-list { + height: 100%; + overflow: auto; + + >.glyf-item { + + float: left; + position: relative; + margin: 10px; + width: 80px; + box-shadow: 1px 1px 4px #999; + cursor: pointer; + background: #ECECEC; + + .unicode, + .name { + font-size: 12px; + line-height: 20px; + height: 20px; + padding-left: 4px; + color: #45283F; + .ellipsis(); + } + + .unicode { + color: #70A9D6; + } + + .glyf { + width: 80px; + height: 80px; + border: 3px solid #FFF; + background: #FFF; + box-sizing: border-box; + display: block; + .path { + fill: #232830; + } + } + + .i-del, + .i-edit { + position: absolute; + right: 6px; + display: none; + } + + .i-edit { + right: 20px; + } + } + + >.glyf-item:hover, + >.selected { + background: #232830; + .glyf { + border-color: #232830; + } + } + + >.glyf-item:hover { + .name { + color: #FFF; + } + .i-del { + display: block; + } + } + + >.compound { + .path { + fill: lighten(#232830, 10%) !important; + } + } + + >.new, + >.edit { + .path { + fill: blue!important; + } + } + + + >.glyf-item:hover { + .i-edit { + display: block; + } + } +} + + +.glyf-list.no-hover { + .glyf-item { + pointer-events: none; + } +} \ No newline at end of file diff --git a/css/common/ico.less b/css/common/ico.less index 6ee9c4c..3ade15d 100644 --- a/css/common/ico.less +++ b/css/common/ico.less @@ -3,10 +3,10 @@ // fontface @font-face { font-family: 'fonteditor'; - src: url('../font/iconfont.ttf') format('truetype'); + src: url('../font/fonteditor.ttf') format('truetype'); } -.ico() { +.icon() { display: inline-block; &:before, &:after { @@ -23,33 +23,51 @@ } } +.i-ico(@unicode, @pos) when (@pos = 'after'){ + &:after { + content: @unicode; + } +} + +.ico { + .icon(); +} + .i-edit, .i-del { - .ico(); font-size: 12px; &:hover { cursor: pointer; - color: blue; + color: #4A90E2; } } .i-edit { - .i-ico('\e605'); + .i-ico('\e021'); } .i-del { - .i-ico('\e611'); + .i-ico('\e020'); } .i-github { - .ico(); - .i-ico('\e600'); + .i-ico('\e01e'); +} + +// 编辑器按钮组 +.i-new { + .i-ico('\e019'); +} + +.i-open { + .i-ico('\e01A'); +} + +.i-add { + .i-ico('\e003'); } .close-editor { - .ico(); - .i-ico('\e611'); - position: absolute; right: 0; top: 0; @@ -63,4 +81,4 @@ &:hover { cursor: pointer } -} \ No newline at end of file +} diff --git a/css/common/project.less b/css/common/project.less new file mode 100644 index 0000000..20b8ae1 --- /dev/null +++ b/css/common/project.less @@ -0,0 +1,55 @@ + +.project-btns { + + margin: 0 15px; + padding: 10px 0; + border-bottom: #353D45 1px solid; + + .btn { + margin-right: 8px; + padding-left: 12px; + padding-right: 12px; + } + .btn:last-child { + margin-right: 0; + } +} + +.project { + .project-title { + font-weight: bold; + color: #6F7D88; + padding-left: 15px; + line-height: 32px; + } + + .project-list { + line-height: 28px; + + a { + color: #9EB0C0; + } + + div { + padding: 0 10px 0 15px; + } + + div:hover { + background: #323842; + + a { + color: #FFF; + } + + .i-del { + display: block; + } + } + + .i-del { + float: right; + display: none; + color: #FFF; + } + } +} \ No newline at end of file diff --git a/css/img/logo.png b/css/img/logo.png new file mode 100644 index 0000000..d5ad3fe Binary files /dev/null and b/css/img/logo.png differ diff --git a/css/main.less b/css/main.less index d6bdcc7..86de50b 100644 --- a/css/main.less +++ b/css/main.less @@ -1,130 +1,6 @@ @import './common/common.less'; @import './common/util.less'; @import './common/ico.less'; -@import './common/editor.less'; - -.project { - .project-title { - font-weight: bold; - } - .project-list { - line-height: 24px; - - div { - padding: 0 10px; - } - - div:hover { - background: #EFEFEF; - - .i-del { - display: block; - } - } - - .i-del { - float: right; - display: none; - } - } -} - - - - -.glyf-list { - height: 100%; - overflow: auto; - - >.glyf-item { - - float: left; - position: relative; - margin: 10px; - width: 86px; - border: 1px solid #CCC; - box-shadow: 1px 1px 1px #EEE; - border-radius: 6px; - cursor: pointer; - - .unicode, - .name { - font-size: 12px; - line-height: 20px; - height: 20px; - padding-left: 4px; - .ellipsis(); - } - - .unicode { - color: green; - border-top: 1px solid #CCC; - } - - .glyf { - width: 60px; - height: 60px; - margin: 10px; - .path { - fill: green; - } - } - - .i-del, - .i-edit { - position: absolute; - right: 2px; - display: none; - } - - .i-edit { - right: 20px; - } - } - - >.glyf-item:hover { - background: #EFEFEF; - .path { - fill: darkgreen; - } - - .i-del { - display: block; - } - } - - >.compound { - .path { - fill: lightgreen!important; - } - } - - >.new, - >.edit { - .path { - fill: blue!important; - } - } - - >.selected { - background: #EBFFC2!important; - } -} - - -.glyf-list.no-hover { - .glyf-item { - pointer-events: none; - } -} - - - -.glyf-list { - - >.glyf-item:hover { - .i-edit { - display: block; - } - } -} \ No newline at end of file +@import './common/project.less'; +@import './common/glyf-list.less'; +@import './common/editor.less'; \ No newline at end of file diff --git a/demo/css/editor.css b/demo/css/editor.css index 537cac9..b614375 100644 --- a/demo/css/editor.css +++ b/demo/css/editor.css @@ -17,48 +17,46 @@ a:hover { } @font-face { font-family: 'fonteditor'; - src: url('../font/iconfont.ttf') format('truetype'); + src: url('../font/fonteditor.ttf') format('truetype'); } -.i-edit, -.i-del { +.ico { display: inline-block; - font-size: 12px; } -.i-edit:before, -.i-del:before, -.i-edit:after, -.i-del:after { +.ico:before, +.ico:after { font-family: 'fonteditor'; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.1px; } +.i-edit, +.i-del { + font-size: 12px; +} .i-edit:hover, .i-del:hover { cursor: pointer; - color: blue; + color: #4A90E2; } .i-edit:before { - content: '\e605'; + content: '\e021'; } .i-del:before { - content: '\e611'; -} -.i-github { - display: inline-block; -} -.i-github:before, -.i-github:after { - font-family: 'fonteditor'; - font-style: normal; - -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0.1px; + content: '\e020'; } .i-github:before { - content: '\e600'; + content: '\e01e'; +} +.i-new:before { + content: '\e019'; +} +.i-open:before { + content: '\e01A'; +} +.i-add:before { + content: '\e003'; } .close-editor { - display: inline-block; position: absolute; right: 0; top: 0; @@ -69,16 +67,6 @@ a:hover { border-left: 1px solid #000; display: none; } -.close-editor:before, -.close-editor:after { - font-family: 'fonteditor'; - font-style: normal; - -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0.1px; -} -.close-editor:before { - content: '\e611'; -} .close-editor:hover { cursor: pointer; } @@ -134,7 +122,7 @@ a:hover { margin-left: 120px; } .editor-contextmenu > li[data-sub] { - color: green; + color: #4A90E2; } .editor-contextmenu > li[data-sub]:after { content: '>'; @@ -154,9 +142,12 @@ a:hover { -webkit-text-stroke-width: 0.1px; } .editor-contextmenu li[data-tag="selected"]:after { - content: '\e610'; + content: '\e01f'; +} +.editor-contextmenu li[data-tag="selected"]:after { float: right; margin-right: 10px; + color: #4A90E2; } .editor-contextmenu li:hover { background: #EEE; diff --git a/font/fonteditor.eot b/font/fonteditor.eot new file mode 100644 index 0000000..7df03ef Binary files /dev/null and b/font/fonteditor.eot differ diff --git a/font/fonteditor.svg b/font/fonteditor.svg new file mode 100644 index 0000000..63d9baf --- /dev/null +++ b/font/fonteditor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/font/fonteditor.ttf b/font/fonteditor.ttf new file mode 100644 index 0000000..bbb908c Binary files /dev/null and b/font/fonteditor.ttf differ diff --git a/font/fonteditor.woff b/font/fonteditor.woff new file mode 100644 index 0000000..9afa835 Binary files /dev/null and b/font/fonteditor.woff differ diff --git a/font/iconfont.eot b/font/iconfont.eot deleted file mode 100644 index a0e9995..0000000 Binary files a/font/iconfont.eot and /dev/null differ diff --git a/font/iconfont.svg b/font/iconfont.svg deleted file mode 100644 index 69d2661..0000000 --- a/font/iconfont.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/font/iconfont.ttf b/font/iconfont.ttf deleted file mode 100644 index af4bab9..0000000 Binary files a/font/iconfont.ttf and /dev/null differ diff --git a/font/iconfont.woff b/font/iconfont.woff deleted file mode 100644 index 037effe..0000000 Binary files a/font/iconfont.woff and /dev/null differ diff --git a/index.html b/index.html index 5f707d6..32053e4 100644 --- a/index.html +++ b/index.html @@ -8,77 +8,80 @@ -