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

   1 /* Adaptive color palette */
   2
   3 /* Default rules */
   4 :root {
   5     --color-accent-blue: hsl(210deg 65% 55%);
   6     --color-text-blue: hsl(210deg 100% 55%);
   7     --color-text-orange: hsl(26deg 100% 45%);
   8     --color-text-red: hsl(0deg 100% 65%);
   9     --color-text-green: hsl(110deg 94% 27%);
  10     --color-text-white: hsl(0deg 0% 100%);
  11     --color-text-disabled: hsl(0deg 0% 60%);
  12     --color-text-default: hsl(0deg 0% 33%);
  13     --color-background-blue: hsl(210deg 65% 55%);
  14     --color-background-popup: hsl(0deg 0% 100%);
  15     --color-background-default: hsl(0deg 0% 94%);
  16     --color-background-hover: hsl(26deg 80% 60%);
  17     --color-border-blue: hsl(210deg 42% 48%);
  18     --color-border-default: hsl(0deg 0% 85%);
  19     --color-icon-hover: brightness(0) invert(100%) sepia(100%) saturate(0%)
  20         hue-rotate(108deg) brightness(104%) contrast(104%);
  21
  22     &:not(.dark) {
  23         color-scheme: light;
  24     }
  25
  26     &.dark {
  27         --color-accent-blue: hsl(210deg 42% 48%);
  28         --color-text-blue: hsl(210deg 88.1% 73.5%);
  29         --color-text-orange: hsl(26deg 65% 70%);
  30         --color-text-default: hsl(0deg 0% 90%);
  31         --color-background-blue: hsl(210deg 42% 48%);
  32         --color-background-popup: hsl(0deg 0% 20%);
  33         --color-background-default: hsl(0deg 0% 25%);
  34         --color-background-hover: hsl(26deg 50% 55%);
  35         --color-border-default: hsl(0deg 0% 33%);
  36
  37         color-scheme: dark;
  38
  39         #rssButtonBar img,
  40         #startSearchButton img,
  41         #manageSearchPlugins img {
  42             filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
  43                 saturate(1%) hue-rotate(156deg) brightness(106%) contrast(101%);
  44         }
  45     }
  46 }
  47
  48 /* Reset */
  49
  50 *,
  51 *::before,
  52 *::after {
  53     box-sizing: border-box;
  54 }
  55
  56 * {
  57     margin: 0;
  58 }
  59
  60 input,
  61 button,
  62 textarea,
  63 select {
  64     font: inherit;
  65 }
  66
  67 a img,
  68 :link img,
  69 :visited img {
  70     border: none;
  71 }
  72
  73 ul,
  74 ol {
  75     list-style: none;
  76 }
  77
  78 /* Forms */
  79
  80 input[type="text"],
  81 input[type="number"],
  82 input[type="password"],
  83 input[type="button"],
  84 button,
  85 select {
  86     border: 1px solid var(--color-border-default);
  87     border-radius: 3px;
  88     color: var(--color-text-default);
  89     padding: 3px;
  90 }
  91
  92 select {
  93     padding: 4px;
  94 }
  95
  96 input[type="checkbox"],
  97 input[type="radio"] {
  98     accent-color: var(--color-accent-blue);
  99     margin: 3px 3px 3px 4px;
 100 }
 101
 102 input[type="button"],
 103 input[type="submit"],
 104 button {
 105     cursor: pointer;
 106     padding-left: 10px;
 107     padding-right: 10px;
 108 }
 109
 110 button:disabled {
 111     cursor: initial;
 112 }
 113
 114 :focus {
 115     outline: none;
 116 }
 117
 118 /* Structure */
 119
 120 body {
 121     color: var(--color-text-default);
 122     font-family: Arial, Helvetica, sans-serif;
 123     font-size: 12px;
 124     line-height: 1.5;
 125     text-align: left;
 126 }
 127
 128 .aside {
 129     width: 300px;
 130 }
 131
 132 .invisible {
 133     display: none;
 134 }
 135
 136 /* Typography */
 137
 138 h2,
 139 h3,
 140 h4 {
 141     font-size: 12px;
 142     font-weight: bold;
 143     padding: 0 0 5px;
 144 }
 145
 146 h2 {
 147     color: var(--color-text-default);
 148     font-size: 14px;
 149     font-weight: bold;
 150 }
 151
 152 #mochaPage h3 {
 153     border-bottom: 1px solid var(--color-border-default);
 154     display: block;
 155     font-size: 12px;
 156     margin: 0 0 8px;
 157     padding: 6px 0;
 158 }
 159
 160 #error_div,
 161 #rename_error {
 162     color: var(--color-text-red);
 163     float: left;
 164     font-size: 14px;
 165     font-weight: bold;
 166 }
 167
 168 h4 {
 169     font-size: 11px;
 170 }
 171
 172 a {
 173     color: var(--color-text-orange);
 174     cursor: pointer;
 175     text-decoration: none;
 176 }
 177
 178 a:hover {
 179     text-decoration: none;
 180 }
 181
 182 p {
 183     padding: 0 0 9px;
 184 }
 185
 186 /* List Elements */
 187
 188 dt {
 189     font-weight: bold;
 190 }
 191
 192 dd {
 193     padding: 0 0 9px;
 194 }
 195
 196 /* Forms */
 197
 198 fieldset {
 199     border: 1px solid var(--color-border-default);
 200     border-radius: 1px;
 201     margin: 0 2px;
 202 }
 203
 204 /* Code */
 205
 206 pre {
 207     background-color: var(--color-background-default);
 208     border: 1px solid var(--color-border-default);
 209     color: var(--color-text-green);
 210     display: block;
 211     font-family: "Courier New", Courier, monospace;
 212     font-size: 11px;
 213     margin: 0 0 10px;
 214     max-height: 250px;
 215     overflow: auto;
 216     padding: 10px;
 217 }
 218
 219 /* Dividers */
 220
 221 hr {
 222     background-color: var(--color-background-default);
 223     border: 0px;
 224     color: var(--color-text-default);
 225     height: 1px;
 226     margin-bottom: 6px;
 227 }
 228
 229 .vcenter {
 230     vertical-align: middle;
 231 }
 232
 233 #urls {
 234     height: 100%;
 235     width: 90%;
 236 }
 237
 238 #trackersUrls {
 239     display: block;
 240     height: 100%;
 241     margin: 0 auto 10px;
 242     width: 90%;
 243 }
 244
 245 #Filters {
 246     overflow-x: hidden !important; /* override for default mocha inline style */
 247 }
 248
 249 #Filters ul img {
 250     height: 16px;
 251     width: 16px;
 252 }
 253
 254 #properties {
 255     background-color: var(--color-background-default);
 256 }
 257
 258 a.propButton {
 259     border: 1px solid rgb(85 81 91);
 260     margin-left: 3px;
 261     margin-right: 3px;
 262     padding: 2px;
 263 }
 264
 265 a.propButton img {
 266     margin-bottom: -4px;
 267 }
 268
 269 .scrollableMenu {
 270     overflow: hidden auto;
 271 }
 272
 273 .propertiesTabContent {
 274     height: 100%;
 275
 276     > div {
 277         height: 100%;
 278     }
 279 }
 280
 281 /* context menu specific */
 282
 283 .contextMenu {
 284     background-color: var(--color-background-default);
 285     border: 1px solid var(--color-border-default);
 286     display: none;
 287     padding: 0;
 288 }
 289
 290 .contextMenu .separator {
 291     border-top: 1px solid var(--color-border-default);
 292 }
 293
 294 .contextMenu .separatorBottom {
 295     border-bottom: 1px solid var(--color-border-default);
 296 }
 297
 298 .contextMenu li {
 299     padding: 0;
 300     user-select: none;
 301 }
 302
 303 .contextMenu li.disabled {
 304     background-color: transparent;
 305     cursor: default;
 306     opacity: 0.5;
 307 }
 308
 309 .contextMenu li.disabled a {
 310     pointer-events: none;
 311 }
 312
 313 .contextMenu li a {
 314     align-items: center;
 315     color: var(--color-text-default);
 316     display: flex;
 317     gap: 2px;
 318     padding: 5px 20px 5px 5px;
 319     text-decoration: none;
 320     white-space: nowrap;
 321 }
 322
 323 .contextMenu li a:hover {
 324     background-color: var(--color-background-hover);
 325     color: var(--color-text-white);
 326 }
 327
 328 .contextMenu li a:hover img:not(.highlightedCategoryIcon) {
 329     filter: var(--color-icon-hover);
 330 }
 331
 332 .contextMenu li ul {
 333     background: var(--color-background-default);
 334     border: 1px solid var(--color-border-default);
 335     left: -999em;
 336     margin: -29px 0 0 100%;
 337     padding: 0;
 338     position: absolute;
 339     width: max-content;
 340     z-index: 8000;
 341 }
 342
 343 .contextMenu li ul li a {
 344     position: relative;
 345 }
 346
 347 .contextMenu li:not(.disabled) .arrow-right {
 348     background-image: url("../images/arrow-right.gif");
 349     background-position: right center;
 350     background-repeat: no-repeat;
 351 }
 352
 353 .contextMenu li:not(.disabled):hover > ul {
 354     /* lists nested under hovered list items */
 355     left: auto;
 356 }
 357
 358 .contextMenu li img {
 359     height: 16px;
 360     margin-right: 0.5em;
 361     width: 16px;
 362 }
 363
 364 .contextMenu li input[type="checkbox"] {
 365     margin: 0 0.5em 0 0;
 366     width: 16px;
 367 }
 368
 369 #contextCategoryList img {
 370     border: 1px solid transparent;
 371     box-sizing: content-box;
 372     padding: 1px;
 373 }
 374
 375 #contextCategoryList img.highlightedCategoryIcon {
 376     background-color: hsl(213deg 94% 86%);
 377 }
 378
 379 /* Sliders */
 380
 381 .slider {
 382     clear: both;
 383     font-size: 12px;
 384     font-weight: bold;
 385     margin-bottom: 15px;
 386     position: relative;
 387     width: 400px;
 388 }
 389
 390 .sliderWrapper {
 391     font-size: 1px;
 392     height: 9px;
 393     line-height: 1px;
 394     position: relative;
 395     width: 422px;
 396 }
 397
 398 .sliderarea {
 399     background: #f2f2f2 url("../images/slider-area.gif") repeat-x;
 400     border: 1px solid #a3a3a3;
 401     border-bottom: 1px solid #ccc;
 402     border-left: 1px solid #ccc;
 403     font-size: 1px;
 404     height: 7px;
 405     left: 0;
 406     line-height: 1px;
 407     overflow: hidden;
 408     padding: 0;
 409     position: absolute;
 410     top: 0;
 411     width: 420px;
 412 }
 413
 414 .sliderknob {
 415     background: url("../images/knob.gif") no-repeat;
 416     cursor: pointer;
 417     font-size: 1px;
 418     height: 9px;
 419     left: 0;
 420     line-height: 1px;
 421     overflow: hidden;
 422     position: absolute;
 423     top: 0;
 424     width: 19px;
 425     z-index: 2;
 426 }
 427
 428 .update {
 429     padding-bottom: 5px;
 430 }
 431
 432 .mochaToolButton {
 433     margin-right: 10px;
 434 }
 435
 436 /* Mocha Customization */
 437
 438 #mochaToolbar {
 439     height: auto !important;
 440     margin-top: 5px;
 441     overflow-y: hidden;
 442     position: relative;
 443 }
 444
 445 #mochaToolbar .divider {
 446     background-image: url("../images/toolbox-divider.gif");
 447     background-position: left center;
 448     background-repeat: no-repeat;
 449     padding-left: 14px;
 450     padding-top: 15px;
 451 }
 452
 453 .MyMenuIcon {
 454     margin: 0 6px -3px -18px;
 455 }
 456
 457 #mainWindowTabs {
 458     float: right;
 459     margin: 4px 5px 0 0;
 460 }
 461
 462 #torrentsFilterToolbar {
 463     display: inline-block;
 464     vertical-align: top;
 465 }
 466
 467 #torrentsFilterInput {
 468     background-color: var(--color-background-default);
 469     background-image: url("../images/edit-find.svg");
 470     background-position: left;
 471     background-repeat: no-repeat;
 472     background-size: 1.5em;
 473     border: 1px solid var(--color-border-default);
 474     border-radius: 3px;
 475     min-width: 160px;
 476     padding: 2px 12px 2px 25px;
 477 }
 478
 479 #torrentsFilterRegexBox {
 480     display: none;
 481 }
 482
 483 #torrentsFilterRegexBox + label {
 484     background-image: url("../images/regex.svg");
 485     background-position: center;
 486     background-repeat: no-repeat;
 487     background-size: 1.5em;
 488     border: 1px solid var(--color-border-default);
 489     border-radius: 4px;
 490     cursor: pointer;
 491     display: inline-block;
 492     height: 26px;
 493     margin-bottom: -9px;
 494     width: 26px;
 495 }
 496
 497 #torrentsFilterRegexBox:checked + label {
 498     background-color: var(--color-background-default);
 499     background-image: url("../images/regex.svg");
 500     background-position: center;
 501     background-repeat: no-repeat;
 502     background-size: 1.5em;
 503     border: 1px solid var(--color-accent-blue);
 504     border-radius: 4px;
 505     display: inline-block;
 506     height: 26px;
 507     margin-bottom: -9px;
 508     width: 26px;
 509 }
 510
 511 #torrentsFilterSelect {
 512     padding: 2px 4px;
 513 }
 514
 515 #torrentFilesFilterToolbar {
 516     float: right;
 517     margin-right: 5px;
 518 }
 519
 520 #torrentFilesFilterInput {
 521     background-image: url("../images/edit-find.svg");
 522     background-position: left;
 523     background-repeat: no-repeat;
 524     background-size: 1.5em;
 525     margin-top: -1px;
 526     padding-bottom: 1px;
 527     padding-left: 2em;
 528     padding-top: 1px;
 529     width: 190px;
 530 }
 531
 532 /* Tri-state checkbox */
 533
 534 label.tristate {
 535     background: url("../images/3-state-checkbox.gif") 0 0 no-repeat;
 536     display: block;
 537     float: left;
 538     height: 13px;
 539     margin: 0.15em 8px 5px 0px;
 540     overflow: hidden;
 541     text-indent: -999em;
 542     width: 13px;
 543 }
 544
 545 label.checked {
 546     background-position: 0 -13px;
 547 }
 548
 549 label.partial {
 550     background-position: 0 -26px;
 551 }
 552
 553 fieldset.settings {
 554     border: 1px solid var(--color-border-default);
 555     padding: 4px 4px 6px 6px;
 556 }
 557
 558 fieldset.settings legend {
 559     font-weight: bold;
 560     margin-left: 8px;
 561     padding: 4px;
 562 }
 563
 564 fieldset.settings label {
 565     padding: 2px;
 566 }
 567
 568 fieldset.settings + div.formRow {
 569     margin-top: 10px;
 570 }
 571
 572 div.formRow {
 573     clear: left;
 574     display: block;
 575 }
 576
 577 .filterTitle {
 578     cursor: pointer;
 579     display: flex;
 580     font-weight: bold;
 581     gap: 4px;
 582     overflow: hidden;
 583     padding: 4px 0 4px 6px;
 584     text-overflow: ellipsis;
 585     text-transform: uppercase;
 586     user-select: none;
 587     white-space: nowrap;
 588 }
 589
 590 .filterTitle img {
 591     height: 16px;
 592     padding: 2px;
 593     width: 16px;
 594 }
 595
 596 .collapsedCategory > ul {
 597     display: none;
 598 }
 599
 600 .collapsedCategory .categoryToggle,
 601 .filterTitle img.rotate {
 602     transform: rotate(-90deg);
 603 }
 604
 605 ul.filterList {
 606     margin: 0;
 607     padding-left: 0;
 608 }
 609
 610 ul.filterList span.link:hover :is(img, button),
 611 ul.filterList .selectedFilter > .link :is(img, button) {
 612     filter: var(--color-icon-hover);
 613 }
 614
 615 ul.filterList span.link {
 616     align-items: center;
 617     cursor: pointer;
 618     display: flex;
 619     gap: 5px;
 620     overflow: hidden;
 621     padding: 4px 6px;
 622     white-space: nowrap;
 623 }
 624
 625 ul.filterList span.link:hover {
 626     background-color: var(--color-background-hover);
 627     color: var(--color-text-white);
 628 }
 629
 630 span.link :last-child {
 631     min-width: 0;
 632     overflow: hidden;
 633     text-overflow: ellipsis;
 634     white-space: nowrap;
 635 }
 636
 637 span.link :is(img, button) {
 638     flex-shrink: 0;
 639 }
 640
 641 .selectedFilter > span.link {
 642     background-color: var(--color-background-blue);
 643     color: var(--color-text-white);
 644 }
 645
 646 .subcategories,
 647 .subcategories ul {
 648     margin: 0;
 649     padding: 0;
 650 }
 651
 652 .subcategories .categoryToggle {
 653     display: inline-block;
 654     visibility: hidden;
 655 }
 656
 657 .categoryToggle {
 658     background: url("../images/go-down.svg") center center / 10px no-repeat
 659         transparent;
 660     border: none;
 661     display: none;
 662     height: 16px;
 663     margin-right: -2px;
 664     padding: 2px;
 665     transition: transform 0.3s;
 666     width: 16px;
 667 }
 668
 669 td.generalLabel {
 670     text-align: right;
 671     vertical-align: top;
 672     white-space: nowrap;
 673     width: 1px;
 674 }
 675
 676 #tristate_cb {
 677     margin-bottom: 0;
 678     margin-top: 0;
 679 }
 680
 681 .filesTableCollapseIcon {
 682     cursor: pointer;
 683     height: 15px;
 684     margin-bottom: -3px;
 685     padding-right: 5px;
 686     width: 15px;
 687 }
 688
 689 .filesTableCollapseIcon.rotate {
 690     margin-bottom: -1px;
 691     transform: rotate(270deg);
 692 }
 693
 694 .unselectable {
 695     -webkit-touch-callout: none;
 696     user-select: none;
 697 }
 698
 699 #propGeneral {
 700     padding: 2px;
 701 }
 702
 703 .piecesbarWrapper {
 704     position: relative;
 705     width: 100%;
 706 }
 707
 708 .piecesbarCanvas {
 709     height: 100%;
 710     image-rendering: pixelated;
 711     inset: 0;
 712     position: absolute;
 713     width: 100%;
 714 }
 715
 716 #watched_folders_tab {
 717     border-collapse: collapse;
 718 }
 719
 720 #watched_folders_tab td,
 721 #watched_folders_tab th {
 722     border: 1px solid black;
 723     padding: 2px 4px;
 724 }
 725
 726 .select-watched-folder-editable {
 727     border: 1px solid var(--color-border-default);
 728     height: 22px;
 729     position: relative;
 730     width: 160px;
 731 }
 732
 733 .select-watched-folder-editable select {
 734     border: none;
 735     bottom: 0px;
 736     left: 0px;
 737     padding: 0;
 738     position: absolute;
 739     top: 0px;
 740     width: 158px;
 741 }
 742
 743 .select-watched-folder-editable input {
 744     border: none;
 745     left: 0px;
 746     padding: 0;
 747     position: absolute;
 748     top: 0px;
 749     width: 140px;
 750 }
 751
 752 .select-watched-folder-editable select:focus,
 753 .select-editable input:focus {
 754     outline: none;
 755 }
 756
 757 /*
 758  * Workaround to prevent the transfer list from
 759  * disappearing when zooming in the browser.
 760  */
 761 #filtersColumn_handle {
 762     margin-left: -1px;
 763 }
 764
 765 .combo_priority {
 766     font-size: 1em;
 767     padding: 2px 6px;
 768 }
 769
 770 td.statusBarSeparator {
 771     background-image: url("../images/toolbox-divider.gif");
 772     background-position: center 1px;
 773     background-repeat: no-repeat;
 774     background-size: 2px 18px;
 775     width: 24px;
 776 }
 777
 778 /* Statistics window */
 779 #statisticsContent {
 780     & table {
 781         background-color: var(--color-background-default);
 782         border-radius: 6px;
 783         margin-bottom: 6px;
 784         padding: 6px 10px;
 785
 786         & .statisticsValue {
 787             text-align: right;
 788         }
 789     }
 790
 791     & h3 {
 792         color: var(--color-text-default);
 793         margin-bottom: 1px;
 794         padding: 2px;
 795     }
 796 }
 797
 798 /* Search tab */
 799
 800 #SearchPanel,
 801 #SearchPanel_wrapper,
 802 #SearchPanel_pad {
 803     height: inherit;
 804 }
 805
 806 #searchResults {
 807     height: 100%;
 808     padding: 0 20px;
 809 }
 810
 811 #searchResultsTableContainer {
 812     height: calc(100% - 177px);
 813     overflow: auto;
 814 }
 815
 816 #searchResultsTableDiv {
 817     height: calc(100% - 26px) !important;
 818 }
 819
 820 #searchResults .dynamicTable {
 821     width: 100%;
 822 }
 823
 824 #searchResults .numSearchResults {
 825     font-style: italic;
 826 }
 827
 828 .red {
 829     color: var(--color-text-red);
 830 }
 831
 832 .green {
 833     color: var(--color-text-green);
 834 }
 835
 836 .searchPluginsTableRow {
 837     cursor: pointer;
 838 }
 839
 840 #torrentFilesTableDiv .dynamicTable tr.nonAlt:hover {
 841     background-color: var(--color-background-hover);
 842     color: var(--color-text-white);
 843 }
 844
 845 /* Modals */
 846 .modalDialog .mochaContent.pad {
 847     display: flex !important; /* override for default mocha inline style */
 848     flex-direction: column;
 849     height: 100%;
 850 }
 851
 852 .modalDialog .mochaContent.pad > :last-child {
 853     align-self: flex-end;
 854 }
 855
 856 .modalDialog .mochaContent.pad > :first-child {
 857     margin: auto 0;
 858 }
 859
 860 #rememberBtn {
 861     background: url("../images/object-locked.svg") center center / 24px
 862         no-repeat var(--color-background-popup);
 863     height: 38px;
 864     padding: 4px 6px;
 865     width: 38px;
 866 }
 867
 868 #rememberBtn.disabled {
 869     filter: grayscale(100%);
 870 }
 871
 872 #deleteFromDiskCB {
 873     margin: 0 2px 0 0;
 874     vertical-align: -1px;
 875 }
 876
 877 .dialogMessage {
 878     overflow-wrap: anywhere;
 879 }
 880
 881 .genericConfirmGrid,
 882 .confirmDeletionGrid {
 883     align-items: center;
 884     display: grid;
 885     gap: 3px 4px;
 886     grid-template-columns: max-content 1fr;
 887     margin-bottom: 10px;
 888 }
 889
 890 .confirmGridItem,
 891 .deletionGridItem {
 892     padding: 3px;
 893 }
 894
 895 .deletionGridItem:first-child {
 896     justify-self: center;
 897 }
 898
 899 .confirmWarning,
 900 .confirmDialogWarning {
 901     background: url("../images/dialog-warning.svg") center center no-repeat;
 902     height: 38px;
 903     width: 38px;
 904 }
 905
 906 .confirmWarning {
 907     background-image: url("../images/help-about.svg");
 908 }