Merge db2cc5f416 into 5c597f2d5f

css/screen.css

@@ -64,7 +64,7 @@ header .button, footer .button, .button.small {
 
 .smallogo { text-align: center; margin: 0; padding: 0; }
 
-button:active, a:active, .button:active {
+button:active, a:active, .button:active, input:active, input:focus {
 	background: black !important;
 	color: white !important;
 }
@@ -171,14 +171,12 @@ canvas {
 	margin: 0;
 	padding: 0;
 	font-size: 0.8em;
-}
-
-#list p {
 	font-weight: normal;
 	text-overflow: ellipsis;
 	display: block;
 	white-space: nowrap;
 	overflow: hidden;
+	opacity: .6;
 }
 
 #list h2 {
@@ -186,6 +184,9 @@ canvas {
 	padding: 0;
 	font-weight: normal;
 	font-size: 1.1em;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 #list li {
@@ -197,6 +198,23 @@ canvas {
 .blue   #list li { border-bottom: 1px solid #2980b9; }
 .yellow #list li { border-bottom: 1px solid #f39c12; }
 
+/* read items get subdued text and arrow color */
+.red #list li a, .red #list li:after {
+	color: #c0392b;
+}
+.white #list li a, .white #list li:after {
+	color: #bdc3c7;
+}
+.blue #list li a, .blue #list li:after {
+	color: #2980b9;
+}
+.yellow #list li a, .yellow #list li:after {
+	color: #f39c12;
+}
+#list li.unread a, #list li.unread:after {
+	color: inherit;
+}
+
 #list li:after {
 	content: "";
 	position: absolute;
@@ -207,11 +225,6 @@ canvas {
 	font-family: "Entypo";
 }
 
-.red    #list li:after { color: #c0392b; }
-.white  #list li:after { color: #bdc3c7; }
-.blue   #list li:after { color: #2980b9; }
-.yellow #list li:after { color: #f39c12; }
-
 #list li > a {
 	display: block;
 	padding: 5px 25px 5px 10px;
@@ -219,10 +232,6 @@ canvas {
 	outline: none;
 }
 
-#list li.unread:after {
-	color: inherit;
-}
-
 #full.active {
 	min-height: 100%;
 	display: -moz-box;
@@ -345,7 +354,7 @@ canvas {
 	color: #2c3e50;
 }
 
-#settings .version {
+#settings .version, #settings .reset-info {
 	padding-top: 1em;
 }
 

index.html

@@ -35,8 +35,6 @@
   </header>
   <article>
     <ul>
-      <li><a href="#logout" class="button"><span class="icon">&#59201;</span> Log out</a></li>
-      <li><a href="#reset-info" class="button"><span class="icon">&#59160;</span> View those info bubbles again</a></li>
       <li class="font-size">
         <span><span class="icon">&#128269;</span> <small>A</small><big>A</big>:</span>
         <a class="button small" href="#font-smaller"><span class="icon">&#11015;</span></a>
@@ -46,6 +44,8 @@
       <li><a href="#color-blue" class="color-blue button"><span class="icon">&#59290;</span> Blue</a></li>
       <li><a href="#color-yellow" class="color-yellow button"><span class="icon">&#59290;</span> Yellow</a></li>
       <li><a href="#color-red" class="color-red button"><span class="icon">&#59290;</span> Red (default)</a></li>
+      <li class="reset-info"><a href="#reset-info" class="button"><span class="icon">&#59160;</span> View those info bubbles again</a></li>
+      <li><a href="#logout" class="button"><span class="icon">&#59201;</span> Log out</a></li>
       <li class="version"><span class="icon">&#59141;</span> You're running version <em id="version"></em></li>
       <li class="madeby"><span class="icon">&#59141;</span> Made by <a href="http://jabs.nu/" target="_blank">Jabs Nu</a></li>
       <li class="icons"><span class="icon">&#128325;</span> Icons by <a href="http://www.entypo.com/" target="_blank">Entypo</a></li>
@@ -64,7 +64,7 @@
       </p>
       <p class="backends">
         <label class="button"><input type="radio" name="backend" value="TinyTinyRSS" checked="checked" /> Tiny Tiny RSS</label>
-        <label class="button"><input type="radio" name="backend" value="OwnCloud" /> OwnCloud News</label>
+        <label class="button"><input type="radio" name="backend" value="OwnCloud" /> ownCloud News</label>
       </p>
       <p>
         <label for="url">URL:</label>

js/App.js

@@ -179,9 +179,7 @@ App.prototype.populateList = function() {
 		var article = this.unread_articles[i];
 		html_str += "<li"+ (article.unread ? " class='unread'" : "") +">";
 		html_str += "<a href='#full-"+i+"'>";
-		html_str += "<p class='title'>";
+		html_str += "<p class='title'>" + article.feed_title + "</p>";
-		html_str += "<strong>" + article.feed_title + "</strong>";
-		html_str += "</p>";
 		html_str += "<h2>" + article.title + "</h2>";
 		if(article.excerpt)	html_str += "<p class='excerpt'>" + article.excerpt + "</p>";
 		html_str += "</a></li>";