From 258cfff654f8c1b68a18db29dac00c43ae072c3b Mon Sep 17 00:00:00 2001 From: harveyshao Date: Mon, 21 Mar 2022 01:55:27 +0800 Subject: [PATCH] opt css --- frame.js | 2 +- page/index.css | 12 +- plugin/local/chat/div.css | 36 ++---- plugin/local/code/inner.css | 236 +++++++----------------------------- plugin/local/code/inner.js | 5 +- plugin/local/wiki/draw.css | 17 +-- plugin/local/wiki/feel.css | 19 +-- plugin/local/wiki/feel.js | 4 +- plugin/local/wiki/word.css | 1 + 9 files changed, 72 insertions(+), 260 deletions(-) diff --git a/frame.js b/frame.js index 2038b19d..6dfb97d6 100644 --- a/frame.js +++ b/frame.js @@ -235,7 +235,7 @@ Volcanos("onappend", {help: "渲染引擎", list: [], _init: function(can, meta, can.base.isUndefined(can._daemon) && can.ondaemon._list[0] && (can._daemon = can.ondaemon._list.push(can)-1) if (can._daemon) { msg._daemon = can._daemon } } - if (meta.index.indexOf("can.") == 0) { + if (meta && meta.index && meta.index.indexOf("can.") == 0) { can.onengine._plugin(event, can, msg, can, can.misc.concat(can, [meta.index], cmds), function(msg) { if (can.base.isFunc(cb)) { can.core.CallFunc(cb, {can: can, msg: msg}); return } !silent && can.onappend._output(can, msg, msg.Option(ice.MSG_DISPLAY)||meta.display||meta.feature.display) diff --git a/page/index.css b/page/index.css index cad24f86..dd2010a1 100644 --- a/page/index.css +++ b/page/index.css @@ -33,7 +33,7 @@ td>input[type=button][name=remove] { background-color:red; } td>input[type=button][name=start] { background-color:blue; } td>input[type=button][name=stop] { background-color:red; } -div.tabs { background-color:#00000038; color:white; padding:4px; margin:0 1px; } +div.tabs { background-color:#00000038; color:white; padding:5px; margin:0 1px; } div.code { background-color:#343a3445; color:white; padding:10px; border:solid 3px green; } div.story[data-type=spark] { background-color:#2169a9a6; color:white; padding:4px 10px; border-left:solid 4px blue; margin:10px 0px; } @@ -61,11 +61,11 @@ div.output td.project div.project div.list { margin-left:10px; } div.output td.profile { background-color:#71909c91; } div.status>div.item { padding:4px; height:18px; } -fieldset.plugin { background-color:#061c3c9e; padding:10px; margin:10px; } +fieldset.Action>div.output>fieldset.plugin { background-color:#061c3c9e; padding:10px; margin:10px; } fieldset.plugin div.status { border-top:1px solid darkcyan; } fieldset.story div.status { border-top:1px solid darkcyan; } -fieldset.float { background-color:#023531cf; padding:0px; margin:0px; } -fieldset.float>div.action { display:block; height:2.3rem; } +fieldset.float { background-color:#023531cf; } +/* fieldset.float>div.action { display:block; height:2.3rem; } */ fieldset.float table { color:white; } fieldset.output>form.option { display:none; } @@ -172,7 +172,7 @@ form.option, div.action { display:contents; } .hide, .hidden, form.option>div.item>label, div.action>div.item>label, fieldset.panel>legend, fieldset.output>legend, fieldset.input>legend { display:none; } div.output, div.status, div.content, div.project div.item, div.item.textarea, div.code, div.story[data-type=spark], p.story, h1, h2, h3 { clear:both; } form.option, form.option>div.item, div.action, div.action>div.item, div.action>div.tabs, div.project, div.status>div.item, fieldset.float>legend { float:left; } -div.code, div.story, div.action, div.output, div.project, div.content, div.profile, div.display, table.content, table.content td, body>div.toast { overflow:auto; } +div.code, div.story, div.action, div.output, div.status, div.project, div.content, div.profile, div.display, table.content, table.content td, body>div.toast { overflow:auto; } div.code, div.story, div.item, div.content, table.content, textarea { white-space:pre; } div.code, div.story, div.item { text-align:left; } @@ -184,7 +184,7 @@ div.title, div.story[data-type=spark] { cursor:copy; } /* box-shadow */ fieldset.plugin { box-shadow:2px 2px 10px 4px #626bd0; } fieldset.plugin:hover { box-shadow:4px 4px 12px 6px #626bd0; } -fieldset.story { border:0; margin:10px; clear:both; float:left; box-shadow:4px 4px 10px 1px #626bd0; } +fieldset.story { clear:both; float:left; box-shadow:4px 4px 10px 1px #626bd0; } fieldset.story:hover { box-shadow:12px 12px 12px 6px #5764efd1; } div.story[data-type=spark] { box-shadow:4px 4px 10px 1px #626bd0; } div.story[data-type=spark] span:hover { background-color:deepskyblue; box-shadow:4px 4px 20px 4px #29318e; } diff --git a/plugin/local/chat/div.css b/plugin/local/chat/div.css index 28ea3a3a..ead2dcff 100644 --- a/plugin/local/chat/div.css +++ b/plugin/local/chat/div.css @@ -1,28 +1,8 @@ -fieldset.div div.output td { - vertical-align:top; -} -fieldset.div div.output fieldset.span>fieldset { - float:left; overflow:auto; -} -fieldset.panel.cmd.main fieldset.div { - padding:0; - margin:0; -} -fieldset.panel.cmd.main fieldset.div>legend { - display:none; -} -fieldset.panel.cmd.main fieldset.div>form.option { - display:none; -} -fieldset.panel.cmd.main fieldset.div>div.action { - display:none; -} -fieldset.panel.cmd.main fieldset.div div.project { - display:none; -} -fieldset.panel.cmd.main fieldset.div div.profile { - display:none; -} -fieldset.word>div.output fieldset.span>fieldset { - float:left; overflow:auto; -} +fieldset.div div.output td { vertical-align:top; } +fieldset.div div.output fieldset.span>fieldset { overflow:auto; float:left; } +fieldset.panel.cmd.main fieldset.div>legend { display:none; } +fieldset.panel.cmd.main fieldset.div>form.option { display:none; } +fieldset.panel.cmd.main fieldset.div>div.action { display:none; } +fieldset.panel.cmd.main fieldset.div div.project { display:none; } +fieldset.panel.cmd.main fieldset.div div.profile { display:none; } +fieldset.word>div.output fieldset.span>fieldset { overflow:auto; float:left; } diff --git a/plugin/local/code/inner.css b/plugin/local/code/inner.css index c936ef0c..0b207eb3 100644 --- a/plugin/local/code/inner.css +++ b/plugin/local/code/inner.css @@ -1,195 +1,52 @@ -fieldset.inner.output.simple>legend { - display:block; -} -fieldset.inner>form.option input[name=path] { - width:80px; -} -fieldset.inner>form.option input[name=file] { - width:160px; -} -fieldset.inner>div.action { - height:2rem; - overflow:hidden; - display:block; -} +fieldset.inner>form.option input[name=path] { width:80px; } +fieldset.inner>form.option input[name=file] { width:160px; } +fieldset.inner>div.output { color:white; } +fieldset.inner>div.output>table.layout div.toggle.project { font-size:24px; min-width:15px; } +fieldset.inner>div.output>table.layout div.toggle.profile { font-size:24px; min-width:15px; } +fieldset.inner>div.output>table.layout div.toggle.display { font-size:24px; height:15px; margin-top:-17px; } -fieldset.inner>div.output { - color:white; -} -fieldset.inner>div.output div.code { - height:-webkit-fill-available; -} -fieldset.inner>div.output>table.layout div.toggle.project { - min-width:15px; font-size:24px; -} -fieldset.inner>div.output>table.layout div.toggle.profile { - min-width:15px; font-size:24px; -} -fieldset.inner>div.output>table.layout div.toggle.display { - height:15px; font-size:24px; - margin-top:-17px; -} -fieldset.inner>div.output div.project { - max-width:180px; overflow:auto; -} -fieldset.inner>div.output div.content { - position:relative; - padding-right:25px; - font-size:1.2rem; font-family:monospace; - overflow:auto; - color:white; -} -fieldset.inner>div.output div.content table.layout { - width:-webkit-fill-available; -} -fieldset.inner>div.output div.content tr.select { - background-color:#0000ff6b; -} -fieldset.inner>div.output div.content tr.select td.line { - background-color:blue; - border:solid 1px red; - border-right:solid 2px red; -} -fieldset.inner>div.output div.content td.line:hover { - background-color:green; -} -fieldset.inner>div.output div.content td.line { - text-align:right; padding:0 6px; - border-right:solid 2px red; -} -fieldset.inner>div.output div.content td.text { - text-align:left; height:20px; - padding-left:10px; - white-space:pre; - tab-size:4; -} -fieldset.inner>div.output div.content td.text span.comment { - color:cyan; background-color:blue; -} -fieldset.inner>div.output div.content td.text span.keyword { - color:yellow; font-weight:bold; -} -fieldset.inner>div.output div.content td.text span.function { - color:cyan; font-weight:bold; -} -fieldset.inner>div.output div.content td.text span.datatype { - color:lightgreen; font-weight:bold; -} -fieldset.inner>div.output div.content td.text span.constant { - color:magenta; -} -fieldset.inner>div.output div.content td.text span.string { - color:magenta; -} -fieldset.inner>div.output div.display>div.action>div.item { - float:left; -} -fieldset.inner>div.output div.profile>div.action>div.item { - float:left; -} -fieldset.inner>div.output div.profile>div.output { - clear:both; overflow:auto; -} -fieldset.inner>div.output div.profile>div.output>fieldset { - margin:0; padding:0; -} -fieldset.inner>div.output div.profile>div.output>fieldset>legend { - float:left; padding:0.3rem; -} -fieldset.inner>div.output div.display>div.output { - clear:both; overflow:auto; -} -fieldset.inner>div.output div.display { - border:solid 1px greenyellow; -} +fieldset.inner>div.output div.content { color:white; font-size:1.2rem; font-family:monospace; position:relative; } +fieldset.inner>div.output div.content tr.select { background-color:#0000ff6b; } +fieldset.inner>div.output div.content tr.select td.line { background-color:blue; border:solid 1px red; border-right:solid 2px red; } +fieldset.inner>div.output div.content td.line:hover { background-color:green; } +fieldset.inner>div.output div.content td.line { text-align:right; padding:0 6px; border-right:solid 2px red; } +fieldset.inner>div.output div.content td.text { text-align:left; white-space:pre; padding-left:10px; height:20px; } +fieldset.inner>div.output div.content td.text span.comment { background-color:blue; color:cyan; } +fieldset.inner>div.output div.content td.text span.keyword { color:yellow; font-weight:bold; } +fieldset.inner>div.output div.content td.text span.datatype { color:lightgreen; font-weight:bold; } +fieldset.inner>div.output div.content td.text span.function { color:cyan; font-weight:bold; } +fieldset.inner>div.output div.content td.text span.constant { color:magenta; } +fieldset.inner>div.output div.content td.text span.string { color:magenta; } +fieldset.inner>div.output div.profile>div.output>fieldset>legend { padding:0.1rem; float:left; } +fieldset.inner>div.output div.display { border:solid 1px greenyellow; } -fieldset.inner div.output fieldset.toolkit { - position:absolute; - bottom:0px; right:0px; -} -fieldset.inner>div.output fieldset.toolkit>div.output>fieldset { - display:none; margin:0;padding:0; -} -fieldset.inner>div.output fieldset.toolkit>div.output>fieldset.select { - display:block; -} -fieldset.inner>div.output fieldset.toolkit>div.output>fieldset>legend { - float:left; -} -fieldset.inner>div.output fieldset.toolkit>div.status { - /* height:32px; overflow:auto; */ -} -fieldset.inner>div.output fieldset.toolkit>div.status>legend { - float:right; padding:4px; cursor:pointer; - padding:4px 4px; border-left:solid 2px red; - background:#0d969f8a; -} -fieldset.inner>div.output fieldset.toolkit>div.status>legend.select { - background:green; -} -fieldset.inner>div.output fieldset.toolkit>div.status>legend:hover { - background:green; -} -fieldset.inner>div.status { - height:26px; overflow:auto; -} -fieldset.Action fieldset.inner>div.status legend { - float:right; - font-size:1.1rem; - /* padding:4px; */ - cursor:pointer; - /* padding:4px 4px; */ - border-left:solid 2px red; - background:#0d969f8a; - padding:0px 10px; -} -fieldset.Action fieldset.inner>div.status legend.select { - background-color:red; -} -fieldset.inner>div.status legend.select { - background:green; -} -fieldset.inner>div.status legend:hover { - background:green; -} +fieldset.inner div.output fieldset.toolkit { position:absolute; bottom:0px; right:0px; } +fieldset.inner>div.output fieldset.toolkit>div.output>fieldset { display:none; } +fieldset.inner>div.output fieldset.toolkit>div.output>fieldset.select { display:block; } +fieldset.inner>div.output fieldset.toolkit>div.output>fieldset>legend { float:left; } +fieldset.inner>div.output fieldset.toolkit>div.status>legend { background:#0d969f8a; padding:4px 4px; border-left:solid 2px red; float:right; } +fieldset.inner>div.output fieldset.toolkit>div.status>legend.select { background:green; } +fieldset.inner>div.output fieldset.toolkit>div.status>legend:hover { background:green; } +fieldset.inner>div.status { height:26px; } +fieldset.inner>div.status legend { background:#0d969f8a; font-size:1.1rem; padding:0px 10px; border-left:solid 2px red; cursor:pointer; float:right; } +fieldset.inner>div.status legend.select { background:green; } +fieldset.inner>div.status legend:hover { background:green; } -fieldset.inner.full>legend { - display:none; -} -fieldset.inner.full>div.action { - display:none; -} -fieldset.inner.full>form.option { - display:none; -} -fieldset.inner.full>div.status { - display:none; -} -fieldset.inner.full>div.status { - display:none; -} -fieldset.inner.full>div.output div.profile>div.action { - display:none; -} -fieldset.inner.full>div.output div.display>div.action { - display:none; -} +fieldset.inner.output.simple>legend { display:block; } +fieldset.inner.float div.output { background-color:#332f1ecf; } +fieldset.inner.float div.status { color:white; } -body.white fieldset.inner>div.output div.project { - color:#a2dad2; -} -body.white fieldset.inner>div.output div.content { - background-color:#013b675c; -} -body.white fieldset.inner>div.output div.content tr { - background-color:#e1f1ff00; -} -body.white fieldset.inner>div.output div.content tr.select { - background-color:#0000ff6b; -} -body.white fieldset.inner>div.output div.content td.text span.string { - color:#a703a7; -} +fieldset.inner.full>legend { display:none; } +fieldset.inner.full>form.option { display:none; } +fieldset.inner.full>div.action { display:none; } +fieldset.inner.full>div.status { display:none; } +fieldset.inner.full>div.output div.profile>div.action { display:none; } +fieldset.inner.full>div.output div.display>div.action { display:none; } +fieldset.inner.full>div.output div.display>div.status { display:none; } + +body.white fieldset.inner>div.output div.project { color:#a2dad2; } +body.white fieldset.inner>div.output div.content { background-color:#013b675c; } +body.white fieldset.inner>div.output div.content td.text span.string { color:#a703a7; } .unselectable { -webkit-touch-callout:none; @@ -201,6 +58,3 @@ body.white fieldset.inner>div.output div.content td.text span.string { user-select:none; } -fieldset.inner.float div.output { background-color:#332f1ecf; } -fieldset.inner.float div.status { color:white; } - diff --git a/plugin/local/code/inner.js b/plugin/local/code/inner.js index b4b57d81..5b010849 100644 --- a/plugin/local/code/inner.js +++ b/plugin/local/code/inner.js @@ -184,7 +184,7 @@ Volcanos("onimport", {help: "导入数据", _init: function(can, msg, cb, target }, layout: function(can) { var height = can.ConfHeight()-(can.user.mod.isCmd && can.user.isWindows? 20: 0), width = can.ConfWidth() can.page.styleWidth(can, can.ui.profile_output, can.profile_size[can.onexport.keys(can)]||(width-can.ui.project.offsetWidth)/2) - can.page.styleWidth(can, can.ui.content, width-can.ui.project.offsetWidth-can.ui.profile.offsetWidth-26) + can.page.styleWidth(can, can.ui.content, width-can.ui.project.offsetWidth-can.ui.profile.offsetWidth) if (!height) { return } can.page.style(can, can.ui.content, can.user.mod.isCmd? html.HEIGHT: html.MAX_HEIGHT, height) @@ -196,8 +196,7 @@ Volcanos("onimport", {help: "导入数据", _init: function(can, msg, cb, target } } if (can.user.mod.isCmd) { - can.page.styleHeight(can, can.ui.content, (can.ui.project.offsetHeight||height) - -can.ui.display.offsetHeight-(can.ui.display.style.display != html.NONE && can.ui.display_status.innerText? html.ACTION_HEIGHT: 0)) + can.page.styleHeight(can, can.ui.content, (can.ui.project.offsetHeight||height)-can.ui.display.offsetHeight) } if (can.page.ClassList.has(can, can._fields, "full")) { diff --git a/plugin/local/wiki/draw.css b/plugin/local/wiki/draw.css index 32c94f6d..00d951d3 100644 --- a/plugin/local/wiki/draw.css +++ b/plugin/local/wiki/draw.css @@ -1,14 +1,3 @@ -fieldset.draw div.output { - background-color:#1b5b738c; - font-size:20px; -} -fieldset.draw div.output div.content svg { - background-color:#1b5b738c; -} -fieldset.draw div.output div.profile div.action div.item { - float:left; -} -fieldset.draw div.output div.display { - max-height:400px; - overflow:auto; -} +fieldset.draw div.output { background-color:#1b5b738c; font-size:20px; } +fieldset.draw div.output div.content svg { background-color:#1b5b738c; } +fieldset.draw div.output div.display { max-height:400px; } diff --git a/plugin/local/wiki/feel.css b/plugin/local/wiki/feel.css index a0e0f3e3..b7f837d6 100644 --- a/plugin/local/wiki/feel.css +++ b/plugin/local/wiki/feel.css @@ -1,15 +1,4 @@ -fieldset.feel div.output img { - display:block; float:left; -} -fieldset.feel div.output video { - display:block; float:left; -} -fieldset.feel.float>legend { - display:none; -} -fieldset.feel.float { - margin:0 10px; padding:0 10px; - background-color:#4eaad0c2; - position:absolute; - top:26px; -} +fieldset.feel div.output img { display:block; float:left; } +fieldset.feel div.output video { display:block; float:left; } +fieldset.feel.float { background-color:#4eaad0c2; position:absolute; } +fieldset.feel.float>legend { display:none; } diff --git a/plugin/local/wiki/feel.js b/plugin/local/wiki/feel.js index 5ea98426..02148ff7 100644 --- a/plugin/local/wiki/feel.js +++ b/plugin/local/wiki/feel.js @@ -87,14 +87,14 @@ Volcanos("ondetail", {help: "组件菜单", list: ["关闭", "下载", "删除", can.onappend._init(can, {type: "story feel float"}, [], function(sub) { can.sub = sub sub.run = function(event, cmds, cb) { return can.run(event, cmds, cb, true) } - sub.search({}, ["Action.onexport.size"], function(msg, left, top, width, height) { + sub.getActionSize(function(msg, left, top, width, height) { sub.page.Modify(sub, sub._target, {style: {left: left, top: top}}) sub.page.Modify(sub, sub._output, {style: {"max-width": width, "max-height": height}}) sub.onappend._action(can, can.ondetail.list, sub._action, can.ondetail) can.order = index, can.show = function(order) { path = can.onimport._file(can, can.list[order].path) - sub.page.Appends(sub, sub._output, [{img: path, style: {"max-width": width-40, "max-height": height-55}}]) + sub.page.Appends(sub, sub._output, [{img: path, style: {"max-width": width, "max-height": height-2*html.ACTION_HEIGHT}}]) sub.Status("begin", order+1+ice.PS+can.list.length), sub.Status("file", path) }, can.show(can.order) }) diff --git a/plugin/local/wiki/word.css b/plugin/local/wiki/word.css index 76870d76..d177880d 100644 --- a/plugin/local/wiki/word.css +++ b/plugin/local/wiki/word.css @@ -14,6 +14,7 @@ fieldset.word p.story[data-name=inner] { background-color:#4b6c8a7a; padding:4px fieldset.word p.story[data-name=inner]:hover { background-color:#c10c8a; cursor:copy; } fieldset.word svg.story { display:block; float:left; } fieldset.word video.story { max-height:320px; } +fieldset.word fieldset.story { margin:10px; } fieldset.word.float { padding:0; margin:0; width:-webkit-fill-available; position:fixed; left:0; top:0; z-index:10; } fieldset.word.float>div.action { display:contents; }