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.
299 lines
4.3 KiB
299 lines
4.3 KiB
* { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
@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; |
|
} |
|
|
|
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 { |
|
cursor: pointer; |
|
} |
|
|
|
#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 { |
|
position: fixed; |
|
top: 2em; |
|
left: 0; |
|
right: 0; |
|
bottom: 2em; |
|
padding: 0em 1em 0em 1em; |
|
clear: both; |
|
overflow: auto; |
|
z-index: 0; |
|
} |
|
|
|
.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; |
|
}
|
|
|