Update Hello skin

This commit is contained in:
Frederic Guillot 2015-01-06 22:59:56 -05:00
parent 34def70106
commit a45d69dee4
9 changed files with 307 additions and 326 deletions

View File

@ -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
-------------------

View File

@ -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/)

View File

@ -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;

View File

@ -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: "";
$logo-basecolor: #339966;

View File

@ -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;
}

13
themes/hello/scss/_icons.scss Normal file → Executable file
View File

@ -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 */
}

View File

@ -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";

View File

@ -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 {

0
themes/hello/scss/_utilities.scss Normal file → Executable file
View File