diff options
Diffstat (limited to 'css/news.css')
| -rw-r--r-- | css/news.css | 193 |
1 files changed, 132 insertions, 61 deletions
diff --git a/css/news.css b/css/news.css index 1f2b75a1b..41bb60662 100644 --- a/css/news.css +++ b/css/news.css @@ -63,6 +63,7 @@ div.feed_controls { right: 0; top: 3.5em; z-index: 1; + height: 3.3em; } div.feed_controls div.subscriptions_title { display: inline-block; @@ -78,17 +79,30 @@ div.feed_controls { } div.feed_controls div.feed_title h1 { - max-width: 450px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + font-size: 1.2em; + line-height: 2.6em; + font-weight: bold; + color: #333; } - div.feed_controls h1 { - font-size: 1.5em; - color: #444; - padding-top: .5em; - } + @media all and (min-width: 1280px){ + div.feed_controls div.feed_title h1 { max-width: 450px; } + } + + @media all and (max-width: 1279px) and (min-width: 1024px){ + div.feed_controls div.feed_title h1 { max-width: 230px; } + } + + @media all and (max-width: 1023px) and (min-width: 950px){ + div.feed_controls div.feed_title h1 { max-width: 130px; } + } + + @media all and (max-width: 949px){ + div.feed_controls div.feed_title h1 { display: none; } + } div.feed_controls .controls { float: right; @@ -98,23 +112,44 @@ div.feed_controls { /* feed/folder list */ #leftcontent { width: 21.5em; - top: 3.5em !important; - padding: 0 0 3em 0; margin: 0; z-index: 0; + position: relative; overflow: hidden; + top: 0; + bottom: 0; } + #leftcontent h1 { + background-color: #DBDBDB; + border-bottom: 1px solid #CCCCCC; + border-top: 1px solid #D4D4D4; + color: #333333; + font-weight: bold; + display: block; + font-size: 1.2em; + max-width: 100%; + padding: 0 0.8em; + text-shadow: 0 1px 0 #F8F8F8; + line-height: 2.6em; + } + #feeds { - clear: both; background-color: #f8f8f8; - position: relative; - overflow: auto; - height: 100%; + position: absolute; + top: 3.3em; + bottom: 2.8em; + left: 0; + right: 0; box-sizing: border-box; -moz-box-sizing: border-box; } + #feeds ul { + height: 100%; + overflow: auto; + } + #feeds li { padding: 0px !important; } @@ -152,7 +187,10 @@ div.feed_controls { background-image: url('%webroot%/core/img/loader.gif'); background-size: 16px 16px; background-repeat: no-repeat; - background-position: 20em center; + background-position: right center; + /* uncomment if webkit supports this + background-position: right 5px center; + */ } #feeds li.feed:hover { @@ -232,29 +270,9 @@ div.feed_controls { /* feed settings */ -#addfolder { - background: url('%webroot%/core/img/places/folder.svg') no-repeat left center; - padding-left: 20px !important; -} - -#addfeed { - background: url('%appswebroot%/news/img/rss.svg') no-repeat left center; - padding-left: 20px !important; -} - -#addfeedbtn { - background: url('%appswebroot%/news/img/rss.svg') no-repeat left; - padding-left: 20px; -} - -#importopmlbtn { - background: url('%appswebroot%/news/img/opml-icon.svg') no-repeat left center; - padding-left: 20px; -} - #feed_settings { padding: 0; - bottom:0px; + bottom: 0px; overflow:visible; height:2.8em; width: 21.5em; @@ -264,12 +282,73 @@ div.feed_controls { solid #ccc; position:fixed; } + + #feed_settings .controls { + height: 100%; + width: 100%; + } + + #feed_settings #addfeedfolder { + margin: 0 .3em .3em .3em; + float: left; + + } + + #feed_settings #addfeedfolder #addfolder { + background: url('%webroot%/core/img/places/folder.svg') no-repeat 10px center; + } + + #feed_settings #addfeedfolder #addfeed { + background: url('%appswebroot%/news/img/rss.svg') no-repeat 10px center; + } + + /* + #feed_settings #addfeedfolder:hover ul#feedfoldermenu{ + display: block; + }*/ + + #feed_settings ul#feedfoldermenu { + display: none; + background:#EEEEEE; + background:-webkit-gradient(linear, 0 0, 0 100%, from(#DCDCDC), to(#EEEEEE)); + background:-moz-linear-gradient(#DCDCDC, #EEEEEE); + background:-o-linear-gradient(#DCDCDC, #EEEEEE); + background:linear-gradient(#DCDCDC, #EEEEEE); + position:fixed; + margin-left: 0; + bottom: 2.8em; + border-left:1px solid #ccc; + border-top:1px solid #ccc; + border-right:1px solid #ccc; + border-bottom: 0; + -moz-box-shadow: 0 -3px 3px -3px #000; + -webkit-box-shadow: 0 -3px 3px -3px #000; + box-shadow: 0 -3px 3px -3px #000; + } + + #feed_settings ul#feedfoldermenu li { + padding: 0 1em 0 2.5em; + float: none !important; + text-align: left; + } + + #feed_settings ul#feedfoldermenu li:hover { + background-color: #ccc !important; + } + + +#addfeedbtn { + background: url('%appswebroot%/news/img/rss.svg') no-repeat left; + padding-left: 20px; +} -ul.controls li { - float: left; +#importopmlbtn { + background: url('%appswebroot%/news/img/opml-icon.svg') no-repeat left center; + padding-left: 20px; } + /* item view */ #rightcontent { top: 3.5em !important; @@ -465,42 +544,34 @@ div.dialog { ul#dropdownmenu { left: 0em; - box-shadow: 0px 0px 10px #000; -} - -ul#feedfoldermenu { - position:fixed; - margin-left: 0; - bottom: 2.8em; - border-left:1px solid #ccc; - border-top:1px solid #ccc; - border-right:1px solid #ccc; - -moz-box-shadow: 0 -3px 3px -3px #000; - -webkit-box-shadow: 0 -3px 3px -3px #000; - box-shadow: 0 -3px 3px -3px #000; } -li.menuItem { - margin-left:0.7em; - margin-right:0.7em; - float: none !important; - text-align: left; -} ul.menu { position: absolute; - z-index:100; + z-index:1; margin-left: 0.3em; display: none; background:#EEEEEE; - background:-webkit-gradient(linear, 0 0, 0 100%, from(#DCDCDC), to(#EEEEEE)); - background:-moz-linear-gradient(#DCDCDC, #EEEEEE); - background:-o-linear-gradient(#DCDCDC, #EEEEEE); - background:linear-gradient(#DCDCDC, #EEEEEE); + background:-webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#f1f1f1)); + background:-moz-linear-gradient(#eee, #f1f1f1); + background:-o-linear-gradient(#eee, #f1f1f1); + background:linear-gradient(#eee, #f1f1f1); + border: 1px solid #ccc; } + ul.menu .menuItem { + padding: 2px 5px; + min-width: 11em; + } + + ul.menu .menuItem:hover { + background-color: #ddd; + } + .popup.bottomleft { - left: 3.8em; + left: 34.8em; + /*left: 3.8em;*/ } |