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

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