OPNFV Infra Dashboard

JIRA: RELENG-12

Change-Id: I7451a3d234e4e5d946cdb905d5720be6159b6544
Signed-off-by: jose.lausuch <jose.lausuch@ericsson.com>

1 files changed, 387 insertions, 0 deletions

diff --git a/tools/infra-dashboard/css/theme.css b/tools/infra-dashboard/css/theme.css
new file mode 100644
index 00000000..59ae59f0
--- /dev/null
+++ b/tools/infra-dashboard/css/theme.css
@@ -0,0 +1,387 @@
+.container {
+    width: 100%
+}
+#hs-component {
+    background-color: inherit;
+    padding: 0
+}
+#hs-component .container {
+    padding: 0;
+    width: 100%
+}
+#comp-menu {
+    background-color: #FFFFFF;
+    z-index: 1;
+    padding: 0
+}
+#comp-menu .cont,
+.demo {
+    padding: 0 50px
+}
+#comp-menu h2,
+#comp-menu h2 a {
+    color: #000000;
+    font-weight: lighter;
+    text-transform: inherit
+}
+#comp-menu h2 a:hover {
+    color: #8085e8
+}
+
+.blink_me {
+  animation: blinker 1.5s linear infinite;
+}
+
+@keyframes blinker {
+  20% { opacity: 0.4; }
+}
+
+
+a.btn.btn-theme {
+    color: #eeeaea;
+    background-color: #007E88;
+    border: 1px solid #007E88;
+    border-bottom: 0;
+    border-radius: 0;
+    font-weight: 400;
+    margin: 0 5px 0 0
+}
+a.btn.btn-theme:hover {
+    color: #90ef7f
+}
+
+
+.btn-book {
+    color: #fff;
+    background-color: #337ab7;
+    border-color: #2e6da4;
+    display: inline-block;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    touch-action: manipulation;
+    cursor: pointer;
+    padding: 2px 6px;
+    font-size: 10px;
+    font-weight: bold;
+    line-height: 1.1333333;
+    border-radius: 6px;
+    background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%);
+}
+
+a.btn.btn-theme.noselected {
+    background-color: #FFF;
+    color: #313131;
+    opacity: 1
+}
+
+a.btn.btn-theme.disabled {
+    background-color: #FFF;
+    color: #313131;
+    opacity: 1
+}
+.demo {
+    background-color: #f6f6f6
+}
+.demo .demo-name {
+    color: #000000;
+    font-weight: lighter;
+    text-transform: none;
+    padding-left: 15px;
+    text-align: center;
+    display: inline;
+    margin: 0 10px
+}
+#chart-switcher {
+    text-align: center;
+    padding: 30px 0
+}
+.demo #chart-switcher #next-example,
+.demo #chart-switcher #previous-example {
+    font-size: 30px;
+    padding: 0 10px;
+    color: #888
+}
+#demo-buttons {
+    text-align: center;
+    padding: 30px 0
+}
+#demo-buttons a {
+    background-color: #ddd
+}
+#demo-buttons a:hover {
+    background-color: #40818b
+}
+.demo .chart-container {
+    position: relative;
+    background-color: #fff;
+    padding: 30px 0
+}
+.demo .chart-container #previous-example {
+    position: absolute;
+    top: 50%;
+    left: -30px;
+    font-size: 70px;
+    color: #888
+}
+.demo .chart-container #next-example {
+    position: absolute;
+    top: 50%;
+    right: -30px;
+    font-size: 70px;
+    color: #888
+}
+.sidebar-eq-fill {
+    background-color: #f6f6f6
+}
+@media screen and (max-width: 400px) {
+    #chart-switcher,
+    .demo .chart-container,
+    .sidebar-wrapper .sidebar-eq {
+        padding: 0
+    }
+    #small-switcher {
+        text-align: center
+    }
+    .demo #chart-switcher #next-example,
+    .demo #chart-switcher #previous-example {
+        font-size: 20px
+    }
+    #sidebar-close {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: #FFFFFF;
+        color: #fff;
+        border-radius: 0;
+        z-index: 100;
+        cursor: pointer;
+        padding: 10px;
+        visibility: hidden
+    }
+    .toggled #sidebar-close {
+        visibility: visible
+    }
+}
+@media screen and (min-width: 400px) and (max-width: 768px) {
+    .demo {
+        padding: 15px
+    }
+    #sidebar-close {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: #FFFFFF;
+        color: #fff;
+        border-radius: 0;
+        z-index: 100;
+        cursor: pointer;
+        padding: 10px;
+        visibility: hidden
+    }
+    .toggled #sidebar-close {
+        visibility: visible
+    }
+}
+#hs-below {
+    background-color: #eeeaea;
+    font-size: 18px;
+    line-height: 26px
+}
+#hs-below h3 {
+    font-size: 30px;
+    line-height: 30px;
+    font-weight: bolder;
+    margin-top: 0;
+    margin-bottom: 15px
+}
+#hs-below p,
+ul {
+    font-size: 1pc
+}
+#hs-below .box {
+    position: relative;
+    background-color: #fff;
+    padding: 14px 22px
+}
+#hs-below .box .box-content {
+    margin-bottom: 40px
+}
+#hs-below .box .button {
+    position: absolute;
+    bottom: 0;
+    margin-bottom: 10px
+}
+#hs-below .box.purple {
+    border-bottom: 8px solid #8085e8
+}
+#hs-below .box.green {
+    border-bottom: 8px solid #90ef7f
+}
+#hs-below .box .book {
+    text-align: center
+}
+#hs-below .box .book img {
+    max-height: 200px
+}
+@media screen and (max-width: 768px) {
+    #hs-below h3 {
+        margin-top: 30px
+    }
+    #hs-below .box-1 h3 {
+        margin-top: 0
+    }
+    #hs-below .box .book {
+        text-align: left
+    }
+}
+@media screen and (min-width: 768px) and (max-width: 992px) {
+    #hs-below h3 {
+        margin-top: 30px
+    }
+    #hs-below .box-1 h3,
+    #hs-below .box-2 h3 {
+        margin-top: 0
+    }
+    #hs-below .box-1 .box,
+    #hs-below .box-2 .box {
+        min-height: 260px
+    }
+    #hs-below .box-3 .box,
+    #hs-below .box-4 .box {
+        min-height: 280px
+    }
+}
+@media screen and (min-width: 992px) and (max-width: 1200px) {
+    #hs-below h3 {
+        margin-top: 30px
+    }
+    #hs-below .box-1 h3,
+    #hs-below .box-2 h3 {
+        margin-top: 0
+    }
+    #hs-below .box-1 .box,
+    #hs-below .box-2 .box {
+        min-height: 255px
+    }
+    #hs-below .box-3 .box,
+    #hs-below .box-4 .box {
+        min-height: 280px
+    }
+}
+@media screen and (min-width: 1200px) {
+    #hs-below .box {
+        min-height: 390px
+    }
+}
+#hs-bottom,
+#hs-bottom a {
+    color: #eeeaea
+}
+#hs-bottom {
+    background-color: #FFFFFF;
+    font-size: 1pc;
+    line-height: 20px
+}
+#hs-bottom a:focus,
+#hs-bottom a:hover {
+    color: #90ef7f
+}
+#hs-bottom a.button {
+    color: #313131
+}
+#hs-bottom a.button:focus,
+#hs-bottom a.button:hover {
+    color: #eeeaea
+}
+#hs-bottom h3 {
+    font-size: 24px;
+    line-height: 24px;
+    font-weight: lighter
+}
+#hs-bottom h4 {
+    font-size: 14px
+}
+#hs-bottom .grayed {
+    color: #d6d1d1;
+    margin: 0
+}
+@media screen and (max-width: 768px) {
+    #hs-bottom [class*=col-] {
+        border-bottom: 1px dotted #eeeaea;
+        padding-bottom: 15px
+    }
+    #hs-bottom [class*=col-]:nth-child(1) h3 {
+        margin-top: 0
+    }
+    #hs-bottom [class*=col-]:last-child {
+        border-bottom: 0;
+        padding-bottom: 0
+    }
+}
+@media screen and (min-width: 768px) and (max-width: 992px) {
+    #hs-bottom [class*=col-] {
+        min-height: 350px;
+        border-right: 1px dotted #eeeaea
+    }
+    #hs-bottom [class*=col-]:last-child,
+    #hs-bottom [class*=col-]:nth-child(2) {
+        border-right: 0
+    }
+}
+@media screen and (min-width: 992px) and (max-width: 1200px) {
+    #hs-bottom [class*=col-] {
+        min-height: 300px;
+        border-right: 1px dotted #eeeaea
+    }
+    #hs-bottom [class*=col-]:last-child,
+    #hs-bottom [class*=col-]:nth-child(2) {
+        border-right: 0
+    }
+}
+@media screen and (min-width: 1200px) {
+    #hs-bottom [class*=col-] {
+        min-height: 25pc;
+        border-right: 1px dotted #eeeaea
+    }
+    #hs-bottom [class*=col-]:last-child {
+        border-right: 0
+    }
+}
+
+
+
+.button{
+  border:1px solid #333;
+  background:#6479fd;
+}
+.button:hover{
+  background:#a4a9fd;
+}
+.dialog{
+  border:5px solid #666;
+  padding:10px;
+  background:#3A3A3A;
+  position:absolute;
+  display:none;
+}
+.dialog label{
+  display:inline-block;
+  color:#cecece;
+}
+input[type=text]{
+  border:1px solid #333;
+  display:inline-block;
+  margin:5px;
+}
+#btnOK{
+  border:1px solid #000;
+  background:#ff9999;
+  margin:5px;
+}
+
+#btnOK:hover{
+  border:1px solid #000;
+  background:#ffacac;
+}
+