new style and style cleanup for the news app

6 files changed, 695 insertions, 0 deletions

diff --git a/css/addnew.css b/css/addnew.css
new file mode 100644
index 000000000..edcad6ec6
--- /dev/null
+++ b/css/addnew.css
@@ -0,0 +1,25 @@
+.add-new {
+        overflow: hidden;
+}
+
+.add-new > a {
+        background-image: url('%appswebroot%/news/img/add.svg');
+}
+
+.add-new-popup {
+        -moz-transition: padding-bottom 500ms ease 0s;
+        -o-transition: padding-bottom 500ms ease 0s;
+        -webkit-transition: padding-bottom 500ms ease 0s;
+        -ms-transition: padding-bottom 500ms ease 0s;
+        transition: height 500ms ease 0s;
+        height: 0;
+        padding: 0 15px;
+}
+
+.add-new-popup.open {
+        height: 170px;
+}
+
+.add-new-popup .personalblock:first-child legend {
+        padding-top: 15px;
+}
\ No newline at end of file
diff --git a/css/feeds.css b/css/feeds.css
new file mode 100644
index 000000000..5ae430aec
--- /dev/null
+++ b/css/feeds.css
@@ -0,0 +1,82 @@
+.starred-icon {
+        background-image: url('%appswebroot%/news/img/starred.png');
+}
+
+.subscriptions-icon {
+        background-image: url('%appswebroot%/news/img/rss.svg');
+}
+
+.unread {
+        font-weight: bold;
+}
+
+#left-content .unread > a {
+        padding-right: 32px;
+}
+
+
+
+#left-content .utils {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        display: none;
+}
+
+#left-content .utils button {
+        margin: 5px 0 0 0;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-color: transparent;
+        border: 0;
+        box-shadow: none;
+}
+
+.unread-counter {
+        padding: 6px 8px 5px;
+        position: absolute;
+        z-index: 5;
+        right: 0;
+        top: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: center;
+        font-size: 9pt;
+        display: none;
+}
+
+#left-content li:hover .utils > .unread-counter {
+        display: none;
+}
+
+.unread .unread-counter {
+        display: block;
+}
+
+
+/* general */
+button.action {
+        opacity: .5;
+}
+
+button.action:hover {
+        opacity: 1;
+}
+
+
+#left-content li:hover > .utils {
+        display: block;
+}
+
+.delete-icon {
+        background-image: url('%webroot%/core/img/actions/delete.svg');
+}
+
+.edit-icon {
+        background-image: url('%webroot%/core/img/actions/rename.svg');
+}
+
+.mark-read-icon {
+        background-image: url('%appswebroot%/news/img/mark_read.svg');
+}
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;
+                }
diff --git a/css/owncloud.css b/css/owncloud.css
new file mode 100644
index 000000000..65ac19f70
--- /dev/null
+++ b/css/owncloud.css
@@ -0,0 +1,259 @@
+/**
+ * ownCloud
+ *
+ * @author Bernhard Posselt
+ * @copyright 2012 Bernhard Posselt nukeawhale@gmail.com
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this library.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * Contains default left-content design stuff
+ */
+
+/* needed for angularjs */
+#app {
+        height: 100%;
+        width: 100%;
+}
+
+/* Basic layout */
+#left-content {
+        width: 250px;
+        height: 100%;
+        float: left;
+        -moz-box-sizing: border-box; box-sizing: border-box;
+        border-right: 1px solid #ccc;
+        background-color: #f8f8f8;
+        padding-bottom: 32px;
+}
+
+#right-content {
+        height: 100%;
+        overflow-y: auto;
+}
+
+/* left-content lists */
+#left-content > ul {
+        height: 100%;
+        overflow: auto;
+        -moz-box-sizing: border-box; box-sizing: border-box;
+}
+
+#left-content li {
+        width: 100%;
+        position: relative;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
+}
+
+#left-content li.active {
+        background-color: #d0d0d0;
+        text-shadow: 0 1px 0 rgba(255,255,255,.7);
+}
+
+
+#left-content > ul > li {
+        border-bottom: 1px solid #ddd;
+        border-top: 1px solid #fff;
+        background-color: #eee;
+}
+
+#left-content > ul > li.active {
+        border-bottom: 1px solid #ccc;
+        border-top: 1px solid #ddd;
+}
+
+#left-content ul.with-icon a {
+        background-size: 16px 16px;
+        background-repeat: no-repeat;
+        background-position: 10px center;
+        padding-left: 32px;
+}
+
+#left-content li > a {
+        width: 100%;
+        padding: 0 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        white-space: nowrap;
+        line-height: 32px;
+        color: #333;
+}
+
+#left-content > ul > li:hover {
+        border-top: 1px solid #ddd;
+}
+
+#left-content li > a:hover {
+        background-color: #ddd;
+}
+
+/* collapsible */
+#left-content li.collapsible {
+
+}
+
+#left-content li.collapsible > button.collapse {
+        display: none;
+        position: absolute;
+        left: 6px;
+        top: 5px;
+        background: none;
+        background-image: url('%webroot%/core/img/actions/triangle-s.svg');
+        background-repeat: no-repeat;
+        background-size: 16px 16px;
+        height: 16px;
+        width: 16px;
+        border: none;
+        border-radius: 0;
+        outline: none !important;
+        box-shadow: none;
+        display: none;
+}
+
+#left-content li.collapsible:hover > a {
+        background-image: none;
+}
+
+#left-content li.collapsible:hover > button.collapse {
+        display: block;
+}
+
+#left-content li.collapsible button.collapse {
+        -moz-transform: rotate(-90deg);
+        -webkit-transform: rotate(-90deg);
+        -ms-transform:rotate(-90deg);
+        -o-transform:rotate(-90deg);
+        transform: rotate(-90deg);
+}
+
+#left-content li.collapsible.open button.collapse {
+        -moz-transform: rotate(0);
+        -webkit-transform: rotate(0);
+        -ms-transform:rotate(0);
+        -o-transform:rotate(0);
+        transform: rotate(0);
+}
+
+/* Second level nesting for lists */
+#left-content > ul ul {
+        display: none;
+}
+
+#left-content > ul ul li > a {
+        padding-left: 32px;
+}
+
+#left-content > ul.with-icon ul li > a {
+        padding-left: 48px;
+        background-position: 24px center;
+}
+
+#left-content .open {
+        background-image: linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
+        background-image: -o-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
+        background-image: -moz-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
+        background-image: -webkit-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
+        background-image: -ms-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
+}
+
+#left-content > ul li.open:hover {
+        -webkit-box-shadow: inset 0 0 3px #cccccc;
+        box-shadow: inset 0 0 3px #cccccc;
+        border-top: 1px solid #ccc;
+}
+
+#left-content > ul li.open ul {
+        display: block;
+}
+
+/* drag and drop */
+.drag-and-drop {
+        -moz-transition: padding-bottom 500ms ease 0s;
+        -o-transition: padding-bottom 500ms ease 0s;
+        -webkit-transition: padding-bottom 500ms ease 0s;
+        -ms-transition: padding-bottom 500ms ease 0s;
+        transition: padding-bottom 500ms ease 0s;
+        padding-bottom: 40px;
+}
+
+/* settings area */
+#app-settings {
+        position: fixed;
+        width: 249px;
+        transition: bottom .5s;
+}
+
+#app-settings.open {
+        bottom: 0;
+}
+
+#app-settings-header {
+        background-color: #eee;
+        border-top: 1px solid #ccc;
+}
+
+#app-settings-content {
+        background-color: #eee;
+        padding: 10px;
+}
+
+.settings-button {
+        height: 32px;
+        width: 100%;
+        background-image: url('%webroot%/core/img/actions/settings.png');
+        background-repeat: no-repeat;
+        background-position: 10px center;
+        border: 0;
+        box-shadow: none;
+        border-radius: 0;
+        padding: 0;
+        margin: 0;
+        background-color: transparent;
+}
+
+.settings-button:hover {
+        background-color: #ddd;
+}
+
+#left-content .personalblock {
+        margin-bottom: 15px;
+}
+
+#left-content .personalblock legend {
+        margin-bottom: -15px;
+}
+
+#left-content .error {
+        color: #DD1144;
+}
+
+/* icons */
+.folder-icon {
+        background-image: url('%webroot%/core/img/places/folder.png');
+}
+
+/* buttons */
+button.loading {
+        background-image: url('%webroot%/core/img/loading.gif');
+        background-position: right 10px center;
+        background-repeat: no-repeat;
+        padding-right: 30px;
+}
\ No newline at end of file
diff --git a/css/settings.css b/css/settings.css
new file mode 100644
index 000000000..c2afd8bac
--- /dev/null
+++ b/css/settings.css
@@ -0,0 +1,11 @@
+#app-settings {
+        bottom: -214px;
+}
+
+
+#app-settings input[type=file] {
+        opacity:0;
+        z-index:1001;
+        width:0;
+        height:0;
+}
diff --git a/css/showall.css b/css/showall.css
new file mode 100644
index 000000000..f92486169
--- /dev/null
+++ b/css/showall.css
@@ -0,0 +1,19 @@
+.show-all {
+        background-color: transparent !important;
+        border: 0 !important;
+}
+
+.show-all:hover {
+        box-shadow: none !important;
+        border: 0 !important;
+}
+
+.show-all > a {
+        padding: 5px 0 5px 0 !important;
+        text-align: center;
+        opacity: .5;
+}
+
+.show-all > a:hover {
+        background-color: transparent !important;
+}
\ No newline at end of file