new style and style cleanup for the news app

1 files changed, 299 insertions, 0 deletions

diff --git a/css/items.css b/css/items.css
new file mode 100644
index 000000000..3d13e8e57
--- /dev/null
+++ b/css/items.css
@@ -0,0 +1,299 @@
+#right-content:after {
+        content: '';
+        display: block;
+        height: 100%;
+}
+
+#right-content.loading {
+        background-image: url('%webroot%/core/img/loading.gif');
+        background-position: center;
+        background-repeat: no-repeat;
+}
+
+#right-content.loading > ul {
+        display: none;
+}
+
+
+/**
+ * Rules for a single feed item
+ */
+.feed_item {
+        border-top: 1px solid #ccc;
+        min-height: 100px;
+        background-image: linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
+        background-image: -o-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
+        background-image: -moz-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
+        background-image: -webkit-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
+        background-image: -ms-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
+        padding: 2.5em 0 0 0;
+        cursor: default;
+}
+
+.feed_item.viewed {
+        border-right: 5px solid #F28627;
+}
+
+
+.feed_item:first-child {
+        border-top: 0;
+}
+
+        /**
+         * Utils panel
+         */
+        .utils {
+                height: 2em;
+                margin: 0 0 0 1em;
+                float: left;
+        }
+
+        /**
+         * Primary feed utils which are always shown
+         */
+        .feed_item .primary_item_utils {
+                float: left;
+        }
+
+                .feed_item .primary_item_utils li {
+                        display: inline-block;
+                        line-height: 1.5em;
+                        font-size: 1em;
+                        color: #aaa;
+                        float: left;
+                        margin-left: ;
+                        cursor: default;
+                }
+
+                .feed_item .primary_item_utils li:first-child { margin: 0}
+                .feed_item .primary_item_utils li.star {
+                        background-image: url('%appswebroot%/news/img/inactive_star.svg');
+                        background-repeat: no-repeat;
+                        background-size: 1.5em 1.5em;
+                        width: 1.5em;
+                        height: 1.5em;
+                        cursor: pointer;
+                }
+
+                .feed_item .primary_item_utils li.star.important,
+                .feed_item .primary_item_utils li.star:hover {
+                        background-image: url('%appswebroot%/news/img/active_star.svg');
+                }
+
+        /**
+         * Feed title
+         */
+        .feed_item h1.item_title {
+                font-size: 1.5em;
+                margin: 0 13em 0 2.1em;
+                font-weight: bold;
+                word-break: break-all;
+        }
+
+                .feed_item h1.item_title a {
+                        color: #222;
+                }
+                        .feed_item h1.item_title a:hover {
+                                color: #222;
+                                text-decoration: underline;
+                        }
+
+        /**
+         * Feed title when read
+         */
+        .feed_item.read h1.item_title {
+                font-weight: normal;
+        }
+
+                .feed_item.read h1.item_title a {
+                        color: #888;
+                }
+
+        /**
+         * Title of the feed to which the item belongs
+         */
+        .feed_item h2.item_feed_title {
+                color: #aaa;
+                font-size: 1.1em;
+                margin-left: 3em;
+        }
+
+        /**
+         * Author of the item
+         */
+        .feed_item h2.item_author {
+                color: #aaa;
+                font-size: 1.1em;
+                margin: .2em 0 0 3em;
+        }
+
+                .feed_item h2.item_author a {
+                        color: inherit;
+                }
+
+                        .feed_item h2.item_author a:hover {
+                                text-decoration: underline;
+                        }
+
+        .timestamp {
+                display: none;
+        }
+
+        /**
+         * Feed timestamp
+         */
+        .timeago {
+                float: right;
+                color: #aaa;
+                margin: 0 1.2em 0 0;
+                font-size: 1.1em;
+        }
+
+        /**
+         * Body of the feed item
+         */
+        .feed_item .enclosure {
+                padding: 1em 3em 0 3.5em;
+        }
+
+        .feed_item div.body {
+                padding: .75em 3em 0 3em;
+                max-width: 55em;
+                font-size: 1.1em;
+                clear: both;
+                overflow: auto;
+        }
+
+                .feed_item div.body p {
+                        line-height: 1.5;
+                        margin: .5em 0 1em 0;
+                }
+
+                .feed_item div.body img, .feed_item div.body table {
+                        max-width: 100%;
+                        height: auto;
+                        overflow: auto;
+                        word-wrap: break-word;
+                }
+
+                .feed_item div.body > img:first-child {
+                        padding: 0 1em 0 0;
+                        float: left;
+                }
+
+                .feed_item div.body h1, .feed_item div.body h2 {
+                        font-size: 1.25em;
+                        font-weight: bold;
+                        color: #222;
+                        margin: 1.5em 0 0 0;
+                }
+
+                .feed_item div.body h3 {
+                        font-size: 1.1em;
+                        font-weight: bold;
+                        color: #222;
+                        margin: 1.5em 0 0 0;
+                        text-decoration: underline;
+                }
+
+                .feed_item div.body > div {
+                        margin: .5em 0;
+                }
+
+                .feed_item div.body a {
+                        color: #0000ff;
+                        text-decoration: underline;
+                }
+
+                .feed_item div.body ul {
+                        margin: .5em 0;
+                        padding-left: 1em;
+                        list-style-type: disc;
+                }
+
+                .feed_item div.body ol {
+                        margin: .5em 0;
+                        padding-left: 1.5em;
+                }
+
+                        .feed_item div.body ul li {
+                                cursor: default;
+                                line-height: 1.5em;
+                        }
+
+                .feed_item div.body pre {
+                        padding: .5em .5em .5em 1em;
+                        background-color: #dadada;
+                        border: 1px solid #ccc;
+                        margin: .5em 0 1em 0;
+                        background-image: linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%);
+                        background-image: -o-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%);
+                        background-image: -moz-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%);
+                        background-image: -webkit-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%);
+                        background-image: -ms-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%);
+                        overflow-y: auto;
+                }
+
+                        .feed_item div.body pre code {
+                                font-family: monospace;
+                                font-size: 1.5em;
+                        }
+        .feed_item div.body > *:last-child {
+                margin-bottom: 0;
+        }
+
+/**
+ * Line with utils at the bottom
+ */
+.bottom_utils {
+        width: 100%;
+        height: 2.5em;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+}
+
+        /**
+         * Secondary feed items which are only shown on hover
+         */
+        .feed_item .secondary_item_utils {
+                float: right;
+                margin: 0 1.2em;
+        }
+
+
+        .feed_item .secondary_item_utils, .feed_item .secondary_item_utils a {
+                color: #000;
+        }
+
+        .feed_item:hover .secondary_item_utils li {
+                display: inline-block;
+        }
+
+                .feed_item .secondary_item_utils li {
+                        padding-left: 25px;
+                        display: none;
+                }
+
+                /**
+                 * Secondary feed items which are only shown on hover
+                 */
+                .feed_item .show_keep_unread .keep_unread{
+                        display: block;
+                }
+
+                .feed_item li.share_link {
+                        background-image: url('%webroot%/core/img/actions/share.svg');
+                        background-repeat: no-repeat;
+                        background-position: right center;
+                        padding-right: 20px;
+                }
+
+                .feed_item:hover .secondary_item_utils li.keep_unread {
+                        cursor: pointer;
+                }
+
+                .feed_item .secondary_item_utils li input[type=checkbox]{
+                        margin-left: 5px;
+                }