Commit 37772471 authored by diesys's avatar diesys 🎈

fully working new interface, something still to be fixed soon

parent 7ef043ac
......@@ -14,9 +14,9 @@
sodipodi:docname="favicon.svg"
width="16"
height="16"
inkscape:export-filename="/home/lip/grafica/transmission/web/images/favicon.ico"
inkscape:export-xdpi="112.5"
inkscape:export-ydpi="112.5">
inkscape:export-filename="/home/lip/grafica/transmission-soft-theme/web/images/logo-soft.png"
inkscape:export-xdpi="1125"
inkscape:export-ydpi="1125">
<metadata
id="metadata67">
<rdf:RDF>
......@@ -25,7 +25,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
......@@ -42,9 +42,9 @@
inkscape:window-height="713"
id="namedview65"
showgrid="false"
inkscape:zoom="14.753151"
inkscape:cx="11.097144"
inkscape:cy="-1.8348051"
inkscape:zoom="33.13696"
inkscape:cx="7.06841"
inkscape:cy="7.8220855"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
......
......@@ -6,11 +6,12 @@ body {
div#toolbar {
width: 100%;
height: auto;
height: 36px;
margin: 0 0;
padding: 10px;
position: fixed;
background-color: #c91e27;
background-image: none;
z-index: 10001;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
......@@ -59,24 +60,34 @@ div#toolbar > div#toolbar-inspector {
right: 15px;
}
div.file-priority-radiobox > * {
border-radius: 0;
border-color: #ddd;
}
/* STATUSBAR */
#statusbar {
top: 58px;
/*overflow: hidden;*/
height: 45px;
position: fixed;
background-color: #eee;
background-image: none;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
z-index: 10;
box-shadow: 0 2px 30px -5px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 25px -5px rgba(0, 0, 0, 0.3);
font-size: 1.2em;
color: #444;
text-align: left;
border: none;
}
#statusbar #filter {
left: 0px;
position: relative;
display: inline-block;
top: 7px;
padding: 5px;
}
......@@ -84,8 +95,10 @@ div#toolbar > div#toolbar-inspector {
border-radius: 3px;
border: none;
color: #444;
margin: 10px;
padding: 7px;
height: auto;
width: auto;
/*margin: 2px;*/
padding: 4px;
}
#statusbar #filter #filter-count {
......@@ -96,8 +109,8 @@ div#toolbar > div#toolbar-inspector {
#statusbar #speed-info {
position: relative;
height: 40px;
padding: 10px;
top: 8px;
padding: 5px;
top: 0px;
right: 20px;
}
......@@ -131,8 +144,12 @@ div#toolbar > div#toolbar-inspector {
border: none;
}*/
#statusbar #filter {
padding: 2px;
}
#statusbar #filter input#torrent_search, #statusbar select {
box-shadow: 0 2px 6px -3px rgba(0,0,0,.3);
box-shadow: 0 2px 7px -3px rgba(0,0,0,.3);
background: #fff;
transition: box-shadow .3s;
}
......@@ -211,25 +228,26 @@ ul.torrent_list div.torrent_progress_bar.incomplete.seeding {
/* TORRENT INSPECTOR */
/*div#torrent_inspector {
@keyframes slidein {
0% {transform: translateX(5%); opacity: .8;}
100% {transform: translateX(0); opacity: 1;}
}
div#torrent_inspector {
margin: 0;
padding-top: 20px;
background: #fff;
top: 50px;
position: relative;
width: 100%;
height: 100%;
z-index: 50;
animation: appear .3s;
animation: slidein .5s;
padding: 20px;
font-size: 1.2em;
overflow: hidden;
}*/
border-left: none;
box-shadow: 1px 0 8px rgba(0,0,0,.6);
}
/*div#torrent_inspector #inspector-tabs-wrapper {
div#torrent_inspector #inspector-tabs-wrapper {
text-align: center;
margin: 30px 5px 50px 20px;
}*/
}
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > * {
border: none;
......@@ -239,31 +257,65 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > * {
transition: all .1s;
}
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > *:hover, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > *:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > *.selected {
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers {
border-radius: 0;
background-image: none;
background-color: transparent;
transition: all .2s;
}
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > *:hover,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > *:active,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs.selected {
border-width: 3px;
transition: all .1s;
}
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info {
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info:active,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info.selected {
background-image: url("images/soft-light-theme/inspector-info.png");
background-color: transparent;
}
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers {
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers:active,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers.selected {
background-image: url("images/soft-light-theme/inspector-trackers.png");
background-color: transparent;
}
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files {
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files:active,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files.selected {
background-image: url("images/soft-light-theme/inspector-files.png");
background-color: transparent;
}
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers:active,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers.selected {
background-image: url("images/soft-light-theme/inspector-peers.png");
background-color: transparent;
}
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > *:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > .selected {
background-image: none;
background-color: transparent;
border-radius: 0;
}
/* FOOTER */
div.torrent_footer {
height: auto;
font-size: 1.2em;
border-top: 1px solid #ccc;
overflow: hidden;
position: fixed;
background-color: #eee;
background-image: none;
padding: 5px;
z-index: 10;
}
......@@ -273,6 +325,7 @@ div.torrent_footer > div {
width: 18px;
height: 10px;
padding: 5px;
background: green;
border: 1px solid #ccc;
-webkit-user-select: none;
border-radius: 3px;
......@@ -281,6 +334,17 @@ div.torrent_footer > div {
transition: all .3s;
}
div.torrent_footer > *:active,
div.torrent_footer.selected {
background-color: green;
}
@media screen and (min-device-width: 481px) {
div.torrent_footer > div {
border-radius: 3px;
}
}
div.torrent_footer #settings_menu {
background-image: url("images/settings.png");}
div.torrent_footer #prefs-button {
......@@ -302,7 +366,11 @@ div.torrent_footer > *:active {
transform: translateY(1px);
}
/* DIALOGS */
#torrent_context_menu, #footer_super_menu, #footer_download_rate_menu, #footer_upload_rate_menu, #footer_sort_menu {
box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* DIALOGS and WIDGETS */
@keyframes appear {
0% {opacity: 0; left: 25%; transform: scaleY(.1);}
......@@ -329,6 +397,94 @@ div.dialog_container div.dialog_window {
animation: appear .5s cubic-bezier(.47,0,.5,1.2);
}
.ui-dialog, .ui-widget {
box-shadow: 0 3px 50px -10px rgba(0, 0, 0, 0.5);
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-radius: 0px;
cursor: default;
font-size: 1.1em;
border: none;
}
#prefs-dialog {
box-shadow: none;
}
.ui-dialog, .ui-dialog-content .ui-widget {
margin: 5px;
padding: 15px;
padding-top: 5px;
}
.ui-widget-header {
background: none;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
padding: 5px;
border-radius: 3px;
border: 1px solid #eee;
margin: 3px;
}
.ui-tabs .ui-tabs-nav {
padding: 5px;
padding-right: 0;
border-radius: 0;
border: none;
margin-left: 20px;
margin-top: 5px;
margin-right: 0px;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
color: #333;
background: none;
}
.ui-tabs .ui-tabs-nav li {
border-bottom: 3px solid transparent;
font-weight: normal;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
border-bottom: 3px solid #c91e27;
font-weight: bold;
}
.ui-menu-icons .ui-menu-item {
padding: 10px;
}
.ui-menu-icons .ui-menu-item li {
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-menu-icons .ui-menu-item .ui-state-active {
background: #ddd;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: none;
border-radius: 0;
}
span .ui-button-icon-primary .ui-icon .ui-icon-closethick {
margin: 0;
padding: 0;
transition: all .3s;
}
.ui-widget-content {
background: #fff;
margin-top: 0px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
color: #fff;
}
/* */
@media screen and (-webkit-min-device-pixel-ratio:0) {
......@@ -404,3 +560,19 @@ div#move_container input#torrent_path {
iframe#torrent_upload_frame {
margin: 0;
}
/* TORRENT CONTAINER and TORRENT LIST */
div#torrent_container {
top:110px;
}
ul.torrent_list li.torrent.compact {
font-size: 1.2em;
padding-left: 10px;
}
@media screen and (min-device-width: 481px) {
ul.torrent_list li.torrent {
border-bottom: 1px solid #e5e5e5;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment