From ed40419e42d2a0e3b27c286da75ba351aee1e58a Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Mon, 15 Jun 2020 14:41:41 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=A4=9C=E9=97=B4?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _server/css/editor_color.css | 70 ++- _server/css/editor_color_dark.css | 688 ++++++++++++++++++++++++++++++ _server/editor.js | 35 +- _server/editor_blockly.js | 15 +- _server/editor_listen.js | 1 + _server/editor_mappanel.js | 10 + editor-mobile.html | 8 +- editor.html | 8 +- 8 files changed, 791 insertions(+), 44 deletions(-) create mode 100644 _server/css/editor_color_dark.css diff --git a/_server/css/editor_color.css b/_server/css/editor_color.css index 1ee188c9..85977b29 100644 --- a/_server/css/editor_color.css +++ b/_server/css/editor_color.css @@ -38,17 +38,17 @@ body { /** 错误消息（如保存失败） */ .warnText { - color: #D50000; + color: #D00; } /** 提示消息（如告知当前图块信息） */ .infoText { - color: #2196F3; + color: #39F; } /** 成功消息（如保存成功） */ .successText { - color: #00897B; + color: #098; } /** 数据库的表格相关 */ @@ -64,22 +64,22 @@ table, td { /** 横向标尺背景色 */ table.col td, div.col .coltd { - background-color: #4DB6AC; + background-color: #398; } /** 横向标尺选中时的背景色 */ #mapColMark td:hover .colBlock, #mapColMark .coltd:hover .colBlock { - background-color: rgba(38, 166, 154, .5); + background-color: rgba(85, 204, 187, 0.5); } /** 纵向标尺背景色 */ table.row td, div.row .rowtd .rowtext { - background-color: #4C221B; + background-color: #379; } /** 纵向标尺选中时的背景色 */ #mapRowMark td:hover .rowBlock, #mapRowMark .rowtd:hover .rowBlock { - background-color: rgba(76, 34, 27, .5); + background-color: rgba(102, 170, 204, 0.5); } /** 右键菜单栏 */ @@ -95,8 +95,8 @@ table.row td, div.row .rowtd .rowtext { /** 右键菜单栏的当前选中项 */ #midMenu .menuitem:hover{ - background-color: #d6e9f8; - border-color: #d6e9f8; + background-color: #cef; + border-color: #bde; } /** 禁用的输入方框（如ID）的背景色 */ @@ -106,12 +106,12 @@ textarea[disabled] { /** 搜索事件块的输入框 */ #searchBlock { - background-color: #E9EBF2; + background-color: #eeeef4; } /** 打开浮层（变量搜索等）时页面背景 */ #uieventDiv { - background: rgba(127,127,127,0.6); + background: rgba(128,128,128,0.6); } /** 浮层的对话框 */ @@ -156,15 +156,15 @@ textarea[disabled] { /** 数据区每行效果；2n代表偶数行，以此类推 */ .etable table tr { background-color: #fff; - border-top: 1px solid #c6cbd1; + border-top: 1px solid #ccccd4; } .etable table tr:nth-child(2n) { - background-color: #f6f8fa; + background-color: #fafafa; } /** 数据区表格每列效果 */ .etable table th, .etable table td { - border: 1px solid #dfe2e5; + border: 1px solid #ddd; } /** 鼠标悬停在数据区表格上的边框效果 */ @@ -209,6 +209,31 @@ blockly图块的的黑暗程度，用opacity表示，0到1之间； #blocklyDarkScale { opacity: 0; } +/*魔改*/ + +.blocklyTreeLabel { + color: #0f0f0f !important; +} + +.blocklyTreeLabel:hover { + /*background-color: #888 !important;*/ + color: #0f0f0f !important; +} + +.blocklyTreeSelected { + background-color: #5bf !important; + color: #fff !important; +} + +.blocklyTreeRow { + color: #0f0f0f !important; +} + +.blocklyTreeRow:hover { + background-color: #eee !important; + color: #0f0f0f !important; +} +/*魔改*/ /** 如果需要blockly深色模式，请有选择性视情况取消注释下面几条；具体功能自行研究 */ /* @@ -248,21 +273,22 @@ input.blocklyHtmlInput { background: white; } .awesomplete > ul > li:hover { - background: hsl(200, 40%, 80%); + background: #cef/*hsl(200, 40%, 80%)*/; color: black; } .awesomplete > ul > li[aria-selected="true"] { - background: hsl(205, 40%, 40%); + background: #39f/*hsl(205, 40%, 40%)*/; color: white; } .awesomplete mark { - background: hsl(65, 100%, 50%); + background: #cef; } .awesomplete li:hover mark { - background: hsl(68, 100%, 41%); + background: #39f; + color: white; } .awesomplete li[aria-selected="true"] mark { - background: hsl(86, 100%, 21%); + background: #06c; color: inherit; } @@ -322,13 +348,13 @@ input.blocklyHtmlInput { color: #292; } .cm-s-default .cm-keyword { - color: #708; + color: #819; } .cm-s-default .cm-atom { color: #219; } .cm-s-default .cm-number { - color: #164; + color: #275; } .cm-s-default .cm-def { color: #00f; @@ -340,7 +366,7 @@ input.blocklyHtmlInput { color: #085; } .cm-s-default .cm-comment { - color: #a50; + color: #960; } .cm-s-default .cm-string { color: #a11; diff --git a/_server/css/editor_color_dark.css b/_server/css/editor_color_dark.css new file mode 100644 index 00000000..73601e6c --- /dev/null +++ b/_server/css/editor_color_dark.css @@ -0,0 +1,688 @@ +/** 配色文件：此文件包含了整个编辑器的全部配色 **/ + +/** ======== 编辑器主界面相关 ======== **/ + +/** 全局属性 **/ +body { + background-color: #242424; + color: #bbb; +} + +input { + background-color: #404048; + color: #c0c0c0; +} + +button { + background-color: #404048; + border-color: #aaa; + color: #c0c0c0; +} + +/** 可自行仿照添加更多的全局属性...... */ + +/** 颜色选择器 */ +#colorPanel { + background-color: #333; +} + +/** 所有的阴影效果（颜色选择器、数据区、地图区、素材区等） */ +#colorPanel, #left, #mid, #mid2, #right, .leftTab { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); +} + +/** 地图编辑的输入框 */ +#pout { + border: 1px solid #ddd; +} + +/** 中间的消息提示框 */ +#tip { + border: 1px solid #ccc; +} + +/** 选中素材区时的方框 */ +#dataSelection, .appendSelection, #selectPointBox { + background-color: rgba(255, 255, 255, 0.0); + border: 1px solid #aaa; + box-shadow: 0 0 0 2px #ddd, 0 0 0 3px #aaa; +} + +/** 错误消息（如保存失败） */ +.warnText { + color: #e44; +} + +/** 提示消息（如告知当前图块信息） */ +.infoText { + color: #7bd; +} + +/** 成功消息（如保存成功） */ +.successText { + color: #8ca; +} + +/** 数据库的表格相关 */ +table, td { + border: 1px solid #777; + color: #777; +} + +.coltd, .rowtd { + border: 0.230vw solid #777; + color: #777; +} + +/** 横向标尺背景色 */ +table.col td, div.col .coltd { + background-color: #287; + border-color: #ccc; + color: #ccc; +} + +/** 横向标尺选中时的背景色 */ +#mapColMark td:hover .colBlock, #mapColMark .coltd:hover .colBlock { + background-color: rgba(68, 187, 170, 0.33); +} + +/** 纵向标尺背景色 */ +table.row td, div.row .rowtd .rowtext { + background-color: #268; + border-color: #ccc; + color: #ccc; +} + +/** 纵向标尺选中时的背景色 */ +#mapRowMark td:hover .rowBlock, #mapRowMark .rowtd:hover .rowBlock { + background-color: rgba(85, 153, 187, 0.33); +} + +/** 右键菜单栏 */ +#midMenu{ + color: #bbb;/*文字颜色*/ + background-color: #33333c; + border-color: #888 #666 #666 #888; +} + +#mid .tools { + border-top: 1px solid #555; +} + +/** 右键菜单栏的当前选中项 */ +#midMenu .menuitem:hover{ + background-color: #247; + border-color: #469; + color: #fff; +} + +/*===============================自己加的东西======================================*/ +select { + background-color: #33333c; +} + +option { + background-color: #33333c; +} + +a { + color: #7bd; +} + +textarea { + color: #bbb; +} + +::-webkit-scrollbar-track +{ + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + border-radius: 8px; + background-color: #242424; +} + +::-webkit-scrollbar +{ + width: 8px; + background-color: #242424; +} + +::-webkit-scrollbar-thumb +{ + border-radius: 8px; + -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3); + box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + background-color: #bbb; +} + + +/** 禁用的输入方框（如ID）的背景色 */ +textarea[disabled] { + color: #888; +} + +select { + color: #ccc; + background-color: #33333c; +} + +.gameCanvas, img { + filter: brightness(0.75); +} + +/** 搜索事件块的输入框 */ +#searchBlock { + background-color: #bbb; + color: #444; +} + +/** 打开浮层（变量搜索等）时页面背景 */ +#uieventDiv { + background: rgba(85,85,85,0.67); +} + +/** 浮层的对话框 */ +#uieventDialog { + background: #101010; + color: #ccc; +} + +/** 追加素材时的编号标记 */ +#appendPicSelection span { + -webkit-text-stroke: 1px gold; + text-shadow: black 1px 0, black 0 1px, black -1px 0, black 0 -1px; +} + +.leftTab { + background-color: #242424; +} + +/** 整个事件编辑器 */ +#left6 { + background-color: rgb(36, 36, 36); +} + +/** 事件编辑器右边的文本框 */ +#left6 .CodeMirror { + /*border: 1px solid #eee;*/ + border: 1px solid #666; + background-color: #242424; + /*color: #ccc;*/ +} + +/** 脚本编辑器 */ +#left7 { + background-color: rgb(36, 36, 36); +} + +#left7 .CodeMirror { + border: 1px solid #666; + +} + +/** 数据区的表格 */ +.etable table, .etable table td { + color: #bbb; +} + +/** 数据区每行效果；2n代表偶数行，以此类推 */ +.etable table tr { + background-color: #3c3c3c; + border-top: 1px solid #ccccd4; +} +.etable table tr:nth-child(2n) { + background-color: #343434; +} + +/** 数据区表格每列效果 */ +.etable table th, .etable table td { + border: 1px solid #777; +} + +/** 鼠标悬停在数据区表格上的边框效果 */ +.etable tr:not(:first-child) > :nth-child(3):hover { + border: 1px solid #468; + box-shadow: 0px 0px 3px #468; +} +.etable tr:not(:first-child) > :nth-child(2):hover, +.etable tr:not(:first-child) > :nth-child(1):hover { + border: 1px solid #375; + box-shadow: 0px 0px 3px #375; +} + +/** 表格编辑的按钮颜色 */ +.editorTableEditBtn { + background-color: #389; + border-color: #bde;/*8cf和fd8*/ + color: #cef; +} +.editorTableFoldBtn { + background-color: #a83; + border-color: #edb; + color: #fec; + } + +/** 保存地图的按钮颜色 */ +#saveFloor { + background-color: #234;/*33333c*/ + border-color: #abc; + color: #cdf; +} +#saveFloor.highlight { + background-color: #871; + border-color: #eda; + color: #fff4d0; +} + +/** 解析按钮颜色 */ +#blocklyParse { + background-color: #404048; + /*background-color: #234; + border-color: #abc;*/ + color: #c0c0c0; +} +#blocklyParse.highlight { + background-color: #871; + border-color: #eda; + color: #fff4d0; +} + +.popCheckboxItem { + color: #bbbbbb; +} + +/** ======== blockly 相关 ======== */ + +/** +blockly图块的的黑暗程度，用opacity表示，0到1之间； +0表示表示纯亮色，1表示纯黑色 +*/ + + +#blocklyDarkScale { + opacity: 0.3; +} + +/** 如果需要blockly深色模式，请有选择性视情况取消注释下面几条；具体功能自行研究 */ + +/*somethingSOMETHING*/ +/*.blocklyTreeLabel { + color: #ccc; +}*/ + +.blocklyTreeLabel:hover { + /*background-color: #888 !important;*/ + color: #fff !important; +} + +.blocklyTreeSelected { + background-color: #358 !important; + color: #fff !important; +} + +/*.blocklyTreeSelected .blocklyTreeLabel { + background-color: #358 !important; + background: #358 !important; + color: #fff !important; + }*/ + + .blocklyTreeRow { + /*background-color: #888 !important;*/ + color: #ccc !important; +} + +.blocklyTreeRow:hover { + background-color: #888 !important; + color: #fff !important; +} + +/* +.blocklyFlyout { + background-color: rgba(0,0,0,1); +} +*/ +.blocklyFlyoutBackground { + fill: #666; + fill-opacity: 0.67; +} +/*somethingSOMETHING*/ + + +.blocklyToolboxDiv { + background-color: #2a2a2a !important; + border: 1px solid #666; + color: black; +} + +.blocklySvg { + background-color: #242424; +} + +.blocklyNonEditableText>rect, .blocklyEditableText>rect { + fill: #000; + fill-opacity: .3; +} + +.blocklyNonEditableText>text, .blocklyEditableText>text { + fill: #fff; +} + +input.blocklyHtmlInput { + color: white; + background-color: black; +} + + +/** ======== Blockly中自动补全相关 ======== */ +.awesomplete > ul { + background: #33333c; + /*background: hsla(0,0%,100%,.9); + background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));*/ + border: 1px solid rgba(0,0,0,.3); + border-color: #666; + box-shadow: .05em .2em .6em rgba(0,0,0,.2); +} +.awesomplete > ul:before { + background: white; +} +.awesomplete > ul > li:hover { + background: #247/*hsl(200, 40%, 80%)*/; + color: #fff; +} +.awesomplete > ul > li[aria-selected="true"] { + background: hsl(205, 40%, 40%); + color: white; +} +.awesomplete mark { + background: /*hsl(65, 100%, 50%);*/#278; + color: #cef; +} +.awesomplete li:hover mark { + background: /*hsl(68, 100%, 41%)*/#1a9; + color: #fff; +} +.awesomplete li[aria-selected="true"] mark { + background: /*hsl(86, 100%, 21%)*/#468; + color: inherit; +} + +/** ======== 脚本编辑相关 ======== **/ +/* 很多我也不知道是干嘛的，自行根据名字猜每一项作用吧 */ + +.CodeMirror { + color: #ddd;/*杨子默：我也不知道他是干啥用的*/ + background: #242424; +} +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + background-color: #242424; +} +.CodeMirror-gutters { + border-right: 1px solid #666; + background-color: #2a2a2a; +} +.CodeMirror-linenumber { + color: #999; +} +.CodeMirror-guttermarker { + color: black; +} +.CodeMirror-guttermarker-subtle { + color: #999; +} +.CodeMirror-cursor { + border-left: 1px solid black; +} +/* Shown when moving in bi-directional text */ +.CodeMirror div.CodeMirror-secondarycursor { + border-left: 1px solid silver; +} +.cm-fat-cursor .CodeMirror-cursor { + background: #7e7; +} +.cm-fat-cursor-mark { + background-color: rgba(20, 255, 20, 0.5); +} +.cm-animate-fat-cursor { + background-color: #7e7; +} +.CodeMirror-ruler { + border-left: 1px solid #ccc; +} +/* DEFAULT THEME */ +.cm-s-default .cm-header { + color: #a8f; +} +.cm-s-default .cm-quote { + color: #695; +} +.cm-negative { + color: #f55; +} +.cm-positive { + color: #5f5; +} +.cm-s-default .cm-keyword { + color: #d7a; +} +.cm-s-default .cm-atom { + color: #db7; +} +.cm-s-default .cm-number { + color: #9db; +} +.cm-s-default .cm-def { + color: #db7; +} +.cm-s-default .cm-variable-2 { + color: #8cd; +} +.cm-s-default .cm-variable-3, .cm-s-default .cm-type { + color: #8cd; +} +.cm-s-default .cm-comment { + color: #7a6; +} +.cm-s-default .cm-string { + color: #db7; +} +.cm-s-default .cm-string-2 { + color: #db7/*something?*/; +} +.cm-s-default .cm-meta { + color: #33333c; +} +.cm-s-default .cm-qualifier { + color: #33333c; +} +.cm-s-default .cm-builtin { + color: #66d9ef; +} +.cm-s-default .cm-bracket { + color: #f8f8f2; +} +.cm-s-default .cm-tag { + color: #f55; +} +.cm-s-default .cm-attribute { + color: #ab6; +} +.cm-s-default .cm-hr { + color: #999; +} +.cm-s-default .cm-link { + color: #a8f; +} +.cm-s-default .cm-error { + background: #f55; + color: #fff; +} +/*somethingsomething*/ +.cm-s-default .cm-matchhighlight { + background: #57a; + color: #eef8ff; +} +/*somethingsomething*/ +.cm-invalidchar { + color: #f55; +} + +/* Default styles for common addons */ + +div.CodeMirror span.CodeMirror-matchingbracket { + color: #5f5; +} +div.CodeMirror span.CodeMirror-nonmatchingbracket { + color: #f55; +} +.CodeMirror-matchingtag { + background: rgba(255, 150, 0, .3); +} +.CodeMirror-activeline-background { + background: #247; +} + +.CodeMirror-selected { + background: #358; +} +.CodeMirror-focused .CodeMirror-selected { + background: #358; +} +.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { + background: #247; +} +.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { + background: #247; +} +.cm-searching { + background-color: #ffa; + background-color: rgba(255, 255, 0, .4); +} + +/* 代码补全提示相关 */ + +.cm-matchhighlight { + background-color: #247; +} +.CodeMirror-hints { + border: 1px solid #888; + background: #33333c; + -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); + -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); + box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); +} +.CodeMirror-hint { + color: #ccc; +} +li.CodeMirror-hint-active { + background: #247; + color: #fff; +} + +/* 代码语法检查相关相关 */ + +.CodeMirror-lint-tooltip { + background-color: #247; + border: 1px solid #135; + color: #fff; +} + +.CodeMirror-lint-mark-error { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg=="); +} + +.CodeMirror-lint-mark-warning { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII="); +} + +.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII="); +} + +.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII="); +} + +.CodeMirror-lint-marker-multiple { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC"); +} + +/* 代码补全的对话框（提供搜索功能）相关 */ + +.CodeMirror-dialog-top { + border-bottom: 1px solid #eee; +} + +.CodeMirror-dialog-bottom { + border-top: 1px solid #eee; +} + +/* 搜索项的背景色 */ +.CodeMirror-focused .cm-matchhighlight { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); + background-position: bottom; + background-repeat: repeat-x; +} +.cm-matchhighlight {background-color: lightgreen} +.CodeMirror-selection-highlight-scrollbar {background-color: yellowgreen} + +.CodeMirror-search-hint { + color: #888; +} + + +/* 增强的代码补全系统相关 */ + +/* 变量类型 */ +.CodeMirror-Tern-completion:before { + color: white; +} +.CodeMirror-Tern-completion-unknown:before { + content: "?"; + background: #4bb; +} +.CodeMirror-Tern-completion-object:before { + content: "O"; + background: #77c; +} +.CodeMirror-Tern-completion-fn:before { + content: "F"; + background: #7c7; +} +.CodeMirror-Tern-completion-array:before { + content: "A"; + background: #c66; +} +.CodeMirror-Tern-completion-number:before { + content: "1"; + background: #999; +} +.CodeMirror-Tern-completion-string:before { + content: "S"; + background: #999; +} +.CodeMirror-Tern-completion-bool:before { + content: "B"; + background: #999; +} + +.CodeMirror-Tern-completion-guess { + color: #999; +} +/* 额外提示框（如文档） */ +.CodeMirror-Tern-tooltip { + border: 1px solid silver; + color: #33333c; + background-color: white; + -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2); + -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2); + box-shadow: 2px 3px 5px rgba(0,0,0,.2); +} + +.CodeMirror-Tern-fname { color: black; } +.CodeMirror-Tern-farg { color: #70a; } +.CodeMirror-Tern-type { color: #07c; } +.CodeMirror-foldmarker { + color: blue; + text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px; +} + diff --git a/_server/editor.js b/_server/editor.js index 66cf7328..fe0503b0 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -54,6 +54,7 @@ function editor() { lockMode: document.getElementById('lockMode'), gameInject: document.getElementById('gameInject'), undoFloor: document.getElementById('undoFloor'), + editorTheme: document.getElementById('editorTheme'), maps: ['bgmap', 'fgmap', 'map'], canvas: ['bg', 'fg'], }; @@ -185,20 +186,17 @@ editor.prototype.init = function (callback) { main.useCompress = false; main.init('editor', function () { - editor.config = new editor_config(); - editor.config.load(function() { - editor_util_wrapper(editor); - editor_game_wrapper(editor, main, core); - editor_file_wrapper(editor); - editor_table_wrapper(editor); - editor_ui_wrapper(editor); - editor_mappanel_wrapper(editor); - editor_datapanel_wrapper(editor); - editor_materialpanel_wrapper(editor); - editor_listen_wrapper(editor); - editor.printe=printe; - afterMainInit(); - }) + editor_util_wrapper(editor); + editor_game_wrapper(editor, main, core); + editor_file_wrapper(editor); + editor_table_wrapper(editor); + editor_ui_wrapper(editor); + editor_mappanel_wrapper(editor); + editor_datapanel_wrapper(editor); + editor_materialpanel_wrapper(editor); + editor_listen_wrapper(editor); + editor.printe=printe; + afterMainInit(); }); var afterMainInit = function () { @@ -279,7 +277,14 @@ editor.prototype.init = function (callback) { xhr.onabort = xhr.ontimeout = xhr.onerror = function () { alert("无法访问index.html"); } - xhr.send(); + + editor.config = new editor_config(); + editor.config.load(function() { + var theme = editor.config.get('theme', 'editor_color'); + document.getElementById('color_css').href = '_server/css/' + theme + '.css'; + editor.dom.editorTheme.value = theme; + xhr.send(); + }); } editor.prototype.mapInit = function () { diff --git a/_server/editor_blockly.js b/_server/editor_blockly.js index d594834d..d9332e31 100644 --- a/_server/editor_blockly.js +++ b/_server/editor_blockly.js @@ -689,8 +689,14 @@ editor_blockly = function () { editor_blockly.completeItems = []; + Blockly.BlockSvg.prototype.updateColour_origin = Blockly.BlockSvg.prototype.updateColour; + Blockly.BlockSvg.prototype.setShadowColour__origin = Blockly.BlockSvg.prototype.setShadowColour_; + Blockly.BlockSvg.prototype.setBorderColour__origin = Blockly.BlockSvg.prototype.setBorderColour_; + + editor_blockly.setDarkScale=function () { + var computedStyle = window.getComputedStyle(document.getElementById('blocklyDarkScale')) || {}; + var globalScale = parseFloat(computedStyle.opacity) || 0; - editor_blockly.setDarkScale=function (globalScale) { if (globalScale > 0) { Blockly.BlockSvg.prototype.updateColour = function() { if (this.disabled) { @@ -753,11 +759,14 @@ editor_blockly = function () { } } + } else { + Blockly.BlockSvg.prototype.updateColour = Blockly.BlockSvg.prototype.updateColour_origin; + Blockly.BlockSvg.prototype.setShadowColour_ = Blockly.BlockSvg.prototype.setShadowColour__origin; + Blockly.BlockSvg.prototype.setBorderColour_ = Blockly.BlockSvg.prototype.setBorderColour__origin; } } - var computedStyle = window.getComputedStyle(document.getElementById('blocklyDarkScale')) || {}; - editor_blockly.setDarkScale(parseFloat(computedStyle.opacity) || 0); + editor_blockly.setDarkScale(); return editor_blockly; } diff --git a/_server/editor_listen.js b/_server/editor_listen.js index bfdaa38f..5647f5b1 100644 --- a/_server/editor_listen.js +++ b/_server/editor_listen.js @@ -36,6 +36,7 @@ editor_listen_wrapper = function (editor) { editor.dom.clearEvent.onmouseup = editor.uifunctions.clearEvent_click editor.dom.clearLoc.onmouseup = editor.uifunctions.clearLoc_click editor.dom.undoFloor.onclick = editor.uifunctions.undoFloor_click + editor.dom.editorTheme.onchange = editor.uifunctions.editorTheme_onchange editor.dom.lastUsed.onmouseup = editor.uifunctions.lastUsed_click; editor.dom.lastUsed.oncontextmenu = function (e) { e.preventDefault(); } diff --git a/_server/editor_mappanel.js b/_server/editor_mappanel.js index 9fdf7461..e1fec3a9 100644 --- a/_server/editor_mappanel.js +++ b/_server/editor_mappanel.js @@ -392,6 +392,16 @@ editor_mappanel_wrapper = function (editor) { editor.changeFloor(toId); } + editor.uifunctions.editorTheme_onchange = function () { + var theme = editor.dom.editorTheme.value; + editor.config.set('theme', theme); + document.getElementById('color_css').href = '_server/css/' + theme + '.css'; + // 等新的css加载完毕再设置blockly亮度 + setTimeout(function () { + editor_blockly.setDarkScale(); + }, 1500); + } + /** * 显示右键菜单 */ diff --git a/editor-mobile.html b/editor-mobile.html index 2e97f65f..5da9b982 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -6,7 +6,7 @@ - + @@ -355,7 +355,11 @@ - 锁定模式 + 锁定 + - 锁定模式 + 锁定 +
线