diff --git a/themes/hello/README.md b/themes/hello/README.md index 20e85c6..a19cd1b 100755 --- a/themes/hello/README.md +++ b/themes/hello/README.md @@ -3,7 +3,11 @@ hello Un thème pour [Miniflux](http://miniflux.net/) avec utilisation de : -* Font Awesome 4 .1 [http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/) +* Font Awesome 4 .2 [http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/) +Merci à +* [pcwalden](https://github.com/pcwalden) +* [fguillot](https://github.com/fguillot/) +* [mkresin](https://github.com/mkresin) diff --git a/themes/hello/config.rb b/themes/hello/config.rb index 6b15afb..a498cb9 100755 --- a/themes/hello/config.rb +++ b/themes/hello/config.rb @@ -9,7 +9,7 @@ fonts_dir = "fonts" # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed -output_style = :nested +output_style = :compact # To enable relative paths to assets via compass helper functions. Uncomment: relative_assets = true diff --git a/themes/hello/css/app.css b/themes/hello/css/app.css old mode 100755 new mode 100644 index 6d76fab..69dc975 --- a/themes/hello/css/app.css +++ b/themes/hello/css/app.css @@ -1,693 +1,235 @@ @charset "UTF-8"; @import url(http://fonts.googleapis.com/css?family=Montserrat:700,400); -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font: inherit; - font-size: 100%; - vertical-align: baseline; } +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } -html { - line-height: 1; } +html { line-height: 1; } -ol, ul { - list-style: none; } +ol, ul { list-style: none; } -table { - border-collapse: collapse; - border-spacing: 0; } +table { border-collapse: collapse; border-spacing: 0; } -caption, th, td { - text-align: left; - font-weight: normal; - vertical-align: middle; } +caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -q, blockquote { - quotes: none; } - q:before, q:after, blockquote:before, blockquote:after { - content: ""; - content: none; } +q, blockquote { quotes: none; } +q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -a img { - border: none; } +a img { border: none; } -article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { - display: block; } +article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } -.alert.alert-normal h3, .page-header h2, .page-section h2, .items article h2 a, .item > h1 { - font-family: "Montserrat", sans-serif; - font-weight: 700; - font-size: 1rem; } +.alert.alert-normal h3, .page-header h2, .page-section h2, .items article h2 a, .item > h1 { font-family: "Montserrat", "Liberation Sans", sans-serif; font-weight: 700; font-size: 1rem; } -.items article .preview { - font-family: Helvetica, Arial, sans-serif; - font-size: 0.9rem; } +.items article .preview { font-family: Helvetica, Arial, sans-serif; font-size: 0.9rem; } -@font-face { - font-family: 'FontAwesome'; - src: url("../fonts/fontawesome-webfont.eot?v=4.1.0"); - src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg"); - font-weight: normal; - font-style: normal; } -header nav li > a:before, .page-header ul li a, .items .item-menu li a:before, .item .item-infos li a.bookmark-icon { - font-family: "FontAwesome"; } +@font-face { font-family: 'FontAwesome'; src: url("../fonts/fontawesome-webfont.eot?v=4.1.0"); src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } +header nav li > a:before, .page-header ul li a, .items .item-menu li a:before, .items #bottom-menu > a, .item .item-infos li a.bookmark-icon { font-family: "FontAwesome"; } -.loading-icon:before { - content: "☀"; - animation-name: blinker; - -webkit-animation-name: blinker; - /* Chrome, Safari, Opera */ - animation-duration: 500ms; - -webkit-animation-duration: 500ms; - /* Chrome, Safari, Opera */ - animation-timing-function: ease-in-out; - -webkit-animation-timing-function: ease-in-out; - /* Chrome, Safari, Opera */ - animation-iteration-count: infinite; - -webkit-animation-iteration-count: infinite; - /* Chrome, Safari, Opera */ } +.loading-icon:before { content: "☀"; animation-name: blinker; -webkit-animation-name: blinker; /* Chrome, Safari, Opera */ animation-duration: 500ms; -webkit-animation-duration: 500ms; /* Chrome, Safari, Opera */ animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */ animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */ } -form { - background-color: #fFFFFF; - padding: 10px; } - form input, - form button, - form textarea, - form select { - font-family: Helvetica, Arial, sans-serif; - font-size: 1em; - color: #595959; } - form input, - form textarea, - form select { - background-color: white; - border: 1px solid #f2f2f2; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - padding: 5px; } - form label, - form input, - form select { - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - *zoom: 1; - *display: inline; } - form label[for*="form-"] { - width: 26.35432%; } - form input[type="submit"], - form button[type="button"], - form button[type="submit"] { - background-color: #009463; - color: #f2f2f2; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - cursor: pointer; - padding: 10px; - border: 1px solid #f2f2f2; } - form ul { - list-style-type: square; - margin: 10px 40px; } +form { background-color: #fFFFFF; padding: 10px; } +form input, form button, form textarea, form select { font-family: Helvetica, Arial, sans-serif; font-size: 1em; color: #595959; } +form input, form textarea, form select { background-color: white; border: 1px solid #f2f2f2; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 5px; } +form label, form input, form select { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; margin-bottom: 5px; } +form label[for*="form-"] { width: 26.35432%; } +form input[type="submit"], form button[type="button"], form button[type="submit"] { background-color: #009463; color: #f2f2f2; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; padding: 10px; border: 1px solid #f2f2f2; } +form ul { list-style-type: square; margin: 10px 40px; } -.alert { - padding: 5px 10px; - border: 1px solid #f2f2f2; - margin: 10px 0; } - .alert.alert-error { - background-color: rgba(253, 242, 213, 0.7); - color: rgba(77, 16, 10, 0.8); - font-size: .8em; } - .alert.alert-normal { - background-color: #fFFFFF; - border-width: 0px; - padding-top: 10px; - padding-bottom: 10px; } - .alert.alert-normal ul { - list-style-type: square; - margin: 10px 40px; } - .alert.alert-info { - background-color: rgba(183, 229, 234, 0.7); - color: rgba(13, 43, 47, 0.8); } - .alert.alert-success { - background-color: rgba(222, 242, 233, 0.7); - color: rgba(31, 76, 56, 0.8); - border-color: #001a11; } - .alert#shortcuts li strong:before { - content: " ' "; } - .alert#shortcuts li strong:after { - content: " ' "; } +.alert { padding: 5px 10px; border: 1px solid #f2f2f2; margin: 10px 0; font-size: 1em; } +.alert.alert-error { background-color: rgba(248, 201, 196, 0.7); color: rgba(77, 16, 10, 0.8); } +.alert.alert-normal { background-color: #fFFFFF; border-width: 0px; padding-top: 10px; padding-bottom: 10px; } +.alert.alert-normal ul { list-style-type: square; margin: 10px 40px; } +.alert.alert-info { background-color: rgba(183, 229, 234, 0.7); color: rgba(13, 43, 47, 0.8); } +.alert.alert-success { background-color: rgba(222, 242, 233, 0.7); color: rgba(31, 76, 56, 0.8); border-color: #001a11; } +.alert#shortcuts li strong:before { content: " ' "; } +.alert#shortcuts li strong:after { content: " ' "; } -.hide-desktop { - display: none; } +.hide-desktop { display: none; } -body { - background-color: #e8e8e8; - font-family: Helvetica, Arial, sans-serif; - font-weight: normal; - line-height: 25px; } - body > header, - body > section { - bottom: 0; - top: 0; } - body > section { - overflow: auto; - position: absolute; } +body { background-color: #e8e8e8; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 25px; } +body > header, body > section { bottom: 0; top: 0; } +body > section { overflow: auto; position: absolute; } -header { - background-color: #009966; - left: 0; - position: fixed; - overflow: hidden; - width: 14.64129%; } - header nav { - margin: 20px auto; - position: relative; - width: 90%; } - header nav > ul { - margin-top: 30px; } - header nav li { - line-height: 30px; } - header nav li.active a { - color: #edbf47; } - header nav li > a { - color: white; - margin-left: 5px; - text-decoration: none; - font-family: "Montserrat", sans-serif; - font-weight: bold; } - header nav li > a:hover { - color: #edbf47; } - header nav li > a:before { - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - *zoom: 1; - *display: inline; - color: white; - margin-right: 10px; - text-align: center; - width: 24px; } - header nav li > a[href="?action=unread"]:before { - content: ""; } - header nav li > a[href="?action=bookmarks"]:before { - content: ""; } - header nav li > a[href="?action=history"]:before { - content: ""; } - header nav li > a[href="?action=feeds"]:before { - content: ""; } - header nav li > a[href="?action=config"]:before { - content: ""; } - header nav li > a[href="?action=logout"]:before { - content: ""; } - header nav li > a[href="?action=more"]:before { - content: "\f009"; } - header .logo { - color: white; - display: block; - font-size: 1.6em; - margin: 0 auto; - text-align: center; - text-decoration: none; - width: 70%; } - header .logo span { - color: #b3e6cc; } +header { background-color: #009966; left: 0; position: fixed; overflow: hidden; width: 14.64129%; } +header nav { margin: 20px auto; position: relative; width: 90%; } +header nav > ul { margin-top: 30px; } +header nav li { line-height: 30px; overflow: hidden; text-overflow: ellipsis; color: white; } +header nav li.active a { color: #edbf47; } +header nav li > a { color: white; margin-left: 5px; text-decoration: none; font-family: "Montserrat", "Liberation Sans", sans-serif; font-weight: bold; white-space: nowrap; } +header nav li > a:hover { color: #edbf47; } +header nav li > a:before { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; color: white; font-weight: normal; margin-right: 10px; text-align: center; width: 24px; } +header nav li > a[href="?action=unread"]:before { content: ""; } +header nav li > a[href="?action=bookmarks"]:before { content: ""; } +header nav li > a[href="?action=history"]:before { content: ""; } +header nav li > a[href="?action=feeds"]:before { content: ""; } +header nav li > a[href="?action=config"]:before { content: ""; } +header nav li > a[href="?action=logout"]:before { content: ""; } +header nav li > a[href="?action=more"]:before { content: "\f009"; } +header .logo { color: white; display: block; font-size: 1.6em; margin: 0 auto; text-align: center; text-decoration: none; width: 70%; } +header .logo span { color: #b3e6cc; } -section.page { - right: 0; - width: 81.69839%; - padding: 10px 20px; } - section.page .page-header { - position: relative; } - section.page a { - color: #009966; } +section.page { right: 0; width: 81.69839%; padding: 10px 20px; } +section.page .page-header { position: relative; } +section.page a { color: #009966; } -.page-header { - margin: 0 0 15px; - *zoom: 1; } - .page-header:after { - content: ""; - display: table; - clear: both; } - .page-header h2 { - float: left; - line-height: 30px; } - .page-header ul { - float: right; } - .page-header ul li { - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - *zoom: 1; - *display: inline; - text-align: center; } - .page-header ul li a, - .page-header ul li a:after { - overflow: hidden; - display: block; - height: 25px; - text-decoration: none; - width: 25px; } - .page-header ul li a { - background-color: #f2f2f2; - color: #008055; - position: relative; - text-indent: -999px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - -moz-box-shadow: 0 3px 0 #009966; - -webkit-box-shadow: 0 3px 0 #009966; - box-shadow: 0 3px 0 #009966; } - .page-header ul li a:after { - position: absolute; - top: 0; - left: 0; - line-height: 25px; - z-index: 999; - text-indent: 0; } - .page-header ul li a[href*="action=unread"][href*="direction=asc"]:after, .page-header ul li a[href*="action=feed-items"][href*="direction=asc"]:after { - content: "\f162"; } - .page-header ul li a[href*="action=unread"][href*="direction=desc"]:after, .page-header ul li a[href*="action=feed-items"][href*="direction=desc"]:after { - content: "\f163"; } - .page-header ul li a[href*="mark-as-read"]:after, .page-header ul li a[href*="mark-feed-as-read"]:after { - content: "\f058"; } - .page-header ul li a[href="?action=add"]:after { - content: "\f067"; } - .page-header ul li a[href="?action=import"]:after { - content: "\f093"; } - .page-header ul li a[href="?action=export"]:after { - content: "\f019"; } - .page-header ul li a[href="?action=refresh-all"]:after { - content: "\f021"; } - .page-header ul li a[href="?action=confirm-flush-history"]:after { - content: "\f014"; } - .page-header ul li a[href="?action=feeds"]:after { - content: "\f09e"; } - .page-header ul li a[href="?action=config"]:after { - content: "\f013"; } - .page-header ul li a[href="?action=help"]:after { - content: "\f128"; } - .page-header ul li a[href="?action=services"]:after { - content: "\f1e0"; } - .page-header ul li a[href="?action=about"]:after { - content: "\f129"; } - .page-header ul li a[href="?action=database"]:after { - content: "\f1c0"; } - .page-header ul li a[href="?action=api"]:after { - content: "\f0ec"; } - .page-header ul li a[href*="action=refresh-feed"]:after { - content: "\f021"; } -.page-section h2 { - margin-bottom: 15px; - margin-top: 15px; } +.page-header { margin: 0 0 15px; *zoom: 1; } +.page-header:after { content: ""; display: table; clear: both; } +.page-header h2 { float: left; line-height: 30px; } +.page-header ul { float: right; } +.page-header ul li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; text-align: center; } +.page-header ul li a, .page-header ul li a:after { overflow: hidden; display: block; height: 25px; text-decoration: none; width: 25px; } +.page-header ul li a { background-color: #f2f2f2; color: #008055; position: relative; text-indent: -999px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 #009966; -webkit-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; } +.page-header ul li a:after { position: absolute; top: 0; left: 0; line-height: 25px; z-index: 999; text-indent: 0; } +.page-header ul li a[href*="action=unread"][href*="direction=asc"]:after, .page-header ul li a[href*="action=feed-items"][href*="direction=asc"]:after { content: "\f162"; } +.page-header ul li a[href*="action=unread"][href*="direction=desc"]:after, .page-header ul li a[href*="action=feed-items"][href*="direction=desc"]:after { content: "\f163"; } +.page-header ul li a[href*="mark-as-read"]:after, .page-header ul li a[href*="mark-feed-as-read"]:after { content: "\f058"; } +.page-header ul li a[href="?action=add"]:after { content: "\f067"; } +.page-header ul li a[href="?action=import"]:after { content: "\f093"; } +.page-header ul li a[href="?action=export"]:after { content: "\f019"; } +.page-header ul li a[href="?action=refresh-all"]:after { content: "\f021"; } +.page-header ul li a[href="?action=confirm-flush-history"]:after { content: "\f014"; } +.page-header ul li a[href="?action=feeds"]:after { content: "\f09e"; } +.page-header ul li a[href="?action=config"]:after { content: "\f013"; } +.page-header ul li a[href="?action=help"]:after { content: "\f128"; } +.page-header ul li a[href="?action=services"]:after { content: "\f1e0"; } +.page-header ul li a[href="?action=about"]:after { content: "\f129"; } +.page-header ul li a[href="?action=database"]:after { content: "\f1c0"; } +.page-header ul li a[href="?action=api"]:after { content: "\f084"; } +.page-header ul li a[href*="action=refresh-feed"]:after { content: "\f021"; } +.page-header ul li a[href*="action=console"]:after { content: "\f120"; } +.page-header ul li a[href*="action=flush-console"]:after { content: "\f12d"; } +.page-section h2 { margin-bottom: 15px; margin-top: 15px; } -#page-counter, #nav-counter, .items-count { - margin: 0 3px; } - #page-counter:not(:empty):before, #nav-counter:not(:empty):before, .items-count:not(:empty):before { - content: " ("; } - #page-counter:not(:empty):after, #nav-counter:not(:empty):after, .items-count:not(:empty):after { - content: ") "; } +#page-counter, #nav-counter, .items-count { margin: 0 3px; } +#page-counter:not(:empty):before, #nav-counter:not(:empty):before, .items-count:not(:empty):before { content: " ("; } +#page-counter:not(:empty):after, #nav-counter:not(:empty):after, .items-count:not(:empty):after { content: ") "; } -.items article { - -moz-box-shadow: 0 3px 0 #006644; - -webkit-box-shadow: 0 3px 0 #006644; - box-shadow: 0 3px 0 #006644; - background-color: #fFFFFF; - margin-bottom: 15px; - padding: 10px 20px; } - .items article[data-item-bookmark="0"] .bookmark:before { - content: "\f005"; } - .items article[data-item-bookmark="1"] .bookmark:before { - content: "\f006"; } - .items article[data-item-status="read"] { - background-color: rgba(153, 153, 153, 0.7); } - .items article h2 { - display: block; - margin-bottom: 5px; } - .items article h2 a, - .items article h2 .favicon { - @extends %commonChld; - vertical-align: middle; } - .items article h2 a { - color: #000; - text-decoration: none; } - .items article h2 .favicon { - height: 16px; - width: 16px; } - .items article h2 .feed-last-checked { - font-size: .8em; } - .items article .preview { - display: block; - line-height: 25px; } -.items .item-menu { - font-size: 0.9rem; - margin-top: 5px; } - .items .item-menu li { - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - *zoom: 1; - *display: inline; } - .items .item-menu li:before { - content: " / "; - padding-right: 5px; - padding-left: 5px; } - .items .item-menu li:first-child:before { - display: none; } - .items .item-menu li:first-child a:before { - content: "\f09e"; } - .items .item-menu li a { - color: #008055; - text-decoration: none; } - .items .item-menu li a:before { - margin-right: 2px; } - .items .item-menu li a.original:before { - content: "\f0ac"; } - .items .item-menu li a[href*="action=confirm-remove-feed"]:before { - content: "\f014"; } - .items .item-menu li a[href*="action=edit-feed"]:before { - content: "\f044"; } - .items .item-menu li a[href*="action=refresh-feed"]:before { - content: "\f021"; } - .items .item-menu li a[href*="action=mark-item-removed"]:before { - content: "\f014"; - margin-right: 2px; } - .items .item-menu li a.mark:before { - content: "\f05d"; } - .items .item-menu li a.mark[data-action="mark-read"]:before { - content: "\f058"; } - .items .item-menu li a[href*="action=disable-grabber-feed"]:before { - content: "\f057"; } - .items .item-menu li a[href*="action=enable-grabber-feed"]:before { - content: "\f058"; } - .items .item-menu li a[href*="action=enable-feed"]:before { - content: "\f05d"; } -.items #bottom-menu { - display: none; - visibility: hidden; } +.feed-parsing-error { visibility: hidden; } -#items-paging { - display: block; - *zoom: 1; } - #items-paging:after { - content: ""; - display: table; - clear: both; } - #items-paging a { - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - -moz-box-shadow: 0 3px 0 #006644; - -webkit-box-shadow: 0 3px 0 #006644; - box-shadow: 0 3px 0 #006644; - background-color: #f2f2f2; - padding-left: 10px; - padding-right: 10px; - text-decoration: none; } - #items-paging #previous-page { - float: left; } - #items-paging #next-page { - float: right; } +.items article { -moz-box-shadow: 0 3px 0 #006644; -webkit-box-shadow: 0 3px 0 #006644; box-shadow: 0 3px 0 #006644; background-color: #fFFFFF; margin-bottom: 15px; padding: 10px 20px; } +.items article[data-item-bookmark="0"] .bookmark:before { content: "\f006"; } +.items article[data-item-bookmark="1"] .bookmark:before { content: "\f005"; } +.items article[data-item-status="read"] { background-color: rgba(153, 153, 153, 0.7); } +.items article[data-feed-error] { background-color: rgba(248, 201, 196, 0.7); } +.items article[data-feed-error] .feed-parsing-error { font-size: .8em; visibility: visible; } +.items article[data-feed-disabled="1"] { background-color: rgba(153, 153, 153, 0.7); } +.items article h2 { display: block; margin-bottom: 5px; } +.items article h2 a, .items article h2 .favicon { @extends %commonChld; vertical-align: middle; } +.items article h2 a { color: #000; text-decoration: none; } +.items article h2 .favicon { height: 16px; width: 16px; } +.items article h2 .feed-last-checked { font-size: .8em; } +.items article .preview { display: block; line-height: 25px; } +.items .item-menu { font-size: 0.9rem; margin-top: 5px; } +.items .item-menu li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; } +.items .item-menu li:before { content: " / "; padding-right: 5px; padding-left: 5px; } +.items .item-menu li:first-child:before { display: none; } +.items .item-menu li:first-child a:before { content: "\f09e"; } +.items .item-menu li a { color: #008055; text-decoration: none; } +.items .item-menu li a:before { margin-right: 2px; } +.items .item-menu li a.original:before { content: "\f0ac"; } +.items .item-menu li a[href*="action=confirm-remove-feed"]:before { content: "\f014"; } +.items .item-menu li a[href*="action=edit-feed"]:before { content: "\f044"; } +.items .item-menu li a[href*="action=refresh-feed"]:before { content: "\f021"; } +.items .item-menu li a[href*="action=mark-item-removed"]:before { content: "\f014"; margin-right: 2px; } +.items .item-menu li a.mark:before { content: "\f05d"; } +.items .item-menu li a.mark[data-action="mark-read"]:before { content: "\f058"; } +.items .item-menu li a[href*="action=disable-grabber-feed"]:before { content: "\f057"; } +.items .item-menu li a[href*="action=enable-grabber-feed"]:before { content: "\f058"; } +.items .item-menu li a[href*="action=enable-feed"]:before { content: "\f05d"; } +.items #bottom-menu { padding: 5px 0; margin-bottom: 10px; float: right; } +.items #bottom-menu > a, .items #bottom-menu > a:after { overflow: hidden; display: block; height: 25px; text-decoration: none; width: 25px; } +.items #bottom-menu > a { background-color: #f2f2f2; color: #008055; position: relative; text-indent: -999px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 #009966; -webkit-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; text-align: left; } +.items #bottom-menu > a:after { content: "\f058"; position: absolute; top: 0; left: 0; line-height: 25px; z-index: 999; text-indent: 0; text-align: center; } -.item { - position: relative; } - .item[data-item-bookmark="0"] .bookmark-icon:before { - content: "\f006"; } - .item[data-item-bookmark="1"] .bookmark-icon:before { - content: "\f005"; } - .item > nav { - *zoom: 1; } - .item > nav:after { - content: ""; - display: table; - clear: both; } - .item > nav.top { - display: block; - float: right; } - .item > nav.bottom { - display: none; } - .item > nav span { - -moz-box-shadow: 0 3px 0 #009966; - -webkit-box-shadow: 0 3px 0 #009966; - box-shadow: 0 3px 0 #009966; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - background-color: #f2f2f2; - display: block; - padding: 5px 10px; - color: #7f7f7f; } - .item > nav span a { - text-decoration: none; - color: #009966; } - .item > nav span.nav-left { - float: left; - margin-right: 10px; } - .item > nav span.nav-right { - float: right; } - .item > h1 { - display: inline-block; - float: left; - line-height: 25px; - margin-bottom: 20px; - max-width: 82%; } - .item > h1 a { - color: #000; - text-decoration: none; - vertical-align: middle; } - .item .item-infos { - border-bottom: 1px solid #b2b2b2; - border-top: 1px solid #b2b2b2; - clear: both; - display: block; - padding: 0; } - .item .item-infos li { - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - *zoom: 1; - *display: inline; - font-size: 0.9rem; - margin: 10px 0; } - .item .item-infos li:before { - content: " / "; } - .item .item-infos li:first-child:before { - display: none; } - .item .item-infos li a { - color: #009966; - font-size: 0.9rem; - text-decoration: none; } - .item .item-infos li a:hover { - text-decoration: underline; } - .item .item-infos li a.bookmark-icon:hover { - text-decoration: none; } - .item #item-content { - padding: 10px 0; - *zoom: 1; } - .item #item-content:after { - content: ""; - display: table; - clear: both; } - .item #item-content #item-content-enclosure { - display: none; } +#items-paging { clear: both; display: block; *zoom: 1; } +#items-paging:after { content: ""; display: table; clear: both; } +#items-paging a { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 #006644; -webkit-box-shadow: 0 3px 0 #006644; box-shadow: 0 3px 0 #006644; background-color: #f2f2f2; padding-left: 10px; padding-right: 10px; text-decoration: none; } +#items-paging #previous-page { float: left; } +#items-paging #next-page { float: right; } -#item-content h1, #item-content h2, #item-content h3, #item-content h4 { - font-family: "Montserrat", sans-serif; - padding: 15px 0 5px 0; } -#item-content h1 { - font-size: 1.5em; - margin-left: 5px; } -#item-content h2 { - font-size: 1.4em; - margin-left: 10px; } -#item-content h3 { - font-size: 1.3em; - margin-left: 15px; } -#item-content h4 { - font-size: 1.2em; - margin-left: 20px; } -#item-content p { - margin-top: 5px; - margin-bottom: 5px; } - #item-content p:first-letter { - text-transform: uppercase; } -#item-content ul, -#item-content ol { - list-style-type: square; - margin: 10px 0; - padding: 0 0 0 30px; } -#item-content pre, -#item-content q, -#item-content blockquote { - padding: 10px; - margin-top: 10px; - margin-bottom: 10px; - background-color: #fFFFFF; } -#item-content q, -#item-content blockquote { - margin-left: 20px; - margin-right: 20px; } -#item-content strong { - font-weight: bold; } -#item-content img { - display: block; - margin: 15px auto 15px auto; - max-width: 50%; } +.item { position: relative; } +.item[data-item-bookmark="0"] .bookmark-icon:before { content: "\f006"; } +.item[data-item-bookmark="1"] .bookmark-icon:before { content: "\f005"; } +.item > nav { *zoom: 1; } +.item > nav:after { content: ""; display: table; clear: both; } +.item > nav.top { display: block; float: right; } +.item > nav.bottom { display: none; } +.item > nav span { -moz-box-shadow: 0 3px 0 #009966; -webkit-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #f2f2f2; display: block; padding: 5px 10px; color: #7f7f7f; } +.item > nav span a { text-decoration: none; color: #009966; } +.item > nav span.nav-left { float: left; margin-right: 10px; } +.item > nav span.nav-right { float: right; } +.item > h1 { display: inline-block; float: left; line-height: 25px; margin-bottom: 20px; max-width: 82%; } +.item > h1 a { color: #000; text-decoration: none; vertical-align: middle; } +.item .item-infos { border-bottom: 1px solid #b2b2b2; border-top: 1px solid #b2b2b2; clear: both; display: block; padding: 0; } +.item .item-infos li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; font-size: 0.9rem; margin: 10px 0; } +.item .item-infos li:before { content: " / "; } +.item .item-infos li:first-child:before { display: none; } +.item .item-infos li a { color: #009966; font-size: 0.9rem; text-decoration: none; } +.item .item-infos li a:hover { text-decoration: underline; } +.item .item-infos li a.bookmark-icon:hover { text-decoration: none; } +.item #item-content { padding: 10px 0; *zoom: 1; } +.item #item-content:after { content: ""; display: table; clear: both; } +.item #item-content #item-content-enclosure { display: none; } -#login-page { - background-color: #e8e8e8; } - #login-page section { - width: auto; - position: relative; - overflow: visible; } - #login-page section.page { - margin: 20px; - width: 480px; } - #login-page .page-header { - visibility: hidden; } - #login-page form { - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - border-radius: 10px; - -moz-box-shadow: 0 3px 0 #009966; - -webkit-box-shadow: 0 3px 0 #009966; - box-shadow: 0 3px 0 #009966; - background-color: #fFFFFF; - margin-left: 20px; - padding: 10px; } - #login-page form > * { - margin: 10px; } - #login-page form [type="text"], - #login-page form [type="password"] { - width: 380px; } +#item-content h1, #item-content h2, #item-content h3, #item-content h4 { font-family: "Montserrat", "Liberation Sans", sans-serif; padding: 15px 0 5px 0; } +#item-content h1 { font-size: 1.5em; margin-left: 5px; } +#item-content h2 { font-size: 1.4em; margin-left: 10px; } +#item-content h3 { font-size: 1.3em; margin-left: 15px; } +#item-content h4 { font-size: 1.2em; margin-left: 20px; } +#item-content p { margin-top: 5px; margin-bottom: 5px; } +#item-content p:first-letter { text-transform: uppercase; } +#item-content ul, #item-content ol { list-style-type: square; margin: 10px 0; padding: 0 0 0 30px; } +#item-content pre, #item-content q, #item-content blockquote { padding: 10px; margin-top: 10px; margin-bottom: 10px; background-color: #fFFFFF; } +#item-content q, #item-content blockquote { margin-left: 20px; margin-right: 20px; } +#item-content strong { font-weight: bold; } +#item-content img { display: block; margin: 15px auto 15px auto; max-width: 50%; } -@media only screen and (max-width: 480px) { - #login-page section.page { - margin: 5px; - width: auto; } - #login-page form { - margin: 0 auto; - padding: 10px; } - #login-page form [type="text"], - #login-page form [type="password"] { - width: 220px; } } -@media only screen and (max-width: 960px) { - #login-page { - background: url("../images/bg-small.jpg") repeat center center; } +#login-page { background-color: #e8e8e8; } +#login-page section { width: auto; position: relative; overflow: visible; } +#login-page section.page { margin: 20px; width: 480px; } +#login-page .page-header { visibility: hidden; } +#login-page form { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 3px 0 #009966; -webkit-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; background-color: #fFFFFF; margin-left: 20px; padding: 10px; } +#login-page form > * { margin: 10px; } +#login-page form [type="text"], #login-page form [type="password"] { width: 380px; } +#login-page form + div { margin-left: 20px; margin-top: 20px; } +#login-page form + div h3 { font-weight: bold; } +#login-page form + div ul { list-style-type: square; padding-left: 25px; } - body > header { - top: 5px; - left: 20px; - bottom: inherit; - width: auto; - z-index: 999; - background-color: transparent !important; } - body > .page { - width: 100%; - position: relative; } - - header nav { - width: auto; - margin: auto; } - header nav .logo { - display: none; } - header nav > ul { - margin: auto; } - header nav li { - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - *zoom: 1; - *display: inline; - padding: 5px 0; } - header nav li:first-child { - display: none; } - header nav li a { - display: block; - color: #009966; } - header nav li a[href*="action=more"] { - width: 35px; - height: 35px; - line-height: 35px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - -moz-box-shadow: 0 3px 0 #006644; - -webkit-box-shadow: 0 3px 0 #006644; - box-shadow: 0 3px 0 #006644; - background-color: #f2f2f2; } - header nav li a[href*="action=more"]:before { - height: 100%; - width: 100%; - line-height: inherit; } - header nav li a:before { - color: #009966; } - - .page .page-header h2 { - visibility: hidden; } - .page .page-header ul li a, - .page .page-header ul li a:after { - width: 35px; - height: 35px; - line-height: 35px; } - - .menu-more { - margin-top: 50px; } - .menu-more li { - display: block; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - -moz-box-shadow: 0 3px 0 #006644; - -webkit-box-shadow: 0 3px 0 #006644; - box-shadow: 0 3px 0 #006644; - background-color: #f2f2f2; - margin: 10px auto; } - .menu-more li a { - display: block; - padding: 10px 20px; - text-decoration: none; - width: 100%; } - - .items article .preview { - display: none; } - - #current-item { - padding-top: 35px; } - #current-item nav.top { - display: none; } - #current-item nav.bottom { - display: block; } - #current-item > h1 { - float: none; } - #current-item iframe { - width: 100%; } - - form label { - display: block; } - form label[for*="form-"] { - width: auto; } - - .alert.alert-normal ul { - margin: 10px 5px; } - - .hide-mobile { - display: none !important; } - - .hide-desktop { - display: block; } } +@media only screen and (max-width: 480px) { #login-page section.page { margin: 5px; width: auto; } + #login-page form { margin: 0 auto; padding: 10px; } + #login-page form [type="text"], #login-page form [type="password"] { width: 220px; } } +@media only screen and (max-width: 980px) { body > header { top: 5px; left: 20px; bottom: inherit; width: auto; z-index: 999; background-color: transparent !important; } + body > .page { width: auto !important; position: relative; } + header nav { width: auto; margin: auto; } + header nav .logo { display: none; } + header nav > ul { margin: auto; } + header nav li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; padding: 5px 0; } + header nav li:first-child { display: none; } + header nav li a { display: block; color: #009966; } + header nav li a[href*="action=more"] { width: 35px; height: 35px; line-height: 35px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 #006644; -webkit-box-shadow: 0 3px 0 #006644; box-shadow: 0 3px 0 #006644; background-color: #f2f2f2; } + header nav li a[href*="action=more"]:before { height: 100%; width: 100%; line-height: inherit; } + header nav li a:before { color: #009966; } + .page .page-header h2 { visibility: hidden; } + .page .page-header ul li a, .page .page-header ul li a:after { width: 35px; height: 35px; line-height: 35px; } + .menu-more { margin-top: 50px; } + .menu-more li { display: block; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 #006644; -webkit-box-shadow: 0 3px 0 #006644; box-shadow: 0 3px 0 #006644; background-color: #f2f2f2; margin: 10px auto; } + .menu-more li a { display: block; padding: 10px 20px; text-decoration: none; width: 100%; } + .items article { padding-left: 10px; padding-right: 10px; } + .items article .preview { display: none; } + .items .item-menu { display: block; *zoom: 1; } + .items .item-menu:after { content: ""; display: table; clear: both; } + .items .item-menu li:first-child { display: block; float: left; } + .items .item-menu li:last-child { float: right; } + .items .item-menu li:last-child:before { display: none; visibility: hidden; } + .items .item-menu li .mark, .items .item-menu li .mark:before { height: 25px; text-align: center; width: 25px; } + .items .item-menu li .mark { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 #006644; -webkit-box-shadow: 0 3px 0 #006644; box-shadow: 0 3px 0 #006644; background-color: #f2f2f2; display: block; position: relative; overflow: hidden; text-indent: -999px; } + .items .item-menu li .mark:before { position: absolute; top: 0; left: 0; line-height: 25px; z-index: 999; text-indent: 0; } + #current-item { padding-top: 35px; } + #current-item nav.top { display: none; } + #current-item nav.bottom { display: block; } + #current-item > h1 { float: none; } + #current-item iframe { width: 100%; } + form label { display: block; } + form label[for*="form-"] { width: auto; } + .alert.alert-normal ul { margin: 10px 5px; } + .hide-mobile { display: none !important; } + .hide-desktop { display: block; } } diff --git a/themes/hello/fonts/FontAwesome.otf b/themes/hello/fonts/FontAwesome.otf old mode 100755 new mode 100644 index 3461e3f..81c9ad9 Binary files a/themes/hello/fonts/FontAwesome.otf and b/themes/hello/fonts/FontAwesome.otf differ diff --git a/themes/hello/fonts/fontawesome-webfont.eot b/themes/hello/fonts/fontawesome-webfont.eot old mode 100755 new mode 100644 index 6cfd566..84677bc Binary files a/themes/hello/fonts/fontawesome-webfont.eot and b/themes/hello/fonts/fontawesome-webfont.eot differ diff --git a/themes/hello/fonts/fontawesome-webfont.svg b/themes/hello/fonts/fontawesome-webfont.svg old mode 100755 new mode 100644 index a9f8469..d907b25 --- a/themes/hello/fonts/fontawesome-webfont.svg +++ b/themes/hello/fonts/fontawesome-webfont.svg @@ -32,473 +32,489 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - \ No newline at end of file diff --git a/themes/hello/fonts/fontawesome-webfont.ttf b/themes/hello/fonts/fontawesome-webfont.ttf old mode 100755 new mode 100644 index 5cd6cff..96a3639 Binary files a/themes/hello/fonts/fontawesome-webfont.ttf and b/themes/hello/fonts/fontawesome-webfont.ttf differ diff --git a/themes/hello/fonts/fontawesome-webfont.woff b/themes/hello/fonts/fontawesome-webfont.woff old mode 100755 new mode 100644 index 9eaecb3..628b6a5 Binary files a/themes/hello/fonts/fontawesome-webfont.woff and b/themes/hello/fonts/fontawesome-webfont.woff differ diff --git a/themes/hello/scss/_alert.scss b/themes/hello/scss/_alert.scss index 42aa54b..b6c4022 100755 --- a/themes/hello/scss/_alert.scss +++ b/themes/hello/scss/_alert.scss @@ -2,13 +2,12 @@ padding: 5px 10px; border: 1px solid $button-background-grey; margin: 10px 0; + font-size: 1em; &.alert-error { - background-color: rgba(lighten($alert-warning, 30%), 0.7); - color: rgba(darken($alert-error, 40%), .8); - font-size: .8em; + background-color: $alert-error-background; + color: $alert-error-color; } - &.alert-normal { background-color: $theme-background-light; border-width: 0px; @@ -25,13 +24,12 @@ } } &.alert-info { - background-color: rgba(lighten($alert-info, 30%), 0.7); - color: rgba(darken($alert-info, 40%), .8); + background-color: $alert-info-background; + color: $alert-info-color; } - &.alert-success { - background-color: rgba(lighten($alert-sucess, 30%), 0.7); - color: rgba(darken($alert-sucess, 40%), .8); + background-color: $alert-success-background; + color: $alert-success-color; border-color: darken($theme-background-highlight, 25%); } &#shortcuts { diff --git a/themes/hello/scss/_common.scss b/themes/hello/scss/_common.scss index 42afc2d..2f0e5d7 100755 --- a/themes/hello/scss/_common.scss +++ b/themes/hello/scss/_common.scss @@ -17,7 +17,7 @@ $link-color-hover: #edbf47; // Font $ui-font-content: Helvetica, Arial, sans-serif; -$ui-font-highlight: "Montserrat", sans-serif; +$ui-font-highlight: "Montserrat","Liberation Sans", sans-serif; $ui-font-title-size: 1rem; $ui-font-content-size: .9rem; $ui-font-text-small: .9rem; @@ -26,8 +26,16 @@ $ui-font-color-content: #000; // Alerts $alert-warning: #f6c443; $alert-error: #e74c3c; +$alert-error-background: rgba(lighten($alert-error, 30%), 0.7); +$alert-error-color: rgba(darken($alert-error, 40%), .8); $alert-info: #40bac8; +$alert-info-background: rgba(lighten($alert-info, 30%), 0.7); +$alert-info-color: rgba(darken($alert-info, 40%), .8); $alert-sucess: #72c5a1; - +$alert-success-background: rgba(lighten($alert-sucess, 30%), 0.7); +$alert-success-color: rgba(darken($alert-sucess, 40%), .8); // Logo -$logo-basecolor: #339966; \ No newline at end of file +$logo-basecolor: #339966; + +// Items +$item-read-background: rgba(lighten(black,60%), .7); \ No newline at end of file diff --git a/themes/hello/scss/_core.scss b/themes/hello/scss/_core.scss index efe1726..a307c27 100755 --- a/themes/hello/scss/_core.scss +++ b/themes/hello/scss/_core.scss @@ -37,6 +37,9 @@ header { li { line-height: 30px; + overflow: hidden; + text-overflow: ellipsis; + color: lighten($theme-background-highlight, 75%); &.active { a { @@ -51,7 +54,7 @@ header { family: $ui-font-highlight; weight: bold; } - + white-space: nowrap; &:hover { color: $link-color-hover; } @@ -60,6 +63,7 @@ header { @extend %awesome; @include inline-block(middle); color: white; + font-weight: normal; margin-right: 10px; text-align: center; width: 24px; @@ -67,7 +71,7 @@ header { &[href="?action=unread"] { &:before { - content: "\f0e0" ; + content: "\f1ea" ; } } &[href="?action=bookmarks"] { @@ -81,8 +85,8 @@ header { } } &[href="?action=feeds"] { - &:before { - content: "\f143" ; + &:before { + content: "\f09e" ; } } &[href="?action=config"] { @@ -261,7 +265,7 @@ section { } &[href="?action=api"] { &:after { - content: "\f0ec"; + content: "\f084"; } } &[href*="action=refresh-feed"] { @@ -269,6 +273,16 @@ section { content: "\f021"; } } + &[href*="action=console"] { + &:after { + content: "\f120"; + } + } + &[href*="action=flush-console"] { + &:after { + content: "\f12d"; + } + } } } diff --git a/themes/hello/scss/_forms.scss b/themes/hello/scss/_forms.scss index 26de286..e8c8065 100755 --- a/themes/hello/scss/_forms.scss +++ b/themes/hello/scss/_forms.scss @@ -10,6 +10,7 @@ form { font-size: 1em; color: darken($button-background-grey, 60%); } + input, textarea, select { @@ -17,6 +18,7 @@ form { border: 1px solid $button-background-grey; @include border-radius(5px); padding: 5px; + &:focus { @@ -26,6 +28,9 @@ form { input, select { @include inline-block(middle); + margin: { + bottom: 5px; + } } label[for*="form-"] { width: px2cent(360px); diff --git a/themes/hello/scss/_items.scss b/themes/hello/scss/_items.scss index 5e6210f..b87c817 100755 --- a/themes/hello/scss/_items.scss +++ b/themes/hello/scss/_items.scss @@ -1,33 +1,43 @@ +.feed-parsing-error { + visibility: hidden; +} .items { article { - @include box-shadow(0 3px 0 darken($theme-background-highlight, 10%)); background-color: $theme-background-light; margin-bottom: 15px; padding: 10px 20px; - + // Add/Remove to bookmark &[data-item-bookmark="0"] { - .bookmark { - &:before { - content: "\f005"; - } - } - } - - &[data-item-bookmark="1"] { .bookmark { &:before { content: "\f006"; } } } - - &[data-item-status="read"] { - // &[data-item-status="feed-items"] { - background-color: rgba(lighten(black,60%), .7); - // } + &[data-item-bookmark="1"] { + .bookmark { + &:before { + content: "\f005"; + } + } + } + // Item read + &[data-item-status="read"] { + background-color: $item-read-background; + } + // Item error + &[data-feed-error] { + background-color: $alert-error-background; + .feed-parsing-error { + font-size: .8em; + visibility: visible; + } + } + // Item disabled + &[data-feed-disabled="1"]{ + background-color: $item-read-background; } - h2 { display: block; margin-bottom: 5px; @@ -155,11 +165,43 @@ } } #bottom-menu { - display: none; - visibility: hidden; + padding: 5px 0; + margin-bottom: 10px; + float: right; + + > a , + > a:after { + overflow: hidden; + display: block; + height: 25px; + text-decoration: none; + width: 25px; + } + > a { + background-color: $button-background-grey; + color: darken($theme-background-highlight, 5%); + position: relative; + text-indent: -999px; + @include border-radius(5px); + @include box-shadow(0 3px 0 $theme-background-highlight); + @extend %awesome; + text-align: left; + + &:after { + content: "\f058"; + position: absolute; + top: 0; + left: 0; + line-height: 25px; + z-index: 999; + text-indent: 0; + text-align: center; + } + } } } #items-paging { + clear: both; display: block; @include pie-clearfix; @@ -178,4 +220,4 @@ #next-page { float: right; } -} \ No newline at end of file +} diff --git a/themes/hello/scss/_login.scss b/themes/hello/scss/_login.scss index 6cf67b7..e40c296 100755 --- a/themes/hello/scss/_login.scss +++ b/themes/hello/scss/_login.scss @@ -29,6 +29,21 @@ [type="password"] { width: 380px; } + + div { + margin: { + left: 20px; + top: 20px; + } + + h3 { + font-weight: bold; + } + ul { + list-style-type: square; + + padding-left: 25px; + } + } } } \ No newline at end of file diff --git a/themes/hello/scss/_queries.scss b/themes/hello/scss/_queries.scss index 6251abd..96ca3b9 100755 --- a/themes/hello/scss/_queries.scss +++ b/themes/hello/scss/_queries.scss @@ -19,13 +19,22 @@ } } } + body { + > header { + + } + } + section { + &.page { + + } + } } -@media only screen and (max-width: 960px) { - #login-page { - background: url("../images/bg-small.jpg") repeat center center; - } - +@media only screen and (min-width: 481px) and (max-width: 980px) { + +} +@media only screen and (max-width: 980px) { body { > header { top: 5px; @@ -36,7 +45,7 @@ background-color: transparent !important; } > .page { - width: 100%; + width: auto !important; position: relative; } } @@ -126,10 +135,57 @@ } .items { article { + padding: { + left: 10px; + right: 10px; + } .preview { display: none; } } + + .item { + &-menu { + display: block; + + @include pie-clearfix; + li { + &:first-child { + display: block; + float: left; + } + &:last-child { + float: right; + &:before { + display: none; + visibility: hidden; + } + } + .mark, + .mark:before { + height: 25px; + text-align: center; + width: 25px; + } + .mark { + @include flat-box($theme-background-highlight, $button-background-grey, 5px); + display: block; + position: relative; + overflow: hidden; + text-indent: -999px; + + &:before { + position: absolute; + top: 0; + left: 0; + line-height: 25px; + z-index: 999; + text-indent: 0; + } + } + } + } + } } #current-item { padding-top: 35px; @@ -174,3 +230,7 @@ display: block; } } + +@media only screen and (max-width: 980px) { + +}