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-save {
  92                                 .icon;
  93                                 background-image: url('../img/save_as_0106_16.png');
  94                         }
  95                         .icon-logout {
  96                                 .icon;
  97                                 background-image: url('../img/open_1054_16.png');
  98                         }
  99                 }
 100         }
 101 }
 102
 103 // footer
 104 #footer {
 105         #alert {
 106                 margin: 0;
 107                 p {
 108                         padding: 0;
 109                         margin: 0;
 110                 }
 111         }
 112 }
 113
 114 // main
 115 #main {
 116         position: fixed;
 117         top: @mainTop;
 118         right: 0;
 119         bottom: @mainBottom;
 120         left: 0;
 121         min-width: @minWidth;
 122         min-height: @minHeight;
 123
 124         // topology
 125         #topology {
 126                 position: absolute;
 127                 top: @topologyOffset;
 128                 right: 0;
 129                 bottom: @topologyOffset;
 130                 left: 0;
 131                 background: #ddd;
 132         }
 133
 134         // left
 135         #left {
 136                 .dash-size(30%, 100%);
 137                 float: left;
 138
 139                 #left-top {
 140                         .dash-size(100%, 60%);
 141
 142                         .dash {
 143                                 .dash-position(5px, 5px, 5px, 5px);
 144                         }
 145                 }
 146
 147                 #left-bottom {
 148                         .dash-size(100%, 40%);
 149
 150                         .dash {
 151                                 .dash-position(0, 5px, 5px, 5px);
 152                         }
 153                 }
 154         }
 155
 156         // right
 157         #right {
 158                 .dash-size(70%, 100%);
 159                 float: right;
 160
 161                 #right-top {
 162                         .dash-size(100%, 60%);
 163
 164                         .dash {
 165                                 .dash-position(5px, 5px, 5px, 0);
 166                         }
 167                 }
 168
 169                 #right-bottom {
 170                         .dash-size(100%, 40%);
 171
 172                         .dash {
 173                                 .dash-position(0, 5px, 5px, 0);
 174                         }
 175                 }
 176         }
 177
 178         #left-top, #left-bottom,
 179         #right-top, #right-bottom {
 180                 position: relative;
 181         }
 182
 183         // dashentries
 184         .dash {
 185                 border-radius: 1px;
 186                 background: #fff;
 187                 border: 1px solid #ddd;
 188
 189                 .nav {
 190                         padding: 2px;
 191                         padding-bottom: 0;
 192                         margin: 0;
 193                 }
 194
 195                 .nav-tabs {
 196                         background: #eee;
 197                         li {
 198                                 a {
 199                                         background: #ddd;
 200                                         padding: 4px 8px;
 201                                         margin-right: 3px;
 202                                         border-radius: 1px;
 203                                         &:hover {
 204                                                 border-color: transparent;
 205                                         }
 206                                 }
 207                         }
 208                         .active {
 209                                 a {
 210                                         background: #fff;
 211                                         border-radius: 1px;
 212                                         &:hover {
 213                                                 border-top: 1px solid #ddd;
 214                                                 border-left: 1px solid #ddd;
 215                                                 border-right: 1px solid #ddd;
 216                                         }
 217                                 }
 218                         }
 219                 }
 220
 221                 .dashlet {
 222                         overflow: auto;
 223                         .dash-position(45px,0,0,0);
 224
 225                         h4 {
 226                                 .dashlet-elements;
 227                         }
 228
 229                         p {
 230                                 .dashlet-elements;
 231                         }
 232
 233                         table {
 234                                 .dashlet-elements;
 235                         }
 236
 237                         .btn-group {
 238                                 margin: 5px;
 239                         }
 240
 241                         .none {
 242                                 margin: 0 auto;
 243                                 padding-top: 128px;
 244                                 background-position: center;
 245                                 background-repeat: no-repeat;
 246                                 background-image: url('../img/alert_unreachable_2008_128.png');
 247                                 text-align: center;
 248                                 p {
 249                                         cursor: default;
 250                                 }
 251                         }
 252                 }
 253         }
 254
 255         // defaults for visual topology
 256         #right-top .dash {
 257                 background: #ddd;
 258                 overflow: hidden;
 259         }
 260 }
 261
 262 .table-cursor tr:hover {
 263         cursor: pointer;
 264 }
 265
 266 // interfaces
 267 table {
 268         .admin-up {
 269                 color: @interface-admin-up;
 270         }
 271         .admin-down {
 272                 color: @interface-admin-down;
 273         }
 274         .edge-down {
 275                 color: @interface-edge-down;
 276         }
 277 }
 278
 279 // hide
 280 .modal {
 281         .help {
 282                 display: none;
 283         }
 284 }