mirror of
https://shylinux.com/x/volcanos
synced 2025-04-25 08:48:06 +08:00
opt css size
This commit is contained in:
parent
0076697bf0
commit
a101a5379d
3
const.js
3
const.js
@ -257,8 +257,7 @@ 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, ACTION_HEIGHT: 32, ACTION_MARGIN: 200,
|
||||
var html = {PLUGIN_MARGIN: 10, PLUGIN_PADDING: 10, ACTION_HEIGHT: 32, ACTION_MARGIN: 200,
|
||||
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",
|
||||
|
||||
32
index.css
32
index.css
@ -11,12 +11,8 @@ body {
|
||||
|
||||
--legend-bg-color:var(--body-bg-color);
|
||||
--input-fg-color: var(--body-fg-color);
|
||||
--input-padding:10px;
|
||||
--input-border:var(--box-border);
|
||||
--input-radius:5px; --input-width:120px;
|
||||
--button-radius:5px; --button-margin:10px;
|
||||
--output-bg-color: var(--input-bg-color);
|
||||
--status-font-size:12px;
|
||||
--status-border:var(--box-border);
|
||||
--panel-bg-color:var(--panel-output-bg-color);
|
||||
--panel-fg-color:var(--panel-output-fg-color);
|
||||
@ -24,7 +20,7 @@ body {
|
||||
--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-radius:10px;
|
||||
--plugin-border-color:var(--box-border);
|
||||
--plugin-bg-color:var(--legend-bg-color);
|
||||
--plugin-fg-color:var(--body-fg-color);
|
||||
--th-bg-color:var(--plugin-bg-color);
|
||||
@ -35,18 +31,26 @@ body {
|
||||
--float-fg-color:var(--plugin-fg-color);
|
||||
--carte-bg-color:var(--plugin-bg-color);
|
||||
|
||||
--header-height:48px; --river-width:280px; --footer-height:32px;
|
||||
--plugin-margin:20px; --plugin-radius:10px; --plugin-padding:20px;
|
||||
--button-margin:20px; --button-radius:5px;
|
||||
--input-radius:5px; --input-padding:10px; --input-width:120px;
|
||||
--project-width:230px; --table-padding:10px;
|
||||
--action-height:32px; --action-margin:200px;
|
||||
--status-height:32px; --status-font-size:12px;
|
||||
|
||||
--code-font-size:14px; --code-font-family:monospace;
|
||||
--code-bg-color:black; --code-fg-color:silver; --code-border-color:var(--notice-bg-color);
|
||||
--code-comment:green; --code-keyword:royalblue; --code-package:blue;
|
||||
--code-datatype:lavender; --code-function:lightgreen;
|
||||
--code-constant:gray; --code-string:orange; --code-object:silver;
|
||||
--svg-font-size:24px; --svg-stroke-width:1; --desktop-icon-size:80px;
|
||||
--project-width:230px;
|
||||
}
|
||||
body.mobile {
|
||||
--input-width:80px; --button-margin:5px;
|
||||
--plugin-margin:0; --plugin-padding:10px;
|
||||
--button-margin:5px;
|
||||
--input-width:80px;
|
||||
--svg-font-size:13px;
|
||||
--header-height:48px;
|
||||
}
|
||||
body.windows { --code-font-family:"Courier New"; }
|
||||
/* element */
|
||||
@ -65,8 +69,8 @@ table.content.full { width:100%; }
|
||||
table.content thead { position:sticky; top:2px; }
|
||||
table.content tr.offline { color:var(--disable-fg-color); }
|
||||
table.content tr.offline a { color:var(--disable-fg-color); }
|
||||
table.content th { padding:5px; box-shadow:var(--box-shadow); }
|
||||
table.content td { padding:5px; }
|
||||
table.content 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.action th:last-child { position:sticky; right:2px; }
|
||||
table.content.action td:last-child { position:sticky; right:2px; text-align:center; }
|
||||
@ -333,7 +337,7 @@ div.output.card>div.item { background:var(--plugin-bg-color); padding:10px; bord
|
||||
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.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); }
|
||||
div.output.card>div.item>div.action>input { margin-right:10px; 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); }
|
||||
/* display */
|
||||
@ -468,7 +472,6 @@ body.mobile fieldset.River>div.output { font-size:1.4rem; min-width:240px; }
|
||||
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.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { padding:0px; }
|
||||
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; }
|
||||
@ -508,9 +511,8 @@ div.output.stats>div.item>div.value span.units { color:var(--disable-fg-color);
|
||||
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:10px; margin:10px; box-shadow:var(--box-shadow); }
|
||||
body.mobile fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { padding:10px; margin:10px 0; box-shadow:var(--box-shadow); }
|
||||
body.mobile fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd):not(:first-child) { margin:20px 0; }
|
||||
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; }
|
||||
|
||||
@ -373,4 +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 can.base.trimSuffix(can.page.styleValue(can, key), "px") }
|
||||
})
|
||||
|
||||
@ -3,7 +3,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { var river = can.Conf(chat.R
|
||||
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-4*html.PLUGIN_MARGIN }
|
||||
if (msg.Length() == 1) { item.height = can.ConfHeight()-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) }
|
||||
@ -19,7 +19,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { var river = can.Conf(chat.R
|
||||
var tabs = [{view: [html.ITEM, "", meta.name], onclick: function(event) { can.onmotion.select(can, can._header_tabs, html.DIV_ITEM, sub._header_tabs)
|
||||
can.onmotion.select(can, can._action, html.DIV_ITEM, sub._tabs), can.onmotion.select(can, can._output, html.FIELDSET_PLUGIN, sub._target)
|
||||
if (sub._delay_refresh) { sub._delay_refresh = false, sub.onimport.size(sub, can.ConfHeight()-can.Conf(html.MARGIN_Y), can.ConfWidth()-can.Conf(html.MARGIN_X), can.onexport.isauto(can)) }
|
||||
can.onexport.layout(can) == FREE || (can._output.scrollTop = sub._target.offsetTop-html.PLUGIN_MARGIN)
|
||||
can.onexport.layout(can) == FREE || (can._output.scrollTop = sub._target.offsetTop-10)
|
||||
can.onexport.layout(can) && can.misc.SearchHash(can, can.Conf(chat.RIVER), can.Conf(chat.STORM), meta.index)
|
||||
}, oncontextmenu: sub._legend.onclick}]; sub._header_tabs = can.page.Append(can, can._header_tabs, tabs)._target, sub._tabs = can.page.Append(can, can._action, tabs)._target
|
||||
},
|
||||
@ -29,13 +29,17 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { var river = can.Conf(chat.R
|
||||
},
|
||||
})
|
||||
Volcanos(chat.ONACTION, {_init: function(can, target) {
|
||||
can.Conf(html.MARGIN_Y, (can.user.isMobile? 0: 4)*html.PLUGIN_MARGIN+html.ACTION_HEIGHT), can.Conf(html.MARGIN_X, (can.user.isMobile? 2: 4)*html.PLUGIN_MARGIN)
|
||||
can.Conf(html.MARGIN_Y, 2*html.PLUGIN_PADDING+2*html.PLUGIN_MARGIN+html.ACTION_HEIGHT)
|
||||
can.Conf(html.MARGIN_X, 2*html.PLUGIN_PADDING+2*html.PLUGIN_MARGIN)
|
||||
can.core.List(["ontouchstart", "ontouchmove", "ontouchend"], function(item) {
|
||||
can.onengine.listen(can, item, function(event, msg) { can.onaction[item](event, can), can.onengine.signal(can, chat.ONACTION_TOUCH, msg) }, target)
|
||||
})
|
||||
},
|
||||
onsize: function(can, msg, height, width) { can.Conf({height: can.base.Min(height, 240), width: width}) },
|
||||
onlogin: function(can, msg) { can.onimport._menu(can, msg), can.onkeymap._build(can)
|
||||
onlogin: function(can, msg) {
|
||||
can.Conf(html.MARGIN_Y, 2*html.PLUGIN_PADDING+2*html.PLUGIN_MARGIN+html.ACTION_HEIGHT)
|
||||
can.Conf(html.MARGIN_X, 2*html.PLUGIN_PADDING+2*html.PLUGIN_MARGIN)
|
||||
can.onimport._menu(can, msg), can.onkeymap._build(can)
|
||||
can._root.River && can.onmotion.delay(can, function() {
|
||||
if (can.Mode()) { return }
|
||||
var gt = can.page.unicode.next, lt = can.page.unicode.prev, river = can._root.River._target
|
||||
@ -130,7 +134,7 @@ Volcanos(chat.ONLAYOUT, {
|
||||
page: function(can) { can.page.styleHeight(can, can._output, ""), can.page.style(can, document.body, kit.Dict(html.OVERFLOW, "")) },
|
||||
_plugin: function(can, button) { can.core.List(can._plugins, function(sub) {
|
||||
if (can.page.ClassList.has(can, sub._target, html.OUTPUT)) { return sub.onimport.size(sub, can.ConfHeight(), can.ConfWidth(), true) }
|
||||
if (can._plugins.length == 1) { return sub.onimport.size(sub, can.ConfHeight()-html.ACTION_HEIGHT-4*html.PLUGIN_MARGIN, can.ConfWidth()-can.Conf(html.MARGIN_X), false) }
|
||||
if (can._plugins.length == 1) { return sub.onimport.size(sub, can.ConfHeight()-html.ACTION_HEIGHT-can.Conf(html.MARGIN_Y), can.ConfWidth()-can.Conf(html.MARGIN_X), false) }
|
||||
sub.onimport.size(sub, can.ConfHeight()-can.Conf(html.MARGIN_Y)-(button || sub.isCmdMode()? 0: html.ACTION_MARGIN), can.ConfWidth()-can.Conf(html.MARGIN_X), can.onexport.isauto(can)) && can.page.style(can, sub._output, html.MAX_HEIGHT, "")
|
||||
}) },
|
||||
_storage: function(can, value) { return can.misc.sessionStorage(can, can.core.Keys(CAN_LAYOUT, location.pathname), value) },
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
fieldset.Footer>div.output { font-style:italic; height:32px; overflow:hidden; }
|
||||
fieldset.Footer>div.output div.item { padding:7px; float:left; }
|
||||
fieldset.Footer>div.output div.title:first-child { font-weight:bold; text-align:center; width:var(--project-width); overflow:auto; }
|
||||
fieldset.Footer>div.output { font-style:italic; height:var(--footer-height); overflow:hidden; }
|
||||
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.toast { float:right; line-height:18px; }
|
||||
fieldset.Footer>div.output div.cmd { padding:0; margin-left:10px; 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; width:120px; transition:all 1s; }
|
||||
fieldset.Footer>div.output div.cmd>input[name=cmd]:focus { width:320px; transition:all 0.5s; }
|
||||
fieldset.Footer>div.output div.cmd>input[name=cmd]:focus { width:var(--river-width); transition:all 0.5s; }
|
||||
fieldset.Footer>div.output div.cmd>span.delete { padding:6px; }
|
||||
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; }
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
fieldset.Header>div.output { font-size:1.1rem; line-height:21px; height:48px; overflow:hidden; }
|
||||
fieldset.Header>div.output div.item { background-color:var(--panel-output-bg-color); padding:13.5px; float:left; }
|
||||
fieldset.Header>div.output div.title:first-child { font-style:italic; font-weight:bold; text-align:center; width:var(--project-width); overflow:auto; }
|
||||
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 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:48px; clip-path:circle(40%); }
|
||||
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:5px; position:relative; }
|
||||
fieldset.Header>div.output div.search>i { padding:6px; position:absolute; }
|
||||
fieldset.Header>div.output div.search>input { padding-left:30px; transition:all 1s; }
|
||||
fieldset.Header>div.output div.search>input:focus { width:320px; transition:all 0.5s; }
|
||||
fieldset.Header>div.output div.search>input:focus { width:var(--river-width); transition:all 0.5s; }
|
||||
fieldset.Header>div.output div.search>span.delete { padding:5px 10px; }
|
||||
|
||||
@ -62,6 +62,10 @@ 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.ACTION_HEIGHT = can.page.styleValueInt(can, "--action-height")
|
||||
html.ACTION_MARGIN = can.page.styleValueInt(can, "--action-margin")
|
||||
html.PLUGIN_MARGIN = can.page.styleValueInt(can, "--plugin-margin")
|
||||
html.PLUGIN_PADDING = can.page.styleValueInt(can, "--plugin-padding")
|
||||
lang(msg, function() { can.onmotion.clear(can), can.onimport._init(can, can.request(), can._output), can.onengine.signal(can, chat.ONLOGIN) })
|
||||
}
|
||||
can.run(can.request({}, {_method: http.GET}), [], function(msg) { lang(msg)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
fieldset.River { width:var(--project-width); float:left; }
|
||||
fieldset.River { width:var(--river-width); float:left; }
|
||||
fieldset.River>div.action { width:100%; display:flex; justify-content:center; }
|
||||
fieldset.River>div.output div.item { padding:20px 20px; border-left:#00ffae solid 3px; }
|
||||
fieldset.River>div.output div.item>i.bi-chevron-down { float:right; }
|
||||
|
||||
@ -7,8 +7,8 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { can.onmotion.clear(can, can
|
||||
},
|
||||
_size: function(can) { can.ui && can.ui.content && can.getActionSize(function(left, top, width, height) {
|
||||
can.page.style(can, can._target, {left: left||0, top: top||0, width: width}),
|
||||
can.page.style(can, can._output, html.MAX_HEIGHT, height -= 2*html.PLUGIN_MARGIN+(can.user.isMobile? 2: 1)*html.ACTION_HEIGHT+can.onexport.statusHeight(can))
|
||||
can.core.List([can.ui.content, can.ui.display], function(target) { can.page.style(can, target, html.MAX_WIDTH, can.ConfWidth(width-2*html.PLUGIN_MARGIN)) })
|
||||
can.page.style(can, can._output, html.MAX_HEIGHT, height -= 2*10+(can.user.isMobile? 2: 1)*html.ACTION_HEIGHT+can.onexport.statusHeight(can))
|
||||
can.core.List([can.ui.content, can.ui.display], function(target) { can.page.style(can, target, html.MAX_WIDTH, can.ConfWidth(width-2*10)) })
|
||||
can.ConfHeight(can.base.Min(height-can.ui.content.offsetHeight-can.ui.display.offsetHeight-1, height/2))
|
||||
}) },
|
||||
_input: function(can, msg, arg, fields) { if (can.base.contains(arg[1], ";")) { arg = can.core.Split(arg[1], "\t ;", "\t ;") }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user