From 0f12ead5dd6d7d72e741ce0aadf222341ce94f3b Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Tue, 26 Mar 2013 20:24:03 +0400 Subject: digest: add barebones smartphone mode --- plugins/digest/mobile.css | 345 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 345 insertions(+) create mode 100644 plugins/digest/mobile.css (limited to 'plugins/digest/mobile.css') diff --git a/plugins/digest/mobile.css b/plugins/digest/mobile.css new file mode 100644 index 000000000..8c0ddd347 --- /dev/null +++ b/plugins/digest/mobile.css @@ -0,0 +1,345 @@ +body#ttrssDigest { + color : black; + font-family : sans-serif; + font-size : 12px; + margin : 0px; + background : url("images/tile.png"); +} + +a { + color : #0069D8; + text-decoration : none; +} + +a:hover { + color : gray; +} + +#header a, #footer a { + color : gray; +} + +#header a:hover, #footer a:hover { + color : #0069D8; +} + +#header { + font-size : 14px; + font-weight : bold; + font-family : "Segoe UI", Tahoma, sans-serif; + padding : 5px 5px 5px 1.5em; + color : gray; + position : absolute; + top : 0px; + height : 30px; + left : 0px; + right : 0px; + color : #a0a0a0; +} + +#header span.title { + font-weight : bold; + font-style : italic; +} + +#header div.links { + position : absolute; + right : 1.5em; +} + +#search { + float : right; + clear : left; + +} + +#title { +} + +#latest { + padding : 5px; +} + +#content { + position : absolute; + left : 0px; + top : 30px; + right : 0px; + bottom : 0px; + -webkit-transition: left 0.2s linear, right 0.2s linear; + -moz-transition: left 0.2s linear, right 0.2s linear; + transition: left 0.2s linear, right 0.2s linear; +} + +#article { + position : absolute; + overflow : auto; + right : 0px; + width : 100%; + bottom : 0px; + top : 30px; + background : white; + z-index : -1; + opacity : 0; + -webkit-transition: opacity 0.2s linear; + -moz-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; +} + +#article.visible { + opacity : 1; +} + +#article #article-content h1 { + margin : 0px; + padding : 0px; + font-family : "Segoe UI", Tahoma, sans-serif; + font-size : 21px; + font-weight : bold; + border-width : 0px 0px 3px 0px; + border-style : solid; + border-color : #e0e0e0; + color : gray; +} + +#article #article-content #toolbar { + border-width : 0px 0px 1px 0px; + border-color : #e0e0e0; + border-style : solid; + background : #fafafa; + font-size : 14px; + font-weight : bold; + padding : 5px 10px 5px 10px; + margin : 0px 0px 0px 0px; +} + +#article #article-content { + padding : 0px; + font-size : 16px; +} + +#article #article-content #tags { + color : #a0a0a0; + margin-bottom : 5px; +} + +#article #article-content #ops { + float : right; +} + +#article #article-content #ops img { + cursor : pointer; + margin-right : 0px; + margin-left : 10px; +} + +#article #article-content #inner { + padding : 10px; +} + +#article #article-content img { + max-width : 90%; +} + +#content.move { + left : 0px; + right : 100%; +} + +#feeds { + position : absolute; + left : 0px; + top : 0px; + right : 0px; + bottom : 0px; + font-size : 14px; + overflow : auto; +} + +#feeds ul#feeds-content img { + width : 16px; + height : 16px; + vertical-align : middle; + margin-right : 5px; +} + +#feeds ul#feeds-content div.unread-ctr { + color : #d0d0d0; + padding-left : 10px; + float : right; +} + +#feeds ul#feeds-content li { + padding : 10px; + clear : both; + cursor : pointer; + color : #303030; + white-space : nowrap; +} + +#feeds ul#feeds-content li.selected { + background : white; +} + +#feeds ul#feeds-content { + list-style-type : none; + font-weight : bold; + margin : 0px; + padding : 0px; +} + +#headlines { + font-size : 14px; + position : absolute; + top : 0px; + bottom : 0px; + right : 0px; + overflow : auto; + background : white; + border-width : 0px 3px 0px 0px; + border-style : solid; + border-color : #88b0f0; + left : 100%; + + -webkit-transition: left 0.2s linear, right 0.2s linear; + -moz-transition: left 0.2s linear, right 0.2s linear; + transition: left 0.2s linear, right 0.2s linear; + +} + +#headlines.move { + left : 0px; +} + +#headlines h1 a { + color : #684C99; +} + +#headlines ul#headlines-content .cb { + vertical-align : middle; + margin-right : 5px; + float : left; +} + +#headlines ul#headlines-content img.icon { + width : 16px; + height : 16px; + vertical-align : middle; + margin-right : 5px; + float : right; +} + +#headlines ul#headlines-content { + list-style-type : none; + color : gray; + margin : 0px; + padding : 0px; +} + +#headlines ul#headlines-content li { + margin : 0px 0px 0px 0px; + padding : 10px; + color : gray; + clear : left; + border-width : 0px 0px 1px 0px; + border-style : solid; + border-color : #e0e0e0; + background : #eee; +} + +#headlines ul#headlines-content a.title { + font-size : 14px; + font-weight : bold; + display : block; + margin-left : 21px; + position : relative; +} + +#headlines ul#headlines-content li.fresh a.title { + color : #007FFF; +} + +#headlines ul#headlines-content li.unread a.title { + color : black; + /* color : #8DB1D6; */ +} + +#headlines ul#headlines-content li.read a.title { + color : gray; +} + +#headlines ul#headlines-content li.unread, +#headlines ul#headlines-content li.fresh { + background-color : white; +} + +#headlines ul#headlines-content li.selected { + background-color : #fff7d5; + border-color : white white #e0e0e0; +} + +#headlines ul#headlines-content img#H-LOADING-IMG { + margin-left : 5px; +} + +#headlines ul#headlines-content div.excerpt { + color : #404040; + cursor : pointer; + margin-top : 5px; +} + +#headlines ul#headlines-content div.content { + color : #404040; +} + +#headlines ul#headlines-content div.content img { + max-width : 75%; +} + +#headlines ul#headlines-content div.body { + margin-left : 21px; + /*margin-left : 42px;*/ +} + +#headlines ul#headlines-content div.info { + font-size : 11px; + margin-top : 5px; +} + +#headlines ul#headlines-content div.info a { + color : gray; +} + +#overlay { + background : white; + left : 0; + top : 0; + height : 100%; + width : 100%; + z-index : 100; + position : absolute; + text-align : center; +} + +#overlay_inner { + margin : 1em; +} + +#overlay img { + vertical-align : middle; +} + +div.fatalError button { + margin-top : 5px; +} + +div.fatalError textarea { + width : 100%; + height : 100px; +} + +div.insensitive { + color : gray; +} + + -- cgit v1.2.3 From 4f281ec432fcf1cf2313aa720909420fd69b546b Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Tue, 26 Mar 2013 20:29:59 +0400 Subject: digest: smartphone ui css tweaks --- plugins/digest/mobile.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'plugins/digest/mobile.css') diff --git a/plugins/digest/mobile.css b/plugins/digest/mobile.css index 8c0ddd347..89989dfe6 100644 --- a/plugins/digest/mobile.css +++ b/plugins/digest/mobile.css @@ -79,7 +79,6 @@ a:hover { bottom : 0px; top : 30px; background : white; - z-index : -1; opacity : 0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; @@ -154,6 +153,7 @@ a:hover { bottom : 0px; font-size : 14px; overflow : auto; + background : white; } #feeds ul#feeds-content img { -- cgit v1.2.3