volcanos/index.css

body {
    background:black;
    padding:0;
    margin:0;
}
fieldset {
    color:cyan;
    padding:2px;
}
legend {
    margin-left:10px;
    box-shadow: 4px 4px 20px 4px #626bd0;
}
legend:hover {
    cursor:pointer;
    background:red;
}
div.hidden {
    display:none;
}
h1 {
    margin:0;
}

input[type=text] {
    background-color:cyan;
    color:black;
}
input[type=button] {
    background:black;
    color:cyan;
}
select {
    background:black;
    color:cyan;
}

fieldset>form.option {
    padding:0 5px;
}
fieldset>form.option>br {
    clear:both;
}
fieldset>form.option>div.item {
    margin-right:3px;
    float:left;
}
fieldset>form.option>div.item label {
    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 {
    background-color:cyan;
    width:500px;
    height:50px;
}
fieldset>form.option>div.item.textarea {
    margin-top:4px;
    clear:both;
}

fieldset>div.action {
    /* clear:none; */
}
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 {
    margin-top:4px;
    clear:both;
    overflow:auto;
    position:relative;
}
fieldset>div.output div.code a {
    color:yellow;
}
fieldset>div.output>div.project {
    float:left;
    /* position:fixed; */
}
fieldset>div.output>div.project div.item {
    margin-left:10px;
    clear:both;
}
fieldset>div.output>div.project div.item:hover {
    border:solid 1px red;
}
fieldset>div.output>div.project div.list {
    margin-left:10px;
}
fieldset>div.output>pre.display {
    position:sticky; bottom:0;
    /* max-height:120px; */
    max-height:400px;
    clear:both;
}
fieldset>div.output>pre.display:hover {
    /* max-height:640px; */
}

table {
    border:0; white-space: pre;
    font-size:14px; font-family:monospace;
    box-shadow: 4px 4px 10px 1px #626bd0;
    cursor:pointer; overflow: auto;
}
table tr:hover {
    background-color:#0fbd45;
}
table tr.select {
    background-color:#0fbd45;
}
table tr.over {
    background:red;
}
table th {
    background-color:#0fbd45;
    padding: 0 10px;
    cursor:pointer;
}
table td {
    max-width:1200px;
    padding: 0 10px;
}
table td.done {
    background-color:green;
}
table td:hover {
    background-color:red;
}
table td.select {
    background-color:red;
}
table td input {
    margin-left:4px;
}

div.code {
    box-shadow: 4px 4px 20px 4px #626bd0;
    font-size:14px; font-family:monospace;
    color:white; background-color:#343a34f2;
    padding:10px; border:solid 3px green;
    text-align:left; white-space:pre;
    overflow:auto;
    /* max-height:640px; */
}

div.toast {
    color:yellow;
    background:#0e3369b3;
    border:solid 2px red;
    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;
}

div.carte {
    color:cyan;
    background:black;
    border:solid 2px red;
    position:fixed;
    z-index:100;
}
div.carte div.item {
    padding:0 5px;
}
div.carte div.item:hover {
    background:red;
    border:solid 2px yellow;
    cursor:pointer;
}

div.upload {
    color:yellow;
    background:black;
    border:solid 2px red;
    position:fixed;
    padding:5px;
    z-index:100;
}
div.upload div.item {
    float:left;
}

fieldset.input {
    background-color:black;
    position:fixed;
    left:0; top:0;
}
fieldset.input {
    z-index:99;
}
fieldset.input.date {
    z-index:101;
}
fieldset.input.key {
    z-index:101;
}

body.white {
    margin:0; padding:0;
    background-color:#0dabda;
}
body.white input[type=text] {
    border:2px solid #14a58e;
    border-radius:6px 6px 6px 6px;
    color:black; background-color:white;
    box-shadow: 4px 4px 10px 1px #626bd0;
    padding: 0 4px;
}
body.white input[type=text]:hover {
    background-color:cyan;
}
body.white input[type=button] {
    padding:0 20px;
    border-radius:10px 10px 10px 10px;
    border:2px solid #FF9900;
    background-color:#FF9900;
    color:white;
}
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.white input[type=button]:hover {
    border-radius:10px 10px 10px 10px;
    border:2px solid #FFCC33;
    background-color:#FFCC33;
}
body.white select {
    padding:0 10px;
    margin-top:2px;
    border-radius:10px 10px 10px 10px;
    border:2px solid #99CC66;
    background-color:#99CC66;
    color:white;
}
body.white select:hover {
}

body.white fieldset {
    /* color:black; */
}
body.white fieldset.plugin {
    margin:0; border:0;
    border-top:solid 2px #CCCCFF;
    background-color:white;
    color:black;
}
body.white fieldset.editor {
    background:#0b2c54ab;
    color:white;
}
body.white fieldset.Header {
    border:solid 2px #1f2224;
    background-color:#2f3638;
    color:white;
}
body.white fieldset.Header input[type=text] {
    border:2px solid #c4c7ce;
    border-radius:10px 10px 10px 10px;
    background-color:white;
    color:white;
}
body.white fieldset.Footer {
    border:solid 2px #1f2224;
    background-color:#1f2224;
    color:white;
}
body.white fieldset.River {
    border:solid 2px #1f2224;
    background-color:#1f2224;
    color:white;
}
body.white fieldset.River>div.output div.item:hover {
    background-color:black;
    border:solid 2px black;
}
body.white fieldset.River>div.output div.item.select {
    background-color:black;
    border:solid 2px black;
}
body.white fieldset.River>div.output div.subitem:hover {
    background-color:black;
    border:solid 2px black;
}
body.white fieldset.River>div.output div.subitem.select {
    background-color:black;
    border:solid 2px black;
}
body.white fieldset.Storm {
    border:solid 10px #1f2224;
    background-color:#1f2224;
    color:white;
}
body.white fieldset.Storm>div.output>div.item:hover {
    background-color:black;
    border:solid 2px black;
}
body.white fieldset.Storm>div.output>div.item.select {
    background-color:black;
    border:solid 2px black;
}
body.white fieldset.Action {
    background-color:#0dabda;
    border-top:0;
}
body.white fieldset.Action fieldset.plugin {
    color:black; background-color:white;
    border:0; border-top:solid 2px #CCCCFF;
    box-shadow: 4px 4px 10px 4px #626bd0;
    margin:8px 8px;
}
body.white fieldset.Action fieldset.plugin:hover {
    border-top:solid 2px #6666FF;
}
body.white fieldset.Action fieldset.plugin legend {
    font-size:16px; font-family:monospace;
    color:white; background-color:#339999;
    padding:2px 20px; border:2px solid #99CCFF;
    border-radius:10px 10px 10px 10px;
}
body.white fieldset.Action fieldset.plugin legend:hover {
    background-color:#6ee4e4;
}
body.white fieldset.Action fieldset.plugin div.output{
    color:black;
    padding:10px;
}
body.white fieldset.Action fieldset.plugin div.item input[type=button] {
    letter-spacing:4px;
}
body.white fieldset.Action fieldset.plugin div.item input {
    box-shadow: 4px 4px 10px 1px #626bd0;
}
body.white fieldset.Action fieldset.plugin div.item input[name=cmd] {
    width:160px;
}
body.white fieldset.Action fieldset.plugin div.item select {
    box-shadow: 4px 4px 10px 1px #626bd0;
    margin-top:-2px;
}

body.white fieldset.plugin table {
    color:black; background-color:white;
}
body.white fieldset.plugin table tr {
    background-color:#e1f1ff;
}
body.white fieldset.plugin table tr:hover {
    background-color:#99CCFF;
}
body.white fieldset.plugin table tr.select {
    background-color:#0fbd45;
}
body.white fieldset.plugin table th {
    padding:4px;
    background-color:#99CCFF;
}
body.white fieldset.plugin table td {
    padding:4px;
}
body.white fieldset.plugin table td:hover {
    background-color:#98ecd4;
}

fieldset.command>form.option>div.item input.args {
    width:300px;
}
fieldset.command>form.option>div.item textarea {
    height:160px;
}

fieldset.max>form.option>div.item textarea.args {
    background-color:cyan;
    width:500px;
    height:120px;
}