diff options
author | Bernhard Posselt <nukeawhale@gmail.com> | 2013-02-11 15:30:31 +0100 |
---|---|---|
committer | Bernhard Posselt <nukeawhale@gmail.com> | 2013-02-11 15:30:55 +0100 |
commit | 5492e60510379add1523454f322def81167be8be (patch) | |
tree | 8fff208ff6492758cff1b17aae7ec02c797cd322 /css | |
parent | e10d99e13da782e4c4bed03974bb10959ed333b4 (diff) |
new style and style cleanup for the news app
Diffstat (limited to 'css')
-rw-r--r-- | css/addnew.css | 25 | ||||
-rw-r--r-- | css/feeds.css | 82 | ||||
-rw-r--r-- | css/items.css | 299 | ||||
-rw-r--r-- | css/owncloud.css | 259 | ||||
-rw-r--r-- | css/settings.css | 11 | ||||
-rw-r--r-- | css/showall.css | 19 |
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 |