ganeti_web/static/css/base.css

   1 /* base.css */
   2 * {
   3     font-family:"Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
   4     font-size:12px;
   5     margin: 0;
   6     padding: 0;
   7 }
   8
   9 html {width: 100%;}
  10 html, body {height:100%; /* Sticky Footer */ }
  11 body {
  12     background:url(/static/images/body_background.png) repeat-x top #eee;
  13     color:#333333;
  14     min-width:974px;
  15 }
  16
  17 /*Sticky footer - Opera Fix*/
  18 body:before {
  19     content:"";
  20     height:100%;
  21     float:left;
  22     width:0;
  23     margin-top:-32767px;
  24 }
  25
  26 #body_wrapper {
  27     background: url(/static/images/background_with_menu.png) repeat-y center #eee !important;
  28 }
  29
  30 h1 {font-size: 1.5em; margin-top: 0;}
  31 h2 {font-size: 1.4em;}
  32 h3 {font-size: 1.1em; margin: 15px 0 0.5ex 0;}
  33 h3 a, h3 a:visited {color: #559BD7; font-size: 1em; text-decoration: none;}
  34
  35 a:link, a:visited{color: #5B80B2; text-decoration: none;}
  36 a:hover, a:active {color: #7AB0DC;}
  37
  38 table {border-collapse:collapse;}
  39 tr.even {background: #fafafa;}
  40 td a {border:0;}
  41
  42 ul {margin-top: 0; list-style-type: square;}
  43
  44 li {
  45     font-size:12px;
  46     line-height:16px;
  47     list-style:none;
  48     margin-left:0;
  49 }
  50
  51 /**
  52  * Forms and Form Elements
  53  **/
  54 /*  Default Settings */
  55 form input.submit {color:black; }
  56 form p label {
  57     float: left;
  58     text-align: right;
  59     margin-top: 0.3ex;
  60     margin-right: 0.5em;
  61     display: block;
  62 }
  63 form ul.errorlist {color:red;padding:1ex 1ex;}
  64 form p {padding:0.5ex 0;}
  65 fieldset {border:0; padding-top:0.7em;}
  66 legend {font-size: 1.1em; font-weight:bold; padding-top: 10px;}
  67 form table, form table td, form table td {border:0 !important;}
  68 form p label {width:12em;}
  69 form input.submit{margin-left:12.5em;}
  70
  71 pre {
  72     background-color:#eee;
  73     border: 1px solid #ddd;
  74     font-family:monospace;
  75     font-size:10px;
  76     overflow:scroll;
  77     padding:5px;
  78 }
  79 pre.op_log{
  80     border-right-color:#000;
  81     border-top-color:#000;
  82 }
  83 pre.error {
  84     overflow:visible;
  85     color:#000;
  86     font-family:monospace;
  87     padding:5px;
  88     background-color:transparent;
  89     border:transparent;
  90     font-weight:normal;
  91     font-size:12px;
  92 }
  93
  94 .first_fieldset {margin-top:0px;padding-top:0px;}
  95
  96 #body_wrapper {
  97     min-height: 100%; /* Sticky footer */
  98     width:979px;
  99     margin:0 auto;
 100 }
 101
 102 #header {
 103     background-color: #222;
 104     color:white;
 105     height:64px;
 106     margin:0 auto;
 107     position:relative;
 108     padding-top:10px;
 109     width: 100%;
 110 }
 111 #header a img {border:0;}
 112 #header a:active, #header a:link,
 113 #header a:visited, #header a:hover {color: white; font-weight: bold;}
 114 #header_strip {height:5px; background-color:#C16328; border-bottom:1px solid #ccc;}
 115
 116 #langform {display:inline;}
 117
 118 .select_lang{color: white; font-weight: normal !important;}
 119
 120 #logo {display:block; margin-left:145px;}
 121
 122 #content_wrapper {background:#eee; width:100%;}
 123 #content_column {margin: 0 auto; width:979px;}
 124 #content {
 125     background:white;
 126     border-left: 1px solid #DDDDDD;
 127     border-right: 1px solid #DDDDDD;
 128     float:left;
 129     min-height:400px;
 130     padding:10px 10px 87px 10px; /* Sticky footer - bottom padding must be at least the height of the footer */
 131     width: 817px;
 132 }
 133 #content h1 {margin:10px 0 10px 0;}
 134 #content table {margin-top:15px;  width:100%;}
 135 #content th {background:#eeeeee; border:1px solid #dddddd !important;}
 136 #content td.actions {width:16px;}
 137 #content tr {border-right:0;}
 138 #content tr.group_row {margin:auto;}
 139 #content tr.none td {border-bottom: 1px solid white; font-style:italic;}
 140 #content td.error {padding-right:0 !important; width:16px;}
 141 #content td, #content th, #content td a {
 142     border-bottom:1px solid #eee;
 143     border-top:1px solid #eee;
 144     font-family:"Lucida Grande",Verdana,Arial,sans-serif;
 145     font-size:12px;
 146     line-height:14px;
 147     padding:5px;
 148     text-align: center;
 149     vertical-align:top;
 150 }
 151 #content th.status, #content th.actions { background:none; padding:0;}
 152 #content td a {border:0; padding:0;}
 153
 154 /* horizontal info tables */
 155 #content table.horizontal td { text-align:left; }
 156 #content table.horizontal th { width:15em; }
 157
 158 /* tablesorter style */
 159 #content table.sorted th {
 160     background: url(/static/images/bg.gif) no-repeat center right #eee;
 161     padding-right: 15px;
 162     cursor: s-resize;
 163 }
 164 #content table.sorted .ascending {background-image: url(/static/images/asc.gif);}
 165 #content table.sorted .descending {background-image: url(/static/images/desc.gif);}
 166 #content table.sorted .ascending {background-color: #7AB0DC;}
 167 #content table.sorted .descending {background-color: #7AB0DC;}
 168
 169 #footer {
 170     background: url(/static/images/footerBack.jpg) repeat-x 0 0 #1d1d1d;
 171     border-top: 2px solid #666;
 172     clear:both; /* sticky footer */
 173     color: #C8CED3;
 174     height: 60px; /* sticky footer - must have fixed height */
 175     margin: -67px auto 0 auto; /* Sticky footer - top is negative value of footer height, includes padding */
 176     position:relative; /* Sticky Footer */
 177     padding: 5px 0 0 0;
 178     text-align: center;
 179     min-width:979px;
 180     width: 100%;
 181 }
 182 #footer a {color:#C16328;}
 183
 184 .floatfix {clear:both;}
 185
 186 /**
 187  * Top menu bar
 188  **/
 189 #user_menu {
 190     background-color:#C16328;
 191     border: 1px solid #ccc;
 192     border-top:0;
 193     font-weight:normal;
 194     font-size:11px;
 195     min-height:18px;
 196     padding:5px 5px 0 10px;
 197     position:absolute;
 198     right:50px;
 199     top:-1px;
 200     -moz-border-radius-bottomleft:5px;
 201     -moz-border-radius-bottomright:5px;
 202     -webkit-border-bottom-left-radius: 5px;
 203     -webkit-border-bottom-right-radius: 5px;
 204     z-index:100;
 205 }
 206 #user_menu a {font-size:11px !important; margin:0 !important; padding:0 !important;}
 207 #user_menu a:hover {text-decoration:underline;}
 208 #language {cursor:pointer;}
 209 #languages {
 210     background-color:#C16328;
 211     display:none;
 212     margin: 5px 0 5px 15px;
 213     width:230px;
 214 }
 215 #languages li {
 216     float:left;
 217     list-style:disc !important;
 218     margin:3px;
 219     width:70px;
 220 }
 221 #languages li.current {font-weight:bold;}
 222
 223
 224 /**
 225  * Main menu
 226  **/
 227  .menu {
 228
 229
 230     float:left;
 231     color:#555555;
 232     padding:30px 10px 0 0;
 233     width:130px;
 234 }
 235 .menu ul {float:left; list-style-type: none; padding-left: 20px; width:110px;}
 236 .menu ul li { height:18px; margin: 0px; }
 237 .menu ul li a {color: #666666 !important; text-decoration: none;}
 238 .menu ul li a:hover {color: black !important;}
 239 .menu ul li:hover {list-style: disc;}
 240 .menu h3 {
 241     border-bottom:1px solid #BBBBBB;
 242     margin: 15px 0 5px 0;
 243     width:100%;
 244 }
 245
 246 /**
 247  * Search
 248  */
 249 #search_box{
 250     width:111px;
 251 }
 252
 253 .ui-autocomplete{
 254     background: white;
 255     border:     1px solid #BBBBBB;
 256
 257     /* box shadow */
 258     -moz-box-shadow:    0px 0px 20px black;
 259     -webkit-box-shadow: 0px 0px 20px black;
 260     box-shadow:         0px 0px 20px black;
 261 }
 262
 263 /** Bread Crumbs **/
 264 h1.breadcrumb a, h1.breadcrumb span {color:#C16328 !important; font-size:inherit;}
 265 h1.breadcrumb a:hover {text-decoration:underline;}
 266
 267
 268 /**
 269  *Tabs
 270  */
 271 .ui-tabs-nav {
 272     border-radius:0 !important;
 273     -moz-border-radius:0 !important;
 274     -webkit-border-radius:0 !important;
 275 }
 276 .ui-widget-header {
 277     background:none !important;
 278     border-radius:0 !important;
 279     border-width:0 0 1px 0 !important;
 280     -moz-border-radius:0 !important;
 281     -webkit-border-radius:0 !important;
 282 }
 283 .ui-widget-content {border:0 !important;}
 284 #tabs h3 {margin-top:25px;}
 285 #tabs table {margin-top:5px;}
 286
 287 /** Buttons and Icons **/
 288 .icon {
 289     background-repeat:no-repeat;
 290     height:16px;
 291     padding:0;
 292     width:16px;
 293 }
 294 .button {
 295     background-color: #eeeeee !important;
 296     /*background-position:4px 4px !important;*/
 297     background-position: 4px center !important;
 298     border: 1px solid #cccccc;
 299     clear:both;
 300     color:#666 !important;
 301     cursor:pointer;
 302     float:right;
 303     padding:4px 4px 4px 24px;
 304     margin:2px 2px 4px 2px;
 305     width:140px;
 306     -moz-border-radius:5px;
 307     -webkit-border-radius:5px;
 308 }
 309 .button:hover {
 310     background-color: #dadada !important;
 311     color:black !important;
 312     border-color:#aaaaaa;
 313 }
 314 .button.enabled {
 315     background-color: #cccccc !important;
 316     color:black !important;
 317     border-color:#999;
 318 }
 319 .button.disabled {color: #aaa !important;}
 320 .button.disabled:hover {background-color: #eee !important; border-color:#ccc;}
 321 .button.disabled.enabled:hover {border-color:#999;}
 322
 323 /** Button backgrounds **/
 324 div.edit, a.edit{background:url(/static/images/icons/edit.png) no-repeat;}
 325 div.delete, a.delete{background:url(/static/images/icons/delete.png) no-repeat;}
 326 div.refresh, a.refresh{background:url(/static/images/icons/arrow_refresh.png) no-repeat;}
 327
 328
 329 .add {background:url(/static/images/icons/add.png) no-repeat;}
 330 .add.disabled {background:url(/static/images/icons/add-disabled.png) no-repeat;}
 331 div.edit.disabled, a.edit.disabled{background:url(/static/images/icons/edit-disabled.png) no-repeat;}
 332 div.delete.disabled, a.delete.disabled{background:url(/static/images/icons/delete-disabled.png) no-repeat;}
 333
 334 div.delete, div.edit {
 335     background-repeat:no-repeat;
 336     height:16px;
 337     float:left;
 338     padding:0;
 339     width:16px;
 340 }
 341
 342 .icon {
 343     display:block;
 344     height:16px;
 345     width:16px;
 346 }
 347
 348
 349 /** Pagination **/
 350 .pagination {float:right; margin-top: 15px;}
 351 .pagination li{
 352     margin:0;
 353     display:inline;
 354     font-size:11px;
 355     list-style:none;
 356     padding:3px 6px;
 357 }
 358 .pagination .next a,
 359 .pagination .previous a { font-weight:bold; }
 360 .pagination .page {border:solid 1px #9aafe5; cursor:pointer; margin:0 2px 0 0;}
 361 .pagination li.page:hover { background-color:#9aafe5;}
 362 .pagination .active {
 363     background-color:#2e6ab1 !important;
 364     border-color:#2e6ab1;
 365     color:#FFFFFF;
 366     cursor:auto;
 367     font-weight:bold;
 368 }
 369 .pagination a:link,
 370 .pagination a:visited {
 371     margin:0;
 372     color:#0e509e;
 373     text-decoration:none;
 374 }
 375 .pagination a:hover { text-decoration:underline;}