diff options
author | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-05-30 15:14:07 +0200 |
---|---|---|
committer | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-05-30 15:14:07 +0200 |
commit | 88279961c5e2f2bd0711fc4200d58b93b425199e (patch) | |
tree | 1e07557fdbd6f037b143fd49f454199737d12f45 /css | |
parent | abd5ef4c4c6ad3cf8e879f6c4b9181b077165952 (diff) |
fix autopaging and marking read, render items
Diffstat (limited to 'css')
-rw-r--r-- | css/content.css | 230 |
1 files changed, 77 insertions, 153 deletions
diff --git a/css/content.css b/css/content.css index 3382f22fa..084b26609 100644 --- a/css/content.css +++ b/css/content.css @@ -40,7 +40,7 @@ } -#app-content.loading > ul { +#app-content.icon-loading > ul { display: none; } @@ -48,115 +48,69 @@ /** * Rules for a single feed item */ -.feed_item { +.item { border-top: 1px solid #ccc; min-height: 120px; - background-image: linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 84px); - padding: 40px 5px 10px 5px; + background-image: linear-gradient(top, #F8F8F8 0, #FFF 84px); + padding: 35px 5px 20px 5px; cursor: default; } -.feed_item.viewed { +.item.viewed { border-right: 5px solid #F28627; } -.feed_item:first-child { +.item:first-child { border-top: 0; } /** * Utils panel */ - .feed_item .item_utils { - height: 28px; - margin: 0 0 0 8px; + .item .star { + height: 25px; + width: 25px; + margin: 2px 0 0 6px; float: left; + border: 0; + background-color: #FFF; + background-size: 100%; + background-repeat: no-repeat; + background-image: url('../img/inactive_star.svg'); } - /** - * Primary feed utils which are always shown - */ - .feed_item .primary_item_utils { - float: left; + .item .starred, + .item .star:hover { + background-image: url('../img/active_star.svg'); } - .feed_item .primary_item_utils li { - display: inline-block; - line-height: 21px; - font-size: 14px; - color: #aaa; - float: left; - margin-left: ; - cursor: default; - } - - .feed_item .primary_item_utils li:first-child { margin: 0} - .feed_item .star, - .feed_item .external { - background: none; - background-repeat: no-repeat; - background-position: center center; - background-size: 24px 24px; - width: 24px; - height: 24px; - border: none; - display: block; - margin: 0; - padding: 0; - } - - .feed_item .star { - background-image: url('../img/inactive_star.svg'); - } - - .feed_item .external { - background-image: url('../img/link.svg'); - opacity: 0.4; - } - - .feed_item .external:hover { - opacity: 1; - } - - .feed_item .star.important, - .feed_item .star:hover { - background-image: url('../img/active_star.svg'); - } - .feed_item .star.important:hover { - opacity:1; - } - .feed_item .star:hover { - opacity:0.5; - } - /** * Heading for compact view */ - .feed_item.compact .item_body, - .feed_item.compact .item_title, - .feed_item.compact .item_author, - .feed_item.compact .item_date, - .feed_item.compact .item_utils, - .feed_item.compact .item_bottom_utils, - .feed_item .item_heading, - .feed_item .item_link { + .compact .item .body, + .compact .item .title, + .compact .item .author, + .compact .item .date, + .compact .item .bottom-utils, + .item .heading, + .item .link { display: none; } - .feed_item.compact.open .item_body, - .feed_item.compact.open .item_author, - .feed_item.compact.open .item_bottom_utils, - .feed_item.compact .item_heading, - .feed_item .item_link { + .compact .item.open .body, + .compact .item.open .author, + .compact .item.open .bottom-utils, + .compact .item .heading, + .item .link { display: block; } - .item_heading { + .heading { padding: 5px 20px; background-color: #fafafa; } - .item_heading h1 a { + .heading h1 a { font-weight: bold; font-size: 13pt; padding: 0 5px; @@ -164,35 +118,35 @@ line-height: 40px; } - .read .item_heading h1 a { + .read .heading h1 a { color: #888; } - .feed_item.compact { + .compact .item { padding: 0 !important; min-height: 0; } - .feed_item.compact .item_body { + .compact .item .body { padding-bottom: 40px; } - .feed_item.compact.open .item_heading { + .compact .item.open .heading { margin-bottom: 15px; border-bottom: 1px dashed #ddd; } - .item_heading .star { + .heading .star { float: left; margin: 7px 12px 0 0; } - .item_heading .external { + .heading .external { float: left; margin: 8px 12px 0 0; } - .item_heading .timeago { + .heading .timeago { display: block; float: right; line-height: 40px; @@ -202,17 +156,17 @@ /** * Feed title */ - .feed_item .item_title { + .item .title { font-size: 19px; - margin: 0 182px 10px 42px; + margin: 4px 182px 4px 42px; font-weight: bold; word-wrap: break-word; } - .feed_item .item_title a { + .item .title a { color: #222; } - .feed_item .item_title a:hover { + .item .title a:hover { color: #222; text-decoration: underline; } @@ -220,37 +174,28 @@ /** * Feed title when read */ - .feed_item.read .item_title { + .item.read .title { font-weight: normal; } - .feed_item.read .item_title a { + .item.read .title a { color: #888; } /** - * Title of the feed to which the item belongs - */ - .feed_item .item_feed_title { - color: #aaa; - font-size: 15px; - margin-left: 42px; - } - - /** * Author of the item */ - .feed_item .item_author { + .item .author { color: #aaa; font-size: 15px; margin: 3px 0 5px 42px; } - .feed_item .item_author a { + .item .author a { color: inherit; } - .feed_item .item_author a:hover { + .item .author a:hover { text-decoration: underline; } @@ -264,18 +209,18 @@ .timeago { float: right; color: #aaa; - margin: 0 17px 0 0; + margin: 4px 17px 0 0; font-size: 15px; } /** * Body of the feed item */ - .feed_item .enclosure { + .item .enclosure { padding: 14px 42px 0 49px; } - .feed_item .item_body { + .item .body { padding: 10px 42px 0 42px; max-width: 770px; font-size: 14px; @@ -285,16 +230,16 @@ height: 80px;*/ } - .feed_item .item_body.opened { + .item .body.opened { } - .feed_item .item_body p { + .item .body p { line-height: 1.5; margin: 7px 0 14px 0; } - .feed_item .item_body img, .feed_item .item_body table { + .item .body img, .item .body table { max-width: 100%; height: auto; overflow: auto; @@ -302,20 +247,20 @@ white-space:normal; } - .feed_item .item_body > img:first-child, - .feed_item .item_body > div:first-child > img:first-child { + .item .body > img:first-child, + .item .body > div:first-child > img:first-child { padding: 0 14px 0 0; float: left; } - .feed_item .item_body h1, .feed_item .item_body h2 { + .item .body h1, .item .body h2 { font-size: 17px; font-weight: bold; color: #222; margin: 21px 0 0 0; } - .feed_item .item_body h3 { + .item .body h3 { font-size: 15px; font-weight: bold; color: #222; @@ -323,57 +268,57 @@ text-decoration: underline; } - .feed_item .item_body > div { + .item .body > div { margin: 7px 0; } - .feed_item .item_body a { + .item .body a { color: #0000ff; text-decoration: underline; } - .feed_item .item_body ul { + .item .body ul { margin: 7px 0; padding-left: 14px; list-style-type: disc; } - .feed_item .item_body ol { + .item .body ol { margin: 7px 0; padding-left: 21px; } - .feed_item .item_body ul li { + .item .body ul li { cursor: default; line-height: 21px; } - .feed_item .item_body pre { + .item .body pre { padding: 7px 7px 7px 14px; background-color: #dadada; border: 1px solid #ccc; margin: 7px 0 14px 0; overflow-y: auto; } - .feed_item .item_body pre::-webkit-scrollbar { + .item .body pre::-webkit-scrollbar { height: 10px; } - .feed_item .item_body pre::-webkit-scrollbar-thumb { + .item .body pre::-webkit-scrollbar-thumb { background: #333; } - .feed_item .item_body pre::-webkit-scrollbar-track-piece { + .item .body pre::-webkit-scrollbar-track-piece { background: #ddd; } - .feed_item .item_body code, - .feed_item .item_body pre { + .item .body code, + .item .body pre { font-family: monospace; font-size: 16px; } - .feed_item .item_body blockquote { + .item .body blockquote { border-left: 1px solid rgb(210,210,210); margin: 25px 0; padding: 0 0 0 15px; @@ -384,7 +329,7 @@ /** * Line with utils at the bottom */ -.item_bottom_utils { +.item .bottom-utils { width: 100%; height: 35px; margin: 0; @@ -393,46 +338,25 @@ -moz-box-sizing: border-box; } - /** - * Secondary feed items which are only shown on hover - */ - .feed_item .secondary_item_utils { + .item .bottom-utils ul { float: right; margin: 0 17px; } - .feed_item .secondary_item_utils, .feed_item .secondary_item_utils a { + .item .bottom-utils, + .item .bottom-utils a { color: #000; } - .feed_item:hover .secondary_item_utils li { + .item:hover .bottom-utils li { display: inline-block; } - .feed_item .secondary_item_utils li { + .item .bottom-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('../img/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]{ + .item .bottom-utils li input[type=checkbox]{ margin-left: 5px; } |