diff --git a/README.markdown b/README.markdown index b71b20e..5b9bb4c 100644 --- a/README.markdown +++ b/README.markdown @@ -80,6 +80,7 @@ External projects build around Miniflux: - [Miniflux embedded](https://github.com/repat/miniflux-embedded-android) is an Android app for Miniflux. It's basically an embedded WebView that saves your Miniflux URL and cookies. [Download on the Play Store](https://play.google.com/store/apps/details?id=de.repat.embeddedminiflux). - [munin-miniflux](https://github.com/dewey/munin-plugins/tree/master/munin-miniflux) is a munin wildcard plugin to draw graphs of your miniflux read and unread count. +- [Hello Theme](https://github.com/meradoou/hello) Theme for Miniflux. Todo and known bugs ------------------- diff --git a/themes/hello/README.md b/themes/hello/README.md index 63d2b7a..20e85c6 100755 --- a/themes/hello/README.md +++ b/themes/hello/README.md @@ -1,7 +1,7 @@ hello ===== -Un thème pour [Miniflux 1.1.3](http://miniflux.net/) avec utilisation de : +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/) diff --git a/themes/hello/css/app.css b/themes/hello/css/app.css index 00a1381..927117a 100755 --- a/themes/hello/css/app.css +++ b/themes/hello/css/app.css @@ -62,24 +62,9 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, 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 { +header nav li > a:before, .page-header ul li a, .items .item-menu li a:before, #current-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 */ } - form { background-color: #fFFFFF; padding: 10px; } @@ -227,15 +212,6 @@ header { header .logo span { color: #b3e6cc; } -span#nav-counter:not(:empty):before, span#page-counter:not(:empty):before { - content: " ("; } -span#nav-counter:not(:empty):after, span#page-counter:not(:empty):after { - content: ")"; } -span.items-count:before { - content: "("; } -span.items-count:after { - content: ")"; } - section.page { right: 0; width: 81.69839%; @@ -289,50 +265,48 @@ section.page { 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: "\f143"; } - .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: "\f1b3"; } - .page-header ul li a[href="?action=api"]:after { - content: "\f0ec"; } - .page-header ul li a[href*="action=refresh-feed"]:after { - content: "\f021"; } - + .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; } -article[data-item-bookmark="1"] .bookmark-icon:before { - content: "★"; } -article[data-item-bookmark="0"] .bookmark-icon:before { - content: "☆"; } - -section.page[data-item-page="feed-items"] article[data-item-status="read"] { - background-color: rgba(153, 153, 153, 0.7); } +#page-counter, #nav-counter { + margin: 0 3px; } + #page-counter:before, #nav-counter:before { + content: " ("; } + #page-counter:after, #nav-counter:after { + content: ") "; } .items article { -moz-box-shadow: 0 3px 0 #006644; @@ -341,18 +315,23 @@ section.page[data-item-page="feed-items"] article[data-item-status="read"] { background-color: #fFFFFF; margin-bottom: 15px; padding: 10px 20px; } - .items article[data-item-status="read"] .read-icon:before { - content: "✔"; } - .items article[data-item-bookmark="1"] .item-menu a.bookmark:before { - content: "\f088"; } - .items article[data-item-bookmark="0"] .item-menu a.bookmark:before { - content: "\f087"; } + .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 .bookmark-icon { + display: none; } + .items article h2 .favicon { + height: 16px; + width: 16px; } .items article h2 .feed-last-checked { font-size: .8em; } .items article .preview { @@ -379,24 +358,32 @@ section.page[data-item-page="feed-items"] article[data-item-status="read"] { .items .item-menu li a:before { margin-right: 2px; } .items .item-menu li a:first-child:before { - content: "\f0b0"; } + content: "\f09e"; } .items .item-menu li a.original:before { - content: "\f08e"; } + 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.bookmark:before { + content: "\f005"; } + .items .item-menu li a.bookmark[data-reverse-label*="remove"]:before { + content: "\f006"; } .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=confirm-disable-feed"]:before { + content: "\f05c"; } .items .item-menu li a[href*="action=enable-feed"]:before { content: "\f05d"; } .items #bottom-menu { @@ -492,6 +479,12 @@ section.page[data-item-page="feed-items"] article[data-item-status="read"] { text-decoration: none; } #current-item .item-infos li a:hover { text-decoration: underline; } + #current-item .item-infos li a.bookmark-icon:before { + content: "\f006"; } + #current-item .item-infos li a.bookmark-icon[data-reverse-title*="remove"]:before { + content: "\f005"; } + #current-item .item-infos li a.bookmark-icon:hover { + text-decoration: none; } #current-item #item-content { padding: 10px 0; *zoom: 1; } @@ -517,6 +510,11 @@ section.page[data-item-page="feed-items"] article[data-item-status="read"] { #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; diff --git a/themes/hello/scss/_common.scss b/themes/hello/scss/_common.scss index da5ece5..42afc2d 100755 --- a/themes/hello/scss/_common.scss +++ b/themes/hello/scss/_common.scss @@ -30,12 +30,4 @@ $alert-info: #40bac8; $alert-sucess: #72c5a1; // Logo -$logo-basecolor: #339966; - -// Icons -$icon-bracket-open: "("; -$icon-bracket-close: ")"; -$icon-read: "✔"; -$icon-bookmarked: "★"; -$icon-not-bookmarked: "☆"; -$icon-loading: "☀"; \ No newline at end of file +$logo-basecolor: #339966; \ No newline at end of file diff --git a/themes/hello/scss/_core.scss b/themes/hello/scss/_core.scss index 549043c..7e12a26 100755 --- a/themes/hello/scss/_core.scss +++ b/themes/hello/scss/_core.scss @@ -1,6 +1,6 @@ body { background-color: $theme-background-main; - + font: { family: $ui-font-content; weight: normal; @@ -9,7 +9,7 @@ body { > header, > section { - bottom: 0; + bottom: 0; top: 0; } @@ -119,34 +119,6 @@ header { } } } - -// Counter -span { - &#nav-counter, - &#page-counter { - &:not(:empty) { - &:before { - content: " " + $icon-bracket-open; - } - - &:after { - content: $icon-bracket-close; - } - } - } - - &.items-count { - &:before { - content: $icon-bracket-open; - } - - &:after { - content: $icon-bracket-close; - } - } -} - - // Main container section { &.page { @@ -163,156 +135,170 @@ section { } } } -// Toolbar -.page-header { - margin: 0 0 15px; - @include pie-clearfix; +.page { + // Toolbar + &-header { + margin: 0 0 15px; + @include pie-clearfix; - h2 { - float: left; - line-height: 30px; - @extend %title; - } - ul { - float: right; + h2 { + float: left; + line-height: 30px; + @extend %title; + } + ul { + float: right; - li { - @include inline-block; - text-align: center; - - 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; - - &:after { - position: absolute; - top: 0; - left: 0; - line-height: 25px; - z-index: 999; - text-indent: 0; + li { + @include inline-block; + text-align: center; + + 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; - } - - - a{ - &[href*="action=unread"], - &[href*="action=feed-items"] { - &[href*="direction=asc"] { - &:after { - content: "\f162"; - } - } - } - } - a { - &[href*="action=unread"], - &[href*="action=feed-items"] { - &[href*="direction=desc"] { - &:after { - content: "\f163"; - } - } - } - } - - a{ - &[href*="mark-as-read"], - &[href*="mark-feed-as-read"] { &:after { - content: "\f058"; + position: absolute; + top: 0; + left: 0; + line-height: 25px; + z-index: 999; + text-indent: 0; + } + + &[href*="action=unread"], + &[href*="action=feed-items"] { + &[href*="direction=asc"] { + &:after { + content: "\f162"; + } + } + } + &[href*="action=unread"], + &[href*="action=feed-items"] { + &[href*="direction=desc"] { + &:after { + content: "\f163"; + } + } + } + &[href*="mark-as-read"], + &[href*="mark-feed-as-read"] { + &:after { + content: "\f058"; + } + } + &[href="?action=add"] { + &:after { + content: "\f067"; + } + } + &[href="?action=import"] { + &:after { + content: "\f093"; + } + } + &[href="?action=export"] { + &:after { + content: "\f019"; + } + } + &[href="?action=refresh-all"] { + &:after { + content: "\f021"; + } + } + &[href="?action=confirm-flush-history"] { + &:after { + content: "\f014"; + } + } + &[href="?action=feeds"] { + &:after { + content: "\f09e"; + } + } + &[href="?action=config"] { + &:after { + content: "\f013"; + } + } + + &[href="?action=help"] { + &:after { + content: "\f128"; + } + } + + &[href="?action=services"] { + &:after { + content: "\f1e0"; + } + } + &[href="?action=about"] { + &:after { + content: "\f129"; + } + } + &[href="?action=database"] { + &:after { + content: "\f1c0"; + } + } + &[href="?action=api"] { + &:after { + content: "\f0ec"; + } + } + &[href*="action=refresh-feed"] { + &:after { + content: "\f021"; + } } } - } - a[href="?action=add"] { - &:after { - content: "\f067"; - } - } - a[href="?action=import"] { - &:after { - content: "\f093"; - } - } - a[href="?action=export"] { - &:after { - content: "\f019"; - } - } - a[href="?action=refresh-all"] { - &:after { - content: "\f021"; - } - } - a[href="?action=confirm-flush-history"] { - &:after { - content: "\f014"; - } - } - a[href="?action=feeds"] { - &:after { - content: "\f143"; - } - } - a[href="?action=config"] { - &:after { - content: "\f013"; - } - } - a[href="?action=help"] { - &:after { - content: "\f128"; - } - } - a[href="?action=services"] { - &:after { - content: "\f1e0"; - } - } - a[href="?action=about"] { - &:after { - content: "\f129"; - } - } - a[href="?action=database"] { - &:after { - content: "\f1b3"; - } - } - a[href="?action=api"] { - &:after { - content: "\f0ec"; - } - } - a[href*="action=refresh-feed"] { - &:after { - content: "\f021"; - } + } } } + + &-section { + h2 { + @extend %title; + margin: { + bottom: 15px; + top: 15px; + } + } + } + } - .page-section { - h2 { - @extend %title; - margin: { - bottom: 15px; - top: 15px; - } - } - } +// Counters +#page { + &-counter { + margin: 0 3px; + + &:before { + content: " ("; + } + &:after { + content: ") "; + } + } +} +#nav-counter { + @extend #page-counter; +} \ No newline at end of file diff --git a/themes/hello/scss/_icons.scss b/themes/hello/scss/_icons.scss old mode 100644 new mode 100755 index 08532be..47b34e3 --- a/themes/hello/scss/_icons.scss +++ b/themes/hello/scss/_icons.scss @@ -8,16 +8,3 @@ %awesome { font-family: "FontAwesome"; } - -// Loading -.loading-icon:before { - content: $icon-loading; - 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 */ -} \ No newline at end of file diff --git a/themes/hello/scss/_items.scss b/themes/hello/scss/_items.scss index e4ff9ba..9edf486 100755 --- a/themes/hello/scss/_items.scss +++ b/themes/hello/scss/_items.scss @@ -1,29 +1,3 @@ -article { - &[data-item-bookmark="1"] { - .bookmark-icon:before { - content: $icon-bookmarked; - } - } - - &[data-item-bookmark="0"] { - .bookmark-icon:before { - content: $icon-not-bookmarked; - } - } -} - -section { - &.page { - &[data-item-page="feed-items"] { - article { - &[data-item-status="read"] { - background-color: rgba(lighten(black,60%), .7); - } - } - } - } -} - .items { article { @@ -33,45 +7,39 @@ section { padding: 10px 20px; &[data-item-status="read"] { - .read-icon:before { - content: $icon-read; - } + // &[data-item-status="feed-items"] { + background-color: rgba(lighten(black,60%), .7); + // } } - &[data-item-bookmark="1"] { - .item-menu { - a { - &.bookmark { - &:before { - content: "\f088"; - } - } - } - } - } - - &[data-item-bookmark="0"] { - .item-menu { - a { - &.bookmark { - &:before { - content: "\f087"; - } - } - } - } - } - h2 { display: block; margin-bottom: 5px; + %commonChld { + display: inline-block; + } + + a, + .favicon { + @extends %commonChld; + vertical-align: middle; + } + a { @extend %title; color: #000; text-decoration: none; } + .bookmark-icon { + display: none; + } + + .favicon { + height: 16px; + width: 16px; + } .feed-last-checked { font-size: .8em; } @@ -112,12 +80,12 @@ section { &:first-child { &:before { - content: "\f0b0"; + content: "\f09e"; } } &.original { &:before { - content: "\f08e"; + content: "\f0ac"; } } &[href*="action=confirm-remove-feed"] { @@ -136,6 +104,20 @@ section { } } + // Add to bookmark + &.bookmark { + &:before { + content: "\f005"; + } + // remove to bookmark + &[data-reverse-label*="remove"] { + &:before { + content: "\f006"; + } + } + } + + &[href*="action=mark-item-removed"] { &:before { content: "\f014"; @@ -143,11 +125,19 @@ section { } } + // Mark as Read &.mark { &:before { - content: "\f058"; - } + content: "\f05d"; + } + // Mark as Unread + &[data-action="mark-read"] { + &:before { + content: "\f058"; + } + } } + &[href*="action=disable-grabber-feed"] { &:before { content: "\f057"; @@ -158,6 +148,11 @@ section { content: "\f058"; } } + &[href*="action=confirm-disable-feed"] { + &:before { + content: "\f05c"; + } + } &[href*="action=enable-feed"] { &:before { content: "\f05d"; diff --git a/themes/hello/scss/_single.scss b/themes/hello/scss/_single.scss index 51a1d71..615ce99 100755 --- a/themes/hello/scss/_single.scss +++ b/themes/hello/scss/_single.scss @@ -1,6 +1,5 @@ #current-item { position: relative; - > nav { @include pie-clearfix; @@ -80,6 +79,22 @@ &:hover{ text-decoration: underline; } + &.bookmark-icon { + @extend %awesome; + + &:before { + content: "\f006"; + } + &[data-reverse-title*="remove"] { + &:before { + content: "\f005"; + } + } + + &:hover { + text-decoration: none; + } + } } } } @@ -109,7 +124,14 @@ } } p { + margin: { + top: 5px; + bottom: 5px; + } + &:first-letter{ + text-transform: uppercase; + } } ul, ol { diff --git a/themes/hello/scss/_utilities.scss b/themes/hello/scss/_utilities.scss old mode 100644 new mode 100755