987 lines
21 KiB
SCSS
987 lines
21 KiB
SCSS
@mixin verticalGradient($topColor, $bottomColor) {
|
|
background-color: mix($topColor, $bottomColor);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor));
|
|
background-image: -webkit-linear-gradient(top, $topColor, $bottomColor);
|
|
background-image: -moz-linear-gradient(top, $topColor, $bottomColor);
|
|
background-image: -ms-linear-gradient(top, $topColor, $bottomColor);
|
|
background-image: -o-linear-gradient(top, $topColor, $bottomColor);
|
|
background-image: linear-gradient(top, $topColor, $bottomColor);
|
|
}
|
|
|
|
@mixin imageOnVerticalGradient($src, $topColor, $bottomColor) {
|
|
background-color: mix($topColor, $bottomColor);
|
|
background-image: url($src); /* fallback */
|
|
background-image: url($src), -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor)); /* Saf4+, Chrome */
|
|
background-image: url($src), -webkit-linear-gradient(top, $topColor, $bottomColor); /* Chrome 10+, Saf5.1+ */
|
|
background-image: url($src), -moz-linear-gradient(top, $topColor, $bottomColor); /* FF3.6+ */
|
|
background-image: url($src), -ms-linear-gradient(top, $topColor, $bottomColor); /* IE10 */
|
|
background-image: url($src), -o-linear-gradient(top, $topColor, $bottomColor); /* Opera 11.10+ */
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
@mixin buttonImage($image-url, $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom) {
|
|
@include imageOnVerticalGradient($image-url, $idle-color-top, $idle-color-bottom);
|
|
&:active, &.selected {
|
|
@include imageOnVerticalGradient($image-url, $active-color-top, $active-color-bottom);
|
|
}
|
|
}
|
|
|
|
$nonselected-gradient-top: white;
|
|
$nonselected-gradient-bottom: #BBB;
|
|
$selection-color: #cdcdff;
|
|
$selected-gradient-top: $selection-color;
|
|
$selected-gradient-bottom: white;
|
|
|
|
@mixin button {
|
|
cursor: pointer;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
display: inline-block;
|
|
border-style: solid;
|
|
border-color: #aaa;
|
|
border-width: 1px;
|
|
padding: 3px;
|
|
}
|
|
|
|
@mixin roundedBox($radius) {
|
|
-moz-border-radius: $radius;
|
|
border-radius: $radius;
|
|
}
|
|
|
|
@mixin leftRoundedBox($radius) {
|
|
-moz-border-radius-topleft: $radius;
|
|
-moz-border-radius-bottomleft: $radius;
|
|
border-top-left-radius: $radius;
|
|
border-bottom-left-radius: $radius;
|
|
}
|
|
@mixin rightRoundedBox($radius) {
|
|
-moz-border-radius-topright: $radius;
|
|
-moz-border-radius-bottomright: $radius;
|
|
border-top-right-radius: $radius;
|
|
border-bottom-right-radius: $radius;
|
|
}
|
|
|
|
@mixin roundedButton($radius) {
|
|
@include button;
|
|
@include roundedBox($radius);
|
|
}
|
|
|
|
/*--------------------------------------
|
|
*
|
|
* G L O B A L
|
|
*
|
|
*--------------------------------------*/
|
|
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font: 62.5% "lucida grande", Tahoma, Verdana, Arial, Helvetica, sans-serif; /* Resets 1em to 10px */
|
|
color: #222;/* !important; */
|
|
background: #FFF;
|
|
text-align: center;
|
|
margin: 0 0 30px;
|
|
overflow: hidden;
|
|
img { border: none; }
|
|
a { outline: 0; }
|
|
}
|
|
|
|
/***
|
|
****
|
|
**** ABOUT DIALOG
|
|
****
|
|
***/
|
|
|
|
#about-dialog
|
|
{
|
|
> * {
|
|
text-align: center;
|
|
}
|
|
> #about-logo {
|
|
background: transparent url('images/logo.png') top left no-repeat;
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-left: 100px;
|
|
}
|
|
> #about-title {
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
/***
|
|
****
|
|
**** HOTKEYS DIALOG
|
|
****
|
|
***/
|
|
|
|
#hotkeys-dialog {
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
|
|
th, td {
|
|
border: 1px solid #AAA;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/***
|
|
****
|
|
**** TOOLBAR
|
|
****
|
|
***/
|
|
$toolbar-gradient-top: #ddd;
|
|
$toolbar-gradient-bottom: #bbb;
|
|
$toolbar-height: 36px;
|
|
|
|
div#toolbar
|
|
{
|
|
width: 100%;
|
|
height: $toolbar-height;
|
|
margin: 0px;
|
|
padding: 2px;
|
|
border-bottom: 1px solid #AAA;
|
|
@include verticalGradient($toolbar-gradient-top, $toolbar-gradient-bottom);
|
|
|
|
$idle-color-top: $nonselected-gradient-top;
|
|
$idle-color-bottom: $nonselected-gradient-bottom;
|
|
$active-color-top: $selected-gradient-top;
|
|
$active-color-bottom: $selected-gradient-bottom;
|
|
|
|
> * {
|
|
@include button;
|
|
width: 34px;
|
|
height: 34px;
|
|
float: left;
|
|
border: none;
|
|
padding: 0px 3px;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
>div.toolbar-separator {
|
|
height: 25px;
|
|
margin-top: 8px;
|
|
margin-bottom: 5px;
|
|
border-left: 1px solid #aaa;
|
|
width: 3px;
|
|
}
|
|
|
|
> div#toolbar-open {
|
|
background-image: url('images/toolbar-folder.png');
|
|
}
|
|
> div#toolbar-remove {
|
|
background-image: url('images/toolbar-close.png');
|
|
}
|
|
> div#toolbar-start {
|
|
background-image: url('images/toolbar-start.png');
|
|
}
|
|
> div#toolbar-pause {
|
|
background-image: url('images/toolbar-pause.png');
|
|
}
|
|
> div#toolbar-start-all {
|
|
background-image: url('images/toolbar-start-all.png');
|
|
}
|
|
> div#toolbar-pause-all {
|
|
background-image: url('images/toolbar-pause-all.png');
|
|
}
|
|
|
|
> div#toolbar-inspector {
|
|
background-image: url('images/toolbar-info.png');
|
|
float: right;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
> *.disabled {
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
|
|
/***
|
|
****
|
|
**** STATUSBAR
|
|
****
|
|
***/
|
|
|
|
$statusbar-gradient-top: #ddd;
|
|
$statusbar-gradient-bottom: #bbb;
|
|
$statusbar-height: 26px;
|
|
|
|
#statusbar
|
|
{
|
|
height: $statusbar-height;
|
|
width: 100%;
|
|
border-bottom: 1px solid #AAA;
|
|
overflow: hidden;
|
|
position: relative;
|
|
@include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
|
|
|
|
#filter
|
|
{
|
|
float: left;
|
|
margin-left: 5px;
|
|
|
|
input#torrent_search {
|
|
height: 18px;
|
|
width: 100px;
|
|
border-radius: 6px;
|
|
&.blur { color: #999; }
|
|
}
|
|
|
|
#filter-count { margin-left: 8px; }
|
|
}
|
|
|
|
#speed-info
|
|
{
|
|
float: right;
|
|
margin-top: 5px;
|
|
margin-right: 10px;
|
|
|
|
* {
|
|
display: inline-block;
|
|
}
|
|
|
|
#speed-up-icon {
|
|
margin-left: 8px;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: url('images/arrow-up.png') bottom no-repeat;
|
|
}
|
|
|
|
#speed-dn-icon {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: url('images/arrow-down.png') bottom no-repeat;
|
|
}
|
|
|
|
#speed-up-container, #speed-dn-container {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
/***
|
|
****
|
|
**** TORRENT CONTAINER
|
|
****
|
|
***/
|
|
|
|
$torrent-container-top: $toolbar-height + $statusbar-height + 6px;
|
|
|
|
div#torrent_container {
|
|
position: fixed;
|
|
top: $torrent-container-top;
|
|
bottom: 22px;
|
|
right: 0px;
|
|
left: 0px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
ul.torrent_list
|
|
{
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
list-style-type: none;
|
|
|
|
li.torrent
|
|
{
|
|
border-bottom: 1px solid #ccc;
|
|
padding: 4px 30px 5px 14px;
|
|
color: #666;
|
|
background-color: white;
|
|
|
|
&.compact { padding: 4px; }
|
|
&.even { background-color: #F7F7F7; }
|
|
&.selected { background-color: $selection-color; }
|
|
&.compact { div.torrent_name { color: black; } }
|
|
|
|
// start-stop button
|
|
a {
|
|
float: right;
|
|
position: relative;
|
|
right: -22px;
|
|
top: 1px;
|
|
|
|
img {
|
|
position: relative;
|
|
right: -10px;
|
|
}
|
|
|
|
div {
|
|
background: url('images/buttons/torrent_buttons.png');
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
|
|
div.torrent_pause { background-position: left top; }
|
|
div.torrent_resume { background-position: center top; }
|
|
|
|
&:active {
|
|
div.torrent_pause { background-position: left bottom; }
|
|
div.torrent_resume { background-position: center bottom; }
|
|
}
|
|
&:hover {
|
|
div.torrent_pause { background-position: left center; }
|
|
div.torrent_resume { background-position: center center; }
|
|
}
|
|
}
|
|
|
|
div.torrent_name
|
|
{
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: #222;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
|
|
&.compact { font-size: 1.0em; font-weight: normal; }
|
|
&.paused { font-weight: normal; color: #777; }
|
|
}
|
|
|
|
div.torrent_progress_details,
|
|
div.torrent_peer_details {
|
|
clear: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
div.torrent_progress_details.error,
|
|
div.torrent_peer_details.error {
|
|
color: #F00;
|
|
}
|
|
|
|
&.selected div.torrent_progress_details.error,
|
|
&.selected div.torrent_peer_details.error {
|
|
color: #FFF;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
div.torrent_progress_bar_container
|
|
{
|
|
height: 10px;
|
|
position: relative;
|
|
|
|
&.compact {
|
|
width: 50px;
|
|
position: absolute;
|
|
right: 10px;
|
|
margin-top: 2px;
|
|
/*float: right;*/
|
|
}
|
|
&.full {
|
|
margin-top: 2px;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
div.torrent_peer_details.compact
|
|
{
|
|
margin-top: 2px;
|
|
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 */
|
|
}
|
|
div.torrent_progress_bar
|
|
{
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
background-image: url('images/progress.png');
|
|
background-repeat: repeat-x;
|
|
border: 1px solid #888;
|
|
|
|
&.complete { z-index: 2; }
|
|
&.complete.paused { background-position: left -30px; border-color: #989898; }
|
|
&.complete.magnet { background-position: left -20px; border-color: #CFCFCF; }
|
|
&.complete.leeching { background-position: left 0px; border-color: #3D9DEA; }
|
|
&.complete.leeching.queued { background-position: left -70px; border-color: #889CA5; }
|
|
&.complete.seeding { background-position: left -40px; border-color: #269E30; }
|
|
&.complete.seeding.queued { background-position: left -60px; border-color: #8A998D; }
|
|
&.incomplete { z-index: 1; width: 100%; }
|
|
&.incomplete.paused { background-position: left -20px; border-color: #CFCFCF; }
|
|
&.incomplete.magnet { background-position: left -50px; border-color: #D47778; }
|
|
&.incomplete.leeching { background-position: left -20px; border-color: #CFCFCF; }
|
|
&.incomplete.leeching.queued { background-position: left -80px; border-color: #C4C4C4; }
|
|
&.incomplete.seeding { background-position: left -10px; border-color: #29AD35; }
|
|
}
|
|
}
|
|
|
|
/***
|
|
****
|
|
**** PREFERENCES
|
|
****
|
|
***/
|
|
|
|
#prefs-dialog.ui-tabs .ui-tabs-panel {
|
|
padding: 0px;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.prefs-section
|
|
{
|
|
margin: 10px;
|
|
text-align: left;
|
|
|
|
> * {
|
|
padding-top: 8px;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: larger;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.row {
|
|
.key {
|
|
float: left;
|
|
padding-top: 3px;
|
|
> * { margin-left: 0px; }
|
|
}
|
|
.value {
|
|
margin-left: 150px;
|
|
> * { width: 100%; }
|
|
}
|
|
}
|
|
|
|
.checkbox-row {
|
|
> input { margin: 0px; }
|
|
> label { margin-left: 5px; }
|
|
}
|
|
|
|
#alternative-speed-limits-title {
|
|
padding-left: 18px;
|
|
background: transparent url('images/blue-turtle.png') no-repeat;
|
|
}
|
|
|
|
#alternative-speed-limits-desc {
|
|
font-size: smaller;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
#blocklist-info {
|
|
font-size: smaller;
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
|
|
/***
|
|
****
|
|
**** TORRENT INSPECTOR
|
|
****
|
|
***/
|
|
|
|
$inspector-width: 570px;
|
|
|
|
div#torrent_inspector
|
|
{
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
text-align: left;
|
|
padding: 15px;
|
|
top: $torrent-container-top;
|
|
position: fixed;
|
|
width: $inspector-width;
|
|
z-index: 5;
|
|
border-left: 1px solid #888;
|
|
bottom: 22px;
|
|
right: 0px;
|
|
|
|
$idle-color-top: $nonselected-gradient-top;
|
|
$idle-color-bottom: $nonselected-gradient-bottom;
|
|
$active-color-top: $selected-gradient-top;
|
|
$active-color-bottom: $selected-gradient-bottom;
|
|
|
|
#inspector-close
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
#inspector-tabs-wrapper
|
|
{
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
|
|
#inspector-tabs
|
|
{
|
|
$border-radius: 5px;
|
|
|
|
display: inline-block;
|
|
|
|
> * {
|
|
@include button;
|
|
width: 30px;
|
|
height: 20px;
|
|
}
|
|
|
|
> #inspector-tab-info {
|
|
@include leftRoundedBox($border-radius);
|
|
@include buttonImage('images/inspector-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
> #inspector-tab-peers {
|
|
@include buttonImage('images/inspector-peers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
|
}
|
|
|
|
> #inspector-tab-trackers {
|
|
@include buttonImage('images/inspector-trackers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
|
}
|
|
|
|
> #inspector-tab-files {
|
|
@include rightRoundedBox($border-radius);
|
|
@include buttonImage('images/inspector-files.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
|
}
|
|
}
|
|
}
|
|
|
|
#inspector_header
|
|
{
|
|
margin-top: 8px;
|
|
|
|
#torrent_inspector_name
|
|
{
|
|
font-weight: bold;
|
|
font-size: large;
|
|
}
|
|
}
|
|
|
|
ul.tier_list
|
|
{
|
|
margin: 2px 0 8px 0;
|
|
width: 100%;
|
|
padding-left: 0px;
|
|
text-align: left;
|
|
display: block;
|
|
cursor: default;
|
|
list-style-type: none;
|
|
list-style: none;
|
|
list-style-image: none;
|
|
clear: both;
|
|
|
|
li {
|
|
overflow: hidden;
|
|
}
|
|
.tracker_activity {
|
|
float: left;
|
|
color: #666;
|
|
width: 330px;
|
|
display: table;
|
|
margin-top: 1px;
|
|
}
|
|
.tracker_activity div {
|
|
padding: 2px;
|
|
}
|
|
table {
|
|
float: right;
|
|
color: #666;
|
|
}
|
|
th {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
li.inspector_tracker_entry {
|
|
padding: 3px 0 3px 2px;
|
|
display: block;
|
|
|
|
&.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;
|
|
}
|
|
|
|
#inspector_file_list {
|
|
width: 100%;
|
|
margin: 6px 0 0 0;
|
|
padding-top: 6px;
|
|
padding-bottom: 10px;
|
|
text-align: left;
|
|
display: block;
|
|
cursor: default;
|
|
list-style-type: none;
|
|
list-style: none;
|
|
list-style-image: none;
|
|
clear: both;
|
|
}
|
|
li.inspector_torrent_file_list_entry {
|
|
padding: 3px 0 3px 2px;
|
|
display: block;
|
|
&.skip { color: #666; }
|
|
&.even { background-color: #F7F7F7; }
|
|
}
|
|
|
|
div.inspector_torrent_file_list_entry_name {
|
|
font-size: 1.2em;
|
|
color: black;
|
|
display: inline;
|
|
margin-left: 0px;
|
|
}
|
|
li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
|
|
color: #999;
|
|
}
|
|
div.inspector_torrent_file_list_entry_progress {
|
|
color: #999;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
ul.single_file li.inspector_torrent_file_list_entry>.file_wanted_control,
|
|
li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
/* Peers Inspector Tab */
|
|
#inspector_peers_list {
|
|
padding: 0 0 0 0;
|
|
margin: 0 0 0 0;
|
|
text-align: left;
|
|
cursor: default;
|
|
overflow: hidden;
|
|
|
|
> div.inspector_group {
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
table.peer_list {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: left;
|
|
cursor: default;
|
|
clear: both;
|
|
table-layout: fixed;
|
|
|
|
.encryptedCol { width: 16px; }
|
|
.upCol { width: 70px; }
|
|
.downCol { width: 70px; }
|
|
.percentCol { width: 30px; padding-right: 5px; text-align: right; }
|
|
.statusCol { width: 40px; padding-right: 5px; }
|
|
.addressCol { width: 180px; }
|
|
.clientCol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
}
|
|
|
|
tr.inspector_peer_entry
|
|
{
|
|
div.encrypted-peer-cell
|
|
{
|
|
width: 16px;
|
|
height: 16px;
|
|
background: transparent url('images/lock_icon.png') no-repeat;
|
|
}
|
|
|
|
&.odd
|
|
{
|
|
background-color: #EEEEEE;
|
|
}
|
|
}
|
|
|
|
/***
|
|
**** File Priority Buttons
|
|
***/
|
|
|
|
div.file-priority-radiobox
|
|
{
|
|
$border-radius: 5px;
|
|
|
|
display: inline;
|
|
float: right;
|
|
margin: 4px;
|
|
margin-top: 2px;
|
|
|
|
> * {
|
|
@include button;
|
|
width: 20px;
|
|
height: 12px;
|
|
}
|
|
|
|
// We have row after row of these buttons, so the flashy colors used in the inspector tabs look harsh here.
|
|
// Keep the same basic color theme, but look less harsh, by cutting the gradient's color range.
|
|
$idle-color-top: mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 80% );
|
|
$idle-color-bottom: mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 20% );
|
|
$active-color-top: mix( $selected-gradient-top, $selected-gradient-bottom, 80% );
|
|
$active-color-bottom: mix( $selected-gradient-top, $selected-gradient-bottom, 20% );
|
|
|
|
> div.low {
|
|
@include leftRoundedBox($border-radius);
|
|
@include buttonImage('images/file-priority-low.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
|
border-right-width: 0px;
|
|
}
|
|
|
|
> div.normal {
|
|
@include buttonImage('images/file-priority-normal.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
|
}
|
|
|
|
> div.high {
|
|
@include rightRoundedBox($border-radius);
|
|
@include buttonImage('images/file-priority-high.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
|
border-left-width: 0px;
|
|
}
|
|
}
|
|
|
|
|
|
/****
|
|
*****
|
|
***** MAIN WINDOW FOOTER
|
|
*****
|
|
****/
|
|
|
|
div.torrent_footer
|
|
{
|
|
height: 22px;
|
|
border-top: 1px solid #555;
|
|
bottom: 0;
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 3;
|
|
|
|
@include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
|
|
|
|
> div {
|
|
float: left;
|
|
margin: 2px 4px;
|
|
width: 18px;
|
|
height: 12px;
|
|
padding: 2px 8px;
|
|
float: left;
|
|
border: 1px solid #888;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
$idle-color-top: $nonselected-gradient-top;
|
|
$idle-color-bottom: $nonselected-gradient-bottom;
|
|
$active-color-top: $selected-gradient-top;
|
|
$active-color-bottom: $selected-gradient-bottom;
|
|
|
|
#settings_menu {
|
|
@include roundedBox(5px);
|
|
@include buttonImage('images/settings.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
|
}
|
|
|
|
#prefs-button {
|
|
@include roundedBox(5px);
|
|
@include buttonImage('images/wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
|
}
|
|
|
|
#turtle-button {
|
|
@include roundedBox(5px);
|
|
@include buttonImage('images/turtle.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
|
&:active, &.selected {
|
|
@include imageOnVerticalGradient('images/blue-turtle.png', $active-color-top, $active-color-bottom);
|
|
}
|
|
}
|
|
|
|
#compact-button {
|
|
@include roundedBox(5px);
|
|
@include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
|
}
|
|
|
|
#freespace-info {
|
|
float: right;
|
|
text-align: right;
|
|
border: 0px;
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
/****
|
|
*****
|
|
***** DIALOGS
|
|
*****
|
|
****/
|
|
|
|
div.dialog_container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0px;
|
|
margin: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
color: black;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
div.dialog_container div.dialog_window {
|
|
background-color: #eee;
|
|
margin: 0 auto;
|
|
opacity: .95;
|
|
border-top: none;
|
|
text-align: left;
|
|
width: 420px;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
position: relative;
|
|
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.7);
|
|
top: 80px;
|
|
}
|
|
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
|
div.dialog_container div.dialog_window {
|
|
top: 0;
|
|
margin-top: 71px;
|
|
}
|
|
}
|
|
|
|
div.dialog_container .dialog_logo {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 20px 20px 0 20px;
|
|
float: left;
|
|
background: transparent url('images/logo.png') top left no-repeat;
|
|
}
|
|
|
|
div.dialog_container div.dialog_window h2.dialog_heading {
|
|
display: block;
|
|
float: left;
|
|
width: 305px;
|
|
font-size: 1.2em;
|
|
color: black;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
div.dialog_container div.dialog_window div.dialog_message {
|
|
float: left;
|
|
padding-left: 3px;
|
|
margin-left: -3px;
|
|
width: 305px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
div.dialog_container div.dialog_window a {
|
|
display: block;
|
|
float: right;
|
|
margin: 10px 20px 10px -8px;
|
|
padding: 5px;
|
|
background-color: #EEE;
|
|
border: 1px solid #787878;
|
|
width: 50px;
|
|
height: 15px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
color: #323232;
|
|
-webkit-appearance: button;
|
|
font: -webkit-control;
|
|
cursor: default;
|
|
}
|
|
|
|
div.dialog_container div.dialog_window a:hover,
|
|
div.dialog_container div.dialog_window a:active {
|
|
background: #C0C8D6 url('images/filter_bar.png') bottom repeat-x;
|
|
}
|
|
|
|
div#upload_container div.dialog_window div.dialog_message label {
|
|
margin-top: 15px;
|
|
display: block;
|
|
}
|
|
|
|
div#upload_container div.dialog_window div.dialog_message input {
|
|
width: 249px;
|
|
margin: 3px 0 0 0;
|
|
display: block;
|
|
}
|
|
|
|
div#upload_container div.dialog_window div.dialog_message input[type=text] {
|
|
width: 245px;
|
|
padding: 2px;
|
|
}
|
|
|
|
div#upload_container div.dialog_window div.dialog_message input[type=checkbox] {
|
|
margin: 15px 3px 0 0;
|
|
display: inline;
|
|
width: auto;
|
|
}
|
|
|
|
div#upload_container div.dialog_window div.dialog_message #auto_start_label {
|
|
display: inline;
|
|
}
|
|
|
|
div.dialog_container div.dialog_window form {
|
|
margin: 0;
|
|
padding: 0px;
|
|
}
|
|
|
|
div#move_container input#torrent_path {
|
|
width: 286px;
|
|
padding: 2px;
|
|
}
|
|
|
|
|
|
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;
|
|
}
|
|
|
|
/****
|
|
*****
|
|
***** POPUP MENU
|
|
*****
|
|
****/
|
|
|
|
.ui-menu-item {
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#torrent_context_menu,
|
|
#footer_super_menu {
|
|
font-size: 1em;
|
|
z-index: 3;
|
|
}
|