miniflux-legacy/themes/hello/css/app.css
Mathias Kresin a4d8abb631 Move update icon and update icon blinking to css
Use CSS3 Animation for the "loading icon" blinking and move the definition of
the loading icon to CSS as well.

CSS3 Animations are supported by IE10, Firefox and using the -webkit prefix by
Chrome and Safari.

I've dropped the usage of element.classList in favour of supporting refreshing/
article downloading in IE9 (again). The classList stuff isn't necessarily
needed, as the elements in question only get one or no class assigned.

I've dropped no longer supported css options like:

the appearance option isn't supported by any browser, the -webkit-appearance
doesn't change anything visible.

-webkit-font-smoothing support was dropped in chrome 22 and font-smoothing
isn't specified anywhere.
2014-12-26 23:01:05 +01:00

670 lines
18 KiB
CSS
Executable File

@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 {
line-height: 1; }
ol, ul {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
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; }
a img {
border: none; }
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, #current-item > h1 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 1rem; }
.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 {
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; }
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; }
.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: " ' "; }
.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; }
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; }
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[id^="items-count-"]:before {
content: "("; }
span[id^="items-count-"]:after {
content: ")"; }
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: "\f143"; }
.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: "☆"; }
.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-status="read"][data-item-page="feed-items"] {
background-color: rgba(153, 153, 153, 0.7); }
.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 h2 {
display: block;
margin-bottom: 5px; }
.items article h2 a {
color: #000;
text-decoration: none; }
.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 a {
color: #008055;
text-decoration: none; }
.items .item-menu li a:before {
margin-right: 2px; }
.items .item-menu li a:first-child:before {
content: "\f0b0"; }
.items .item-menu li a.original:before {
content: "\f08e"; }
.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: "\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; }
#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; }
#current-item {
position: relative; }
#current-item > nav {
*zoom: 1; }
#current-item > nav:after {
content: "";
display: table;
clear: both; }
#current-item > nav.top {
display: block;
float: right; }
#current-item > nav.bottom {
display: none; }
#current-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; }
#current-item > nav span a {
text-decoration: none;
color: #009966; }
#current-item > nav span.nav-left {
float: left;
margin-right: 10px; }
#current-item > nav span.nav-right {
float: right; }
#current-item > h1 {
display: inline-block;
float: left;
line-height: 25px;
margin-bottom: 20px;
max-width: 82%; }
#current-item > h1 a {
color: #000;
text-decoration: none;
vertical-align: middle; }
#current-item .item-infos {
border-bottom: 1px solid #b2b2b2;
border-top: 1px solid #b2b2b2;
clear: both;
display: block;
padding: 0; }
#current-item .item-infos li {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
font-size: 0.9rem;
margin: 10px 0; }
#current-item .item-infos li:before {
content: " / "; }
#current-item .item-infos li:first-child:before {
display: none; }
#current-item .item-infos li a {
color: #009966;
font-size: 0.9rem;
text-decoration: none; }
#current-item .item-infos li a:hover {
text-decoration: underline; }
#current-item #item-content {
padding: 10px 0;
*zoom: 1; }
#current-item #item-content:after {
content: "";
display: table;
clear: both; }
#current-item #item-content #item-content-enclosure {
display: none; }
#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 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%; }
#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; }
@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; }
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; } }