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 {
 179     overflow-x: hidden !important; /* override for default mocha inline style */
 180 }
 181
 182 #Filters ul {
 183     list-style-type: none;
 184 }
 185
 186 #Filters ul img {
 187     height: 16px;
 188     width: 16px;
 189 }
 190
 191 #properties {
 192     background-color: var(--color-background-default);
 193 }
 194
 195 a.propButton {
 196     border: 1px solid rgb(85 81 91);
 197     margin-left: 3px;
 198     margin-right: 3px;
 199     /*border-radius: 3px;*/
 200     padding: 2px;
 201 }
 202
 203 a.propButton img {
 204     margin-bottom: -4px;
 205 }
 206
 207 .scrollableMenu {
 208     overflow: hidden auto;
 209 }
 210
 211 /* context menu specific */
 212
 213 .contextMenu {
 214     background-color: var(--color-background-default);
 215     border: 1px solid var(--color-border-default);
 216     display: none;
 217     list-style-type: none;
 218     padding: 0;
 219 }
 220
 221 .contextMenu .separator {
 222     border-top: 1px solid var(--color-border-default);
 223 }
 224
 225 .contextMenu li {
 226     margin: 0;
 227     padding: 0;
 228     user-select: none;
 229 }
 230
 231 .contextMenu li.disabled {
 232     background-color: transparent;
 233     cursor: default;
 234     filter: grayscale(1);
 235     opacity: 0.6;
 236 }
 237
 238 .contextMenu li.disabled a {
 239     pointer-events: none;
 240 }
 241
 242 .contextMenu li a {
 243     align-items: center;
 244     color: var(--color-text-default);
 245     display: flex;
 246     font-family: Tahoma, Arial, sans-serif;
 247     font-size: 12px;
 248     gap: 7px;
 249     padding: 5px 20px 5px 5px;
 250     text-decoration: none;
 251     white-space: nowrap;
 252 }
 253
 254 .contextMenu li a:hover {
 255     background-color: var(--color-background-hover);
 256     color: var(--color-text-white);
 257 }
 258
 259 .contextMenu li a:hover img:not(.highlightedCategoryIcon) {
 260     filter: var(--color-icon-hover);
 261 }
 262
 263 .contextMenu li ul {
 264     background: var(--color-background-default);
 265     border: 1px solid var(--color-border-default);
 266     left: -999em;
 267     list-style-type: none;
 268     margin: -29px 0 0 100%;
 269     padding: 0;
 270     position: absolute;
 271     width: 164px;
 272     z-index: 8000;
 273 }
 274
 275 .contextMenu li ul li a {
 276     position: relative;
 277 }
 278
 279 .contextMenu li:not(.disabled) .arrow-right {
 280     background-image: url("../images/arrow-right.gif");
 281     background-position: right center;
 282     background-repeat: no-repeat;
 283 }
 284
 285 .contextMenu li:not(.disabled):hover > ul {
 286     /* lists nested under hovered list items */
 287     left: auto;
 288 }
 289
 290 .contextMenu li img {
 291     height: 16px;
 292     width: 16px;
 293 }
 294
 295 .contextMenu li input[type="checkbox"] {
 296     position: relative;
 297     top: 3px;
 298 }
 299
 300 #contextCategoryList img {
 301     border: 1px solid transparent;
 302     padding: 1px;
 303 }
 304
 305 #contextCategoryList img.highlightedCategoryIcon {
 306     background-color: hsl(213deg 94% 86%);
 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 #torrentsFilterSelect {
 444     padding: 2px 4px;
 445 }
 446
 447 #torrentFilesFilterToolbar {
 448     float: right;
 449     margin-right: 5px;
 450 }
 451
 452 #torrentFilesFilterInput {
 453     background-image: url("../images/edit-find.svg");
 454     background-position: left;
 455     background-repeat: no-repeat;
 456     background-size: 1.5em;
 457     padding-left: 2em;
 458     width: 250px;
 459 }
 460
 461 /* Tri-state checkbox */
 462
 463 label.tristate {
 464     background: url("../images/3-state-checkbox.gif") 0 0 no-repeat;
 465     display: block;
 466     float: left;
 467     height: 13px;
 468     margin: 0.15em 8px 5px 0px;
 469     overflow: hidden;
 470     text-indent: -999em;
 471     width: 13px;
 472 }
 473
 474 label.checked {
 475     background-position: 0 -13px;
 476 }
 477
 478 label.partial {
 479     background-position: 0 -26px;
 480 }
 481
 482 fieldset.settings {
 483     border: 1px solid var(--color-border-default);
 484     border-radius: 8px;
 485     padding: 4px 4px 4px 10px;
 486 }
 487
 488 fieldset.settings legend {
 489     font-weight: bold;
 490     margin-left: 8px;
 491     padding: 4px;
 492 }
 493
 494 fieldset.settings label {
 495     padding: 2px;
 496 }
 497
 498 fieldset.settings + div.formRow {
 499     margin-top: 10px;
 500 }
 501
 502 div.formRow {
 503     clear: left;
 504     display: block;
 505 }
 506
 507 .filterTitle {
 508     box-sizing: border-box;
 509     cursor: pointer;
 510     display: flex;
 511     font-weight: bold;
 512     gap: 4px;
 513     overflow: hidden;
 514     padding: 4px 0 4px 6px;
 515     text-overflow: ellipsis;
 516     text-transform: uppercase;
 517     white-space: nowrap;
 518 }
 519
 520 .filterTitle img {
 521     box-sizing: border-box;
 522     height: 16px;
 523     padding: 2px;
 524     width: 16px;
 525 }
 526
 527 .collapsedCategory > ul {
 528     display: none;
 529 }
 530
 531 .collapsedCategory .categoryToggle,
 532 .filterTitle img.rotate {
 533     transform: rotate(-90deg);
 534 }
 535
 536 ul.filterList * {
 537     box-sizing: border-box;
 538 }
 539
 540 ul.filterList {
 541     margin: 0;
 542     padding-left: 0;
 543 }
 544
 545 ul.filterList span.link:hover :is(img, button),
 546 ul.filterList .selectedFilter > .link :is(img, button) {
 547     filter: var(--color-icon-hover);
 548 }
 549
 550 ul.filterList span.link {
 551     cursor: pointer;
 552     display: flex;
 553     gap: 5px;
 554     overflow: hidden;
 555     padding: 4px 6px;
 556     white-space: nowrap;
 557 }
 558
 559 ul.filterList span.link:hover {
 560     background-color: var(--color-background-hover);
 561     color: var(--color-text-white);
 562 }
 563
 564 span.link :last-child {
 565     min-width: 0;
 566     overflow: hidden;
 567     text-overflow: ellipsis;
 568     white-space: nowrap;
 569 }
 570
 571 span.link :is(img, button) {
 572     flex-shrink: 0;
 573 }
 574
 575 .selectedFilter > span.link {
 576     background-color: var(--color-background-blue);
 577     color: var(--color-text-white);
 578 }
 579
 580 .subcategories,
 581 .subcategories ul {
 582     margin: 0;
 583     padding: 0;
 584 }
 585
 586 .subcategories .categoryToggle {
 587     display: inline-block;
 588     visibility: hidden;
 589 }
 590
 591 .categoryToggle {
 592     background: url("../images/go-down.svg") center center / 10px no-repeat
 593         transparent;
 594     border: none;
 595     display: none;
 596     height: 16px;
 597     margin-right: -2px;
 598     padding: 2px;
 599     transition: transform 0.3s;
 600     width: 16px;
 601 }
 602
 603 td.generalLabel {
 604     text-align: right;
 605     vertical-align: top;
 606     white-space: nowrap;
 607     width: 1px;
 608 }
 609
 610 .filesTableCollapseIcon {
 611     cursor: pointer;
 612     height: 15px;
 613     margin-bottom: -3px;
 614     padding-right: 5px;
 615     width: 15px;
 616 }
 617
 618 .filesTableCollapseIcon.rotate {
 619     margin-bottom: -1px;
 620     transform: rotate(270deg);
 621 }
 622
 623 .unselectable {
 624     -webkit-touch-callout: none;
 625     user-select: none;
 626 }
 627
 628 #propGeneral {
 629     padding: 2px;
 630 }
 631
 632 .piecesbarWrapper {
 633     position: relative;
 634     width: 100%;
 635 }
 636
 637 .piecesbarCanvas {
 638     height: 100%;
 639     image-rendering: pixelated;
 640     inset: 0;
 641     position: absolute;
 642     width: 100%;
 643 }
 644
 645 #watched_folders_tab {
 646     border-collapse: collapse;
 647 }
 648
 649 #watched_folders_tab td,
 650 #watched_folders_tab th {
 651     border: 1px solid black;
 652     padding: 2px 4px;
 653 }
 654
 655 .select-watched-folder-editable {
 656     border: solid grey 1px;
 657     height: 20px;
 658     position: relative;
 659     width: 160px;
 660 }
 661
 662 .select-watched-folder-editable select {
 663     border: none;
 664     bottom: 0px;
 665     left: 0px;
 666     margin: 0;
 667     position: absolute;
 668     top: 0px;
 669     width: 160px;
 670 }
 671
 672 .select-watched-folder-editable input {
 673     border: none;
 674     left: 0px;
 675     padding: 1px;
 676     position: absolute;
 677     top: 0px;
 678     width: 140px;
 679 }
 680
 681 .select-watched-folder-editable select:focus,
 682 .select-editable input:focus {
 683     outline: none;
 684 }
 685
 686 /*
 687  * Workaround to prevent the transfer list from
 688  * disappearing when zooming in the browser.
 689  */
 690 #filtersColumn_handle {
 691     margin-left: -1px;
 692 }
 693
 694 .combo_priority {
 695     font-size: 1em;
 696 }
 697
 698 td.statusBarSeparator {
 699     background-image: url("../images/toolbox-divider.gif");
 700     background-position: center 1px;
 701     background-repeat: no-repeat;
 702     background-size: 2px 18px;
 703     width: 22px;
 704 }
 705
 706 /* Statistics window */
 707 .statisticsValue {
 708     text-align: right;
 709 }
 710
 711 /* Search tab */
 712
 713 #SearchPanel,
 714 #SearchPanel_wrapper,
 715 #SearchPanel_pad {
 716     height: inherit;
 717 }
 718
 719 #searchResults {
 720     height: 100%;
 721     padding: 0 20px;
 722 }
 723
 724 #searchResultsTableContainer {
 725     height: calc(100% - 177px);
 726     overflow: auto;
 727 }
 728
 729 #searchResultsTableDiv {
 730     height: calc(100% - 26px) !important;
 731 }
 732
 733 #searchResults .dynamicTable {
 734     width: 100%;
 735 }
 736
 737 #searchResults .numSearchResults {
 738     font-style: italic;
 739 }
 740
 741 .red {
 742     color: var(--color-text-red);
 743 }
 744
 745 .green {
 746     color: var(--color-text-green);
 747 }
 748
 749 .searchPluginsTableRow {
 750     cursor: pointer;
 751 }
 752
 753 #torrentFilesTableDiv .dynamicTable tr.nonAlt:hover {
 754     background-color: var(--color-background-hover);
 755     color: var(--color-text-white);
 756 }
 757
 758 /* Modals */
 759
 760 .modalDialog * {
 761     box-sizing: border-box;
 762 }
 763
 764 .modalDialog .mochaContent.pad {
 765     display: flex !important; /* override for default mocha inline style */
 766     flex-direction: column;
 767     height: 100%;
 768 }
 769
 770 .modalDialog .mochaContent.pad > :last-child {
 771     align-self: flex-end;
 772 }
 773
 774 .modalDialog .mochaContent.pad > :first-child {
 775     margin: auto 0;
 776 }
 777
 778 #rememberBtn {
 779     background: url("../images/object-locked.svg") center center / 24px
 780         no-repeat var(--color-background-popup);
 781     height: 38px;
 782     padding: 4px 6px;
 783     width: 38px;
 784 }
 785
 786 #rememberBtn.disabled {
 787     filter: grayscale(100%);
 788 }
 789
 790 #deleteFromDiskCB {
 791     margin: 0 2px 0 0;
 792     vertical-align: -1px;
 793 }
 794
 795 .dialogMessage {
 796     overflow-wrap: anywhere;
 797 }
 798
 799 .genericConfirmGrid,
 800 .confirmDeletionGrid {
 801     align-items: center;
 802     display: grid;
 803     gap: 3px 4px;
 804     grid-template-columns: max-content 1fr;
 805     margin-bottom: 10px;
 806 }
 807
 808 .confirmGridItem,
 809 .deletionGridItem {
 810     padding: 3px;
 811 }
 812
 813 .deletionGridItem:first-child {
 814     justify-self: center;
 815 }
 816
 817 .confirmWarning,
 818 .confirmDialogWarning {
 819     background: url("../images/dialog-warning.svg") center center no-repeat;
 820     height: 38px;
 821     width: 38px;
 822 }
 823
 824 .confirmWarning {
 825     background-image: url("../images/help-about.svg");
 826 }