From e472be480960b324d83ee9a5875dc00a2f1d4d2b Mon Sep 17 00:00:00 2001
From: Bernhard Posselt <dev@bernhard-posselt.com>
Date: Wed, 27 Aug 2014 00:22:39 +0200
Subject: navigation style fixes

---
 css/content.css    | 132 +++++++++++++++++++++++++++--------------------------
 css/navigation.css |  65 ++++++++++----------------
 css/oc8.css        |   4 +-
 3 files changed, 94 insertions(+), 107 deletions(-)

(limited to 'css')

diff --git a/css/content.css b/css/content.css
index 247afa1f3..27274822a 100644
--- a/css/content.css
+++ b/css/content.css
@@ -48,7 +48,7 @@
 /**
  * Rules for a single feed item
  */
-.item {
+#app-content .item {
     border-top: 1px solid #ccc;
     min-height: 120px;
     background-image: linear-gradient(top, #F8F8F8 0, #FFF 84px);
@@ -56,19 +56,19 @@
     cursor: default;
 }
 
-.item.viewed {
+#app-content .item.viewed {
     border-right: 5px solid #F28627;
 }
 
 
-.item:first-child {
+#app-content .item:first-child {
     border-top: 0;
 }
 
     /**
      * Utils panel
      */
-    .item .star {
+    #app-content .item .star {
         height: 25px;
         width: 25px;
         margin: 2px 0 0 6px;
@@ -80,37 +80,37 @@
         background-image: url('../img/inactive_star.svg');
     }
 
-    .item .starred,
-    .item .star:hover {
+    #app-content .item .starred,
+    #app-content .item .star:hover {
         background-image: url('../img/active_star.svg');
     }
 
     /**
      * Heading for compact view
      */
-    .compact .item .body,
-    .compact .item .title,
-    .compact .item .author,
-    .compact .item .date,
-    .compact .item .bottom-utils,
-    .item .heading,
-    .item .link {
+    #app-content .compact .item .body,
+    #app-content .compact .item .title,
+    #app-content .compact .item .author,
+    #app-content .compact .item .date,
+    #app-content .compact .item .bottom-utils,
+    #app-content .item .heading,
+    #app-content .item .link {
         display: none;
     }
-    .compact .item.open .body,
-    .compact .item.open .author,
-    .compact .item.open .bottom-utils,
-    .compact .item .heading,
-    .item .link {
+    #app-content .compact .item.open .body,
+    #app-content .compact .item.open .author,
+    #app-content .compact .item.open .bottom-utils,
+    #app-content .compact .item .heading,
+    #app-content .item .link {
         display: block;
     }
 
-    .heading {
+    #app-content .heading {
         padding: 5px 20px;
         background-color: #fafafa;
     }
 
-    .heading h1 a {
+    #app-content .heading h1 a {
         font-weight: bold;
         font-size: 13pt;
         padding: 0 5px;
@@ -118,35 +118,35 @@
         line-height: 40px;
     }
 
-    .read .heading h1 a {
+    #app-content .read .heading h1 a {
         color: #888;
     }
 
-    .compact .item {
+    #app-content .compact .item {
         padding: 0 !important;
         min-height: 0;
     }
 
-    .compact .item .body {
+    #app-content .compact .item .body {
         padding-bottom: 40px;
     }
 
-    .compact .item.open .heading {
+    #app-content .compact .item.open .heading {
         margin-bottom: 15px;
         border-bottom: 1px dashed #ddd;
     }
 
-    .heading .star {
+    #app-content .heading .star {
         float: left;
         margin: 7px 12px 0 0;
     }
 
-    .heading .external {
+    #app-content .heading .external {
         float: left;
         margin: 8px 12px 0 0;
     }
 
-    .heading .timeago {
+    #app-content .heading .timeago {
         display: block;
         float: right;
         line-height: 40px;
@@ -156,17 +156,17 @@
     /**
      * Feed title
      */
-    .item .title {
+    #app-content .item .title {
         font-size: 19px;
         margin: 4px 182px 4px 42px;
         font-weight: bold;
         word-wrap: break-word;
     }
 
-        .item .title a {
+        #app-content .item .title a {
             color: #222;
         }
-            .item .title a:hover {
+            #app-content .item .title a:hover {
                 color: #222;
                 text-decoration: underline;
             }
@@ -174,39 +174,39 @@
     /**
      * Feed title when read
      */
-    .item.read .title {
+    #app-content .item.read .title {
         font-weight: normal;
     }
 
-        .item.read .title a {
+        #app-content .item.read .title a {
             color: #888;
         }
 
     /**
      * Author of the item
      */
-    .item .author {
+    #app-content .item .author {
         color: #aaa;
         font-size: 15px;
         margin: 3px 0 5px 42px;
     }
 
-        .item .author a {
+        #app-content .item .author a {
             color: inherit;
         }
 
-            .item .author a:hover {
+            #app-content .item .author a:hover {
                 text-decoration: underline;
             }
 
-    .timestamp {
+    #app-content .timestamp {
         display: none;
     }
 
     /**
      * Feed timestamp
      */
-    .timeago {
+    #app-content .timeago {
         float: right;
         color: #aaa;
         margin: 4px 17px 0 0;
@@ -216,11 +216,11 @@
     /**
      * Body of the feed item
      */
-    .item .enclosure {
+    #app-content .item .enclosure {
         padding: 14px 42px 0 49px;
     }
 
-    .item .body {
+    #app-content .item .body {
         padding: 10px 42px 0 42px;
         max-width: 770px;
         font-size: 14px;
@@ -230,16 +230,17 @@
         height: 80px;*/
     }
 
-    .item .body.opened {
+    #app-content .item .body.opened {
 
     }
 
-        .item .body p {
+        #app-content .item .body p {
             line-height: 1.5;
             margin: 7px 0 14px 0;
         }
 
-        .item .body img, .item .body table {
+        #app-content .item .body img,
+        #app-content .item .body table {
             max-width: 100%;
             height: auto;
             overflow: auto;
@@ -247,20 +248,21 @@
             white-space:normal;
         }
 
-        .item .body > img:first-child,
-        .item .body > div:first-child > img:first-child {
+        #app-content .item .body > img:first-child,
+        #app-content .item .body > div:first-child > img:first-child {
             padding: 0 14px 0 0;
             float: left;
         }
 
-        .item .body h1, .item .body h2 {
+        #app-content .item .body h1,
+        #app-content .item .body h2 {
             font-size: 17px;
             font-weight: bold;
             color: #222;
             margin: 21px 0 0 0;
         }
 
-        .item .body h3 {
+        #app-content .item .body h3 {
             font-size: 15px;
             font-weight: bold;
             color: #222;
@@ -268,57 +270,57 @@
             text-decoration: underline;
         }
 
-        .item .body > div {
+        #app-content .item .body > div {
             margin: 7px 0;
         }
 
-        .item .body a {
+        #app-content .item .body a {
             color: #0000ff;
             text-decoration: underline;
         }
 
-        .item .body ul {
+        #app-content .item .body ul {
             margin: 7px 0;
             padding-left: 14px;
             list-style-type: disc;
         }
 
-        .item .body ol {
+        #app-content .item .body ol {
             margin: 7px 0;
             padding-left: 21px;
         }
 
-            .item .body ul li {
+            #app-content .item .body ul li {
                 cursor: default;
                 line-height: 21px;
             }
 
-        .item .body pre {
+        #app-content .item .body pre {
             padding: 7px 7px 7px 14px;
             background-color: #dadada;
             border: 1px solid #ccc;
             margin: 7px 0 14px 0;
             overflow-y: auto;
         }
-            .item .body pre::-webkit-scrollbar {
+            #app-content .item .body pre::-webkit-scrollbar {
                 height: 10px;
             }
 
-            .item .body pre::-webkit-scrollbar-thumb {
+            #app-content .item .body pre::-webkit-scrollbar-thumb {
                 background: #333;
             }
 
-            .item .body pre::-webkit-scrollbar-track-piece {
+            #app-content .item .body pre::-webkit-scrollbar-track-piece {
                 background: #ddd;
             }
 
-            .item .body code,
-            .item .body pre {
+            #app-content .item .body code,
+            #app-content .item .body pre {
                 font-family: monospace;
                 font-size: 16px;
             }
 
-        .item .body blockquote {
+        #app-content .item .body blockquote {
             border-left: 1px solid rgb(210,210,210);
             margin: 25px 0;
             padding: 0 0 0 15px;
@@ -329,7 +331,7 @@
 /**
  * Line with utils at the bottom
  */
-.item .bottom-utils  {
+#app-content .item .bottom-utils  {
     width: 100%;
     height: 35px;
     margin: 0;
@@ -338,25 +340,25 @@
     -moz-box-sizing: border-box;
 }
 
-    .item .bottom-utils ul {
+    #app-content .item .bottom-utils ul {
         float: right;
         margin: 0 17px;
     }
 
 
-    .item .bottom-utils,
-    .item .bottom-utils a {
+    #app-content .item .bottom-utils,
+    #app-content .item .bottom-utils a {
         color: #000;
     }
 
-    .item:hover .bottom-utils li {
+    #app-content .item:hover .bottom-utils li {
         display: inline-block;
     }
 
-        .item .bottom-utils li {
+        #app-content .item .bottom-utils li {
             padding-left: 25px;
         }
 
-        .item .bottom-utils li input[type=checkbox]{
+        #app-content .item .bottom-utils li input[type=checkbox]{
             margin-left: 5px;
         }
diff --git a/css/navigation.css b/css/navigation.css
index a7ddc359c..f8135d1b5 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -7,17 +7,20 @@
  * @author Bernhard Posselt <dev@bernhard-posselt.com>
  * @copyright Bernhard Posselt 2014
  */
-.add-new .heading {
+
+/* add new feed or folder */
+#app-navigation .add-new .heading {
     height: 44px;
     width: 100%;
-    padding: 0;
+    padding: 0 0 0 44px;
+    background-position: 14px center;
 }
 
-.add-new .heading:hover {
+#app-navigation .add-new .heading:hover {
     background-color: #ccc;
 }
 
-.add-new .heading button {
+#app-navigation .add-new .heading button {
     padding: 0;
     line-height: 44px;
     width: 100%;
@@ -28,33 +31,33 @@
     font-weight: normal;
 }
 
-.add-new-popup {
+#app-navigation .add-new-popup {
     display: none;
-    height: 120px;
+    height: 150px;
     padding: 15px 10px;
     box-shadow: inset 0px 0px 10px #dedede;
     border-top: 1px solid #dedede;
     border-bottom: 1px solid #dedede;
 }
 
-.add-new-popup input[type=text] {
+#app-navigation .add-new-popup input[type=text] {
     width: 170px;
 }
 
-.add-new-popup select {
+#app-navigation .add-new-popup select {
     width: 170px;
     margin-top: 1px !important;
     height: 30px;
     background-color: #eee;
 }
 
-.add-new-popup input {
+#app-navigation .add-new-popup input {
     margin-top: 15px;
     box-sizing: border-box;
 }
 
-.add-new-popup input,
-.add-new-popup select {
+#app-navigation .add-new-popup input,
+#app-navigation .add-new-popup select {
     margin: 0 0 5px 0;
     display: inline-block;
     float: left;
@@ -63,7 +66,7 @@
     border-right: 0;
 }
 
-.add-new-popup button {
+#app-navigation .add-new-popup button {
     margin: 0 0 5px 0;
     display: inline-block;
     float: left;
@@ -73,66 +76,46 @@
     margin-top: 1px;
 }
 
-.add-new-popup .action-button {
+#app-navigation .add-new-popup .action-button {
     width: 30px;
     background-position: center;
     background-repeat: no-repeat;
 }
 
-.add-new-popup .back-button {
+#app-navigation .add-new-popup .back-button {
     border-radius: 0;
     background-image: url('../img/delete.svg');
 }
 
-.add-new-popup .new-button {
+#app-navigation .add-new-popup .new-button {
     border-radius: 0;
     background-image: url('../img/add.svg');
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
 }
 
-.add-new-popup .create-button {
+#app-navigation .add-new-popup .create-button {
     border-radius: 0;
     background-image: url('../img/mark_read.svg');
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
 }
 
-.add-new-popup .error {
+#app-navigation .add-new-popup .error {
     padding: 0 0 10px 0;
 }
 
-.starred-icon {
+/* navigation */
+#app-navigation .starred-icon {
     background-image: url('../img/starred.png');
 }
 
-.subscriptions-icon {
+#app-navigation .subscriptions-icon {
     background-image: url('../img/rss.svg');
 }
 
-.unread > a,
-.unread > .utils .unread-counter {
-    font-weight: bold;
-}
-
-#app-navigation .with-icon .list-title {
-    padding-left:16px;
-}
-
-#app-navigation .with-icon .list-title span {
-    display:none;
-    margin-left:6px;
-}
-
-#app-navigation .with-icon .list-title:hover span {
-    display:inline;
-}
-
-#app-navigation .with-icon .opened span {
-    display:inline;
-}
-
 #app-navigation .unread > a {
+    font-weight: bold;
     padding-right: 32px;
 }
 
diff --git a/css/oc8.css b/css/oc8.css
index 27b75dbef..82ce421cf 100644
--- a/css/oc8.css
+++ b/css/oc8.css
@@ -134,4 +134,6 @@
 .app-navigation-entry-options li button:focus {
     opacity: 1;
     background-color: transparent;
-}
\ No newline at end of file
+}
+
+/* Loading sign instead of icon by adding the loading class to the list item */
-- 
cgit v1.2.3