mirror of
https://shylinux.com/x/volcanos
synced 2025-04-26 01:04:06 +08:00
253 lines
15 KiB
CSS
253 lines
15 KiB
CSS
body, fieldset, table, tr, th, td { padding:0; border:0; margin:0; }
|
|
body { background-color:black; color:cyan; font-size:14px; font-family:sans-serif; }
|
|
|
|
legend { background-color:#339999; color:white; padding:0px 10px; margin-top:4px 5px; }
|
|
select { background-color:black; color:cyan; padding:0 10px; height:1.92rem; }
|
|
textarea { background-color:cyan; height:60px; width:400px; }
|
|
input[type=button] { background-color:black; color:cyan; }
|
|
input[name=cmd] { background-color:black; color:white; width:240px; }
|
|
input[type=text] { background-color:cyan; color:black; padding:0 4px; height:1.65rem; width:82px; }
|
|
input[name=where] { width:320px; }
|
|
input[name=date] { width:150px; }
|
|
input[name=path] { width:160px; }
|
|
input[name=line] { width:40px; }
|
|
input[name=text] { width:160px; }
|
|
input[name=url] { width:320px; }
|
|
|
|
fieldset.plugin.config form.option input[name=key] { width:240px; }
|
|
table.layout { border-spacing:0; }
|
|
table.layout td { vertical-align:top; }
|
|
table.layout td.content { position:relative; }
|
|
table.layout div.toggle { font-size:24px; background-color:#e1aeae45; position:absolute; }
|
|
table.layout div.toggle>div { color:white; display:table-cell; }
|
|
table.layout div.toggle.project { padding-top: 50px; height:100px; width:15px; top:20%; left:0px; border-top-right-radius:10px; border-bottom-right-radius:10px; }
|
|
table.layout div.toggle.profile { padding-top: 50px; height:100px; width:15px; top:20%; right:0px; border-top-left-radius:10px; border-bottom-left-radius:10px; }
|
|
table.layout div.toggle.display { overflow:hidden; margin-top:-17px; height:15px; width:100px; position:sticky; left:40%; border-top-left-radius:10px; border-top-right-radius:10px; }
|
|
table.layout div.toggle.display>div { color:white; text-align:center; height:15px; width:100px; }
|
|
fieldset.Action.cmd>div.toggle.project { display:none; }
|
|
|
|
table.content tr { background-color:#04272f45; }
|
|
table.content tr.show { background-color:red; }
|
|
table.content th { background-color:#0fbd45; padding:2px 6px; }
|
|
table.content td { padding:2px 6px; }
|
|
table.content.action td:last-child, table.content.action th:last-child {
|
|
background-color:#7dc6d7eb;
|
|
position:sticky;
|
|
right:0;
|
|
}
|
|
|
|
td>input[type=button][name=create] { background-color:blue; }
|
|
td>input[type=button][name=remove] { background-color:red; }
|
|
td>input[type=button][name=start] { background-color:#52ce78; }
|
|
td>input[type=button][name=open] { background-color:blue; }
|
|
td>input[type=button][name=stop] { background-color:red; }
|
|
td>input[type=button][name=delete] { background-color:red; }
|
|
td>input[type=button][name=insert] { background-color:blue; }
|
|
|
|
div.tabs { background-color:#00000038; color:white; padding:5px; margin:0 1px; }
|
|
div.code { background-color:#343a3445; color:white; padding:10px; border:solid 3px green; }
|
|
div.story[data-type=spark] { background-color:#2169a9a6; color:white; padding:4px 10px; border-left:solid 4px blue; margin:10px; }
|
|
|
|
form.option>div.item { margin-right:3px; }
|
|
form.option>div.item.select { background-color:#0000; }
|
|
form.option>div.item input.args.char { width:20px; }
|
|
form.option>div.item input.args.tiny { width:40px; }
|
|
form.option>div.item input.args.long { width:240px; }
|
|
form.option>div.item input.args.full { width:480px; }
|
|
form.option>div.item input.args[name=ID] { width:48px; }
|
|
form.option>div.item input.args[name=id] { width:48px; }
|
|
form.option>div.item input.args[name=limit] { width:48px; }
|
|
form.option>div.item input.args[name=offset] { width:48px; }
|
|
form.option>div.item input.args[name=offend] { width:48px; }
|
|
form.option>div.item.textarea { margin-top:4px; }
|
|
|
|
div.action>div.item { margin-right:3px; }
|
|
div.action>div.item.select { background:none; }
|
|
div.action>div.item.space { width:10px; }
|
|
div.output { position:relative; }
|
|
div.output td.project { background-color:#435f8c8c; }
|
|
div.output td.project div.project { min-width:88px; max-width:360px; }
|
|
div.output td.project div.project div.item { padding:2px 10px; }
|
|
div.output td.project div.project div.list { margin-left:10px; }
|
|
div.output td.profile { background-color:#71909c91; }
|
|
div.status>div.item { padding:4px; height:18px; }
|
|
|
|
fieldset.Action>div.output>fieldset.plugin { background-color:#061c3c9e; padding:10px; margin:10px; }
|
|
fieldset.plugin div.status { border-top:1px solid darkcyan; }
|
|
fieldset.story div.status { border-top:1px solid darkcyan; }
|
|
/* fieldset.story>legend { float:left; height:30px; } */
|
|
fieldset.float { background-color:#023531cf; }
|
|
/* fieldset.float>div.action { display:block; height:2.3rem; } */
|
|
fieldset.float table { color:white; }
|
|
|
|
fieldset.output>form.option { display:none; }
|
|
fieldset.output>div.action { display:none; }
|
|
fieldset.output div.status { display:none; }
|
|
fieldset.output div.toggle { display:none; }
|
|
|
|
fieldset.input { background-color:#0d4142a6; top:32px; }
|
|
fieldset.input div.output { max-height:400px; }
|
|
fieldset.input table { color:white; }
|
|
fieldset.input td { word-break:keep-all; }
|
|
|
|
body>div.toast { background-color:#0e3369b3; color:yellow; padding:5px; }
|
|
body>div.toast div.title { color:#cae850; word-break:break-all; float:left; }
|
|
body>div.toast div.duration { color:gray; float:right; }
|
|
body>div.toast div.content { text-align:center; }
|
|
body>div.toast div.progress { border:solid 2px green; margin-left:-2px; height:10px; clear:both; }
|
|
body>div.toast div.progress div.current { background-color:red; height:10px; }
|
|
|
|
body>div.carte { background-color:#295b61; color:white; padding:4px; min-width:80px; }
|
|
body>div.carte div.item { padding:3px 12px; }
|
|
body>div.input { background-color:#0d4142a6; }
|
|
body>div.input div.item { float:left; }
|
|
body>div.input select { width:183px; }
|
|
body>div.input input[type=text] { width:171px; }
|
|
body>div.input input[name=username] { width:171px; }
|
|
body>div.input input[name=password] { width:171px; }
|
|
body>div.input textarea { background-color:cyan; padding:4px; border:2px inset #14a58e; height:60px; width:171px; }
|
|
body>div.input.login { padding:10px; }
|
|
|
|
body>div.upload { background-color:black; color:yellow; padding:5px; }
|
|
body>div.upload div.item { float:left; }
|
|
body>div.upload div.output { border:solid 1px red; }
|
|
body>div.upload div.progress { background-color:red; 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; }
|
|
body>div.upload input[type=file] { width:240px; }
|
|
|
|
body.white { background-color:rgba(5,34,56,0.75); color:white; }
|
|
body.white fieldset.Action { color:black; }
|
|
body.white fieldset.Action>div.action { color:white; }
|
|
body.white fieldset.Action fieldset.plugin { background-color:#ffffff78; }
|
|
body.white fieldset.Action fieldset.plugin.full { background-color:#ffffffff; }
|
|
body.white fieldset.Action fieldset.plugin.Full { background-color:#cce0f4eb; color:white; }
|
|
body.white fieldset.Action fieldset.story.Full { background-color:#cce0f4eb; color:white; }
|
|
body.white fieldset.Action fieldset.plugin.Full table.content { color:white; }
|
|
body.white fieldset.Action fieldset.story.Full table.content { color:white; }
|
|
body.white fieldset.Search table { color:white; }
|
|
body.white fieldset.word.float { background-color:aliceblue; color:black; }
|
|
|
|
body.white legend { border-radius:10px 10px 10px 10px; }
|
|
body.white select { background-color:#99CC66; color:white; border:2px solid #99CC66; border-radius:10px 10px 10px 10px; }
|
|
body.white input[type=button] { background-color:#FF9900; color:white; border:2px solid #FF9900; border-radius:10px; }
|
|
body.white input[type=text] { background-color:white; color:black; border:2px solid #14a58e; border-radius:6px; }
|
|
body.white input[name=cmd] { background-color:black; color:white; width:240px; }
|
|
|
|
body.white table.content { color:black; }
|
|
body.white table.content tr { background-color:#e1f1ff1f; }
|
|
body.white table.content th { background-color:#99CCFF; }
|
|
|
|
body.white td>input[type=button][name=结束] { background-color:red; }
|
|
body.white td>input[type=button][name=stop] { background-color:red; }
|
|
body.white td>input[type=button][name=open] { background-color:blue; }
|
|
body.white td>input[type=button][name=start] { background-color:#52ce78; }
|
|
body.white td>input[type=button][name=create] { background-color:blue; }
|
|
body.white td>input[type=button][name=remove] { background-color:red; }
|
|
body.white td>input[type=button][name=insert] { background-color:blue; }
|
|
body.white td>input[type=button][name=delete] { background-color:red; }
|
|
|
|
body.print { background-color:white; color:black; }
|
|
body.print legend, body.print select, body.print input[type=text] { box-shadow:0px 0px 0px 0px #626bd0; }
|
|
body.print fieldset.Header, body.print fieldset.River, body.print fieldset.Action, body.print fieldset.Footer { background-color:white; color:black; }
|
|
body.print fieldset.River>div.output div.item.select { background-color:white; border:solid 2px red; }
|
|
body.print fieldset.River>div.output div.list div.item { background-color:white; }
|
|
|
|
body.mobile>div.input input[name=username] { width:264px; }
|
|
body.mobile>div.input input[name=password] { width:264px; }
|
|
body.mobile legend { font-size:1.6rem; }
|
|
body.mobile input { font-size:1.4rem; }
|
|
body.mobile textarea { font-size:1.2rem; }
|
|
body.mobile input[type=text] { padding-top:3px; height:2.47rem; }
|
|
body.mobile.white input[type=text] { padding-top:3px; height:2.35rem; }
|
|
body.mobile select { font-size:1.4rem; margin-top:3px; height:42px; }
|
|
body.mobile>div.carte { font-size:1.6rem; }
|
|
body.mobile>div.carte div.item { font-size:1.6rem; }
|
|
body.mobile>div.input.login input { font-size:1.4rem; }
|
|
body.mobile fieldset.Header.head { width:-webkit-fill-available; }
|
|
body.mobile fieldset.Header.head { background-color:#000000b8; font-size:1.6rem; height:3rem; position:fixed; top:0; }
|
|
body.mobile fieldset.Header.head div.output { height:3rem; }
|
|
body.mobile fieldset.Header.head>div.output div.menu { height:2.6rem; }
|
|
body.mobile fieldset.Header.head div.state.time { display:none; }
|
|
body.mobile fieldset.Header>div.output>div.search>input { height:38px; }
|
|
body.mobile.landscape fieldset.Header>div.output>div.search>input { width:240px; }
|
|
body.mobile fieldset.River.left { background-color:#243950bf; font-size:2rem; min-width:240px; position:fixed; top:3rem; z-index:10; }
|
|
body.mobile fieldset.River>div.output { width:320px; }
|
|
body.mobile fieldset.River>div.output div.item { font-size:1.6rem; }
|
|
body.mobile fieldset.Action.main { margin-top:3rem; margin-bottom:3rem; }
|
|
body.mobile fieldset.Action.main.cmd { margin-top:0; margin-bottom:0; }
|
|
body.mobile fieldset.Footer.foot { width:-webkit-fill-available; }
|
|
body.mobile fieldset.Footer.foot { background-color:#000000b8; font-size:1.6rem; height:3rem; position:fixed; bottom:0; }
|
|
body.mobile fieldset.Footer.foot div.output { height:3rem; }
|
|
body.mobile fieldset.Footer.foot>div.output div { height:2.6rem; }
|
|
body.mobile fieldset.Footer>div.output input[name=cmd] { height:38px; }
|
|
body.mobile.landscape fieldset.Footer>div.output input[name=cmd] { width:240px; }
|
|
body.mobile.landscape fieldset.Header.head { position:unset; }
|
|
body.mobile.landscape fieldset.Header.head div.state.time { display:block; }
|
|
body.mobile.landscape fieldset.Action.main { margin-top:0; margin-bottom:0; }
|
|
body.mobile.landscape fieldset.Footer.foot { position:unset; }
|
|
|
|
body.mobile fieldset.draw.spide div.action { display:none; }
|
|
body.mobile fieldset.draw.trend div.action { display:none; }
|
|
body.mobile.landscape fieldset.draw.spide div.action { display:block; }
|
|
body.mobile.landscape fieldset.draw.trend div.action { display:block; }
|
|
|
|
body.mobile fieldset.plugin.inner div.action { display:none; }
|
|
body.mobile.landscape fieldset.plugin.inner div.action { display:contents; }
|
|
body.mobile.landscape fieldset.plugin.inner form.option input[type=button] { display:none; }
|
|
/* body.mobile.landscape fieldset.panel.Action.cmd fieldset.plugin.inner form.option input[type=button] { display:block; } */
|
|
|
|
/* body.mobile fieldset.panel.Action.cmd fieldset.plugin.inner td.project div.project { display:none; } */
|
|
/* body.mobile.landscape fieldset.panel.Action.cmd fieldset.plugin.inner td.project div.project { display:block; } */
|
|
|
|
/* font */
|
|
* { tab-size:4; }
|
|
textarea { tab-size:2; }
|
|
legend { font-size:1.2rem; }
|
|
select, input { font-size:1.1rem; }
|
|
table.content th, table.content td, div.item, div.tabs, div.code, code.story, div.story[data-type=spark] { font-size:1.1rem; font-family:monospace; }
|
|
div.status>div.item>label { font-size:0.6rem; font-family:monospace; }
|
|
svg { font-family:monospace; }
|
|
|
|
/* display */
|
|
form.option, div.action { display:contents; }
|
|
.hide, .hidden, form.option>div.item>label, div.action>div.item>label, fieldset.panel>legend, fieldset.output>legend, fieldset.input>legend { display:none; }
|
|
div.output, div.status, div.content, div.project div.item, div.item.textarea, div.code, div.story[data-type=spark], p.story, h1, h2, h3 { clear:both; }
|
|
form.option, form.option>div.item, div.action, div.action>div.item, div.action>div.tabs, div.project, div.status>div.item, fieldset.float>legend { float:left; }
|
|
div.code, div.story, div.action, div.output, div.status, div.project, div.content, div.profile, div.display, table.content, table.content td, body>div.toast { overflow:auto; }
|
|
div.code, div.story, div.item, div.content, table.content, textarea { white-space:pre; }
|
|
div.code, div.story, div.item { text-align:left; }
|
|
|
|
/* position cursor */
|
|
fieldset.float, fieldset.input, body>div.toast, body>div.carte, body>div.input, body>div.upload { position:fixed; z-index:10; }
|
|
legend, select, input[type=button], div.item, div.tabs, th, td, h1, h2, h3 { cursor:pointer; }
|
|
div.title, div.story[data-type=spark] { cursor:copy; }
|
|
|
|
/* box-shadow */
|
|
fieldset.plugin { box-shadow:2px 2px 10px 4px #626bd0; }
|
|
fieldset.plugin:hover { box-shadow:4px 4px 12px 6px #626bd0; }
|
|
fieldset.story { clear:both; float:left; box-shadow:4px 4px 10px 1px #626bd0; }
|
|
fieldset.story:hover { box-shadow:12px 12px 12px 6px #5764efd1; }
|
|
div.story[data-type=spark] { box-shadow:4px 4px 10px 1px #626bd0; }
|
|
div.story[data-type=spark] span:hover { background-color:deepskyblue; box-shadow:4px 4px 20px 4px #29318e; }
|
|
legend, select, textarea, input[type=text], div.code { box-shadow:4px 4px 20px 4px #626bd0; }
|
|
|
|
/* hover */
|
|
.select, div.item.select, div.item:hover, table.content th:hover, table.content td.select, table.content td:hover { background-color:cornflowerblue; }
|
|
div.tabs.select, div.tabs:hover, table.content tr.select, table.content tr:hover, h1:hover, h2:hover, h3:hover { background-color:steelblue; }
|
|
|
|
input[type=text]:hover { background-color:white; }
|
|
input[name=cmd]:hover { background-color:white; color:black; }
|
|
input[type=button]:hover { background-color:gray; color:cyan; }
|
|
|
|
body.white legend:hover { background-color:skyblue; }
|
|
body.white input[type=text]:hover { background-color:cyan; }
|
|
body.white input[name=cmd]:hover { background-color:white; color:black; }
|
|
body.white input[type=button]:hover { background-color:#FFCC33; border:2px solid #FFCC33; }
|
|
body.white table.content th:hover, body.white table.content td.select, body.white table.content td:hover { background-color:#6495ed63; }
|
|
body.white table.content tr:hover { background-color:#4682b46b; }
|
|
body.white div.item.select, body.white div.item:hover { background-color:steelblue; }
|
|
body.white fieldset.float table { color:white; }
|
|
|