forked from x/volcanos
opt page
This commit is contained in:
shylinux
parent
44ab9dbff1
commit
d3231a6cf6
358
page/index.css
Normal file
358
page/index.css
Normal file
@ -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;
|
||||
}
|
||||
17
page/index.html
Normal file
17
page/index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=0.8,user-scalable=no">
|
||||
<meta charset="utf-8">
|
||||
<title>volcanos</title>
|
||||
|
||||
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="/page/cache.css">
|
||||
<link rel="stylesheet" type="text/css" href="/page/index.css">
|
||||
<link rel="stylesheet" type="text/css" href="/page/print.css" media="print"/>
|
||||
</head>
|
||||
<body>
|
||||
<script src="/proto.js"></script>
|
||||
<script src="/page/cache.js"></script>
|
||||
<script src="/page/index.js"></script>
|
||||
</body>
|
||||
|
||||
22
page/index.js
Normal file
22
page/index.js
Normal file
@ -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",
|
||||
],
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user