components/datalake-handler/admin/src/src/styles.css

   1 /*
   2 * ============LICENSE_START=======================================================
   3 * ONAP : DataLake
   4 * ================================================================================
   5 * Copyright 2019 QCT
   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
  22 /**
  23  *
  24  * @author Ekko Chang
  25  *
  26  */
  27
  28 html {
  29   height: 100%;
  30 }
  31
  32 body {
  33   margin: 0;
  34   height: 100%;
  35   font-family: "Open Sans", sans-serif;
  36   font-weight: 400;
  37   font-size: 14px;
  38 }
  39
  40 #container {
  41   height: 100%;
  42 }
  43
  44 /*
  45   Navigation
  46 */
  47 .path {
  48   font-family: "Open Sans", sans-serif;
  49   font-weight: 300;
  50   font-size: 14px;
  51   letter-spacing: 2px;
  52   color: #313032;
  53   line-height: 20px;
  54 }
  55
  56 /*
  57   Menu
  58 */
  59 .menu-header {
  60   background-color: #313449;
  61 }
  62
  63 .menu {
  64   background-color: #313449;
  65   font-family: "Open Sans", sans-serif;
  66   font-weight: 400;
  67   font-size: 14px;
  68   letter-spacing: 1px;
  69   color: #ffffff;
  70   text-align: left;
  71 }
  72
  73 .menu .nav {
  74   justify-content: center;
  75   min-width: 220px;
  76 }
  77
  78 .menu .nav-item {
  79   padding-left: 12px;
  80   padding-right: 10px;
  81 }
  82
  83 .menu .navbar-expand-lg .navbar-nav .nav-link {
  84   color: #ffffff;
  85   padding-left: 20px;
  86   padding-right: 20px;
  87 }
  88
  89 .menu .navbar-expand-lg .navbar-nav .nav-item .active {
  90   color: #313449;
  91   background-color: #ffffff;
  92   border-radius: 10px;
  93 }
  94
  95 .menu .navbar-expand-lg .navbar-nav .nav-item :hover {
  96   color: #FFFFFF;
  97   background: rgba(255, 255, 255, 0.2);
  98   border-radius: 10px;
  99 }
 100
 101 /*
 102   Header
 103 */
 104 .header {
 105   background-color: #f2f8fb;
 106   height: 62px;
 107 }
 108
 109 .header .lang-select {
 110   background-color: transparent;
 111   border: none;
 112   font-family: "Open Sans", sans-serif;
 113   font-weight: 300;
 114   font-size: 14px;
 115   color: #313032;
 116   text-align: center;
 117 }
 118
 119 hr {
 120   border: 0.5px solid #A8A9AC;
 121   margin: 10px 0 10px 0;
 122 }
 123
 124 /*
 125   Content
 126 */
 127 .content {
 128   overflow: auto;
 129   min-height: 100vh;
 130   background-color: #f2f8fb;
 131 }
 132
 133 /*
 134   bootstrap table theme
 135 */
 136 .ngx-datatable.bootstrap {
 137   border-bottom-left-radius: 20px;
 138   border-bottom-right-radius: 20px;
 139   height: 75vh;
 140 }
 141
 142 .ngx-datatable.bootstrap .datatable-header {
 143   font-family: "Open Sans", sans-serif;
 144   font-weight: bold;
 145   font-size: 14px;
 146   color: #5DBEBB;
 147   text-align: left;
 148   border-bottom: 1px solid #BDBEC0;
 149   /* height: unset !important; */
 150 }
 151
 152 .ngx-datatable.bootstrap .datatable-header .datatable-header-cell {
 153   padding: 10px 0 10px 0;
 154 }
 155
 156 .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
 157   height: 100%;
 158 }
 159
 160 .ngx-datatable.bootstrap .datatable-body {
 161   height: 100%;
 162 }
 163
 164 .ngx-datatable.bootstrap .datatable-body .datatable-body-row {
 165   font-family: "Open Sans", sans-serif;
 166   font-weight: normal;
 167   font-size: 15px;
 168   color: #313032;
 169   text-align: left;
 170   /* padding: 0.75rem; */
 171   border-bottom: 1px solid #F2F2F2;
 172 }
 173
 174 .ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {
 175   background-color: #FFFFFF;
 176 }
 177
 178 .ngx-datatable.bootstrap .datatable-body .datatable-body-row .datatable-body-cell {
 179   align-items: center !important;
 180   display: flex !important;
 181 }
 182
 183 .ngx-datatable.bootstrap .datatable-body .datatable-body-row.active {
 184   background-color: #1483ff;
 185   color: #fff;
 186 }
 187
 188 .ngx-datatable.bootstrap .datatable-body .datatable-body-row:hover {
 189   /* color: #313032; */
 190   background-color: #CEEBEA;
 191   /* opacity: 0.3; */
 192 }
 193
 194 .ngx-datatable.bootstrap .datatable-footer {
 195   background: #5dbebb;
 196   color: #ededed;
 197 }
 198
 199 .ngx-datatable.bootstrap .datatable-footer .page-count {
 200   padding: 0 1.2rem;
 201 }
 202
 203 .ngx-datatable.bootstrap .datatable-footer .datatable-pager {
 204   margin: 0 10px;
 205   vertical-align: middle;
 206 }
 207
 208 .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li {
 209   margin: 10px 0px;
 210 }
 211
 212 .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
 213 .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
 214   background-color: #545454;
 215   font-weight: bold;
 216 }
 217
 218 .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
 219   height: 22px;
 220   min-width: 24px;
 221   line-height: 22px;
 222   padding: 0;
 223   border-radius: 3px;
 224   margin: 0 3px;
 225   text-align: center;
 226   vertical-align: top;
 227   text-decoration: none;
 228   color: #ededed;
 229 }
 230
 231 .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
 232 .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
 233 .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
 234 .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
 235   line-height: 27px;
 236 }
 237
 238 .dl-icon-enable {
 239   color: #5dbebb;
 240 }
 241
 242 .dl-icon-disable {
 243   color: #d2d3d5;
 244 }
 245
 246 .dl-icon-unconfig {
 247   font-family: "Open Sans", sans-serif;
 248   font-weight: 600;
 249   font-size: 11px;
 250   color: #19a2a2;
 251   text-align: left;
 252   background-color: rgb(93, 190, 187, 0.3);
 253   border: 1px solid #19a2a2;
 254   border-radius: 2px;
 255 }
 256
 257 .dl-icon-config {
 258   font-family: "Open Sans", sans-serif;
 259   font-weight: 600;
 260   font-size: 11px;
 261   color: #bdbec0;
 262   text-align: left;
 263   background-color: rgb(189, 190, 192, 0.3);
 264   border: 1px solid #bdbec0;
 265   border-radius: 2px;
 266 }
 267
 268 .dl-db-icon-hover-enable .tooltip-inner {
 269   font-family: "Open Sans", sans-serif;
 270   font-weight: 600;
 271   font-size: 11px;
 272   color: #19a2a2;
 273   background-color: rgba(93, 190, 187, 0.3);
 274   border: 1px solid #19a2a2;
 275   border-radius: 2px;
 276 }
 277
 278 .dl-db-icon-hover-enable .arrow {
 279   display: none;
 280 }
 281
 282 .dl-db-icon-hover-disable .tooltip-inner {
 283   font-family: "Open Sans", sans-serif;
 284   font-weight: 600;
 285   font-size: 11px;
 286   color: #bdbec0;
 287   background-color: rgba(189, 190, 192, 0.3);
 288   border: 1px solid #bdbec0;
 289   border-radius: 2px;
 290 }
 291
 292 .dl-db-icon-hover-disable .arrow {
 293   display: none;
 294 }
 295
 296 .action-icon-setting {
 297   color: #5a595a;
 298 }
 299
 300 /*
 301   Form elements
 302 */
 303
 304 /* Heading */
 305 .dl-h1 {
 306   font-family: "Roboto", sans-serif;
 307   font-weight: 100;
 308   font-size: 120px;
 309   letter-spacing: 5px;
 310 }
 311
 312 .dl-h2 {
 313   font-family: "Open Sans", sans-serif;
 314   font-weight: 300;
 315   font-size: 35px;
 316   letter-spacing: 2px;
 317 }
 318
 319 .dl-h3 {
 320   font-family: "Open Sans", sans-serif;
 321   font-weight: 300;
 322   font-size: 25px;
 323   letter-spacing: 2px;
 324 }
 325
 326 .dl-h4 {
 327   font-family: "Open Sans", sans-serif;
 328   font-weight: 600;
 329   font-size: 25px;
 330   letter-spacing: 2px;
 331 }
 332
 333 .dl-emphasis1 {
 334   font-family: "Open Sans", sans-serif;
 335   font-weight: 400;
 336   font-size: 16px;
 337 }
 338
 339 .dl-nodata {
 340   font-family: "Open Sans", sans-serif;
 341   font-weight: 400;
 342   font-size: 14px;
 343   color: #bdbec0;
 344 }
 345
 346 /* Input: textbox */
 347 .dl-input-text-search {
 348   font-family: "Open Sans", sans-serif;
 349   font-weight: 400;
 350   font-size: 14px;
 351   color: #313032;
 352
 353   text-align: left;
 354   border: 1px solid #5dbebb;
 355   border-radius: 2px;
 356 }
 357
 358 .dl-input-text {
 359   font-family: "Open Sans", sans-serif;
 360   font-weight: 400;
 361   font-size: 14px;
 362   color: #313032;
 363
 364   text-align: left;
 365   background-color: #ffffff;
 366   box-shadow: 3px 3px 11px 0 #d2d3d5;
 367   border-radius: 8px;
 368   border-width: 0px;
 369 }
 370
 371 .dl-input-text:disabled,
 372 .dl-input-text[readonly] {
 373   background-color: #ffffff;
 374   opacity: 1;
 375 }
 376
 377 .input-group-text {
 378   border-top-left-radius: 8px;
 379   border-bottom-left-radius: 8px;
 380 }
 381
 382 /* Input: checkbox */
 383 .input-group-text {
 384   padding: .375rem 16px;
 385 }
 386
 387 .dl-input-chk {
 388   font-family: "Open Sans", sans-serif;
 389   font-weight: 400;
 390   font-size: 14px;
 391   color: #313032;
 392
 393   background-color: #ffffff;
 394   box-shadow: 9px 3px 11px 0 #d2d3d5;
 395   border-radius: 8px;
 396   border-width: 0px;
 397 }
 398
 399 .dl-input-chk-label {
 400   background-color: #ffffff;
 401   box-shadow: 3px 3px 13px 0 #d2d3d5;
 402   border-width: 0;
 403   display: block;
 404   position: relative;
 405   cursor: pointer;
 406   -webkit-user-select: none;
 407   -moz-user-select: none;
 408   -ms-user-select: none;
 409   user-select: none;
 410 }
 411
 412 /* Hide the browser's default checkbox */
 413 .dl-input-chk-label input {
 414   position: absolute;
 415   cursor: pointer;
 416   opacity: 0;
 417   height: 0;
 418   width: 0;
 419 }
 420
 421 /* Create a custom checkbox */
 422 .dl-input-checkmark {
 423   position: absolute;
 424   top: 9px;
 425   left: 9px;
 426   height: 20px;
 427   width: 20px;
 428   background-color: #ffffff;
 429   border: 2px solid #d2d3d5;
 430   border-radius: 7px;
 431 }
 432
 433 /* On mouse-over, add a grey background color */
 434 .dl-input-chk-label:hover input~.dl-input-checkmark {
 435   background-color: #f2f8fb;
 436 }
 437
 438 /* When the checkbox is checked, add a blue background */
 439 .dl-input-chk-label input:checked~.dl-input-checkmark {
 440   background-color: #5dbebb;
 441   border: 2px solid #5dbebb;
 442 }
 443
 444 /* Create the dl-input-checkmark/indicator (hidden when not checked) */
 445 .dl-input-checkmark:after {
 446   content: "";
 447   position: absolute;
 448   display: none;
 449 }
 450
 451 /* Show the dl-input-checkmark when checked */
 452 .dl-input-chk-label input:checked~.dl-input-checkmark:after {
 453   display: block;
 454 }
 455
 456 /* Style the dl-input-checkmark/indicator */
 457 .dl-input-chk-label .dl-input-checkmark:after {
 458   left: 5.5px;
 459   top: 1px;
 460   width: 6px;
 461   height: 12px;
 462   border: solid white;
 463   border-width: 0 3px 3px 0;
 464   -webkit-transform: rotate(45deg);
 465   -ms-transform: rotate(45deg);
 466   transform: rotate(45deg);
 467 }
 468
 469 /*
 470   Input: Button
 471 */
 472 .dl-btn-light {
 473   font-family: "Open Sans", sans-serif;
 474   font-weight: 400;
 475   font-size: 14px;
 476   color: #a8a9ac;
 477   text-align: center;
 478   background-color: #ffffff;
 479   border-radius: 6px;
 480   border: 1px solid #a8a9ac;
 481 }
 482
 483 .dl-btn-light:hover {
 484   color: #a8a9ac;
 485   background-color: #f2f8fb;
 486 }
 487
 488 .dl-btn-dark {
 489   font-family: "Open Sans", sans-serif;
 490   font-weight: 400;
 491   font-size: 14px;
 492   color: #ffffff;
 493   text-align: center;
 494   background-color: #5dbebb;
 495   border-radius: 6px;
 496 }
 497
 498 .dl-btn-dark:hover {
 499   color: #ffffff;
 500   background-color: #19a2a2;
 501 }
 502
 503 /*
 504   Input: Toggle (switch)
 505 */
 506 .dl-switch {
 507   position: relative;
 508   display: inline-block;
 509   width: 54px;
 510   height: 28px;
 511 }
 512
 513 .dl-switch input {
 514   opacity: 0;
 515   width: 0;
 516   height: 0;
 517 }
 518
 519 .dl-slider {
 520   position: absolute;
 521   cursor: pointer;
 522   top: 0;
 523   left: 0;
 524   right: 0;
 525   bottom: 0;
 526   background-color: #a8a9ac;
 527   -webkit-transition: 0.4s;
 528   transition: 0.4s;
 529 }
 530
 531 .dl-slider:before {
 532   position: absolute;
 533   content: "";
 534   height: 20px;
 535   width: 20px;
 536   left: 4px;
 537   bottom: 4px;
 538   background-color: white;
 539   -webkit-transition: 0.4s;
 540   transition: 0.4s;
 541 }
 542
 543 input#switch:checked+.dl-slider {
 544   background-color: #5dbebb;
 545 }
 546
 547 input#switch:focus+.dl-slider {
 548   box-shadow: 0 0 1px #5dbebb;
 549 }
 550
 551 input#switch:checked+.dl-slider:before {
 552   -webkit-transform: translateX(26px);
 553   -ms-transform: translateX(26px);
 554   transform: translateX(26px);
 555 }
 556
 557 .dl-slider.round {
 558   border-radius: 16px;
 559 }
 560
 561 .dl-slider.round:before {
 562   border-radius: 50%;
 563 }
 564
 565 /*
 566   Modal windows
 567 */
 568 .dl-md-modal .modal-dialog {
 569   max-width: 565px;
 570 }
 571
 572 .modal-content {
 573   -webkit-border-radius: 20px !important;
 574   -moz-border-radius: 20px !important;
 575   border-radius: 20px !important;
 576 }
 577
 578 /*
 579   Modal notice
 580 */
 581 .dl-notice {
 582   font-family: "Open Sans", sans-serif;
 583   font-weight: 600;
 584   font-size: 14px;
 585   color: #0091FF;
 586   text-align: left;
 587   background-color: rgba(13, 169, 226, 0.30);
 588   border: 2px solid #0DA9E2;
 589   border-radius: 6px;
 590   padding: 4px 4px 4px 10px;
 591 }
 592 .p-1.alert-delete-model{
 593   padding: 0.25rem 0.5rem;
 594 }
 595 .p-1 .alert-delete-title{
 596   padding: 1.25rem 1.5rem!important;
 597 }
 598 .p-1 .alert-delete-content{
 599   padding: 1.25rem 4.5rem!important;
 600 }