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

   1 /*
   2
   3 Core.css for Mocha UI
   4
   5 Theme: Default
   6
   7 Copyright:
   8         Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>.
   9
  10 License:
  11         MIT-style license.
  12
  13 Required by:
  14         Layout.js
  15
  16 */
  17
  18 /* Layout
  19 ---------------------------------------------------------------- */
  20
  21 #desktop {
  22     cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */
  23     height: 100%;
  24     min-height: 100%;
  25     min-width: 400px; /* Helps keep header content from wrapping */
  26     overflow: hidden;
  27     position: relative;
  28 }
  29
  30 #desktopTitlebarWrapper {
  31     height: 45px;
  32     overflow: hidden;
  33     position: relative;
  34 }
  35
  36 #desktopTitlebar {
  37     background: url("../images/logo.gif") no-repeat;
  38     background-position: left 0;
  39     height: 32px;
  40     padding: 7px 8px 6px;
  41 }
  42
  43 #desktopTitlebar h1.applicationTitle {
  44     display: none;
  45     font-size: 20px;
  46     font-weight: bold;
  47     line-height: 25px;
  48     margin: 0;
  49     padding: 0 5px 0 0;
  50 }
  51
  52 #desktopTitlebar h2.tagline {
  53     font-family: Verdana, Arial, Helvetica, sans-serif;
  54     font-size: 10px;
  55     font-weight: bold;
  56     padding: 7px 0 0;
  57     text-align: center;
  58     text-transform: uppercase;
  59 }
  60
  61 #desktopTitlebar h2.tagline .taglineEm {
  62     font-weight: bold;
  63 }
  64
  65 #topNav {
  66     font-family: Verdana, Arial, Helvetica, sans-serif;
  67     font-size: 10px;
  68     padding: 13px 10px 0 0;
  69     position: absolute;
  70     right: 0;
  71     text-align: right;
  72     top: 0;
  73 }
  74
  75 #topNav a {
  76     font-weight: normal;
  77 }
  78
  79 #topNav a:hover {
  80     text-decoration: none;
  81 }
  82
  83 /* Navbar */
  84
  85 #desktopNavbar {
  86     background-color: var(--color-background-default);
  87     overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */
  88 }
  89
  90 #desktopNavbar ul {
  91     font-size: 12px;
  92     margin: 0;
  93     padding: 0;
  94     user-select: none;
  95 }
  96
  97 #desktopNavbar > ul > li {
  98     float: left;
  99 }
 100
 101 #desktopNavbar a {
 102     display: block;
 103 }
 104
 105 #desktopNavbar ul li a {
 106     color: var(--color-text-default);
 107     font-weight: normal;
 108     padding: 4px 10px;
 109 }
 110
 111 #desktopNavbar ul li a:hover {
 112     background-color: var(--color-background-hover);
 113     color: var(--color-text-white);
 114 }
 115
 116 #desktopNavbar a:hover img {
 117     filter: var(--color-icon-hover);
 118 }
 119
 120 #desktopNavbar ul li a.arrow-right,
 121 #desktopNavbar ul li a:hover.arrow-right {
 122     background-image: url("../images/arrow-right.gif");
 123     background-position: right 7px;
 124     background-repeat: no-repeat;
 125 }
 126
 127 #desktopNavbar li ul {
 128     background-color: var(--color-background-default);
 129     border: 1px solid var(--color-border-default);
 130     left: -999em;
 131     position: absolute;
 132     z-index: 8000;
 133 }
 134
 135 #desktopNavbar li:hover ul ul,
 136 #desktopNavbar li.ieHover ul ul,
 137 #desktopNavbar li:hover ul ul ul,
 138 #desktopNavbar li.ieHover ul ul ul {
 139     left: -999em;
 140 }
 141
 142 #desktopNavbar li ul ul {
 143     /* third-and-above-level lists */
 144     margin: -22px 0 0 163px;
 145 }
 146
 147 #desktopNavbar li ul li .check {
 148     font-size: 1px;
 149     height: 5px;
 150     left: 6px;
 151     line-height: 1px;
 152     overflow: hidden;
 153     position: absolute;
 154     top: 8px;
 155     width: 5px;
 156 }
 157
 158 #desktopNavbar li ul li a {
 159     color: var(--color-text-default);
 160     font-weight: normal;
 161     min-width: 155px;
 162     padding: 4px 10px 4px 23px;
 163     position: relative;
 164 }
 165
 166 #desktopNavbar li ul li a:hover {
 167     background-color: var(--color-background-hover);
 168     color: var(--color-text-white);
 169 }
 170
 171 /* lists nested under hovered list items */
 172 #desktopNavbar li:hover ul,
 173 #desktopNavbar li.ieHover ul,
 174 #desktopNavbar li li.ieHover ul,
 175 #desktopNavbar li li li.ieHover ul,
 176 #desktopNavbar li li:hover ul,
 177 #desktopNavbar li li li:hover ul {
 178     left: auto;
 179 }
 180
 181 /* For IE7 */
 182 #desktopNavbar li:hover {
 183     position: static;
 184 }
 185
 186 li.divider {
 187     border-top: 1px solid var(--color-border-default);
 188     margin-top: 2px;
 189     padding-top: 3px;
 190 }
 191
 192 #pageWrapper {
 193     border-bottom: 1px solid var(--color-border-default);
 194     border-top: 1px solid var(--color-border-default);
 195     overflow: hidden; /* This can be set to hidden or auto */
 196     position: relative;
 197 }
 198
 199 #propertiesPanel_header {
 200     height: 28px;
 201 }
 202
 203 /* Footer */
 204
 205 #desktopFooterWrapper {
 206     bottom: 0;
 207     height: 28px;
 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: 28px;
 218     padding: 2px;
 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     height: 100%;
 250     padding: 8px;
 251 }
 252
 253 .panel-header {
 254     border-bottom: 1px solid var(--color-border-default);
 255     overflow: hidden;
 256     position: relative;
 257 }
 258
 259 .panel-headerContent {
 260     padding-top: 2px;
 261 }
 262
 263 .panel-header h2 {
 264     display: inline-block;
 265     font-size: 12px;
 266     height: 22px;
 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: 6px;
 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: 8px;
 317 }
 318
 319 /* Toolboxes */
 320
 321 .toolbox {
 322     float: right;
 323     height: 24px;
 324     margin-top: 1px;
 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 }