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
  23 // style
  24 body, html {
  25   height: 100%;
  26   background-image: linear-gradient(to bottom, #ffc427, #de5d2c);
  27 }
  28
  29 #top {
  30   height: 28px;
  31   #logo {
  32     font-weight: bold;
  33     letter-spacing: 0.1em;
  34     color: #444;
  35     float: left;
  36     margin-left: 20px;
  37     padding: 3px 15px 5px 40px;
  38     background: url('../assets/img/logo.png') left 10px center no-repeat #fff;
  39     background-size: 20px;
  40     border-radius: 0 0 5px 5px;
  41     box-shadow: 0 0 15px #b99e57;
  42     span {
  43       color: #777;
  44     }
  45   }
  46   .nav {
  47     a {
  48       padding: 3px 10px;
  49       margin: 0;
  50     }
  51   }
  52 }
  53
  54 #main {
  55   @mainWidth: 65%;
  56
  57   @padding: 7px;
  58   @offset: 5px;
  59   //background-image: linear-gradient(to bottom, #eee, #f7941e);
  60   background-color: hsla(17%, 0, 33, 50%);
  61
  62   //border: 1px dotted #000;
  63
  64   position: absolute;
  65   top: @bodyOffset+5px;
  66   bottom: @offset;
  67   left: @offset;
  68   right: @offset;
  69
  70   border-radius: 7px;
  71   padding: @padding;
  72
  73   #left-cover, #center-cover, #right-cover {
  74     height: 100%;
  75     min-height: 100%;
  76     //border: 1px dotted #000;
  77   }
  78   #left, #center, #right {
  79     overflow-y: auto;
  80     background: #fff;
  81     padding: @padding;
  82     height: 100%;
  83     min-height: 100%;
  84     border-radius: 7px;
  85   }
  86   #left-cover, #center-cover {
  87     float: left;
  88   }
  89   #left-cover, #right-cover {
  90     width: (100%-@mainWidth)/2;
  91   }
  92   #left-cover {
  93     padding-right: 5px;
  94     #left {
  95       overflow: hidden;
  96       position: relative;
  97       .top {
  98         border-radius: 5px 5px 0 0;
  99         border: 1px solid #ccc;
 100         height: 175px;
 101         .title {
 102           background-image: linear-gradient(to bottom, #eee, #ccc);
 103           color: #222;
 104           font-weight: bold;
 105           border-radius: 4px 4px 0 0;
 106           padding: 2px 5px;
 107           border-bottom: 1px solid #ccc;
 108         }
 109         .nav {
 110           li {
 111             a {
 112               padding: 5px 15px;
 113               &:hover {
 114                 border-radius: 0;
 115               }
 116             }
 117             margin: 0;
 118           }
 119           .active {
 120             a {
 121               background: #eee;
 122               color: #222;
 123               border-radius: 0;
 124             }
 125           }
 126         }
 127       }
 128       .bottom {
 129         position: absolute;
 130         top: 180px;
 131         right: 7px;
 132         bottom: 7px;
 133         left: 7px;
 134         overflow: hidden;
 135         border: 1px solid #ccc;
 136         border-top: none;
 137         border-radius: 0 0 5px 5px;
 138         padding: 0;
 139         .title {
 140           position: relative;
 141           height: 60px;
 142           background: #eee;
 143           border-bottom: 1px solid #ccc;
 144           padding: 7px 5px;
 145           display: inline-block;
 146           width: 100%;
 147           h4 {
 148             margin: 0;
 149             font-size: 1.0em;
 150             font-weight: bold;
 151             width: 100%;
 152             display: block;
 153           }
 154           input {
 155             font-size: 0.9em;
 156             padding: 1px;
 157             width: 100%;
 158             border: 1px solid #888;
 159             margin-top: 5px;
 160             display: block;
 161           }
 162         }
 163         #submenu {
 164           position: absolute;
 165           top: 60px;
 166           right: 0;
 167           bottom: 0;
 168           left: 0;
 169           margin: 0;
 170           border-radius: 0;
 171           border: none;
 172           background: #fff;
 173           overflow-y: scroll;
 174           padding: 0;
 175           font-size: 0.9em;
 176           ul {
 177             border-bottom: none;
 178             li {
 179               margin: 0;
 180               a {
 181                 background: url('../assets/img/openflow.png') left 8px center no-repeat #fff;
 182                 border-radius: 0;
 183                 border: none;
 184                 margin: 0;
 185                 padding: 5px 5px 5px 35px;
 186                 &:hover {
 187                   background-color: #eee;
 188                 }
 189               }
 190             }
 191           }
 192         }
 193       }
 194     }
 195   }
 196   #right-cover {
 197     float: right;
 198     padding-left: 5px;
 199     #right {
 200     }
 201   }
 202   #center-cover {
 203     width: @mainWidth;
 204     position: relative;
 205
 206     #center {
 207       padding: @padding;
 208       padding-top: 45px;
 209
 210       h1 {
 211         margin: -25px 0 0 0;
 212         padding: 0;
 213       }
 214
 215       h4 {
 216         color: #444;
 217         margin: 0 0 10px 0;
 218         padding: 0;
 219       }
 220
 221       .menu {
 222         position: absolute;
 223         top: 0;
 224         left: 0;
 225         right: 0;
 226
 227         height: 45px;
 228
 229         z-index: 1;
 230         background: #fff;
 231
 232         border-radius: 7px 7px 0 0;
 233
 234         ul {
 235           margin-bottom: 10px;
 236           padding: 5px;
 237           border-bottom: 1px solid #ddd;
 238           li {
 239             a {
 240               padding: 5px 10px;
 241             }
 242           }
 243         }
 244       }
 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 }