From a5db16e1d772e0897379a7c6e17359c0c4c3f540 Mon Sep 17 00:00:00 2001 From: shy Date: Mon, 28 Aug 2023 19:42:21 +0800 Subject: [PATCH] opt index.css --- const.js | 17 +- frame.js | 2 +- index.css | 857 ++++++++++++++++++------------------ panel/action.css | 2 +- panel/footer.css | 12 +- panel/footer.js | 2 +- panel/header.css | 6 +- panel/header.js | 2 +- panel/river.js | 2 +- panel/search.css | 1 - plugin/local/code/inner.css | 106 ++--- plugin/local/code/vimer.css | 25 +- plugin/table.js | 4 +- 13 files changed, 515 insertions(+), 523 deletions(-) diff --git a/const.js b/const.js index aa72338f..0ca1e119 100644 --- a/const.js +++ b/const.js @@ -216,8 +216,18 @@ var chat = { "local/wiki/word.js", "local/team/plan.js", "local/mall/goods.js", - ].map(function(p) { return "/volcanos/plugin/"+p }), PLUGIN_INPUT: "/volcanos/plugin/input/", PLUGIN_STORY: "/volcanos/plugin/story/", PLUGIN_LOCAL: "/volcanos/plugin/local/", - PLUGIN_INPUT_JS: "/volcanos/plugin/input.js", PLUGIN_TABLE_JS: "/volcanos/plugin/table.js", PLUGIN_STATE_JS: "/volcanos/plugin/state.js", FRAME_JS: "/volcanos/frame.js", + ].map(function(p) { return "/volcanos/plugin/"+p }).concat([ + // https://icons.getbootstrap.com/ + "/require/modules/bootstrap-icons/font/bootstrap-icons.min.css", + ]), + PLUGIN_LOCAL: "/volcanos/plugin/local/", + PLUGIN_STORY: "/volcanos/plugin/story/", + PLUGIN_INPUT: "/volcanos/plugin/input/", + PLUGIN_INPUT_JS: "/volcanos/plugin/input.js", + PLUGIN_TABLE_JS: "/volcanos/plugin/table.js", + PLUGIN_STATE_JS: "/volcanos/plugin/state.js", + FRAME_JS: "/volcanos/frame.js", + ONENGINE: "onengine", ONDAEMON: "ondaemon", ONAPPEND: "onappend", ONLAYOUT: "onlayout", ONMOTION: "onmotion", ONKEYMAP: "onkeymap", ONIMPORT: "onimport", ONACTION: "onaction", ONDETAIL: "ondetail", ONEXPORT: "onexport", ONSYNTAX: "onsyntax", ONFIGURE: "onfigure", ONPLUGIN: "onplugin", @@ -243,6 +253,9 @@ var mall = { ASSET: "asset", SALARY: "salary", } +var icon = { + SEARCH: "bi bi-search", TERMINAL: "bi bi-terminal", +} var http = { ContentType: "Content-Type", } diff --git a/frame.js b/frame.js index 13beda8d..3b005d98 100644 --- a/frame.js +++ b/frame.js @@ -664,7 +664,7 @@ Volcanos(chat.ONMOTION, {_init: function(can, target) { slideGrow: function(can, target) { var height = target.offsetHeight, begin = 0; if (height < 10) { return } can.page.style(can, target, html.HEIGHT, 0) - can.core.Timer({interval: 1, length: 50}, function(timer, interval, index, list) { + can.core.Timer({interval: 1, length: height/6}, function(timer, interval, index, list) { can.page.style(can, target, html.HEIGHT, begin += height/list.length) }, function() { can.page.style(can, target, html.HEIGHT, height) diff --git a/index.css b/index.css index f3cd8a60..fb3c47e5 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,439 @@ +body { + --danger-bg-color:red; --danger-fg-color:white; + --notice-bg-color:blue; --notice-fg-color:white; + --create-bg-color:blue; --create-fg-color:white; + --progress-bg-color:red; --disable-fg-color:gray; + --hover-bg-color:#5066b945; --hover-fg-color:white; + --body-bg-color:black; --body-fg-color:silver; + --box-border:#404141 solid 1px; + --box-notice:var(--notice-bg-color) solid 1px; + --box-shadow:var(--body-fg-color) 2px 2px 8px; + + --legend-bg-color:var(--body-bg-color); + --input-fg-color: var(--body-fg-color); + --input-border:var(--box-border); --input-radius:5px; + --output-bg-color: var(--input-bg-color); + --status-border:var(--box-border); + --panel-bg-color:var(--panel-output-bg-color); + --panel-fg-color:var(--panel-output-fg-color); + --panel-output-bg-color: var(--body-bg-color); + --panel-output-fg-color: var(--body-fg-color); + --panel-hover-bg-color:var(--hover-bg-color); + --panel-hover-fg-color:var(--hover-fg-color); + --plugin-border-color:var(--box-border); --plugin-radius:10px; + --plugin-bg-color:var(--body-bg-color); + --plugin-fg-color:var(--body-fg-color); + --th-bg-color:var(--plugin-bg-color); + --td-hover-bg-color:var(--hover-bg-color); + --tr-hover-bg-color:var(--hover-bg-color); + --float-bg-color:var(--plugin-bg-color); + --float-fg-color:var(--plugin-fg-color); + --carte-bg-color:var(--plugin-bg-color); + + --desktop-icon-size:80px; + --code-font-size:14px; --code-font-family:monospace; + --code-bg-color:black; --code-fg-color:silver; --code-border-color:var(--notice-bg-color); + --code-comment:green; --code-keyword:royalblue; --code-package:blue; + --code-datatype:lavender; --code-function:lightgreen; + --code-constant:gray; --code-string:orange; --code-object:silver; + --svg-stroke-width:2; +} +/* element */ +* { tab-size:4; box-sizing:border-box; padding:0; border:0; margin:0; } +legend { padding:0 20px; } +select { padding:0 10px; } +input:not([type=file]) { padding:0 10px; } +input:not([type=button]) { border-radius:0; outline:none; width:120px; } +input[name=path] { width:160px; } +input[name=line] { width:60px; } +input[name=limit] { width:60px; } +input[name=offend] { width:80px; } +input[name=id] { width:60px; } +input[name=url] { width:320px; } +input[name=cmd] { background-color:var(--code-bg-color); color:var(--code-fg-color); width:100%; } +table.content.full { width:100%; } +table.content thead { position:sticky; top:2px; } +table.content tr.offline { color:var(--disable-fg-color); } +table.content tr.offline a { color:var(--disable-fg-color); } +table.content th { padding:5px; box-shadow: var(--box-shadow); } +table.content td { padding:5px; } +table.content.action th:last-child { position:sticky; right:2px; box-shadow: var(--box-shadow); } +table.content.action td:last-child { position:sticky; right:2px; box-shadow: var(--box-shadow); } +table.content.action td:last-child input { margin-right:10px; box-shadow:var(--box-shadow); } +table.content col.time { width:180px; } +table.content col.action { width:180px; } +table.content:hover col.option { background-color:var(--hover-bg-color); } +fieldset.panel.Action.tabs table.content { width:100%; } +h1 { text-align:center; margin:20px 0; } h2 { margin:20px 0; } h3 { margin:20px 0; } +hr, td.hr { border-bottom:var(--plugin-border-color) dashed 1px; margin:5px; } +ol, ul { margin-left:40px; } +a { color:var(--body-fg-color); font-style:italic; } +p { margin:20px 0; } +kbd { padding:0 5px; } +img, iframe { margin-bottom:-3px; } +iframe { height:420px; width:100%; } +/* fieldset */ +fieldset>legend { margin-right:10px; box-shadow:var(--box-shadow); } +fieldset>form.option>div.item:not(.icon) { margin-right:10px; box-shadow:var(--box-shadow); } +fieldset>form.option>div.item.text.cmd { color:var(--code-fg-color); width:100%; } +fieldset>form.option>div.item.textarea { width:100%; } +fieldset>form.option>div.item.select { border-radius:5px; } +fieldset>form.option>div.item.select>input { min-width:80px; } +fieldset>form.option>div.item.button { border-radius:5px; } +fieldset>div.action>div.item { margin-right:10px; box-shadow:var(--box-shadow); } +fieldset>div.action>div.item.select { border-radius:5px; } +fieldset>div.action>div.item.button { border-radius:5px; } +fieldset>div.output { width:100%; } +fieldset>div.status { width:100%; } +fieldset.input>legend { display:none; } +fieldset.input.key div.action { display:none; } +fieldset.input.key div.output table.content { width:100%; } +fieldset.input.key div.status:not(.hide) { display:block; position:sticky; bottom:0; } +fieldset.input.key.simple th { display:none; } +fieldset.input.key.simple td { min-width:40px; } +fieldset.input.date>div.action>div.item.next { margin-right:0; } +fieldset.input.date>div.action>div.item.today { margin-right:0; } +fieldset.input.date>div.output table.content { text-align:center; width:100%; min-width:350px; } +fieldset.input.date>div.output td { padding:2px 10px; } +fieldset.input.date>div.output td.prev { color:var(--disable-fg-color); } +fieldset.input.date>div.output td.next { color:var(--disable-fg-color); } +fieldset.input.date>div.output td.select { background-color:var(--hover-bg-color); } +fieldset.input.date>div.output td:hover { background-color:var(--hover-bg-color); } +fieldset.input.date>div.output td span.lunar { font-size:8px; display:block; clear:both; } +fieldset.input.date>div.output td span.lunar.term { color:green; } +fieldset.input.date>div.output td span.lunar.fest { color:red; } +fieldset.input.date>div.status { text-align:center; } +/* float */ +body div.float { padding:5px; box-shadow:var(--box-shadow); } +body>div.toast div.title { color:var(--notice-bg-color); float:left; } +body>div.toast div.duration { color:var(--disable-fg-color); float:right; } +body>div.toast div.content { color:var(--notice-bg-color); text-align:center; } +body>div.toast div.progress { border:var(--box-notice); margin-left:0px; height:20px; clear:both; } +body>div.toast div.progress div.current { background-color:var(--progress-bg-color); height:18px; } +body>div.toast div.action { width:100%; display:block; } +body>div.toast div.action>div.item { float:right; } +body>div.carte { padding:0; } +body>div.carte input[name=filter] { margin:5px; width:calc(100% - 10px); position:sticky; top:5px; } +body>div.carte div.item { white-space:pre; padding:5px 10px; } +body>div.carte div.item span.icon.next { float:right; line-height:22px; height:22px; } +body>div.carte.select.float>div.item { text-align:center; } +body>div.input { padding:20px; } +body>div.input td { padding:10px; } +body>div.input td span.icon { margin-left:-20px; visibility:hidden; } +body>div.input td:hover span.icon { visibility:visible; } +body>div.input select { width:230px; } +body>div.input input { width:240px; } +body>div.input textarea { height:120px; width:240px; } +body>div.input div.action { width:100%; } +body>div.input div.action>div.item { margin:5px; float:right; } +body>div.input div.action>div.item>input[type=button] { width:110px; } +body>div.input.login>div.output { text-align:center; } +body>div.upload div.action input[type=file] { width:320px; } +body>div.upload div.output { border:var(--box-notice); } +body>div.upload div.output div.progress { background-color:var(--progress-bg-color); height:10px; width:0; } +body>div.upload div.status div.cost { float:left; } +body>div.upload div.status div.show { float:right; } +body>div.upload div.status div.size { text-align:center; } +/* font */ +body { font-size:16px; } +legend { font-size:1.2rem; line-height:30px; height:32px; } +select, input { font-size:1rem; height:32px; } input::placeholder, textarea::placeholder { font-style:italic; } +textarea { font-size:1rem; tab-size:2; padding:5px; height:96px; width:100%; resize:vertical; } +table.content, div.code, div.story[data-type=spark] { white-space:pre; margin:0; } +div.story[data-type=spark] { padding:0 5px; border-left:var(--notice-bg-color) solid 5px; } +fieldset>div.action>div.tabs { font-style:italic; padding-left:10px; box-shadow:var(--box-shadow); margin-left:5px; } +fieldset>div.output>div.code { font-size:14px; } +fieldset>div.status { font-style:italic; max-height:32px; } +fieldset>div.status>div.item { padding:5px; height:31px; } +fieldset>div.status>div.item>label { font-size:0.6rem; } +fieldset>div.status>legend { font-style:italic; height:31px; } +legend, select, input[type=button], th, table.content td, h1, h2, h3, div.menu, div.item, div.tabs { cursor:pointer; } +div.story[data-type=spark] { cursor:copy; } +body.en fieldset.input.date>div.action>div.item.select select { width:55px; } +body.en fieldset.input.date>div.action>div.item.select.year select { width:100px; } +body.en fieldset.input.date>div.action>div.item.select.month select { width:100px; } +body.zh fieldset.input.date>div.action>div.item.select select { width:58px; } +body.zh fieldset.input.date>div.action>div.item.select.year select { width:81px; } +body.zh fieldset.input.date>div.action>div.item.select.month select { width:81px; } +body:not(.windows) table.content { font-family:monospace; } +body:not(.windows) div.code { font-family:monospace; } +body:not(.windows) div.tabs { font-family:monospace; } +body:not(.windows) div.path { font-family:monospace; } +body:not(.windows) div.carte { font-family:monospace; } +/* icon */ +/* legend>i:first-child { margin-right:10px; } */ +div.item>i:first-child { margin-right:10px; } +div.project div.item>i:first-child { color:var(--panel-output-fg-color); } +div.project div.item.text:hover>i:first-child { color:var(--plugin-fg-color); } +div.action div.icon, div.action span.icon { font-size:20px; line-height:32px; padding:0 5px; margin:0; height:32px; } +form.option div.icon, form.option span.icon { font-size:20px; line-height:32px; padding:0 5px; margin:0; height:32px; } +form.option div.icon:first-child { margin-left:-5px; } +form.option div.icon.refresh { font-size:28px; line-height:28px; translate:0 -1px; } +form.option div.icon.goback { font-size:28px; line-height:28px; translate:0 -1px; } +form.option div.icon.next { font-size:18px; } +form.option div.icon.prev { font-size:18px; } +div.item.select { position:relative; } +div.item.select>span.icon { position:absolute; right:0; visibility:hidden; } +div.item.select:hover>span.icon { visibility:visible; } +div.item.text { position:relative; } +div.item.text>span.icon { position:absolute; right:0; visibility:hidden; } +div.item.text:hover>span.icon { visibility:visible; } +div.item.button>span.icon.create { font-size:32px; line-height:32px; translate:0px -2px; display:block; } +div.tabs span.icon { padding:0 8px; visibility:hidden; } +div.tabs>div.select span.icon { visibility:visible; } +div.tabs>div:hover span.icon { visibility:visible; } +div.tabs:hover>span.icon { visibility:visible; } +fieldset.plug>form.option>div.icon { margin-left:5px; } +fieldset.panel>div.action>div.button>span.icon { display:none; } +fieldset.plugin:not(.story):not(.float):not(.full):not(.cmd)>form.option>div.icon { display:none; } +fieldset.plugin:not(.story):not(.float):not(.full):not(.cmd)>form.option>div.button>span.icon { display:none; } +fieldset.plugin:not(.story):not(.float):not(.full):not(.cmd)>div.action>div.button>span.icon { display:none; } +fieldset.story>form.option>div.button.icons>input { display:none; } +fieldset.float>form.option>div.button.icons>input { display:none; } +fieldset.full>form.option>div.button.icons>input { display:none; } +fieldset.cmd>form.option>div.button.icons>input { display:none; } +fieldset.story>div.action>div.button.icons>input { display:none; } +fieldset.float>div.action>div.button.icons>input { display:none; } +fieldset.full>div.action>div.button.icons>input { display:none; } +fieldset.cmd>div.action>div.button.icons>input { display:none; } +fieldset:not(.float)>form.option>div.text>span.value { display:none; } +fieldset.float.plug>form.option>div.text>span.value { display:none; } +fieldset.float:not(.plug)>form.option>div.text>input { display:none; } +fieldset.float:not(.plug)>form.option>div.text>span { display:none; } +fieldset.float:not(.plug)>form.option>div.text>span.value { white-space:pre; padding:7px; height:32px; max-width:200px; display:block; overflow:auto; } +fieldset.float div.text:hover>span.icon.delete { visibility:hidden; } +body.mobile:not(.landscape) fieldset.float>form.option>div.text>span.value { display:none; } +body.windows form.option>div.icon { font-size:21px; } +/* svg */ +fieldset.web.wiki.draw div.output svg { min-width:100%; min-height:100%; } +svg text { font-size:24px; font-family:monospace; stroke:var(--body-fg-color); fill:var(--body-fg-color); cursor:pointer; } +svg text:hover { stroke:var(--hover-fg-color); fill:var(--hover-fg-color); cursor:pointer; } +svg rect { stroke-width:var(--svg-stroke-width); stroke:var(--body-fg-color); fill:var(--output-bg-color); } +svg rect:hover { stroke:var(--hover-fg-color); fill:var(--hover-bg-color); } +svg line { stroke-width:var(--svg-stroke-width); stroke:var(--body-fg-color); } +svg line:hover { stroke:var(--hover-fg-color); } +svg path { stroke-width:var(--svg-stroke-width); stroke:var(--body-fg-color); } +svg path:hover { stroke:var(--hover-fg-color); } +svg g[stroke] text { stroke:unset; } +svg g[stroke] rect { stroke:unset; } +svg g[stroke] line { stroke:unset; } +svg g[stroke] path { stroke:unset; } +svg g[fill] text { fill:unset; } +svg g[fill] rect { fill:unset; } +/* output */ +div.project div.list { margin-left:10px; clear:both; } +div.project div.item { white-space:pre; line-height:24px; padding:0 10px; } +div.project div.item.filter { padding:0; } +div.project div.item.filter>i:first-child { position:absolute; padding:5px; } +div.project div.item.filter>input { width:100% !important; padding-left:25px; } +div.project div.item.filter>span { padding:4px; } +div.project div.item>div.name { padding-left:15px; } +div.project div.expand { float:left; transition:all .3s; } +div.project div.expand.open { rotate:90deg; translate:1px 2px; transition:all .3s; } +div.project div.zone>div.item { text-align:center; padding:3px; } +div.project div.zone>div.item>div.icon { margin-left:3px; float:right; } +div.project div.zone>div.list>div.zone>div.item { text-align:left; padding-left:20px; } +div.project div.zone>div.list>div.zone>div.item:hover { margin-left:10px; transition:all 0.3s; } +div.content { position:relative; } +div.content>div.toggle { position:absolute; } +div.content>div.toggle:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); cursor:pointer; } +div.content>div.toggle.project { top:20%; left:0; height:80px; width:unset; padding-top:25px; transform:scale(1, 3); border:none; } +div.content>div.toggle.profile { top:20%; right:0; height:80px; padding-top:25px; transform:scale(1, 3); border:none; } +div.content>div.toggle.display { left:20%; bottom:0; width:80px; text-align:center; transform:scale(3, 1); border:none; } +div.project:not(.toggle) { border-right:var(--box-border); width:230px; flex:0 0 230px; } +div.profile:not(.toggle) { border-left:var(--box-border); min-width:230px; } +div.display:not(.toggle) { border-top:var(--box-border); } +/* table card */ +div.output.card>div.item.stop { color:var(--disable-fg-color); } +div.output.card>div.item { padding:10px; border:var(--box-border); margin:10px; width:320px; float:left; box-shadow:var(--box-shadow); } +div.output.card>div.item>div.title { font-size:1.2rem; font-weight:bold; padding:10px; border-bottom:var(--box-border); } +div.output.card>div.item>div.content { padding:10px; height:70px; } +div.output.card>div.item>div.action { text-align:right; width:100%; display:flex; } +div.output.card>div.item:not(:hover)>div.action { visibility:hidden; } +div.output.card>div.item>div.action>input { margin-right:5px; box-shadow:var(--box-shadow); } +/* display */ +fieldset.panel>legend { display:none; } +fieldset.panel>div.status { display:none; } +fieldset.output>legend { display:none; } +fieldset.output>form.option { display:none; } +fieldset.output>div.action { display:none; } +fieldset.output>div.status { display:none; } +fieldset.output>div.item { display:none; } +fieldset>form.option, fieldset>div.action { display:contents; } form.option.hide, div.action.hide, .hidden, .hide { display:none; } +div.action, div.output, div.status, div.project, div.content, div.profile, div.display, table.content, table.content td, div.list, div.code, div.story, div.float, fieldset.float { overflow:auto; } +legend, form.option, form.option>div.item, div.action, div.action>div.item, div.action>div.tabs, fieldset>div.status>div.item { float:left; } +fieldset.story, div.output, fieldset>div.status, div.project div.item, div.content:not(.item), div.code, div.story[data-type=spark] { clear:both; } +fieldset.story { position:sticky; left:0; } +fieldset.full { position:fixed; left:0; top:0; } +fieldset.auto, fieldset.full, fieldset.float, div.float { position:fixed; z-index:100; box-shadow:var(--box-shadow); } +fieldset.plug { position:absolute; bottom:0; right:0; } +div.output { position:relative; } +div.layout.flex>* { float:left; clear:none; } +div.output.flex { display:flex; } +div.output>div.code { position:sticky; left:0; } +fieldset>div.status>legend { + border-radius:0; border-bottom-left-radius:10px; border-bottom-right-radius:10px; box-shadow:var(--box-shadow); + margin-right:5px; float:right; clear:none; +} +fieldset>div.status>legend>span.remove { margin-left:5px; } +fieldset>div.status>legend>span.remove:hover { background-color:var(--hover-bg-color); } +fieldset>div.status>legend:not(:hover)>span.remove { visibility:hidden; } +fieldset>div.status>legend:not(:hover):not(.select) { background-color:unset; border-radius:0; } +/* theme */ +body { background-color:var(--panel-bg-color); color:var(--body-fg-color); } +body.cmd { background-color:var(--plugin-bg-color); color:var(--body-fg-color); } +legend { background-color:var(--legend-bg-color); border-radius:var(--input-radius); } +legend:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +select { border-radius:var(--input-radius); } +input { background-color:var(--input-bg-color); color:var(--input-fg-color); border-radius:var(--input-radius); } +input:not([type=button]) { border:var(--input-border); } +input:not([type=button]):hover { border:var(--box-notice); } +input:not([type=button]):focus { border:var(--box-notice); } +input[type=button]:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +textarea { background-color:var(--input-bg-color); color:var(--input-fg-color); } +table.content tr:hover { background-color:var(--tr-hover-bg-color); } +table.content tr.select { background-color:var(--tr-hover-bg-color); } +table.content th { background-color:var(--th-bg-color); color:var(--th-fg-color); } +table.content td:hover { background-color:var(--td-hover-bg-color); } +table.content td.select { background-color:var(--td-hover-bg-color); } +table.content.action td:last-child { background-color:var(--th-bg-color); } +h1:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +h2:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +h3:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +kbd:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +samp:hover { background-color:white; color:black; } +span.keyword { color:var(--code-keyword); } span.function { color:var(--code-function); } +span.item:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +span.item.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +span.icon:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +div.item:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +div.item.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +div.item.danger input:hover[type=button] { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } +div.item.notice input:hover[type=button] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } +div.action div.tabs:hover { + background-color:var(--output-bg-color); color:var(--hover-fg-color); + border-top-left-radius:10px; border-top-right-radius:10px; +} +div.action div.tabs.select { + background-color:var(--output-bg-color); color:var(--hover-fg-color); + border-top-left-radius:10px; border-top-right-radius:10px; +} +div.zone>div.item { background-color:var(--th-bg-color); } +div.zone>div.list>div.zone>div.item { background-color:var(--th-bg-color); } +div.tabs div { background-color:var(--plugin-bg-color); } +div.tabs div:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +div.tabs div.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } +div.plug legend { background-color:var(--output-bg-color); border-radius:0; } +div.plug legend:hover { background-color:var(--hover-bg-color); } +div.plug legend.select { background-color:var(--plugin-bg-color); border-bottom:var(--box-notice); } +div.complete>table { background-color:var(--plugin-bg-color); } +fieldset>div.output { background-color:var(--output-bg-color); } +fieldset>div.status { border-top:var(--status-border); } +fieldset.panel:not(.main) { background-color:var(--panel-bg-color); color:var(--panel-fg-color); } +fieldset.panel:not(.main)>div.output { background-color:var(--panel-output-bg-color); color:var(--panel-output-fg-color); } +fieldset.panel:not(.main)>div.output a { color:var(--panel-output-fg-color); } +fieldset.panel:not(.main):not(.auto) div.item:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); } +fieldset.panel:not(.main):not(.auto) div.item.select { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); } +fieldset:not(.panel) { background-color:var(--plugin-bg-color); color:var(--plugin-fg-color); } +fieldset:not(.panel):not(.cmd) { background-color:var(--plugin-bg-color); color:var(--plugin-fg-color); } +fieldset:not(.panel):not(.full):not(.cmd) { border-radius:var(--plugin-radius); box-shadow:var(--box-shadow); } +fieldset.input div.output { background-color:var(--plugin-bg-color); } +fieldset.input tr:hover { background-color:var(--tr-hover-bg-color); } +fieldset.input td:hover { background-color:var(--td-hover-bg-color); } +div.float { background-color:var(--float-bg-color); color:var(--float-fg-color); } +div.carte div.item { background-color:var(--carte-bg-color); } +div.carte div.item:hover { background-color:var(--hover-bg-color); } +div.carte div.item.danger { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } +div.carte div.item.notice { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } +/* print */ +body.print { -webkit-filter: grayscale(100%); } +body.print { background-color:white; color:black; } +body.print legend, body.print select, body.print input, body.print input[type=button], body.print textarea { background-color:snow; color:black; } +body.print div.item { background-color:white; } +body.print div.carte div.item { background-color:snow; } +body.print div.item.select { background-color:lightgray; } +body.print div.zone>div.item { background-color:lightgray; color:black; } +body.print table.content th { background-color:lightgray; } +body.print table.content.action td:last-child { background-color:lightgray; } +body.print table.content td.select { background-color:lightgray; } +body.print a { color:black; } +body.print div.story[data-type=spark] { background-color:lightgray; } +body.print fieldset.panel { background-color:white; color:black; } +body.print fieldset.panel.Footer>div.output div.toast { background-color:lightgray; } +body.print fieldset.plugin { background-color:white; color:black; } +body.print fieldset.float { background-color:snow; } +body.print div.float { background-color:snow; } +body.print select, body.print input[type=text], body.print textarea { box-shadow:4px 4px 20px 4px lightgray; } +body.print fieldset.draw div.output { background-color:lightgray; } +body.print fieldset.draw div.output div.content svg { background-color:lightgray; } +/* misc */ +fieldset.Search div.story[data-type=spark] { margin:0; } +fieldset.Search>div.output>div.profile { border-left:none; } +fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { padding:10px; margin:10px; box-shadow:var(--box-shadow); } +fieldset.Action>div.output>fieldset.plugin:not(.float):not(.full):not(.cmd)>legend { float:none; } +fieldset.cmd>div.item.time { line-height:22px; padding:5px 10px; float:right; } +fieldset.cmd>div.item.avatar { padding:0; height:32px; float:right; } +fieldset.cmd>div.item.avatar>img { height:32px; } +fieldset.cmd>div.item.usernick { line-height:22px; padding:5px 10px; float:right; } +fieldset.plug>div.output table.content { width:100%; } +fieldset.location>div.action input[type=text] { width:40px; } +fieldset.config form.option input[name=key] { width:240px; } +fieldset.qrcode>div.output div.code { padding:0; } +fieldset.inner.float>div.status { display:none; } +fieldset.xterm>div.action>div.tabs:only-child { display:none; } +fieldset.xterm>div.layout { clear:both; } +fieldset.xterm div.layout div.output { border-left:var(--box-border); border-top:var(--box-border); } +fieldset.xterm div.layout div.output.select { border:var(--box-border)} +fieldset.plan div.output div.content>table.content { height:100%; width:100%; } +fieldset.draw div.output svg { margin-bottom:-5px; } +fieldset.draw>form.option>div.item.pid>input { width:60px; } +fieldset.draw.trend div.output svg { background-color:#1b5b738c; } +fieldset.draw.trend div.output { overflow:hidden; } +fieldset.draw.spide div.output { overflow-y:hidden; } +fieldset.draw.spide div.output svg text { cursor:pointer; } +fieldset.draw.spide div.output svg path { stroke-width:1; } +fieldset.web.code.docker.studio>div.action>div.item { font-style:italic; height:32px; padding:5px 10px; } +fieldset.web.code.docker.studio>div.output>fieldset { margin:0; } +fieldset.web.code.docker.studio>div.output>fieldset>legend { display:none; } +fieldset.web.code.docker.studio>div.output>fieldset>form.option>div:first-child { margin-left:10px; } +fieldset.web.code.docker.studio>div.output { padding:10px; } +fieldset.web.code.git.status>div.output table.content { width:100%; } +fieldset.inner>div.output>div.project div.item.modify { background-color:#00800036; } +fieldset.cmd>div.action>div.tabs.select { border-bottom:var(--notice-bg-color) solid 2px; height:32px; } +fieldset.cmd>div.status>legend.select { border-top:var(--notice-bg-color) solid 2px; } +fieldset.cmd>div.output>div.project div.item.select { border-right:var(--notice-bg-color) solid 4px; } +/* fieldset.cmd>div.output>div.project div.item { line-height:32px; } */ +fieldset.web.code.xterm>div.action>div.tabs:only-child { display:none; } +fieldset.macos.desktop.cmd>div.output>fieldset.macos.dock { z-index:11; } +fieldset.can.view { font-size:14px; } +fieldset.can.data { font-size:14px; } +fieldset.inner>form.option input[name=path] { width:80px; } +fieldset.inner>form.option input[name=file] { width:160px; } +body.zh fieldset.inner>div.output>div.project>div.zone>div.item { letter-spacing:10px; border-top:var(--box-border); } +body.white fieldset.inner.cmd>div.output>div.layout>div.tabs div:not(.select):not(:hover) { background-color:transparent; } +body.mobile fieldset.inner>form.option input[name=file] { width:90px; } +body.mobile fieldset.word fieldset.inner>form.option input[type=text] { display:none; } +body.windows fieldset.inner>div.output { overflow:hidden; } +body.windows fieldset.inner>div.output>div.layout>div.layout>div.profile { overflow:hidden; } +fieldset.vimer>div.output>div.project>div.zone.space div.item.stop { color:gray; } + +/* scrollbar */ +div.scrollbar { background-color:#0000ff66; border-radius:10px; position:absolute; visibility:hidden; font-size:8px !important; } +div.scrollbar.vertical { writing-mode:tb; width:10px; right:0; top:0; transition:width .3s 1s; } +div.scrollbar.vertical:hover { width:30px; transition:width .1s; font-size:24px !important; } +div.scrollbar.horizon:hover { height:30px; transition:height .1s; font-size:24px !important; } +div.scrollbar.horizon { height:10px; left:0; bottom:0; transition:height .3s 1s; } +fieldset.panel.River>div.output::-webkit-scrollbar { width:0 !important; height:0 !important; } +fieldset.panel.Action>div.output::-webkit-scrollbar { width:0 !important; height:0 !important; } +form.option>div.text>span.value::-webkit-scrollbar { width:0 !important; height:0 !important; } +div.status::-webkit-scrollbar { width:0 !important; height:0 !important; } +div.project::-webkit-scrollbar { width:0 !important; height:0 !important; } +div.content::-webkit-scrollbar { width:0 !important; height:0 !important; } +fieldset.word>div.output::-webkit-scrollbar { width:0 !important; height:0 !important; } +div.toggle::-webkit-scrollbar { width:0 !important; height:0 !important; } +div.story[data-type=spark]::-webkit-scrollbar { width:0 !important; height:0 !important; } +div.carte::-webkit-scrollbar { width:0 !important; height:0 !important; } + body { --ui-white: #fff; --ui-white-p: 255,255,255; @@ -154,425 +590,4 @@ body { --ui-gold-9: #874d00; --ui-gold-10: #613400; - --danger-bg-color:red; --danger-fg-color:white; - --notice-bg-color:blue; --notice-fg-color:white; - --create-bg-color:blue; --create-fg-color:white; - --progress-bg-color:red; --disable-fg-color:gray; - --hover-bg-color:#5066b945; --hover-fg-color:white; - --body-bg-color:black; --body-fg-color:silver; - --box-border:#404141 solid 1px; - --box-notice:var(--notice-bg-color) solid 1px; - --box-shadow:var(--body-fg-color) 2px 2px 8px; - --legend-bg-color:var(--body-bg-color); - --input-fg-color: var(--body-fg-color); - --input-border:var(--box-border); --input-radius:5px; - --output-bg-color: var(--input-bg-color); - --status-border:var(--box-border); - --panel-bg-color:var(--panel-output-bg-color); - --panel-fg-color:var(--panel-output-fg-color); - --panel-output-bg-color: var(--body-bg-color); - --panel-output-fg-color: var(--body-fg-color); - --panel-hover-bg-color:var(--hover-bg-color); - --panel-hover-fg-color:var(--hover-fg-color); - --plugin-border-color:var(--box-border); --plugin-radius:10px; - --plugin-bg-color:var(--body-bg-color); - --plugin-fg-color:var(--body-fg-color); - --th-bg-color:var(--plugin-bg-color); - --td-hover-bg-color:var(--hover-bg-color); - --tr-hover-bg-color:var(--hover-bg-color); - --float-bg-color:var(--plugin-bg-color); - --float-fg-color:var(--plugin-fg-color); - --carte-bg-color:var(--plugin-bg-color); - --code-bg-color:black; --code-fg-color:silver; --code-border-color:blue; - --code-comment:green; --code-keyword:royalblue; --code-package:blue; - --code-datatype:lavender; --code-function:lightgreen; - --code-constant:gray; --code-string:orange; --code-object:silver; - --svg-stroke-width:2; } -/* element */ -* { tab-size:4; box-sizing:border-box; padding:0; border:0; margin:0; } -legend { padding:0 20px; } -select { padding:0 10px; } -input:not([type=file]) { padding:0 10px; } -input:not([type=button]) { border-radius:0; outline:none; width:120px; } -input[name=path] { width:160px; } -input[name=line] { width:60px; } -input[name=limit] { width:60px; } -input[name=offend] { width:80px; } -input[name=id] { width:60px; } -input[name=url] { width:320px; } -input[name=cmd] { background-color:var(--code-bg-color); color:var(--code-fg-color); width:100%; } -table.content.full { width:100%; } -table.content thead { position:sticky; top:2px; } -table.content tr.offline { color:var(--disable-fg-color); } -table.content tr.offline a { color:var(--disable-fg-color); } -table.content th { padding:5px; box-shadow: var(--box-shadow); } -table.content td { padding:5px; } -table.content.action th:last-child { position:sticky; right:2px; box-shadow: var(--box-shadow); } -table.content.action td:last-child { position:sticky; right:2px; box-shadow: var(--box-shadow); } -table.content.action td:last-child input { margin-right:10px; box-shadow:var(--box-shadow); } -table.content col.time { width:180px; } -table.content col.action { width:180px; } -table.content:hover col.option { background-color:var(--hover-bg-color); } -fieldset.panel.Action.tabs table.content { width:100%; } -h1 { text-align:center; margin:20px 0; } h2 { margin:20px 0; } h3 { margin:20px 0; } -hr, td.hr { border-bottom:var(--plugin-border-color) dashed 1px; margin:5px; } -ol, ul { margin-left:40px; } -a { color:var(--body-fg-color); } -p { margin:20px 0; } -kbd { padding:0 5px; } -img, iframe { margin-bottom:-3px; } -iframe { height:420px; width:100%; } -/* fieldset */ -fieldset>legend { margin-right:10px; box-shadow:var(--box-shadow); } -fieldset>form.option>div.item:not(.icon) { margin-right:10px; box-shadow:var(--box-shadow); } -fieldset>form.option>div.item.text.cmd { color:var(--code-fg-color); width:100%; } -fieldset>form.option>div.item.textarea { width:100%; } -fieldset>form.option>div.item.select { border-radius:5px; } -fieldset>form.option>div.item.select>input { min-width:80px; } -fieldset>form.option>div.item.button { border-radius:5px; } -fieldset>div.action>div.item { margin-right:10px; box-shadow:var(--box-shadow); } -fieldset>div.action>div.item.select { border-radius:5px; } -fieldset>div.action>div.item.button { border-radius:5px; } -fieldset>div.output { width:100%; } -fieldset>div.status { width:100%; } -fieldset.input>legend { display:none; } -fieldset.input.key div.action { display:none; } -fieldset.input.key div.output table.content { width:100%; } -fieldset.input.key div.status:not(.hide) { display:block; position:sticky; bottom:0; } -fieldset.input.key.simple th { display:none; } -fieldset.input.key.simple td { min-width:40px; } -fieldset.input.date>div.action>div.item.next { margin-right:0; } -fieldset.input.date>div.action>div.item.today { margin-right:0; } -fieldset.input.date>div.output table.content { text-align:center; width:100%; min-width:350px; } -fieldset.input.date>div.output td { padding:2px 10px; } -fieldset.input.date>div.output td.prev { color:var(--disable-fg-color); } -fieldset.input.date>div.output td.next { color:var(--disable-fg-color); } -fieldset.input.date>div.output td.select { background-color:var(--hover-bg-color); } -fieldset.input.date>div.output td:hover { background-color:var(--hover-bg-color); } -fieldset.input.date>div.output td span.lunar { font-size:8px; display:block; clear:both; } -fieldset.input.date>div.output td span.lunar.term { color:green; } -fieldset.input.date>div.output td span.lunar.fest { color:red; } -fieldset.input.date>div.status { text-align:center; } -/* float */ -body div.float { padding:5px; box-shadow:var(--box-shadow); } -body>div.toast div.title { color:var(--notice-bg-color); float:left; } -body>div.toast div.duration { color:var(--disable-fg-color); float:right; } -body>div.toast div.content { color:var(--notice-bg-color); text-align:center; } -body>div.toast div.progress { border:var(--box-notice); margin-left:0px; height:20px; clear:both; } -body>div.toast div.progress div.current { background-color:var(--progress-bg-color); height:18px; } -body>div.toast div.action { width:100%; display:block; } -body>div.toast div.action>div.item { float:right; } -body>div.carte { padding:0; } -body>div.carte input[name=filter] { margin:5px; width:calc(100% - 10px); position:sticky; top:5px; } -body>div.carte div.item { white-space:pre; padding:5px 10px; } -body>div.carte div.item span.icon.next { float:right; line-height:22px; height:22px; } -body>div.carte.select.float>div.item { text-align:center; } -body>div.input { padding:20px; } -body>div.input td { padding:10px; } -body>div.input td span.icon { margin-left:-20px; visibility:hidden; } -body>div.input td:hover span.icon { visibility:visible; } -body>div.input select { width:230px; } -body>div.input input { width:240px; } -body>div.input textarea { height:120px; width:240px; } -body>div.input div.action { width:100%; } -body>div.input div.action>div.item { margin:5px; float:right; } -body>div.input div.action>div.item>input[type=button] { width:110px; } -body>div.input.login>div.output { text-align:center; } -body>div.upload div.action input[type=file] { width:320px; } -body>div.upload div.output { border:var(--box-notice); } -body>div.upload div.output div.progress { background-color:var(--progress-bg-color); height:10px; width:0; } -body>div.upload div.status div.cost { float:left; } -body>div.upload div.status div.show { float:right; } -body>div.upload div.status div.size { text-align:center; } -/* font */ -body { font-size:16px; } -legend { font-size:1.2rem; line-height:32px; height:32px; } -select, input { font-size:1rem; height:32px; } input::placeholder, textarea::placeholder { font-style:italic; } -/* input:not([type=button]) { translate:1px -1px; } */ -textarea { font-size:1rem; tab-size:2; padding:5px; height:96px; width:100%; resize:vertical; } -table.content, div.code, div.story[data-type=spark] { white-space:pre; margin:0; } -div.story[data-type=spark] { padding:0 5px; border-left:var(--notice-bg-color) solid 5px; } -fieldset>div.action>div.tabs { font-style:italic; padding-left:10px; box-shadow:var(--box-shadow); margin-left:5px; } -fieldset>div.output>div.code { font-size:14px; } -fieldset>div.status { max-height:32px; } -fieldset>div.status>div.item { padding:5px; height:31px; } -fieldset>div.status>div.item>label { font-size:0.6rem; } -fieldset>div.status>legend { font-style:italic; } -legend, select, input[type=button], th, table.content td, h1, h2, h3, div.item, div.tabs { cursor:pointer; } -div.story[data-type=spark] { cursor:copy; } -body.en fieldset.input.date>div.action>div.item.select select { width:55px; } -body.en fieldset.input.date>div.action>div.item.select.year select { width:100px; } -body.en fieldset.input.date>div.action>div.item.select.month select { width:100px; } -body.zh fieldset.input.date>div.action>div.item.select select { width:58px; } -body.zh fieldset.input.date>div.action>div.item.select.year select { width:81px; } -body.zh fieldset.input.date>div.action>div.item.select.month select { width:81px; } -body:not(.windows) table.content { font-family:monospace; } -body:not(.windows) div.code { font-family:monospace; } -body:not(.windows) div.tabs { font-family:monospace; } -body:not(.windows) div.path { font-family:monospace; } -body:not(.windows) div.carte { font-family:monospace; } -/* icon */ -legend>i:first-child { margin-right:10px; } div.item>i:first-child { margin-right:10px; } -div.action div.icon, div.action span.icon { font-size:20px; line-height:32px; padding:0 5px; margin:0; height:32px; } -form.option div.icon, form.option span.icon { font-size:20px; line-height:32px; padding:0 5px; margin:0; height:32px; } -form.option div.icon:first-child { margin-left:-5px; } -form.option div.icon.refresh { font-size:28px; line-height:28px; translate:0 -1px; } -form.option div.icon.goback { font-size:28px; line-height:28px; translate:0 -1px; } -form.option div.icon.next { font-size:18px; } -form.option div.icon.prev { font-size:18px; } -div.item.select { position:relative; } -div.item.select>span.icon { position:absolute; right:0; visibility:hidden; } -div.item.select:hover>span.icon { visibility:visible; } -div.item.text { position:relative; } -div.item.text>span.icon { position:absolute; right:0; visibility:hidden; } -div.item.text:hover>span.icon { visibility:visible; } -div.item.button>span.icon.create { font-size:32px; line-height:32px; translate:0px -2px; display:block; } -div.tabs span.icon { padding:0 8px; visibility:hidden; } -div.tabs>div.select span.icon { visibility:visible; } -div.tabs>div:hover span.icon { visibility:visible; } -div.tabs:hover>span.icon { visibility:visible; } -fieldset.plug>form.option>div.icon { margin-left:5px; } -fieldset.panel>div.action>div.button>span.icon { display:none; } -fieldset.plugin:not(.story):not(.float):not(.full):not(.cmd)>form.option>div.icon { display:none; } -fieldset.plugin:not(.story):not(.float):not(.full):not(.cmd)>form.option>div.button>span.icon { display:none; } -fieldset.plugin:not(.story):not(.float):not(.full):not(.cmd)>div.action>div.button>span.icon { display:none; } -fieldset.story>form.option>div.button.icons>input { display:none; } -fieldset.float>form.option>div.button.icons>input { display:none; } -fieldset.full>form.option>div.button.icons>input { display:none; } -fieldset.cmd>form.option>div.button.icons>input { display:none; } -fieldset.story>div.action>div.button.icons>input { display:none; } -fieldset.float>div.action>div.button.icons>input { display:none; } -fieldset.full>div.action>div.button.icons>input { display:none; } -fieldset.cmd>div.action>div.button.icons>input { display:none; } -fieldset:not(.float)>form.option>div.text>span.value { display:none; } -fieldset.float.plug>form.option>div.text>span.value { display:none; } -fieldset.float:not(.plug)>form.option>div.text>input { display:none; } -fieldset.float:not(.plug)>form.option>div.text>span { display:none; } -fieldset.float:not(.plug)>form.option>div.text>span.value { white-space:pre; padding:7px; height:32px; max-width:200px; display:block; overflow:auto; } -fieldset.float div.text:hover>span.icon.delete { visibility:hidden; } -body.mobile:not(.landscape) fieldset.float>form.option>div.text>span.value { display:none; } -body.windows form.option>div.icon { font-size:21px; } -/* svg */ -fieldset.web.wiki.draw div.output svg { min-width:100%; min-height:100%; } -svg text { font-size:24px; font-family:monospace; stroke:var(--body-fg-color); fill:var(--body-fg-color); cursor:pointer; } -svg text:hover { stroke:var(--hover-fg-color); fill:var(--hover-fg-color); cursor:pointer; } -svg rect { stroke-width:var(--svg-stroke-width); stroke:var(--body-fg-color); fill:var(--output-bg-color); } -svg rect:hover { stroke:var(--hover-fg-color); fill:var(--hover-bg-color); } -svg line { stroke-width:var(--svg-stroke-width); stroke:var(--body-fg-color); } -svg line:hover { stroke:var(--hover-fg-color); } -svg path { stroke-width:var(--svg-stroke-width); stroke:var(--body-fg-color); } -svg path:hover { stroke:var(--hover-fg-color); } -svg g[stroke] text { stroke:unset; } -svg g[stroke] rect { stroke:unset; } -svg g[stroke] line { stroke:unset; } -svg g[stroke] path { stroke:unset; } -svg g[fill] text { fill:unset; } -svg g[fill] rect { fill:unset; } -/* output */ -div.project div.list { margin-left:10px; clear:both; } -div.project div.item { white-space:pre; line-height:24px; padding:0 10px; } -div.project div.item.filter { padding:0; } -div.project div.item.filter>input { width:100% !important; } -div.project div.item.filter>span.icon { margin-left:-20px; } -div.project div.item.filter>span.delete { top:3px; right:5px; } -div.project div.item>div.name { padding-left:15px; } -div.project div.expand { float:left; transition:all .3s; } -div.project div.expand.open { rotate:90deg; translate:1px 2px; transition:all .3s; } -div.project div.zone>div.item { text-align:center; padding:3px; } -div.project div.zone>div.item>div.icon { margin-left:3px; float:right; } -div.project div.zone>div.list>div.zone>div.item { text-align:left; padding-left:20px; } -div.project div.zone>div.list>div.zone>div.item:hover { margin-left:10px; transition:all 0.3s; } -div.content { position:relative; } -div.content>div.toggle { position:absolute; } -div.content>div.toggle:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); cursor:pointer; } -div.content>div.toggle.project { top:20%; left:0; height:80px; width:unset; padding-top:25px; transform:scale(1, 3); border:none; } -div.content>div.toggle.profile { top:20%; right:0; height:80px; padding-top:25px; transform:scale(1, 3); border:none; } -div.content>div.toggle.display { left:20%; bottom:0; width:80px; text-align:center; transform:scale(3, 1); border:none; } -div.project:not(.toggle) { border-right:var(--box-border); width:230px; flex:0 0 230px; } -div.profile:not(.toggle) { border-left:var(--box-border); min-width:230px; } -div.display:not(.toggle) { border-top:var(--box-border); } -/* table card */ -div.output.card>div.item.stop { color:var(--disable-fg-color); } -div.output.card>div.item { padding:10px; border:var(--box-border); margin:10px; width:320px; float:left; box-shadow:var(--box-shadow); } -div.output.card>div.item>div.title { font-size:1.2rem; font-weight:bold; padding:10px; border-bottom:var(--box-border); } -div.output.card>div.item>div.content { padding:10px; height:70px; } -div.output.card>div.item>div.action { text-align:right; width:100%; display:flex; } -div.output.card>div.item:not(:hover)>div.action { visibility:hidden; } -div.output.card>div.item>div.action>input { margin-right:5px; box-shadow:var(--box-shadow); } -/* display */ -fieldset.panel>legend { display:none; } -fieldset.panel>div.status { display:none; } -fieldset.output>legend { display:none; } -fieldset.output>form.option { display:none; } -fieldset.output>div.action { display:none; } -fieldset.output>div.status { display:none; } -fieldset.output>div.item { display:none; } -fieldset>form.option, fieldset>div.action { display:contents; } form.option.hide, div.action.hide, .hidden, .hide { display:none; } -div.action, div.output, div.status, div.project, div.content, div.profile, div.display, table.content, table.content td, div.list, div.code, div.story, div.float, fieldset.float { overflow:auto; } -legend, form.option, form.option>div.item, div.action, div.action>div.item, div.action>div.tabs, fieldset>div.status>div.item { float:left; } -fieldset.story, div.output, fieldset>div.status, div.project div.item, div.content:not(.item), div.code, div.story[data-type=spark] { clear:both; } -fieldset.story { position:sticky; left:0; } -fieldset.full { position:fixed; left:0; top:0; } -fieldset.auto, fieldset.full, fieldset.float, div.float { position:fixed; z-index:100; box-shadow:var(--box-shadow); } -fieldset.plug { position:absolute; bottom:0; right:0; } -div.output { position:relative; } -div.layout.flex>* { float:left; clear:none; } -div.output.flex { display:flex; } -div.output>div.code { position:sticky; left:0; } -fieldset>div.status>legend { - border-radius:0; border-bottom-left-radius:10px; border-bottom-right-radius:10px; box-shadow:var(--box-shadow); - margin-right:5px; float:right; clear:none; -} -fieldset>div.status>legend>span.remove { margin-left:5px; } -fieldset>div.status>legend>span.remove:hover { background-color:var(--hover-bg-color); } -fieldset>div.status>legend:not(:hover)>span.remove { visibility:hidden; } -fieldset>div.status>legend:not(:hover):not(.select) { background-color:unset; border-radius:0; } -/* theme */ -body { background-color:var(--body-bg-color); color:var(--body-fg-color); } -legend { background-color:var(--legend-bg-color); border-radius:var(--input-radius); } -legend:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -select { border-radius:var(--input-radius); } -input { background-color:var(--input-bg-color); color:var(--input-fg-color); border-radius:var(--input-radius); } -input:not([type=button]) { border:var(--input-border); } -input:not([type=button]):hover { border:var(--box-notice); } -input:not([type=button]):focus { border:var(--box-notice); } -input[type=button]:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -textarea { background-color:var(--input-bg-color); color:var(--input-fg-color); } -table.content tr:hover { background-color:var(--tr-hover-bg-color); } -table.content tr.select { background-color:var(--tr-hover-bg-color); } -table.content th { background-color:var(--th-bg-color); color:var(--th-fg-color); } -table.content td:hover { background-color:var(--td-hover-bg-color); } -table.content td.select { background-color:var(--td-hover-bg-color); } -table.content.action td:last-child { background-color:var(--th-bg-color); } -h1:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -h2:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -h3:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -kbd:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -samp:hover { background-color:white; color:black; } -span.item:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -span.item.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -span.icon:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -div.item:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -div.item.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -div.item.danger input:hover[type=button] { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } -div.item.notice input:hover[type=button] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } -/* div.action div.tabs:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } */ -div.action div.tabs:hover { - background-color:var(--output-bg-color); color:var(--hover-fg-color); - border-top-left-radius:10px; border-top-right-radius:10px; -} -div.action div.tabs.select { - background-color:var(--output-bg-color); color:var(--hover-fg-color); - border-top-left-radius:10px; border-top-right-radius:10px; -} -div.zone>div.item { background-color:var(--th-bg-color); } -div.zone>div.list>div.zone>div.item { background-color:var(--th-bg-color); } -div.tabs div { background-color:var(--plugin-bg-color); } -div.tabs div:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -div.tabs div.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -div.plug legend { background-color:var(--output-bg-color); border-radius:0; } -div.plug legend:hover { background-color:var(--hover-bg-color); } -div.plug legend.select { background-color:var(--plugin-bg-color); border-bottom:var(--box-notice); } -div.complete>table { background-color:var(--plugin-bg-color); } -fieldset>div.output { background-color:var(--output-bg-color); } -fieldset>div.status { border-top:var(--status-border); } -fieldset.panel:not(.main) { background-color:var(--panel-bg-color); color:var(--panel-fg-color); } -fieldset.panel:not(.main)>div.output { background-color:var(--panel-output-bg-color); color:var(--panel-output-fg-color); } -fieldset.panel:not(.main):not(.auto) div.item:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); } -fieldset.panel:not(.main):not(.auto) div.item.select { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); } -fieldset:not(.panel) { background-color:var(--plugin-bg-color); color:var(--plugin-fg-color); } -fieldset:not(.panel):not(.cmd) { background-color:var(--plugin-bg-color); color:var(--plugin-fg-color); } -fieldset:not(.panel):not(.full):not(.cmd) { border-radius:var(--plugin-radius); box-shadow:var(--box-shadow); } -fieldset.input div.output { background-color:var(--plugin-bg-color); } -fieldset.input tr:hover { background-color:var(--tr-hover-bg-color); } -fieldset.input td:hover { background-color:var(--td-hover-bg-color); } -div.float { background-color:var(--float-bg-color); color:var(--float-fg-color); } -div.carte div.item { background-color:var(--carte-bg-color); } -div.carte div.item:hover { background-color:var(--hover-bg-color); } -div.carte div.item.danger { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } -div.carte div.item.notice { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } -body.light fieldset.panel:not(.main)>div.output div.state:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); } -body.light fieldset.panel:not(.main)>div.output div.title:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); } -body.light fieldset.panel:not(.main)>div.output div.menu:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); } -body.light fieldset.panel:not(.main)>div.output>div.item>input::placeholder { background-color:var(--panel-input-bg-color); color:var(--panel-fg-color); } -body.light fieldset.panel:not(.main):not(.auto) input { background-color:var(--panel-input-bg-color); color:var(--panel-input-fg-color); border-radius:var(--input-radius); } -body.light fieldset.panel:not(.main) label { color:var(--panel-fg-color); } -body.light fieldset.panel:not(.main) a { color:var(--panel-fg-color); } -body.light span.keyword { color:darkblue; } body.light span.function { color:darkcyan; } -body.dark span.keyword { color:royalblue; } body.dark span.function { color:lightgreen; } -/* print */ -body.print { -webkit-filter: grayscale(100%); } -body.print { background-color:white; color:black; } -body.print legend, body.print select, body.print input, body.print input[type=button], body.print textarea { background-color:snow; color:black; } -body.print div.item { background-color:white; } -body.print div.carte div.item { background-color:snow; } -body.print div.item.select { background-color:lightgray; } -body.print div.zone>div.item { background-color:lightgray; color:black; } -body.print table.content th { background-color:lightgray; } -body.print table.content.action td:last-child { background-color:lightgray; } -body.print table.content td.select { background-color:lightgray; } -body.print a { color:black; } -body.print div.story[data-type=spark] { background-color:lightgray; } -body.print fieldset.panel { background-color:white; color:black; } -body.print fieldset.panel.Footer>div.output div.toast { background-color:lightgray; } -body.print fieldset.plugin { background-color:white; color:black; } -body.print fieldset.float { background-color:snow; } -body.print div.float { background-color:snow; } -body.print select, body.print input[type=text], body.print textarea { box-shadow:4px 4px 20px 4px lightgray; } -body.print fieldset.draw div.output { background-color:lightgray; } -body.print fieldset.draw div.output div.content svg { background-color:lightgray; } -/* misc */ -fieldset.Search div.story[data-type=spark] { margin:0; } -fieldset.Search>div.output>div.profile { border-left:none; } -fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { padding:10px; margin:10px; box-shadow:var(--box-shadow); } -fieldset.Action>div.output>fieldset.plugin:not(.float):not(.full):not(.cmd)>legend { float:none; } -fieldset.cmd>div.item.time { line-height:22px; padding:5px 10px; float:right; } -fieldset.cmd>div.item.avatar { padding:0; height:32px; float:right; } -fieldset.cmd>div.item.avatar>img { height:32px; } -fieldset.cmd>div.item.usernick { line-height:22px; padding:5px 10px; float:right; } -fieldset.plug>div.output table.content { width:100%; } -fieldset.location>div.action input[type=text] { width:40px; } -fieldset.config form.option input[name=key] { width:240px; } -fieldset.qrcode>div.output div.code { padding:0; } -fieldset.inner.float>div.status { display:none; } -fieldset.xterm>div.action>div.tabs:only-child { display:none; } -fieldset.xterm>div.layout { clear:both; } -fieldset.xterm div.layout div.output { border-left:var(--box-border); border-top:var(--box-border); } -fieldset.xterm div.layout div.output.select { border:var(--box-border)} -fieldset.plan div.output div.content>table.content { height:100%; width:100%; } -fieldset.draw div.output svg { margin-bottom:-5px; } -fieldset.draw>form.option>div.item.pid>input { width:60px; } -fieldset.draw.trend div.output svg { background-color:#1b5b738c; } -fieldset.draw.trend div.output { overflow:hidden; } -fieldset.draw.spide div.output { overflow-y:hidden; } -fieldset.draw.spide div.output svg text { cursor:pointer; } -fieldset.draw.spide div.output svg path { stroke-width:1; } -fieldset.web.code.docker.studio>div.action>div.item { font-style:italic; height:32px; padding:5px 10px; } -fieldset.web.code.docker.studio>div.output>fieldset { margin:0; } -fieldset.web.code.docker.studio>div.output>fieldset>legend { display:none; } -fieldset.web.code.docker.studio>div.output>fieldset>form.option>div:first-child { margin-left:10px; } -fieldset.web.code.docker.studio>div.output { padding:10px; } -fieldset.web.code.git.status>div.output table.content { width:100%; } -fieldset.cmd>div.action>div.tabs.select { border-bottom:var(--notice-bg-color) solid 2px; height:32px; } -fieldset.cmd>div.status>legend.select { border-top:var(--notice-bg-color) solid 2px; } -fieldset.cmd>div.output>div.project div.item.select { border-right:var(--notice-bg-color) solid 4px; } -fieldset.cmd>div.output>div.project div.item { line-height:32px; } -fieldset.can.view { font-size:14px; } -fieldset.can.data { font-size:14px; } -/* scrollbar */ -div.scrollbar { background-color:#0000ff66; border-radius:10px; position:absolute; visibility:hidden; font-size:8px !important; } -div.scrollbar.vertical { writing-mode:tb; width:10px; right:0; top:0; transition:width .3s 1s; } -div.scrollbar.vertical:hover { width:30px; transition:width .1s; font-size:24px !important; } -div.scrollbar.horizon:hover { height:30px; transition:height .1s; font-size:24px !important; } -div.scrollbar.horizon { height:10px; left:0; bottom:0; transition:height .3s 1s; } -fieldset.panel.River>div.output::-webkit-scrollbar { width:0 !important; height:0 !important; } -fieldset.panel.Action>div.output::-webkit-scrollbar { width:0 !important; height:0 !important; } -form.option>div.text>span.value::-webkit-scrollbar { width:0 !important; height:0 !important; } -div.status::-webkit-scrollbar { width:0 !important; height:0 !important; } -div.project::-webkit-scrollbar { width:0 !important; height:0 !important; } -div.content::-webkit-scrollbar { width:0 !important; height:0 !important; } -fieldset.word>div.output::-webkit-scrollbar { width:0 !important; height:0 !important; } -div.toggle::-webkit-scrollbar { width:0 !important; height:0 !important; } -div.story[data-type=spark]::-webkit-scrollbar { width:0 !important; height:0 !important; } -div.carte::-webkit-scrollbar { width:0 !important; height:0 !important; } diff --git a/panel/action.css b/panel/action.css index 27a0a699..20fcbb90 100644 --- a/panel/action.css +++ b/panel/action.css @@ -1,6 +1,6 @@ fieldset.Action { min-width:160px; } fieldset.Action>div.action { width:100%; display:none; background-color:var(--plugin-bg-color); } -fieldset.Action>div.action div.item { font-size:1.1rem; padding:10px 20px; } +fieldset.Action>div.action div.item { font-style:italic; font-size:1.1rem; padding:10px 20px; } fieldset.Action.tabs>div.action { display:block; } fieldset.Action.tabs>div.output>fieldset>legend { display:none; } fieldset.Action.tabs>div.output>fieldset.plugin:not(.select) { display:none; } diff --git a/panel/footer.css b/panel/footer.css index b5acb49b..4eaef6d0 100644 --- a/panel/footer.css +++ b/panel/footer.css @@ -1,14 +1,14 @@ -fieldset.Footer>div.output { height:32px; font-style:italic; overflow:hidden; } -fieldset.Footer>div.output div.item { font-family:unset; padding:7px; float:left; } -fieldset.Footer>div.output div.title:first-child { text-align:center; width:230px; } +fieldset.Footer>div.output { font-style:italic; height:32px; overflow:hidden; } +fieldset.Footer>div.output div.item { padding:7px; float:left; } +fieldset.Footer>div.output div.title:first-child { font-weight:bold; text-align:center; width:230px; overflow:auto; } fieldset.Footer>div.output div.state { float:right; } fieldset.Footer>div.output div.state label { font-size:12px; } fieldset.Footer>div.output div.toast { float:right; } fieldset.Footer>div.output div.cmd { padding:0; margin-left:10px; position:relative; } -fieldset.Footer>div.output div.cmd>i { position:absolute; left:10px; top:8px; } -fieldset.Footer>div.output div.cmd>input[name=cmd] { padding-left:30px; margin-right:0; width:120px; transition:all 1s; } +fieldset.Footer>div.output div.cmd>i { padding:7px; position:absolute; } +fieldset.Footer>div.output div.cmd>input[name=cmd] { padding-left:30px; width:120px; transition:all 1s; } fieldset.Footer>div.output div.cmd>input[name=cmd]:focus { width:320px; transition:all 0.5s; } -fieldset.Footer>div.output div.cmd>span.delete { margin-top:5px; } +fieldset.Footer>div.output div.cmd>span.delete { padding:6px; } .picker { box-shadow:4px 4px 20px 4px #626bd0; } div.view span.keyword { color:#5cadd4; } diff --git a/panel/footer.js b/panel/footer.js index ca86e9df..5840575a 100644 --- a/panel/footer.js +++ b/panel/footer.js @@ -14,7 +14,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.Conf(NKEY, can. ], onclick: function(event) { can.onexport[item](can) }}]) }) }, _toast: function(can, msg, target) { can.ui.toast = can.page.Append(can, target, [{view: [[html.ITEM, chat.TOAST]], onclick: function(event) { can.onexport[NTIP](can) }}])._target }, - _command: function(can, msg, target) { can.onappend.input(can, {type: html.TEXT, icon: "bi bi-terminal", name: ice.CMD, onkeydown: function(event) { can.onkeymap.input(event, can) + _command: function(can, msg, target) { can.onappend.input(can, {type: html.TEXT, icon: icon.TERMINAL, name: ice.CMD, onkeydown: function(event) { can.onkeymap.input(event, can) function close() { can.ui.cli && can.ui.cli.onaction.close() } if (event.key == code.ESCAPE) { return close() } if (event.key != code.ENTER) { return } close(); switch (event.target.value) { case cli.CLEAR: diff --git a/panel/header.css b/panel/header.css index 588c7ade..9c5f4816 100644 --- a/panel/header.css +++ b/panel/header.css @@ -5,7 +5,7 @@ fieldset.Header>div.output div.state { float:right; } fieldset.Header>div.output div.state.avatar { padding:0; } fieldset.Header>div.output div.state.avatar>img { height:48px; } fieldset.Header>div.output div.search.title { padding:8px 5px; margin-left:5px; position:relative; } -fieldset.Header>div.output div.search>i { position:absolute; left:15px; top:15px; } -fieldset.Header>div.output div.search>input { padding-left:30px; margin-right:0; transition:all 1s; } +fieldset.Header>div.output div.search>i { padding:6px; position:absolute; } +fieldset.Header>div.output div.search>input { padding-left:30px; transition:all 1s; } fieldset.Header>div.output div.search>input:focus { width:320px; transition:all 0.5s; } -fieldset.Header>div.output div.search>span.delete { margin-left:-20px; margin-top:5px; } +fieldset.Header>div.output div.search>span.delete { padding:5px 10px; } diff --git a/panel/header.js b/panel/header.js index 29656211..a50ee039 100644 --- a/panel/header.js +++ b/panel/header.js @@ -19,7 +19,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { // window.parent == window? can.onlayout.background(can, can.onexport.background(can)): can.page.style(can, document.body, html.BACKGROUND_COLOR, "transparent") }, _search: function(can, msg, target) { - can._search = can.onappend.input(can, {type: html.TEXT, icon: "bi bi-search", name: mdb.SEARCH, value: can.misc.Search(can, "_search"), onkeydown: function(event) { can.onkeymap.input(event, can) + can._search = can.onappend.input(can, {type: html.TEXT, icon: icon.SEARCH, name: mdb.SEARCH, value: can.misc.Search(can, "_search"), onkeydown: function(event) { can.onkeymap.input(event, can) event.key == code.ENTER && can.onengine.signal(can, chat.ONOPENSEARCH, can.request(event, {type: mdb.FOREACH, word: event.target.value||""})) }}, "", target, [chat.TITLE]) can.onimport.menu(can, mdb.SEARCH, function() { can.onengine.signal(can, chat.ONOPENSEARCH, can.request(event, {type: mdb.FOREACH, word: can._search.value||""})) }) diff --git a/panel/river.js b/panel/river.js index a5c873e6..3ab00a21 100644 --- a/panel/river.js +++ b/panel/river.js @@ -19,7 +19,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { can.onimport._main(can, msg }) Volcanos(chat.ONACTION, {list: [mdb.CREATE, web.SHARE, web.REFRESH], _init: function(can) { can.onmotion.hidden(can) }, onlogin: function(can, msg) { can.run(can.request({}, {_method: web.GET}), [], function(msg) { if (msg.Option(ice.MSG_RIVER)) { return can.page.Remove(can, can._target) } - can.onimport._init(can, msg); if (can.user.isMobile || can.user.isExtension) { return } + can.onimport._init(can, msg); if (can.user.isMobile || can.user.isExtension) { return can.page.ClassList.add(can, can._target, ice.AUTO) } can.onmotion.toggle(can, can._target, true), can.onlayout._init(can) }) }, onaction_touch: function(can, msg) { can.user.isMobile && can.onmotion.hidden(can) }, diff --git a/panel/search.css b/panel/search.css index c505e57c..71a06984 100644 --- a/panel/search.css +++ b/panel/search.css @@ -1,4 +1,3 @@ fieldset.Search { padding:10px; position:fixed; left:230px; top:48px; } fieldset.Search>div.output>div.profile { max-width:unset; } fieldset.Search>div.output table.content { width:100%; } -fieldset.Search>div.output>div.content a { color:silver; } diff --git a/plugin/local/code/inner.css b/plugin/local/code/inner.css index 00b4f33f..10a7e0fe 100644 --- a/plugin/local/code/inner.css +++ b/plugin/local/code/inner.css @@ -1,7 +1,3 @@ -fieldset.inner>form.option input[name=path] { width:80px; } -fieldset.inner>form.option input[name=file] { width:160px; } -fieldset.inner:not(.output)>div.output { overflow:hidden; } -fieldset.inner>div.output div.content { position:relative; } fieldset.inner>div.output div.content td.text { height:20px; } fieldset.inner>div.output div.content td.text span.comment { color:var(--code-comment); } fieldset.inner>div.output div.content td.text span.keyword { color:var(--code-keyword); box-shadow:var(--box-shadow); } @@ -11,87 +7,61 @@ fieldset.inner>div.output div.content td.text span.function { color:var(--code-f fieldset.inner>div.output div.content td.text span.constant { color:var(--code-constant); } fieldset.inner>div.output div.content td.text span.string { color:var(--code-string); box-shadow:var(--box-shadow); } fieldset.inner>div.output div.content td.text span.object { color:var(--code-object); } -fieldset.inner>div.output>div.project { width:230px; flex:0 0 230px; box-shadow:var(--box-shadow); } -body:not(.windows) fieldset.inner>div.output>div.project * { font-size:14px; font-family:monospace; outline:none; } -fieldset.inner>div.output>div.project div.action { width:100%; } -fieldset.inner>div.output>div.project input[type=text] { box-shadow:none; } -fieldset.inner>div.output>div.project div.zone>div.item span.icon { font-size:20px; line-height:16px; padding:0 5px; float:right; display:none; } -fieldset.inner>div.output>div.project div.zone:hover>div.item span.icon { display:block; } -fieldset.inner>div.output>div.project>div.zone>div.item span.icon { font-size:22px; line-height:32px; } -fieldset.inner>div.output>div.project>div.zone div.action>div.item { padding-right:0; width:100%; } -fieldset.inner>div.output>div.project>div.zone div.action>div.item>input { width:calc(100% - 5px); } -fieldset.inner>div.output>div.project>div.zone div.action>div.item>span.delete { right:5px; font-size:20px; } -fieldset.inner>div.output>div.project>div.zone fieldset.plug { position:static; } -fieldset.inner>div.output>div.layout>div.tabs { font-size:14px; display:none; } -fieldset.inner>div.output>div.layout>div.path { font-size:14px; display:none; } -fieldset.inner>div.output>div.layout>div.layout>div.content * { font-family:monospace; font-size:14px; outline:none; } -fieldset.inner>div.output>div.layout>div.layout>div.profile { max-width:unset; box-shadow:var(--box-shadow); } -fieldset.inner>div.output>div.layout>div.layout>div.profile h1 { text-align:left; padding:10px 0; margin:20px 0; border-bottom:var(--box-border); } -fieldset.inner>div.output>div.layout>div.layout>div.profile h2 { padding:10px 0; margin:20px 0; border-bottom:var(--box-border); } -fieldset.inner>div.output>div.layout>div.layout>div.profile pre>code { border-left:blue solid 5px; padding-left:10px; display:block; } -fieldset.inner>div.output>div.layout>div.layout>div.profile>div.code { white-space:unset; padding:20px; } -fieldset.inner>div.output>div.layout>div.display h1 { text-align:left; padding:10px 0; margin:20px 0; border-bottom:var(--box-border); } -fieldset.inner>div.output>div.layout>div.display h2 { padding:10px 0; margin:20px 0; border-bottom:var(--box-border); } -fieldset.inner>div.output>div.layout>div.display pre>code { border-left:blue solid 5px; padding-left:10px; display:block; } -fieldset.inner>div.output>div.layout>div.display>div.code { white-space:unset; padding:20px; } -fieldset.inner>div.output>div.layout>div.layout>iframe.profile { border-left:var(--box-border); } -fieldset.inner>div.output>div.layout>div.layout>div.profile div.status>div { padding:5px; float:left; } -fieldset.inner>div.output>div.layout>div.display div.status>div { padding:5px; float:left; } -fieldset.inner>div.output>div.layout>div.display { box-shadow:var(--box-shadow); } fieldset.inner>div.output>div.project>div.zone>div.item { font-style:italic; font-weight:bold; line-height:32px; } -fieldset.inner>div.output>div.project>div.zone>div.item>span.icon { font-style:normal; font-weight:normal; } -fieldset.inner.cmd>div.output>div.layout>div.tabs { height:38px; display:block; overflow:hidden; background-color:var(--plugin-bg-color); } +fieldset.inner>div.output>div.project div.zone>div.item span.icon { font-style:normal; font-weight:normal; } +fieldset.inner>div.output>div.project div.zone>div.item span.icon { font-size:22px; line-height:26px; padding:0 5px; float:right; display:none; } +fieldset.inner>div.output>div.project div.zone:hover>div.item span.icon { display:block; } +fieldset.inner>div.output>div.project div.zone div.action { width:100%; } +fieldset.inner>div.output>div.project div.zone div.action>div.item { padding-right:0; width:100%; } +fieldset.inner>div.output>div.project div.zone div.action>div.item>i { position:absolute; padding:5px; } +fieldset.inner>div.output>div.project div.zone div.action>div.item>input { padding-left:25px; width:100%; } +fieldset.inner>div.output>div.project div.zone div.action>div.item>span.delete { font-size:20px; } +fieldset.inner>div.output>div.project { box-shadow:var(--box-shadow); } +fieldset.inner>div.output>div.layout>div.display { box-shadow:var(--box-shadow); } +fieldset.inner>div.output>div.layout>div.layout>div.profile { box-shadow:var(--box-shadow); } +fieldset.inner>div.output>div.project * { font-family:var(--code-font-family); font-size:var(--code-font-size); } +fieldset.inner>div.output>div.layout>div.tabs { font-family:var(--code-font-family); font-size:var(--code-font-size); display:none; } +fieldset.inner>div.output>div.layout>div.tabs>div.tabs { padding-right:0; box-shadow:var(--box-shadow); margin-left:5px; } +fieldset.inner>div.output>div.layout>div.tabs>div.tabs:hover { background-color:var(--output-bg-color); border-top-left-radius:10px; border-top-right-radius:10px; } +fieldset.inner>div.output>div.layout>div.tabs>div.tabs.select { background-color:var(--output-bg-color); border-top-left-radius:10px; border-top-right-radius:10px; border-bottom:lightgray solid 2px; } +fieldset.inner>div.output>div.layout>div.path { font-family:var(--code-font-family); font-size:var(--code-font-size); display:none; } +fieldset.inner>div.output>div.layout>div.layout>iframe.profile { border-left:var(--box-border); } +fieldset.inner>div.output>div.layout>div.layout>div.content * { font-family:var(--code-font-family); font-size:var(--code-font-size); } +fieldset.inner>div.output>div.layout>div.layout>div.profile h1 { text-align:left; padding:10px 0; border-bottom:var(--box-border); margin:20px 0; } +fieldset.inner>div.output>div.layout>div.layout>div.profile h2 { padding:10px 0; border-bottom:var(--box-border); margin:20px 0; } +fieldset.inner>div.output>div.layout>div.layout>div.profile pre>code { padding-left:10px; border-left:var(--code-border-color) solid 5px; display:block; } +fieldset.inner>div.output>div.layout>div.layout>div.profile div.code { white-space:unset; padding:20px; } +fieldset.inner>div.output>div.layout>div.layout>div.profile div.status>div { padding:5px; float:left; } +fieldset.inner>div.output>div.layout>div.display h1 { text-align:left; padding:10px 0; border-bottom:var(--box-border); margin:20px 0; } +fieldset.inner>div.output>div.layout>div.display h2 { padding:10px 0; border-bottom:var(--box-border); margin:20px 0; } +fieldset.inner>div.output>div.layout>div.display pre>code { padding-left:10px; border-left:var(--code-border-color) solid 5px; display:block; } +fieldset.inner>div.output>div.layout>div.display div.code { white-space:unset; padding:20px; } +fieldset.inner>div.output>div.layout>div.display div.status>div { padding:5px; float:left; } +fieldset.inner>div.output>div.layout>div.display div.status { position:sticky; bottom:0; } +fieldset.inner.cmd>div.output>div.layout>div.tabs { height:38px; display:block; overflow:hidden; } fieldset.inner.cmd>div.output>div.layout>div.tabs.hide { display:none; } fieldset.inner.cmd>div.output>div.layout>div.tabs>div { padding:10px; height:38px; float:left; } -fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs { padding-right:0; margin-left:5px; box-shadow:var(--box-shadow); } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.icon { font-size:26px; line-height:32px; padding:2px 5px; position:sticky; top:0; } -fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs.select { background-color:var(--output-bg-color); border-top-left-radius:10px; border-top-right-radius:10px; } -fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs:hover { background-color:var(--output-bg-color); border-top-left-radius:10px; border-top-right-radius:10px; } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs>span { font-style:italic; } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.usernick { float:right; position:sticky; top:0; } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.avatar { padding:0; height:38px; float:right; position:sticky; top:0; } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.avatar>img { height:38px; } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.time { float:right; position:sticky; top:0; } -fieldset.inner.cmd>div.output>div.layout>div.path { font-style:italic; padding:5px; display:block; box-shadow:var(--box-shadow); cursor:pointer; } +fieldset.inner.cmd>div.output>div.layout>div.path { font-style:italic; padding:5px; box-shadow:var(--box-shadow); display:block; cursor:pointer; } fieldset.inner.cmd>div.output>div.layout>div.path.hide { display:none; } fieldset.inner.cmd>div.output>div.layout>div.path>span:hover { background-color:var(--hover-bg-color); } fieldset.inner.cmd>div.output>div.layout>div.path span.func { padding:5px 10px; margin-left:20px; } fieldset.inner.cmd>div.output>div.layout>div.path span.mode { padding:5px 10px; margin-left:20px; } fieldset.inner.cmd>div.output>div.layout>div.path span.view { font-size:22px; padding:0 5px; margin-top:-5px; float:right; } fieldset.inner.cmd>div.output>div.layout>fieldset.plug { bottom:32px; } -fieldset.inner.cmd>div.output>div.layout>div.plug { height:32px; clear:both; position:fixed; bottom:0; right:0; } -fieldset.inner.cmd>div.output>div.layout>div.plug>legend { font-size:1rem; padding:0 10px; float:right; } -fieldset.inner.cmd>div.output>div.layout>div.display>div.status { position:sticky; bottom:0; } -fieldset.inner.cmd>legend { display:none; } -fieldset.inner.cmd>form.option { display:none; } -fieldset.inner.cmd>div.action { display:none; } -fieldset.inner.cmd>div.output { overflow:hidden; } -fieldset.inner.cmd>div.status { display:none; } -body.dark fieldset.inner>div.output div.content tr.line:hover { background-color:unset; } -body.white fieldset.inner.cmd>div.output { background-color:aliceblue; } -body.white fieldset.inner.cmd>div.output div.content { background-color:white; } -body.white fieldset.inner.cmd>div.output>div.layout>div.tabs div:not(.select):not(:hover) { background-color:white; } -body.white fieldset.inner.cmd>div.output>div.layout>div.path { background-color:white; } -body.white fieldset.inner>div.output div.content tr:hover { background-color:aliceblue; } -body.white fieldset.inner>div.output div.content tr.select td.line { background-color:steelblue; color:white; } -body.white fieldset.inner.cmd>div.output { background-color:transparent; } -body.white fieldset.inner.cmd>div.output div.content { background-color:transparent; } -body.white fieldset.inner.cmd>div.output>div.layout>div.path { background-color:transparent; } -body.mobile fieldset.inner>form.option input[name=file] { width:90px; } -body.mobile fieldset.word fieldset.inner>form.option input[type=text] { display:none; } -body.windows fieldset.inner>div.output { overflow:hidden; } -body.windows fieldset.inner>div.output>div.layout>div.layout>div.profile { overflow:hidden; } -body.zh fieldset.inner>div.output>div.project>div.zone>div.item { letter-spacing:10px; border-top:var(--box-border); } +fieldset.inner.cmd>div.output>div.layout>div.plug { height:32px; position:fixed; right:0; bottom:0; } +fieldset.inner.cmd>div.output>div.layout>div.plug>legend { font-size:1rem; font-style:italic; padding:0 10px; float:right; } div.path span.item { padding:5px; } -div.carte.path.float { font-size:14px; border-radius:0; box-shadow:var(--box-shadow); } div.carte.path.float div.item { padding:5px; } -div.carte.cmd.float { font-size:14px; border-radius:0; } div.cmd.path.float div.item { padding:5px; } +div.carte.path.float { font-size:var(--code-font-size); } div.carte.path.float div.item { padding:5px; } +div.carte.cmd.float { font-size:var(--code-font-size); } div.carte.cmd.float div.item { padding:5px; } div.vimer.open.float td:first-child { display:none; } div.layout.flex>input.current { clear:both; } tr.line>td.line { user-select:none; } tr.line>td.line { text-align:right; padding:0 10px; position:sticky; left:0; } -tr.line>td.text { line-height:20px; white-space:pre; padding-left:10px; width:100%; cursor:text; } -tr.line.delete { background-color:#ff000036; color:gray; } -tr.line.insert { background-color:#00800036; } -div.scrollbar.insert { background-color:#00800036; width:30px; visibility:visible; } -div.scrollbar.delete { background-color:#ff000036; width:30px; visibility:visible; } -fieldset.inner>div.output>div.project div.item.modify { background-color:#00800036; } +tr.line>td.text { white-space:pre; line-height:20px; padding-left:10px; width:100%; } +tr.line:hover { background-color:var(--hover-bg-color); } diff --git a/plugin/local/code/vimer.css b/plugin/local/code/vimer.css index 5eebc164..aefe8e53 100644 --- a/plugin/local/code/vimer.css +++ b/plugin/local/code/vimer.css @@ -1,22 +1,17 @@ -fieldset.vimer>div.output>div.project>div.zone.space div.item.stop { color:gray; } +fieldset.vimer>div.output>div.layout>div.layout>div.layout div.content { border-left:var(--box-border); border-top:var(--box-border); } fieldset.inner>div.output>div.layout>div.layout>div.content div.tips { display:none; } -fieldset.vimer>div.output>div.layout>div.layout div.content div.tips { color:gray; font-style:italic; position:absolute; top:0; right:0; } +fieldset.vimer>div.output>div.layout>div.layout div.content div.tips { color:var(--disable-fg-color); font-style:italic; position:absolute; top:0; right:0; } fieldset.vimer>div.output>div.layout>div.layout div.content input.current { background-color:transparent; color:transparent; padding-left:10px; height:20px; position:absolute; } fieldset.vimer>div.output>div.layout>div.layout div.content div.complete { background-color:unset; padding-top:0; display:none; position:absolute; height:1px; overflow:visible; } fieldset.vimer>div.output>div.layout>div.layout div.content div.complete div.prefix { color:transparent; white-space:pre; float:left; } fieldset.vimer>div.output>div.layout>div.layout div.content div.complete table.content thead { display:none; } -fieldset.vimer>div.output>div.layout>div.layout div.content div.complete table.content { padding-left:5px; width:unset; max-width:600px; display:block; } -fieldset.vimer>div.output>div.layout>div.layout>div.layout div.content { border-left:var(--box-border); border-top:var(--box-border); } -fieldset.vimer>div.output>div.layout>div.layout div.content tr.line:hover { background-color:var(--hover-bg-color); } -fieldset.vimer>div.output.plugin>div.layout>div.tabs>div.tabs.select { border-top:transparent solid 2px; } -fieldset.vimer>div.output.normal>div.layout>div.tabs>div.tabs.select { border-top:var(--notice-bg-color) solid 2px; } -fieldset.vimer>div.output.insert>div.layout>div.tabs>div.tabs.select { border-top:var(--danger-bg-color) solid 2px; } -fieldset.vimer>div.output.normal>div.layout>div.path span.mode.normal { color:var(--notice-bg-color); } -fieldset.vimer>div.output.insert>div.layout>div.path span.mode.insert { color:var(--danger-bg-color); } -fieldset.vimer>div.output>div.layout>div.layout div.content.normal tr.line.select>td.line { background-color:var(--notice-bg-color); color:white; } -fieldset.vimer>div.output>div.layout>div.layout div.content.insert tr.line.select>td.line { background-color:var(--danger-bg-color); color:white; } +fieldset.vimer>div.output>div.layout>div.layout div.content div.complete table.content { padding-left:5px; width:unset; max-width:600px; display:block; box-shadow:var(--box-shadow); } +fieldset.vimer>div.output>div.layout>div.layout div.content.insert div.complete:not(.hide) { display:block; top:unset; } fieldset.vimer>div.output>div.layout>div.layout div.content.normal input.current { caret-color:var(--notice-bg-color); border:var(--notice-bg-color) solid 1px; } fieldset.vimer>div.output>div.layout>div.layout div.content.insert input.current { caret-color:var(--danger-bg-color); border:var(--danger-bg-color) solid 1px; } -fieldset.vimer>div.output>div.layout>div.layout div.content.insert div.complete:not(.hide) { display:block; top:unset; } -body.black fieldset.vimer>div.output>div.layout>div.layout div.content div.complete table.content { background-color:#061c3ceb; } -body.white fieldset.vimer>div.output>div.layout>div.layout div.content div.complete table.content { background-color:aliceblue; } +fieldset.vimer>div.output>div.layout>div.layout div.content.normal tr.line.select>td.line { background-color:var(--notice-bg-color); color:white; } +fieldset.vimer>div.output>div.layout>div.layout div.content.insert tr.line.select>td.line { background-color:var(--danger-bg-color); color:white; } +fieldset.vimer>div.output.normal>div.layout>div.tabs>div.tabs.select { border-bottom:var(--notice-bg-color) solid 2px; } +fieldset.vimer>div.output.insert>div.layout>div.tabs>div.tabs.select { border-bottom:var(--danger-bg-color) solid 2px; } +fieldset.vimer>div.output.normal>div.layout>div.path span.mode.normal { color:var(--notice-bg-color); } +fieldset.vimer>div.output.insert>div.layout>div.path span.mode.insert { color:var(--danger-bg-color); } diff --git a/plugin/table.js b/plugin/table.js index 0be694cc..57ef1ea8 100644 --- a/plugin/table.js +++ b/plugin/table.js @@ -57,7 +57,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.onmotion.clear( }): can.onmotion.clearCarte(can) }}, {view: html.ACTION, _init: function(target) { zone._action = target - can.onappend._action(can, [{type: html.TEXT, name: mdb.SEARCH, _init: function(target) { zone._search = target }, onkeyup: function(event) { + can.onappend._action(can, [{icon: icon.SEARCH, type: html.TEXT, name: mdb.SEARCH, _init: function(target) { zone._search = target }, onkeyup: function(event) { if (event.target.value == "") { can.page.Select(can, zone._target, html.DIV_EXPAND, function(target) { can.page.ClassList.del(can, target, cli.OPEN) }) } can.page.Select(can, zone._target, html.DIV_LIST, function(item) { can.onmotion.toggle(can, item, event.target.value != "") }) can.onmotion.delayOnce(can, function() { can.onkeymap.selectItems(event, can, zone._target) }, event.target.value.length<3? 500: 150) @@ -99,7 +99,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.onmotion.clear( }) }); return node }, filter: function(can, target) { - return can.onappend.input(can, {type: html.TEXT, name: web.FILTER, placeholder: "search in n items", onkeydown: function() {}, onkeyup: function(event) { + return can.onappend.input(can, {icon: icon.SEARCH, type: html.TEXT, name: web.FILTER, placeholder: "search in n items", onkeydown: function() {}, onkeyup: function(event) { if (event.key == code.ENTER) { can.page.Select(can, target, html.DIV_ITEM+":not(.hide)", function(target) { target.click() }) } else if (event.key == code.ESCAPE) { event.currentTarget.value = "", event.currentTarget.blur()