ui/src/main/webapp/resources/css/style.css

   1 /*
   2  * Copyright (c) 2019 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *        http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 .img-arredondadaSide {
  18      border-radius: 100%;
  19     w overflow: hidden;
  20      height: 100px;
  21      width:100px;
  22      background:#6495ED;
  23      margin-top:10px;
  24      margin-left: 5px;
  25 }
  26  .img-arredondadaChat {
  27      border-radius: 100%;
  28      overflow: hidden;
  29      height: 50px;
  30      width:50px;
  31      background: black;
  32 }
  33  .tema{
  34      color:red;
  35 }
  36  .chat-container {
  37      width: 400px;
  38      height: 100%;
  39      margin: 0 auto;
  40 }
  41  .corStatusFinalizado{
  42      color:green;
  43 }
  44  .corNormal{
  45      color:#3366FF;
  46 }
  47  .corStatusNaoFinalizado{
  48      color:red;
  49 }
  50  .alinharCentro{
  51      text-align: center;
  52 }
  53  .user-panel {
  54      padding: 10px;
  55 }
  56  .user-panel:before, .user-panel:after {
  57      display: table;
  58      content: " ";
  59 }
  60  .user-panel:after {
  61      clear: both;
  62 }
  63  .user-panel > .image > img {
  64      width: 45px;
  65      height: 45px;
  66 }
  67  .user-panel > .info {
  68      font-weight: 600;
  69      padding: 5px 5px 5px 15px;
  70      font-size: 14px;
  71      line-height: 1;
  72 }
  73  .user-panel > .info > p {
  74      margin-bottom: 9px;
  75 }
  76  .user-panel > .info > a {
  77      text-decoration: none;
  78      padding-right: 5px;
  79      margin-top: 3px;
  80      font-size: 11px;
  81      font-weight: normal;
  82 }
  83  .user-panel > .info > a > .fa, .user-panel > .info > a > .ion, .user-panel > .info > a > .glyphicon {
  84      margin-right: 3px;
  85 }
  86  #wrapper {
  87      padding-left: 0;
  88      -webkit-transition: all 0.5s ease;
  89      -moz-transition: all 0.5s ease;
  90      -o-transition: all 0.5s ease;
  91      transition: all 0.5s ease;
  92      margin-top: -20px;
  93 }
  94  #wrapper.toggled {
  95      padding-left: 250px;
  96 }
  97  #sidebar-wrapper {
  98      z-index: 1000;
  99      position: absolute;
 100      left: 250px;
 101      width: 0;
 102       height:100vh;
 103      margin-left: -250px;
 104      overflow-y: auto;
 105      background: #cccccc;
 106      -webkit-transition: all 0.5s ease;
 107      -moz-transition: all 0.5s ease;
 108      -o-transition: all 0.5s ease;
 109      transition: all 0.5s ease;
 110 }
 111  #wrapper.toggled #sidebar-wrapper {
 112      width: 250px;
 113 }
 114  #page-content-wrapper {
 115      width: 100%;
 116 }
 117  #wrapper.toggled #page-content-wrapper {
 118      position: absolute;
 119      margin-right: -250px;
 120 }
 121 /* Sidebar Styles */
 122  .sidebar-nav {
 123      position: absolute;
 124      top: 0;
 125      width: 250px;
 126      margin: 0;
 127      padding: 0;
 128      list-style: none;
 129 }
 130  .sidebar-nav li {
 131      text-indent: 20px;
 132      line-height: 40px;
 133      margin-left: -25px;
 134       color:    #000000;
 135 }
 136  .logo{
 137      color: rgb(105, 183, 105);
 138      font-size: 36px;
 139      font-weight: 700;
 140      line-height: 39.6px;
 141      margin-left:20px;
 142      margin-top:10px
 143 }
 144  .fa {
 145      display: inline-block;
 146      font-family: FontAwesome;
 147      font-style: normal;
 148      font-weight: normal;
 149      line-height: 1;
 150      font-size-adjust: none;
 151      font-stretch: normal;
 152      font-feature-settings: normal;
 153      font-language-override: normal;
 154      font-kerning: auto;
 155      font-synthesis: weight style;
 156      font-variant: normal;
 157      font-size: inherit;
 158      text-rendering: auto;
 159      padding-right: 10px;
 160 }
 161  .containerLogin{
 162      padding-right: 15px;
 163      padding-left: 15px;
 164      margin-right: auto;
 165      margin-top: 100px;
 166      margin-left: auto;
 167      width: 30%;
 168 }
 169  .sidebar-nav li a {
 170      display: block;
 171      text-decoration: none;
 172      color:     #000000;
 173 }
 174
 175  .sidebar-nav li a:hover {
 176      text-decoration: none;
 177      color: #fff;
 178      background: rgba(255,255,255,0.2);
 179 }
 180
 181  .sidebar-nav li a.example{
 182      text-decoration: none;
 183      color: #fff;
 184      background: #999999;
 185 }
 186 sidebar-nav > .sidebar-brand {
 187      height: 65px;
 188      font-size: 18px;
 189      line-height: 60px;
 190 }
 191  .sidebar-nav > .sidebar-brand a {
 192      color: #999999;
 193 }
 194  .sidebar-nav > .sidebar-brand a:hover {
 195      color: #fff;
 196      background: none;
 197 }
 198  .sidebar-nav > .sidebar-brand a:active {
 199      color: #fff;
 200      background: none;
 201 }
 202  @media only screen and (max-height: 650px) and (min-width:768px){
 203      #sidebar-wrapper {
 204          width: 250px;
 205          position: absolute;
 206          height:200%;
 207     }
 208 }
 209  @media only screen and (max-height: 450px) and (min-width:768px){
 210      #sidebar-wrapper {
 211          width: 250px;
 212          position: absolute;
 213          height:160%;
 214     }
 215 }
 216  @media only screen and (max-height: 1200px) and (min-width:1366px){
 217      #sidebar-wrapper {
 218          width: 250px;
 219          position: absolute;
 220          height:100%;
 221     }
 222 }
 223  @media(min-width:768px) {
 224      #wrapper {
 225          padding-left: 120px;
 226     }
 227      #wrapper.toggled {
 228          padding-left: 0;
 229     }
 230      #sidebar-wrapper {
 231          width: 250px;
 232     }
 233      #wrapper.toggled #sidebar-wrapper {
 234          width: 0;
 235     }
 236      #page-content-wrapper {
 237          position: relative;
 238     }
 239      #wrapper.toggled #page-content-wrapper {
 240          position: relative;
 241          margin-right: 0;
 242     }
 243 }
 244
 245  * {
 246     box-sizing: border-box;
 247 }
 248  body {
 249      margin: 0;
 250      padding:0;
 251
 252      font-family: Arial;
 253     height:calc(100% - 70px);
 254     height:-moz-calc(100% - 70px);
 255     height:-webkit-calc(100% - 70px);
 256
 257 }
 258 html{margin:0;padding:0;}
 259
 260  .header {
 261      overflow: hidden;
 262      background-color: #000000;
 263      padding: 8px 10px;
 264 }
 265  .header a {
 266      float: left;
 267      color: white;
 268      text-align: center;
 269      padding: 12px;
 270      text-decoration: none;
 271      font-size: 18px;
 272      line-height: 25px;
 273      border-radius: 4px;
 274 }
 275  .header a.logo {
 276      font-size: 25px;
 277      font-weight: bold;
 278 }
 279  .header-right {
 280      float: right;
 281 }
 282  .akrbutton {
 283      background-color: #4d4d4d;
 284      border: none;
 285      color: white;
 286      padding: 8px 15px;
 287      text-align: center;
 288      text-decoration: none;
 289      display: inline-block;
 290      font-size: 12px;
 291      margin: 3% 2%;
 292      cursor: pointer;
 293      border-radius: 5px;
 294 }
 295  .refreshbutton {
 296      background-color: #4d4d4d;
 297      border: none;
 298      color: white;
 299      padding: 7px 14px;
 300      text-align: center;
 301      text-decoration: none;
 302      display: inline-block;
 303      cursor: pointer;
 304      border-radius: 5px;
 305
 306 }
 307  .akrtheader {
 308      padding-top: 12px;
 309      padding-bottom: 12px;
 310      text-align: left;
 311      background-color: #4CAF50
 312 }
 313  table, td {
 314      border: 1px solid #ddd;
 315 }
 316  table {
 317      border-collapse: collapse;
 318      width: 100%;}
 319
 320  .siteStatusTable th {
 321      padding: 5px;
 322      text-align: left;
 323      background-color: #cccccc;
 324      border: 1px solid #ddd;
 325 }
 326  .siteStatusTable td {
 327      padding-top: 5px;
 328      padding-bottom:5px;
 329 }
 330 .nodeTable th {
 331      padding: 10px;
 332      text-align: left;
 333      background-color: #cccccc;
 334      border: 0px solid #ddd;
 335 }
 336  .nodeTable td {
 337      padding-top: 5px;
 338      padding-bottom:5px;
 339 }
 340  .siteaddOnsTable th {
 341      padding: 10px;
 342      text-align: left;
 343      background-color: #cccccc;
 344      border: 1px solid #ddd;
 345 }
 346  .siteaddOnsTable td {
 347      padding-top: 5px;
 348      padding-bottom:5px;
 349 }
 350
 351
 352  .sitetempestsTable th {
 353      padding: 10px;
 354      text-align: left;
 355      background-color: #cccccc;
 356      border: 1px solid #ddd;
 357 }
 358  .sitetempestsTable td {
 359      padding-top: 5px;
 360      padding-bottom:5px;
 361 }
 362
 363
 364 .shardwareTable th {
 365      padding: 5px;
 366      text-align: left;
 367      background-color: #cccccc;
 368      border: 1px solid #ddd;
 369 }
 370  .shardwareTable td {
 371      padding-top: 3px;
 372      padding-bottom:3px;
 373 }
 374 .rackTable th {
 375      padding: 10px;
 376      text-align: left;
 377      background-color: #cccccc;
 378      border: 1px solid #ddd;
 379 }
 380  .rackTable td {
 381      padding-top: 5px;
 382      padding-bottom:5px;
 383 }
 384
 385 .sitebuildTable th {
 386      padding: 10px;
 387      text-align: left;
 388      background-color: #cccccc;
 389      border: 1px solid #ddd;
 390 }
 391  .sitebuildTable td {
 392      padding-top: 5px;
 393      padding-bottom:5px;
 394 }
 395
 396  .softwareTable th {
 397      padding: 10px;
 398      text-align: left;
 399      background-color: #cccccc;
 400      border: 1px solid #ddd;
 401 }
 402  .softwareTable td {
 403      padding-top: 5px;
 404      padding-bottom:5px;
 405 }
 406 .popUpTable th {
 407      padding: 10px;
 408      text-align: left;
 409      background-color: #cccccc;
 410      border: 1px solid #ddd;
 411 }
 412  .popUpTable td {
 413      padding-top: 5px;
 414      padding-bottom:5px;
 415 }
 416 /*.pagination {
 417      display: inline-block;
 418      float:right;
 419 }
 420  .pagination li {
 421      list-style-type:none;
 422      color: white;
 423      float: left;
 424      padding: 8px 16px;
 425      text-decoration: none;
 426      transition: background-color .3s;
 427      border: 1px solid #ddd;
 428 }
 429  .pagination li.active {
 430      background-color: #DCDCDC;
 431      color: white;
 432      border: 1px solid #ddd;
 433 }*/
 434  button:disabled {
 435      background: #dddddd;
 436 }
 437  .select-style {
 438      border: 1px solid #ccc;
 439      width: 240px;
 440      height: 40px;
 441      border-radius: 3px;
 442      overflow: hidden;
 443      background-position: right;
 444 }
 445  .select-style select {
 446
 447      width: 100%;
 448      border: 0px;
 449      box-shadow: none;
 450      background:none;
 451      background-image: none;
 452      -webkit-appearance: none;
 453      outline: 0px;
 454
 455 }
 456 .selectStyle select option{
 457         height:30px;
 458         padding-top:5px;
 459 }
 460 @-moz-document url-prefix() {
 461   select.example {
 462     padding-right: 25px;
 463
 464      height:40px;
 465
 466     background-image: url("data:image/svg+xml,\
 467       <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
 468            height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
 469         <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
 470       </svg>");
 471     background-repeat: no-repeat;
 472     background-position: calc(100% - 7px) 50%;
 473     -moz-appearance: none;
 474     appearance: none;
 475
 476   }
 477 }
 478 @-moz-document url-prefix() {
 479   select.exampleTable {
 480
 481
 482      height:25px;
 483
 484     background-image: url("data:image/svg+xml,\
 485       <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
 486            height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
 487         <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
 488       </svg>");
 489     background-repeat: no-repeat;
 490     background-position: calc(100% - 7px) 50%;
 491     -moz-appearance: none;
 492     appearance: none;
 493
 494   }
 495 }
 496  .select-style select:focus {
 497      outline: none;
 498 }
 499  .child_div_1{
 500      float:left;
 501      margin-right:50px;
 502 }
 503  .child_div_2{
 504      float:right;
 505      margin-right:50%;
 506 }
 507  .ngdialog {
 508      margin-top:-100px;
 509      padding-top:10px;
 510      overflow-y: auto;
 511 }
 512  .addOnForm input[type=text], select, textarea {
 513      width: 40%;
 514      padding: 3px;
 515      border: 0.5px solid #ccc;
 516      border-radius: 4px;
 517      box-sizing: border-box;
 518      margin-top: 3px;
 519      margin-bottom: 3px;
 520      resize: vertical;
 521 }
 522  .tempestclassForm input[type=text], select, textarea {
 523      width: 40%;
 524      padding: 3px;
 525      border: 0.5px solid #ccc;
 526      border-radius: 4px;
 527      box-sizing: border-box;
 528      margin-top: 3px;
 529      margin-bottom: 3px;
 530      resize: vertical;
 531 }
 532 .hardwareForm input[type=text], select, textarea {
 533      width: 40%;
 534      padding: 3px;
 535      border: 0.5px solid #ccc;
 536      border-radius: 4px;
 537      box-sizing: border-box;
 538      margin-top: 3px;
 539      margin-bottom: 3px;
 540      resize: vertical;
 541 }
 542 .podForm input[type=text], select, textarea {
 543      width: 40%;
 544      padding: 3px;
 545      border: 0.5px solid #ccc;
 546      border-radius: 4px;
 547      box-sizing: border-box;
 548      margin-top: 3px;
 549      margin-bottom: 3px;
 550      resize: vertical;
 551 }
 552 .uploadForm input[type=text], select, textarea {
 553      width: 40%;
 554      padding: 3px;
 555      border: 0.5px solid #ccc;
 556      border-radius: 4px;
 557      box-sizing: border-box;
 558      margin-top: 3px;
 559      margin-bottom: 3px;
 560      resize: vertical;
 561 }
 562 .vnfForm input[type=text], select, textarea {
 563      width: 40%;
 564      padding: 3px;
 565      border: 0.5px solid #ccc;
 566      border-radius: 4px;
 567      box-sizing: border-box;
 568      margin-top: 3px;
 569      margin-bottom: 3px;
 570      resize: vertical;
 571 }
 572 .siteForm input[type=text], select, textarea {
 573      width: 40%;
 574      padding: 3px;
 575      border: 0.5px solid #ccc;
 576      border-radius: 4px;
 577      box-sizing: border-box;
 578      margin-top: 3px;
 579      margin-bottom: 3px;
 580      resize: vertical;
 581 }
 582 .siteForm li input[type=text], select, textarea {
 583      width: 40%;
 584      padding: 3px;
 585      border: 0.5px solid #ccc;
 586      border-radius: 4px;
 587      box-sizing: border-box;
 588      margin-top: 3px;
 589      margin-bottom: 3px;
 590      resize: vertical;
 591 }
 592
 593  label {
 594      font-weight: normal !important;
 595 }
 596 .ngdialog-custom{
 597         background: #e6e6e6;
 598 }
 599 #footerlogo{
 600         position:absolute;
 601         display:inline-block;
 602         bottom:0;
 603          width: 250px;
 604 }
 605 .borderFrame{
 606         margin-top:2px;
 607         border:2px solid #cdcdcd;
 608         /*border-radius: 0.1px;
 609         /*-moz-border-radius: 0.1px;
 610         -webkit-border-radius:0.1px;*/
 611 }