Servicedock: Webgui for Docker Swarm. Manage Docker Swarm a a Service.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

394 lines
6.3 KiB

* {
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;
}
svg {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
z-index: -1;
position: relative;
}
form {
padding: .5em 0 1em 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
ul li {
margin-left: 1em;
}
@media (max-width: 45em) {
form {
flex-direction: column;
flex-wrap: wrap;
}
}
form > * {
flex-grow: 1;
}
form input[type="submit"] {
flex-grow: 0;
}
form input#msg {
flex-grow: 4;
}
.buttongroup {
flex-grow: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.buttongroup .toolbutton {
flex-grow: 1;
flex-basis: 0;
text-align: center;
text-align: center;
cursor: pointer;
}
.toolbutton label img {
height: 1.5em;
}
.toolbutton input {
display:none;
}
.toolbutton.bad:first-line,
.toolbutton.good:first-line {
font-weight: bold;
}
.toolbutton {
border: 1px solid black;
background-color: #777;
text-decoration: none;
margin: 1px;
padding: 1px;
}
.toolbutton.bad {
background-color: #f77;
}
.toolbutton.good {
background-color: #7f7;
}
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;
}
#status {
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0 1em 0 1em;
text-align: right;
}
@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;
}
#menuicon, #imagetools img, #close {
cursor: pointer;
height: 1em;
width: auto;
}
#menu {
clear: both;
position: relative;
padding: 1em 0em 1em 0em;
margin: 0 1em 0 1em;
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;
}
#main, #logs, #console {
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 {
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}