From 94d12defa89d1f7373047fd79f505f55b141656f Mon Sep 17 00:00:00 2001 From: Jordan Lee Date: Wed, 26 Oct 2011 23:28:39 +0000 Subject: [PATCH] (trunk web) some (very) experimental changes to the color scheme. I'm not sure what the Right Thing is here, but I do know the previous approach was too grey. --- web/style/transmission/common.css | 8 ++++---- web/style/transmission/common.scss | 18 ++++++++++-------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/web/style/transmission/common.css b/web/style/transmission/common.css index f16ada6a9..df47121fd 100644 --- a/web/style/transmission/common.css +++ b/web/style/transmission/common.css @@ -23,7 +23,7 @@ a { outline: 0; } **** TOOLBAR **** ***/ -div#toolbar { width: 100%; height: 25px; margin: 0px; padding: 2px; border-bottom: 1px solid #AAA; background: #CCC; } +div#toolbar { width: 100%; height: 25px; margin: 0px; padding: 2px; background: #C00; } div#toolbar > * { cursor: pointer; -moz-user-select: none; -webkit-user-select: none; display: inline-block; border-style: solid; border-color: #aaa; border-width: 1px; padding: 3px; width: 18px; height: 18px; padding: 2px 8px; float: left; border: 1px solid #888; } div#toolbar div#toolbar-open { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-folder.png"); /* fallback */ background-image: url("images/toolbar-folder.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-folder.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-folder.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-folder.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-folder.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; margin-left: 4px; } div#toolbar div#toolbar-open:active, div#toolbar div#toolbar-open:hover, div#toolbar div#toolbar-open.selected { background-color: #7dc9f2; background-image: url("images/toolbar-folder.png"); /* fallback */ background-image: url("images/toolbar-folder.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-folder.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-folder.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-folder.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-folder.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-folder.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; } @@ -46,7 +46,7 @@ div#toolbar > *.disabled { opacity: 0.25; } **** STATUSBAR **** ***/ -#statusbar { height: 24px; width: 100%; border-bottom: 1px solid #AAA; overflow: hidden; position: relative; } +#statusbar { height: 24px; width: 100%; overflow: hidden; position: relative; background-color: #C00; color: white; } #statusbar #speed-info { margin-top: 5px; margin-left: 45%; text-align: left; } #statusbar #speed-info * { display: inline-block; } #statusbar #speed-info #speed-up-icon { margin-left: 8px; width: 8px; height: 8px; background: url("images/arrow-up.png") bottom no-repeat; } @@ -90,8 +90,8 @@ ul.torrent_list { width: 100%; margin: 0; padding: 0; text-align: left; cursor: ul.torrent_list li.torrent { border-bottom: 1px solid #ccc; padding: 4px 30px 5px 10px; /* Make space for buttons on the right */ color: #666; background-color: white; } ul.torrent_list li.torrent.compact { padding: 4px; } ul.torrent_list li.torrent.even { background-color: #F7F7F7; } -ul.torrent_list li.torrent.selected { color: white; background-color: #3879D7; } -ul.torrent_list li.torrent.selected div.torrent_progress_details.error, ul.torrent_list li.torrent.selected div.torrent_peer_details.error, ul.torrent_list li.torrent.selected div.torrent_name { color: #FFF; } +ul.torrent_list li.torrent.selected { background-color: #b20000; background-image: -webkit-gradient(linear, left top, left bottom, from(#cc0000), to(#990000)); background-image: -webkit-linear-gradient(top, #cc0000, #990000); background-image: -moz-linear-gradient(top, #cc0000, #990000); background-image: -ms-linear-gradient(top, #cc0000, #990000); background-image: -o-linear-gradient(top, #cc0000, #990000); background-image: linear-gradient(top, #cc0000, #990000); } +ul.torrent_list li.torrent.selected div.torrent_progress_details, ul.torrent_list li.torrent.selected div.torrent_peer_details, ul.torrent_list li.torrent.selected div.torrent_name { color: white; } ul.torrent_list li.torrent.selected.compact div.torrent_name { color: white; } ul.torrent_list li.torrent a img { position: relative; right: -10px; } ul.torrent_list li.torrent 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; } diff --git a/web/style/transmission/common.scss b/web/style/transmission/common.scss index 13c8034d4..7f21f4f1c 100644 --- a/web/style/transmission/common.scss +++ b/web/style/transmission/common.scss @@ -140,8 +140,9 @@ div#toolbar height: 25px; margin: 0px; padding: 2px; - border-bottom: 1px solid #AAA; - background: #CCC; + //border-bottom: 1px solid black; + background: #C00; // TESTING + //background: #CCC; $idle-color-top: $nonselected-gradient-color-top; $idle-color-bottom: $nonselected-gradient-color-bottom; @@ -210,9 +211,11 @@ div#toolbar { height: 24px; width: 100%; - border-bottom: 1px solid #AAA; + //border-bottom: 1px solid #AAA; TESTING overflow: hidden; position: relative; + background-color: #C00; + color: white; #speed-info { @@ -384,12 +387,11 @@ ul.torrent_list &.even { background-color: #F7F7F7; } &.selected { - color: white; - background-color: #3879D7; + @include verticalGradient(#C00, #900); - div.torrent_progress_details.error, - div.torrent_peer_details.error, - div.torrent_name { color: #FFF; } + div.torrent_progress_details, + div.torrent_peer_details, + div.torrent_name { color: white; } &.compact { div.torrent_name { color: white; } } } -- 2.40.0