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 #properties {
 199     background-color: var(--color-background-default);
 200 }
 201
 202 a.propButton {
 203     border: 1px solid rgb(85 81 91);
 204     margin-left: 3px;
 205     margin-right: 3px;
 206     /*border-radius: 3px;*/
 207     padding: 2px;
 208 }
 209
 210 a.propButton img {
 211     margin-bottom: -4px;
 212 }
 213
 214 .scrollableMenu {
 215     overflow: hidden auto;
 216 }
 217
 218 /* context menu specific */
 219
 220 .contextMenu {
 221     background-color: var(--color-background-default);
 222     border: 1px solid var(--color-border-default);
 223     display: none;
 224     list-style-type: none;
 225     padding: 0;
 226 }
 227
 228 .contextMenu .separator {
 229     border-top: 1px solid var(--color-border-default);
 230 }
 231
 232 .contextMenu li {
 233     margin: 0;
 234     padding: 0;
 235 }
 236
 237 .contextMenu li a {
 238     align-items: center;
 239     color: var(--color-text-default);
 240     display: flex;
 241     font-family: Tahoma, Arial, sans-serif;
 242     font-size: 12px;
 243     gap: 7px;
 244     padding: 5px 20px 5px 5px;
 245     text-decoration: none;
 246     white-space: nowrap;
 247 }
 248
 249 .contextMenu li a:hover {
 250     background-color: var(--color-background-hover);
 251     color: var(--color-text-white);
 252 }
 253
 254 .contextMenu li a:hover img {
 255     filter: var(--color-icon-hover);
 256 }
 257
 258 .contextMenu li a.disabled {
 259     font-style: italic;
 260 }
 261
 262 .contextMenu li a.disabled:hover {
 263     color: var(--color-text-disabled);
 264 }
 265
 266 .contextMenu li ul {
 267     background: var(--color-background-default);
 268     border: 1px solid var(--color-border-default);
 269     left: -999em;
 270     list-style-type: none;
 271     margin: -29px 0 0 100%;
 272     padding: 0;
 273     position: absolute;
 274     width: 164px;
 275     z-index: 8000;
 276 }
 277
 278 .contextMenu li ul li a {
 279     position: relative;
 280 }
 281
 282 .contextMenu li a.arrow-right,
 283 .contextMenu li a:hover.arrow-right {
 284     background-image: url("../images/arrow-right.gif");
 285     background-position: right center;
 286     background-repeat: no-repeat;
 287 }
 288
 289 .contextMenu li:hover ul,
 290 .contextMenu li.ieHover ul,
 291 .contextMenu li li.ieHover ul,
 292 .contextMenu li li li.ieHover ul,
 293 .contextMenu li li:hover ul,
 294 .contextMenu li li li:hover ul {
 295     /* lists nested under hovered list items */
 296     left: auto;
 297 }
 298
 299 .contextMenu li img {
 300     height: 16px;
 301     width: 16px;
 302 }
 303
 304 .contextMenu li input[type="checkbox"] {
 305     position: relative;
 306     top: 3px;
 307 }
 308
 309 #contextCategoryList img {
 310     border: 1px solid transparent;
 311     padding: 1px;
 312 }
 313
 314 #contextCategoryList img.highlightedCategoryIcon {
 315     background-color: hsl(213deg 94% 86%);
 316 }
 317
 318 /* Sliders */
 319
 320 .slider {
 321     clear: both;
 322     font-size: 12px;
 323     font-weight: bold;
 324     margin-bottom: 15px;
 325     position: relative;
 326     width: 400px;
 327 }
 328
 329 .sliderWrapper {
 330     font-size: 1px;
 331     height: 9px;
 332     line-height: 1px;
 333     position: relative;
 334     width: 422px;
 335 }
 336
 337 .sliderarea {
 338     background: #f2f2f2 url("../images/slider-area.gif") repeat-x;
 339     border: 1px solid #a3a3a3;
 340     border-bottom: 1px solid #ccc;
 341     border-left: 1px solid #ccc;
 342     font-size: 1px;
 343     height: 7px;
 344     left: 0;
 345     line-height: 1px;
 346     margin: 0;
 347     overflow: hidden;
 348     padding: 0;
 349     position: absolute;
 350     top: 0;
 351     width: 420px;
 352 }
 353
 354 .sliderknob {
 355     background: url("../images/knob.gif") no-repeat;
 356     cursor: pointer;
 357     font-size: 1px;
 358     height: 9px;
 359     left: 0;
 360     line-height: 1px;
 361     overflow: hidden;
 362     position: absolute;
 363     top: 0;
 364     width: 19px;
 365     z-index: 2;
 366 }
 367
 368 .update {
 369     padding-bottom: 5px;
 370 }
 371
 372 .mochaToolButton {
 373     margin-right: 10px;
 374 }
 375
 376 /* Mocha Customization */
 377
 378 #mochaToolbar {
 379     height: auto !important;
 380     margin-top: 5px;
 381     overflow-y: hidden;
 382     position: relative;
 383 }
 384
 385 #mochaToolbar .divider {
 386     background-image: url("../images/toolbox-divider.gif");
 387     background-position: left center;
 388     background-repeat: no-repeat;
 389     padding-left: 14px;
 390     padding-top: 15px;
 391 }
 392
 393 .MyMenuIcon {
 394     margin-bottom: -3px;
 395     margin-left: -18px;
 396     padding-right: 5px;
 397 }
 398
 399 #mainWindowTabs {
 400     float: right;
 401     margin: 4px 5px 0 0;
 402 }
 403
 404 #torrentsFilterToolbar {
 405     display: inline-block;
 406     vertical-align: top;
 407 }
 408
 409 #torrentsFilterInput {
 410     background-color: var(--color-background-default);
 411     background-image: url("../images/edit-find.svg");
 412     background-position: left;
 413     background-repeat: no-repeat;
 414     background-size: 1.5em;
 415     border: 1px solid var(--color-border-default);
 416     border-radius: 3px;
 417     min-width: 160px;
 418     padding: 4px 4px 4px 25px;
 419 }
 420
 421 #torrentsFilterRegexBox {
 422     display: none;
 423 }
 424
 425 #torrentsFilterRegexBox + label {
 426     background-image: url("../images/regex.svg");
 427     background-position: center;
 428     background-repeat: no-repeat;
 429     background-size: 1.5em;
 430     border: 1px solid var(--color-border-default);
 431     border-radius: 4px;
 432     display: inline-block;
 433     height: 26px;
 434     margin-bottom: -9px;
 435     width: 26px;
 436 }
 437
 438 #torrentsFilterRegexBox:checked + label {
 439     background-color: var(--color-background-default);
 440     background-image: url("../images/regex.svg");
 441     background-position: center;
 442     background-repeat: no-repeat;
 443     background-size: 1.5em;
 444     border: 1px solid var(--color-accent-blue);
 445     border-radius: 4px;
 446     display: inline-block;
 447     height: 26px;
 448     margin-bottom: -9px;
 449     width: 26px;
 450 }
 451
 452 #torrentsFilterSelect {
 453     padding: 2px 4px;
 454 }
 455
 456 #torrentFilesFilterToolbar {
 457     float: right;
 458     margin-right: 30px;
 459 }
 460
 461 #torrentFilesFilterInput {
 462     background-image: url("../images/edit-find.svg");
 463     background-position: left;
 464     background-repeat: no-repeat;
 465     background-size: 1.5em;
 466     padding-left: 2em;
 467     width: 160px;
 468 }
 469
 470 /* Tri-state checkbox */
 471
 472 label.tristate {
 473     background: url("../images/3-state-checkbox.gif") 0 0 no-repeat;
 474     display: block;
 475     float: left;
 476     height: 13px;
 477     margin: 0.15em 8px 5px 0px;
 478     overflow: hidden;
 479     text-indent: -999em;
 480     width: 13px;
 481 }
 482
 483 label.checked {
 484     background-position: 0 -13px;
 485 }
 486
 487 label.partial {
 488     background-position: 0 -26px;
 489 }
 490
 491 fieldset.settings {
 492     border: 1px solid var(--color-border-default);
 493     border-radius: 8px;
 494     padding: 4px 4px 4px 10px;
 495 }
 496
 497 fieldset.settings legend {
 498     font-weight: bold;
 499     margin-left: 8px;
 500     padding: 4px;
 501 }
 502
 503 fieldset.settings label {
 504     padding: 2px;
 505 }
 506
 507 fieldset.settings + div.formRow {
 508     margin-top: 10px;
 509 }
 510
 511 div.formRow {
 512     clear: left;
 513     display: block;
 514 }
 515
 516 .filterTitle {
 517     display: block;
 518     font-weight: bold;
 519     overflow: hidden;
 520     padding-left: 5px;
 521     padding-top: 5px;
 522     text-overflow: ellipsis;
 523     text-transform: uppercase;
 524     white-space: nowrap;
 525 }
 526
 527 .filterTitle img {
 528     height: 16px;
 529     margin-bottom: -3px;
 530     padding: 0 5px;
 531     width: 16px;
 532 }
 533
 534 .filterTitle img.rotate {
 535     transform: rotate(270deg);
 536 }
 537
 538 ul.filterList {
 539     margin: 0 0 0 16px;
 540     padding-left: 0;
 541 }
 542
 543 ul.filterList li:hover img,
 544 ul.filterList .selectedFilter img {
 545     filter: var(--color-icon-hover);
 546 }
 547
 548 ul.filterList a,
 549 ul.filterList span.link {
 550     align-items: center;
 551     color: inherit;
 552     cursor: pointer;
 553     display: flex;
 554     overflow: hidden;
 555     padding: 4px 6px;
 556     text-overflow: ellipsis;
 557     white-space: nowrap;
 558 }
 559
 560 ul.filterList li {
 561     color: var(--color-text-default);
 562 }
 563
 564 ul.filterList li:hover {
 565     background-color: var(--color-background-hover);
 566     color: var(--color-text-white);
 567 }
 568
 569 td.generalLabel {
 570     text-align: right;
 571     vertical-align: top;
 572     white-space: nowrap;
 573     width: 1px;
 574 }
 575
 576 .filesTableCollapseIcon {
 577     cursor: pointer;
 578     height: 15px;
 579     margin-bottom: -3px;
 580     padding-right: 5px;
 581     width: 15px;
 582 }
 583
 584 .filesTableCollapseIcon.rotate {
 585     margin-bottom: -1px;
 586     transform: rotate(270deg);
 587 }
 588
 589 .unselectable {
 590     -webkit-touch-callout: none;
 591     user-select: none;
 592 }
 593
 594 #prop_general {
 595     padding: 2px;
 596 }
 597
 598 .piecesbarWrapper {
 599     position: relative;
 600     width: 100%;
 601 }
 602
 603 .piecesbarCanvas {
 604     height: 100%;
 605     image-rendering: pixelated;
 606     inset: 0;
 607     position: absolute;
 608     width: 100%;
 609 }
 610
 611 #watched_folders_tab {
 612     border-collapse: collapse;
 613 }
 614
 615 #watched_folders_tab td,
 616 #watched_folders_tab th {
 617     border: 1px solid black;
 618     padding: 2px 4px;
 619 }
 620
 621 .select-watched-folder-editable {
 622     border: solid grey 1px;
 623     height: 20px;
 624     position: relative;
 625     width: 160px;
 626 }
 627
 628 .select-watched-folder-editable select {
 629     border: none;
 630     bottom: 0px;
 631     left: 0px;
 632     margin: 0;
 633     position: absolute;
 634     top: 0px;
 635     width: 160px;
 636 }
 637
 638 .select-watched-folder-editable input {
 639     border: none;
 640     left: 0px;
 641     padding: 1px;
 642     position: absolute;
 643     top: 0px;
 644     width: 140px;
 645 }
 646
 647 .select-watched-folder-editable select:focus,
 648 .select-editable input:focus {
 649     outline: none;
 650 }
 651
 652 /*
 653  * Workaround to prevent the transfer list from
 654  * disappearing when zooming in the browser.
 655  */
 656 #filtersColumn_handle {
 657     margin-left: -1px;
 658 }
 659
 660 .combo_priority {
 661     font-size: 1em;
 662 }
 663
 664 td.statusBarSeparator {
 665     background-image: url("../images/toolbox-divider.gif");
 666     background-position: center 1px;
 667     background-repeat: no-repeat;
 668     background-size: 2px 18px;
 669     width: 22px;
 670 }
 671
 672 /* Statistics window */
 673 .statisticsValue {
 674     text-align: right;
 675 }
 676
 677 /* Search tab */
 678
 679 #SearchPanel,
 680 #SearchPanel_wrapper,
 681 #SearchPanel_pad {
 682     height: inherit;
 683 }
 684
 685 #searchResults {
 686     height: 100%;
 687     padding: 0 20px;
 688 }
 689
 690 #searchResultsTableContainer {
 691     height: calc(100% - 177px);
 692     overflow: auto;
 693 }
 694
 695 #searchResultsTableDiv {
 696     height: calc(100% - 26px) !important;
 697 }
 698
 699 #searchResults .dynamicTable {
 700     width: 100%;
 701 }
 702
 703 #searchResults .numSearchResults {
 704     font-style: italic;
 705 }
 706
 707 .red {
 708     color: var(--color-text-red);
 709 }
 710
 711 .green {
 712     color: var(--color-text-green);
 713 }
 714
 715 .searchPluginsTableRow {
 716     cursor: pointer;
 717 }
 718
 719 #torrentFilesTableDiv .dynamicTable tr.nonAlt:hover {
 720     background-color: var(--color-background-hover);
 721     color: var(--color-text-white);
 722 }