Update Hello skin
This commit is contained in:
Frederic Guillot
parent
34def70106
commit
a45d69dee4
@ -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
|
||||
-------------------
|
||||
|
||||
@ -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/)
|
||||
|
||||
|
||||
@ -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%;
|
||||
@ -306,7 +282,7 @@ section.page {
|
||||
.page-header ul li a[href="?action=confirm-flush-history"]:after {
|
||||
content: "\f014"; }
|
||||
.page-header ul li a[href="?action=feeds"]:after {
|
||||
content: "\f143"; }
|
||||
content: "\f09e"; }
|
||||
.page-header ul li a[href="?action=config"]:after {
|
||||
content: "\f013"; }
|
||||
.page-header ul li a[href="?action=help"]:after {
|
||||
@ -316,23 +292,21 @@ section.page {
|
||||
.page-header ul li a[href="?action=about"]:after {
|
||||
content: "\f129"; }
|
||||
.page-header ul li a[href="?action=database"]:after {
|
||||
content: "\f1b3"; }
|
||||
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;
|
||||
|
||||
@ -31,11 +31,3 @@ $alert-sucess: #72c5a1;
|
||||
|
||||
// Logo
|
||||
$logo-basecolor: #339966;
|
||||
|
||||
// Icons
|
||||
$icon-bracket-open: "(";
|
||||
$icon-bracket-close: ")";
|
||||
$icon-read: "✔";
|
||||
$icon-bookmarked: "★";
|
||||
$icon-not-bookmarked: "☆";
|
||||
$icon-loading: "☀";
|
||||
@ -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,8 +135,9 @@ section {
|
||||
}
|
||||
}
|
||||
}
|
||||
// Toolbar
|
||||
.page-header {
|
||||
.page {
|
||||
// Toolbar
|
||||
&-header {
|
||||
margin: 0 0 15px;
|
||||
@include pie-clearfix;
|
||||
|
||||
@ -207,10 +180,6 @@ section {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
a{
|
||||
&[href*="action=unread"],
|
||||
&[href*="action=feed-items"] {
|
||||
&[href*="direction=asc"] {
|
||||
@ -219,8 +188,6 @@ section {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
&[href*="action=unread"],
|
||||
&[href*="action=feed-items"] {
|
||||
&[href*="direction=desc"] {
|
||||
@ -229,85 +196,86 @@ section {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
&[href*="mark-as-read"],
|
||||
&[href*="mark-feed-as-read"] {
|
||||
&:after {
|
||||
content: "\f058";
|
||||
}
|
||||
}
|
||||
}
|
||||
a[href="?action=add"] {
|
||||
&[href="?action=add"] {
|
||||
&:after {
|
||||
content: "\f067";
|
||||
}
|
||||
}
|
||||
a[href="?action=import"] {
|
||||
&[href="?action=import"] {
|
||||
&:after {
|
||||
content: "\f093";
|
||||
}
|
||||
}
|
||||
a[href="?action=export"] {
|
||||
&[href="?action=export"] {
|
||||
&:after {
|
||||
content: "\f019";
|
||||
}
|
||||
}
|
||||
a[href="?action=refresh-all"] {
|
||||
&[href="?action=refresh-all"] {
|
||||
&:after {
|
||||
content: "\f021";
|
||||
}
|
||||
}
|
||||
a[href="?action=confirm-flush-history"] {
|
||||
&[href="?action=confirm-flush-history"] {
|
||||
&:after {
|
||||
content: "\f014";
|
||||
}
|
||||
}
|
||||
a[href="?action=feeds"] {
|
||||
&[href="?action=feeds"] {
|
||||
&:after {
|
||||
content: "\f143";
|
||||
content: "\f09e";
|
||||
}
|
||||
}
|
||||
a[href="?action=config"] {
|
||||
&[href="?action=config"] {
|
||||
&:after {
|
||||
content: "\f013";
|
||||
}
|
||||
}
|
||||
a[href="?action=help"] {
|
||||
|
||||
&[href="?action=help"] {
|
||||
&:after {
|
||||
content: "\f128";
|
||||
}
|
||||
}
|
||||
a[href="?action=services"] {
|
||||
|
||||
&[href="?action=services"] {
|
||||
&:after {
|
||||
content: "\f1e0";
|
||||
}
|
||||
}
|
||||
a[href="?action=about"] {
|
||||
&[href="?action=about"] {
|
||||
&:after {
|
||||
content: "\f129";
|
||||
}
|
||||
}
|
||||
a[href="?action=database"] {
|
||||
&[href="?action=database"] {
|
||||
&:after {
|
||||
content: "\f1b3";
|
||||
content: "\f1c0";
|
||||
}
|
||||
}
|
||||
a[href="?action=api"] {
|
||||
&[href="?action=api"] {
|
||||
&:after {
|
||||
content: "\f0ec";
|
||||
}
|
||||
}
|
||||
a[href*="action=refresh-feed"] {
|
||||
&[href*="action=refresh-feed"] {
|
||||
&:after {
|
||||
content: "\f021";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.page-section {
|
||||
}
|
||||
}
|
||||
|
||||
&-section {
|
||||
h2 {
|
||||
@extend %title;
|
||||
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
13
themes/hello/scss/_icons.scss
Normal file → Executable 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 */
|
||||
}
|
||||
@ -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-bookmark="1"] {
|
||||
.item-menu {
|
||||
a {
|
||||
&.bookmark {
|
||||
&:before {
|
||||
content: "\f088";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-item-bookmark="0"] {
|
||||
.item-menu {
|
||||
a {
|
||||
&.bookmark {
|
||||
&:before {
|
||||
content: "\f087";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &[data-item-status="feed-items"] {
|
||||
background-color: rgba(lighten(black,60%), .7);
|
||||
// }
|
||||
}
|
||||
|
||||
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: "\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";
|
||||
|
||||
@ -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
0
themes/hello/scss/_utilities.scss
Normal file → Executable file
Loading…
Reference in New Issue
Block a user