src/webui/www/private/css/style.css

   1 /* Reset */
   2
   3 /*ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,object,iframe { margin: 0; padding: 0; }*/
   4
   5 a img, :link img, :visited img {
   6     border: none;
   7 }
   8
   9 /*table { border-collapse: collapse; border-spacing: 0; }*/
  10
  11 :focus {
  12     outline: none;
  13 }
  14
  15 /* Structure */
  16
  17 body {
  18     margin: 0;
  19     text-align: left;
  20     font-family: Arial, Helvetica, sans-serif;
  21     font-size: 12px;
  22     line-height: 18px;
  23     color: #555;
  24 }
  25
  26 .aside {
  27     width: 300px;
  28 }
  29
  30 .invisible {
  31     display: none;
  32 }
  33
  34 /* Typography */
  35
  36 h2, h3, h4 {
  37     margin: 0;
  38     padding: 0 0 5px 0;
  39     font-size: 12px;
  40     font-weight: bold;
  41     color: #333;
  42 }
  43
  44 h2 {
  45     font-size: 14px;
  46     color: #555;
  47     font-weight: bold;
  48 }
  49
  50 #mochaPage h3 {
  51     display: block;
  52     font-size: 12px;
  53     padding: 6px 0 6px 0;
  54     margin: 0 0 8px 0;
  55     border-bottom: 1px solid #bbb;
  56 }
  57
  58 #error_div {
  59     color: #f00;
  60     font-weight: bold;
  61 }
  62
  63 h4 {
  64     font-size: 11px;
  65 }
  66
  67 a {
  68     color: #e60;
  69     text-decoration: none;
  70     cursor: pointer;
  71 }
  72
  73 a:hover {
  74     text-decoration: none;
  75 }
  76
  77 p {
  78     margin: 0;
  79     padding: 0 0 9px 0;
  80 }
  81
  82 /* List Elements */
  83
  84 ul {
  85     list-style: outside;
  86     margin: 0 0 9px 16px;
  87 }
  88
  89 dt {
  90     font-weight: bold;
  91 }
  92
  93 dd {
  94     padding: 0 0 9px 0;
  95 }
  96
  97 /* Code */
  98
  99 pre {
 100     background-color: #f6f6f6;
 101     color: #006600;
 102     display: block;
 103     font-family: 'Courier New', Courier, monospace;
 104     font-size: 11px;
 105     max-height: 250px;
 106     overflow: auto;
 107     margin: 0 0 10px 0;
 108     padding: 10px;
 109     border: 1px solid #d1d7dc;
 110 }
 111
 112 /* Dividers */
 113
 114 hr {
 115     background-color: #ddd;
 116     color: #ccc;
 117     height: 1px;
 118     border: 0px;
 119 }
 120
 121 .vcenter {
 122     vertical-align: middle;
 123 }
 124
 125 #urls {
 126     width: 90%;
 127     height: 100%;
 128 }
 129
 130 #trackersUrls {
 131     width: 90%;
 132     height: 100%;
 133 }
 134
 135 #Filters ul {
 136     list-style-type: none;
 137 }
 138
 139 #Filters ul li {
 140     margin-left: -16px;
 141 }
 142
 143 #Filters ul img {
 144     padding: 2px 4px;
 145     vertical-align: middle;
 146     width: 16px;
 147     height: 16px;
 148 }
 149
 150 .selectedFilter {
 151     background-color: #415A8D;
 152     color: #FFFFFF;
 153 }
 154
 155 .selectedFilter a {
 156     color: #FFFFFF;
 157 }
 158
 159 #properties {
 160     background-color: #e5e5e5;
 161 }
 162
 163 a.propButton {
 164     border: 1px solid rgb(85, 81, 91);
 165     /*border-radius: 3px;*/
 166     padding: 2px;
 167     margin-left: 3px;
 168     margin-right: 3px;
 169 }
 170
 171 a.propButton img {
 172     margin-bottom: -4px;
 173 }
 174
 175 .scrollableMenu {
 176     overflow-y: auto;
 177     overflow-x: hidden;
 178 }
 179
 180 /* context menu specific */
 181
 182 .contextMenu {
 183     border: 1px solid #999;
 184     padding: 0;
 185     background: #eee;
 186     list-style-type: none;
 187     display: none;
 188 }
 189
 190 .contextMenu .separator {
 191     border-top: 1px solid #999;
 192 }
 193
 194 .contextMenu li {
 195     margin: 0;
 196     padding: 0;
 197 }
 198
 199 .contextMenu li a {
 200     display: block;
 201     padding: 5px 20px 5px 5px;
 202     font-size: 12px;
 203     text-decoration: none;
 204     font-family: tahoma, arial, sans-serif;
 205     color: #000;
 206     white-space: nowrap;
 207 }
 208
 209 .contextMenu li a:hover {
 210     background-color: #ddd;
 211 }
 212
 213 .contextMenu li a.disabled {
 214     color: #ccc;
 215     font-style: italic;
 216 }
 217
 218 .contextMenu li a.disabled:hover {
 219     background-color: #eee;
 220 }
 221
 222 .contextMenu li ul {
 223     padding: 0;
 224     border: 1px solid #999;
 225     padding: 0;
 226     background: #eee;
 227     list-style-type: none;
 228     position: absolute;
 229     left: -999em;
 230     z-index: 8000;
 231     margin: -29px 0 0 100%;
 232     width: 164px;
 233 }
 234
 235 .contextMenu li ul li a {
 236     position: relative;
 237 }
 238
 239 .contextMenu li a.arrow-right, .contextMenu li a:hover.arrow-right {
 240     background-image: url(../images/skin/arrow-right.gif);
 241     background-repeat: no-repeat;
 242     background-position: right center;
 243 }
 244
 245 .contextMenu li:hover ul,
 246 .contextMenu li.ieHover ul,
 247 .contextMenu li li.ieHover ul,
 248 .contextMenu li li li.ieHover ul,
 249 .contextMenu li li:hover ul,
 250 .contextMenu li li li:hover ul {  /* lists nested under hovered list items */
 251     left: auto;
 252 }
 253
 254 .contextMenu li img {
 255     width: 16px;
 256     height: 16px;
 257     margin-bottom: -4px;
 258     -ms-interpolation-mode: bicubic;
 259 }
 260
 261 /* Sliders */
 262
 263 .slider {
 264     clear: both;
 265     position: relative;
 266     font-size: 12px;
 267     font-weight: bold;
 268     width: 400px;
 269     margin-bottom: 15px;
 270 }
 271
 272 .sliderWrapper {
 273     position: relative;
 274     font-size: 1px;
 275     line-height: 1px;
 276     height: 9px;
 277     width: 422px;
 278 }
 279
 280 .sliderarea {
 281     position: absolute;
 282     top: 0;
 283     left: 0;
 284     height: 7px;
 285     width: 420px;
 286     font-size: 1px;
 287     line-height: 1px;
 288     background: #f2f2f2 url(../images/skin/slider-area.gif) repeat-x;
 289     border: 1px solid #a3a3a3;
 290     border-bottom: 1px solid #ccc;
 291     border-left: 1px solid #ccc;
 292     margin: 0;
 293     padding: 0;
 294     overflow: hidden;
 295 }
 296
 297 .sliderknob {
 298     position: absolute;
 299     top: 0;
 300     left: 0;
 301     height: 9px;
 302     width: 19px;
 303     font-size: 1px;
 304     line-height: 1px;
 305     background: url(../images/skin/knob.gif) no-repeat;
 306     cursor: pointer;
 307     overflow: hidden;
 308     z-index: 2;
 309 }
 310
 311 .update {
 312     padding-bottom: 5px;
 313 }
 314
 315 .mochaToolButton {
 316     margin-right: 10px;
 317 }
 318
 319 /* Mocha Customization */
 320
 321 #mochaToolbar {
 322     margin-top: 5px;
 323     position: relative;
 324     height: 29px;
 325     overflow-y: hidden;
 326 }
 327
 328 #mochaToolbar .divider {
 329     background-image: url(../images/skin/toolbox-divider.gif);
 330     background-repeat: no-repeat;
 331     background-position: left center;
 332     padding-left: 14px;
 333     padding-top: 15px;
 334 }
 335
 336 .MyMenuIcon {
 337     margin-left: -18px;
 338     margin-bottom: -3px;
 339     padding-right: 5px;
 340 }
 341
 342 #mainWindowTabs {
 343     float: right;
 344     margin: 4px 5px 0 0;
 345 }
 346
 347 #torrentsFilterToolbar {
 348     float: right;
 349     margin-right: 30px;
 350     margin-right: 30px;
 351 }
 352
 353 #torrentsFilterInput {
 354     width: 160px;
 355     padding-left: 2em;
 356     background-image: url("../images/qbt-theme/edit-find.svg");
 357     background-repeat: no-repeat;
 358     background-size: 1.5em;
 359     background-position: left;
 360 }
 361
 362 /* Tri-state checkbox */
 363
 364 label.tristate {
 365     background: url(../images/3-state-checkbox.gif) 0 0 no-repeat;
 366     display: block;
 367     float: left;
 368     height: 13px;
 369     margin: .15em 8px 5px 0px;
 370     overflow: hidden;
 371     text-indent: -999em;
 372     width: 13px;
 373 }
 374
 375 label.checked {
 376     background-position: 0 -13px;
 377 }
 378
 379 label.partial {
 380     background-position: 0 -26px;
 381 }
 382
 383 fieldset.settings {
 384     border: solid 1px black;
 385     border-radius: 8px;
 386     -webkit-border-radius: 8px;
 387     -moz-border-radius: 8px;
 388     padding: 4px 4px 4px 10px;
 389 }
 390
 391 fieldset.settings legend {
 392     margin-left: 8px;
 393     padding: 4px;
 394     font-weight: bold;
 395 }
 396
 397 fieldset.settings label {
 398     padding: 2px;
 399 }
 400
 401 fieldset.settings + div.formRow {
 402     margin-top: 10px;
 403 }
 404
 405 div.formRow {
 406     clear: left;
 407     display: block;
 408 }
 409
 410 .filterTitle {
 411     font-weight: bold;
 412     text-transform: uppercase;
 413     padding-left: 5px;
 414     padding-top: 5px;
 415     display: block;
 416     overflow: hidden;
 417     white-space: nowrap;
 418     text-overflow: ellipsis;
 419 }
 420
 421 .filterTitle img {
 422     width: 16px;
 423     height: 16px;
 424     margin-bottom: -3px;
 425     padding: 0 5px;
 426 }
 427
 428 .filterTitle img.rotate {
 429     transform: rotate(270deg);
 430 }
 431
 432 ul.filterList {
 433     margin: 0 0 0 16px;
 434     padding-left: 0;
 435 }
 436
 437 ul.filterList a {
 438     display: block;
 439     overflow: hidden;
 440     white-space: nowrap;
 441     text-overflow: ellipsis;
 442 }
 443
 444 ul.filterList li:hover {
 445     background-color: #e60;
 446 }
 447
 448 ul.filterList li:hover a {
 449     color: white;
 450 }
 451
 452 td.generalLabel {
 453     white-space: nowrap;
 454     text-align: right;
 455     width: 1px;
 456     vertical-align: top;
 457 }
 458
 459 #filesTable {
 460     line-height: 20px;
 461 }
 462
 463 #trackersTable,
 464 #webseedsTable {
 465     line-height: 25px;
 466 }
 467
 468 #addTrackersPlus {
 469     width: 16px;
 470     cursor: pointer;
 471     margin-bottom: -3px;
 472 }
 473
 474 .unselectable {
 475     -webkit-touch-callout: none;
 476     -webkit-user-select: none;
 477     -khtml-user-select: none;
 478     -moz-user-select: none;
 479     -ms-user-select: none;
 480     user-select: none;
 481 }
 482
 483 #prop_general {
 484     padding: 2px;
 485 }
 486
 487 #watched_folders_tab {
 488     border-collapse: collapse;
 489 }
 490
 491 #watched_folders_tab td, #watched_folders_tab th {
 492     padding: 2px 4px;
 493     border: 1px solid black;
 494 }
 495
 496 .select-watched-folder-editable {
 497     position: relative;
 498     background-color: white;
 499     border: solid grey 1px;
 500     width: 160px;
 501     height: 20px;
 502 }
 503
 504 .select-watched-folder-editable select {
 505     position: absolute;
 506     top: 0px;
 507     bottom: 0px;
 508     left: 0px;
 509     border: none;
 510     width: 160px;
 511     margin: 0;
 512 }
 513
 514 .select-watched-folder-editable input {
 515     position: absolute;
 516     top: 0px;
 517     left: 0px;
 518     width: 140px;
 519     padding: 1px;
 520     border: none;
 521 }
 522
 523 .select-watched-folder-editable select:focus, .select-editable input:focus {
 524     outline: none;
 525 }
 526
 527 /*
 528  * Workaround to prevent the transfer list from
 529  * disappearing when zooming in the browser.
 530  */
 531 #filtersColumn_handle {
 532     margin-left: -1px;
 533 }
 534
 535 #error_div {
 536     float: left;
 537     font-size: 14px;
 538 }
 539
 540 .combo_priority {
 541     font-size: 1em;
 542 }
 543
 544 td.statusBarSeparator {
 545     width: 22px;
 546     background-image: url('../images/skin/toolbox-divider.gif');
 547     background-repeat: no-repeat;
 548     background-position: center 1px;
 549     background-size: 2px 18px;
 550 }
 551
 552 /* Statistics window */
 553 .statisticsValue {
 554     text-align: right;
 555 }
 556
 557 /* Search tab */
 558
 559 #SearchPanel, #SearchPanel_wrapper, #SearchPanel_pad {
 560     height: inherit;
 561 }
 562
 563 #searchResults {
 564     padding: 0 20px;
 565     height: 100%;
 566 }
 567
 568 #searchResultsTableContainer {
 569     height: calc(100% - 140px);
 570     -moz-height: calc(100% - 140px);
 571     -webkit-height: calc(100% - 140px);
 572     overflow: auto;
 573 }
 574
 575 #searchResultsTableDiv {
 576     height: calc(100% - 26px) !important;
 577     -moz-height: calc(100% - 26px) !important;
 578     -webkit-height: calc(100% - 26px) !important;
 579 }
 580
 581 #searchResults .dynamicTable {
 582     width: 100%;
 583 }
 584
 585 #searchResults .numSearchResults {
 586     font-style: italic;
 587 }
 588
 589 .red {
 590     color: red;
 591 }
 592
 593 .green {
 594     color: green;
 595 }
 596
 597 .searchPluginsTableRow {
 598     cursor: pointer;
 599 }