From d3231a6cf6c2bde30ae4b10a39794f79a8ac98dc Mon Sep 17 00:00:00 2001 From: shylinux Date: Thu, 7 Jan 2021 05:10:01 +0800 Subject: [PATCH] opt page --- page/index.css | 358 ++++++++++++++++++++++++++++++++++++++++++++++++ page/index.html | 17 +++ page/index.js | 22 +++ 3 files changed, 397 insertions(+) create mode 100644 page/index.css create mode 100644 page/index.html create mode 100644 page/index.js diff --git a/page/index.css b/page/index.css new file mode 100644 index 00000000..04fc7642 --- /dev/null +++ b/page/index.css @@ -0,0 +1,358 @@ +body.mobile fieldset.Header.head { + position:fixed; + width:-webkit-fill-available; + height:48px; font-size:24px; + background-color:#000000b8; + z-index:10; +} +body.mobile fieldset.Header.head>div.output { + height:48px; +} +body.mobile fieldset.Footer.foot { + position:fixed; bottom:0px; + width:-webkit-fill-available; + height:64px; font-size:24px; + background-color:#000000b8; + z-index:10; +} +body.mobile fieldset.River { + background-color:#243950bf; + position:fixed; top:48px; + min-width:240px; + font-size:24px; + z-index:10; +} +body.mobile fieldset.Action { + padding-top:48px; +} +body.mobile select { + font-size:18px; +} +body.mobile input { + font-size:18px; +} +body.mobile div.carte { + font-size:24px; +} + +body { + margin:0; padding:0; + background:black; + color:cyan; +} +fieldset { + margin:0; border:0; padding:0; +} +legend { + box-shadow:4px 4px 20px 4px #626bd0; +} + +input[type=button] { + background-color:black; color:cyan; + letter-spacing:4px; + padding-left:10px; +} +input[type=button]:hover { + background-color:gray; color:cyan; +} +input[type=text] { + box-shadow: 4px 4px 10px 1px #626bd0; + background-color:cyan; color:black; + padding: 0 4px; +} +input[type=text]:hover { + background-color:white; +} +input[name=cmd] { + width:160px; +} +select { + box-shadow: 4px 4px 10px 1px #626bd0; + background-color:black; color:cyan; + padding:0 10px; +} + +table { + border:0; white-space:pre; + font-size:14px; font-family:monospace; + cursor:pointer; overflow: auto; +} +table tr { + background:#04272f85; +} +table tr:hover { + background-color:#0fbd45; +} +table th { + background-color:#0fbd45; + padding:2px 6px; +} +table th:hover { + background-color:red; +} +table td { + max-width:1200px; overflow:auto; + padding:2px 6px; +} +table td:hover { + background-color:red; +} +table td.select { + background-color:red; +} + +h1 { + margin:0; +} +div.code { + background-color:#343a34c4; color:white; + font-size:14px; font-family:monospace; + box-shadow: 4px 4px 20px 4px #626bd0; + padding:10px; border:solid 3px green; + text-align:left; white-space:pre; + overflow:auto; +} +div.hidden { + display:none; +} + +fieldset>form.option>div.item { + float:left; margin-right:3px; +} +fieldset>form.option>div.item input.args.char { + width:20px; +} +fieldset>form.option>div.item input.args.tiny { + width:40px; +} +fieldset>form.option>div.item input.args { + width:80px; +} +fieldset>form.option>div.item input.args.cmd { + background-color:black; color:white; + width:160px; +} +fieldset>form.option>div.item input.args.long { + width:240px; +} +fieldset>form.option>div.item input.args.full { + width:480px; +} +fieldset>form.option>div.item input.opts { + width:80px; +} +fieldset>form.option>div.item textarea.args { + width:500px; height:50px; + background-color:cyan; +} +fieldset>form.option>div.item.textarea { + margin-top:4px; + clear:both; +} + +fieldset>div.action>div.item { + float:left; margin:2px 0; +} +fieldset>div.action>div.item.space { + width:10px; +} +fieldset>div.status>div.item { + float:left; padding:4px; +} +fieldset>div.status>div.item>label { + font-size:10px; color:gray; +} + +fieldset>div.output { + clear:both; overflow:auto; + position:relative; +} +fieldset>div.output div.code a { + color:yellow; +} +fieldset>div.output div.project { + float:left; +} +fieldset>div.output div.project div.item { + padding:2px 10px; text-align:left; + clear:both; cursor:pointer; +} +fieldset>div.output div.project div.item:hover { + background:red; +} +fieldset>div.output div.project div.list { + margin-left:10px; +} + +fieldset.input { + background-color:#30a7a93d; + position:fixed; + z-index:100; +} +fieldset.input.key { + z-index:90; +} +fieldset.input.date { + z-index:80; +} + +div.carte { + position:fixed; + background:#295b61; + color:white; + padding:4px; + z-index:100; +} +div.carte div.item { + padding:3px 12px; + cursor:pointer; +} +div.carte div.item:hover { + background:red; +} + +div.upload { + background:black; color:yellow; + position:fixed; + padding:5px; + z-index:100; +} +div.upload div.item { + float:left; +} + +div.toast { + background:#0e3369b3; color:yellow; + position:fixed; + padding:5px; + z-index:100; +} +div.toast div.title { + font-size:14px; + color:#cae850; +} +div.toast div.content { + text-align:center; + white-space:pre; +} +div.toast div.duration { + font-size:14px; + color:gray; +} +div.toast div.progress { + border:solid 2px green; + height:10px; +} +div.toast div.progress div.current { + background:red; + height:10px; +} + +body.black a { + color:yellow; +} +body.white { + background-color:#2f3638; + color:white; +} +body.white input[type=button] { + background-color:#FF9900; color:white; + border-radius:10px 10px 10px 10px; + border:2px solid #FF9900; +} +body.white input[type=button]:hover { + background-color:#FFCC33; + border:2px solid #FFCC33; +} +body.white input[type=text] { + background-color:white; color:black; + border-radius:6px 6px 6px 6px; + border:2px solid #14a58e; + +} +body.white input[type=text]:hover { + background-color:cyan; +} +body.white select { + background-color:#99CC66; color:white; + border-radius:10px 10px 10px 10px; + border:2px solid #99CC66; +} + +body.white fieldset.Action { + background-color:#81b3c1c9; +} +body.white fieldset.Action fieldset.plugin { + background-color:#ffffff9c; + color:black; +} +body.white fieldset.Action fieldset.plugin legend { + background-color:#339999; color:white; + border-radius:10px 10px 10px 10px; +} +body.white fieldset.Action fieldset.plugin legend:hover { + background-color:#6ee4e4; +} + +body.white fieldset.plugin table { + color:black; +} +body.white fieldset.plugin table tr { + background-color:#e1f1ff6b; +} +body.white fieldset.plugin table tr:hover { + background-color:#99CCFF; +} +body.white fieldset.plugin table th { + background-color:#99CCFF; +} +body.white fieldset.plugin table th:hover { + background-color:#98ecd4; +} +body.white fieldset.plugin table td { +} +body.white fieldset.plugin table td:hover { + background-color:#98ecd4; +} + +body.white table input[type=button][value=结束] { + background:red; +} +body.white table input[type=button][value=停止] { + background:red; +} +body.white table input[type=button][value=启动] { + background:#52ce78; +} + +body.print { + background-color:white; + color:black; +} +body.print legend { + box-shadow:0px 0px 0px 0px #626bd0; +} +body.print input[type=text] { + box-shadow:0px 0px 0px 0px #626bd0; +} +body.print select { + box-shadow:0px 0px 0px 0px #626bd0; +} +body.print div.code { + background-color:white; +} +body.print fieldset.Action { + background-color:white; +} +body.print fieldset.Action fieldset.plugin { + padding-left:40px; +} +body.print fieldset.Action fieldset.plugin>legend { + /* display:none; */ +} +body.print fieldset.Action fieldset.plugin>form.option { + /* display:none; */ +} +body.print fieldset.River>div.output div.list div.item { + background-color:white; +} diff --git a/page/index.html b/page/index.html new file mode 100644 index 00000000..be9b91a9 --- /dev/null +++ b/page/index.html @@ -0,0 +1,17 @@ + + + + + volcanos + + + + + + + + + + + + diff --git a/page/index.js b/page/index.js new file mode 100644 index 00000000..da316982 --- /dev/null +++ b/page/index.js @@ -0,0 +1,22 @@ +Volcanos({name: "chat", iceberg: "/chat/", volcano: "/frame.js", + libs: ["/lib/base.js", "/lib/core.js", "/lib/misc.js", "/lib/page.js", "/lib/user.js"], panes: [ + {name: "Header", help: "标题栏", pos: "head", state: ["time", "username"]}, + {name: "Search", help: "搜索框", pos: "float"}, + {name: "River", help: "群聊组", pos: "left", action: ["创建", "刷新"]}, + {name: "Action", help: "工作台", pos: "main"}, + {name: "Footer", help: "状态条", pos: "foot", state: ["ncmd", "keys"]}, + ], main: {name: "Header", engine: "remote", list: ["/publish/order.js"]}, plugin: [ + "/plugin/state.js", + "/plugin/input.js", + "/plugin/table.js", + "/plugin/input/key.js", + "/plugin/input/date.js", + "/plugin/local/team/plan.js", + "/plugin/local/wiki/draw.js", + "/plugin/local/wiki/word.js", + "/plugin/local/code/vimer.js", + "/plugin/local/code/inner.js", + "/plugin/story/trend.js", + "/plugin/story/spide.js", + ], +})