src/webui/www/private/css/Layout.css

   1 @import url("palette.css");
   2
   3 /*
   4
   5 Core.css for Mocha UI
   6
   7 Theme: Default
   8
   9 Copyright:
  10         Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>.
  11
  12 License:
  13         MIT-style license.
  14
  15 Required by:
  16         Layout.js
  17
  18 */
  19
  20 /* Layout
  21 ---------------------------------------------------------------- */
  22
  23 body {
  24     margin: 0; /* Required */
  25 }
  26
  27 #desktop {
  28     cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */
  29     height: 100%;
  30     min-height: 100%;
  31     min-width: 400px; /* Helps keep header content from wrapping */
  32     overflow: hidden;
  33     position: relative;
  34 }
  35
  36 #desktopTitlebarWrapper {
  37     height: 45px;
  38     overflow: hidden;
  39     position: relative;
  40 }
  41
  42 #desktopTitlebar {
  43     background: url("../images/logo.gif") no-repeat;
  44     background-position: left 0;
  45     height: 32px;
  46     padding: 7px 8px 6px;
  47 }
  48
  49 #desktopTitlebar h1.applicationTitle {
  50     display: none;
  51     font-size: 20px;
  52     font-weight: bold;
  53     line-height: 25px;
  54     margin: 0;
  55     padding: 0 5px 0 0;
  56 }
  57
  58 #desktopTitlebar h2.tagline {
  59     font-family: Verdana, Arial, Helvetica, sans-serif;
  60     font-size: 10px;
  61     font-weight: bold;
  62     padding: 7px 0 0;
  63     text-align: center;
  64     text-transform: uppercase;
  65 }
  66
  67 #desktopTitlebar h2.tagline .taglineEm {
  68     font-weight: bold;
  69 }
  70
  71 #topNav {
  72     font-family: Verdana, Arial, Helvetica, sans-serif;
  73     font-size: 10px;
  74     padding: 13px 10px 0 0;
  75     position: absolute;
  76     right: 0;
  77     text-align: right;
  78     top: 0;
  79 }
  80
  81 #topNav a {
  82     font-weight: normal;
  83 }
  84
  85 #topNav a:hover {
  86     text-decoration: none;
  87 }
  88
  89 /* Navbar */
  90
  91 #desktopNavbar {
  92     background-color: var(--color-background-default);
  93     margin: 0 0px;
  94     overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */
  95 }
  96
  97 #desktopNavbar ul {
  98     font-size: 12px;
  99     list-style: none;
 100     margin: 0;
 101     padding: 0;
 102 }
 103
 104 #desktopNavbar > ul > li {
 105     float: left;
 106 }
 107
 108 #desktopNavbar a {
 109     display: block;
 110 }
 111
 112 #desktopNavbar ul li a {
 113     color: var(--color-text-default);
 114     font-weight: normal;
 115     padding: 4px 10px;
 116 }
 117
 118 #desktopNavbar ul li a:hover {
 119     background-color: var(--color-background-hover);
 120     color: var(--color-text-white);
 121 }
 122
 123 #desktopNavbar ul li a.arrow-right,
 124 #desktopNavbar ul li a:hover.arrow-right {
 125     background-image: url("../images/arrow-right.gif");
 126     background-position: right 7px;
 127     background-repeat: no-repeat;
 128 }
 129
 130 #desktopNavbar li ul {
 131     background-color: var(--color-background-default);
 132     border: 1px solid var(--color-border-default);
 133     left: -999em;
 134     position: absolute;
 135     z-index: 8000;
 136 }
 137
 138 #desktopNavbar li:hover ul ul,
 139 #desktopNavbar li.ieHover ul ul,
 140 #desktopNavbar li:hover ul ul ul,
 141 #desktopNavbar li.ieHover ul ul ul {
 142     left: -999em;
 143 }
 144
 145 #desktopNavbar li ul ul {
 146     /* third-and-above-level lists */
 147     margin: -22px 0 0 163px;
 148 }
 149
 150 #desktopNavbar li ul li .check {
 151     font-size: 1px;
 152     height: 5px;
 153     left: 6px;
 154     line-height: 1px;
 155     overflow: hidden;
 156     position: absolute;
 157     top: 8px;
 158     width: 5px;
 159 }
 160
 161 #desktopNavbar li ul li a {
 162     color: var(--color-text-default);
 163     font-weight: normal;
 164     min-width: 120px;
 165     padding: 4px 10px 4px 25px;
 166     position: relative;
 167 }
 168
 169 #desktopNavbar li ul li a:hover {
 170     background-color: var(--color-background-hover);
 171     color: var(--color-text-white);
 172 }
 173
 174 /* lists nested under hovered list items */
 175 #desktopNavbar li:hover ul,
 176 #desktopNavbar li.ieHover ul,
 177 #desktopNavbar li li.ieHover ul,
 178 #desktopNavbar li li li.ieHover ul,
 179 #desktopNavbar li li:hover ul,
 180 #desktopNavbar li li li:hover ul {
 181     left: auto;
 182 }
 183
 184 /* For IE7 */
 185 #desktopNavbar li:hover {
 186     position: static;
 187 }
 188
 189 li.divider {
 190     border-top: 1px solid var(--color-border-default);
 191     margin-top: 2px;
 192     padding-top: 3px;
 193 }
 194
 195 #pageWrapper {
 196     border-bottom: 1px solid var(--color-border-default);
 197     border-top: 1px solid var(--color-border-default);
 198     overflow: hidden; /* This can be set to hidden or auto */
 199     position: relative;
 200     /*height: 100%;*/
 201 }
 202
 203 /* Footer */
 204
 205 #desktopFooterWrapper {
 206     bottom: 0;
 207     height: 30px;
 208     left: 0;
 209     overflow: hidden;
 210     position: absolute;
 211     width: 100%;
 212 }
 213
 214 #desktopFooter {
 215     font-family: Verdana, Arial, Helvetica, sans-serif;
 216     font-size: 11px;
 217     height: 24px;
 218     padding: 6px 8px 0;
 219 }
 220
 221 /* Panel Layout
 222 ---------------------------------------------------------------- */
 223
 224 /* Columns */
 225
 226 .column {
 227     float: left;
 228     overflow: hidden; /* Required by IE6 */
 229     position: relative;
 230 }
 231
 232 /* Panels */
 233
 234 .panel {
 235     border-bottom: 1px solid var(--color-border-default);
 236     overflow: auto;
 237     position: relative;
 238 }
 239
 240 .panelWrapper.collapsed .panel-header {
 241     border-bottom: 0;
 242 }
 243
 244 .bottomPanel {
 245     border-bottom: 0;
 246 }
 247
 248 .pad {
 249     padding: 8px;
 250 }
 251
 252 .panel-header {
 253     border-bottom: 1px solid var(--color-border-default);
 254     overflow: hidden;
 255     position: relative;
 256 }
 257
 258 .panel-headerContent {
 259     padding-top: 2px;
 260 }
 261
 262 .panel-header h2 {
 263     display: inline-block;
 264     font-size: 12px;
 265     height: 22px;
 266     margin: 0;
 267     overflow: hidden;
 268     padding: 3px 8px 0;
 269 }
 270
 271 .panel-collapse {
 272     background: url("../images/collapse.svg") center/16px no-repeat;
 273 }
 274
 275 .panel-expand {
 276     background: url("../images/collapse.svg") center/16px no-repeat;
 277     transform: rotate(180deg);
 278 }
 279
 280 .icon16 {
 281     cursor: pointer;
 282     margin: 4px 0 0 2px;
 283 }
 284
 285 /* Column and Panel Handles */
 286
 287 .horizontalHandle {
 288     font-size: 1px;
 289     height: 4px;
 290     line-height: 1px;
 291     overflow: hidden;
 292 }
 293
 294 .horizontalHandle.detached .handleIcon {
 295     background: transparent;
 296 }
 297
 298 .horizontalHandle .handleIcon {
 299     background: url("../images/handle-icon-horizontal.gif") center center
 300         no-repeat;
 301     font-size: 1px;
 302     height: 4px;
 303     line-height: 1px;
 304     margin: 0 auto;
 305     overflow: hidden;
 306 }
 307
 308 .columnHandle {
 309     background: url("../images/handle-icon.gif") center center no-repeat;
 310     border: 1px solid var(--color-border-default);
 311     border-bottom: 0;
 312     border-top: 0;
 313     float: left;
 314     min-height: 10px;
 315     overflow: hidden;
 316     width: 4px;
 317 }
 318
 319 /* Toolboxes */
 320
 321 .toolbox {
 322     float: right;
 323     height: 24px;
 324     margin-top: 3px;
 325     overflow: hidden;
 326     padding: 0 5px;
 327     text-align: right;
 328 }
 329
 330 /* Have to specify div here for IE6's sake */
 331 div.toolbox.divider {
 332     background: url("../images/toolbox-divider.gif") repeat-y;
 333     padding-left: 8px;
 334 }
 335
 336 .toolbox img.disabled {
 337     cursor: default;
 338 }
 339
 340 .iconWrapper {
 341     border: 1px solid transparent;
 342     display: inline-block;
 343     height: 22px;
 344     min-width: 22px;
 345     overflow: hidden;
 346 }
 347
 348 * html .iconWrapper {
 349     border: 0;
 350     padding: 1px;
 351 }
 352
 353 .iconWrapper img {
 354     cursor: pointer;
 355     margin: 0;
 356     padding: 3px;
 357 }
 358
 359 .iconWrapper:hover {
 360     border: 1px solid #a0a0a0;
 361     border-radius: 3px;
 362 }
 363
 364 #spinnerWrapper {
 365     background: url("../images/spinner-placeholder.gif") no-repeat;
 366     height: 16px;
 367     margin: 4px 5px 0;
 368     width: 16px;
 369 }
 370
 371 #spinner {
 372     background: url("../images/spinner.gif") no-repeat;
 373     display: none;
 374     height: 16px;
 375     width: 16px;
 376 }
 377
 378 #desktopFooter td {
 379     text-align: left;
 380     vertical-align: top;
 381 }
 382
 383 td.speedLabel {
 384     cursor: pointer;
 385     min-width: 18em;
 386 }
 387
 388 #freeSpaceOnDisk {
 389     white-space: nowrap;
 390 }
 391
 392 #DHTNodes {
 393     white-space: nowrap;
 394 }