diff options
Diffstat (limited to 'css/news.css')
-rw-r--r-- | css/news.css | 357 |
1 files changed, 147 insertions, 210 deletions
diff --git a/css/news.css b/css/news.css index 595d13fdf..730fa6039 100644 --- a/css/news.css +++ b/css/news.css @@ -59,286 +59,222 @@ div.add_parentfolder { } /* feed/folder list */ -#leftcontent { +#leftcontent_news { width: 20em; margin: 0; - z-index: 0; + height: 100%; position: relative; overflow: hidden; - top: 0; - bottom: 0; + border-right: 1px solid #ccc; + background-color: #f8f8f8; + box-sizing: border-box; + -moz-box-sizing: border-box; } -#feeds { +#feed_wrapper { background-color: #f8f8f8; - position: absolute; + position: relative; top: 0; - bottom: 2.8em; - left: 0; - right: 0; + height: 100%; + padding-bottom: 2.8em; box-sizing: border-box; -moz-box-sizing: border-box; } +#feeds { + height: 100%; + overflow: auto; +} + #feeds > ul { height: 100%; - overflow: auto; + overflow-x: hidden; } - + .dnd_over { - -moz-transition: background-color 200ms ease 0s; - transition: background-color 200ms ease 0s; - background-color: #d0d0d0! important; + -moz-transition: padding-bottom 500ms ease 0s; + transition: padding-bottom 500ms ease 0s; + } + + #feeds > ul.dnd_over { + } .dnd_over > ul { - padding-bottom: 2.5em; - -moz-transition: padding-bottom 500ms ease 0s; - transition: padding-bottom 500ms ease 0s; + padding-bottom: 2.5em! important; + } + #feeds > ul ul.dnd_over { + padding-bottom: 2.5em !important; + } - #feeds .folder { - box-sizing: border-box; - -moz-box-sizing: border-box; - padding: .5em 0 .5em 2.5em !important; - background-color: #dfdfdf !important; - font-weight: bold ; - border-bottom: 1px solid #bbb !important; - position: relative; - z-index: 1; + .all_read { + font-weight: normal; } - #feeds .folder a { - float: none; - display: inline-block; - position: relative; + + #feeds .buttons { + position: absolute; + right: 0; + top: 0; + bottom: 0; + display: none; + } + + #feeds .buttons button { + margin: .65em .3em 0 0; + background-position: center; + background-repeat: no-repeat; } - #feeds .folder:hover { - background-color: #d0d0d0 !important; - -moz-transition: background-color 200ms ease 0s; - transition: background-color 200ms ease 0s; + #feeds li:hover > .buttons { + display: block; } - #feeds .subscriptions, #feeds .subscriptions:hover { - background-image: url('%appswebroot%/news/img/rss.svg'); - background-repeat: no-repeat; - background-size: 16px 16px; - background-position: .8em center; + #feeds .buttons button.feeds_delete { + background-image: url('%webroot%/core/img/actions/delete.svg'); + } + + #feeds .buttons button.feeds_edit { + background-image: url('%webroot%/core/img/actions/rename.svg'); + } + + #feeds .buttons button.feeds_markread { + background-image: url('%appswebroot%/news/img/mark_read.svg'); + } + + #feeds button.collapsable_trigger { + position: absolute; + left: .5em; + top: .4em; + background: none; + background-image: url('%webroot%/core/img/actions/triangle-s.svg'); + border: none; + border-radius: 0; + outline: none !important; + box-shadow: none; + -moz-box-shadow: none; + display: none; } - #feeds .starred, #feeds .starred:hover { - background-image: url('%appswebroot%/news/img/starred.svg'); - background-repeat: no-repeat; - background-size: 16px 16px; - background-position: .8em center; - + #feeds button.collapsable_trigger.triggered { + -moz-transform: rotate(-90deg); + transform: rotate(-90deg); } - #feeds .subscriptions a, #feeds .starred a { - display: inline-block; - width: 75%; + #feeds .folder.collapsable:hover button.collapsable_trigger { + display: block; } - #feeds li.feed { - position: relative; + #feeds li { + border-bottom: 1px solid #bbb; + padding: 0 .5em; + background-color: #dfdfdf; + font-weight: bold ; box-sizing: border-box; -moz-box-sizing: border-box; - border-bottom: 1px solid #ccc; - padding-left: 2.5em; - -moz-transition: background-color 200ms ease 0s; - transition: background-color 200ms ease 0s; - background-color: #f1f1f1; - z-index: 1; - background-size:16px 16px; - background-repeat: no-repeat; - background-position: .8em center; + width: 100%; + position: relative; } - - #feeds li.feed a { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - text-align: left; - width: 85%; - font-weight: bold; - } - - #feeds li.feed a.all_read, #feeds .all_read { - font-weight: normal; - } - #feeds li#selected_feed { - background-color: #ffffff !important; - font-style: oblique; - } + #feeds li#selected_feed { + background-color: #ffffff !important; + font-style: oblique; + } - #feeds li.feed.updating { - padding-right: 21px; - background-image: url('%webroot%/core/img/loader.gif'); + #feeds li a.title { + box-sizing: border-box; + -moz-box-sizing: border-box; + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + display: block; + padding-left: 2em; background-size: 16px 16px; background-repeat: no-repeat; - background-position: right center; + background-position: .2em center; + line-height: 2.5em; } - - #feeds li.feed:hover { - background-color: #ddd; - } - - #feeds li.feed .feeds_delete, - #feeds li.feed .feeds_edit { - display: none; - border: none; - } - - #feeds li.feed:hover .unreaditemcounter { - display: none; - } - #feeds li.feed:hover .feeds_delete, - #feeds li.feed:hover .feeds_edit, - #feeds .collapsable:hover .feeds_delete, - #feeds .collapsable:hover .feeds_edit { - display: inline-block; + #feeds li:hover > a.title { + width: 75%; } - #feeds .feeds_delete { - position: absolute; - right: 0.2em; - background: url('%webroot%/core/img/actions/delete.svg') no-repeat center; - display: none; - padding: 0; - margin: -8px 0 0 0; - top: 50%; - } - - #feeds .feeds_edit { - position: absolute; - right: 1.6em; - background: url('%webroot%/core/img/actions/rename.svg') no-repeat center; - display: none; - padding: 0; - margin: -8px 0 0 0; - top: 50%; - } - - #feeds .unreaditemcounter { - position: relative; - top: .3em; - right: .3em; - background: #5E5E5E; - border-radius: 5px; - padding: 2px 5px; - color: white; - text-align: center; - font-weight: normal; - margin: 0; - display: none; + #feeds .starred a.title { + background-image: url('%appswebroot%/news/img/starred.svg'); } - - #feeds .unreaditemcounter.all_read { - display: none !important; - } - #feeds li.collapsable_container { - background-color: #dfdfdf; - font-weight: bold; - padding: 0; - border: 0; - border-bottom: 1px solid #bbb; - position: relative; - z-index: 1; + #feeds .subscriptions a.title { + background-image: url('%appswebroot%/news/img/rss.svg'); } - #feeds li.collapsable_container.open { - background-image: linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%); - background-image: -o-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%); - background-image: -moz-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%); - background-image: -webkit-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%); - background-image: -ms-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%); - font-weight: bold; - padding: 0; - border: 0; - border-bottom: 1px solid #bbb; - border-top: 1px solid #bbb; - -webkit-box-shadow: inset 0 0 5px -1px #bbb; - box-shadow: inset 0 0 5px -1px #bbb; - } + #feeds .feed { + border-bottom: 1px solid #ccc; + background-color: #f1f1f1; + } - #feeds li.collapsable_container:hover { - background-color: #d0d0d0; - -moz-transition: background-color 200ms ease 0s; - transition: background-color 200ms ease 0s; - } - + #feeds .feed:hover { + background-color: #ddd; + } + #feeds .folder { + padding: 0 .5em; + } - #feeds li.collapsable_container.open > ul { - margin: 0 8px 8px 8px; - position: relative; - z-index: 1; + #feeds .folder:hover, #feeds .starred:hover, #feeds .subscriptions:hover { + background-color: #d0d0d0; } - #feeds li.collapsable_container > ul > li { - border: 1px solid #ccc; - border-bottom: 0; - } - - #feeds li.collapsable_container > ul > li:last-child { - border: 1px solid #ccc; - } - - #feeds div.collapsable { - position: relative; - z-index: 1; - border-radius: 5px; + #feeds .folder a.title { + background-image: url('%webroot%/core/img/places/folder.svg'); } - - #feeds .collapsable_trigger { - border: none ; - margin: 0 0 0 .8em; - padding: 0; - border-radius: 0; - box-shadow: none; - vertical-align: middle !important; - background: url('%webroot%/core/img/places/folder.svg') no-repeat; - outline: none; - opacity: 1; + #feeds .folder.collapsable:hover a { + background-image: none; } - #feeds .collapsable_container:hover .collapsable_trigger.triggerable { - background-image: url('%webroot%/core/img/actions/triangle-s.svg'); - -moz-transform: none; - transform: none; - } + #feeds .folder.collapsable.open { + background-image: linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%), + background-image: url('%webroot%/core/img/places/folder.svg'); + background-image: -o-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%), + background-image: url('%webroot%/core/img/places/folder.svg'); + background-image: -moz-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%), + background-image: url('%webroot%/core/img/places/folder.svg'); + background-image: -webkit-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%), + background-image: url('%webroot%/core/img/places/folder.svg'); + background-image: -ms-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%), + background-image: url('%webroot%/core/img/places/folder.svg'); + border-bottom: 1px solid #bbb; + border-top: 1px solid #bbb; + -webkit-box-shadow: inset 0 0 5px -1px #bbb; + box-shadow: inset 0 0 5px -1px #bbb; + padding-bottom: .5em; + } - #feeds .collapsable_container:hover .collapsable_trigger.triggered { - background-image: url('%webroot%/core/img/actions/triangle-s.svg'); - -moz-transform: rotate(-90deg); - transform: rotate(-90deg); + #feeds .folder.collapsable.open ul { + border: 1px solid #ccc; } - - #feeds .collapsable_title { - padding: .5em 0 .5em .5em; - line-height: 1.5em; - float: none; - display: inline-block; - position: relative; + + #feeds .folder.open ul li:last-child { + border-bottom: 0; } /* feed settings */ #feed_settings { padding: 0; - bottom: 0px; + bottom: 0; overflow:visible; height:2.8em; width: 20em; margin:0; + z-index: 2; background:#eee; - border-top:1px - solid #ccc; + border-top: 1px solid #ccc; + border-right: 1px solid #ccc; + box-sizing: border-box; + -moz-box-sizing: border-box; position:fixed; } @@ -410,6 +346,7 @@ div.add_parentfolder { background:-o-linear-gradient(#DCDCDC, #EEEEEE); background:linear-gradient(#DCDCDC, #EEEEEE); position:fixed; + z-index: 6; margin-left: 0; bottom: 2.8em; border-left:1px solid #ccc; |