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). - [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. - [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 Todo and known bugs
------------------- -------------------

View File

@ -1,7 +1,7 @@
hello 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/) * 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"); 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-weight: normal;
font-style: 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"; } 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 { form {
background-color: #fFFFFF; background-color: #fFFFFF;
padding: 10px; } padding: 10px; }
@ -227,15 +212,6 @@ header {
header .logo span { header .logo span {
color: #b3e6cc; } 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 { section.page {
right: 0; right: 0;
width: 81.69839%; width: 81.69839%;
@ -306,7 +282,7 @@ section.page {
.page-header ul li a[href="?action=confirm-flush-history"]:after { .page-header ul li a[href="?action=confirm-flush-history"]:after {
content: "\f014"; } content: "\f014"; }
.page-header ul li a[href="?action=feeds"]:after { .page-header ul li a[href="?action=feeds"]:after {
content: "\f143"; } content: "\f09e"; }
.page-header ul li a[href="?action=config"]:after { .page-header ul li a[href="?action=config"]:after {
content: "\f013"; } content: "\f013"; }
.page-header ul li a[href="?action=help"]:after { .page-header ul li a[href="?action=help"]:after {
@ -316,23 +292,21 @@ section.page {
.page-header ul li a[href="?action=about"]:after { .page-header ul li a[href="?action=about"]:after {
content: "\f129"; } content: "\f129"; }
.page-header ul li a[href="?action=database"]:after { .page-header ul li a[href="?action=database"]:after {
content: "\f1b3"; } content: "\f1c0"; }
.page-header ul li a[href="?action=api"]:after { .page-header ul li a[href="?action=api"]:after {
content: "\f0ec"; } content: "\f0ec"; }
.page-header ul li a[href*="action=refresh-feed"]:after { .page-header ul li a[href*="action=refresh-feed"]:after {
content: "\f021"; } content: "\f021"; }
.page-section h2 { .page-section h2 {
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 15px; } margin-top: 15px; }
article[data-item-bookmark="1"] .bookmark-icon:before { #page-counter, #nav-counter {
content: "★"; } margin: 0 3px; }
article[data-item-bookmark="0"] .bookmark-icon:before { #page-counter:before, #nav-counter:before {
content: "☆"; } content: " ("; }
#page-counter:after, #nav-counter:after {
section.page[data-item-page="feed-items"] article[data-item-status="read"] { content: ") "; }
background-color: rgba(153, 153, 153, 0.7); }
.items article { .items article {
-moz-box-shadow: 0 3px 0 #006644; -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; background-color: #fFFFFF;
margin-bottom: 15px; margin-bottom: 15px;
padding: 10px 20px; } padding: 10px 20px; }
.items article[data-item-status="read"] .read-icon:before { .items article[data-item-status="read"] {
content: "✔"; } background-color: rgba(153, 153, 153, 0.7); }
.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 h2 { .items article h2 {
display: block; display: block;
margin-bottom: 5px; } margin-bottom: 5px; }
.items article h2 a,
.items article h2 .favicon {
@extends %commonChld;
vertical-align: middle; }
.items article h2 a { .items article h2 a {
color: #000; color: #000;
text-decoration: none; } text-decoration: none; }
.items article h2 .bookmark-icon {
display: none; }
.items article h2 .favicon {
height: 16px;
width: 16px; }
.items article h2 .feed-last-checked { .items article h2 .feed-last-checked {
font-size: .8em; } font-size: .8em; }
.items article .preview { .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 { .items .item-menu li a:before {
margin-right: 2px; } margin-right: 2px; }
.items .item-menu li a:first-child:before { .items .item-menu li a:first-child:before {
content: "\f0b0"; } content: "\f09e"; }
.items .item-menu li a.original:before { .items .item-menu li a.original:before {
content: "\f08e"; } content: "\f0ac"; }
.items .item-menu li a[href*="action=confirm-remove-feed"]:before { .items .item-menu li a[href*="action=confirm-remove-feed"]:before {
content: "\f014"; } content: "\f014"; }
.items .item-menu li a[href*="action=edit-feed"]:before { .items .item-menu li a[href*="action=edit-feed"]:before {
content: "\f044"; } content: "\f044"; }
.items .item-menu li a[href*="action=refresh-feed"]:before { .items .item-menu li a[href*="action=refresh-feed"]:before {
content: "\f021"; } 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 { .items .item-menu li a[href*="action=mark-item-removed"]:before {
content: "\f014"; content: "\f014";
margin-right: 2px; } margin-right: 2px; }
.items .item-menu li a.mark:before { .items .item-menu li a.mark:before {
content: "\f05d"; }
.items .item-menu li a.mark[data-action="mark-read"]:before {
content: "\f058"; } content: "\f058"; }
.items .item-menu li a[href*="action=disable-grabber-feed"]:before { .items .item-menu li a[href*="action=disable-grabber-feed"]:before {
content: "\f057"; } content: "\f057"; }
.items .item-menu li a[href*="action=enable-grabber-feed"]:before { .items .item-menu li a[href*="action=enable-grabber-feed"]:before {
content: "\f058"; } 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 { .items .item-menu li a[href*="action=enable-feed"]:before {
content: "\f05d"; } content: "\f05d"; }
.items #bottom-menu { .items #bottom-menu {
@ -492,6 +479,12 @@ section.page[data-item-page="feed-items"] article[data-item-status="read"] {
text-decoration: none; } text-decoration: none; }
#current-item .item-infos li a:hover { #current-item .item-infos li a:hover {
text-decoration: underline; } 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 { #current-item #item-content {
padding: 10px 0; padding: 10px 0;
*zoom: 1; } *zoom: 1; }
@ -517,6 +510,11 @@ section.page[data-item-page="feed-items"] article[data-item-status="read"] {
#item-content h4 { #item-content h4 {
font-size: 1.2em; font-size: 1.2em;
margin-left: 20px; } 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 ul,
#item-content ol { #item-content ol {
list-style-type: square; list-style-type: square;

View File

@ -31,11 +31,3 @@ $alert-sucess: #72c5a1;
// Logo // Logo
$logo-basecolor: #339966; $logo-basecolor: #339966;
// Icons
$icon-bracket-open: "(";
$icon-bracket-close: ")";
$icon-read: "";
$icon-bookmarked: "";
$icon-not-bookmarked: "";
$icon-loading: "";

View File

@ -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 // Main container
section { section {
&.page { &.page {
@ -163,8 +135,9 @@ section {
} }
} }
} }
// Toolbar .page {
.page-header { // Toolbar
&-header {
margin: 0 0 15px; margin: 0 0 15px;
@include pie-clearfix; @include pie-clearfix;
@ -207,10 +180,6 @@ section {
text-indent: 0; text-indent: 0;
} }
}
a{
&[href*="action=unread"], &[href*="action=unread"],
&[href*="action=feed-items"] { &[href*="action=feed-items"] {
&[href*="direction=asc"] { &[href*="direction=asc"] {
@ -219,8 +188,6 @@ section {
} }
} }
} }
}
a {
&[href*="action=unread"], &[href*="action=unread"],
&[href*="action=feed-items"] { &[href*="action=feed-items"] {
&[href*="direction=desc"] { &[href*="direction=desc"] {
@ -229,85 +196,86 @@ section {
} }
} }
} }
}
a{
&[href*="mark-as-read"], &[href*="mark-as-read"],
&[href*="mark-feed-as-read"] { &[href*="mark-feed-as-read"] {
&:after { &:after {
content: "\f058"; content: "\f058";
} }
} }
} &[href="?action=add"] {
a[href="?action=add"] {
&:after { &:after {
content: "\f067"; content: "\f067";
} }
} }
a[href="?action=import"] { &[href="?action=import"] {
&:after { &:after {
content: "\f093"; content: "\f093";
} }
} }
a[href="?action=export"] { &[href="?action=export"] {
&:after { &:after {
content: "\f019"; content: "\f019";
} }
} }
a[href="?action=refresh-all"] { &[href="?action=refresh-all"] {
&:after { &:after {
content: "\f021"; content: "\f021";
} }
} }
a[href="?action=confirm-flush-history"] { &[href="?action=confirm-flush-history"] {
&:after { &:after {
content: "\f014"; content: "\f014";
} }
} }
a[href="?action=feeds"] { &[href="?action=feeds"] {
&:after { &:after {
content: "\f143"; content: "\f09e";
} }
} }
a[href="?action=config"] { &[href="?action=config"] {
&:after { &:after {
content: "\f013"; content: "\f013";
} }
} }
a[href="?action=help"] {
&[href="?action=help"] {
&:after { &:after {
content: "\f128"; content: "\f128";
} }
} }
a[href="?action=services"] {
&[href="?action=services"] {
&:after { &:after {
content: "\f1e0"; content: "\f1e0";
} }
} }
a[href="?action=about"] { &[href="?action=about"] {
&:after { &:after {
content: "\f129"; content: "\f129";
} }
} }
a[href="?action=database"] { &[href="?action=database"] {
&:after { &:after {
content: "\f1b3"; content: "\f1c0";
} }
} }
a[href="?action=api"] { &[href="?action=api"] {
&:after { &:after {
content: "\f0ec"; content: "\f0ec";
} }
} }
a[href*="action=refresh-feed"] { &[href*="action=refresh-feed"] {
&:after { &:after {
content: "\f021"; content: "\f021";
} }
} }
} }
} }
} }
.page-section { }
&-section {
h2 { h2 {
@extend %title; @extend %title;
margin: { margin: {
@ -316,3 +284,21 @@ section {
} }
} }
} }
}
// 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 { %awesome {
font-family: "FontAwesome"; 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 { .items {
article { article {
@ -33,45 +7,39 @@ section {
padding: 10px 20px; padding: 10px 20px;
&[data-item-status="read"] { &[data-item-status="read"] {
.read-icon:before { // &[data-item-status="feed-items"] {
content: $icon-read; 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 { h2 {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
%commonChld {
display: inline-block;
}
a,
.favicon {
@extends %commonChld;
vertical-align: middle;
}
a { a {
@extend %title; @extend %title;
color: #000; color: #000;
text-decoration: none; text-decoration: none;
} }
.bookmark-icon {
display: none;
}
.favicon {
height: 16px;
width: 16px;
}
.feed-last-checked { .feed-last-checked {
font-size: .8em; font-size: .8em;
} }
@ -112,12 +80,12 @@ section {
&:first-child { &:first-child {
&:before { &:before {
content: "\f0b0"; content: "\f09e";
} }
} }
&.original { &.original {
&:before { &:before {
content: "\f08e"; content: "\f0ac";
} }
} }
&[href*="action=confirm-remove-feed"] { &[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"] { &[href*="action=mark-item-removed"] {
&:before { &:before {
content: "\f014"; content: "\f014";
@ -143,11 +125,19 @@ section {
} }
} }
// Mark as Read
&.mark { &.mark {
&:before {
content: "\f05d";
}
// Mark as Unread
&[data-action="mark-read"] {
&:before { &:before {
content: "\f058"; content: "\f058";
} }
} }
}
&[href*="action=disable-grabber-feed"] { &[href*="action=disable-grabber-feed"] {
&:before { &:before {
content: "\f057"; content: "\f057";
@ -158,6 +148,11 @@ section {
content: "\f058"; content: "\f058";
} }
} }
&[href*="action=confirm-disable-feed"] {
&:before {
content: "\f05c";
}
}
&[href*="action=enable-feed"] { &[href*="action=enable-feed"] {
&:before { &:before {
content: "\f05d"; content: "\f05d";

View File

@ -1,6 +1,5 @@
#current-item { #current-item {
position: relative; position: relative;
> nav { > nav {
@include pie-clearfix; @include pie-clearfix;
@ -80,6 +79,22 @@
&:hover{ &:hover{
text-decoration: underline; 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 { p {
margin: {
top: 5px;
bottom: 5px;
}
&:first-letter{
text-transform: uppercase;
}
} }
ul, ul,
ol { ol {

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