volcanos/publish/chrome/contexts.css

fieldset.contexts {
    color:white;
    position:fixed;
    background:radial-gradient(black, #00000073);
}
fieldset.contexts legend {
    text-align:left;
    cursor:pointer;

    background:radial-gradient(black, #00000073);
}
fieldset.contexts form.option div.item {
    float:left; margin-right:3px;
    min-height:25px; vertical-align:middle;
}
fieldset.contexts input[type=button] {
    background-color:#FF9900; color:white;
    border-radius:10px 10px 10px 10px;
    border:2px solid #FF9900;
}
fieldset.contexts input[type=button]:hover {
    background-color:#FFCC33;
    border:2px solid #FFCC33;
}
fieldset.contexts input[type=text] {
    background-color:white; color:black;
    border-radius:6px 6px 6px 6px;
    border:2px solid #14a58e;
}
fieldset.contexts input[type=text]:hover {
    background-color:cyan;
}
fieldset.contexts div.input textarea {
    border-radius:6px;
    border:2px solid #14a58e;
}
fieldset.contexts select {
    background-color:#99CC66; color:white;
    border-radius:10px 10px 10px 10px;
    border:2px solid #99CC66;
}

fieldset.contexts div.output {
    clear:both;
    overflow:auto;
}
fieldset.contexts div.status div.item {
    float:left; padding:4px;
    height:18px;
}
fieldset.contexts div.status div.item>label {
    font-size:10px;
    /* color:#504242e0; */
}

fieldset.contexts table {
    color:white;
    border:0; white-space:pre;
}
fieldset.contexts table tr {
    background-color:#e1f1ff1f;
}
fieldset.contexts table th {
    background-color:#99CCFF;
    padding:0 4px;
}
fieldset.contexts table td {
    text-align:left;
    padding:0 4px;
}
fieldset.contexts table.content tr:hover {
    background-color:green;
}
fieldset.contexts 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;
}

body>div.toast {
    background:#0e3369b3; color:yellow;
    position:fixed; z-index:100;
    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;
    z-index:30;
    min-width:80px;
}
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:50;
}
body>div.input textarea {
    box-shadow: 4px 4px 10px 1px #626bd0;
    border:2px inset #14a58e;
    width:165px; height:60px;
    background-color: cyan;
    padding:4px;

}
body>div.input div.item {
    float:left;
}