html {
font-family: 'Open Sans', Helvetica, sans-serif;
}
-
{
box-sizing: border-box;
}
a {
color: #444; text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body > header {
background-color: #202328; position: fixed; top: 0px; bottom: 0px; left: 0px; width: 200px; overflow: scroll;
}
body > header h1 { background-color: #9DE0CA; color: rgba(255, 255, 255, 0.9); text-transform: none; font-weight: 300; font-size: 26px; padding: 25px 15px; } body > header > nav { padding: 10px 15px 15px 15px; } body > header > nav > ul > li { padding-top: 15px; } body > header a { color: rgba(255, 255, 255, 0.5); text-decoration: none; font-weight: 300; display: block; padding: 10px 5px; font-size: 14px; } body > header a.selected { color: rgba(255, 255, 255, 0.8); font-weight: 400; } body > header > nav > ul ul { padding-left: 12px; padding-top: 3px; } body > header > nav > ul ul a { font-size: 13px; }
main {
padding: 28px 40px 40px 240px; background-color: #f5f5f5; min-height: 100%;
}
main > h1 { text-transform: uppercase; font-size: 24px; font-weight: 300; color: #555; margin-bottom: 30px; } main > h1 > input { float: right; width: 180px; height: 22px; margin-top: 2px; } main > h2.edit { margin-top: 30px; } main > form, main > section { background-color: white; padding: 20px; border-radius: 4px; border-bottom: 1px solid #ddd; width: 100%; } /* forms */ main > form > p, form.command > p { margin-bottom: 10px; position: relative; } main > form > p label, form.command > p label { position: absolute; top: 3px; left: 0px; font-size: 13px; color: #444; } main > form > p.errors, form.command > p.errors { padding-left: 100px; color: red; font-size: 13px; } main > form > p span, form.command > p span { display: inline-block; padding-left: 120px; width: 100%; } main > form > p input[type=text], main > form > p textarea, form.command > p input[type=text], form.command > p textarea { width: 100%; border: 1px solid #ddd; font-size: 13px; min-height: 30px; border-radius: 2px; outline: none; padding: 5px; } main > form > p input[type=text]:focus, main > form > p textarea:focus, form.command > p input[type=text]:focus, form.command > p textarea:focus { border-color: #3497FF; } main > form > p textarea, form.command > p textarea { min-height: 80px; } main > form > p.actions, form.command > p.actions { margin-top: 20px; text-align: right; margin-bottom: 0px; } /* tables */ main table { width: 100%; } main table th { text-align: left; padding-left: 5px; padding-bottom: 3px; font-size: 13px; border-bottom: 1px solid #eee; } main table tr:nth-child(odd) td { background-color: #f9f9f9; } main table td { padding: 5px 0px 5px 5px; font-size: 13px; } /* delete */ main table td:last-child { width: 80px; text-align: right; padding-right: 10px; } main table td:last-child a { text-transform: uppercase; font-size: 11px; } main > .actions { text-align: right; margin-top: 20px; padding-right: 10px; } main > .actions a { font-size: 13px; }
/* systems list */ .systems {
margin-bottom: 30px;
}
.systems a {
display: inline-block; position: relative; background-color: white; padding: 10px; border-radius: 4px; border: 1px solid #ddd; margin-right: 20px; margin-bottom: 20px;
}
.systems a .screenshot { background-repeat: no-repeat; background-size: cover; background-color: rgb(255, 200, 200); } .systems a h1 { height: 14px; margin-top: 8px; font-size: 14px; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .systems a p { font-size: 11px; color: #bbb; margin-top: 3px; font-weight: 300; } .systems a div.alert { width: 12px; height: 12px; border-radius: 12px; position: absolute; bottom: -20px; right: 10px; } .systems a div.alert.error { background-color: red; } .systems a div.alert.warning { background-color: yellow; } .systems a div.alert.notice { background-color: blue; }
.systems.portrait a {
width: 201px; height: 338px;
}
.systems.portrait a .screenshot { width: 177px; height: 280px; }
.systems.landscape a {
width: 300px; height: 215px;
}
.systems.landscape a .screenshot { width: 280px; height: 157px; }
/* system page */ meta {
margin-bottom: 40px;
}
#meta img { display: inline-block; vertical-align: top; margin-right: 30px; } #meta.portrait img, #meta.other img { width: 250px; } #meta.landscape img { width: 450px; } dl { display: inline-block; vertical-align: top; width: 450px; } dt, dd { display: inline-block; vertical-align: top; margin-bottom: 10px; font-size: 13px; } dt { width: 100px; font-weight: 600; } dd { width: 340px; line-height: 16px; }
article.graph {
display: inline-block; margin-bottom: 20px; margin-right: 20px;
}
article.graph h2 { padding-left: 55px; margin-bottom: 20px; }
.dygraph-legend {
background-color: rgba(255, 255, 255, 0.5) !important;
}
/* metric collection errors */ errors {
padding-top: 20px;
}
#errors > p { font-size: 13px; } #errors > h1 { font-size: 17px; margin-top: 50px; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 4px; } #errors ul { list-style-type: none; } #errors li { margin-bottom: 15px; } #errors li h1 { font-size: 13px; font-weight: 600; margin-bottom: 3px; line-height: 16px; } #errors li p { font-size: 12px; } #errors div { text-align: right; } #errors form { display: inline-block; margin-top: 10px; }
/* alerts */ .alert {
margin-bottom: 30px;
}
.alert h1 { margin-bottom: 5px; } ul.alerts { list-style-type: none; padding: 0px; font-size: 14px; } .alert h1 + ul.alerts { margin-top: 10px; } ul.alerts li { padding-left: 20px; position: relative; } ul.alerts li::before { position: absolute; left: 0px; top: 1px; content: ' '; width: 12px; height: 12px; border-radius: 12px; } ul.alerts li.warning::before { background-color: yellow; } ul.alerts li.error::before { background-color: red; } ul.alerts li.notice::before { background-color: blue; } .alert p { font-size: 13px; color: #999; }
/* commands / actions */ .command {
margin-top: 20px;
}
.command h1 { margin-bottom: 3px; font-size: 16px; } .command > p { font-size: 12px; line-height: 16px; color: #777; margin-bottom: 20px; }
add-command {
font-size: 13px; margin-top: 30px;
}
no-systems + add-command {
margin-top: 0px;
}
#add-command select { margin-left: 7px; }
existing-actions > p {
font-size: 13px;
}
existing-actions command-col {
width: 160px;
}
existing-actions completed-col {
width: 180px;
}
existing-actions delete-col {
width: 60px;
}
system-nav a {
font-size: 13px; padding: 8px 15px 10px 15px; display: inline-block; border-top-left-radius: 4px; border-top-right-radius: 4px;
}
system-nav a.selected {
background-color: white;
}
system-nav a.has-errors {
color: red;
}
.system-panel {
border-top-left-radius: 0px; border-top-right-radius: 0px;
}
metrics {
padding-top: 40px;
}
actions {
padding-top: 20px;
}
#actions form.command { background-color: #fbfbfb; border: 1px solid #eee; padding: 15px 20px; border-radius: 4px; }
actions-menu {
padding-bottom: 50px;
}
#actions-menu p { display: inline-block; float: left; } #actions-menu form { display: inline-block; float: right; margin-top: 30px; }
h2.stats {
margin-bottom: 10px; margin-top: 20px;
}