mod/designtool/designtool-web/src/main/webapp/css/navigation.css

   1 /*
   2  * Licensed to the Apache Software Foundation (ASF) under one or more
   3  * contributor license agreements.  See the NOTICE file distributed with
   4  * this work for additional information regarding copyright ownership.
   5  * The ASF licenses this file to You under the Apache License, Version 2.0
   6  * (the "License"); you may not use this file except in compliance with
   7  * the License.  You may obtain a copy of the License at
   8  *
   9  *     http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  * Unless required by applicable law or agreed to in writing, software
  12  * distributed under the License is distributed on an "AS IS" BASIS,
  13  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  * See the License for the specific language governing permissions and
  15  * limitations under the License.
  16  *
  17  * Modifications to the original nifi code for the ONAP project are made
  18  * available under the Apache License, Version 2.0
  19  */
  20
  21 /* general graph control styles */
  22
  23 #graph-controls {
  24     position: absolute;
  25     left: 0;
  26     top: 110px;
  27     z-index: 2;
  28 }
  29
  30 #graph-controls .icon {
  31     font-size: 18px;
  32     line-height: 23px;
  33     margin-left: -2px;
  34 }
  35
  36 #graph-controls .fa {
  37     font-size: 18px;
  38     margin-left: -2px;
  39 }
  40
  41 .graph-control-header-icon.fa {
  42     color: #004849; /*link-color*/
  43     margin-left: 7px !important;
  44 }
  45
  46 div.graph-control {
  47     box-shadow: 0 1px 6px rgba(0,0,0,0.25);
  48     background-color: rgba(249, 250, 251, 0.9);
  49     border-top: 1px solid #aabbc3;
  50     border-right: 1px solid #aabbc3;
  51     border-bottom: 1px solid #aabbc3;
  52     margin-bottom: 2px;
  53 }
  54
  55 .graph-control-content {
  56     margin-left: 10px;
  57     margin-right: 10px;
  58     margin-bottom: 10px;
  59 }
  60
  61 .docked {
  62     height: 32px;
  63     width: 32px;
  64 }
  65
  66 div.graph-control-docked {
  67     height: 100%;
  68     width: 100%;
  69     text-align: center;
  70     line-height: 34px;
  71     color: #004849;
  72 }
  73
  74 .docked:hover {
  75     border-top: 1px solid #004849; /*tint base-color 60%*/
  76     border-right: 1px solid #004849; /*tint base-color 60%*/
  77     border-bottom: 1px solid #004849; /*tint base-color 60%*/
  78 }
  79
  80 div.graph-control button {
  81     line-height: 30px;
  82     border: 1px solid #CCDADB; /*tint link-color 80%*/
  83     background-color: rgba(249,250,251,1);
  84     color: #004849;
  85 }
  86
  87 div.graph-control button:hover {
  88     border: 1px solid #004849; /*link-color*/
  89 }
  90
  91 div.graph-control button:disabled {
  92     color: #CCDADB; /*tint link-color 80%*/
  93     cursor: not-allowed;
  94     border: 1px solid #CCDADB; /*tint link-color 80%*/
  95 }
  96
  97 div.graph-control div.graph-control-expansion {
  98     color: #728E9B;
  99     line-height: 34px;
 100     margin-left: 9px !important;
 101 }
 102
 103 div.graph-control-header-icon {
 104     float: left;
 105     margin: 8px 10px 0px 0px;
 106 }
 107
 108 div.graph-control-header {
 109     float: left;
 110     font-size: 12px;
 111     font-family: 'Roboto Slab';
 112     color: #262626;
 113     letter-spacing: 0.05rem;
 114     margin: 10px 0px;
 115 }
 116
 117 div.graph-control-header-action {
 118     float: right;
 119     height: 32px;
 120     width: 32px;
 121 }
 122
 123 .graph-control-header-container:hover {
 124     background: linear-gradient(90deg, rgba(227,232,235,0) 254px, rgba(227,232,235,1) 32px);
 125 }
 126
 127 /* navigate buttons */
 128
 129 #navigation-buttons {
 130     margin-bottom: 5px;
 131     margin-top: 10px;
 132 }
 133
 134 #operation-context {
 135     margin-top: 10px;
 136 }
 137
 138 #operation-context-logo {
 139     float: left;
 140 }
 141
 142 #operation-context-logo i.icon {
 143     font-size: 32px;
 144     font-family: flowfont;
 145     color: #ad9897;
 146 }
 147
 148 #operation-context-details-container {
 149     float: left;
 150     padding-left: 10px;
 151 }
 152
 153 #operation-context-name {
 154     height: 15px;
 155     font-size: 15px;
 156     font-family: Roboto;
 157     color: #262626;
 158     width: 230px;
 159     text-overflow: ellipsis;
 160     overflow: hidden;
 161     white-space: nowrap;
 162 }
 163
 164 #operation-context-type {
 165     font-size: 12px;
 166     font-family: Roboto;
 167     color: #728e9b;
 168     margin-top: 3px;
 169 }
 170
 171 #operation-context-id {
 172     font-size: 12px;
 173     font-family: Roboto;
 174     color: #775351;
 175     margin-top: 10px;
 176 }
 177
 178 #operation-context-type.invisible, #operation-context-id.invisible {
 179     visibility: hidden;
 180 }
 181
 182 #operation-buttons {
 183     margin-top: 10px;
 184 }
 185
 186 div.action-button {
 187     float: left;
 188 }
 189
 190
 191 #operate-delete button {
 192     width: inherit;
 193     padding: 0 7px;
 194 }
 195
 196 #operate-delete button span{
 197     padding-left: 5px;
 198     font-size: 12px;
 199  }
 200
 201 #operate-submit button {
 202     width: inherit;
 203     padding: 0 7px;
 204 }
 205
 206  #operate-submit button span{
 207      padding-left: 5px;
 208      font-size: 12px;
 209      color: green;
 210   }
 211
 212 #operate-refresh button {
 213     width: inherit;
 214     padding: 0 7px;
 215 }
 216
 217  #operate-refresh button span{
 218      padding-left: 5px;
 219      font-size: 12px;
 220      color: blue;
 221   }
 222
 223 div.graph-control div.icon-disabled {
 224     color: #ddd;
 225 }
 226
 227 div.button-spacer-small {
 228     float: left;
 229     width: 2px;
 230 }
 231
 232 div.button-spacer-large {
 233     float: left;
 234     width: 12px;
 235 }
 236
 237 /* outline/birdseye */
 238
 239 #birdseye svg, #birdseye canvas {
 240     position: absolute;
 241     overflow: hidden;
 242 }
 243
 244 #birdseye {
 245     width: 264px;
 246     height: 150px;
 247     background: #fff;
 248     z-index: 1001;
 249     overflow: hidden;
 250     border: 1px solid #e5ebed;
 251 }
 252
 253 .brush .selection {
 254     stroke: #666;
 255     fill-opacity: .125;
 256     shape-rendering: crispEdges;
 257 }
 258
 259 rect.birdseye-brush {
 260     stroke: #7098ad;
 261     fill: transparent;
 262 }
 263
 264 /* styles for the breadcrumbs bar */
 265
 266 #breadcrumbs {
 267     position: absolute;
 268     bottom: 0px;
 269     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
 270     background-color: rgba(249, 250, 251, 0.9);
 271     border-top: 1px solid #aabbc3;
 272     color: #598599;
 273     z-index: 3;
 274     height: 31px;
 275     width: 100%;
 276 }
 277
 278 #cluster-indicator {
 279     width: 49px;
 280     height: 15px;
 281     background-color: transparent;
 282     display: none;
 283     position: absolute;
 284     left: 59px;
 285     top: 8px;
 286 }
 287
 288 span.breadcrumb-version-control-green {
 289     color: #1a9964;
 290 }
 291
 292 span.breadcrumb-version-control-red {
 293     color: #ba554a;
 294 }
 295
 296 span.breadcrumb-version-control-gray {
 297     color: #666666;
 298 }
 299
 300 #breadcrumbs-left-border {
 301     position: absolute;
 302     left: 0;
 303     width: 10px;
 304     height: 14px;
 305     z-index: 3;
 306     background-color: transparent;
 307     background: linear-gradient(to right, rgba(249, 250, 251, 0.97), rgba(255, 255, 255, 0));
 308     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#ffffffff, endColorstr=#00ffffff);
 309 }
 310
 311 #breadcrumbs-right-border {
 312     position: absolute;
 313     right: 0px;
 314     width: 10px;
 315     height: 14px;
 316     z-index: 3;
 317     background-color: transparent;
 318     background: linear-gradient(to left, rgba(249, 250, 251, 0.97), rgba(255, 255, 255, 0));
 319     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#00ffffff, endColorstr=#ffffffff);
 320 }
 321
 322 #data-flow-title-viewport {
 323     overflow: hidden;
 324     position: absolute;
 325     left: 5px;
 326     top: 8px;
 327     right: 5px;
 328     z-index: 4;
 329 }
 330
 331 #data-flow-title-container {
 332     font-size: 13px;
 333     color: #000;
 334     position: relative;
 335     float: left;
 336     white-space: nowrap;
 337     line-height: normal;
 338 }
 339
 340 .icon-import:before {
 341     content: '\e850';
 342 }
 343
 344 div.import-group {
 345     position: absolute;
 346     top: 0px;
 347     bottom: 0px;
 348     left: 20px;
 349     right: 20px;
 350     overflow: auto;
 351 }
 352
 353 div.import-header-text {
 354     height: 28px;
 355     font-size: 18px;
 356     font-weight: bold;
 357     color: #728E9B;
 358     margin-bottom: 30px;
 359 }
 360
 361 div.import-container {
 362     position: absolute;
 363     top: 58px;
 364     bottom: 52px;
 365     left: 20px;
 366     right: 0px;
 367     font-size: 15px;
 368 }
 369
 370 .onap-action {
 371   width: 250px;
 372 }
 373
 374 .onap-unpadded {
 375   margin: 0px;
 376   padding: 0px;
 377 }
 378
 379 #import-menu-content {
 380   font-size: 13px;
 381   padding: 3px 0;
 382   background-color: rgba(249, 250, 251, 0.97);
 383   border: 1px solid #004849;
 384   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 385   width: 215px;
 386   max-height: inherit;
 387 }
 388
 389 #import-menu-content md-menu-item {
 390   min-height: 28px;
 391   height: 28px;
 392 }
 393
 394 #import-menu-content a {
 395   height: 28px;
 396   padding: 6px 16px;
 397   cursor: pointer;
 398   padding-left: 10px;
 399   padding-right: 10px;
 400 }
 401
 402 #import-menu-content a:hover {
 403   background-color:#C7D2D7;
 404 }