mirror of
https://github.com/transmission/transmission
synced 2025-02-20 21:26:53 +00:00
(trunk web) #4601 -- move preferences button to the left-hand side of the footer
This commit is contained in:
Jordan Lee
parent
3412d5d932
commit
c76af3f52e
6 changed files with 2779 additions and 518 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -75,7 +75,6 @@ $selected-gradient-bottom: white;
|
|||
|
||||
html {
|
||||
margin: 0;
|
||||
/* setting border: 0 hoses ie6 win window inner well border */
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -87,19 +86,8 @@ body {
|
|||
text-align: center;
|
||||
margin: 0 0 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
a {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#statusbar,
|
||||
.torrent_footer {
|
||||
background: #CCC;
|
||||
img { border: none; }
|
||||
a { outline: 0; }
|
||||
}
|
||||
|
||||
/***
|
||||
|
|
@ -341,6 +329,7 @@ $statusbar-gradient-bottom: #bbb;
|
|||
***/
|
||||
|
||||
$torrent-container-top: 65px;
|
||||
$torrent-list-button-width: 14px;
|
||||
|
||||
div#torrent_container {
|
||||
position: fixed;
|
||||
|
|
@ -364,18 +353,44 @@ ul.torrent_list
|
|||
li.torrent
|
||||
{
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 4px 30px 5px 10px; /* Make space for buttons on the right */
|
||||
padding: 4px 30px 5px $torrent-list-button-width;
|
||||
color: #666;
|
||||
background-color: white;
|
||||
|
||||
&.compact { padding: 4px; }
|
||||
&.even { background-color: #F7F7F7; }
|
||||
&.selected { background-color: #FDD; }
|
||||
&.selected { background-color: #ffe4e1; }
|
||||
&.compact { div.torrent_name { color: black; } }
|
||||
|
||||
a img {
|
||||
// start-stop button
|
||||
a {
|
||||
float: right;
|
||||
position: relative;
|
||||
right: -10px;
|
||||
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
|
||||
|
|
@ -411,26 +426,21 @@ ul.torrent_list
|
|||
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.
|
||||
*/
|
||||
|
||||
ul.torrent_list
|
||||
{
|
||||
/**
|
||||
* 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;
|
||||
|
|
@ -480,36 +490,6 @@ ul.torrent_list
|
|||
}
|
||||
}
|
||||
|
||||
/****
|
||||
***** START / STOP BUTTON
|
||||
****/
|
||||
|
||||
li.torrent a
|
||||
{
|
||||
float: right;
|
||||
position: relative;
|
||||
right: -22px;
|
||||
top: 1px;
|
||||
|
||||
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; }
|
||||
}
|
||||
}
|
||||
|
||||
/***
|
||||
****
|
||||
**** PREFERENCES
|
||||
|
|
@ -570,16 +550,16 @@ $inspector-width: 570px;
|
|||
|
||||
div#torrent_inspector
|
||||
{
|
||||
padding: 15px;
|
||||
position: fixed;
|
||||
top: $torrent-container-top;
|
||||
bottom: 22px;
|
||||
right: 0px;
|
||||
width: $inspector-width;
|
||||
border-left: 1px solid #888;
|
||||
z-index: 5;
|
||||
overflow: auto;
|
||||
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;
|
||||
|
||||
#inspector-close
|
||||
{
|
||||
|
|
@ -904,7 +884,7 @@ div.torrent_footer
|
|||
|
||||
@include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);
|
||||
|
||||
> * {
|
||||
> * {
|
||||
float: left;
|
||||
margin: 2px 4px;
|
||||
width: 18px;
|
||||
|
|
@ -928,8 +908,7 @@ div.torrent_footer
|
|||
|
||||
#prefs-button {
|
||||
@include roundedBox(5px);
|
||||
@include buttonImage('images/toolbar-wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
||||
float: right;
|
||||
@include buttonImage('images/wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
||||
}
|
||||
|
||||
#turtle-button {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,6 @@ dist_data_DATA = \
|
|||
toolbar-pause.png \
|
||||
toolbar-pointer.png \
|
||||
toolbar-start.png \
|
||||
toolbar-wrench.png \
|
||||
turtle.png
|
||||
turtle.png \
|
||||
wrench.png
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 378 B After Width: | Height: | Size: 378 B |
File diff suppressed because it is too large
Load diff
|
|
@ -75,7 +75,6 @@ $selected-gradient-bottom: white;
|
|||
|
||||
html {
|
||||
margin: 0;
|
||||
/* setting border: 0 hoses ie6 win window inner well border */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -87,6 +86,8 @@ body {
|
|||
padding: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
img { border: none; }
|
||||
a { outline: 0; }
|
||||
-webkit-text-size-adjust: none;
|
||||
|
||||
div#torrent_container { min-height: 328px; }
|
||||
|
|
@ -104,10 +105,6 @@ body.open_showing #torrent_filter_bar, body.open_showing #torrent_container {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.torrent a img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/***
|
||||
****
|
||||
**** TOOLBAR
|
||||
|
|
@ -313,6 +310,8 @@ $statusbar-gradient-bottom: #bbb;
|
|||
****
|
||||
***/
|
||||
|
||||
$torrent-list-button-width: 0px;
|
||||
|
||||
ul.torrent_list
|
||||
{
|
||||
width: 100%;
|
||||
|
|
@ -324,15 +323,20 @@ ul.torrent_list
|
|||
li.torrent
|
||||
{
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 4px 10px;
|
||||
padding: 4px 30px 5px $torrent-list-button-width;
|
||||
color: #666;
|
||||
background-color: white;
|
||||
|
||||
&.compact { padding: 4px; }
|
||||
&.even { background-color: #F7F7F7; }
|
||||
&.selected { background-color: #FDD; }
|
||||
&.selected { background-color: #ffe4e1; }
|
||||
&.compact { div.torrent_name { color: black; } }
|
||||
|
||||
// start-stop button
|
||||
a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.torrent_name
|
||||
{
|
||||
font-size: 1.3em;
|
||||
|
|
@ -366,26 +370,21 @@ ul.torrent_list
|
|||
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.
|
||||
*/
|
||||
|
||||
ul.torrent_list
|
||||
{
|
||||
/**
|
||||
* 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;
|
||||
|
|
@ -435,7 +434,6 @@ ul.torrent_list
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/***
|
||||
****
|
||||
**** PREFERENCES
|
||||
|
|
@ -494,13 +492,13 @@ ul.torrent_list
|
|||
|
||||
div#torrent_inspector
|
||||
{
|
||||
top: 0 !important;
|
||||
position: relative;
|
||||
right: 0px;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
padding: 15px;
|
||||
top: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
|
||||
#inspector-tabs-wrapper
|
||||
|
|
@ -845,8 +843,7 @@ div.torrent_footer
|
|||
|
||||
#prefs-button {
|
||||
@include roundedBox(5px);
|
||||
@include buttonImage('images/toolbar-wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
||||
float: right;
|
||||
@include buttonImage('images/wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
|
||||
}
|
||||
|
||||
#turtle-button {
|
||||
|
|
@ -925,13 +922,7 @@ div.dialog_container a {
|
|||
}
|
||||
|
||||
|
||||
/*--------------------------------------
|
||||
*
|
||||
* Hide remnants of stuff we don't need, like
|
||||
* transmenu and contextmenu.
|
||||
*
|
||||
*--------------------------------------*/
|
||||
|
||||
// no context menu in the mobile version...
|
||||
div#torrent_context_menu {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue