configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/style/sdnc-style.css

   1 /*
   2 * ============LICENSE_START=======================================================
   3 * ONAP : SDNC-FEATURES
   4 * ================================================================================
   5 * Copyright 2018 TechMahindra
   6 *=================================================================================
   7 * Licensed under the Apache License, Version 2.0 (the "License");
   8 * you may not use this file except in compliance with the License.
   9 * You may obtain a copy of the License at
  10 *
  11 *     http://www.apache.org/licenses/LICENSE-2.0
  12 *
  13 * Unless required by applicable law or agreed to in writing, software
  14 * distributed under the License is distributed on an "AS IS" BASIS,
  15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16 * See the License for the specific language governing permissions and
  17 * limitations under the License.
  18 * ============LICENSE_END=========================================================
  19 */
  20
  21  body{
  22  padding-top:10px;
  23  overflow-y:scroll;
  24  padding-bottom:10px;
  25  }
  26
  27 /* form styling */
  28 #form-container{
  29         margin-bottom:20px;
  30     border-radius:5px;
  31 }
  32 #form-container .page-header{
  33         margin:0; padding:30px;
  34     border-top-left-radius:5px; border-top-right-radius:5px;
  35      }
  36
  37  table.tableDisplay{
  38      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  39      border-collapse: collapse;
  40      width: 100%;
  41      table-layout: auto;
  42 }
  43  table.tableDisplay tr:nth-child(even){
  44      background-color: #E1E0DA;
  45 }
  46  table.tableDisplay th{
  47      padding-top: 12px;
  48      padding-bottom: 12px;
  49      text-align: left;
  50      background: linear-gradient(to top, #f8f8f8 0%, #cce5ff 83%);
  51      color: black;
  52 }
  53  table.tableDisplay td,table.tableDisplay th {
  54      border: 1px solid #ABABAB;
  55      padding: 8px;
  56      width:30px;
  57      height:10%;
  58
  59 }
  60  table.tableDisplay tr:{
  61      text-align: left;
  62      height:105;;
  63 }
  64  table.tableDisplay tr:hover {
  65      background-color:#cce5ff;
  66 }
  67  .first_row{
  68      background-color: #cce5ff;
  69      color: black;
  70      text-align:left;
  71 }
  72  .column {
  73      float: left;
  74      width: 32.2%;
  75      padding: 10px;
  76      margin-left:20px;
  77      height: 60px;
  78     /* Should be removed. Only for demonstration */
  79 }
  80 .columnComp{
  81         float: left;
  82      width: 22%;
  83      padding: 10px;
  84      margin-left:20px;
  85      height: 60px;
  86 }
  87 /* Clear floats after the columns */
  88  .row:after {
  89      content: "";
  90      display: table;
  91      clear: both;
  92 }
  93  #btnSubmit{
  94      background-color: #AED6F1;
  95      margin-top:20px;
  96      margin-left:20px;
  97      margin-bottom:10px;
  98      width:75px;
  99      height:28px;
 100      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 101      border-collapse: collapse;
 102      border: 1px solid #5DADE2;
 103      font-weight:700;
 104 }
 105  .btndownload{
 106      background-color: #AED6F1;
 107      margin-top:20px;
 108      margin-bottom:10px;
 109      margin-left:20px;
 110      width:130px;
 111      height:30px;
 112      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 113      border-collapse: collapse;
 114      border: 1px solid #5DADE2;
 115      font-weight:700;
 116 }
 117  #exampleInput{
 118      margin-left:25px;
 119      width:160px;
 120 }
 121  #exampleEndInput{
 122      margin-left:10px;
 123 }
 124  .error{
 125      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 126      color:Red;
 127      font-size: 14px;
 128      margin-bottom:10px;
 129 }
 130  .labeltext{
 131      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 132 }
 133  .sort-icon {
 134      font-size: 9px;
 135      margin-left: 5px;
 136 }
 137  th {
 138      cursor:pointer;
 139 }
 140  .heading{
 141      margin-top:10px;
 142      width:100%;
 143      height:45px;
 144      margin-bottom:20px;
 145      font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
 146      margin-top: 15px;
 147      margin-right: auto;
 148      margin-left: auto;
 149      font-size: 20px;
 150       background: linear-gradient(to top, #f8f8f8 0%, #cce5ff 83%);
 151      padding-top: 15px;
 152      padding-bottom: 50px;
 153
 154 }
 155 form_validationBody{
 156         width:900px;
 157         margin-left:15px;
 158         margin-top:60px;
 159         margin-bottom:20px;
 160 }
 161 button:hover {
 162     position: relative;
 163 }
 164 button[title]:hover:after {
 165      padding: 4px 8px;
 166      position: absolute;
 167      left: 0;
 168      top: 100%;
 169      white-space: nowrap;
 170      z-index: 20px;
 171      background:red;
 172 }
 173 .pagination{
 174 display: inline-block;
 175   padding-left: 0;
 176   margin: 5px 0;
 177   border-radius: 4px;
 178   border: 1px solid #ABABAB;
 179   font-size: 13px;
 180 }
 181 .pagination > li > span {
 182   position: relative;
 183   float: left;
 184   padding: 6px 12px;
 185   line-height: 1.42857143;
 186   text-decoration: none;
 187   color: #337ab7;
 188   background-color: #fff;
 189   border: 1px solid #ABABAB;
 190   margin-left: -1px;
 191 }
 192 .pagination > .active >a{
 193   z-index: 3;
 194   color: #fff;
 195   background-color: #337ab7;
 196   border-color: #337ab7;
 197   cursor: default;
 198 }
 199 .arrowRed {
 200 font-size: 30px;
 201 color: red;
 202 }
 203 .arrowGreen {
 204 font-size: 30px;
 205 color: green;
 206 }
 207 .ng-invalid  { border: 1px ridge #ddd; }
 208 .testMain{
 209         width:100%;
 210         margin-bottom:20px;
 211         min-height:400px;
 212         margin-top:10px;
 213 }
 214 .testNotification{
 215         padding:0px;
 216 }
 217 .testImgIcon{
 218         margin-left:5px;
 219         margin-right:10px;
 220         padding-right:10px;
 221 }
 222 .testCol{
 223         background-color:#f2f2f2;
 224         width:25%;
 225         margin-left:35px;
 226 }
 227 .check{
 228          margin-left:10px;
 229         margin-right:10px;
 230 }
 231 .btnRunTest{
 232         background-color:#f2f2f2;
 233         width:75%;
 234         height:75px;
 235         margin-left:35px;
 236         margin-bottom:35px;
 237 }
 238 .ReportMain{
 239         width:100%;
 240     min-height:400px;
 241     margin-top:10px;
 242 }
 243 .ReportNotification{
 244         padding:0px;
 245         margin-right:10px;
 246         text-align:center;
 247 }
 248 .ReportImgIcon{
 249         margin-left:5px;
 250         margin-right:10px;
 251 }
 252 input[type=checkbox] {
 253         padding-right: 3px;
 254         !important;
 255         }
 256
 257 .header{
 258      margin-top:20px;
 259      width:1145px;
 260      height:45px;
 261      margin-bottom:5px;
 262      font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
 263      font-size: 20px;
 264      background: linear-gradient(to top, #f8f8f8 0%, #8F8484 83%);
 265      padding-top:15px;
 266
 267 }
 268 .footer{
 269      margin-top:10px;
 270      width:1145px;
 271      height:30px;
 272      margin-bottom:5px;
 273      font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
 274      font-size: 15px;
 275      background: linear-gradient(to top, #f8f8f8 0%, #8F8484 83%);
 276      padding-top:15px;
 277
 278 }
 279 .btn-danger{
 280         background-color: #ffb3b3;
 281         width: 1090px;
 282         text-align: left;
 283         color:black;
 284         height:45px;
 285 }
 286 .btn-success{
 287         width: 1090px;
 288         text-align: left;
 289         color:black;
 290         background-color: #66cc66;
 291         height:45px;
 292
 293 }
 294 .btn-warning{
 295         width: 1090px;
 296         text-align: left;
 297         color:black;
 298         height:45px;
 299         background-color: #ffff99;
 300 }
 301 /* Dropdown Button */
 302 .dropbtn {
 303     background-color: #ffe0b3;
 304     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
 305     color: #333333;
 306     padding: 15px;
 307     font-size: 17px;
 308     border: none;
 309     padding-right:20px;
 310     padding-left: 30px;
 311 }
 312
 313 /* The container <div> - needed to position the dropdown content */
 314 .dropdown {
 315     position: relative;
 316     display: inline-block;
 317 }
 318
 319 /* Dropdown Content (Hidden by Default) */
 320 .dropdown-content {
 321     display: none;
 322     position: absolute;
 323     background-color: #f1f1f1;
 324     min-width: 240px;
 325     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 326     z-index: 1;
 327 }
 328
 329 /* Links inside the dropdown */
 330 .dropdown-content a {
 331     color: black;
 332     padding: 12px 16px;
 333     text-decoration: none;
 334     display: block;
 335     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
 336 }
 337
 338 /* Change color of dropdown links on hover */
 339 .dropdown-content a:hover {background-color: #ddd}
 340
 341 /* Show the dropdown menu on hover */
 342 .dropdown:hover .dropdown-content {
 343     display: block;
 344     color: black;
 345 }
 346
 347
 348 .navbar-default .navbar-nav>li> a:hover {background-color: #ddd}
 349 .btnapply{
 350      background-color:#AED6F1 ;
 351      margin-top:10px;
 352      margin-bottom:10px;
 353      margin-right:20px;
 354      width:150px;
 355      height:30px;
 356      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 357      border-collapse: collapse;
 358      border: 1px solid #5DADE2;
 359      font-weight:700;
 360 }
 361
 362
 363 .btnview{
 364     background-color: #AED6F1;
 365      margin-top:8px;
 366      margin-bottom:10px;
 367      margin-right:20px;
 368      width:150px;
 369      height:30px;
 370      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 371      border-collapse: collapse;
 372      border: 1px solid #5DADE2;
 373      font-weight:700;
 374 }
 375 .btnview:hover {background-color:  #85C1E9}
 376
 377 .btnview:active {
 378   background-color:  #85C1E9;
 379   box-shadow: 0 5px  #85C1E9;
 380   transform: translateY(4px);
 381 }
 382
 383 .btnapplycfg{
 384      background-color: #AED6F1;
 385      margin-top:8px;
 386      margin-bottom:10px;
 387      margin-right:20px;
 388      width:150px;
 389      height:30px;
 390      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 391      border-collapse: collapse;
 392      border: 1px solid #5DADE2;
 393      font-weight:700;
 394 }
 395 .btnapplycfg:hover {background-color: #85C1E9}
 396
 397 .btnapplycfg:active {
 398   background-color: #85C1E9;
 399   box-shadow: 0 5px  #85C1E9;
 400   transform: translateY(4px);
 401 }
 402
 403 .navbar-default .navbar-nav>li> a:hover {background-color: #FFFF00}
 404
 405  .btnCompareVersion{
 406      background-color: #AED6F1;
 407      margin-top:8px;
 408      margin-bottom:10px;
 409      margin-right:20px;
 410      width:150px;
 411      height:30px;
 412      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 413      border-collapse: collapse;
 414      border: 1px solid #5DADE2;
 415      font-weight:700;
 416 }
 417
 418 .btnCompareVersion:hover {background-color:  #85C1E9}
 419
 420 .btnCompareVersion:active {
 421   background-color: #85C1E9;
 422   box-shadow: 0 5px  #85C1E9;
 423   transform: translateY(4px);
 424   border-collapse: collapse;
 425   border: 2px solid #5DADE2;
 426 }
 427
 428 .btnapply{
 429      background-color: #AED6F1;
 430      margin-top:8px;
 431      margin-bottom:10px;
 432      margin-right:20px;
 433      width:150px;
 434      height:30px;
 435      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 436      border-collapse: collapse;
 437      border: 1px solid #5DADE2;
 438      font-weight:700;
 439 }
 440
 441 .btnapply:hover {background-color: #85C1E9}
 442
 443 .btnapply:active {
 444   background-color: #85C1E9;
 445   box-shadow: 0 5px #85C1E9;
 446   transform: translateY(4px);
 447   border-collapse: collapse;
 448   border: 2px solid #5DADE2;
 449 }
 450
 451 .Formclass{
 452         width:100%;
 453     margin-top:30px;
 454     min-height:10000;
 455 }
 456
 457 .VersionMain{
 458         width:100%;
 459     margin-top:60px;
 460     min-height:2200px;
 461     border: 0.5px solid lightgrey;
 462 }
 463
 464 .versionHeading{
 465      width:100%;
 466      height:35px;
 467      margin-bottom:20px;
 468      background-color: #cce5ff;
 469      font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
 470      margin-right: -15px;
 471      font-size: 15px;
 472      padding-top:5px;
 473      color:black;
 474
 475 }
 476 {
 477     box-sizing: border-box;
 478
 479 }
 480
 481 .columnsVersion {
 482     float: left;
 483     width: 33.3%;
 484     padding: 8px;
 485     border-radius: 15px;
 486 }
 487
 488 .columnsVersionview{
 489     float: left;
 490     width: 50%;
 491     padding: 8px;
 492     border-radius: 15px;
 493 }
 494
 495 .price {
 496     list-style-type: none;
 497     border: 1px solid grey;
 498     border-radius: 25px;
 499     margin: 0;
 500     padding: 0;
 501     -webkit-transition: 0.3s;
 502     transition: 0.3s;
 503 }
 504
 505 .price:hover {
 506     box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
 507 }
 508
 509 .price .headerVersion {
 510     background-color:#484848;
 511     color: white;
 512     font-size: 15px;
 513     border-radius: 50px;
 514     height:40px;
 515 }
 516
 517 .price li {
 518     border-bottom: 1px solid #eee;
 519     padding: 5px;
 520     text-align: center;
 521     font-size: 12px;
 522     word-wrap: break-word;
 523 }
 524
 525 .price .grey {
 526     background-color: #FFCCCC;
 527     font-size: 12px;
 528     margin-left:20px;
 529     margin-right:20px;
 530 }
 531
 532 @media only screen and (max-width: 600px) {
 533     .columnsVersion {
 534         width: 100%;
 535     }
 536 }
 537 .separator{
 538         border-color:darkgrey;
 539         min-height:2px;
 540 }
 541 .listHeading{
 542         background-color: #ffcccc;
 543 }