vid-app-common/src/main/webapp/app/vid/styles/serviceProxyConfig.css

   1 .diagram  {
   2     background: #F8F8F8;
   3     padding: 48px 20px;
   4     margin: 0px 48px;
   5     display: flex;
   6     flex-direction: column;
   7 }
   8 .diagram  .diagram-img {
   9     margin: 0 auto;
  10     display: flex;
  11     width: 90%;
  12 }
  13 .circle {
  14     float: left;
  15     border: 3px solid;
  16     width: 140px;
  17     height: 140px;
  18     border-radius: 50%;
  19     flex: 0 0 140px;
  20 }
  21 .circle .text {
  22     float: left;
  23     width: 100%;
  24     padding-top: 37%;
  25     text-align: center;
  26     font-size: 14px;
  27     color: #191919;
  28     line-height: 17px;
  29 }
  30 .config-circle {
  31     border-color: #9063CD;
  32     background-color: rgba(144,99,205,0.50);
  33 }
  34 .config-circle .line {
  35     width: 3px;
  36     background-color: #8f61cc;
  37     margin: auto;
  38     height: 100%;
  39     display: block;
  40 }
  41 .service-circle {
  42     border-color: #71C5E8;
  43 }
  44 .service-circle:hover {
  45     background: rgba(113, 197, 232, 0.50);
  46 }
  47 .dotted-line {
  48     border-bottom: 2px dashed #5a5a5a;
  49     width: 200px;
  50     float: left;
  51     height: 70px;
  52     flex: 1;
  53 }
  54 .dotted-line.unchecked .conn-circle {
  55      width: 13px;
  56      height: 13px;
  57      margin: 54px auto;
  58      display: block;
  59      border: 15px solid #F8F8F8;
  60 }
  61 .dotted-line.unchecked .conn-circle:before {
  62     content: "";
  63     float: left;
  64     background: #767676;
  65     width: 13px;
  66     height: 13px;
  67     border-radius: 50%;
  68     position: relative;
  69     top: -6px;
  70     right: 6px;
  71 }
  72
  73 .valid-large {
  74     background-position: -240px -154px;
  75     width: 35px;
  76     height: 35px;
  77 }
  78 .dotted-line.checked .conn-circle {
  79     margin: 52px auto;
  80     display: block;
  81 }
  82 .element-name {
  83     color: #191919;
  84     font-size: 14px;
  85     width: 100%;
  86     text-align: center;
  87 }
  88 .element-name.service {
  89     flex: 50%;
  90 }
  91 .element-name-wrapper{
  92     display: flex;
  93     margin-top: 30px;
  94 }
  95 .element-name-wrapper  .element-name .label-txt {
  96     color: #191919;
  97     font-size: 14px;
  98 }
  99 .element-name-wrapper  .element-name.service .label-txt:hover {
 100     color: #009FDB;
 101     cursor: pointer;
 102     text-align: center;
 103 }
 104 .element-name-wrapper  .element-name .info{
 105     background: #009FDB;
 106     border-radius: 50%;
 107     height: 16px;
 108     width: 16px;
 109     color: white;
 110     line-height: 15px;
 111     padding-top: 1px;
 112     margin-left: 10px;
 113     margin-top: 2px;
 114     cursor: pointer;
 115     display: inline-block;
 116 }
 117 .service-wrapper-config .bottom {
 118     display: flex;
 119     height: 450px;
 120     margin: 40px 48px;
 121 }
 122 .service-wrapper-config .wrapper-list {
 123     flex: 50%;
 124     height: 100%;
 125 }
 126 .service-wrapper-config .wrapper-list:first-child {
 127     border-right: 1px dashed #D8D8D8;
 128     margin-right: 50px;
 129     padding-right: 50px;
 130 }
 131 .service-wrapper-config .title-txt {
 132     color: #191919;
 133     font-size: 13px;
 134     margin-bottom: 10px;
 135 }
 136
 137 .service-wrapper-config .select-vnf-title {
 138     margin-top: 20px;
 139 }
 140
 141 .ng-hide-keep-block.ng-hide:not(.ng-hide-animate) {
 142     display: block!important;
 143     visibility: hidden;
 144 }
 145
 146 .service-wrapper-config select {
 147     border-color: #D2D2D2;
 148     background-position: 100% 4px;
 149 }
 150 .no-results {
 151     margin-top: 10px;
 152     text-align: center;
 153     display: block;
 154 }