UI initial implementation.
[validation.git] / ui / src / main / webapp / resources / css / style.css
diff --git a/ui/src/main/webapp/resources/css/style.css b/ui/src/main/webapp/resources/css/style.css
new file mode 100755 (executable)
index 0000000..7680da0
--- /dev/null
@@ -0,0 +1,611 @@
+/* 
+ * Copyright (c) 2019 AT&T Intellectual Property. All rights reserved.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.img-arredondadaSide {
+     border-radius: 100%;
+    w overflow: hidden;
+     height: 100px;
+     width:100px;
+     background:#6495ED;
+     margin-top:10px;
+     margin-left: 5px;
+}
+ .img-arredondadaChat {
+     border-radius: 100%;
+     overflow: hidden;
+     height: 50px;
+     width:50px;
+     background: black;
+}
+ .tema{
+     color:red;
+}
+ .chat-container {
+     width: 400px;
+     height: 100%;
+     margin: 0 auto;
+}
+ .corStatusFinalizado{
+     color:green;
+}
+ .corNormal{
+     color:#3366FF;
+}
+ .corStatusNaoFinalizado{
+     color:red;
+}
+ .alinharCentro{
+     text-align: center;
+}
+ .user-panel {
+     padding: 10px;
+}
+ .user-panel:before, .user-panel:after {
+     display: table;
+     content: " ";
+}
+ .user-panel:after {
+     clear: both;
+}
+ .user-panel > .image > img {
+     width: 45px;
+     height: 45px;
+}
+ .user-panel > .info {
+     font-weight: 600;
+     padding: 5px 5px 5px 15px;
+     font-size: 14px;
+     line-height: 1;
+}
+ .user-panel > .info > p {
+     margin-bottom: 9px;
+}
+ .user-panel > .info > a {
+     text-decoration: none;
+     padding-right: 5px;
+     margin-top: 3px;
+     font-size: 11px;
+     font-weight: normal;
+}
+ .user-panel > .info > a > .fa, .user-panel > .info > a > .ion, .user-panel > .info > a > .glyphicon {
+     margin-right: 3px;
+}
+ #wrapper {
+     padding-left: 0;
+     -webkit-transition: all 0.5s ease;
+     -moz-transition: all 0.5s ease;
+     -o-transition: all 0.5s ease;
+     transition: all 0.5s ease;
+     margin-top: -20px;
+}
+ #wrapper.toggled {
+     padding-left: 250px;
+}
+ #sidebar-wrapper {
+     z-index: 1000;
+     position: absolute;
+     left: 250px;
+     width: 0;
+      height:100vh;
+     margin-left: -250px;
+     overflow-y: auto;
+     background: #cccccc;
+     -webkit-transition: all 0.5s ease;
+     -moz-transition: all 0.5s ease;
+     -o-transition: all 0.5s ease;
+     transition: all 0.5s ease;
+}
+ #wrapper.toggled #sidebar-wrapper {
+     width: 250px;
+}
+ #page-content-wrapper {
+     width: 100%;
+}
+ #wrapper.toggled #page-content-wrapper {
+     position: absolute;
+     margin-right: -250px;
+}
+/* Sidebar Styles */
+ .sidebar-nav {
+     position: absolute;
+     top: 0;
+     width: 250px;
+     margin: 0;
+     padding: 0;
+     list-style: none;
+}
+ .sidebar-nav li {
+     text-indent: 20px;
+     line-height: 40px;
+     margin-left: -25px;
+      color:   #000000;
+}
+ .logo{
+     color: rgb(105, 183, 105);
+     font-size: 36px;
+     font-weight: 700;
+     line-height: 39.6px;
+     margin-left:20px;
+     margin-top:10px 
+}
+ .fa {
+     display: inline-block;
+     font-family: FontAwesome;
+     font-style: normal;
+     font-weight: normal;
+     line-height: 1;
+     font-size-adjust: none;
+     font-stretch: normal;
+     font-feature-settings: normal;
+     font-language-override: normal;
+     font-kerning: auto;
+     font-synthesis: weight style;
+     font-variant: normal;
+     font-size: inherit;
+     text-rendering: auto;
+     padding-right: 10px;
+}
+ .containerLogin{
+     padding-right: 15px;
+     padding-left: 15px;
+     margin-right: auto;
+     margin-top: 100px;
+     margin-left: auto;
+     width: 30%;
+}
+ .sidebar-nav li a {
+     display: block;
+     text-decoration: none;
+     color:    #000000;
+}
+
+ .sidebar-nav li a:hover {
+     text-decoration: none;
+     color: #fff;
+     background: rgba(255,255,255,0.2);
+}
+
+ .sidebar-nav li a.example{
+     text-decoration: none;
+     color: #fff;
+     background: #999999;
+}
+sidebar-nav > .sidebar-brand {
+     height: 65px;
+     font-size: 18px;
+     line-height: 60px;
+}
+ .sidebar-nav > .sidebar-brand a {
+     color: #999999;
+}
+ .sidebar-nav > .sidebar-brand a:hover {
+     color: #fff;
+     background: none;
+}
+ .sidebar-nav > .sidebar-brand a:active {
+     color: #fff;
+     background: none;
+}
+ @media only screen and (max-height: 650px) and (min-width:768px){
+     #sidebar-wrapper {
+         width: 250px;
+         position: absolute;
+         height:200%;
+    }
+}
+ @media only screen and (max-height: 450px) and (min-width:768px){
+     #sidebar-wrapper {
+         width: 250px;
+         position: absolute;
+         height:160%;
+    }
+}
+ @media only screen and (max-height: 1200px) and (min-width:1366px){
+     #sidebar-wrapper {
+         width: 250px;
+         position: absolute;
+         height:100%;
+    }
+}
+ @media(min-width:768px) {
+     #wrapper {
+         padding-left: 120px;
+    }
+     #wrapper.toggled {
+         padding-left: 0;
+    }
+     #sidebar-wrapper {
+         width: 250px;
+    }
+     #wrapper.toggled #sidebar-wrapper {
+         width: 0;
+    }
+     #page-content-wrapper {
+         position: relative;
+    }
+     #wrapper.toggled #page-content-wrapper {
+         position: relative;
+         margin-right: 0;
+    }
+}
+
+ * {
+    box-sizing: border-box;
+}
+ body {
+     margin: 0;
+     padding:0;
+     
+     font-family: Arial;
+    height:calc(100% - 70px);
+    height:-moz-calc(100% - 70px);
+    height:-webkit-calc(100% - 70px);
+    
+}
+html{margin:0;padding:0;}
+
+ .header {
+     overflow: hidden;
+     background-color: #000000;
+     padding: 8px 10px;
+}
+ .header a {
+     float: left;
+     color: white;
+     text-align: center;
+     padding: 12px;
+     text-decoration: none;
+     font-size: 18px;
+     line-height: 25px;
+     border-radius: 4px;
+}
+ .header a.logo {
+     font-size: 25px;
+     font-weight: bold;
+}
+ .header-right {
+     float: right;
+}
+ .akrbutton {
+     background-color: #4d4d4d;
+     border: none;
+     color: white;
+     padding: 8px 15px;
+     text-align: center;
+     text-decoration: none;
+     display: inline-block;
+     font-size: 12px;
+     margin: 3% 2%;
+     cursor: pointer;
+     border-radius: 5px;
+}
+ .refreshbutton {
+     background-color: #4d4d4d;
+     border: none;
+     color: white;
+     padding: 7px 14px;
+     text-align: center;
+     text-decoration: none;
+     display: inline-block;
+     cursor: pointer;
+     border-radius: 5px;
+      
+}
+ .akrtheader {
+     padding-top: 12px;
+     padding-bottom: 12px;
+     text-align: left;
+     background-color: #4CAF50 
+}
+ table, td {
+     border: 1px solid #ddd;
+}
+ table {
+     border-collapse: collapse;
+     width: 100%;}
+
+ .siteStatusTable th {
+     padding: 5px;
+     text-align: left;
+     background-color: #cccccc;
+     border: 1px solid #ddd;
+}
+ .siteStatusTable td {
+     padding-top: 5px;
+     padding-bottom:5px;
+}
+.nodeTable th {
+     padding: 10px;
+     text-align: left;
+     background-color: #cccccc;
+     border: 0px solid #ddd;
+}
+ .nodeTable td {
+     padding-top: 5px;
+     padding-bottom:5px;
+}
+ .siteaddOnsTable th {
+     padding: 10px;
+     text-align: left;
+     background-color: #cccccc;
+     border: 1px solid #ddd;
+}
+ .siteaddOnsTable td {
+     padding-top: 5px;
+     padding-bottom:5px;
+}
+
+
+ .sitetempestsTable th {
+     padding: 10px;
+     text-align: left;
+     background-color: #cccccc;
+     border: 1px solid #ddd;
+}
+ .sitetempestsTable td {
+     padding-top: 5px;
+     padding-bottom:5px;
+}
+
+
+.shardwareTable th {
+     padding: 5px;
+     text-align: left;
+     background-color: #cccccc;
+     border: 1px solid #ddd;
+}
+ .shardwareTable td {
+     padding-top: 3px;
+     padding-bottom:3px;
+}
+.rackTable th {
+     padding: 10px;
+     text-align: left;
+     background-color: #cccccc;
+     border: 1px solid #ddd;
+}
+ .rackTable td {
+     padding-top: 5px;
+     padding-bottom:5px;
+}
+
+.sitebuildTable th {
+     padding: 10px;
+     text-align: left;
+     background-color: #cccccc;
+     border: 1px solid #ddd;
+}
+ .sitebuildTable td {
+     padding-top: 5px;
+     padding-bottom:5px;
+}
+
+ .softwareTable th {
+     padding: 10px;
+     text-align: left;
+     background-color: #cccccc;
+     border: 1px solid #ddd;
+}
+ .softwareTable td {
+     padding-top: 5px;
+     padding-bottom:5px;
+}
+.popUpTable th {
+     padding: 10px;
+     text-align: left;
+     background-color: #cccccc;
+     border: 1px solid #ddd;
+}
+ .popUpTable td {
+     padding-top: 5px;
+     padding-bottom:5px;
+}
+/*.pagination {
+     display: inline-block;
+     float:right;
+}
+ .pagination li {
+     list-style-type:none;
+     color: white;
+     float: left;
+     padding: 8px 16px;
+     text-decoration: none;
+     transition: background-color .3s;
+     border: 1px solid #ddd;
+}
+ .pagination li.active {
+     background-color: #DCDCDC;
+     color: white;
+     border: 1px solid #ddd;
+}*/
+ button:disabled {
+     background: #dddddd;
+}
+ .select-style {
+     border: 1px solid #ccc;
+     width: 240px;
+     height: 40px;
+     border-radius: 3px;
+     overflow: hidden;
+     background-position: right;
+}
+ .select-style select {
+     
+     width: 100%;
+     border: 0px;
+     box-shadow: none;
+     background:none;
+     background-image: none;
+     -webkit-appearance: none;
+     outline: 0px;
+     
+}
+.selectStyle select option{
+       height:30px;
+       padding-top:5px;
+}
+@-moz-document url-prefix() {
+  select.example {
+    padding-right: 25px;
+
+     height:40px;
+      
+    background-image: url("data:image/svg+xml,\
+      <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
+           height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
+        <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
+      </svg>");
+    background-repeat: no-repeat;
+    background-position: calc(100% - 7px) 50%;
+    -moz-appearance: none;
+    appearance: none;
+   
+  }
+}
+@-moz-document url-prefix() {
+  select.exampleTable {
+    
+     
+     height:25px;
+     
+    background-image: url("data:image/svg+xml,\
+      <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
+           height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
+        <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
+      </svg>");
+    background-repeat: no-repeat;
+    background-position: calc(100% - 7px) 50%;
+    -moz-appearance: none;
+    appearance: none;
+   
+  }
+}
+ .select-style select:focus {
+     outline: none;
+}
+ .child_div_1{
+     float:left;
+     margin-right:50px;
+}
+ .child_div_2{
+     float:right;
+     margin-right:50%;
+}
+ .ngdialog {
+     margin-top:-100px;
+     padding-top:10px;
+     overflow-y: auto;
+}
+ .addOnForm input[type=text], select, textarea {
+     width: 40%;
+     padding: 3px;
+     border: 0.5px solid #ccc;
+     border-radius: 4px;
+     box-sizing: border-box;
+     margin-top: 3px;
+     margin-bottom: 3px;
+     resize: vertical;
+}
+ .tempestclassForm input[type=text], select, textarea {
+     width: 40%;
+     padding: 3px;
+     border: 0.5px solid #ccc;
+     border-radius: 4px;
+     box-sizing: border-box;
+     margin-top: 3px;
+     margin-bottom: 3px;
+     resize: vertical;
+}
+.hardwareForm input[type=text], select, textarea {
+     width: 40%;
+     padding: 3px;
+     border: 0.5px solid #ccc;
+     border-radius: 4px;
+     box-sizing: border-box;
+     margin-top: 3px;
+     margin-bottom: 3px;
+     resize: vertical;
+}
+.podForm input[type=text], select, textarea {
+     width: 40%;
+     padding: 3px;
+     border: 0.5px solid #ccc;
+     border-radius: 4px;
+     box-sizing: border-box;
+     margin-top: 3px;
+     margin-bottom: 3px;
+     resize: vertical;
+}
+.uploadForm input[type=text], select, textarea {
+     width: 40%;
+     padding: 3px;
+     border: 0.5px solid #ccc;
+     border-radius: 4px;
+     box-sizing: border-box;
+     margin-top: 3px;
+     margin-bottom: 3px;
+     resize: vertical;
+}
+.vnfForm input[type=text], select, textarea {
+     width: 40%;
+     padding: 3px;
+     border: 0.5px solid #ccc;
+     border-radius: 4px;
+     box-sizing: border-box;
+     margin-top: 3px;
+     margin-bottom: 3px;
+     resize: vertical;
+}
+.siteForm input[type=text], select, textarea {
+     width: 40%;
+     padding: 3px;
+     border: 0.5px solid #ccc;
+     border-radius: 4px;
+     box-sizing: border-box;
+     margin-top: 3px;
+     margin-bottom: 3px;
+     resize: vertical;
+}
+.siteForm li input[type=text], select, textarea {
+     width: 40%;
+     padding: 3px;
+     border: 0.5px solid #ccc;
+     border-radius: 4px;
+     box-sizing: border-box;
+     margin-top: 3px;
+     margin-bottom: 3px;
+     resize: vertical;
+}
+ label {
+     font-weight: normal !important;
+}
+.ngdialog-custom{
+       background: #e6e6e6;
+}
+#footerlogo{
+       position:absolute;
+       display:inline-block;
+       bottom:0;
+        width: 250px;
+}
+.borderFrame{
+       margin-top:2px;
+       border:2px solid #cdcdcd;
+       /*border-radius: 0.1px;
+       /*-moz-border-radius: 0.1px;
+       -webkit-border-radius:0.1px;*/
+}