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 }
 229
 230 .contextMenu li a {
 231     align-items: center;
 232     color: var(--color-text-default);
 233     display: flex;
 234     font-family: Tahoma, Arial, sans-serif;
 235     font-size: 12px;
 236     gap: 7px;
 237     padding: 5px 20px 5px 5px;
 238     text-decoration: none;
 239     white-space: nowrap;
 240 }
 241
 242 .contextMenu li a:hover {
 243     background-color: var(--color-background-hover);
 244     color: var(--color-text-white);
 245 }
 246
 247 .contextMenu li a:hover img:not(.highlightedCategoryIcon) {
 248     filter: var(--color-icon-hover);
 249 }
 250
 251 .contextMenu li a.disabled {
 252     font-style: italic;
 253 }
 254
 255 .contextMenu li a.disabled:hover {
 256     color: var(--color-text-disabled);
 257 }
 258
 259 .contextMenu li ul {
 260     background: var(--color-background-default);
 261     border: 1px solid var(--color-border-default);
 262     left: -999em;
 263     list-style-type: none;
 264     margin: -29px 0 0 100%;
 265     padding: 0;
 266     position: absolute;
 267     width: 164px;
 268     z-index: 8000;
 269 }
 270
 271 .contextMenu li ul li a {
 272     position: relative;
 273 }
 274
 275 .contextMenu li a.arrow-right,
 276 .contextMenu li a:hover.arrow-right {
 277     background-image: url("../images/arrow-right.gif");
 278     background-position: right center;
 279     background-repeat: no-repeat;
 280 }
 281
 282 .contextMenu li:hover ul,
 283 .contextMenu li.ieHover ul,
 284 .contextMenu li li.ieHover ul,
 285 .contextMenu li li li.ieHover ul,
 286 .contextMenu li li:hover ul,
 287 .contextMenu li li li:hover ul {
 288     /* lists nested under hovered list items */
 289     left: auto;
 290 }
 291
 292 .contextMenu li img {
 293     height: 16px;
 294     width: 16px;
 295 }
 296
 297 .contextMenu li input[type="checkbox"] {
 298     position: relative;
 299     top: 3px;
 300 }
 301
 302 #contextCategoryList img {
 303     border: 1px solid transparent;
 304     padding: 1px;
 305 }
 306
 307 #contextCategoryList img.highlightedCategoryIcon {
 308     background-color: hsl(213deg 94% 86%);
 309 }
 310
 311 /* Sliders */
 312
 313 .slider {
 314     clear: both;
 315     font-size: 12px;
 316     font-weight: bold;
 317     margin-bottom: 15px;
 318     position: relative;
 319     width: 400px;
 320 }
 321
 322 .sliderWrapper {
 323     font-size: 1px;
 324     height: 9px;
 325     line-height: 1px;
 326     position: relative;
 327     width: 422px;
 328 }
 329
 330 .sliderarea {
 331     background: #f2f2f2 url("../images/slider-area.gif") repeat-x;
 332     border: 1px solid #a3a3a3;
 333     border-bottom: 1px solid #ccc;
 334     border-left: 1px solid #ccc;
 335     font-size: 1px;
 336     height: 7px;
 337     left: 0;
 338     line-height: 1px;
 339     margin: 0;
 340     overflow: hidden;
 341     padding: 0;
 342     position: absolute;
 343     top: 0;
 344     width: 420px;
 345 }
 346
 347 .sliderknob {
 348     background: url("../images/knob.gif") no-repeat;
 349     cursor: pointer;
 350     font-size: 1px;
 351     height: 9px;
 352     left: 0;
 353     line-height: 1px;
 354     overflow: hidden;
 355     position: absolute;
 356     top: 0;
 357     width: 19px;
 358     z-index: 2;
 359 }
 360
 361 .update {
 362     padding-bottom: 5px;
 363 }
 364
 365 .mochaToolButton {
 366     margin-right: 10px;
 367 }
 368
 369 /* Mocha Customization */
 370
 371 #mochaToolbar {
 372     height: auto !important;
 373     margin-top: 5px;
 374     overflow-y: hidden;
 375     position: relative;
 376 }
 377
 378 #mochaToolbar .divider {
 379     background-image: url("../images/toolbox-divider.gif");
 380     background-position: left center;
 381     background-repeat: no-repeat;
 382     padding-left: 14px;
 383     padding-top: 15px;
 384 }
 385
 386 .MyMenuIcon {
 387     margin-bottom: -3px;
 388     margin-left: -18px;
 389     padding-right: 5px;
 390 }
 391
 392 #mainWindowTabs {
 393     float: right;
 394     margin: 4px 5px 0 0;
 395 }
 396
 397 #torrentsFilterToolbar {
 398     display: inline-block;
 399     vertical-align: top;
 400 }
 401
 402 #torrentsFilterInput {
 403     background-color: var(--color-background-default);
 404     background-image: url("../images/edit-find.svg");
 405     background-position: left;
 406     background-repeat: no-repeat;
 407     background-size: 1.5em;
 408     border: 1px solid var(--color-border-default);
 409     border-radius: 3px;
 410     min-width: 160px;
 411     padding: 4px 4px 4px 25px;
 412 }
 413
 414 #torrentsFilterRegexBox {
 415     display: none;
 416 }
 417
 418 #torrentsFilterRegexBox + label {
 419     background-image: url("../images/regex.svg");
 420     background-position: center;
 421     background-repeat: no-repeat;
 422     background-size: 1.5em;
 423     border: 1px solid var(--color-border-default);
 424     border-radius: 4px;
 425     display: inline-block;
 426     height: 26px;
 427     margin-bottom: -9px;
 428     width: 26px;
 429 }
 430
 431 #torrentsFilterRegexBox:checked + label {
 432     background-color: var(--color-background-default);
 433     background-image: url("../images/regex.svg");
 434     background-position: center;
 435     background-repeat: no-repeat;
 436     background-size: 1.5em;
 437     border: 1px solid var(--color-accent-blue);
 438     border-radius: 4px;
 439     display: inline-block;
 440     height: 26px;
 441     margin-bottom: -9px;
 442     width: 26px;
 443 }
 444
 445 #torrentsFilterSelect {
 446     padding: 2px 4px;
 447 }
 448
 449 #torrentFilesFilterToolbar {
 450     float: right;
 451     margin-right: 5px;
 452 }
 453
 454 #torrentFilesFilterInput {
 455     background-image: url("../images/edit-find.svg");
 456     background-position: left;
 457     background-repeat: no-repeat;
 458     background-size: 1.5em;
 459     padding-left: 2em;
 460     width: 250px;
 461 }
 462
 463 /* Tri-state checkbox */
 464
 465 label.tristate {
 466     background: url("../images/3-state-checkbox.gif") 0 0 no-repeat;
 467     display: block;
 468     float: left;
 469     height: 13px;
 470     margin: 0.15em 8px 5px 0px;
 471     overflow: hidden;
 472     text-indent: -999em;
 473     width: 13px;
 474 }
 475
 476 label.checked {
 477     background-position: 0 -13px;
 478 }
 479
 480 label.partial {
 481     background-position: 0 -26px;
 482 }
 483
 484 fieldset.settings {
 485     border: 1px solid var(--color-border-default);
 486     border-radius: 8px;
 487     padding: 4px 4px 4px 10px;
 488 }
 489
 490 fieldset.settings legend {
 491     font-weight: bold;
 492     margin-left: 8px;
 493     padding: 4px;
 494 }
 495
 496 fieldset.settings label {
 497     padding: 2px;
 498 }
 499
 500 fieldset.settings + div.formRow {
 501     margin-top: 10px;
 502 }
 503
 504 div.formRow {
 505     clear: left;
 506     display: block;
 507 }
 508
 509 .filterTitle {
 510     box-sizing: border-box;
 511     cursor: pointer;
 512     display: flex;
 513     font-weight: bold;
 514     gap: 4px;
 515     overflow: hidden;
 516     padding: 4px 0 4px 6px;
 517     text-overflow: ellipsis;
 518     text-transform: uppercase;
 519     white-space: nowrap;
 520 }
 521
 522 .filterTitle img {
 523     box-sizing: border-box;
 524     height: 16px;
 525     padding: 2px;
 526     width: 16px;
 527 }
 528
 529 .collapsedCategory > ul {
 530     display: none;
 531 }
 532
 533 .collapsedCategory .categoryToggle,
 534 .filterTitle img.rotate {
 535     transform: rotate(-90deg);
 536 }
 537
 538 ul.filterList * {
 539     box-sizing: border-box;
 540 }
 541
 542 ul.filterList {
 543     margin: 0;
 544     padding-left: 0;
 545 }
 546
 547 ul.filterList span.link:hover :is(img, button),
 548 ul.filterList .selectedFilter > .link :is(img, button) {
 549     filter: var(--color-icon-hover);
 550 }
 551
 552 ul.filterList span.link {
 553     cursor: pointer;
 554     display: flex;
 555     gap: 5px;
 556     overflow: hidden;
 557     padding: 4px 6px;
 558     white-space: nowrap;
 559 }
 560
 561 ul.filterList span.link:hover {
 562     background-color: var(--color-background-hover);
 563     color: var(--color-text-white);
 564 }
 565
 566 span.link :last-child {
 567     min-width: 0;
 568     overflow: hidden;
 569     text-overflow: ellipsis;
 570     white-space: nowrap;
 571 }
 572
 573 span.link :is(img, button) {
 574     flex-shrink: 0;
 575 }
 576
 577 .selectedFilter > span.link {
 578     background-color: var(--color-background-blue);
 579     color: var(--color-text-white);
 580 }
 581
 582 .subcategories,
 583 .subcategories ul {
 584     margin: 0;
 585     padding: 0;
 586 }
 587
 588 .subcategories .categoryToggle {
 589     display: inline-block;
 590     visibility: hidden;
 591 }
 592
 593 .categoryToggle {
 594     background: url("../images/go-down.svg") center center / 10px no-repeat
 595         transparent;
 596     border: none;
 597     display: none;
 598     height: 16px;
 599     margin-right: -2px;
 600     padding: 2px;
 601     transition: transform 0.3s;
 602     width: 16px;
 603 }
 604
 605 td.generalLabel {
 606     text-align: right;
 607     vertical-align: top;
 608     white-space: nowrap;
 609     width: 1px;
 610 }
 611
 612 .filesTableCollapseIcon {
 613     cursor: pointer;
 614     height: 15px;
 615     margin-bottom: -3px;
 616     padding-right: 5px;
 617     width: 15px;
 618 }
 619
 620 .filesTableCollapseIcon.rotate {
 621     margin-bottom: -1px;
 622     transform: rotate(270deg);
 623 }
 624
 625 .unselectable {
 626     -webkit-touch-callout: none;
 627     user-select: none;
 628 }
 629
 630 #propGeneral {
 631     padding: 2px;
 632 }
 633
 634 .piecesbarWrapper {
 635     position: relative;
 636     width: 100%;
 637 }
 638
 639 .piecesbarCanvas {
 640     height: 100%;
 641     image-rendering: pixelated;
 642     inset: 0;
 643     position: absolute;
 644     width: 100%;
 645 }
 646
 647 #watched_folders_tab {
 648     border-collapse: collapse;
 649 }
 650
 651 #watched_folders_tab td,
 652 #watched_folders_tab th {
 653     border: 1px solid black;
 654     padding: 2px 4px;
 655 }
 656
 657 .select-watched-folder-editable {
 658     border: solid grey 1px;
 659     height: 20px;
 660     position: relative;
 661     width: 160px;
 662 }
 663
 664 .select-watched-folder-editable select {
 665     border: none;
 666     bottom: 0px;
 667     left: 0px;
 668     margin: 0;
 669     position: absolute;
 670     top: 0px;
 671     width: 160px;
 672 }
 673
 674 .select-watched-folder-editable input {
 675     border: none;
 676     left: 0px;
 677     padding: 1px;
 678     position: absolute;
 679     top: 0px;
 680     width: 140px;
 681 }
 682
 683 .select-watched-folder-editable select:focus,
 684 .select-editable input:focus {
 685     outline: none;
 686 }
 687
 688 /*
 689  * Workaround to prevent the transfer list from
 690  * disappearing when zooming in the browser.
 691  */
 692 #filtersColumn_handle {
 693     margin-left: -1px;
 694 }
 695
 696 .combo_priority {
 697     font-size: 1em;
 698 }
 699
 700 td.statusBarSeparator {
 701     background-image: url("../images/toolbox-divider.gif");
 702     background-position: center 1px;
 703     background-repeat: no-repeat;
 704     background-size: 2px 18px;
 705     width: 22px;
 706 }
 707
 708 /* Statistics window */
 709 .statisticsValue {
 710     text-align: right;
 711 }
 712
 713 /* Search tab */
 714
 715 #SearchPanel,
 716 #SearchPanel_wrapper,
 717 #SearchPanel_pad {
 718     height: inherit;
 719 }
 720
 721 #searchResults {
 722     height: 100%;
 723     padding: 0 20px;
 724 }
 725
 726 #searchResultsTableContainer {
 727     height: calc(100% - 177px);
 728     overflow: auto;
 729 }
 730
 731 #searchResultsTableDiv {
 732     height: calc(100% - 26px) !important;
 733 }
 734
 735 #searchResults .dynamicTable {
 736     width: 100%;
 737 }
 738
 739 #searchResults .numSearchResults {
 740     font-style: italic;
 741 }
 742
 743 .red {
 744     color: var(--color-text-red);
 745 }
 746
 747 .green {
 748     color: var(--color-text-green);
 749 }
 750
 751 .searchPluginsTableRow {
 752     cursor: pointer;
 753 }
 754
 755 #torrentFilesTableDiv .dynamicTable tr.nonAlt:hover {
 756     background-color: var(--color-background-hover);
 757     color: var(--color-text-white);
 758 }
 759
 760 /* Confirm deletion dialog */
 761
 762 #confirmDeletionPage * {
 763     box-sizing: border-box;
 764 }
 765
 766 #confirmDeletionPage_content {
 767     display: flex !important; /* override for default mocha inline style */
 768     flex-direction: column;
 769     height: 100%;
 770 }
 771
 772 #confirmDeletionPage_content > :last-child {
 773     align-self: flex-end;
 774 }
 775
 776 #confirmDeletionDialog {
 777     margin: auto 0;
 778 }
 779
 780 #rememberBtn {
 781     background: url("../images/object-locked.svg") center center / 24px
 782         no-repeat var(--color-background-popup);
 783     height: 38px;
 784     padding: 4px 6px;
 785     width: 38px;
 786 }
 787
 788 #rememberBtn.disabled {
 789     filter: grayscale(100%);
 790 }
 791
 792 #deleteFromDiskCB {
 793     margin: 0 2px 0 0;
 794     vertical-align: -1px;
 795 }
 796
 797 #deleteTorrentMessage {
 798     overflow-wrap: anywhere;
 799 }
 800
 801 .confirmDeletionGrid {
 802     align-items: center;
 803     display: grid;
 804     gap: 3px 4px;
 805     grid-template-columns: max-content 1fr;
 806     margin-bottom: 10px;
 807 }
 808
 809 .deletionGridItem {
 810     padding: 3px;
 811 }
 812
 813 .deletionGridItem:first-child {
 814     justify-self: center;
 815 }
 816
 817 .confirmDialogWarning {
 818     background: url("../images/dialog-warning.svg") center center no-repeat;
 819     height: 38px;
 820     width: 38px;
 821 }