From 82f7917d5869b77423429095022ea4802fc55666 Mon Sep 17 00:00:00 2001 From: shy Date: Thu, 23 Nov 2023 23:02:06 +0800 Subject: [PATCH] opt theme --- const.js | 4 +- frame.js | 24 +- index.css | 540 +++++++++++++++++------------------- lib/page.js | 4 +- lib/user.js | 10 +- panel/action.css | 8 +- panel/action.js | 8 +- panel/footer.css | 12 +- panel/header.css | 17 +- panel/header.js | 14 +- panel/river.css | 14 +- panel/search.css | 2 +- plugin/local/code/inner.css | 4 +- plugin/local/mall/goods.css | 4 +- plugin/local/wiki/word.css | 32 +-- 15 files changed, 342 insertions(+), 355 deletions(-) diff --git a/const.js b/const.js index ae50d38d..695e38a9 100644 --- a/const.js +++ b/const.js @@ -257,7 +257,9 @@ var http = { GET: "GET", PUT: "PUT", POST: "POST", DELETE: "DELETE", Accept: "Accept", ContentType: "Content-Type", ApplicationJSON: "application/json", ApplicationFORM: "application/x-www-form-urlencoded", } -var html = {PLUGIN_MARGIN: 10, PLUGIN_PADDING: 10, ACTION_MARGIN: 200, ACTION_HEIGHT: 32, STATUS_HEIGHT: 32, +var html = { + RIVER_MARGIN: 80, + PLUGIN_MARGIN: 10, PLUGIN_PADDING: 10, ACTION_MARGIN: 200, ACTION_HEIGHT: 32, STATUS_HEIGHT: 32, FIELDSET: "fieldset", LEGEND: "legend", OPTION: "option", ACTION: "action", OUTPUT: "output", STATUS: "status", OPTION_ARGS: "select.args,input.args,textarea.args", INPUT_ARGS: "input.args,textarea.args", INPUT_BUTTON: "input[type=button]", INPUT_FILE: "input[type=file]", FORM_OPTION: "form.option", DIV_ACTION: "div.action", DIV_OUTPUT: "div.output", DIV_STATUS: "div.status", diff --git a/frame.js b/frame.js index 111c52e3..66aabb08 100644 --- a/frame.js +++ b/frame.js @@ -245,8 +245,10 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) { can.core.Item(can.Action(), function(key) { var value = can.misc.sessionStorage(can, [can.ConfIndex(), ctx.ACTION, key]); value && can.Action(key, value[0]) }) } can.onappend.style(sub, sub.Conf(ctx.STYLE)), can.onmotion.story.auto(can, can._output) - if (can.onimport.size) { if (can.isFullMode() || can.isCmdMode()) { can.ConfHeight(can.page.height()), can.ConfWidth(can.page.width()) } - can.onimport.size(can, can.ConfHeight(), can.ConfWidth(), can.Conf("_auto"), can.Mode()), can.onexport.output(sub, msg) + if (can.onimport.size) { + // if (can.isFullMode() || can.isCmdMode()) { can.ConfHeight(can.page.height()), can.ConfWidth(can.page.width()) } + can.onimport.size(can, can.ConfHeight(), can.ConfWidth(), can.Conf("_auto"), can.Mode()) + can.onexport.output(sub, msg) can.isCmdMode() && can.page.style(can, can._output, html.HEIGHT, sub.ConfHeight(), html.WIDTH, sub.ConfWidth()) } can.base.isFunc(cb) && cb(msg) }, target: output}) @@ -464,7 +466,8 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) { if (item.index) { item._index = count++, ui.size[item._index] = item.height||item.width can.onmotion.hidden(can, target) can.onappend.plugin(can, item, function(sub) { can._plugins = (can._plugins||[]).concat([sub]) - item.layout = function(height, width) { sub.onimport.size(sub, height, width) } + item.layout = function(height, width) { + sub.onimport.size(sub, height, width) } sub.onexport._output = function() { can.onmotion.toggle(can, target, true) } }, target, ui[item._index] = can.onappend.field(can, item.type, {index: item.index, name: item.index.split(nfs.PT).pop(), help: item.help}, target)._target) } else { can.page.Append(can, target, [item]) } @@ -504,7 +507,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) { can.runAction(can.request({}, {_method: http.GET, pod: meta.space})._caller(), ctx.COMMAND, [meta.index], function(msg) { msg.Table(function(value) { can.onappend._plugin(can, value, meta, _cb, target, field) })}); return res }, _plugin: function(can, value, meta, cb, target, field) { can.base.Copy(meta, value, true) - meta.type = meta.type||chat.STORY, meta.name = meta.name||value.meta&&value.meta.name||"", meta.help = meta.help||value.help||"", meta.height = meta.height||can.ConfHeight()-2*html.ACTION_HEIGHT, meta.width = meta.width||can.ConfWidth() + meta.type = meta.type||chat.STORY, meta.name = meta.name||value.meta&&value.meta.name||"", meta.help = meta.help||value.help||"", meta.height = meta.height||can.ConfHeight(), meta.width = meta.width||can.ConfWidth() meta.inputs = can.base.getValid(meta.inputs, can.base.Obj(value.list))||[], meta.feature = can.base.getValid(meta.feature, can.base.Obj(value.meta))||{} meta.args = can.base.getValid(can.base.Obj(meta.args), can.base.Obj(meta.arg), can.base.Obj(value.args), can.base.Obj(value.arg))||[] can.onappend._init(can, meta, [chat.PLUGIN_STATE_JS], function(sub, skip) { @@ -545,7 +548,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) { Volcanos(chat.ONLAYOUT, {_init: function(can, target) { target = target||can._root._target; var height = can.page.height(), width = can.page.width() can.page.SelectChild(can, target, can.page.Keys(html.FIELDSET_HEAD, html.FIELDSET_FOOT), function(field) { height -= field.offsetHeight }) can.page.SelectChild(can, target, html.FIELDSET_LEFT, function(field) { can.user.isMobile || can.page.isDisplay(field) && (width -= field.offsetWidth) - var h = height; can.page.SelectChild(can, field, html.DIV_ACTION, function(action) { h -= action.offsetHeight }), can.user.isMobile || (h -= 160-32) + var h = height; can.page.SelectChild(can, field, html.DIV_ACTION, function(action) { h -= action.offsetHeight }), can.user.isMobile || (h -= 2*html.RIVER_MARGIN-html.ACTION_HEIGHT) can.page.SelectChild(can, field, html.DIV_OUTPUT, function(output) { can.page.styleHeight(can, output, h) }) }) can.page.SelectChild(can, target, html.FIELDSET_MAIN, function(field) { @@ -555,11 +558,11 @@ Volcanos(chat.ONLAYOUT, {_init: function(can, target) { target = target||can._ro }), can.onengine.signal(can, chat.ONSIZE, can.request({}, {height: height, width: width})) can.user.isMobile && can.user.isLandscape() || can.page.style(can, document.body, kit.Dict(html.OVERFLOW, html.HIDDEN)) }, - expand: function(can, target, width, height) { var n = parseInt(target.offsetWidth/(width+20)); width = target.offsetWidth/n - 20 - if (width+20 >= target.offsetWidth) { n = 1, width = target.offsetWidth - 20 } + expand: function(can, target, width, height) { var margin = 2*html.PLUGIN_PADDING + var n = parseInt(target.offsetWidth/(width+margin)); width = target.offsetWidth/n - margin + if (width+margin >= target.offsetWidth) { n = 1, width = target.offsetWidth - margin } can.page.SelectChild(can, target, html.DIV_ITEM, function(target) { - can.page.styleWidth(can, target, width) - height = can.page.styleHeight(can, target, height) + height = can.page.styleHeight(can, target, height), can.page.styleWidth(can, target, width) }) }, background: function(can, url, target) { can.page.style(can, target||can._root._target, "background-image", url == "" || url == "void"? "": 'url("'+url+'")') }, @@ -593,7 +596,8 @@ Volcanos(chat.ONLAYOUT, {_init: function(can, target) { target = target||can._ro if (!event || !event.target) { return {} } target = target||can._fields||can._target var rect = event.target == document.body? {left: can.page.width()/2, top: can.page.height()/2, right: can.page.width()/2, bottom: can.page.height()/2}: (event.currentTarget||event.target).getBoundingClientRect() var layout = right? {left: rect.right, top: rect.top}: {left: rect.left, top: rect.bottom} - can.getActionSize(function(left, top, width, height) { left = left||0, top = top||0, height = can.base.Max(height, can.page.height()-top) + can.getActionSize(function(left, top, width, height) { + left = left||0, top = top||0, height = can.base.Max(height, can.page.height()-top) can.page.style(can, target, html.MAX_HEIGHT, top+height-layout.top) can.page.style(can, target, html.MAX_WIDTH, left+width-layout.left) }); diff --git a/index.css b/index.css index 0f8ca2f5..472d5c86 100644 --- a/index.css +++ b/index.css @@ -1,59 +1,47 @@ body { --body-bg-color:black; --body-fg-color:silver; - --danger-bg-color:red; --danger-fg-color:white; - --notice-bg-color:blue; --notice-fg-color:white; - --create-bg-color:blue; --create-fg-color:white; + --danger-bg-color:red; --danger-fg-color:var(--hover-fg-color); + --notice-bg-color:blue; --notice-fg-color:var(--hover-fg-color); + --create-bg-color:var(--notice-bg-color); --create-fg-color:var(--hover-fg-color); --progress-bg-color:red; --disable-fg-color:gray; --hover-bg-color:#5066b945; --hover-fg-color:white; - --box-border:#404141 solid 1px; - --box-notice:var(--notice-bg-color) solid 1px; - --box-shadow:var(--body-fg-color) 2px 2px 8px; + --box-border:#404141 solid 1px; --box-shadow:var(--body-fg-color) 2px 2px 8px; --box-notice:var(--notice-bg-color) solid 1px; - --legend-bg-color:var(--body-bg-color); - --input-fg-color: var(--body-fg-color); - --input-border:var(--box-border); - --output-bg-color: var(--input-bg-color); - --status-border:var(--box-border); - --tr-hover-bg-color:var(--hover-bg-color); - --th-bg-color:var(--plugin-bg-color); - --th-fg-color:var(--plugin-fg-color); - --td-hover-bg-color:var(--hover-bg-color); - --panel-bg-color:var(--panel-output-bg-color); - --panel-fg-color:var(--panel-output-fg-color); - --panel-output-fg-color: var(--body-fg-color); - --panel-output-bg-color:var(--input-bg-color); - --panel-hover-bg-color:var(--hover-bg-color); - --panel-hover-fg-color:var(--hover-fg-color); - --plugin-border-color:var(--box-border); - --plugin-bg-color:var(--legend-bg-color); - --plugin-fg-color:var(--body-fg-color); - --float-bg-color:var(--plugin-bg-color); - --float-fg-color:var(--plugin-fg-color); + --plugin-bg-color:var(--body-bg-color); --plugin-fg-color:var(--body-fg-color); --plugin-border-color:var(--box-border); + --legend-bg-color:var(--plugin-bg-color); + --input-bg-color:var(--body-bg-color); --input-fg-color: var(--body-fg-color); --input-border:var(--box-border); + --output-bg-color:var(--input-bg-color); --output-fg-color:var(--input-fg-color); --status-border:var(--box-border); + --th-bg-color:var(--plugin-bg-color); --th-fg-color:var(--plugin-fg-color); + --tr-hover-bg-color:var(--hover-bg-color); --td-hover-bg-color:var(--hover-bg-color); + --panel-hover-bg-color:var(--hover-bg-color); --panel-hover-fg-color:var(--hover-fg-color); + --panel-output-bg-color:var(--panel-bg-color); --panel-output-fg-color:var(--panel-fg-color); + --panel-input-bg-color:var(--panel-bg-color); --panel-input-fg-color:var(--panel-fg-color); + --panel-bg-color:var(--plugin-bg-color); --panel-fg-color:var(--plugin-fg-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: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; - --code-font-size:14px; --svg-font-size:24px; --status-font-size:12px; - --code-font-family:monospace; --svg-stroke-width:1; --desktop-icon-size:80px; + --code-comment:green; --code-keyword:royalblue; + --code-function:lightgreen; --code-constant:gray; --code-string:orange; + --code-object:silver; --code-datatype:lavender; --code-package:blue; + --code-font-family:monospace; --svg-stroke-width:1; + --code-font-size:14px; --svg-font-size:24px; --status-font-size:12px; + --body-font-size:16px; --legend-font-size:20px; - --header-height:48px; --footer-height:32px; --action-height:32px; --status-height:32px; - --river-width:280px; --input-width:120px; --project-width:230px; - --plugin-margin:10px; --action-margin:200px; --button-margin:10px; - --plugin-padding:10px; --input-padding:10px; --table-padding:5px; - --plugin-radius:10px; --input-radius:5px; --button-radius:5px; + --legend-padding:20px; --title-margin:var(--legend-padding); --river-margin:80px; + --textarea-height:96px; --qrcode-height:320px; --iframe-height:420px; + --action-height:32px; --status-height:var(--action-height); --footer-height:var(--action-height); --header-height:48px; + --project-width:230px; --river-width:var(--project-width); --input-width:120px; --button-width:60px; + --plugin-margin:var(--plugin-padding); --button-margin:var(--button-padding); --input-margin:var(--input-padding); --action-margin:200px; --desktop-icon-size:80px; + --plugin-padding:10px; --button-padding:var(--plugin-padding); --input-padding:5px; --table-padding:var(--button-padding); + --plugin-radius:var(--plugin-padding); --button-radius:var(--input-padding); } body.width1 { /* 320-640 手机竖屏 */ - --river-width:230px; --input-width:80px; - --plugin-margin:0; --button-margin:5px; - --plugin-padding:10px; --input-padding:5px; --table-padding:5px; + --footer-height:60px; --input-width:80px; + --river-margin:0; --plugin-margin:0; --button-margin:5px; --svg-font-size:13px; } body.width2 { /* 640-960 手机横屏 平板竖屏 笔记本调试 */ - --river-width:230px; - --plugin-margin:10px; --button-margin:5px; - --plugin-padding:10px; --input-padding:10px; --table-padding:5px; } body.width3 { /* 960-1280 平板横屏 */ @@ -65,62 +53,57 @@ body.width5 { /* 1600-1920 */ } body.width6 { /* 1920-2240 显示器 */ - --river-width:320px; --input-width:180px; - --plugin-margin:20px; --button-margin:20px; - --plugin-padding:20px; --input-padding:10px; --table-padding:20px; + --river-width:280px; --input-width:180px; + --plugin-padding:20px; } body.windows { --code-font-family:"Courier New"; } /* element */ * { tab-size:4; box-sizing:border-box; padding:0; border:0; margin:0; } -legend { padding:0 20px; } -select { padding:0 var(--input-padding); } -input:not([type=file]) { padding:0 var(--input-padding); } -input:not([type=button]) { border-radius:0; outline:none; width:var(--input-width); } -div.item.text.trans input:not([type=button]) { transition:all 1s; } -div.item.text.trans input:not([type=button]):focus { transition:all 0.5s; width:var(--river-width); } -body:not(.mobile) input[name=path] { width:160px; } -input[name=line] { width:60px !important; } -input[name=limit] { width:60px; } -input[name=offend] { width:80px; } -input[name=id] { width:60px; } -input[name=url] { width:320px; } -table.content.full { width:100%; } +legend { padding:0 var(--legend-padding); } +select { padding:0 var(--button-padding); } +input:not([type=file]) { padding:0 var(--button-padding); } +input:not([type=button]) { padding:0 var(--input-padding); width:var(--input-width); border-radius:0; outline:none; } +body:not(.mobile) input[name=path] { width:var(--project-width); } +input[name=line] { width:var(--button-width) !important; } +input[name=limit] { width:var(--button-width); } +input[name=offend] { width:var(--button-width); } +input[name=id] { width:var(--button-width); } +input[name=url] { width:var(--river-width); } +table.kcontent.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:var(--table-padding); box-shadow:var(--box-shadow); } table.content td { padding:var(--table-padding); } -table.content.detail td:first-child { width:80px; } +table.content.detail td:first-child { width:var(--input-width); } table.content.action th:last-child { position:sticky; right:2px; } table.content.action td:last-child { position:sticky; right:2px; text-align:center; } -table.content input:not(:last-child) { margin-right:var(--button-margin); } -table.content col.action { width:200px; } -table.content col.time { width:180px; } -table.content img[title^=http] { cursor:pointer; } 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; } +table.content col.action { width:var(--project); } +table.content col.time { width:180px; } +table.content input:not(:last-child) { margin-right:var(--button-margin); } +table.content img[title^=http] { cursor:pointer; } +h1 { text-align:center; margin:var(--title-margin) 0; } h2 { margin:var(--title-margin) 0; } h3 { margin:var(--title-margin) 0; } +hr, td.hr { border-bottom:var(--plugin-border-color) dashed 1px; margin:var(--input-margin); } +ol, ul { margin-left:var(--title-margin); } a { color:var(--body-fg-color); font-style:italic; } -p { margin:20px 0; } -kbd { font-family:var(--code-font-family); padding:0 5px; } -iframe { height:420px; width:100%; } +p { margin:var(--title-margin) 0; } +kbd { font-family:var(--code-font-family); padding:0 var(--input-padding); } +iframe { height:var(--iframe-height); width:100%; } /* fieldset */ fieldset>legend { box-shadow:var(--box-shadow); } -fieldset>legend>i { margin-right:5px; } fieldset>form.option>div.item:not(.icon) { margin-right:var(--button-margin); box-shadow:var(--box-shadow); } +fieldset>form.option>div.item.textarea { width:100%; height:var(--textarea-height); } fieldset>form.option>div.item.text.cmd { width:100%; } fieldset>form.option>div.item.text.cmd>input { background-color:var(--code-bg-color); color:var(--code-fg-color); width:100%; } -fieldset>form.option>div.item.textarea { width:100%; height:96px; } fieldset>form.option>div.item.select { border-radius:var(--button-radius); } -fieldset>form.option>div.item.select>input { min-width:80px; } +fieldset>form.option>div.item.select>input { min-width:var(--button-width); } fieldset>form.option>div.item.button { border-radius:var(--button-radius); } -fieldset>div.action>div.item { margin-right:var(--button-margin); box-shadow:var(--box-shadow); } -fieldset>div.action>div.item.select:not(.cmds) { border-radius:var(--button-radius); } -fieldset>div.action>div.item.select.cmds { border-bottom:var(--notice-bg-color) solid 2px; height:32px; } +fieldset>div.action>div.item { margin-right:var(--button-margin); box-shadow:var(--box-shadow); height:var(--action-height); } fieldset>div.action>div.item.button { border-radius:var(--button-radius); } +fieldset>div.action>div.item.select:not(.cmds) { border-radius:var(--button-radius); } +fieldset>div.action>div.item.select.cmds { border-bottom:var(--notice-bg-color) solid 2px; height:var(--action-height); } fieldset>div.output { width:100%; } fieldset>div.status { width:100%; } fieldset.input>legend { display:none; } @@ -129,7 +112,7 @@ fieldset.input.key div.output table.content { width:100%; } fieldset.input.key div.status { background-color:var(--plugin-bg-color); } 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.key.simple td { min-width:var(--button-width); } 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; border:var(--notice-bg-color) solid 1px; } @@ -142,9 +125,9 @@ fieldset.input.date>div.output td span.lunar { font-size:8px; display:block; cle 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; } -fieldset.input.icon img { height:80px; width:80px; } +fieldset.input.icon img { height:var(--desktop-icon-size); width:var(--desktop-icon-size); } /* float */ -body div.float { padding:5px; box-shadow:var(--box-shadow); } +body div.float { padding:var(--plugin-padding); box-shadow:var(--box-shadow); } body>div.toast div.title { color:var(--notice-bg-color); float:left; } body>div.toast div.delete { color:var(--notice-bg-color); float:right; cursor:pointer; } body>div.toast div.delete:hover { background-color:var(--hover-bg-color); } @@ -155,82 +138,82 @@ body>div.toast div.progress div.current { background-color:var(--progress-bg-col 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 input[name=filter] { margin:var(--input-margin); width:calc(100% - 10px); position:sticky; top:var(--input-margin); } +body>div.carte div.item { white-space:pre; padding:var(--input-padding) var(--button-padding); } 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 { padding:var(--plugin-padding); } body>div.input>legend { font-style:italic; width:100%; } -body>div.input input[name=cancel] { border:var(--danger-bg-color) solid 1px; } -body>div.input input[name=submit] { border:var(--notice-bg-color) solid 1px; } -body>div.input input[name=submit]:hover { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } -body>div.input input[name=cancel]:hover { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } -body>div.input td { padding:10px; } -body>div.input td:nth-child(2) { padding:10px 0;} +body>div.input td { padding:var(--table-padding); } +body>div.input td:nth-child(2) { padding:var(--table-padding) 0; } body>div.input tr.img td:last-child>span { display:none; } body>div.input tr.img td:last-child>div { background-color:gray; margin:1px; float:left; cursor:pointer; display:flex; align-items:center; justify-content:center; } -body>div.input tr.img td:last-child>div>span { font-size:32px; } +body>div.input tr.img td:last-child>div>span { font-size:var(--action-height); } body>div.input tr.icon td:last-child { position:relative; } body>div.input tr.icon td:last-child i:first-child { font-size:22px; position:absolute; left:15px; top:14px; } -body>div.input tr.icon td:last-child img:first-child { height:28px; width:28px; left:12px; top:12px; position:absolute; } -body>div.input tr.icon td:last-child input { padding-left:32px; } +body>div.input tr.icon td:last-child img:first-child { position:absolute; height:28px; width:28px; left:12px; top:12px; } +body>div.input tr.icon td:last-child input { padding-left:var(--action-height); } body>div.input tr.icons td:last-child { position:relative; } body>div.input tr.icons td:last-child i:first-child { font-size:22px; position:absolute; left:15px; top:14px; } -body>div.input tr.icons td:last-child img:first-child { height:28px; width:28px; left:12px; top:12px; position:absolute; } -body>div.input tr.icons td:last-child input { padding-left:32px; } +body>div.input tr.icons td:last-child img:first-child { position:absolute; height:28px; width:28px; left:12px; top:12px; } +body>div.input tr.icons td:last-child input { padding-left:var(--action-height); } body>div.input td span.icon { margin-left:-20px; visibility:hidden; } body>div.input td span.icons { margin-left:-20px; visibility:hidden; } body>div.input td:hover span.icon { visibility:visible; } body>div.input td:hover span.icons { visibility:visible; } -body>div.input select { width:230px !important; } -body>div.input input:not([type=button]) { width:240px; } -body>div.input textarea { height:120px; width:240px !important; } -body>div.input div.action { padding:0 10px; width:100%; position:sticky; bottom:0; } -body>div.input div.action>div.item { margin-left:10px; float:right; } +body>div.input textarea { height:var(--textarea-height); width:var(--project-width) !important; } +body>div.input select { width:var(--project-width) !important; } +body>div.input input:not([type=button]) { width:var(--project-width) !important; } +body>div.input input.select[type=button] { width:var(--project-width) !important; } +body>div.input input[name=cancel] { border:var(--danger-bg-color) solid 1px; } +body>div.input input[name=submit] { border:var(--notice-bg-color) solid 1px; } +body>div.input input[name=submit]:hover { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } +body>div.input input[name=cancel]:hover { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } +body>div.input div.action { padding:0 var(--button-padding); width:100%; position:sticky; bottom:0; } +body>div.input div.action>div.item { margin-left:var(--button-margin); float:right; } body>div.input div.action>div.item>input[type=button] { width:110px; } body>div.input.login { box-shadow:unset; } -body>div.input.login>div.action { display: flex; justify-content: center; border-bottom:var(--box-border); } -body>div.input.login>div.action>div.tabs { padding:10px; } +body>div.input.login>div.action { display:flex; align-items:center; justify-content:center; border-bottom:var(--box-border); } +body>div.input.login>div.action>div.tabs { padding:var(--button-padding); } body>div.input.login>div.output { text-align:center; clear:both; } -body>div.input.login>div.output { height:320px; width:420px; overflow:hidden; } +body>div.input.login>div.output { height:var(--qrcode-height); width:var(--iframe-height); overflow:hidden; } body>div.input.login>div.output>fieldset { box-shadow:none; } body>div.input.login>div.output>fieldset>div.output { background-color:transparent; } -body>div.input.login>div.display>span.item { font-style:italic; word-break:break-all; padding-left:5px; border-left:var(--notice-bg-color) solid 5px; } +body>div.input.login>div.display>span.item { font-style:italic; word-break:break-all; padding-left:var(--button-padding); border-left:var(--notice-bg-color) solid 5px; } body>div.input.login>div.display div.sso { display:flex; justify-content:center; cursor:pointer; } -body>div.input.login>div.display div.sso div.item { display:flex; align-items:center; padding:10px; } +body>div.input.login>div.display div.sso div.item { display:flex; align-items:center; justify-content:center; padding:var(--button-padding); } body>div.input.login>div.display div.sso div.item:hover { background-color:var(--hover-bg-color); } -body>div.input.login>div.display div.sso div.item>img { height:32px; width:32px; } -body>div.input.login>div.display div.sso div.item>span { line-height:32px; padding:5px; } +body>div.input.login>div.display div.sso div.item>img { height:var(--action-height); width:var(--action-height); } +body>div.input.login>div.display div.sso div.item>span { line-height:var(--action-height); padding:var(--table-padding); } body>div.input.simple td:first-child { display:none; } -body>div.upload div.action input[type=file] { width:320px; } +body>div.upload div.action input[type=file] { width:var(--river-width); } 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:var(--input-padding); height:96px; width:100%; resize:vertical; outline:none; } +body { font-size:var(--body-font-size); } +legend { font-size:var(--legend-font-size); line-height:30px; height:var(--action-height); } +select, input { font-size:var(--body-font-size); height:var(--action-height); } input::placeholder, textarea::placeholder { font-style:italic; } +textarea { font-size:var(--body-font-size); padding:var(--input-padding); height:var(--textarea-height); width:100%; outline:none; 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:5px 10px; box-shadow:var(--box-shadow); margin-left:5px; } -fieldset>div.action>div.cmds { font-style:italic; padding:5px 10px; box-shadow:var(--box-shadow); margin-left:5px; } -fieldset>div.output>div.code { font-size:14px; } -fieldset>div.status { font-style:italic; line-height:20px; max-height:32px; } -fieldset>div.status>div.item { padding:5px; height:31px; } +div.story[data-type=spark] { padding:0 var(--table-padding); border-left:var(--notice-bg-color) solid 5px; } +fieldset>div.action>div.tabs { font-style:italic; padding:var(--input-padding) var(--button-padding); margin-left:var(--input-margin); box-shadow:var(--box-shadow); height:var(--action-height); } +fieldset>div.action>div.cmds { font-style:italic; padding:var(--input-padding) var(--button-padding); margin-left:var(--input-margin); box-shadow:var(--box-shadow); height:var(--action-height); } +fieldset>div.output>div.code { font-size:var(--code-font-size); } +fieldset>div.status { font-style:italic; line-height:20px; max-height:var(--action-height); } +fieldset>div.status>div.item { padding:var(--input-padding); height:31px; } fieldset>div.status>div.item>label { font-size:var(--status-font-size); } fieldset>div.status>legend { font-style:italic; height:31px; } -body.mobile.landscape>div.input.login>div.output { height:290px; } body.mobile.landscape>div.input.login { padding:0; } -body.mobile.landscape>div.input.login div.output img { max-height:280px; } -body.mobile>div.carte div.item { padding:10px; } -legend, select, input[type=button], th, h1, h2, h3, div.menu, div.item, div.tabs { cursor:pointer; } -div.story[data-type=spark] { cursor:copy; } +body.mobile.landscape>div.input.login>div.output { height:290px; } +body.mobile.landscape>div.input.login>div.output img { max-height:280px; } +legend, select, input[type=button], table.content td, th, h1, h2, h3, div.item, div.tabs, div.menu { 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; } @@ -243,15 +226,16 @@ body div.tabs { font-family:var(--code-font-family); } body div.path { font-family:var(--code-font-family); } body div.carte { font-family:var(--code-font-family); } /* icon */ -form.option div.icon, form.option span.icon { font-size:20px; line-height:32px; padding:0 5px; margin:0; height:32px; } +fieldset>legend>i { margin-right:var(--input-margin); } +form.option div.icon, form.option span.icon { font-size:20px; line-height:var(--action-height); padding:0 var(--input-padding); margin:0; height:var(--action-height); } form.option div.icon.refresh { font-size:28px; line-height:28px; } form.option div.icon.goback { font-size:28px; line-height:28px; } form.option div.icon.next { font-size:18px; } form.option div.icon.prev { font-size:18px; } -form.option>div.icons>i { font-size:21px; line-height:32px; padding:6px; } +form.option>div.icons>i { font-size:21px; line-height:var(--action-height); padding:var(--input-padding); } form.option div.icons.prunes>span.icon { padding-top:1px; display:inline-block; } -div.action div.icon, div.action>div.item:not(.tabs)>span.icon { font-size:20px; line-height:32px; padding:0 5px; margin:0; height:32px; display:inline-block; } -div.action>div.item.icons>i { font-size:21px; line-height:32px; padding:6px; } +div.action div.icon, div.action>div.item:not(.tabs)>span.icon { font-size:20px; line-height:var(--action-height); padding:0 var(--input-padding); margin:0; height:var(--action-height); display:inline-block; } +div.action>div.item.icons>i { font-size:21px; line-height:var(--action-height); padding:var(--input-padding); } div.action>div.item.icons.create>span.icon { font-size:30px; line-height:28px; } div.action>div.item.icons.insert>span.icon { font-size:30px; line-height:28px; } div.action>div.item.icons.start>span.icon { font-size:30px; line-height:28px; } @@ -264,11 +248,9 @@ div.item.text { position:relative; } div.item.text.will input { border:var(--box-notice); } 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:28px; display:block; } -div.item.button>span.icon.insert { font-size:32px; line-height:28px; display:block; } -div.item>i.bi-chevron-down { transition:all 0.5s; float:right; } -div.item.open>i.bi-chevron-down { transition:all 0.5s; rotate:-180deg; } -div.tabs span.icon { font-style:normal; line-height:20px; padding:0 5px; visibility:hidden; } +div.item.button>span.icon.create { font-size:var(--action-height); line-height:28px; display:block; } +div.item.button>span.icon.insert { font-size:var(--action-height); line-height:28px; display:block; } +div.tabs span.icon { font-style:normal; line-height:20px; padding:0 var(--input-padding); 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; } @@ -276,6 +258,7 @@ div.item>i:first-child { margin-right:var(--button-margin); } 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); } fieldset.panel>div.action>div.button>span.icon { display:none; } +fieldset.plugin>legend { font-style:italic; font-weight:bold; } fieldset.plugin.cmd>form.option>div.icon.delete { 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:not(.select)>span.icon { display:none; } @@ -292,12 +275,11 @@ 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:not(.plug)>form.option>div.text>span.value { white-space:pre; padding:7px; height:var(--action-height); max-width:200px; display:block; overflow:auto; } fieldset.float:not(.plug)>form.option>div.text { box-shadow:none; } +body.windows form.option>div.icon { font-size:21px; line-height:var(--action-height); } body.mobile:not(.landscape) fieldset.float>form.option>div.text>span.value { display:none; } -body.windows form.option>div.icon { font-size:21px; line-height:32px; } /* svg */ -fieldset.web.wiki.draw div.output svg { min-width:100%; min-height:100%; } svg text { font-size:var(--svg-font-size); font-family:var(--code-font-family); stroke:var(--body-fg-color); fill:var(--body-fg-color); cursor:pointer; } svg text.offline { stroke:var(--disable-fg-color); fill:var(--disable-fg-color); } svg text:hover { stroke:var(--hover-fg-color); fill:var(--hover-fg-color); cursor:pointer; } @@ -318,57 +300,60 @@ 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 img { height:32px; width:32px; } -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.project div.list { margin-left:var(--button-margin); clear:both; } div.project div.list fieldset { position:static; } +div.project div.item { white-space:pre; line-height:24px; padding:0 var(--button-margin); } +div.project div.item img { height:var(--action-height); width:var(--action-height); } +div.project div.item.filter { padding:0; } +div.project div.item.filter>i:first-child { position:absolute; padding:var(--input-padding); } +div.project div.item.filter>input { padding-left:var(--button-padding); width:100% !important; } +div.project div.item.filter>span { padding:var(--input-padding); } +div.project div.item.search { width:100%; position:relative; } +div.project div.item.search>i:first-child { position:absolute; padding:var(--input-padding); } +div.project div.item.search>input { padding-left:var(--button-padding); width:100% !important; } +div.project div.item.search>span { right:var(--button-margin); } +div.project div.item>div.name { padding-left:var(--button-padding); } +div.project div.zone>div.item { text-align:center; padding:3px; } +div.project div.zone>div.item>div.icon { margin-left:var(--input-margin); float:right; } +div.project div.zone>div.list>div.zone>div.item { text-align:left; padding-left:var(--button-padding); transition:all .5s; } +div.project div.zone>div.list>div.zone>div.item:hover { margin-left:var(--button-margin); transition:all .3s; } +div.project div.expand { margin-right:var(--input-margin); float:left; transition:all .5s; } +div.project div.expand.open { rotate:90deg; translate:1px 2px; transition:all .3s; } div.project div.action { width:100%; } -div.project div.action div.item.search { width:100%; position:relative; } -div.project div.action div.item.search>i:first-child { position:absolute; padding:5px; } -div.project div.action div.item.search>input { width:100% !important; padding-left:25px; } -div.project div.action div.item.search>span { right:10px; } +div.item>i.bi-chevron-down { float:right; transition:all .5s; } +div.item.open>i.bi-chevron-down { rotate:-180deg; transition:all .3s; } +div.item.text.trans input:not([type=button]) { transition:all 1s; } +div.item.text.trans input:not([type=button]):focus { width:var(--river-width); transition:all .5s; } div.content { position:relative; } -div.content>div.toggle { background-color:#4a566e6e; color:var(--panel-fg-color); font-size:32px; padding-top:38px; height:120px; position:absolute; } -div.content>div.toggle.project { top:20%; left:0; border-top-right-radius:20px; border-bottom-right-radius:20px; } -div.content>div.toggle.profile { top:20%; right:0; border-top-left-radius:20px; border-bottom-left-radius:20px; } -div.content>div.toggle.display { left:20%; bottom:-52px; rotate:90deg; border-top-left-radius:20px; border-bottom-left-radius:20px; } -div.content>div.toggle:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); cursor:pointer; } -div.toggle:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); cursor:pointer; } -div.output>div.project:not(.toggle) { border-right:var(--box-border); width:var(--project-width); flex:0 0 var(--project-width); } -body.mobile div.project:not(.toggle) { border-right:var(--box-border); width:120px; flex:0 0 120px; } +div.toggle { background-color:#4a566e6e; color:var(--panel-fg-color); font-size:var(--action-height); padding-top:38px; height:120px; position:absolute; } +div.toggle:hover { background-color:var(--hover-bg-color); color:var(--panel-hover-fg-color); cursor:pointer; } +div.toggle.project { top:20%; left:0; border-top-right-radius:var(--plugin-radius); border-bottom-right-radius:var(--plugin-radius); } +div.content>div.toggle.profile { top:20%; right:0; border-top-left-radius:var(--plugin-radius); border-bottom-left-radius:var(--plugin-radius); } +div.content>div.toggle.display { left:20%; bottom:-52px; rotate:90deg; border-top-left-radius:var(--plugin-radius); border-bottom-left-radius:var(--plugin-radius); } +div.project:not(.toggle) { border-right:var(--box-border); width:var(--project-width); flex:0 0 var(--project-width); } div.profile:not(.toggle) { border-left:var(--box-border); width:50%; } div.display:not(.toggle) { border-top:var(--box-border); } -div.output div.code input[type=button][name=login] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } -table.content td { cursor:pointer; } -/* table card */ +/* output style */ +div.output.card>div.item { + background-color:var(--plugin-bg-color); padding:var(--plugin-padding); margin:var(--plugin-padding); + border:var(--box-border); border-radius:var(--plugin-radius); box-shadow:var(--box-shadow); + width:var(--river-width); float:left; +} div.output.card>div.item.stop { color:var(--disable-fg-color); } -div.output.card>div.item { background:var(--plugin-bg-color); padding:10px; border:var(--box-border); border-radius:var(--plugin-radius); 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:48px; } +div.output.card>div.item>div.title { font-size:var(--legend-font-size); font-weight:bold; padding-bottom:var(--input-padding); border-bottom:var(--box-border); display:flex; align-items:center; } +div.output.card>div.item>div.title>img { margin-right:var(--button-margin); margin-left:0; height:var(--header-height); width:var(--header-height); float:left; } +div.output.card>div.item>div.content { font-size:var(--status-font-size); padding:var(--input-padding); height:var(--header-height); } div.output.card>div.item>div.action { text-align:right; width:100%; display:flex; } div.output.card>div.item>div.action>input { margin-right:var(--button-margin); box-shadow:var(--box-shadow); } -input[type=button].danger:hover { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } -input[type=button].notice:hover { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } +div.output.stats { display:flex; justify-content:center; flex-wrap:wrap; } +div.output.stats>div.item { text-align:center; padding:var(--plugin-padding); margin:var(--plugin-padding); float:left; display:flex; flex-direction:column; justify-content:center; flex-grow:1; } +div.output.stats>div.item>div.value span:first-child { font-size:32px; } +div.output.stats>div.item>div.value span.units { color:var(--disable-fg-color); font-style:italic; } +div.output.stats>div.item>div.name { color:var(--disable-fg-color); font-size:var(--status-font-size); font-style:italic; } /* 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; } +fieldset.panel>legend, fieldset.panel>div.status { display:none; } +fieldset.output>legend, fieldset.output>form.option, fieldset.output>div.action, fieldset.output>div.status, fieldset.output>div.item { display:none; } +fieldset>form.option, fieldset>div.action { display:contents; } form.option.hide, div.action.hide, .hide, .hidden { 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, fieldset>div.output, fieldset>div.status, div.output>div.project div.item, div.content:not(.item), div.code, div.story[data-type=spark] { clear:both; } @@ -381,45 +366,49 @@ div.layout.flex>* { float:left; clear:none; } div.output.flex { display:flex; overflow:hidden; } 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); + border-radius:0; border-bottom-left-radius:var(--button-margin); border-bottom-right-radius:var(--button-margin); box-shadow:var(--box-shadow); margin-right:var(--button-margin); float:right; clear:none; } -fieldset>div.status>legend>span.remove { margin-left:5px; } +fieldset>div.status>legend>span.remove { margin-left:var(--input-margin); } 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); } -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); } +body.cmd { background-color:var(--plugin-bg-color); color:var(--plugin-fg-color); } +legend { background-color:var(--legend-bg-color); border-radius:var(--button-radius); } legend:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } -select { border-radius:var(--input-radius); } textarea:hover { border:var(--box-notice); } -input { background-color:var(--input-bg-color); color:var(--input-fg-color); border-radius:var(--input-radius); } +textarea:focus { border:var(--box-notice); } +textarea { background-color:var(--input-bg-color); color:var(--input-fg-color); border:var(--box-border); } +select { border-radius:var(--button-radius); } +input { background-color:var(--input-bg-color); color:var(--input-fg-color); border-radius:var(--button-radius); } input:not([type=button]) { border:var(--input-border); } input:not([type=button]):hover { border:var(--box-notice); } -input.select[type=button]:hover { border:var(--box-notice); } input:not([type=button]):focus { border:var(--box-notice); } +input.select[type=button]:hover { border:var(--box-notice); } +input.select[type=button]:focus { border:var(--box-notice); } +input.select[type=button] { border:var(--input-border); padding:0 var(--input-padding); } 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); border:var(--box-border); } -textarea:focus { border:var(--box-notice); } +input[type=button].danger:hover { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } +input[type=button].notice:hover { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } +input[type=button][name=login] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } table.content tr:hover { background-color:var(--tr-hover-bg-color) !important; } 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.detail td:first-child { text-align:center; } 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 tr:hover td:last-child { background-color:var(--th-bg-color); box-shadow:var(--box-shadow); } +table.content.detail td:first-child { text-align:center; } table.content input { box-shadow:var(--box-shadow); } -table.content.action tr:hover td:last-child { box-shadow: var(--box-shadow); } -table.content.action tr:hover 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); } +kbd:hover { background-color:var(--hover-bg-color); color:white; } 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.item:hover { 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:not(.button) { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } @@ -427,11 +416,11 @@ div.item.danger input:hover[type=button] { background-color:var(--danger-bg-colo 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; + border-top-left-radius:var(--button-margin); border-top-right-radius:var(--button-margin); } 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; + border-top-left-radius:var(--button-margin); border-top-right-radius:var(--button-margin); border-bottom:var(--hover-fg-color) solid 2px; } div.zone>div.item { background-color:var(--th-bg-color); } @@ -450,8 +439,11 @@ fieldset.panel:not(.main)>div.output { background-color:var(--panel-output-bg-co 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.panel:not(.main):not(.auto) input { background-color:var(--panel-input-bg-color); color:var(--panel-input-fg-color); } +fieldset.panel:not(.main):not(.auto) input::placeholder { background-color:var(--panel-input-bg-color); color:var(--panel-fg-color); } +fieldset.panel.auto { background-color:var(--panel-bg-color); color:var(--panel-fg-color); } +fieldset.panel.auto>div.output { background-color:var(--panel-bg-color); color:var(--panel-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); } @@ -462,42 +454,38 @@ div.carte div.item:hover { background-color:var(--hover-bg-color); } div.carte div.item.danger:hover { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } div.carte div.item.notice:hover { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } /* mobile */ -div.output>div.code>div.form { font-size:15px; padding:60px 10px; text-align:center; } -div.output>div.code>div.form>input[type=button][name=confirm] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); margin:10px 0; } -div.output>div.code>div.form>input[type=button] { min-width:200px; } -body.mobile.cmd { overflow:hidden; } -body.mobile.login>fieldset.panel.Action>div.output { background-color: var(--panel-output-bg-color); } -body.mobile div.output>div.code>div.form input[type=button] { width:100%; } body.mobile table.content { width:100%; } -body.mobile form.option>div.item:not(.icon) { margin-right:var(--button-margin); } -body.mobile:not(.cmd) form.option>div.item.button.icons>input { display:none; } -body.mobile table.content input:not(:last-child) { margin-right:var(--button-margin); } -body.mobile fieldset>div.status { max-height:32px; overflow:hidden; } -body.mobile fieldset>div.action>div.item { margin-right:var(--button-margin); } body.mobile fieldset>div.output>div.code>img { max-width:390px; } +body.mobile fieldset>div.output>div.code>div.form input[type=button] { width:100%; } +body.mobile fieldset>div.status { overflow:hidden; } body.mobile fieldset.plugin:not(.float):not(.full):not(.cmd)>form.option>div.icon:not(.delete) { display:block; } body.mobile fieldset.plugin:not(.float):not(.full):not(.cmd)>form.option>div.button>span.icon { display:block; } body.mobile fieldset.plugin:not(.float):not(.full):not(.cmd)>div.action>div.button>span.icon { display:inline-block; } body.mobile fieldset.Header { padding:0; width:100%; position:fixed; top:0; } -body.mobile fieldset.Header>div.output { font-size:1.4rem; line-height:var(--header-height); height:var(--header-height); } +body.mobile fieldset.Header>div.output { font-size:1.4rem; line-height:var(--header-height); } +body.mobile fieldset.Header div.output div.item:not(.avatar) { padding:0px var(--button-padding); } body.mobile fieldset.Header div.output div.item.text.title.search { display:none; } -body.mobile fieldset.Header div.output div.item:not(.avatar) { padding:0px 10px; } body.mobile fieldset.Search>div.action>div.item.filter>input { width:100%; } body.mobile fieldset.Search>div.action>div.item.filter>span { position:absolute; } body.mobile fieldset.Search>div.action>div.item.filter { width:100%; position:relative; } body.mobile fieldset.River { position:fixed; top:var(--header-height); z-index:11; } -body.mobile fieldset.River>div.output { font-size:1.4rem; min-width:240px; } +body.mobile fieldset.River>div.output { font-size:1.4rem; min-width:var(--project-width); } body.mobile fieldset.Action { margin-top:var(--header-height); } body.mobile fieldset.Action.cmd { margin-top:0; } body.mobile fieldset.Action>div.output { overflow-x:hidden; } +body.mobile fieldset.word>div.output { overflow-x:hidden; } +body.mobile fieldset.word>div.output div.story.flex { display:block; } +/* body.mobile fieldset.word>div.output div.story.flex>* { padding:unset; } */ +body.mobile fieldset.word>div.output>fieldset.story>form.option>div.text { display:none; } +body.mobile fieldset.word.float>div.output>div.project { top:var(--action-height); } +body.mobile fieldset.web.code.inner.cmd>div.output { overflow:hidden; } +body.mobile:not(.cmd) form.option>div.item.button.icons>input { display:none; } body.mobile.landscape fieldset.Header { position:unset; } body.mobile.landscape fieldset.Action { margin-top:0; } -body.mobile fieldset.word.float>div.output>div.project { top:32px; } -body.mobile fieldset.word>div.output>fieldset.story>form.option>div.text { display:none; } -body.mobile fieldset.word>div.output { overflow-x:hidden; } -body.mobile fieldset.web.code.inner.cmd>div.output { overflow:hidden; } -body.mobile fieldset.word>div.output div.story.flex { display:block; } -body.mobile fieldset.word>div.output div.story.flex>* { padding:unset; } +body.mobile.login>fieldset.panel.Action>div.output { background-color:var(--panel-output-bg-color); } +div.output>div.code>div.form { font-size:15px; padding:60px 10px; text-align:center; } +div.output>div.code>div.form>input[type=button] { min-width:200px; } +div.output>div.code>div.form>input[type=button][name=confirm] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); margin:var(--button-margin) 0; } /* print */ body.print { -webkit-filter: grayscale(100%); } body.print { background-color:white; color:black; } @@ -520,102 +508,90 @@ body.print select, body.print input[type=text], body.print textarea { box-shadow body.print fieldset.draw div.output { background-color:lightgray; } body.print fieldset.draw div.output div.content svg { background-color:lightgray; } /* misc */ -div.output.stats { display:flex; justify-content:center; flex-wrap:wrap; } -body.mobile div.output.stats { justify-content:space-around; } -div.output.stats>div.item { text-align:center; padding:10px; margin:10px; float:left; display:flex; flex-direction:column; justify-content:center; flex-grow:1; } -div.output.stats>div.item>div.name { font-size:var(--status-font-size); font-style:italic; color:var(--disable-fg-color); } -div.output.stats>div.item>div.value { font-size:32px; } -div.output.stats>div.item>div.value span.units { color:var(--disable-fg-color); font-size:24px; font-style:italic; } -fieldset.input.icon div.output td { font-size:28px; padding:5px; } -fieldset.Search div.story[data-type=spark] { margin:0; } -fieldset.Search>div.output>div.profile { border-left:none; width:unset; } -fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { padding:var(--plugin-padding); margin:var(--plugin-margin); box-shadow:var(--box-shadow); } -body.mobile fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { margin:20px 0; } -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.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.plug>div.output table.content { width:100%; } -fieldset.plug.dream.zone>div.output>div.item { display:flex; padding:5px; } -fieldset.plug.dream.zone>div.output>div.item>img { margin-right:5px; } -fieldset.plug.dream.zone>div.output>div.item>span { line-height:32px; } -fieldset.dream>div.output.card>div.item>div.title>img { height:48px; width:48px; float:left; } -fieldset.dream>div.output.card>div.item>div.title>span { line-height:48px; margin-left:10px; } fieldset.inner.float>div.status { display:none; } -fieldset.trans>div.output>fieldset{ margin:10px; } -fieldset.trans>form.option>div.item.text>input { width:240px; } fieldset.inner>div.output>div.project div.item.modify { background-color:#00800036; } -fieldset.vimer>div.output>div.project>div.zone.space div.item.stop { color:gray; } fieldset.vimer>div.output>div.project div.item.modify { background-color:#00800036; } +fieldset.vimer>div.output>div.project>div.zone.space div.item.stop { color:var(--disable-fg-color); } 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.xterm>div.action>div.tabs:only-child { display:none; } -fieldset.config form.option input[name=key] { width:240px; } +fieldset.trans>form.option>div.item.text>input { width:var(--project-width); } +fieldset.trans>div.output>fieldset { margin:var(--button-margin); } +fieldset.config form.option input[name=key] { width:var(--project-width); } fieldset.qrcode>div.output div.code { padding:0; } +fieldset.studio>div.output { padding:var(--plugin-padding); } +fieldset.studio>div.action>div.item { font-style:italic; padding:var(--input-margin) var(--button-padding); } +fieldset.studio>div.output>fieldset>form.option div.icon.delete { display:none; } +fieldset.studio>div.output>fieldset>form.option div.icon:nth-child(2) { margin-left:var(--plugin-margin); } +fieldset.studio>div.output>fieldset>div.output>table.content { width:100%; } +fieldset.studio>div.output>fieldset:not(.select) { display:none; } +fieldset.plan div.output div.content>table.content { height:100%; width:100%; } +fieldset.plan>div.output>div.layout>div.layout>div.profile:not(.toggle) { width:unset; } +fieldset.plan>div.output>div.layout>div.layout>div.profile input { box-shadow:var(--box-shadow); } +fieldset.plan>div.output>div.layout>div.layout>div.profile input:not(:last-child) { margin-right:var(--button-margin); } +fieldset.draw div.output svg { margin-bottom:-5px; } +fieldset.draw>div.output>div.layout>div.layout>div.profile table { width:100%; } +fieldset.draw>form.option>div.item.pid>input { width:var(--button-width) !important; } +fieldset.draw.trend div.output { overflow:hidden; } +fieldset.draw.trend div.output svg { background-color:#1b5b738c; } +fieldset.draw.spide div.output svg text { cursor:pointer; } +fieldset.draw.spide div.output svg path { stroke-width:1; } +fieldset.draw>div.output>div.layout>div.layout>div.profile { width:var(--project-width); flex:0 0 var(--project-width); } +fieldset.word>div.output>fieldset.story:not(.full) { margin:var(--title-margin) 0; } +fieldset.word>div.output fieldset.story:not(.float):not(.full)>form.option>div.icon.delete { display:none; } +fieldset.input.icon div.output td { font-size:28px; padding:var(--input-padding); } fieldset.macos.desktop.cmd>div.output>fieldset.macos.dock { z-index:11; } -fieldset.web.code.git.status>div.output table.content { width:100%; } fieldset.web.code.git>div.output>fieldset.web.code.inner>div.output { overflow:auto; } +fieldset.web.code.git.status>div.output table.content { width:100%; } +fieldset.web.code.git.total.draw div.output { text-align:center; } +fieldset.web.code.docker.studio>div.action>div.item { font-style:italic; padding:var(--input-margin) var(--button-padding); } +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:var(--button-margin); } +fieldset.web.wiki.draw div.output svg { min-width:100%; min-height:100%; } fieldset.web.chat.wx.scan>div.output>table.content tr.expired { color:var(--disable-fg-color); } +fieldset.web.chat.location>div.output>div.layout>div.layout { position:relative; } +fieldset.web.chat.location>div.output>div.layout>div.layout>div.profile { background-color:var(--plugin-bg-color); position:absolute; right:0; width:360px; z-index:9; border-left:none; } +fieldset.web.chat.iframe>form.option input[name=hash] { width:var(--river-width); } fieldset.web.mall.region>div.output>table.content td:nth-child(3) { text-align:right; } fieldset.web.mall.region>div.output>table.content td:nth-child(4) { text-align:right; } fieldset.web.mall.region>div.output>table.content td:nth-child(5) { text-align:right; } fieldset.web.mall.region>div.output>fieldset.web.mall.region.float>div.action { display:none; } -fieldset.web.chat.iframe>form.option input[name=hash] { width:320px; } fieldset.can.view { font-size:14px; } fieldset.can.data { font-size:14px; } -body:not(.mobile) fieldset.word>form.option>div.item>input[name=path] { width:320px !important; } -fieldset.plan div.output div.content>table.content { height:100%; width:100%; } -fieldset.plan>div.output>div.layout>div.layout>div.profile:not(.toggle) { width:unset; } -fieldset.plan>div.output>div.layout>div.layout>div.profile input { box-shadow:var(--box-shadow); } -fieldset.plan>div.output>div.layout>div.layout>div.profile input:not(:last-child) { margin-right:5px; } -fieldset.plan>div.output>div.layout>div.layout>div.profile td:last-child { cursor:text; } -fieldset.draw div.output svg { margin-bottom:-5px; } -fieldset.draw>div.output>div.layout>div.layout>div.profile table { width:100%; } -fieldset.draw>form.option>div.item.pid>input { width:60px !important; } -fieldset.draw.trend div.output svg { background-color:#1b5b738c; } -fieldset.draw.trend div.output { overflow:hidden; } -fieldset.draw.spide div.output svg text { cursor:pointer; } -fieldset.draw.spide div.output svg path { stroke-width:1; } -fieldset.draw.spide div.output svg path { stroke-width:1; } -fieldset.draw>div.output>div.project { width:180px; flex:0 0 180px; } -fieldset.draw>div.output>div.layout>div.layout>div.profile { width:180px; flex:0 0 180px; } -fieldset.web.chat.location>div.action input[type=text] { width:80px !important; } -fieldset.web.chat.location>div.output>div.layout>div.layout>div.profile { background-color:var(--plugin-bg-color); position:absolute; right:0; width:360px; z-index:9; border-left:none; } -fieldset.web.chat.location>div.output>div.layout>div.layout { position:relative; } -fieldset.web.code.git.total.draw div.output { text-align:center; } -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; } -body>fieldset.story.web.chat.wx.agent { position:fixed; left:0; bottom:0; } -fieldset.studio>div.output { padding:10px; } -fieldset.studio>div.action>div.cmds { padding:5px 20px; } -fieldset.studio>div.output>fieldset>form.option div.icon.delete { display:none; } -fieldset.studio>div.output>fieldset>form.option div.icon:nth-child(2) { margin-left:5px; } -fieldset.studio>div.output>fieldset>div.output>table.content { width:100%; } -fieldset.studio>div.output>fieldset:not(.select) { display:none; } -body>div.input.vimer.plug td:first-child { display:none; } +fieldset.Search div.story[data-type=spark] { margin:0; } +fieldset.Search>div.output>div.profile { border-left:none; width:unset; } +fieldset.Action.tabs table.content { width:100%; } +fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { padding:var(--plugin-padding); margin:var(--plugin-margin); 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:var(--input-padding) var(--button-padding); float:right; } +fieldset.cmd>div.item.usernick { line-height:22px; padding:var(--input-padding) var(--button-padding); float:right; } +fieldset.cmd>div.item.avatar { padding:0; height:var(--action-height); float:right; } +fieldset.cmd>div.item.avatar>img { height:var(--action-height); } +fieldset.cmd>div.action>div.tabs.select { border-bottom:var(--notice-bg-color) solid 2px; } +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.plug>div.output table.content { width:100%; } +fieldset.plug.dream.zone>div.output>div.item { display:flex; padding:var(--input-padding); } +fieldset.plug.dream.zone>div.output>div.item>img { margin-right:var(--input-margin); } +fieldset.plug.dream.zone>div.output>div.item>span { line-height:var(--action-height); } body.cmd.web.chat.macos.desktop { background-color:#8ebff2; } +body>div.input.vimer.plug td:first-child { display:none; } +body>div.carte.header.avatar img { min-width:400px; } +body>fieldset.story.web.chat.wx.agent { position:fixed; left:0; bottom:0; } 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.webview fieldset.word>form.option>div.item>input[name=path] { width:160px; } +body.mobile fieldset.inner>form.option input[name=file] { width:160px; } body.mobile fieldset.word>form.option>div.item>input[name=path] { width:180px; } body.mobile fieldset.word fieldset.inner>form.option input[type=text] { display:none; } -body.mobile fieldset.inner>form.option input[name=file] { width:160px; } +body.mobile fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { margin:20px 0; } body.windows fieldset.inner>div.output { overflow:hidden; } body.windows fieldset.inner>div.output>div.layout>div.layout>div.profile { overflow:hidden; } /* scrollbar */ div.scrollbar { - background-color:var(--hover-bg-color); - font-size:8px !important; line-height:10px; - border-radius:10px; position:absolute; visibility:hidden; + background-color:var(--hover-bg-color); font-size:8px !important; line-height:10px; + border-radius:var(--plugin-radius); position:absolute; visibility:hidden; } 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; } diff --git a/lib/page.js b/lib/page.js index d3e78362..6000bf88 100644 --- a/lib/page.js +++ b/lib/page.js @@ -373,6 +373,6 @@ Volcanos("page", { const styles = getComputedStyle(document.body); can.core.List(["--plugin-bg-color", "--plugin-fg-color"].concat(can.core.List(arguments).slice(2)), function(key) { msg.Option(key, styles.getPropertyValue(key)) }) return msg }, - styleValue: function(can, key) { const styles = getComputedStyle(document.body); return styles.getPropertyValue(key) }, - styleValueInt: function(can, key) { return parseInt(can.base.trimSuffix(can.page.styleValue(can, key), "px")) } + styleValue: function(can, key, target) { const styles = getComputedStyle(target||document.body); return styles.getPropertyValue(key) }, + styleValueInt: function(can, key, target) { return parseInt(can.base.trimSuffix(can.page.styleValue(can, key, target), "px")) } }) diff --git a/lib/user.js b/lib/user.js index 9c805996..3b7b4272 100644 --- a/lib/user.js +++ b/lib/user.js @@ -90,8 +90,8 @@ Volcanos("user", { {view: ["delete", "", can.page.unicode.delete], title: "点击关闭", onclick: function() { action.close() }}, {view: "duration", title: "点击关闭", onclick: function() { action.close() }}, can.base.isObject(meta.content)? meta.content: {text: [meta.content||"", html.DIV, nfs.CONTENT]}, - html.ACTION, !can.base.isUndefined(meta.progress) && {view: "progress", style: {width: width-10}, list: [ - {view: "current", style: {width: (meta.progress||0)*(width-12)/100}}, + html.ACTION, !can.base.isUndefined(meta.progress) && {view: "progress", style: {width: width-2*html.PLUGIN_PADDING}, list: [ + {view: "current", style: {width: (meta.progress||0)*(width-2*html.PLUGIN_PADDING-2)/100}}, ]}, ] }]); can.onengine.signal(can, chat.ONTOAST, can.request({}, {time: can.misc._time(), title: meta.title, content: meta.content})._caller(meta.caller||4)) meta.action.meta && can.core.Item(meta.action.meta, function(key, cb) { cb.help && can.core.Value(meta.action.meta, ["_trans", key], cb.help) }) @@ -124,7 +124,7 @@ Volcanos("user", { can.onmotion.focus(can, input), document.execCommand("Copy"), can.page.Remove(can, input) return can.user.toastSuccess(can, text, "copy success"), can.misc.Log(nfs.COPY, text), text }, - carte: function(event, can, meta, list, cb, parent, trans) { var msg = can.request(event) + carte: function(event, can, meta, list, cb, parent, trans) { var msg = can.request(event); event = msg._event function remove_sub(carte) { carte._sub && can.page.Remove(can, carte._sub._target), delete(carte._sub) } parent? remove_sub(parent): can.onmotion.clearCarte(can) meta = meta||can.ondetail||can.onaction||{}, list = can.base.getValid(list, meta.list, can.core.Item(meta)), trans = trans||meta._trans; if (!list || list.length == 0) { return } var _events = event._events||event @@ -134,7 +134,7 @@ Volcanos("user", { can.Update(event, [ctx.ACTION, button])) || can.onmotion.clearCarte(can) }) } var isinput = can.page.tagis(event.target, html.INPUT) - var ui = can.page.Append(can, document.body, [{view: [[chat.CARTE, meta._style||can.base.replaceAll(can.ConfIndex()||"", nfs.PT, lex.SP)||"", chat.FLOAT]], list: can.core.List(list, function(item, index) { + var ui = can.page.Append(can, document.body, [{view: [[chat.CARTE, meta._style||msg.Option("_style")||can.base.replaceAll(can.ConfIndex()||"", nfs.PT, lex.SP)||"", chat.FLOAT]], list: can.core.List(list, function(item, index) { if (item === "") { return {type: html.HR} } if (item == web.FILTER) { return { input: [html.FILTER, function(event) { if (event.key == code.ESCAPE) { return carte.close() } can.onkeymap.selectItems(event, can, carte._target) } ], @@ -159,7 +159,7 @@ Volcanos("user", { return item })}]); can.onkeymap.prevent(event), can.page.Select(can, ui._target, html.IMG, function(target) { target.onload = function() { can.onlayout.figure(event, can, ui._target) } }) - var carte = {_target: ui._target, _parent: parent, layout: can.onlayout.figure(event, can, ui._target, parent, 200), close: function() { can.page.Remove(can, ui._target) }} + var carte = {_target: ui._target, _parent: parent, layout: can.onlayout._figure(event, can, ui._target, parent, 200), close: function() { can.page.Remove(can, ui._target) }} return parent && (parent._sub = carte), carte }, carteRight: function(event, can, meta, list, cb, parent) { var carte = can.user.carte(event, can, meta, list, cb, parent) diff --git a/panel/action.css b/panel/action.css index 3f36de1b..157a1e08 100644 --- a/panel/action.css +++ b/panel/action.css @@ -1,4 +1,4 @@ -fieldset.Action { min-width:160px; } +fieldset.Action { min-width:var(--project-width); } fieldset.Action>div.action { width:100%; display:none; background-color:var(--plugin-bg-color); } fieldset.Action>div.action div.item { font-style:italic; font-size:1.1rem; padding:10px 20px; } fieldset.Action.tabs>div.action { display:block; } @@ -18,10 +18,8 @@ fieldset.Action.grid>div.output>fieldset.plugin { float:left; } fieldset.Action.grid>div.output>fieldset.plugin>form.option { display:none; } fieldset.Action.grid>div.output>fieldset.plugin>div.action { display:none; } fieldset.Action.grid>div.output>fieldset.plugin>div.status { display:none; } -fieldset.Action.grid>div.output>fieldset.plugin>form.option input[type=text] { width:80px; } -fieldset.Action>div.project.toggle { font-size:32px; cursor:pointer; padding-top:50px; height:150px; position:fixed; top:30%; border-top-right-radius:20px; border-bottom-right-radius:20px; } -fieldset.Action>div.project.toggle { background-color:#4a566e6e; color:var(--panel-fg-color); width:20px; } -fieldset.Action>div.project.toggle:hover { background-color:var(--hover-bg-color); color:var(--panel-hover-fg-color); } +fieldset.Action.grid>div.output>fieldset.plugin>form.option input[type=text] { width:var(--button-width); } +fieldset.Action>div.toggle.project { padding-top:50px; height:150px; top:30%; } body:not(.mobile) fieldset.Action>div.project.toggle { display:none; } fieldset.Action.tabview>div.project.toggle { display:none; } fieldset.Action.vertical>div.project.toggle { display:none; } diff --git a/panel/action.js b/panel/action.js index 46000008..7ca8b7c4 100644 --- a/panel/action.js +++ b/panel/action.js @@ -2,7 +2,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { var river = can.Conf(chat.RIVER), storm = can.Conf(chat.STORM), list = can.misc.SearchHash(can) can.onmotion.clear(can), can.core.Next(msg.Table(), function(item, next) { item.type = chat.PLUGIN, item.mode = can.Mode(); if (item.deleted == ice.TRUE) { return next() } item.width = can.ConfWidth()-can.Conf(html.MARGIN_X); if (item.style == html.OUTPUT) { item.width = can.ConfWidth() } - if (msg.Length() == 1) { item.height = can.ConfHeight()-html.ACTION_HEIGHT-can.Conf(html.MARGIN_Y) } + if (msg.Length() == 1) { item.height = can.ConfHeight()-(can.user.isMobile? 2: 1)*html.ACTION_HEIGHT-can.Conf(html.MARGIN_Y) } can.onappend.plugin(can, item, function(sub, meta, skip) { can._plugins = (can._plugins||[]).concat([sub]), can.onimport._tabs(can, sub, meta), skip || next() sub.onaction._close = function() { can.onengine.signal(can, chat.ONACTION_REMOVE, can.request({river: river, storm: storm}, item)), can.page.Remove(can, sub._target) } sub.run = function(event, cmds, cb) { return can.run(event, [river, storm, meta.id||meta.index].concat(cmds), cb) } @@ -52,8 +52,9 @@ Volcanos(chat.ONACTION, {_init: function(can, target) { if (list.length == 1) { can.user.mod.cmd = item.index can.base.isIn(item.index, web.CHAT_MACOS_DESKTOP) || can.user.title(item.index) can.onaction._onaction_cmd(can), item.mode = chat.CMD, item.opts = can.misc.Search(can) + can.user.mod.isCmd && can.user.isMobile && (can.ConfHeight(can.ConfHeight()-html.ACTION_HEIGHT)) } return item - }), FLOW).layout(window.innerHeight, window.innerWidth): can.runAction(can.request(), ctx.COMMAND, [], function(msg) { + }), FLOW).layout(can.page.height(), can.page.width()): can.runAction(can.request(), ctx.COMMAND, [], function(msg) { if (msg.Length() == 1) { can.onaction._onaction_cmd(can) } can.onimport._init(can, msg) }) }, @@ -81,7 +82,8 @@ Volcanos(chat.ONACTION, {_init: function(can, target) { if (can.onkeymap.selectCtrlN(msg._event, can, can._action, html.DIV_ITEM)) { return } can._keylist = can.onkeymap._parse(msg._event, can, model, can._keylist||[], can._output) }, - onresize: function(can) { can.onaction.layout(can), window.setsize && window.setsize(can.page.width(), can.page.height()) }, + onresize: function(can) { can.onaction.layout(can) }, + // onresize: function(can) { can.onaction.layout(can), window.setsize && window.setsize(can.page.width(), can.page.height()) }, ontitle: function(can, msg) { can.onlayout._storage(can, "") }, ontouchstart: function(event, can) { can.touch = can.touch || {} diff --git a/panel/footer.css b/panel/footer.css index 9a63a380..bc1cb07a 100644 --- a/panel/footer.css +++ b/panel/footer.css @@ -2,19 +2,19 @@ fieldset.Footer>div.output { font-style:italic; height:var(--footer-height); ove fieldset.Footer>div.output div.item { padding:7px; height:var(--footer-height); float:left; } fieldset.Footer>div.output div.title:first-child { font-weight:bold; text-align:center; width:var(--river-width); 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.state label { font-size:var(--status-font-size); } fieldset.Footer>div.output div.toast { float:right; line-height:18px; } fieldset.Footer>div.output div.cmd { padding:0; margin-left:20px; position:relative; } fieldset.Footer>div.output div.cmd>i { padding:7px; position:absolute; } fieldset.Footer>div.output div.cmd>input[name=cmd] { padding-left:30px; } -fieldset.Footer>div.output div.cmd>span.delete { padding:6px; } +fieldset.Footer>div.output div.cmd>span.delete { padding:var(--input-padding); } fieldset.Footer>div.output div.menu>div.River { display:flex; justify-content:space-around; } -fieldset.Footer>div.output div.menu>div.River>div.item { height:60px; display:flex; flex-direction:column; text-align:center; flex-grow:1; } +fieldset.Footer>div.output div.menu>div.River>div.item { height:var(--footer-height); display:flex; flex-direction:column; text-align:center; flex-grow:1; } fieldset.Footer>div.output div.menu>div.River>div.item>i { font-size:24px; margin-right:0; } -fieldset.Footer>div.output div.menu>div.River>div.item>span { font-size:12px; } -body.mobile fieldset.Footer>div.output { font-style:italic; height:60px; overflow:hidden; } -body.mobile fieldset.Footer>div.output div.cmd { display:none; } +fieldset.Footer>div.output div.menu>div.River>div.item>span { font-size:var(--status-font-size); } +body.mobile fieldset.Footer>div.output { font-style:italic; height:var(--footer-height); overflow:hidden; } body.mobile fieldset.Footer>div.output div.toast { display:none; } +body.mobile fieldset.Footer>div.output div.cmd { display:none; } .picker { box-shadow:4px 4px 20px 4px #626bd0; } div.view span.keyword { color:#5cadd4; } diff --git a/panel/header.css b/panel/header.css index 2989b83b..a920da3a 100644 --- a/panel/header.css +++ b/panel/header.css @@ -1,11 +1,12 @@ -fieldset.Header>div.output { font-size:1.1rem; line-height:21px; height:var(--header-height); overflow:hidden; } -fieldset.Header>div.output div.item { background-color:var(--panel-output-bg-color); padding:13.5px; float:left; height:var(--header-height); } -fieldset.Header>div.output div.title:first-child { font-style:italic; font-weight:bold; text-align:center; width:var(--river-width); overflow:auto; } +fieldset.Header>div.output { line-height:21px; height:var(--header-height); overflow:hidden; } +fieldset.Header>div.output div.item { background-color:var(--panel-output-bg-color); padding:13.5px; height:var(--header-height); float:left; } +fieldset.Header>div.output div.title:first-child { font-size:var(--legend-font-size); font-style:italic; font-weight:bold; width:var(--river-width); display:flex; align-items:center; justify-content:center; overflow:auto; } +fieldset.Header>div.output div.title img { margin-right:var(--button-margin); height:var(--action-height); width:var(--action-height); } fieldset.Header>div.output div.state { float:right; } fieldset.Header>div.output div.state.avatar { padding:0; } -body.mobile fieldset.Header>div.output div.state.avatar { margin-right:10px; } fieldset.Header>div.output div.state.avatar>img { height:var(--header-height); clip-path:circle(40%); } -fieldset.Header>div.output div.search.title { padding:8px 5px; margin-left:15px; position:relative; } -fieldset.Header>div.output div.search>i { padding:6px; position:absolute; } -fieldset.Header>div.output div.search>input { padding-left:30px; } -fieldset.Header>div.output div.search>span.delete { padding:5px 10px; } +fieldset.Header>div.output div.search.title { padding:7px 5px; margin-left:15px; position:relative; } +fieldset.Header>div.output div.search>i { padding:7px; position:absolute; } +fieldset.Header>div.output div.search>input { padding-left:25px; } +fieldset.Header>div.output div.search>span.delete { padding:var(--input-padding) var(--button-padding); } +body.mobile fieldset.Header>div.output div.state.avatar { margin-right:var(--button-margin); } diff --git a/panel/header.js b/panel/header.js index 404fbadf..1938c098 100644 --- a/panel/header.js +++ b/panel/header.js @@ -2,7 +2,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.onimport._title(can, msg, target), can.onimport._state(can, msg, target), can.onimport._avatar(can, msg, target), can.onimport._background(can, msg, target), can.onimport._search(can, msg, target) }, _title: function(can, msg, target) { can.user.isMobile || can.core.List(can.base.getValid(can.Conf(chat.TITLE)||(can.user.isExtension? "contexts": location.host)||msg.result, [location.host]), function(item) { - can.page.Append(can, target, [{view: [[html.ITEM, chat.TITLE], "", item], title: "返回主页", onclick: function(event) { can.onaction.title(event, can) }}]) + can.page.Append(can, target, [{view: [[html.ITEM, chat.TITLE]], list: [{img: "/volcanos/favicon.ico"}, {text: item}], title: "返回主页", onclick: function(event) { can.onaction.title(event, can) }}]) }) }, _state: function(can, msg, target) { can.core.List(can.base.Obj(can.Conf(chat.STATE)||msg.Option(chat.STATE), [aaa.USERNICK, aaa.AVATAR, mdb.TIME]).reverse(), function(item) { if (item == aaa.AVATAR ) { can.user.isLocalFile || can.page.Append(can, target, [{view: [[html.ITEM, chat.STATE, item]], list: [{img: lex.SP}], onclick: function(event) { @@ -47,7 +47,6 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { }, }) Volcanos(chat.ONACTION, {_init: function(can) { - can.page.theme(function(theme) { can.onengine.signal(can, chat.ONTHEMECHANGE, can.request(event, {theme: can.__theme = theme})) }), can.onimport.theme(can) }, onsize: function(can) { can.ConfHeight(can._target.offsetHeight), can.ConfWidth(can._target.offsetWidth) }, onmain: function(can) { @@ -62,8 +61,13 @@ Volcanos(chat.ONACTION, {_init: function(can) { can.user.info.email = msg.Option(aaa.EMAIL), can.user.info.repos = msg.Option(nfs.REPOS) msg.Option(nfs.SCRIPT) && can.require(can.base.Obj(msg.Option(nfs.SCRIPT)), function(can) { can.onaction.source(can, msg) }) msg.Option(mdb.PLUGIN) && can.onappend.plugin(can, {index: msg.Option(mdb.PLUGIN)}, function(sub) { can.onmotion.hidden(can, sub._target) }, document.body) - html.PLUGIN_MARGIN = can.page.styleValueInt(can, "--plugin-margin") + can.ui.diy = can.base.Obj(msg.Option("diy"))||{} + can.page.theme(function(theme) { theme = can.ui.diy&&can.ui.diy[theme]||theme + can.onengine.signal(can, chat.ONTHEMECHANGE, can.request(event, {theme: can.__theme = theme})) + }), can.onimport.theme(can) + html.RIVER_MARGIN = can.page.styleValueInt(can, "--river-margin") html.PLUGIN_PADDING = can.page.styleValueInt(can, "--plugin-padding") + html.PLUGIN_MARGIN = can.page.styleValueInt(can, "--plugin-margin") html.ACTION_MARGIN = can.page.styleValueInt(can, "--action-margin") html.ACTION_HEIGHT = can.page.styleValueInt(can, "--action-height") html.STATUS_HEIGHT = can.page.styleValueInt(can, "--status-height") @@ -101,7 +105,7 @@ Volcanos(chat.ONACTION, {_init: function(can) { carte: function(event, can, list, cb, trans) { return can.user.carte(event, can, can.onaction, list, cb, null, trans) }, share: function(event, can, args) { can.user.share(can, can.request(event), [ctx.ACTION, chat.SHARE].concat(args||[])) }, avatar: function(event, can) { var src = can.onexport.avatar(can) - can.onaction.carte(event, can, [ + can.onaction.carte(can.request(event, {_style: "header avatar"}), can, [ can.user.isMobile? ``: can.page.Format(html.IMG, src, can.page.height()/2) ]) }, usernick: function(event, can) { can.onaction.carte(event, can, can.onaction._menus) }, @@ -114,7 +118,7 @@ Volcanos(chat.ONACTION, {_init: function(can) { password: function(event, can) { var ui = can.user.input(event, can, [{name: html.PASSWORD, type: html.PASSWORD, action: ice.AUTO}, {name: html.PASSWORD, type: html.PASSWORD, action: ice.AUTO}], function(list) { if (list[0] != list[1]) { return can.user.toast(can, "密码不一致"), ui.focus(), true } can.runAction(event, aaa.PASSWORD, [list[0]], function() { can.user.toastSuccess(can) }) }) }, - clear: function(event, can) { can.onimport.background(event, can, ""), can.onimport.avatar(event, can, "") }, + clear: function(event, can) { can.onimport.background(event, can, "") }, logout: function(event, can) { can.user.logout(can) }, email: function(event, can) { can.user.input(can.request(event, {to: can.user.info.email, subject: can.user.title()}), can, ["to", "subject","content"], function(args) { diff --git a/panel/river.css b/panel/river.css index a9e1ad6c..0ea8531f 100644 --- a/panel/river.css +++ b/panel/river.css @@ -1,8 +1,10 @@ fieldset.River { width:var(--river-width); float:left; } -fieldset.River>div.action { width:100%; display:flex; justify-content:center; } -fieldset.River>div.action>div.item { margin:0 5px; } -fieldset.River>div.output div.item { padding:20px 20px; border-left:#00ffae solid 3px; } +fieldset.River>div.action { margin-top:var(--plugin-margin); width:100%; display:flex; justify-content:center; } +fieldset.River>div.action>div.item { margin:0 var(--button-margin); } +fieldset.River>div.output div.item { padding:var(--legend-padding); border-left:#00ffae solid 3px; } +fieldset.River>div.output div.item:hover { color:var(--panel-hover-fg-color); } +fieldset.River>div.output div.item.select { color:var(--panel-hover-fg-color); } fieldset.River>div.output div.list div.item { border-left:#ccdc4c solid 3px; } -fieldset.River>div.output div.list { margin-left:20px; } -body:not(.mobile) fieldset.River>div.output { padding:10px; } -body:not(.mobile) fieldset.River>div.output { margin:80px 0; } +fieldset.River>div.output div.list { margin-left:var(--legend-padding); } +body:not(.mobile) fieldset.River>div.output { padding:var(--plugin-padding); } +fieldset.River>div.output { margin:var(--river-margin) 0; } diff --git a/panel/search.css b/panel/search.css index a93cb9b2..3d6e3a70 100644 --- a/panel/search.css +++ b/panel/search.css @@ -1,3 +1,3 @@ -fieldset.Search { padding:10px; box-shadow:unset; position:fixed; left:var(--project-width); top:48px; } +fieldset.Search { padding:var(--plugin-padding); box-shadow:unset; position:fixed; left:var(--project-width); top:var(--header-height); } fieldset.Search>div.output>div.profile { max-width:unset; } fieldset.Search>div.output table.content { width:100%; } diff --git a/plugin/local/code/inner.css b/plugin/local/code/inner.css index 0d8e7c7c..f94ab81e 100644 --- a/plugin/local/code/inner.css +++ b/plugin/local/code/inner.css @@ -22,8 +22,8 @@ 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.layout>div.tabs { font-size:var(--code-font-size); display:none; } fieldset.inner>div.output>div.layout>div.tabs>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>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>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.tabs>div.tabs>div.tabs:hover { background-color:var(--output-bg-color); border-top-left-radius:var(--button-radius); border-top-right-radius:var(--button-radius); } +fieldset.inner>div.output>div.layout>div.tabs>div.tabs>div.tabs.select { background-color:var(--output-bg-color); border-top-left-radius:var(--button-radius); border-top-right-radius:var(--button-radius); border-bottom:lightgray solid 2px; } fieldset.inner>div.output>div.layout>div.path { 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.profile h1 { text-align:left; padding:10px 0; border-bottom:var(--box-border); margin:20px 0; } diff --git a/plugin/local/mall/goods.css b/plugin/local/mall/goods.css index 41de37c1..35e8f4c8 100644 --- a/plugin/local/mall/goods.css +++ b/plugin/local/mall/goods.css @@ -2,8 +2,8 @@ fieldset.goods>div.output>div.project { flex:0 0 90px; } fieldset.goods>div.output>div.project>div.item { text-align:center; padding:20px 10px; border-right:var(--plugin-bg-color) solid 4px; } fieldset.goods>div.output>div.project>div.item.select { border-right:var(--notice-bg-color) solid 4px; } fieldset.goods>div.output>div.layout>div.layout>div.content>div.item:not(.hide) { - background-color:var(--plugin-bg-color); border-radius:10px; box-shadow:var(--box-shadow); - margin:10px; float:left; display:flex; + background-color:var(--plugin-bg-color); border-radius:var(--plugin-radius); box-shadow:var(--box-shadow); + margin:10px; float:left; display:flex; } body:not(.mobile) fieldset.goods>div.output>div.layout>div.layout>div.content>div.item:not(.hide) { height:150px; diff --git a/plugin/local/wiki/word.css b/plugin/local/wiki/word.css index 4dc10a80..a8b70f8e 100644 --- a/plugin/local/wiki/word.css +++ b/plugin/local/wiki/word.css @@ -1,41 +1,39 @@ -fieldset.word>div.output { padding:10px; } -fieldset.word>div.output>p { margin:20px auto; } +fieldset.word>div.output { padding:var(--plugin-padding); } fieldset.word>div.output div.story.flex { display:flex; justify-content:center; } fieldset.word>div.output div.story.flex div.story.flex { display:flex; justify-content:center; } -fieldset.word>div.output div.story.flex>* { padding:20px; } +fieldset.word>div.output div.story.flex>* { padding:var(--plugin-padding); } +fieldset.word>div.output p { margin:var(--title-margin) auto; } +fieldset.word>div.output h3 { margin-top:var(--title-margin); } fieldset.word>div.output h2.story[data-type=spark][data-name=title] { text-align:center; } -fieldset.word>div.output h3 { margin-top:20px; } -fieldset.word>div.output table { width:100%; } +fieldset.word>div.output ul { margin:20px; margin-right:0; } fieldset.word>div.output img { display:block; margin:auto; max-height:100%; max-width:100%; } fieldset.word>div.output table.content img { margin:unset; max-width:unset; } +fieldset.word>div.output table { width:100%; } fieldset.word>div.output video { max-height:100%; width:100%; } -fieldset.word>div.output iframe { height:480px; width:100%; } +fieldset.word>div.output iframe { height:var(--iframe-height); width:100%; } fieldset.word>div.output svg.story[data-index] text { cursor:pointer; } -fieldset.word>div.output input.story[type=button] { font-family:system-ui; font-weight:bold; padding:20px 40px; margin:10px; height:64px; box-shadow:var(--box-shadow); } +fieldset.word>div.output input.story[type=button] { font-family:system-ui; font-weight:bold; padding:10px 40px; margin:var(--button-margin); height:var(--header-height); box-shadow:var(--box-shadow); } +body.mobile fieldset.word>div.output input.story[type=button] { padding:10px 20px; } fieldset.word>div.output fieldset.web.code.inner.output div.output td.line { border-right:var(--box-border); } -fieldset.word>div.output>fieldset.story:not(.full) { margin:20px 0; } -fieldset.word>div.output ul { margin:20px 40px; } -fieldset.word>div.output fieldset.story:not(.float):not(.full)>form.option>div.icon.delete { display:none; } - fieldset.word>div.navmenu { background-color:inherit; overflow:auto; min-width:120px; clear:both; float:left; } -fieldset.word>div.navmenu div.list { margin-left:20px; } -fieldset.word>div.navmenu div.item { font-size:1.4em; font-weight:bold; font-family:cursive; padding:4px 20px; } +fieldset.word>div.navmenu div.list { margin-left:var(--title-margin); } +fieldset.word>div.navmenu div.item { font-size:1.4em; font-weight:bold; font-family:cursive; padding:var(--input-padding) var(--title-margin); } fieldset.word>div.navmenu>div.item { font-size:1.6em; } div.story[data-type=spark] label { user-select:none; } -div.story[data-type=spark_tabs] { margin-top:20px; } -div.story[data-type=spark_tabs]>div.tabs>div.item { font-style:italic; padding:5px 20px; height:32px; float:left; } +div.story[data-type=spark_tabs] { margin-top:var(--title-margin); } +div.story[data-type=spark_tabs]>div.tabs>div.item { font-style:italic; padding:var(--input-padding) var(--button-padding); height:var(--action-height); float:left; } div.story[data-type=spark_tabs]>div.tabs>div.item.select { border-bottom:var(--code-border-color) solid 2px; } div.story[data-type=spark_tabs]>div.story:not(.select) { display:none; } fieldset.word.play.float { top:0; } fieldset.word.play.float>div.action { display:contents; } fieldset.word.play.float>div.status { clear:none; display:contents; } -fieldset.word.play.float>div.output>div.project { background-color:#4682b46b; padding:10px; position:fixed; right:0; top:32px; z-index:10; } +fieldset.word.play.float>div.output>div.project { background-color:#4682b46b; padding:var(--plugin-padding); position:fixed; right:0; top:var(--action-height); z-index:10; } fieldset.word.play.float div.content div.page { display:none; } fieldset.word.play.float div.content div.page.show { display:block; } fieldset.word.play.float div.content div.page ul { text-align:left; } -fieldset.word.play.float div.content.grid div.page { background-color:#a4cbecb5; margin:10px; height:320px; width:30%; overflow:auto; display:block; float:left; } +fieldset.word.play.float div.content.grid div.page { background-color:#a4cbecb5; margin:var(--plugin-padding); height:var(--qrcode-height); width:30%; overflow:auto; display:block; float:left; } fieldset.word.play.float h1 { text-align:center; } fieldset.word.play.float h2 { text-align:center; } fieldset.word.play.float h3 { text-align:center; }