media/css/content.css

   1 /* content.css */
   2
   3 h1 .breadcrumb {color:#C16328 !important; font-size:inherit;}
   4 h1 a.breadcrumb:hover {text-decoration:underline;}
   5
   6 #body_wrapper {
   7     background: url(/media/images/background_with_menu.png) repeat-y center #eee !important;
   8 }
   9
  10 .menu {
  11     float:left;
  12     color:#555555;
  13     padding:30px 10px 0 0;
  14     width:130px;
  15 }
  16 .menu ul {float:left; list-style-type: none; padding-left: 20px;}
  17 .menu ul li { height:18px; margin: 0px; }
  18 .menu ul li a {color: #666666 !important; text-decoration: none;}
  19 .menu ul li a:hover {color: black !important;}
  20 .menu ul li:hover {list-style: disc;}
  21 .menu h3 {
  22     float:left;
  23     border-bottom:1px solid #BBBBBB;
  24     margin: 15px 0 5px 0;
  25     width:100%;
  26 }
  27 .menu .user, .menu .user a {font-size:11px;}
  28 .menu .user a {display:block;}
  29
  30 #content_wrapper { background:#eee; width:100%;}
  31 #content_column {margin: 0 auto; width:979px;}
  32 #content {float:left; width: 817px;}
  33 #content td.ram, td.disk {text-align:left !important;}
  34 #content td.status, td.actions { padding:5px 0 0 0;}
  35
  36 /* tablesorter style */
  37 #content table.sorted th {
  38     background: #eeeeee url(/media/images/bg.gif) no-repeat center right;
  39     border: 1px solid #ddd;
  40     padding-right: 15px;
  41     cursor: s-resize;
  42 }
  43 #content table.sorted .headerSortUp {background-image: url(/media/images/asc.gif);}
  44 #content table.sorted .headerSortDown {background-image: url(/media/images/desc.gif);}
  45 #content table.sorted .headerSortDown, #content table.sorted .headerSortUp {
  46     background-color: #7AB0DC;
  47 }
  48
  49 #content th.status, #content th.actions {
  50     background:none;
  51     padding:0;
  52 }
  53 #content td.a {padding:0;}
  54
  55 /* horizontal info tables */
  56 #content table.horizontal td { text-align:left; }
  57 #content table.horizontal th { width:15em; }
  58
  59
  60 /**
  61  * Search
  62  */
  63 #search_box{
  64     width:131px;
  65 }
  66
  67 .ui-autocomplete{
  68     background: white;
  69     border:     1px solid #BBBBBB;
  70
  71     /* box shadow */
  72     -moz-box-shadow:    0px 0px 20px black;
  73     -webkit-box-shadow: 0px 0px 20px black;
  74     box-shadow:         0px 0px 20px black;
  75 }
  76
  77 /**
  78  *Tabs
  79  */
  80 .ui-tabs-nav {
  81     border-radius:0 !important;
  82     -moz-border-radius:0 !important;
  83     -webkit-border-radius:0 !important;
  84 }
  85 .ui-widget-header {
  86     background:none !important;
  87     border-radius:0 !important;
  88     border-width:0 0 1px 0 !important;
  89     -moz-border-radius:0 !important;
  90     -webkit-border-radius:0 !important;
  91 }
  92 .ui-widget-content {border:0 !important;}
  93
  94
  95
  96 /**
  97  * Actions (buttons Delete, Shutdown, Start, Reboot)
  98  **/
  99 #actions.horizontal li {float: left;}
 100 #actions.horizontal .button {width:120px;}
 101
 102 /**
 103  * Overview/Status page
 104  */
 105 #errors_list h2, #usage_summary h2, #cluster_summary h2, #vm_summary h2,
 106 #administration h2 {
 107     border:1px solid #555;
 108     background-color:#888;
 109     color:#fff;
 110     padding: 5px 10px;
 111     font-size:11px;
 112     margin:40px 0 0 0;
 113     -moz-border-radius-topleft:5px;
 114     -moz-border-radius-topright:5px;
 115     -webkit-border-top-left-radius: 5px;
 116     -webkit-border-top-right-radius: 5px;
 117 }
 118 #usage_summary table, #cluster_summary table, #administration table,
 119 #vm_summary table {margin:0;}
 120
 121 /**
 122  * Errors, failures and administration links - status page
 123  **/
 124 #errors_list, #usage_summary, #administration { margin-top: 2em;}
 125 #errors_list h2 {background-color:#DB533B; border-color:#BC4631}
 126 #errors_list table {margin:0;}
 127 #errors_list td.Cluster {
 128     padding-left: 25px;
 129     background:url(/media/images/icons/cluster.png) no-repeat 4px 4px;
 130 }
 131 #errors_list td.VirtualMachine {
 132     padding-left: 25px;
 133     background:url(/media/images/icons/vm.png) no-repeat 4px 4px;
 134 }
 135 #errors_list td.Node {
 136     padding-left: 25px;
 137     background:url(/media/images/icons/node.png) no-repeat 4px 4px;
 138 }
 139
 140
 141 /*   User Profile   */
 142 #uprofile {margin: 0 auto 0 0; width: 50%;}
 143 #uprofile fieldset { margin-bottom:10px; padding:1em; }
 144 #uprofile fieldset h2 {margin-bottom:5px;}
 145 #uprofile fieldset p {padding-bottom:1.5ex;}
 146 #uprofile p label {width: 10.5em;}
 147 #uprofile input.submit {margin-left: 11em;}
 148
 149 /* Clusters */
 150 #quota {
 151     background:#eeeeee;
 152     border:1px solid #dddddd;
 153     margin:2em;
 154     padding: 1em;
 155     -moz-border-radius:5px;
 156     -webkit-border-radius:5px;
 157 }
 158 #quota p label {width:9em;}
 159
 160 /* Virtual Machines */
 161 #content .overview {width:75%; border-color:#eee;}
 162
 163 /*  Orphans */
 164 #orphans {margin:1em 0 0 1em;}
 165 #orphans li input {margin:0 1ex 0 0;}
 166
 167 #configuration {text-align: center;}
 168 #configuration form {margin: 0 auto 0 auto; max-width: 800px;}
 169 #configuration th {text-align: right;}
 170 #configuration td {text-align: left;}
 171 #configuration input[type="text"] {width: 30em;}
 172
 173 .info {
 174     background:#eeeeee;
 175     border:1px solid #dddddd;
 176     margin:20px 0 20px 0;
 177     padding:10px;
 178     -moz-border-radius:5px;
 179     -webkit-border-radius:5px;
 180 }
 181
 182 .disabled{ color:grey; background:white; border:white 2px solid; }
 183
 184 ul#errors {color:#AD2E2E;}
 185 ul.errors {list-style:square;}
 186
 187 .add, .delete, .edit, .reboot, .shutdown, .startup {cursor:pointer;}
 188 div.edit, a.edit{background:url(/media/images/icons/edit.png) no-repeat;}
 189 div.delete, a.delete{background:url(/media/images/icons/delete.png) no-repeat;}
 190 div.deleting, a.deleting{background:url(/media/images/ajax-loader_small_transparent.gif) no-repeat;}
 191 div.icon_error {background:url(/media/images/icons/exclamation.png);}
 192 div.icon_running {background:url(/media/images/icons/check.png);}
 193 div.icon_stopped {background:url(/media/images/icons/stop.png);}
 194 div.icon_deleting {background:url(/media/images/icons/check_red.png);}
 195 .clear {background:url(/media/images/icons/cancel-disabled.png);}
 196
 197 .add {background:url(/media/images/icons/add.png) no-repeat;}
 198 .reboot {background:url(/media/images/icons/arrow_refresh.png) no-repeat;}
 199 .reinstall {background:url(/media/images/icons/arrow_refresh.png) no-repeat;}
 200 .shutdown {background:url(/media/images/icons/stop.png) no-repeat;}
 201 .startup {background:url(/media/images/icons/add.png) no-repeat;}
 202 .encrypt {background:url(/media/images/icons/lock_open.png) no-repeat;}
 203 .connect {background:url(/media/images/icons/disconnect.png) no-repeat;}
 204 .migrate {background:url(/media/images/icons/arrow_out.png) no-repeat;}
 205 .evacuate {background:url(/media/images/icons/arrow_out.png) no-repeat;}
 206 .redistribute-config {background:url(/media/images/icons/arrow_divide.png) no-repeat;}
 207 .modify {background:url(/media/images/icons/edit.png) no-repeat;}
 208 .check {background:url(/media/images/icons/check.png) no-repeat;}
 209 .xmark {background:url(/media/images/icons/cross.png) no-repeat;}
 210
 211 div.edit.disabled, a.edit.disabled{background:url(/media/images/icons/edit-disabled.png) no-repeat;}
 212 div.delete.disabled, a.delete.disabled{background:url(/media/images/icons/delete-disabled.png) no-repeat;}
 213 .reboot.disabled {background:url(/media/images/icons/arrow_refresh-disabled.png) no-repeat;}
 214 .reinstall.disabled {background:url(/media/images/icons/arrow_refresh-disabled.png) no-repeat;}
 215 .shutdown.disabled {background:url(/media/images/icons/stop-disabled.png) no-repeat;}
 216 .startup.disabled {background:url(/media/images/icons/add-disabled.png) no-repeat;}
 217 .encrypt.enabled {background:url(/media/images/icons/lock.png) no-repeat;}
 218 .connect.enabled {background:url(/media/images/icons/disconnect.png) no-repeat;}
 219 .migrate.disabled {background:url(/media/images/icons/arrow_out-disabled.png) no-repeat;}
 220 .evacuate.disabled {background:url(/media/images/icons/arrow_out-disabled.png) no-repeat;}
 221 .redistribute-config.disabled {background:url(/media/images/icons/arrow_divide-disabled.png) no-repeat;}
 222 .modify.disabled {background:url(/media/images/icons/edit-disabled.png) no-repeat;}
 223
 224 .button {background-position: center;}
 225
 226 .icon {
 227     background-repeat:no-repeat;
 228     height:16px;
 229     padding:0;
 230     width:16px;
 231 }
 232
 233 div.delete, div.edit, div.icon_error, .icon_running, .icon_stopped, .icon_deleting, .clear {
 234     background-repeat:no-repeat;
 235     height:16px;
 236     float:left;
 237     padding:0;
 238     width:16px;
 239 }
 240
 241 a.clear:hover {background:url(/media/images/icons/cancel.png) no-repeat !important;}
 242 .clear {cursor:pointer;}
 243
 244 .button {
 245     background-color: #eeeeee !important;
 246     /*background-position:4px 4px !important;*/
 247     background-position: 4px center !important;
 248     border: 1px solid #cccccc;
 249     clear:both;
 250     color:#666 !important;
 251     cursor:pointer;
 252     float:right;
 253     padding:4px 4px 4px 24px;
 254     margin:2px;
 255     width:140px;
 256     -moz-border-radius:5px;
 257     -webkit-border-radius:5px;
 258 }
 259
 260 .button:hover {
 261     background-color: #dadada !important;
 262     color:black !important;
 263     border-color:#aaaaaa;
 264 }
 265
 266 .button.enabled {
 267     background-color: #cccccc !important;
 268     color:black !important;
 269     border-color:#999;
 270 }
 271
 272 .button.disabled {color: #aaa !important;}
 273 .button.disabled:hover {background-color: #eee !important; border-color:#ccc;}
 274 .button.disabled.enabled:hover {border-color:#999;}
 275
 276 .spinner {margin:0 auto; text-align:center; width:100px}
 277 .spinner image {display:block; margin:0 auto; width:32px;}
 278
 279
 280 /**
 281  * Messages
 282  **/
 283 #messages li {
 284     background-color:#c2e192;
 285     border: 1px solid #124612;
 286     color:#124612;
 287     font-weight:bold;
 288     font-size:110%;
 289     margin:20px auto 20px auto;
 290     padding: 10px 0 10px 0;
 291     text-align:center;
 292     width:700px;
 293 }
 294 #messages li.error {background-color:#ee9c98; border-color: #550000; color:#550000;}
 295 #messages li p {font-size:12px; font-weight:normal;}
 296
 297
 298 /**
 299  * Job Status Queue and Log
 300  **/
 301 #messages li.job {
 302     border-width:1px;
 303     padding:0;
 304 }
 305
 306 #messages li.job h3 {
 307     background: #C2E192 url(/media/images/ajax-loader_arrows.gif) no-repeat 5px 5px;
 308     padding: 5px 0 5px 25px;
 309     margin:0;
 310     text-align:left;
 311 }
 312 #messages li.job.error h3 {background: #ee9c98;}
 313 #messages li.job.error .scrollable {overflow:auto; display:inline-block;}
 314 #messages pre.error {text-align:left;}
 315 #messages .op_log {
 316     border-top:1px solid #124612;
 317     margin:0;
 318     padding: 10px;
 319     overflow:visible;
 320 }
 321
 322 .scrollable .detector {
 323     width: inherit;
 324     height: 0px;
 325 }
 326
 327 #messages .op_log  li {
 328     border:0;
 329     background-color:inherit;
 330     color:black;
 331     font: 12px monospace;
 332     margin:0;
 333     padding:1px 0;
 334     text-align:left;
 335 }
 336 #messages a.clear {
 337     background:url(/media/images/icons/cancel.png);
 338     float:right;
 339     margin-right:5px;
 340 }
 341
 342 .ajax_form .submit {margin:10px auto 0 auto; width:6em;}
 343 .ajax_form ul#errors li {
 344     color:#AD2E2E;
 345     list-style:square;
 346     margin: 0 0 10px 20px;}
 347
 348 .name {text-align:left;}
 349 tr.user td.name, tr.group td.name { padding-left:22px !important;}
 350 tr.user td.name {background:url(/media/images/icons/user.png) no-repeat 0 4px;}
 351 tr.group td.name {background:url(/media/images/icons/group.png) no-repeat 0 4px;}
 352
 353 .permissions a {}
 354 .permissions .none, .quota.default {font-style:italic;}
 355
 356 #vnc_errors {
 357     background-color: #ee9c98;
 358     border: 4px solid #ff8b87;
 359     padding: 10px;
 360     margin-bottom: 10px;
 361 }
 362
 363 .ui-tabs-panel {padding-left:0 !important; padding-right:0 !important;}
 364
 365 .pagination {float:right; margin-top: 15px;}
 366 .pagination li{
 367     margin:0;
 368     display:inline;
 369     font-size:11px;
 370     list-style:none;
 371     padding:3px 6px;
 372 }
 373 .pagination .next a,
 374 .pagination .previous a { font-weight:bold; }
 375 .pagination .page {border:solid 1px #9aafe5; cursor:pointer; margin:0 2px 0 0;}
 376 .pagination li.page:hover { background-color:#9aafe5;}
 377 .pagination .active {
 378     background-color:#2e6ab1 !important;
 379     border-color:#2e6ab1;
 380     color:#FFFFFF;
 381     cursor:auto;
 382     font-weight:bold;
 383 }
 384 .pagination a:link,
 385 .pagination a:visited {
 386     margin:0;
 387     color:#0e509e;
 388     text-decoration:none;
 389 }
 390 .pagination a:hover { text-decoration:underline;}
 391
 392 /* No VNC tab */
 393 #encrypt_check {display:none;}
 394
 395 /* object log */
 396 .object_log .timestamp {font-weight:bold; width:4em;}
 397 .object_log td {text-align:left !important;}
 398