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