Edited StyleSheets

This commit is contained in:
Rasmus Eeg
2012-03-08 14:02:07 +01:00
parent 68544e7de2
commit b222e5b76a
5 changed files with 38 additions and 53 deletions

View File

@@ -1,34 +1,5 @@
#![preview thumb](https://github.com/rembo10/headphones/raw/master/data/images/headphoneslogo.png)Headphones
###Installation and Notes
This is a pretty early release of a third-party add-on for SABnzbd.
To run it, just double-click the Headphones.py file (in Windows - you may need to right click and click 'Open With' -> Python) or launch a terminal, cd into the Headphones directory and run 'python headphones.py'.
For additional startup options, type 'python Headphones.py -h' or 'python Headphones.py --help'
###About
I created this, in order to completely redeign the user-interface of the current Headphones by rembo10.
###Screenshots
(note: These screenshots are a little out of date and the interface has gone through a little bit of an overhaul. Updated shots coming soon!)
First Run
![preview thumb](http://img806.imageshack.us/img806/4202/headphones2.png)
Artist Search Results
![preview thumb](http://img12.imageshack.us/img12/7838/headphones4.png)
Album Selection
![preview thumb](http://img836.imageshack.us/img836/2880/headphones3.png)
iTunes/Import
![preview thumb](http://img62.imageshack.us/img62/1218/headphones1.png)
If you run into any issues, visit http://github.com/rembo10/headphones and report an issue.
This is free software so feel free to use it/modify it as you wish.
If you have any ideas for the next release, also make sure to post that here!
Comming soon!

View File

@@ -4,7 +4,6 @@
-moz-border-radius: 5px;
width: 100%;
margin: 0px auto 0 auto;
padding: 0px;
background-color: #313131;
min-height: 155px;
clear: both;
@@ -243,10 +242,11 @@ table.display tr.even.gradeZ {
}
.dataTables_empty {
color: #575757;
font-size: 24px;
text-align: center;
vertical-align: middle;
background-color: white;
background-color: #343434;
height: 50px;
width: 90%;
}

View File

@@ -84,10 +84,18 @@ h1, h2, h3, h4, h5, h6 { font-weight: bold; }
* Univarsal
* */
.clear{
clear:both;
}
*:focus{
outline: none;
}
/*
* Links Styles
* */
a:link {
color: #fff;
text-shadow: 1px 1px 2px #000;
@@ -114,9 +122,9 @@ a.blue {
#container { width: 960px; margin: auto; }
body { background-color: #000; min-width: 935px; color: #c2c2c2; }
body { background-color: #000; width: 100%; height: 100%; color: #c2c2c2; }
header { min-height: 70px; width: 100%; min-width: 935px; padding-left: 0px; padding-right: 10px; background: url(../images/menu-background.png) #000; position: fixed; top: 0px; left: 0px; z-index: 998; }
table.display thead tr th { background: url(../images/table-header.png); }
@@ -129,15 +137,18 @@ p.indented { padding-top: 20px; margin-left: 20px; font-size: 14px; }
p.center { text-align: center; font-size: 18px; }
.smalltext2 { font-size: 12px; margin-left: 45px; }
div#updatebar { text-align: center; min-width: 970px; width: 100%; background-color: light-blue; float: left; }
div#logo { float: left; padding-left: 10px; }
header { width: 100%; height: 60px; background: #313131; position: fixed; top: 0px; left: 0px; z-index: 998; background: url(../images/header.png); }
ul#nav { margin: 25px 0 0 0; float: left; list-style-type: none; }
ul#nav li { margin: 40px 0px auto 10px; display: inline; }
ul#nav li a { padding: 5px; font-size: 16px; font-weight: bold; color: #ac0000; text-decoration: none; }
ul#nav li a:hover { background-color: #ac0000; border-radius: 5px; color: #fff; }
div#updatebar { text-align: center; width: 300px; min-height: 200px; position: absolute; top: 300px; left: 100%; margin: auto; background-color: rgba(0,0,0,0.8); }
div#logo { padding-left: 10px; }
div#subhead_container { height: 30px; width:100%; min-width: 1000px; background-color:#ac0000; float: left; list-style-type: none; z-index: 998; overflow: hidden; }
ul#nav { position: absolute; top: 60px; left: 0px; list-style-type: none; height: 100%; width: 200px; padding: 0; margin: 0; background-color: #313131; padding-top: 30px; }
ul#nav li { display: block; width: 100%; padding: 0; margin: 0;}
ul#nav li:hover { display: block; width: 100%; background: #ac0000 url(../images/nav-hover.png); }
ul#nav li a { padding: 5px; font-size: 12px; color: #FFF; text-decoration: none; width: 100%; }
ul#nav li a:hover { color: #fff; width: 100%;}
div#subhead_container { height: 30px; width:100%; position: absolute; top: 60px; left: 160px; background-color:#ac0000; list-style-type: none; z-index: 998; overflow: hidden; }
ul#subhead_menu { margin-top: 5px; }
ul#subhead_menu li { width: 100%; height: 100%; display: inline; }
ul#subhead_menu li a { padding: 5px 15px 10px 15px; vertical-align: middle; color: white; font-size: 16px; text-decoration: none; }
@@ -147,7 +158,7 @@ ul#subhead_menu li a:hover { width: 100%; height: 100%; background-color: #grey;
* Searchbar Styles
* */
div#searchbar { margin: 24px 30px auto auto; float: right; background-color: #fff; border-radius: 20px; border: 1px solid #909090 }
div#searchbar { margin: 24px 30px auto auto; position: absolute; top: 0px; right: 0px; z-index: 1000; background-color: #fff; border-radius: 20px; border: 1px solid #909090 }
div#searchbar input[type=text] { background-color: #fff; border-radius: 20px 0px 0px 20px; padding: 2px 10px 2px 10px; border: 0; border-right: 1px solid #909090 }
div#searchbar input[type=submit] { background-color: #fff; border-radius: 0px 20px 20px 0px; padding: 2px 10px 2px 10px; border: 0; border-left: 1px solid #909090 }
div#searchbar input[type=submit]:hover { background-color: #ac0000; color: #FFF; text-shadow: 1px 1px 3px #000; }
@@ -155,7 +166,7 @@ div#searchbar select { background-color: #fff; border-radius: 20px; padding: 2px
div#main { margin: 0; padding: 80px 0 0 0; }
div#main { margin-top: 100px; padding: 0 0 0 0; }
.table_wrapper { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; width: 100%; margin: 10px auto 0 auto; padding: 25px; background-color: #313131; position: relative; min-height: 200px; clear: both; _height: 302px; zoom: 1; }
.manage_wrapper { width: 88%; margin: 20px auto 0 auto; padding: 25px; min-height: 150px; clear: both; _height: 302px; zoom: 1; }
@@ -220,7 +231,7 @@ table#track_table td#name { vertical-align: middle; text-align: center; font-siz
table#track_table td#duration { vertical-align: middle; text-align: center; }
table#track_table td#location { vertical-align: middle; text-align: center; font-size: 11px; }
table#track_table td#bitrate { vertical-align: middle; text-align: center; font-size: 12px; }
div#history_table_wrapper { padding: 20px; }
table#history_table { background-color: white; width: 100%; font-size: 13px; }
table#history_table td#dateadded { vertical-align: middle; text-align: center; min-width: 150px; font-size: 14px; }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

View File

@@ -27,8 +27,7 @@
</head>
<body>
<div id="container">
<header>
% if not headphones.CURRENT_VERSION:
% if not headphones.CURRENT_VERSION:
<div id="updatebar">
You're running an unknown version of Headphones. <a class="blue" href="update">Click here to update</a>
</div>
@@ -37,10 +36,14 @@
A <a class="blue" href="http://github.com/rembo10/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}"> newer version</a> is available. You're ${headphones.COMMITS_BEHIND} commits behind. <a class="blue" href="update">Click here to update</a>
</div>
% endif
<header>
<div id="logo">
<a href="home"><img src="images/headphoneslogo.png" alt="headphones"></a>
</div>
<ul id="nav">
<div class="clear" />
</header>
<ul id="nav">
<li><a href="home">home</a></li>
<li><a href="upcoming">upcoming</a></li>
<li><a href="extras">extras</a></li>
@@ -49,7 +52,9 @@
<li><a href="logs">logs</a></li>
<li><a href="config">settings</a></li>
</ul>
<div id="searchbar">
<div id="subhead">
${next.headerIncludes()}
<div id="searchbar">
<form action="search" method="get">
<input type="text" value="" onfocus="if(this.value==this.defaultValue) this.value='';" name="name" />
<select name="type">
@@ -59,13 +64,11 @@
<input type="submit" value="Add"/>
</form>
</div>
<div id="subhead">
${next.headerIncludes()}
</div>
</header>
<div id="main" class="main">
${next.body()}
<div class="clear" />
</div>
<footer>