perus 0.1.0

data/lib/perus/server/public/css/style.css

@@ -0,0 +1,461 @@
+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;
+}
+
+    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 > 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: 80px;
+}
+
+.systems a {
+    display: inline-block;
+    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.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;
+        width: 450px;
+        margin-right: 30px;
+    }
+
+    #meta dl {
+        display: inline-block;
+        vertical-align: top;
+        width: 300px;
+    }
+
+        #meta dt, #meta dd {
+            display: inline-block;
+            vertical-align: top;
+            margin-bottom: 10px;
+            font-size: 13px;
+        }
+
+        #meta dt {
+            width: 100px;
+            font-weight: 600;
+        }
+
+        #meta dd {
+            width: 190px;
+            line-height: 16px;
+        }
+
+article.graph {
+    display: inline-block;
+    margin-bottom: 20px;
+    margin-right: 20px;
+}
+    
+    article.graph h2 {
+        padding-left: 55px;
+        margin-bottom: 20px;
+    }
+
+/* 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: 15px;
+    }
+
+    .alert ul {
+        list-style-type: none;
+        padding: 0px;
+        font-size: 14px;
+    }
+
+        .alert ul li {
+            padding-left: 24px;
+            position: relative;
+        }
+
+        .alert ul li::before {
+            position: absolute;
+            left: 0px;
+            top: 1px;
+            content: ' ';
+            width: 15px;
+            height: 15px;
+            border-radius: 15px;
+        }
+
+        .alert.warning ul li::before {
+            background-color: yellow;
+        }
+
+        .alert.error ul li::before {
+            background-color: red;
+        }
+
+        .alert.notice ul li::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;
+}
+
+    #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;
+    }