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