volcanos/page/index.css

body {
    margin:0; padding:0;
    background:black;
    color:cyan;
}
a {
    color:yellow;
}
h1, h2, h3 {
    clear:both;
}
h1:hover, h2:hover, h3:hover {
    background:green;
    cursor:pointer;
}
div.item {
    cursor:pointer;
}
div.code {
    background-color:#343a3445; 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; clear:both;
}
div.hidden {
    display:none;
}
div.story {
    text-align:left;
}
p.story[data-type=brief] {
  font-family:cursive;
  font-weight:bolder;
  font-size:20px;
}
div.story[data-type=spark] {
    background-color:#2169a9a6; color:white;
    box-shadow:4px 4px 10px 1px #626bd0;
    padding:4px 10px; margin:10px 0px;
    border-left:solid 4px blue;
    font-family:monospace;
    white-space:pre;
    cursor:copy;
}
div.story[data-type=spark] span:hover {
    box-shadow: 4px 4px 10px 1px #29318e;
    background-color:#c10c8a;
    cursor:copy;
}

.hidden {
    display:none;
}
select {
    height:25px; font-size:14px;
    box-shadow: 4px 4px 10px 1px #626bd0;
    background-color:black; color:cyan;
    padding:0 10px;
    cursor:pointer;
}
option {
    font-family:monospace;
}
textarea {
    width:400px; height:60px;
    background-color:cyan;
}

input[type=button] {
    background-color:black; color:cyan;
    letter-spacing:4px;
    padding-left:10px;
    cursor:pointer;
    font-family:monospace;
}
input[type=button]:hover {
    background-color:gray; color:cyan;
}
/* input[type=password] { */
/*     width:82px; height:21px; font-size:16px; */
/*     box-shadow: 4px 4px 10px 1px #626bd0; */
/*     background-color:cyan; color:black; */
/*     padding: 0 4px; */
/* } */
input[type=text] {
    width:82px; height:21px; font-size:16px;
    box-shadow:4px 4px 10px 1px #626bd0;
    background-color:cyan; color:black;
    padding:0 4px;
}
input[type=text]:hover {
    background-color:white;
}
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;
}
input[name=cmd] {
    background-color:black; color:white;
    width:240px;
}
input[name=cmd]:hover {
    background-color:white; color:black;
}

table.layout td.content {
    position:relative;
}

table.layout div.toggle>div {
    display: table-cell;
    vertical-align: middle;
    height:95px;
    color:white;
}
table.layout div.toggle {
    position:absolute; top:20%;
    background:#e1aeae45;
    height:100px;
}
table.layout div.toggle.display>div {
    height:20px; width:100px;
    text-align:center;
    color:white;
}
table.layout div.toggle.display {
    margin-top:-10px;
    height:10px; width:100px;
    position:sticky; left:20%;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}
table.layout div.toggle.project {
    left:0px;
    min-width:10px;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
}
table.layout div.toggle.profile {
    right:0px;
    min-width:10px;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
}
table.layout {
    margin:0; border:0; padding:0;
    border-spacing:0;
}
table.layout tr {
    margin:0; border:0; padding:0;
}
table.layout td {
    margin:0; border:0; padding:0;
    vertical-align:top;
}
table.layout th {
    margin:0; border:0; padding:0;
}

table.content {
    border:0; white-space:pre;
    font-size:14px; font-family:monospace;
    overflow: auto;
}
table.content tr {
    background-color:#04272f45;
}
table.content tr.select {
    background-color:green;
}
table.content tr:hover {
    background-color:green;
}
table.content th {
    background-color:#0fbd45;
    padding:2px 6px;
    cursor:pointer;
}
table.content th:hover {
    background-color:red;
}
table.content td {
    padding:2px 6px;
    overflow:auto;
    max-width:800px;
    white-space:break-spaces;
}
table.content td.done {
    background-color:green;
}
table.content td.select {
    background-color:red;
}
table.content td:hover {
    background-color:red;
}

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:blue;
}
td>input[type=button][name=stop] {
    background-color:red;
}

legend {
    box-shadow:4px 4px 20px 4px #626bd0;
    cursor:pointer;
}
fieldset {
    margin:0; border:0; padding:0;
}
fieldset>div.legend {
    float:left; padding:0 10px; margin-right:3px;
    height:25px; font-size:18px;
    background-color:darkcyan;
    cursor:pointer;
}
fieldset>form.option {
    float:left;
    display:contents;
}
fieldset>form.option>div.item {
    float:left; margin-right:3px;
    min-height:25px; vertical-align:middle;
}
fieldset>form.option>div.item>label {
    display:none;
}
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.long {
    width:240px;
}
fieldset>form.option>div.item input.args.full {
    width:480px;
}
fieldset>form.option>div.item input.args[name=ID] {
    width:48px;
}
fieldset>form.option>div.item input.args[name=id] {
    width:48px;
}
fieldset>form.option>div.item input.args[name=limit] {
    width:48px;
}
fieldset>form.option>div.item input.args[name=offset] {
    width:48px;
}
fieldset>form.option>div.item input.args[name=offend] {
    width:48px;
}
fieldset>form.option>div.item.textarea {
    clear:both; margin-top:4px;
}

fieldset>div.action {
    float:left; display:contents;
}
fieldset>div.action>div.item {
    float:left; margin-right:3px;
    vertical-align:middle;
}
fieldset>div.action>div.item.space {
    width:10px;
}
fieldset div.action>div.item>label {
    display:none;
}
fieldset>div.status {
    clear:both;
}
fieldset>div.status>div.item {
    float:left; padding:4px;
    height:18px;
}
fieldset>div.status>div.item>label {
    font-size:10px; color:#bdb8b8e0;
}

fieldset>div.output {
    clear:both; overflow:auto;
    position:relative;
}
fieldset>div.output div.project {
    min-width:88px; max-width:240px;
    float:left; overflow:auto;
}
fieldset>div.output div.project div.item {
    padding:2px 10px; text-align:left;
    clear:both; cursor:pointer;
    white-space:pre;
}
fieldset>div.output div.project div.item.select {
    background-color:red;
}
fieldset>div.output div.project div.item:hover {
    background-color:red;
}
fieldset>div.output div.project div.list {
    margin-left:10px;
}
fieldset>div.output td.project {
    background-color:#435f8c8c;
}
fieldset>div.output td.profile {
    background-color:#71909c91;
}
fieldset>div.output td.profile div.profile {
    overflow:auto;
}

fieldset.panel>legend {
    display:none;
}
fieldset.plugin {
    box-shadow:2px 2px 10px 4px #626bd0;
    background-color:#061c3c9e;
    margin:10px; padding:10px;
}
fieldset.plugin>div.status {
    border-top:1px solid darkcyan;
}
fieldset.story>legend {
    display:block;
    padding:2px 20px;
    letter-spacing:4px;
}
fieldset.story>div.status {
    border-top:1px solid darkcyan;
}
fieldset.output {
    margin:0; padding:0;
}
fieldset.output>legend {
    display:none;
}
fieldset.output>form.option {
    display:none;
}
fieldset.output>div.action {
    display:none;
}
fieldset.output>div.status {
    display:none;
}
fieldset.float {
    background-color:#023531cf;
    margin:0px; padding:0px;
    position:absolute;
}
fieldset.float>legend {
    display:none;
}
fieldset.float table {
    color:white;
}
body>fieldset.input {
    position:fixed; top:32px;
    background-color:#0d4142a6;
    position:fixed;
}
body>fieldset.input div.output {
    max-height:400px;
}
body>fieldset.input table {
    color:white;
}
body>fieldset.input td {
    word-break:keep-all;
}
body>fieldset.input.key {
}
body>fieldset.input.date {
}
body>fieldset.input.date table {
    text-align:center;
    width:280px;
}
body>fieldset.input.date table td:hover {
    background-color:red;
}

body>div.toast {
    background:#0e3369b3; color:yellow;
    position:fixed;
    padding:5px; overflow:auto;
}
body>div.toast a {
    color:yellow;
}
body>div.toast div.title {
    float:left; word-break:break-all;
    color:#cae850; font-size:14px;
    cursor:copy;
}
body>div.toast div.duration {
    color:gray; font-size:14px;
    float:right;
    cursor:pointer;
}
body>div.toast div.content {
    text-align:center;
    white-space:pre;
    clear:both;
}
body>div.toast div.action div.item {
    float:left;
}
body>div.toast div.progress {
    height:10px; border:solid 2px green;
    margin-left:-2px;
    clear:both;
}
body>div.toast div.progress div.current {
    height:10px; background:red;
}

body>div.carte {
    position:fixed;
    background:#295b61;
    color:white;
    padding:4px;
    min-width:80px;
    z-index:0;
}
body>div.carte div.item {
    padding:3px 12px;
}
body>div.carte div.item:hover {
    background:red;
}
body>div.input {
    position:fixed;
    background-color:#0d4142a6;
    z-index:0;
}
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 {
    box-shadow: 4px 4px 10px 1px #626bd0;
    border:2px inset #14a58e;
    width:171px; height:60px;
    background-color: cyan;
    padding:4px;
}
body>div.input div.item {
    float:left;
}
body>div.input.login {
    padding:10px;
}
body>div.input.login input {
    font-size:18px;
}

body>div.upload {
    background:black; color:yellow;
    position:fixed;
    padding:5px;
}
body>div.upload div.item {
    float:left;
}
body>div.upload div.output {
    border:solid 1px red;
    clear:both;
}
body>div.upload div.progress {
    width:0; height:10px;
    background:red;
}
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(68,92,106,0.7); */
    background-color:rgba(5,34,56,0.75);
    /* background-color:#052238bf; */
    color:white;
}
body.white select {
    background-color:#99CC66; color:white;
    border-radius:10px 10px 10px 10px;
    border:2px solid #99CC66;
}
body.white input[type=text] {
    background-color:white; color:black;
    border:2px solid #14a58e;
    border-radius:6px;
}
body.white input[type=text]:hover {
    background-color:cyan;
}
body.white input[type=button] {
    background-color:#FF9900; color:white;
    border:2px solid #FF9900;
    border-radius:10px;
}
body.white input[type=button]:hover {
    background-color:#FFCC33;
    border:2px solid #FFCC33;
}
body.white td>input[type=button][name=remove] {
    background-color:red;
}
body.white td>input[type=button][name=create] {
    background-color:blue;
}
body.white input[name=cmd] {
    background-color:black; color:white;
    width:240px;
}
body.white input[name=cmd]:hover {
    background-color:white; color:black;
}

body.white table {
    color:black;
}
body.white table tr {
    background-color:#e1f1ff1f;
}
body.white table th {
    background-color:#99CCFF;
}
body.white table.content tr:hover {
    background-color:green;
}
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 fieldset>div.legend {
    /* background-color:honeydew; */
}
body.white fieldset>div.status>div.item>label {
    font-size:10px; color:#cefbfbe0;
}

body.white fieldset.Action {
    color:black;
}
body.white fieldset.Action>div.action {
    color:white;
}
body.white fieldset.Action>div.action div.item {
    height:21px;
}
body.white fieldset.Action fieldset.plugin {
    background-color:#ffffff78;
}
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>div.input textarea {
    border-radius:6px;
    border:2px solid #14a58e;
}

body.print {
    background-color:white;
    color:black;
}
body.print a {
    color:blue;
}
body.print select {
    box-shadow:0px 0px 0px 0px #626bd0;
}
body.print input[type=text] {
    box-shadow:0px 0px 0px 0px #626bd0;
}
body.print div.code {
    background-color:white;
}
body.print legend {
    box-shadow:0px 0px 0px 0px #626bd0;
}
body.print fieldset.Header {
    background-color:white;
    color:black;
}
body.print fieldset.River {
    background-color:white;
    color:black;
}
body.print fieldset.River>div.output div.list div.item {
    background-color:white;
}
body.print fieldset.River>div.output div.item.select {
    background-color:white;
    border:solid 2px red;
}
body.print fieldset.Action {
    background-color:white;
}
body.print fieldset.Action fieldset.plugin {
    padding-left:40px;
}
body.print fieldset.Footer {
    background-color:white;
    color:black;
}

body.mobile select {
    font-size:18px;
    margin-top:5px;
}
body.mobile input {
    font-size:18px;
}
body.mobile input[type=text] {
    margin-top:5px;
    height:26px;
}
body.mobile fieldset.Header.head {
    position:fixed; top:0;
    width:-webkit-fill-available;
    height:2em; font-size:24px;
    background-color:#000000b8;
}
body.mobile fieldset.Header.head div.output {
    height:2em;
}
body.mobile fieldset.Header>div.output>div {
    height:1.5em;
}
body.mobile fieldset.Header>div.output div.menu {
    height:1.5em;
}
body.mobile fieldset.Header.head div.state.time {
    display:none;
}
body.mobile fieldset.River.left {
    position:fixed; top:48px;
    background-color:#243950bf;
    min-width:240px; font-size:24px;
    /* width:-webkit-fill-available; */
}
body.mobile fieldset.River>div.output div.list div.item {
    font-size:24px;
}
body.mobile fieldset.Action.main.cmd {
    margin-top:0; margin-bottom:0;
}
body.mobile fieldset.Action.main {
    margin-top:48px; margin-bottom:64px;
}
body.mobile fieldset.Footer.foot {
    position:fixed; bottom:0;
    width:-webkit-fill-available;
    height:64px; font-size:24px;
    background-color:#000000b8;
    display:none;
}
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>div.carte {
    font-size:24px;
}
body.mobile>div.input.login input {
    font-size:24px
}
body.en input[type=button] {
    letter-spacing:2px;
}