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 a:hover img {
 124     filter: var(--color-icon-hover);
 125 }
 126
 127 #desktopNavbar ul li a.arrow-right,
 128 #desktopNavbar ul li a:hover.arrow-right {
 129     background-image: url("../images/arrow-right.gif");
 130     background-position: right 7px;
 131     background-repeat: no-repeat;
 132 }
 133
 134 #desktopNavbar li ul {
 135     background-color: var(--color-background-default);
 136     border: 1px solid var(--color-border-default);
 137     left: -999em;
 138     position: absolute;
 139     z-index: 8000;
 140 }
 141
 142 #desktopNavbar li:hover ul ul,
 143 #desktopNavbar li.ieHover ul ul,
 144 #desktopNavbar li:hover ul ul ul,
 145 #desktopNavbar li.ieHover ul ul ul {
 146     left: -999em;
 147 }
 148
 149 #desktopNavbar li ul ul {
 150     /* third-and-above-level lists */
 151     margin: -22px 0 0 163px;
 152 }
 153
 154 #desktopNavbar li ul li .check {
 155     font-size: 1px;
 156     height: 5px;
 157     left: 6px;
 158     line-height: 1px;
 159     overflow: hidden;
 160     position: absolute;
 161     top: 8px;
 162     width: 5px;
 163 }
 164
 165 #desktopNavbar li ul li a {
 166     color: var(--color-text-default);
 167     font-weight: normal;
 168     min-width: 120px;
 169     padding: 4px 10px 4px 25px;
 170     position: relative;
 171 }
 172
 173 #desktopNavbar li ul li a:hover {
 174     background-color: var(--color-background-hover);
 175     color: var(--color-text-white);
 176 }
 177
 178 /* lists nested under hovered list items */
 179 #desktopNavbar li:hover ul,
 180 #desktopNavbar li.ieHover ul,
 181 #desktopNavbar li li.ieHover ul,
 182 #desktopNavbar li li li.ieHover ul,
 183 #desktopNavbar li li:hover ul,
 184 #desktopNavbar li li li:hover ul {
 185     left: auto;
 186 }
 187
 188 /* For IE7 */
 189 #desktopNavbar li:hover {
 190     position: static;
 191 }
 192
 193 li.divider {
 194     border-top: 1px solid var(--color-border-default);
 195     margin-top: 2px;
 196     padding-top: 3px;
 197 }
 198
 199 #pageWrapper {
 200     border-bottom: 1px solid var(--color-border-default);
 201     border-top: 1px solid var(--color-border-default);
 202     overflow: hidden; /* This can be set to hidden or auto */
 203     position: relative;
 204     /*height: 100%;*/
 205 }
 206
 207 /* Footer */
 208
 209 #desktopFooterWrapper {
 210     bottom: 0;
 211     height: 30px;
 212     left: 0;
 213     overflow: hidden;
 214     position: absolute;
 215     width: 100%;
 216 }
 217
 218 #desktopFooter {
 219     font-family: Verdana, Arial, Helvetica, sans-serif;
 220     font-size: 11px;
 221     height: 24px;
 222     padding: 6px 8px 0;
 223 }
 224
 225 /* Panel Layout
 226 ---------------------------------------------------------------- */
 227
 228 /* Columns */
 229
 230 .column {
 231     float: left;
 232     overflow: hidden; /* Required by IE6 */
 233     position: relative;
 234 }
 235
 236 /* Panels */
 237
 238 .panel {
 239     border-bottom: 1px solid var(--color-border-default);
 240     overflow: auto;
 241     position: relative;
 242 }
 243
 244 .panelWrapper.collapsed .panel-header {
 245     border-bottom: 0;
 246 }
 247
 248 .bottomPanel {
 249     border-bottom: 0;
 250 }
 251
 252 .pad {
 253     padding: 8px;
 254 }
 255
 256 .panel-header {
 257     border-bottom: 1px solid var(--color-border-default);
 258     overflow: hidden;
 259     position: relative;
 260 }
 261
 262 .panel-headerContent {
 263     padding-top: 2px;
 264 }
 265
 266 .panel-header h2 {
 267     display: inline-block;
 268     font-size: 12px;
 269     height: 22px;
 270     margin: 0;
 271     overflow: hidden;
 272     padding: 3px 8px 0;
 273 }
 274
 275 .panel-collapse {
 276     background: url("../images/collapse.svg") center/16px no-repeat;
 277 }
 278
 279 .panel-expand {
 280     background: url("../images/collapse.svg") center/16px no-repeat;
 281     transform: rotate(180deg);
 282 }
 283
 284 .icon16 {
 285     cursor: pointer;
 286     margin: 4px 0 0 2px;
 287 }
 288
 289 /* Column and Panel Handles */
 290
 291 .horizontalHandle {
 292     font-size: 1px;
 293     height: 4px;
 294     line-height: 1px;
 295     overflow: hidden;
 296 }
 297
 298 .horizontalHandle.detached .handleIcon {
 299     background: transparent;
 300 }
 301
 302 .horizontalHandle .handleIcon {
 303     background: url("../images/handle-icon-horizontal.gif") center center
 304         no-repeat;
 305     font-size: 1px;
 306     height: 4px;
 307     line-height: 1px;
 308     margin: 0 auto;
 309     overflow: hidden;
 310 }
 311
 312 .columnHandle {
 313     background: url("../images/handle-icon.gif") center center no-repeat;
 314     border: 1px solid var(--color-border-default);
 315     border-bottom: 0;
 316     border-top: 0;
 317     float: left;
 318     min-height: 10px;
 319     overflow: hidden;
 320     width: 4px;
 321 }
 322
 323 /* Toolboxes */
 324
 325 .toolbox {
 326     float: right;
 327     height: 24px;
 328     margin-top: 3px;
 329     overflow: hidden;
 330     padding: 0 5px;
 331     text-align: right;
 332 }
 333
 334 /* Have to specify div here for IE6's sake */
 335 div.toolbox.divider {
 336     background: url("../images/toolbox-divider.gif") repeat-y;
 337     padding-left: 8px;
 338 }
 339
 340 .toolbox img.disabled {
 341     cursor: default;
 342 }
 343
 344 .iconWrapper {
 345     border: 1px solid transparent;
 346     display: inline-block;
 347     height: 22px;
 348     min-width: 22px;
 349     overflow: hidden;
 350 }
 351
 352 * html .iconWrapper {
 353     border: 0;
 354     padding: 1px;
 355 }
 356
 357 .iconWrapper img {
 358     cursor: pointer;
 359     margin: 0;
 360     padding: 3px;
 361 }
 362
 363 .iconWrapper:hover {
 364     border: 1px solid #a0a0a0;
 365     border-radius: 3px;
 366 }
 367
 368 #spinnerWrapper {
 369     background: url("../images/spinner-placeholder.gif") no-repeat;
 370     height: 16px;
 371     margin: 4px 5px 0;
 372     width: 16px;
 373 }
 374
 375 #spinner {
 376     background: url("../images/spinner.gif") no-repeat;
 377     display: none;
 378     height: 16px;
 379     width: 16px;
 380 }
 381
 382 #desktopFooter td {
 383     text-align: left;
 384     vertical-align: top;
 385 }
 386
 387 td.speedLabel {
 388     cursor: pointer;
 389     min-width: 18em;
 390 }
 391
 392 #freeSpaceOnDisk {
 393     white-space: nowrap;
 394 }
 395
 396 #DHTNodes {
 397     white-space: nowrap;
 398 }