src/less/main.less

   1 @import "bootstrap.less";
   2
   3 /**
   4  * This is our main variables file. It in turn imports the `variables` file from
   5  * Twitter Bootstrap. We must include it last so we can overwrite any variable
   6  * definitions in our imported stylesheets.
   7  */
   8
   9 @import 'variables.less';
  10
  11 /**
  12  * Typography
  13  */
  14
  15 @font-face {
  16   font-family: 'Roboto';
  17   font-style: normal;
  18   font-weight: 400;
  19   src: local('Roboto Regular'), local('Roboto-Regular'), url(assets/Roboto-Regular.woff) format('woff');
  20 }
  21
  22 // style
  23 body, html {
  24   height: 100%;
  25   background-image: linear-gradient(to bottom, #ffc427, #de5d2c);
  26 }
  27
  28 #top {
  29   height: 28px;
  30   #logo {
  31     font-weight: bold;
  32     letter-spacing: 0.1em;
  33     color: #444;
  34     float: left;
  35     margin-left: 20px;
  36     padding: 3px 15px 5px 40px;
  37     background: url('../assets/img/logo.png') left 10px center no-repeat #fff;
  38     background-size: 20px;
  39     border-radius: 0 0 5px 5px;
  40     box-shadow: 0 0 15px #b99e57;
  41     span {
  42       color: #777;
  43     }
  44   }
  45   .nav {
  46     a {
  47       padding: 3px 10px;
  48       margin: 0;
  49     }
  50   }
  51 }
  52
  53 #main {
  54   @mainWidth: 65%;
  55
  56   @padding: 7px;
  57   @offset: 5px;
  58   //background-image: linear-gradient(to bottom, #eee, #f7941e);
  59   background-color: hsla(17%, 0, 33, 50%);
  60
  61   //border: 1px dotted #000;
  62
  63   position: absolute;
  64   top: @bodyOffset+5px;
  65   bottom: @offset;
  66   left: @offset;
  67   right: @offset;
  68
  69   border-radius: 7px;
  70   padding: @padding;
  71
  72   #left-cover, #center-cover, #right-cover {
  73     height: 100%;
  74     min-height: 100%;
  75     //border: 1px dotted #000;
  76   }
  77   #left, #center, #right {
  78     background: #fff;
  79     padding: @padding;
  80     height: 100%;
  81     min-height: 100%;
  82     border-radius: 7px;
  83   }
  84   #left, #right {
  85     overflow-y: auto;
  86   }
  87   #left-cover, #center-cover {
  88     float: left;
  89   }
  90   #left-cover, #right-cover {
  91     width: (100%-@mainWidth)/2;
  92   }
  93   #left-cover {
  94     padding-right: 5px;
  95     #left {
  96       overflow: hidden;
  97       position: relative;
  98       .top {
  99         border-radius: 5px 5px 0 0;
 100         border: 1px solid #ccc;
 101         height: 175px;
 102         .title {
 103           background-image: linear-gradient(to bottom, #eee, #ccc);
 104           color: #222;
 105           font-weight: bold;
 106           border-radius: 4px 4px 0 0;
 107           padding: 2px 5px;
 108           border-bottom: 1px solid #ccc;
 109         }
 110         .nav {
 111           li {
 112             a {
 113               padding: 5px 15px;
 114               &:hover {
 115                 border-radius: 0;
 116               }
 117             }
 118             margin: 0;
 119           }
 120           .active {
 121             a {
 122               background: #eee;
 123               color: #222;
 124               border-radius: 0;
 125             }
 126           }
 127         }
 128       }
 129       .bottom {
 130         position: absolute;
 131         top: 180px;
 132         right: 7px;
 133         bottom: 7px;
 134         left: 7px;
 135         overflow: hidden;
 136         border: 1px solid #ccc;
 137         border-top: none;
 138         border-radius: 0 0 5px 5px;
 139         padding: 0;
 140         .title {
 141           position: relative;
 142           height: 60px;
 143           background: #eee;
 144           border-bottom: 1px solid #ccc;
 145           padding: 7px 5px;
 146           display: inline-block;
 147           width: 100%;
 148           h4 {
 149             margin: 0;
 150             font-size: 1.0em;
 151             font-weight: bold;
 152             width: 100%;
 153             display: block;
 154           }
 155           input {
 156             font-size: 0.9em;
 157             padding: 1px;
 158             width: 100%;
 159             border: 1px solid #888;
 160             margin-top: 5px;
 161             display: block;
 162           }
 163         }
 164         #submenu {
 165           position: absolute;
 166           top: 60px;
 167           right: 0;
 168           bottom: 0;
 169           left: 0;
 170           margin: 0;
 171           border-radius: 0;
 172           border: none;
 173           background: #fff;
 174           overflow-y: scroll;
 175           padding: 0;
 176           font-size: 0.9em;
 177           ul {
 178             border-bottom: none;
 179             li {
 180               margin: 0;
 181               a {
 182                 background: url('../assets/img/openflow.png') left 8px center no-repeat #fff;
 183                 border-radius: 0;
 184                 border: none;
 185                 margin: 0;
 186                 padding: 5px 5px 5px 35px;
 187                 &:hover {
 188                   background-color: #eee;
 189                 }
 190               }
 191             }
 192           }
 193         }
 194       }
 195     }
 196   }
 197   #right-cover {
 198     float: right;
 199     padding-left: 5px;
 200     #right {
 201     }
 202   }
 203   #center-cover {
 204     width: @mainWidth;
 205     position: relative;
 206
 207     #center {
 208       padding: @padding;
 209       padding-top: 45px;
 210
 211       h1 {
 212         margin: -25px 0 0 0;
 213         padding: 0;
 214       }
 215
 216       h4 {
 217         color: #444;
 218         margin: 0 0 10px 0;
 219         padding: 0;
 220       }
 221
 222       .menu {
 223         position: absolute;
 224         top: 0;
 225         left: 0;
 226         right: 0;
 227         height: 45px;
 228         z-index: 1;
 229         background: #fff;
 230         border-radius: 7px 7px 0 0;
 231         ul {
 232           margin-bottom: 10px;
 233           padding: 5px;
 234           border-bottom: 1px solid #ddd;
 235           li {
 236             a {
 237               padding: 5px 10px;
 238             }
 239           }
 240         }
 241       }
 242       .main {
 243         overflow-y: auto;
 244         height: 100%;
 245       }
 246     }
 247   }
 248 }
 249
 250 // Needed for topology
 251 circle.node {
 252   stroke: #fff;
 253   stroke-width: 1.5px;
 254 }
 255
 256 line.link {
 257   stroke: #999;
 258   stroke-opacity: .6;
 259 }
 260 text {
 261   font: 10px san-serif;
 262   pointer-events: none;
 263 }
 264 svg {
 265   border: 1px solid #888;
 266   border-radius: 4px;
 267   background-image: radial-gradient(circle, #eee, #ccc);
 268 }
 269
 270 // Grid
 271 .indexGrid {
 272   border: 1px solid #777;
 273   position: absolute;
 274   top: 80px;
 275   right: 0;
 276   bottom: 0;
 277   left: 0;
 278   overflow: hidden;
 279 }