modules/yangvisualizer-resources/src/main/resources/yangvisualizer/yangvisualizer.less

   1 .yangVisualizerWrapper.col-xs-12{
   2   margin-bottom: 0px!important;
   3   background: #000;
   4   color: #f4f3f5;
   5   height: 100%;
   6   padding: 0;
   7   position: relative;
   8
   9   .btn-graph{
  10     min-width: 22px;
  11     line-height: 22px;
  12     text-align: center;
  13     padding: 0!important;
  14   }
  15
  16   .cursor-pointer{
  17     cursor: pointer;
  18   }
  19
  20   div.rightPanel{
  21     background: #000;
  22     position: absolute;
  23     height: calc(~'100% - 143px');
  24     padding-bottom: 20px;
  25     padding-top: 20px;
  26     top: 143px;
  27     border-left: 1px solid #7e8083;
  28     &.panel-show{
  29       right: 0;
  30       left: auto;
  31     }
  32     &.panel-hide{
  33       right: auto;
  34       left: calc(~'100% - 150px');
  35     }
  36     div.inner-content{
  37       overflow-y: scroll;
  38       overflow-x: hidden;
  39       height: 100%;
  40     }
  41     div.topButtons{
  42       position: absolute;
  43       top: 15px;
  44       right: 100%;
  45       -moz-box-sizing: border-box;
  46       -webkit-box-sizing: border-box;
  47       box-sizing: border-box;
  48       padding-right: 10px;
  49       width: 200px;
  50       text-align: right;
  51       button.btn-show{
  52         background: #f4f3f5!important;
  53       }
  54     }
  55     label{
  56       font-weight: normal;
  57       padding-left: 15px;
  58     }
  59     table{
  60       width: 100%;
  61       margin-bottom: 30px;
  62       thead{
  63         th{
  64           font-weight: normal;
  65           padding-left: 15px;
  66           min-width: 150px;
  67           border-bottom: 1px solid #7e8083;
  68           text-transform: uppercase;
  69           &.bigger{
  70             min-width: 230px;
  71           }
  72         }
  73       }
  74       tbody{
  75         td{
  76           padding: 0 15px;
  77           vertical-align: top;
  78           span.link{
  79             color: #009ee3;
  80             cursor: pointer;
  81             &:hover{
  82               text-decoration: underline;
  83             }
  84           }
  85         }
  86       }
  87     }
  88   }
  89   div.main{
  90     top: 0;
  91   }
  92   div.topLine{
  93     border-bottom: 1px solid #7e8083;
  94     line-height: 44px;
  95     padding-top: 10px;
  96     min-height: 100%;
  97     select{
  98       background: transparent;
  99       color: #f4f3f5;
 100       border: 0;
 101       option{
 102         color: #000;
 103         background: #fff;
 104       }
 105     }
 106   }
 107   div.sigma{
 108     position: relative;
 109     div.viewNav{
 110       position: absolute;
 111       z-index: 1;
 112       top: 10px;
 113       left: 15px;
 114       &.margin-legend{
 115         margin-top: 40px;
 116       }
 117       ul.navWrapper{
 118         margin: 0;
 119         padding: 0;
 120         li{
 121           display: -moz-inline-stack;
 122           display: inline-block;
 123           vertical-align: top;
 124           zoom: 1;
 125           *display: inline;
 126           span{
 127             .transition(150ms);
 128             cursor: pointer;
 129             color: #f4f3f5;
 130             outline: 0 none;
 131             text-decoration: none;
 132             margin-left: 10px;
 133             &:hover, &.active{
 134               color: #f6a000;
 135             }
 136           }
 137         }
 138       }
 139       div.legend{
 140         ul{
 141           padding: 0;
 142           margin: 0;
 143           list-style: none;
 144         }
 145         li{
 146           margin-bottom: 5px;
 147           .textHidden{
 148             display: none;
 149           }
 150           .text{
 151             margin-left: 10px;
 152             line-height: 18px;
 153           }
 154           .showChckbx{
 155             position: relative;
 156             top: 2px;
 157             left: 5px;
 158             }
 159           .itemWrapper{
 160             &:hover{
 161               .text{
 162                 display: block !important;
 163               }
 164             }
 165           }
 166
 167         }
 168         div.color{
 169           /*margin-right: 15px;*/
 170           width: 18px;
 171           height: 18px;
 172           -webkit-border-radius: 9px;
 173           border-radius: 9px;
 174           cursor: pointer;
 175         }
 176       }
 177     }
 178   }
 179   .yangVisualizer{
 180     .childrenForm{
 181       color: #fff;
 182     }
 183     .portlet{
 184       border: 1px solid orange;
 185       .title{
 186         padding: 5px 10px;
 187         background: orange;
 188         color: #fff;
 189         line-height: 22px;
 190       }
 191       .bodyWrapper{
 192         padding: 10px;
 193       }
 194     }
 195   }
 196
 197   .jslider_round.sliderCSS.jslider{
 198     .jslider-pointer{
 199       border: 1px solid #88838A;
 200       -webkit-box-shadow:inset 0 0 1px 1px #88838A;
 201       box-shadow:inset 0 0 1px 1px #88838A;
 202     }
 203
 204     .jslider-value{
 205       color: buttontext;
 206
 207       span{
 208         color: buttontext;
 209       }
 210     }
 211
 212     .jslider-label{
 213       color: #fff;
 214       -ms-filter: ~"'progid:DXImageTransform.Microsoft.Alpha(Opacity=" 1*100 ~")'";
 215       filter: ~"alpha(opacity=" 1*100 ~")";
 216       -moz-opacity: 1;
 217       -khtml-opacity: 1;
 218       opacity: 1;
 219     }
 220   }
 221
 222   .slider{
 223     padding-top: 15px;
 224   }
 225 }
 226
 227
 228
 229 #graph-container {
 230   min-height: 550px;
 231   height: 100%;
 232   background: #000;
 233   /*width: 100%;*/
 234 }
 235
 236
 237 body{
 238   position: relative;
 239   overflow-x: hidden;
 240 }