opendaylight/web/root/src/main/resources/css/one.less

   1 // properties
   2 @mainTop: 43px;
   3 @mainBottom: 41px;
   4
   5 @minWidth: 640px;
   6 @minHeight: 480px;
   7
   8 @topologyOffset: -4px; // ensure calibration
   9
  10 @interface-admin-up: #46A040;
  11 @interface-admin-down: #C41230;
  12 @interface-edge-down: #F58025;
  13
  14 // mixins
  15 .dash-size (@width, @height) {
  16         width: @width;
  17         height: @height;
  18 }
  19 .position (@type, @top, @right, @bottom, @left) {
  20         position: @type;
  21         top: @top;
  22         right: @right;
  23         bottom: @bottom;
  24         left: @left;
  25 }
  26 .dash-position (@top, @right, @bottom, @left) {
  27         .position(absolute, @top, @right, @bottom, @left);
  28 }
  29 .icon {
  30         width: 22px;
  31         height: 16px;
  32         background-position: left center;
  33         background-repeat: no-repeat;
  34 }
  35 .dashlet-elements {
  36         width: 98%;
  37         margin: 5px auto;
  38 }
  39
  40 // header
  41 #menu {
  42         .navbar-inner {
  43                 .brand {
  44                         font-size: 1.4em;
  45                         font-variant: small-caps;
  46                         margin: 0 12px;
  47                         padding: 10px 0 10px 45px;
  48                         background-image: url('../img/logo.png');
  49                         background-position: left center;
  50                         background-repeat: no-repeat;
  51                 }
  52                 ul {
  53                         margin-top: 10px;
  54                         border-bottom: transparent;
  55                         li {
  56                                 a {
  57                                         padding: 5px 15px;
  58                                         &:hover {
  59                                                 border-color: transparent;
  60                                         }
  61                                 }
  62                         }
  63                         .active {
  64                                 a {
  65                                         border-radius: 1px;
  66                                         background: #f6f6f6;
  67                                         &:hover {
  68                                                 border-top: 1px solid #ddd;
  69                                                 border-right: 1px solid #ddd;
  70                                                 border-left: 1px solid #ddd;
  71                                         }
  72                                 }
  73                         }
  74                 }
  75                 #toolbar {
  76                         position: absolute;
  77                         right: 10px;
  78                         .dropdown-menu {
  79                                 right: 0;
  80                                 left: auto;
  81                                 min-width: 120px;
  82                         }
  83                         .icon-user {
  84                                 .icon;
  85                                 background-image: url('../img/user_0020_16.png');
  86                         }
  87                         .icon-users {
  88                                 .icon;
  89                                 background-image: url('../img/user_group_0107_16.png');
  90                         }
  91                         .icon-cluster {
  92                                 .icon;
  93                                 background-image: url('../img/topology_view_1033_16.png');
  94                         }
  95                         .icon-default {
  96                                 .icon;
  97                                 background-image: url('../img/logo_16.png');
  98                         }
  99                         .icon-save {
 100                                 .icon;
 101                                 background-image: url('../img/save_as_0106_16.png');
 102                         }
 103                         .icon-logout {
 104                                 .icon;
 105                                 background-image: url('../img/open_1054_16.png');
 106                         }
 107                 }
 108         }
 109 }
 110
 111 // footer
 112 #footer {
 113         #alert {
 114                 margin: 0;
 115                 p {
 116                         padding: 0;
 117                         margin: 0;
 118                 }
 119         }
 120 }
 121
 122 // main
 123 #main {
 124         position: fixed;
 125         top: @mainTop;
 126         right: 0;
 127         bottom: @mainBottom;
 128         left: 0;
 129         min-width: @minWidth;
 130         min-height: @minHeight;
 131
 132         // topology
 133         #topology {
 134                 position: absolute;
 135                 top: @topologyOffset;
 136                 right: 0;
 137                 bottom: @topologyOffset;
 138                 left: 0;
 139                 background: #ddd;
 140         }
 141
 142         // left
 143         #left {
 144                 .dash-size(30%, 100%);
 145                 float: left;
 146
 147                 #left-top {
 148                         .dash-size(100%, 60%);
 149
 150                         .dash {
 151                                 .dash-position(5px, 5px, 5px, 5px);
 152                         }
 153                 }
 154
 155                 #left-bottom {
 156                         .dash-size(100%, 40%);
 157
 158                         .dash {
 159                                 .dash-position(0, 5px, 5px, 5px);
 160                         }
 161                 }
 162         }
 163
 164         // right
 165         #right {
 166                 .dash-size(70%, 100%);
 167                 float: right;
 168
 169                 #right-top {
 170                         .dash-size(100%, 60%);
 171
 172                         .dash {
 173                                 .dash-position(5px, 5px, 5px, 0);
 174                         }
 175                 }
 176
 177                 #right-bottom {
 178                         .dash-size(100%, 40%);
 179
 180                         .dash {
 181                                 .dash-position(0, 5px, 5px, 0);
 182                         }
 183                 }
 184         }
 185
 186         #left-top, #left-bottom,
 187         #right-top, #right-bottom {
 188                 position: relative;
 189         }
 190
 191         // dashentries
 192         .dash {
 193                 border-radius: 1px;
 194                 background: #fff;
 195                 border: 1px solid #ddd;
 196
 197                 .nav {
 198                         padding: 2px;
 199                         padding-bottom: 0;
 200                         margin: 0;
 201                 }
 202
 203                 .nav-tabs {
 204                         background: #eee;
 205                         li {
 206                                 a {
 207                                         background: #ddd;
 208                                         padding: 4px 8px;
 209                                         margin-right: 3px;
 210                                         border-radius: 1px;
 211                                         &:hover {
 212                                                 border-color: transparent;
 213                                         }
 214                                 }
 215                         }
 216                         .active {
 217                                 a {
 218                                         background: #fff;
 219                                         border-radius: 1px;
 220                                         &:hover {
 221                                                 border-top: 1px solid #ddd;
 222                                                 border-left: 1px solid #ddd;
 223                                                 border-right: 1px solid #ddd;
 224                                         }
 225                                 }
 226                         }
 227                 }
 228
 229                 .dashlet {
 230                         overflow: auto;
 231                         .dash-position(45px,0,0,0);
 232
 233                         h4 {
 234                                 .dashlet-elements;
 235                         }
 236
 237                         p {
 238                                 .dashlet-elements;
 239                         }
 240
 241                         table {
 242                                 .dashlet-elements;
 243                         }
 244
 245                         .btn-group {
 246                                 margin: 5px;
 247                         }
 248
 249                         .none {
 250                                 margin: 0 auto;
 251                                 padding-top: 128px;
 252                                 background-position: center;
 253                                 background-repeat: no-repeat;
 254                                 background-image: url('../img/alert_unreachable_2008_128.png');
 255                                 text-align: center;
 256                                 p {
 257                                         cursor: default;
 258                                 }
 259                         }
 260                 }
 261         }
 262
 263         // defaults for visual topology
 264         #right-top .dash {
 265                 background: #ddd;
 266                 overflow: hidden;
 267         }
 268 }
 269
 270 .table-cursor tr:hover {
 271         cursor: pointer;
 272 }
 273
 274 // interfaces
 275 table {
 276         .admin-up {
 277                 color: @interface-admin-up;
 278         }
 279         .admin-down {
 280                 color: @interface-admin-down;
 281         }
 282         .edge-down {
 283                 color: @interface-edge-down;
 284         }
 285 }
 286
 287 // hide
 288 .modal {
 289         .help {
 290                 display: none;
 291         }
 292 }