webapp/src/app/pages/monitoring/monitoring-config.component.scss

   1 /* FIXME: not working due to workaround (ViewEncapsulation.None) for svg
   2 @import '../../@theme/styles/themes';
   3 @import '~@nebular/theme/components/card/card.component.theme';
   4 @import '~bootstrap/scss/mixins/breakpoints';
   5 @import '~@nebular/theme/styles/global/bootstrap/breakpoints';
   6 @include nb-install-component() {
   7   nb-card-body {
   8     display: flex;
   9     align-items: center;
  10   }
  11   .action-groups-header {
  12     flex-basis: 20%;
  13     color: nb-theme(card-header-fg-heading);
  14     font-family: nb-theme(card-header-font-family);
  15     font-size: nb-theme(card-header-font-size);
  16     font-weight: nb-theme(card-header-font-weight);
  17   }
  18   .nb-actions {
  19     flex-basis: 80%;
  20   }
  21   .right {
  22     display: flex;
  23     align-items: center;
  24     justify-content: space-between;
  25     width: 100%;
  26     order: 1;
  27     flex-direction: row-reverse;
  28   }
  29   nb-actions > nb-action {
  30     padding: 0;
  31   }
  32   nb-action {
  33     i {
  34       color: nb-theme(color-fg);
  35       font-size: 1.5rem;
  36       margin-right: 1rem;
  37     }
  38     span {
  39       font-family: nb-theme(font-secondary);
  40       font-weight: nb-theme(font-weight-bold);
  41       color: nb-theme(color-fg-heading);
  42       text-transform: uppercase;
  43     }
  44     button {
  45       margin: 0 auto;
  46       padding: 0;
  47       cursor: pointer;
  48       border: none;
  49       background: none;
  50       display: flex;
  51       align-items: center;
  52       &:focus {
  53         box-shadow: none;
  54         outline: none;
  55       }
  56     }
  57   }
  58   @include media-breakpoint-down(md) {
  59     nb-actions nb-action {
  60       padding: 0 0.75rem;
  61     }
  62   }
  63   @include media-breakpoint-down(sm) {
  64     nb-card-body {
  65       padding: 1rem;
  66     }
  67     nb-action {
  68       font-size: 0.75rem;
  69       i {
  70         font-size: 2rem;
  71         margin-right: 0.5rem;
  72       }
  73     }
  74   }
  75   @include media-breakpoint-down(is) {
  76     nb-action i {
  77       font-size: 1.75rem;
  78       margin: 0;
  79     }
  80     span {
  81       display: none;
  82     }
  83   }
  84 }
  85 */
  86
  87 button#refresh-topo {
  88   color: #a4abb3;
  89   font-size: 1.5rem;
  90   margin-right: 1rem;
  91   margin: 0 auto;
  92   padding: 0;
  93   cursor: pointer;
  94   border: none;
  95   background: none;
  96   display: flex;
  97   align-items: center;
  98   &:focus {
  99     box-shadow: none;
 100     outline: none;
 101   }
 102 }
 103
 104 table {
 105   table-layout: fixed;
 106 }
 107
 108 td {
 109   word-wrap:break-word;
 110 }
 111
 112 button#start-trace {
 113   margin-top: 10px;
 114   margin-left: 10px;
 115 }
 116
 117 button#stop-trace {
 118   margin-top: 10px;
 119   margin-left: 10px;
 120 }
 121
 122 button#show-graph {
 123   margin-top: 10px;
 124   margin-left: 10px;
 125 }
 126
 127 #ws-client {
 128   fill: green;
 129 }
 130
 131 svg#graph {
 132   .link {
 133     fill: none;
 134     stroke: #666;
 135     stroke-width: 1.5px;
 136   }
 137   .link.ws-client {
 138     stroke: green;
 139   }
 140   .link.not-connected {
 141     stroke-dasharray: 0, 2 1;
 142   }
 143   circle {
 144     fill: #ccc;
 145     stroke: #333;
 146     stroke-width: 1.5px;
 147   }
 148   text {
 149     font: 1rem sans-serif;
 150     pointer-events: none;
 151     text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
 152   }
 153 }