/*-------------------------------------- * * G L O B A L * *--------------------------------------*/ html { margin: 0; /* setting border: 0 hoses ie6 win window inner well border */ padding: 0; } body { font: 11px Helvetica, Arial, sans-serif; color: #323232 !important; background: #fff; text-align: center; margin: 0; padding: 0; width: 100%; overflow-x: hidden; -webkit-text-size-adjust: none; } body div#torrent_container { min-height: 328px; } body div.dialog_container { min-height: 326px; } body div#torrent_inspector { min-height: 329px; } body.landscape div#torrent_container { min-height: 147px; } body.landscape div#dialog_container, body.landscape div#torrent_inspector { min-height: 143px; } body.inspector_showing #torrent_filter_bar, body.inspector_showing #torrent_container, body.dialog_showing #torrent_filter_bar, body.dialog_showing #torrent_container, body.dialog_showing #torrent_inspector, body.dialog_showing #prefs_container, body.prefs_showing #torrent_inspector, body.prefs_showing #torrent_filter_bar, body.prefs_showing #torrent_container, body.open_showing #torrent_filter_bar, body.open_showing #torrent_container { display: none !important; } .torrent a img { display: none; } /*** **** **** TOOLBAR **** ***/ #toolbar { width: 100%; height: 55px; margin: 0; background: #6685a1 url('../images/graphics/iphone_chrome.png') top left repeat-x; border: 1px outset #AEBBCB; position: relative; text-shadow: 0 -1px 0 #446; } #toolbar ul { margin: 0; padding: 0 3px; text-align: left; } #toolbar ul li { list-style-type: none; list-style-image: none; padding: 0; margin: 4px 0 0 0; display: inline-block; } #toolbar li#remove, li#open { float: left; } #toolbar li#resume_all, li#pause_all { float: right; } #toolbar ul li > div { color: #fff; font-size: 9px; text-decoration: none; padding: 0 4px 0; display: block; margin: 0; background-position: top center; background-repeat: no-repeat; position: relative; font-weight: bold; } #toolbar ul li.disabled { opacity: 0.25; } #toolbar ul li div div.toolbar_image { width: 32px; height: 32px; margin: 0 auto 2px; background-image: url('../images/buttons/toolbar_buttons.png'); } /* toolbar images */ li#open div div.toolbar_image { background-position: left 0px; } li#open div:active div.toolbar_image { background-position: right 0px; } li#remove div div.toolbar_image { background-position: left -32px; } li#remove div:active div.toolbar_image { background-position: right -32px; } li#resume_selected div div.toolbar_image { background-position: left -96px; } li#resume_selected div:active div.toolbar_image { background-position: right -96px; } li#pause_selected div div.toolbar_image { background-position: left -64px; } li#pause_selected div:active div.toolbar_image { background-position: right -64px; } li#pause_all div div.toolbar_image { background-position: left -128px; } li#pause_all div:active div.toolbar_image { background-position: right -128px; } li#resume_all div div.toolbar_image { background-position: left -160px; } li#resume_all div:active div.toolbar_image { background-position: right -160px; } li#filter div div.toolbar_image { background-position: left -192px; } li#filter div:active div.toolbar_image { background-position: right -192px; } li#inspector div div.toolbar_image { background-position: left -224px; } li#inspector div:active div.toolbar_image { background-position: right -224px; } #toolbar ul li#filter, #toolbar ul li#inspector, #toolbar ul li.divider { display: none; } /*** **** **** STATUSBAR **** ***/ #statusbar { margin: 0; color: #fff; background: #6B83A1; border: 1px outset #AEBBCB; width: 100%; overflow: hidden; position: relative; text-align: left; } #statusbar #speed-info { margin-top: 3px; float: right; margin-right: 6px; } #statusbar #filter-button { float: left; border: none; font-size: 1.2em; padding: 1px 6px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; -moz-user-select: none; -webkit-user-select: none; } #statusbar #filter-button:hover { cursor: pointer; } #statusbar #filter-button .filter-selection { text-decoration: underline; } #statusbar #torrent_search { display: none; } /*** **** **** FILTER POPUP **** ***/ #filter-popup .count { padding-left: 3px; } #filter-popup { color: #222;/* !important; */ background: #FFF; z-index: 100; } #filter-popup #filter-by-state .row .filter-img { display: none; } div#filter-popup #filter-by-state .row .filter-name { left: 0px; } #filter-popup .row { font-size: 1.2em; text-align: left; cursor: pointer; margin: 15px 2px; position: relative; height: 18px; } div#filter-popup .row .filter-img { border: none; width: 16px; height: 16px; position: absolute; left: 0px; } #filter-popup .row .filter-name { position: absolute; left: 20px; } #filter-popup .row .count { float: right; color: #aaa; } #filter-popup li { text-align: left } #filter-popup .row:hover, #filter-popup .row.selected { font-weight: bold; } #filter-popup #filter-by-state { float: left; width: 120px; overflow: hidden; text-overflow: ellipsis; } #filter-popup #filter-by-tracker { float: right; width: 130px; overflow: hidden; text-overflow: ellipsis; } /*** **** **** TORRENT CONTAINER **** ***/ ul.torrent_list { width: 100%; margin: 0; padding: 0; text-align: left; } ul.torrent_list li { list-style-type: none; list-style-image: none; clear: both; display: block; padding: 0; margin: 0; vertical-align: middle; } ul.torrent_list li.torrent { border-bottom: 1px solid #ccc; padding: 4px 10px; color: #666; font-size: 11px; margin: 0 !important; background: white; } ul.torrent_list li.torrent.compact { padding: 4px; } .torrent div.torrent_progress_details, .torrent div.torrent_peer_details { clear: both; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ul.torrent_list li.torrent.even { background-color: #EDF3FE; } ul.torrent_list li.torrent.selected { background-color: #3875D7; color: #FFF; } ul.torrent_list li.torrent div.torrent_name { font-size: 13px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #222; margin-bottom: 2px; } ul.torrent_list li.torrent div.torrent_name.compact { font-weight: normal; } ul.torrent_list li.torrent div.torrent_name.paused { font-size: 1.3em; font-weight: normal; color: #777; } ul.torrent_list li.torrent.selected div.torrent_name { color: #fff; } div.torrent_peer_details { font-size: 10px; } /** * Progressbar * * Each progressbar has three elemens: a parent container and two children, * complete and incomplete. * * The only thing needed to set the progressbar percentage is to set * the complete child's width as a percentage. This is because incomplete * is pinned to the full width and height of the parent, and complete * is pinned to the left side of the parent and has a higher z-index. * * The progressbar has different colors depending on its state, so there * are five 'decorator' classNames: paused, queued, magnet, leeching, seeding. */ ul.torrent_list div.torrent_progress_bar_container { height: 10px; position: relative; margin-top: 2px; } ul.torrent_list div.torrent_progress_bar_container.compact { width: 50px; position: absolute; right: 10px; margin-top: 2px; /*float: right;*/ } ul.torrent_list div.torrent_peer_details.compact { font-size: 12px; /* matching the progressbar height (10px) + progressbar border (1px top, 1px bottom) */ margin-top: 2px; margin-left: 10px; margin-right: 65px; /* leave room on the right for the progressbar */ float: right; /* pins it next to progressbar & forces torrent_name to ellipsize when it bumps up against this div */ } ul.torrent_list div.torrent_progress_bar_container.full { margin-bottom: 5px; } ul.torrent_list div.torrent_progress_bar { height: 100%; position: absolute; top: 0px; left: 0px; background-image: url('../images/progress/progress.png'); background-repeat: repeat-x; border: 1px solid #888; } ul.torrent_list div.torrent_progress_bar.complete { z-index: 2; } ul.torrent_list div.torrent_progress_bar.incomplete { z-index: 1; width: 100%; } ul.torrent_list div.torrent_progress_bar.complete.paused { background-position: left -30px; border-color: #989898; } ul.torrent_list div.torrent_progress_bar.incomplete.paused { background-position: left -20px; border-color: #CFCFCF; } ul.torrent_list div.torrent_progress_bar.complete.magnet { background-position: left -20px; border-color: #CFCFCF; } ul.torrent_list div.torrent_progress_bar.incomplete.magnet { background-position: left -50px; border-color: #D47778; } ul.torrent_list div.torrent_progress_bar.complete.leeching { background-position: left 0px; border-color: #3D9DEA; } ul.torrent_list div.torrent_progress_bar.complete.leeching.queued { background-position: left -70px; border-color: #889CA5; } ul.torrent_list div.torrent_progress_bar.incomplete.leeching { background-position: left -20px; border-color: #CFCFCF; } ul.torrent_list div.torrent_progress_bar.incomplete.leeching.queued { background-position: left -80px; border-color: #C4C4C4; } ul.torrent_list div.torrent_progress_bar.complete.seeding { background-position: left -40px; border-color: #269E30; } ul.torrent_list div.torrent_progress_bar.complete.seeding.queued { background-position: left -60px; border-color: #8A998D; } ul.torrent_list div.torrent_progress_bar.incomplete.seeding { background-position: left -10px; border-color: #29AD35; } div.dialog_container { background: rgba(0,0,0,0.85); color: white; padding: 15px 10px; } div.dialog_container .dialog_window { height: auto; font-size: 13px; text-shadow: black 1px 1px 1px !important; } div#dialog_message.dialog_message { width: 280px; margin: 10px auto 25px; font-size: 13px; line-height: 14px; word-wrap: break-word; overflow: hidden; padding-bottom: 0; } #torrent_upload_file, label[for="torrent_upload_file"]{ display:none; } h2.dialog_heading { text-align: center; width: 300px; margin: 0 auto; font-size: 17px; } div.dialog_container a { color: white; padding: 7px 0; background: #222; text-decoration: none; border: 2px solid white; margin: 5px 5px 0; font-weight: bold; -webkit-border-radius: 16px; display: inline-block; width: 90px; font-size: 12px; text-align: center; } div.dialog_container a#dialog_cancel_button, div.dialog_container a#prefs_cancel_button { left: 55px; } div.dialog_container a#dialog_confirm_button, div.dialog_container a#prefs_save_button { right: 55px; color: black; text-shadow: none; background: #fff; } #dialog_container div.dialog_window img { margin: 5px auto 12px; } .landscape div.dialog_container a#dialog_cancel_button { left: 155px; } .landscape div.dialog_container a#dialog_confirm_button { right: 110px; } .landscape div.dialog_container img { float: left !important; margin: 0 0 0 50px; } .landscape h2#dialog_heading.dialog_heading { margin: 5px auto 0; margin-left: 150px; text-align: left; } .landscape div#dialog_message.dialog_message { width: 300px; margin: 10px 0 20px 150px; text-align: left; } /*-------------------------------------- * * P R E F S C O N T A I N E R * *--------------------------------------*/ div#prefs_container { text-align: left; } div#prefs_container label.item { margin: 0 5px 0 15px; float: left; } form#prefs_form { height: 365px; padding: 0 5px; } div#prefs_container label.suffix { margin: 0 5px 0 10px; float: left; } div#prefs_container input { float: left; } div#prefs_container div.preference input[type=checkbox] { margin: 3px 7px 0 16px; width: 18px; height: 18px; clear: left; } div#prefs_container label { line-height: 25px; display: block; } div#prefs_container div.download_location label.item, div#prefs_container div.port label.item, div#prefs_container div.web_gui label.item { width: 127px; clear: left; } div#prefs_container div.auto_start label.item, div#prefs_container div.encryption label.item, div#prefs_container div.limit_total label.item { margin: 0 5px 0 0; } div#prefs_container div.limit_total label.item { width: 101px; } div#prefs_container div.preference input[type=text] { padding: 2px 2px 1px; text-shadow: none !important; font-size: 13px; width: 50px; } div#prefs_container div.download_location input { position: absolute; right: 20px; left: 160px; width: auto !important; } div#prefs_container label.category { clear: both; font-weight: bold; } div#prefs_container a { margin-top: 42px !important; } .landscape div.dialog_container a#prefs_cancel_button { left: 135px; } .landscape div.dialog_container a#prefs_save_button { right: 135px; } /*-------------------------------------- * * T O R R E N T I N S P E C T O R * *--------------------------------------*/ #inspector_close { align: right; text-align: centre; float: right; padding-right: 10px; padding-top: 12px; } div#torrent_inspector { position: relative; top: 0 !important; right: 0px; width: 100%; background-color: #ddd; z-index: 2; text-align: left; overflow: auto; } div#torrent_inspector #torrent_inspector_name { margin: 0; overflow: hidden; word-wrap: break-word; } div#torrent_inspector #torrent_inspector_size { font-size: 1.2em; margin: 3; display: block; padding-top: 2px; } div#inspector_header { clear: both; padding-top: 10px; padding-left: 10px; padding-right: 10px; } div#inspector_tabs { width: 243px; margin: 0 auto; padding-top: 10px; } .inspector_tab { float: left; height: 17px; background: transparent url('../images/buttons/tab_backgrounds.png') left -1px repeat-x; border: 1px solid #888; margin: 0px 1px; padding: 3px 15px; /* 3px == ((bg image height - fg image height) / 2) */ cursor: pointer; } #inspector_tabs .selected { background-position: left -26px; /* the highlighted part of the image */ } .inspector_container { margin: 3%; width: 96%; } .inspector_group { display: table; width: 100%; border-top: 1px solid #888; margin: 10px 0px; padding: 10px 0px; } .inspector_group_label { display: table-header-group; font-weight: bold; } .inspector_row { display: table-row; } .inspector_row > .inspector_label { display: table-cell; width: 100px; /* this + the next 230 == inspector_container_with */ } .inspector_row > div { display: table-cell; padding-top: 10px; width: 230px; /* inspector_container_width==330 - inspector_label_width==100 */ } /* Trackers Inspector Tab */ #inspector_trackers_list { padding: 0 0 0 0; margin: 0 0 0 0; text-align: left; cursor: default; overflow: hidden; } #inspector_trackers_list > div.inspector_group { padding-bottom: 0; margin-bottom: 0; } ul.tier_list { width: 100%; margin: 10px 0 0 0; padding-left: 0px; text-align: left; display: block; cursor: default; list-style-type: none; list-style: none; list-style-image: none; clear: both; } .tier_list li{ overflow: hidden; } .tier_list .tracker_activity{ float: left; color: #666; width: 200px; display: table; margin-top: 1px; } .tier_list .tracker_activity div{ padding: 2px; } .tier_list table{ float: right; color: #666; } .tier_list th{ text-align: right; } li.inspector_tracker_entry { padding: 3px 0 3px 2px; display: block; } li.inspector_tracker_entry.odd { background-color: #EEEEEE; } div.tracker_host { font-size: 1.2em; font-weight: bold; color: #222; } /* Files Inspector Tab */ #inspector_file_list { padding: 0 0 0 0; margin: 0 0 0 0; text-align: left; cursor: default; overflow: hidden; } ul.inspector_torrent_file_list { width: 100%; margin: 0 0 0 0; padding-bottom: 10px; text-align: left; display: block; cursor: default; list-style-type: none; list-style: none; list-style-image: none; } li.inspector_torrent_file_list_entry { padding: 3px 0 3px 2px; display: block; } li.inspector_torrent_file_list_entry.skip { color: #666; } li.inspector_torrent_file_list_entry.even { background-color: #EEEEEE; } div.inspector_torrent_file_list_entry_name { font-size: 1.2em; font-weight: bold; color: #222; margin-left: 20px; } li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name { color: #666; } li.inspector_torrent_file_list_entry.even { background-color: #EEEEEE; } div.inspector_torrent_file_list_entry_progress { font-size: 1em; color: #666; margin-left: 20px; } div.file_wanted_control { background-position: left -19px; float: left; position: absolute; cursor: pointer; margin: 3px 0 0 0; width: 19px; height: 19px; background-image: url('../images/buttons/file_wanted_buttons.png'); background-repeat: no-repeat; background-color: transparent; } li.inspector_torrent_file_list_entry.skip>.file_wanted_control { background-position: left top; } li.inspector_torrent_file_list_entry.complete>.file_wanted_control { background-position: left -19px; } ul.single_file li.inspector_torrent_file_list_entry>.file_wanted_control, li.inspector_torrent_file_list_entry.complete>.file_wanted_control { background-position: left -38px; cursor: default; } div.file_priority_control { float: right; margin: 4px 0 0 0; width: 35px; height: 19px; background-image: url('../images/buttons/file_priority_buttons.png'); background-repeat: no-repeat; background-color: transparent; cursor: pointer; } div.file_priority_control.normal { background-position: right top; } div.file_priority_control.high { background-position: right -19px; } div.file_priority_control.low { background-position: right -38px; } ul.single_file li.inspector_torrent_file_list_entry>.file_priority_control, li.inspector_torrent_file_list_entry.complete div.file_priority_control { background-position: left -57px; cursor: default; } /*-------------------------------------- * * T O R R E N T F O O T E R * *--------------------------------------*/ div.torrent_footer { margin: -1px 0 0; height: 20px; background: #ddd url('../images/graphics/filter_bar.png') repeat-x left -51px; border-top: 1px solid #777; position: relative; width: 100%; z-index: 2; text-align: center; color: #222; text-shadow: 0 1px 1px #fff; overflow: hidden; } div.torrent_footer div#disk_space_container, div.torrent_footer a#preferences_link { float: right; font-size: 12px; vertical-align: middle; margin: 1px 6px 0 0; padding: 2px 0 2px; max-width: 55%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } div.torrent_footer a#preferences_link { float: left; font-weight: bold; margin: 1px 0 0 6px; } body.prefs_showing div.torrent_footer a#preferences_link, body.dialog_showing div.torrent_footer a#preferences_link { display: none; } iframe#torrent_upload_frame { display: block; /* Don't change this : safari forms won't target hidden frames (they open a new window) */ position: absolute; top: -1000px; left: -1000px; width: 0px; height: 0px; border: none; padding: 0; margin: 0; } div.torrent_footer #compact-button { position: absolute; top: 0px; right: 0px; margin: 2px; height: 18px; width: 32px !important; } div.torrent_footer #compact-button { background: transparent url('../images/graphics/chrome.png') left -31px no-repeat; } div.torrent_footer #compact-button.active { background: transparent url('../images/graphics/chrome.png') -32px -31px no-repeat; } div.torrent_footer #compact-button.enabled { background: transparent url('../images/graphics/chrome.png') left -53px no-repeat; } div.torrent_footer #compact-button.enabled.active { background: transparent url('../images/graphics/chrome.png') -32px -53px no-repeat; } div.torrent_footer div#turtle_button { position: absolute; top: 0px; left: 0px; margin: 2px; height: 18px; width: 32px !important; } .turtleEnabled { background: transparent url('../images/graphics/chrome.png') left -121px no-repeat; } .turtleEnabled:active { background: transparent url('../images/graphics/chrome.png') -32px -121px no-repeat; } .turtleDisabled { background: transparent url('../images/graphics/chrome.png') left -99px no-repeat; } .turtleDisabled:active { background: transparent url('../images/graphics/chrome.png') -32px -99px no-repeat; } div.torrent_footer #compact-button { position: absolute; top: 0px; right: 0px; margin: 2px; height: 18px; width: 32px !important; visibility: visible; } div.torrent_footer #compact-button { background: transparent url('../images/graphics/chrome.png') left -187px no-repeat; } div.torrent_footer #compact-button:active { background: transparent url('../images/graphics/chrome.png') -32px -187px no-repeat; } div.torrent_footer #compact-button.enabled { background: transparent url('../images/graphics/chrome.png') left -165px no-repeat; } div.torrent_footer #compact-button.enabled:active { background: transparent url('../images/graphics/chrome.png') -32px -165px no-repeat; } /*-------------------------------------- * * Hide remnants of stuff we don't need, like * transmenu and contextmenu. * *--------------------------------------*/ .torrent_footer div.main_container, .torrent_footer ul#settings_menu, div.torrent_footer ul#settings_menu li#button, div#torrent_context_menu { display: none; }