webapp/src/app/pages/supervision/supervision-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 button#start-trace {
 105   margin-top: 10px;
 106   margin-left: 10px;
 107 }
 108
 109 button#stop-trace {
 110   margin-top: 10px;
 111   margin-left: 10px;
 112 }
 113
 114 svg#graph {
 115   .link {
 116     fill: none;
 117     stroke: #666;
 118     stroke-width: 1.5px;
 119   }
 120   #ws-client {
 121     fill: green;
 122   }
 123   .link.ws-client {
 124     stroke: green;
 125   }
 126   .link.not-connected {
 127     stroke-dasharray: 0, 2 1;
 128   }
 129   circle {
 130     fill: #ccc;
 131     stroke: #333;
 132     stroke-width: 1.5px;
 133   }
 134   text {
 135     font: 1rem sans-serif;
 136     pointer-events: none;
 137     text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
 138   }
 139 }