servicedock/nodejs/public/stylesheets/servicedock.css

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: blue;
}

@media (min-resolution: 120dpi) {
  html {
    font-size: 120%;
  }
}

pre, p {
  padding: .5em 0 1em 0;
}

div {
  overflow: auto;
}

#main svg, #preview svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  position: relative;
  display: block;
  margin: auto;
}
#preview svg {
  padding-top: 2em;
}
ul li {
  margin-left: 1em;
}

form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
}

form fieldset {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto; /* or: content */
}

fieldset {
  margin: .5ex;
  padding: .5ex;
  border: 1px solid black;
}

select {
  width: 100%;
}

.listbutton {
  width: 100%;
}

input:invalid, select:invalid {
  background-color: #FDD;
}

form #name:valid ~ button#dosend, form !button#dosend ~ #createpreview:invalid, form:invalid button#doappend, input:invalid ~ button.add {
  opacity: .5;
  pointer-events: none;
}

form:invalid input[type=submit] {
  opacity: .5;
  pointer-events: none;
}

table {
  width: 100%;
}
tr { 
  /*display: flex;
  align-items: stretch;    */
}
td:last-child {
  /*flex:1; *//* last td to fill remaining width */
}

table.docker {
  border-collapse: collapse; 
}

table.docker tbody tr {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

table.docker li {
  list-style-type: none;
}

table.docker li+li {
  border-top: 1px solid black;
}

.dead {
  background-color: red;
}
.stopped {
  background-color: firebrick1;
}
.restarting {
  background-color: lightblue;
}
.paused {
  background-color: lightgrey;
}
.running {
  background-color: lightgreen;
}

.warning {
  padding: 1em;
  margin: 1em;
  background-color: red;
  color: yellow;
  font-size: large;
  border: 2px inset yellow;
}

#header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  padding: 0 1em 0 1em;
  background-color: blue;
  color: white;
}
#header #togglemenu {
  display: inline;
  float: right;
}
#header h1 {
  font-weight: bold;
  font-size: 100%;
  display: inline;
}

#statusbar {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 1em 0 1em;
  color: white;
}

#status {
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 0 1em 0 1em;
  padding: 0 1em 0 1em;
}
#good {
  color: green;
}
#authentication {
  color: yellow;
}
#bad {
  color: red;
}
@media (max-width: 45em) {
  #username {
    display: none;
  }
}
#status.error {
  background-color: red;
  color: black;
}
#status.notice {
  background-color: yellow;
  color: black;
}
#status.success {
  background-color: lightgreen;
  color: black;
}

.btn {
  cursor: pointer;
  height: 1em;
  width: auto;
  border: 1px dotted blue;
  opacity: 0.8;
}

.btn:hover {
  border: 1px dotted white;
  opacity: 2.0;
}

#menu {
  clear: both;
  position: relative;
  padding: .5em 0 .5em 0;
  margin: 1em 0 0 0;
  float: right;
  background-color: lightblue;
  list-style-type: none;
  border: 1px solid black;
  z-index: 1000;
}
#menu li {
  margin-left: 0;
}
#menu a {
  text-decoration: inherit;
  color: inherit;
}
#menu li {
  padding: 0 1em 0 1em;
}
#menu li, #menu li * {
  cursor: pointer;
  text-align: left;
}
#menu li + li {
  border-top: 1px solid black;
  margin-top: 0.5em;
  padding-top: 0.5em;
}
#menu li input {
  display: none;
}
#menu li:hover {
  background-color: #777;
}

#main, #logs, #console, #create, #login {
  position: fixed;
  top: 1.5em;
  left: 0;
  right: 0;
  padding: 1em 1em 1em 1em;
  clear: both;
  overflow: auto;
  z-index: 0;
  bottom: 1.5em;
}

#main, #create, #login {
  background-color: white;
}

#popup {
  position: fixed;
  background-color: lightblue;
  border: .1ex solid blue;
  text-align: center;
}

.clear {
  clear: both;
}
#msgs .msg {
  border: 1px solid black;
  margin: 1ex;
  border-radius: 2ex;
  -moz-border-radius: 2ex;
  -webkit-border-radius: 2ex;
  display: block;
  width: auto;
  height: auto;
  max-width: 60%;
}
#msgs .me {
  float: left;
  background-color: lightgray;
}
#msgs .other {
  float: right;
  background-color: lightyellow;
}
#msgs .msg .header {
  border: 1px solid black;
  border-radius: 2ex 2ex 0 0;
  -moz-border-radius: 2ex 2ex 0 0;
  -webkit-border-radius: 2ex 2ex 0 0;
  /*border-radius: 2ex;
  -moz-border-radius: 2ex;
  -webkit-border-radius: 2ex;*/
  margin-bottom: .25ex;
  padding-bottom: .25ex;
  position: relative;
  height: 1em;
  padding: .5ex 1ex .5ex 1ex;
}
#msgs .msg .header {
  background-color: lightgreen;
}
#msgs .msg .header .date {
  font-size: xx-small;
  float: left;
  padding: 0 1ex 0 0;
}
#msgs .msg .header .sender {
  font-size: small;
  float: right;
  padding: 0 0 0 1ex;
}
#msgs .msg .text {
  float: left;
  padding: .5ex 1ex .5ex 1ex;
}
#msgs .msg img {
  display: block;
  width: 99%;
}

#preview img {
  height: 4em;
}

#logs {
  background-color: lightgray;
}
#logs .stdout {
  color: black;
}
.stderr {
  color: red;
}
.done {
  color: green;
}

#console {
  background-color: black;
  color: white;
  overflow: none;
}
#screen {
  position: fixed;
  top: 2em;
  bottom: 4em;
  left: 0;
  right: 0;
  overflow: auto;
  padding: 1ex;
}
#bash {
  position: fixed;
  bottom: 1.5em;
  left: 0;
  right: 0;
  padding: 0;
}
.bold {font-weight: bold}
.dim {color: grey}
.underline {text-decoration: underline}
.blink {animation: blinker 1s linear infinite}
@keyframes blinker {50% { opacity: 0.0;}}
.reverse {color: black; background-color: white}
.hidden {color: black}
.fgdefault {color: white}
.fgblack {color: black}
.fgred {color: red}
.fggreen {color: green}
.fgyellow {color: yellow}
.fgblue {color: blue}
.fgmagenta {color: magenta}
.fgcyan {color: cyan}
.fglightgrey {color: lightgrey}
.fgdarkgrey {color: darkgrey}
.fglightred {color: lightred}
.fglightgreen {color: lightgreen}
.fglightyellow {color: lightyellow}
.fglightblue {color: lightblue}
.fglightmagenta {color: lightmagenta}
.fglightcyan {color: lightcyan}
.fgwhite {color: white}
.bgdefault {background-color: black}
.bgblack {background-color: black}
.bgred {background-color: red}
.bggreen {background-color: green}
.bgyellow {background-color: yellow}
.bgblue {background-color: blue}
.bgmagenta {background-color: magenta}
.bgcyan {background-color: cyan}
.bglightgrey {background-color: lightgrey}
.bgdarkgrey {background-color: darkgrey}
.bglightred {background-color: lightred}
.bglightgreen {background-color: lightgreen}
.bglightyellow {background-color: lightyellow}
.bglightblue {background-color: lightblue}
.bglightmagenta {background-color: lightmagenta}
.bglightcyan {background-color: lightcyan}
.bgwhite {background-color: white}