release/src/router/transmission/web/style/transmission/mobile.scss

   1 @mixin verticalGradient($topColor, $bottomColor) {
   2         background-color: mix($topColor, $bottomColor);
   3         background-image: -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor));
   4         background-image: -webkit-linear-gradient(top, $topColor, $bottomColor);
   5         background-image:    -moz-linear-gradient(top, $topColor, $bottomColor);
   6         background-image:     -ms-linear-gradient(top, $topColor, $bottomColor);
   7         background-image:      -o-linear-gradient(top, $topColor, $bottomColor);
   8         background-image:         linear-gradient(top, $topColor, $bottomColor);
   9 }
  10
  11 @mixin imageOnVerticalGradient($src, $topColor, $bottomColor) {
  12         background-color: mix($topColor, $bottomColor);
  13         background-image: url($src); /* fallback */
  14         background-image: url($src), -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor)); /* Saf4+, Chrome */
  15         background-image: url($src), -webkit-linear-gradient(top, $topColor, $bottomColor); /* Chrome 10+, Saf5.1+ */
  16         background-image: url($src), -moz-linear-gradient(top, $topColor, $bottomColor); /* FF3.6+ */
  17         background-image: url($src), -ms-linear-gradient(top, $topColor, $bottomColor); /* IE10 */
  18         background-image: url($src), -o-linear-gradient(top, $topColor, $bottomColor); /* Opera 11.10+ */
  19         background-position: center;
  20         background-repeat: no-repeat;
  21 }
  22
  23 @mixin buttonImage($image-url, $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom) {
  24         @include imageOnVerticalGradient($image-url, $idle-color-top, $idle-color-bottom);
  25         &:active, &.selected {
  26                 @include imageOnVerticalGradient($image-url, $active-color-top, $active-color-bottom);
  27         }
  28 }
  29
  30 $nonselected-gradient-top: white;
  31 $nonselected-gradient-bottom: #BBB;
  32 $selection-color: #cdcdff;
  33 $selected-gradient-top: $selection-color;
  34 $selected-gradient-bottom: white;
  35
  36 @mixin button {
  37         cursor: pointer;
  38         -moz-user-select: none;
  39         -webkit-user-select: none;
  40         display: inline-block;
  41         border-style: solid;
  42         border-color: #aaa;
  43         border-width: 1px;
  44         padding: 3px;
  45 }
  46
  47 @mixin roundedBox($radius) {
  48         -moz-border-radius: $radius;
  49         border-radius: $radius;
  50 }
  51
  52 @mixin leftRoundedBox($radius) {
  53         -moz-border-radius-topleft: $radius;
  54         -moz-border-radius-bottomleft: $radius;
  55         border-top-left-radius: $radius;
  56         border-bottom-left-radius: $radius;
  57 }
  58 @mixin rightRoundedBox($radius) {
  59         -moz-border-radius-topright: $radius;
  60         -moz-border-radius-bottomright: $radius;
  61         border-top-right-radius: $radius;
  62         border-bottom-right-radius: $radius;
  63 }
  64
  65 @mixin roundedButton($radius) {
  66         @include button;
  67         @include roundedBox($radius);
  68 }
  69
  70 /*--------------------------------------
  71  *
  72  * G L O B A L
  73  *
  74  *--------------------------------------*/
  75
  76 html {
  77         margin: 0;
  78         padding: 0;
  79 }
  80
  81 body {
  82         font: 11px Helvetica, Arial, sans-serif;
  83         background: #FFF;
  84         text-align: center;
  85         margin: 0;
  86         padding: 0;
  87         width: 100%;
  88         overflow-x: hidden;
  89         img { border: none; }
  90         a { outline: 0; }
  91         -webkit-text-size-adjust: none;
  92
  93         div#torrent_container { min-height: 328px; }
  94         div.dialog_container { min-height: 326px; }
  95         div#torrent_inspector { min-height: 329px; }
  96         &.landscape div#torrent_container {     min-height: 147px; }
  97         &.landscape div#dialog_container,
  98         &.landscape div#torrent_inspector {     min-height: 143px; }
  99 }
 100
 101 body.inspector_showing #torrent_filter_bar, body.inspector_showing #torrent_container,
 102 body.dialog_showing #torrent_filter_bar, body.dialog_showing #torrent_container, body.dialog_showing #torrent_inspector,
 103 body.prefs_showing #torrent_inspector, body.prefs_showing #torrent_filter_bar, body.prefs_showing #torrent_container,
 104 body.open_showing #torrent_filter_bar, body.open_showing #torrent_container {
 105         display: none !important;
 106 }
 107
 108 /***
 109 ****
 110 ****  TOOLBAR
 111 ****
 112 ***/
 113
 114 $toolbar-gradient-top: #ddd;
 115 $toolbar-gradient-bottom: #bbb;
 116 $toolbar-height: 39px;
 117
 118 div#toolbar
 119 {
 120         width: 100%;
 121         height: $toolbar-height;
 122         margin: 0px;
 123         padding: 2px;
 124         border-bottom: 1px solid #AAA;
 125         @include verticalGradient($toolbar-gradient-top, $toolbar-gradient-bottom);
 126
 127         $idle-color-top: $nonselected-gradient-top;
 128         $idle-color-bottom: $nonselected-gradient-bottom;
 129         $active-color-top: $selected-gradient-top;
 130         $active-color-bottom: $selected-gradient-bottom;
 131
 132         > * {
 133                 @include button;
 134                 margin-top: 5px;
 135                 width: 34px;
 136                 height: 34px;
 137                 float: left;
 138                 border: none;
 139                 padding: 0px 3px;
 140                 background-position: center center;
 141                 background-repeat: no-repeat;
 142         }
 143
 144         >div#toolbar-separator {
 145                 height: 25px;
 146                 margin-top: 8px;
 147                 margin-bottom: 8px;
 148                 border-left: 1px solid #aaa;
 149                 width: 3px;
 150         }
 151
 152         > div#toolbar-open {
 153                 background-image: url('images/toolbar-folder.png');
 154         }
 155         > div#toolbar-remove {
 156                 background-image: url('images/toolbar-close.png');
 157         }
 158         > div#toolbar-start {
 159                 background-image: url('images/toolbar-start.png');
 160         }
 161         > div#toolbar-pause {
 162                 background-image: url('images/toolbar-pause.png');
 163         }
 164         > div#toolbar-start-all {
 165                 background-image: url('images/toolbar-start-all.png');
 166         }
 167         > div#toolbar-pause-all {
 168                 background-image: url('images/toolbar-pause-all.png');
 169         }
 170
 171         > div#toolbar-inspector {
 172                 background-image: url('images/toolbar-info.png');
 173                 float: right;
 174         }
 175
 176         > *.disabled {
 177                 opacity: 0.25;
 178         }
 179 }
 180
 181 /***
 182 ****
 183 ****  STATUSBAR
 184 ****
 185 ***/
 186
 187 $statusbar-gradient-top: #ddd;
 188 $statusbar-gradient-bottom: #bbb;
 189 $statusbar-height: 24px;
 190
 191 #statusbar
 192 {
 193         height: $statusbar-height;
 194         width: 100%;
 195         border-bottom: 1px solid #AAA;
 196         overflow: hidden;
 197         position: relative;
 198         @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
 199
 200         #filter
 201         {
 202                 float: left;
 203                 margin-left: 5px;
 204
 205                 input#torrent_search {
 206                         display: none;
 207                 }
 208
 209                 #filter-count { margin-left: 8px; }
 210         }
 211
 212         #speed-info
 213         {
 214                 float: right;
 215                 margin-top: 5px;
 216                 margin-right: 10px;
 217
 218                 * {
 219                         display: inline-block;
 220                 }
 221
 222                 #speed-up-icon {
 223                         margin-left: 8px;
 224                         width: 8px;
 225                         height: 8px;
 226                         background: url('images/arrow-up.png') bottom no-repeat;
 227                 }
 228
 229                 #speed-dn-icon {
 230                         width: 8px;
 231                         height: 8px;
 232                         background: url('images/arrow-down.png') bottom no-repeat;
 233                 }
 234
 235                 #speed-up-container, #speed-dn-container {
 236                         display: inline;
 237                 }
 238         }
 239 }
 240
 241 /***
 242 ****
 243 ****  TORRENT CONTAINER
 244 ****
 245 ***/
 246
 247 ul.torrent_list
 248 {
 249         width: 100%;
 250         margin: 0;
 251         padding: 0;
 252         text-align: left;
 253         cursor: pointer;
 254
 255         li.torrent
 256         {
 257                 border-bottom: 1px solid #ccc;
 258                 padding: 4px 30px 5px 14px;
 259                 color: #666;
 260                 background-color: white;
 261
 262                 &.compact { padding: 4px; }
 263                 &.even { background-color: #F7F7F7; }
 264                 &.selected { background-color: $selection-color; }
 265                 &.compact { div.torrent_name { color: black; } }
 266
 267                 // start-stop button
 268                 a {
 269                         display: none;
 270                 }
 271
 272                 div.torrent_name
 273                 {
 274                         font-size: 1.3em;
 275                         font-weight: bold;
 276                         overflow: hidden;
 277                         text-overflow: ellipsis;
 278                         white-space: nowrap;
 279                         color: #222;
 280                         margin-top: 2px;
 281                         margin-bottom: 2px;
 282
 283                         &.compact { font-size: 1.0em; font-weight: normal; }
 284                         &.paused { font-weight: normal; color: #777; }
 285                 }
 286
 287                 div.torrent_progress_details,
 288                 div.torrent_peer_details {
 289                         clear: left;
 290                         overflow: hidden;
 291                         text-overflow: ellipsis;
 292                         white-space: nowrap;
 293                 }
 294
 295                 div.torrent_progress_details.error,
 296                 div.torrent_peer_details.error {
 297                         color: #F00;
 298                 }
 299
 300                 &.selected div.torrent_progress_details.error,
 301                 &.selected div.torrent_peer_details.error {
 302                         color: #FFF;
 303                 }
 304         }
 305
 306         /**
 307          * Progressbar
 308          *
 309          * Each progressbar has three elemens: a parent container and two children,
 310          * complete and incomplete.
 311          *
 312          * The only thing needed to set the progressbar percentage is to set
 313          * the complete child's width as a percentage. This is because incomplete
 314          * is pinned to the full width and height of the parent, and complete
 315          * is pinned to the left side of the parent and has a higher z-index.
 316          *
 317          * The progressbar has different colors depending on its state, so there
 318          * are five 'decorator' classNames: paused, queued, magnet, leeching, seeding.
 319          */
 320         div.torrent_progress_bar_container
 321         {
 322                 height: 10px;
 323                 position: relative;
 324
 325                 &.compact {
 326                         width: 50px;
 327                         position: absolute;
 328                         right: 10px;
 329                         margin-top: 2px;
 330                         /*float: right;*/
 331                 }
 332                 &.full {
 333                         margin-top: 2px;
 334                         margin-bottom: 5px;
 335                 }
 336         }
 337         div.torrent_peer_details.compact
 338         {
 339                 margin-top: 2px;
 340                 margin-right: 65px; /* leave room on the right for the progressbar */
 341                 float: right; /* pins it next to progressbar & forces torrent_name to ellipsize when it bumps up against this div */
 342         }
 343         div.torrent_progress_bar
 344         {
 345                 height: 100%;
 346                 position: absolute;
 347                 top: 0px;
 348                 left: 0px;
 349                 background-image: url('images/progress.png');
 350                 background-repeat: repeat-x;
 351                 border: 1px solid #888;
 352
 353                 &.complete                   { z-index: 2; }
 354                 &.complete.paused            { background-position: left -30px; border-color: #989898; }
 355                 &.complete.magnet            { background-position: left -20px; border-color: #CFCFCF; }
 356                 &.complete.leeching          { background-position: left   0px; border-color: #3D9DEA; }
 357                 &.complete.leeching.queued   { background-position: left -70px; border-color: #889CA5; }
 358                 &.complete.seeding           { background-position: left -40px; border-color: #269E30; }
 359                 &.complete.seeding.queued    { background-position: left -60px; border-color: #8A998D; }
 360                 &.incomplete                 { z-index: 1; width: 100%; }
 361                 &.incomplete.paused          { background-position: left -20px; border-color: #CFCFCF; }
 362                 &.incomplete.magnet          { background-position: left -50px; border-color: #D47778; }
 363                 &.incomplete.leeching        { background-position: left -20px; border-color: #CFCFCF; }
 364                 &.incomplete.leeching.queued { background-position: left -80px; border-color: #C4C4C4; }
 365                 &.incomplete.seeding         { background-position: left -10px; border-color: #29AD35; }
 366         }
 367 }
 368
 369 /***
 370 ****
 371 ****  PREFERENCES
 372 ****
 373 ***/
 374
 375 #prefs-dialog.ui-tabs .ui-tabs-panel {
 376         padding: 0px;
 377         -moz-user-select: none;
 378         -webkit-user-select: none;
 379 }
 380
 381 .prefs-section
 382 {
 383         margin: 10px;
 384         text-align: left;
 385
 386         > * {
 387                 padding-top: 8px;
 388                 padding-left: 8px;
 389         }
 390
 391         .title {
 392                 font-weight: bold;
 393                 font-size: larger;
 394                 padding-left: 0px;
 395         }
 396
 397         .row {
 398                 .key {
 399                         float: left;
 400                         padding-top: 3px;
 401                         > * { margin-left: 0px; }
 402                 }
 403                 .value {
 404                         margin-left: 150px;
 405                         > * { width: 100%; }
 406                 }
 407         }
 408
 409         .checkbox-row {
 410                 > input { margin: 0px; }
 411                 > label { margin-left: 5px; }
 412         }
 413
 414         #alternative-speed-limits-title {
 415                 padding-left: 18px;
 416                 background: transparent url('images/blue-turtle.png') no-repeat;
 417         }
 418 }
 419
 420 /***
 421 ****
 422 ****  TORRENT INSPECTOR
 423 ****
 424 ***/
 425
 426 div#torrent_inspector
 427 {
 428         overflow: auto;
 429         text-align: left;
 430         padding: 15px;
 431         top: 0;
 432         position: relative;
 433         width: 100%;
 434         z-index: 2;
 435
 436         $idle-color-top: $nonselected-gradient-top;
 437         $idle-color-bottom: $nonselected-gradient-bottom;
 438         $active-color-top: $selected-gradient-top;
 439         $active-color-bottom: $selected-gradient-bottom;
 440
 441
 442         #inspector-tabs-wrapper
 443         {
 444                 width: 100%;
 445                 overflow: hidden;
 446                 text-align: center;
 447
 448                 #inspector-tabs
 449                 {
 450                         $border-radius: 5px;
 451
 452                         display: inline-block;
 453
 454                         > * {
 455                                 @include button;
 456                                 width: 30px;
 457                                 height: 20px;
 458                         }
 459
 460                         > #inspector-tab-info {
 461                                 @include leftRoundedBox($border-radius);
 462                                 @include buttonImage('images/inspector-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 463                                 border-left-width: 1px;
 464                         }
 465
 466                         > #inspector-tab-peers {
 467                                 @include buttonImage('images/inspector-peers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 468                         }
 469
 470                         > #inspector-tab-trackers {
 471                                 @include buttonImage('images/inspector-trackers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 472                         }
 473
 474                         > #inspector-tab-files {
 475                                 @include rightRoundedBox($border-radius);
 476                                 @include buttonImage('images/inspector-files.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 477                         }
 478                 }
 479         }
 480
 481         #inspector_header
 482         {
 483                 margin-top: 8px;
 484
 485                 #torrent_inspector_name
 486                 {
 487                         font-weight: bold;
 488                         font-size: large;
 489                 }
 490         }
 491
 492         ul.tier_list
 493         {
 494                 margin: 2px 0 8px 0;
 495                 width: 100%;
 496                 padding-left: 0px;
 497                 text-align: left;
 498                 display: block;
 499                 cursor: default;
 500                 list-style-type: none;
 501                 list-style: none;
 502                 list-style-image: none;
 503                 clear: both;
 504
 505                 li {
 506                         overflow: hidden;
 507                 }
 508                 .tracker_activity {
 509                         float: left;
 510                         color: #666;
 511                         width: 200px;
 512                         display: table;
 513                         margin-top: 1px;
 514                 }
 515                 .tracker_activity div {
 516                         padding: 2px;
 517                 }
 518                 table {
 519                         float: right;
 520                         color: #666;
 521                 }
 522                 th {
 523                         text-align: right;
 524                 }
 525         }
 526
 527         li.inspector_tracker_entry {
 528                 padding: 3px 0 3px 2px;
 529                 display: block;
 530
 531                 &.odd {
 532                         background-color: #EEEEEE;
 533                 }
 534         }
 535
 536         div.tracker_host {
 537                 font-size: 1.2em;
 538                 font-weight: bold;
 539                 color: #222;
 540         }
 541
 542         /* Files Inspector Tab */
 543         #inspector_file_list {
 544                 padding: 0 0 0 0;
 545                 margin: 0 0 0 0;
 546                 text-align: left;
 547                 cursor: default;
 548                 overflow: hidden;
 549         }
 550         #inspector_file_list {
 551                 border-top: 1px solid #888;
 552                 width: 100%;
 553                 margin: 6px 0 0 0;
 554                 padding-top: 6px;
 555                 padding-bottom: 10px;
 556                 text-align: left;
 557                 display: block;
 558                 cursor: default;
 559                 list-style-type: none;
 560                 list-style: none;
 561                 list-style-image: none;
 562                 clear: both;
 563         }
 564         li.inspector_torrent_file_list_entry {
 565                 padding: 3px 0 3px 2px;
 566                 display: block;
 567                 &.skip { color: #666; }
 568                 &.even { background-color: #F7F7F7; }
 569         }
 570
 571         div.inspector_torrent_file_list_entry_name {
 572                 font-size: 1.2em;
 573                 color: black;
 574                 display: inline;
 575                 margin-left: 0px;
 576         }
 577         li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
 578                 color: #999;
 579         }
 580         div.inspector_torrent_file_list_entry_progress {
 581                 color: #999;
 582                 margin-left: 20px;
 583         }
 584
 585         ul.single_file li.inspector_torrent_file_list_entry>.file_wanted_control,
 586         li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
 587                 cursor: default;
 588         }
 589 }
 590
 591 /* Peers Inspector Tab */
 592 #inspector_peers_list {
 593         padding: 0 0 0 0;
 594         margin: 0 0 0 0;
 595         text-align: left;
 596         cursor: default;
 597         overflow: hidden;
 598
 599         > div.inspector_group {
 600                 padding-bottom: 0;
 601                 margin-bottom: 0;
 602         }
 603 }
 604
 605 table.peer_list {
 606         width: 100%;
 607         border-collapse: collapse;
 608         text-align: left;
 609         cursor: default;
 610         clear: both;
 611         table-layout: fixed;
 612
 613         .encryptedCol { width: 16px; }
 614         .upCol { width: 70px; }
 615         .downCol { width: 70px; }
 616         .percentCol { width: 30px; padding-right: 5px; text-align: right; }
 617         .statusCol { width: 40px; padding-right: 5px; }
 618         .addressCol { width: 180px; }
 619         .clientCol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 620 }
 621
 622 tr.inspector_peer_entry
 623 {
 624         div.encrypted-peer-cell
 625         {
 626                 width: 16px;
 627                 height: 16px;
 628                 background: transparent url('images/lock_icon.png') no-repeat;
 629         }
 630
 631         &.odd
 632         {
 633                 background-color: #EEEEEE;
 634         }
 635 }
 636
 637 /***
 638 ****  File Priority Buttons
 639 ***/
 640
 641 div.file-priority-radiobox
 642 {
 643         $border-radius: 5px;
 644
 645         display: inline;
 646         float: right;
 647         margin: 4px;
 648         margin-top: 2px;
 649
 650         > * {
 651                 @include button;
 652                 width: 20px;
 653                 height: 12px;
 654         }
 655
 656         // We have row after row of these buttons, so the flashy colors used in the inspector tabs look harsh here.
 657         // Keep the same basic color theme, but look less harsh, by cutting the gradient's color range.
 658         $idle-color-top:      mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 80% );
 659         $idle-color-bottom:   mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 20% );
 660         $active-color-top:    mix( $selected-gradient-top,    $selected-gradient-bottom,    80% );
 661         $active-color-bottom: mix( $selected-gradient-top,    $selected-gradient-bottom,    20% );
 662
 663         > div.low {
 664                 @include leftRoundedBox($border-radius);
 665                 @include buttonImage('images/file-priority-low.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 666                 border-right-width: 0px;
 667         }
 668
 669         > div.normal {
 670                 @include buttonImage('images/file-priority-normal.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 671         }
 672
 673         > div.high {
 674                 @include rightRoundedBox($border-radius);
 675                 @include buttonImage('images/file-priority-high.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 676                 border-left-width: 0px;
 677         }
 678 }
 679
 680
 681 /****
 682 *****
 683 *****  MAIN WINDOW FOOTER
 684 *****
 685 ****/
 686
 687 div.torrent_footer
 688 {
 689         height: 22px;
 690         border-top: 1px solid #555;
 691         position: relative;
 692         width: 100%;
 693         z-index: 3;
 694
 695         @include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
 696
 697         > * {
 698                 position: relative;
 699                 float: left;
 700                 margin: 2px 4px;
 701                 width: 18px;
 702                 height: 12px;
 703                 padding: 2px 8px;
 704                 float: left;
 705                 border: 1px solid #888;
 706                 -moz-user-select: none;
 707                 -webkit-user-select: none;
 708         }
 709
 710         $idle-color-top: $nonselected-gradient-top;
 711         $idle-color-bottom: $nonselected-gradient-bottom;
 712         $active-color-top: $selected-gradient-top;
 713         $active-color-bottom: $selected-gradient-bottom;
 714
 715         div.main_container,
 716         ul#settings_menu {
 717                 display: none;
 718         }
 719
 720         #prefs-button {
 721                 @include roundedBox(5px);
 722                 @include buttonImage('images/wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 723         }
 724
 725         #turtle-button {
 726                 @include roundedBox(5px);
 727                 @include buttonImage('images/turtle.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 728                 &:active, &.selected {
 729                         @include imageOnVerticalGradient('images/blue-turtle.png', $active-color-top, $active-color-bottom);
 730                 }
 731         }
 732
 733         #compact-button {
 734                 @include roundedBox(5px);
 735                 @include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 736         }
 737 }
 738
 739 /****
 740 *****
 741 *****  DIALOGS
 742 *****
 743 ****/
 744
 745 div#dialog_message.dialog_message {
 746         width: 280px;
 747         margin: 10px auto 25px;
 748         font-size: 13px;
 749         line-height: 14px;
 750         word-wrap: break-word;
 751         overflow: hidden;
 752         padding-bottom: 0;
 753 }
 754
 755 #torrent_upload_file, label[for="torrent_upload_file"]{
 756         display:none;
 757 }
 758
 759 h2.dialog_heading {
 760         text-align: center;
 761         width: 300px;
 762         margin: 0 auto;
 763         font-size: 17px;
 764 }
 765
 766 div.dialog_container a {
 767         color: white;
 768         padding: 7px 0;
 769         background: #222;
 770         text-decoration: none;
 771         border: 2px solid white;
 772         margin: 5px 5px 0;
 773         font-weight: bold;
 774         -webkit-border-radius: 16px;
 775         display: inline-block;
 776         width: 90px;
 777         font-size: 12px;
 778         text-align: center;
 779 }
 780
 781 #dialog_container div.dialog_window img {
 782         margin: 5px auto 12px;
 783 }
 784
 785 .landscape {
 786         div.dialog_container {
 787                 a#dialog_cancel_button { left: 155px; }
 788                 a#dialog_confirm_button { right: 110px; }
 789                 img { float: left !important; margin: 0 0 0 50px; }
 790         }
 791         h2#dialog_heading.dialog_heading {
 792                 margin: 5px auto 0;
 793                 margin-left: 150px;
 794                 text-align: left;
 795         }
 796         div#dialog_message.dialog_message {
 797                 width: 300px;
 798                 margin: 10px 0 20px 150px;
 799                 text-align: left;
 800         }
 801 }
 802
 803
 804 // no context menu in the mobile version...
 805 div#torrent_context_menu {
 806         display: none;
 807 }
 808
 809 iframe#torrent_upload_frame {
 810         display: block; /* Don't change this : safari forms won't target hidden frames (they open a new window) */
 811         position: absolute;
 812         top: -1000px;
 813         left: -1000px;
 814         width: 0px;
 815         height: 0px;
 816         border: none;
 817         padding: 0;
 818         margin: 0;
 819 }