diff options
author | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-09-13 19:46:40 +0200 |
---|---|---|
committer | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-09-13 19:47:29 +0200 |
commit | 31f812730e763a180962b35bb0d6713781755be2 (patch) | |
tree | 7e5320597ace4f209e9e5d5e8ba3e8b02da36081 /css/content.css | |
parent | 146c4773273c5f2dfda96d51b91f259ef9097904 (diff) |
styling for expanded view
Diffstat (limited to 'css/content.css')
-rw-r--r-- | css/content.css | 71 |
1 files changed, 65 insertions, 6 deletions
diff --git a/css/content.css b/css/content.css index feafc7c96..3472a4c80 100644 --- a/css/content.css +++ b/css/content.css @@ -7,6 +7,10 @@ * @author Bernhard Posselt <dev@bernhard-posselt.com> * @copyright Bernhard Posselt 2014 */ + +/** + * First run styles + */ #first-run { display: none; height: 100%; @@ -48,8 +52,13 @@ background-image: url('../img/arrow.svg'); background-repeat: no-repeat; } +.first-run #app-content-wrapper { + height: 100%; +} - +/** + * Content styles + */ #app-content.loading-content { background: url('../img/loading.gif') no-repeat; background-position: calc(50% - 16px) calc(50% - 16px); @@ -71,16 +80,32 @@ background-position: calc(50% - 16px) calc(50% - 16px); } -.first-run #app-content-wrapper { - height: 100%; -} - /** * Rules for a single feed item */ +#app-content .only-in-expanded { + display: block; +} + +#app-content .compact .only-in-expanded { + display: none; +} + +#app-content .only-in-compact { + display: none; +} + +#app-content .compact .only-in-compact { + display: block; +} + #app-content .item { cursor: default; border-bottom: 1px solid #eee; + background-image: linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 84px); +} + +#app-content :not(.compact) .item { } #app-content .item:last-child { @@ -94,7 +119,7 @@ width: 100%; line-height: 52px; box-sizing: border-box; - padding: 30px 50px 0 15px; + padding: 15px 50px 0 15px; } #app-content .compact .utils { @@ -191,8 +216,42 @@ color: #888; } +/** + * Expanded content + */ +#app-content .heading { + padding: 25px 0 10px 0; +} +#app-content .heading h1 { + font-size: 19px; + margin-right: 182px; + word-wrap: break-word; +} + #app-content .heading a { + font-weight: bold; + color: #000; + } + #app-content .heading a:hover { + color: #222; + text-decoration: underline; + } + +#app-content .heading .date { + float: right; + display: inline-block; + font-size: 15px; +} + +#app-content .read .heading a { + font-weight: normal !important; + color: #888; +} + +#app-content .feed-view .source { + display: none; +} /** * Actual content |