miniflux-legacy/themes/hello/css/app.css

659 lines
19 KiB
CSS

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; }
html {
line-height: 1;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
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, menu, nav, section, summary {
display: block; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word; }
strong {
font-weight: bold; }
/*
* Font awesome
*/
@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 {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
/*
* Open Sans
*
*/
@font-face {
font-family: "OpenSansLight";
src: url(../fonts/OpenSans-Light-webfont.eot);
src: url(../fonts/OpenSans-Light-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/OpenSans-Light-webfont.woff) format("woff"), url(../fonts/OpenSans-Light-webfont.ttf) format("truetype"), url(../fonts/OpenSans-Light-webfont.svg#OpenSansLight) format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "OpenSansRegular";
src: url(../fonts/OpenSans-Regular-webfont.eot);
src: url(../fonts/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/OpenSans-Regular-webfont.woff) format("woff"), url(../fonts/OpenSans-Regular-webfont.ttf) format("truetype"), url(../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "OpenSansRegular";
src: url(../fonts/OpenSans-Bold-webfont.eot);
src: url(../fonts/OpenSans-Bold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/OpenSans-Bold-webfont.woff) format("woff"), url(../fonts/OpenSans-Bold-webfont.ttf) format("truetype"), url(../fonts/OpenSans-Bold-webfont.svg#OpenSansBold) format("svg");
font-weight: bold;
font-style: normal; }
/*
* Oxygen
*
*/
@font-face {
font-family: 'Oxygen-Sans';
src: url("oxygen-sans-webfont.eot");
src: url("oxygen-sans-webfont.eot?#iefix") format("embedded-opentype"), url("oxygen-sans-webfont.woff") format("woff"), url("oxygen-sans-webfont.ttf") format("truetype"), url("oxygen-sans-webfont.svg#oxygen-sanssans-book") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'Oxygen-Sans';
src: url("oxygen-sans-bold-webfont.eot");
src: url("oxygen-sans-bold-webfont.eot?#iefix") format("embedded-opentype"), url("oxygen-sans-bold-webfont.woff") format("woff"), url("oxygen-sans-bold-webfont.ttf") format("truetype"), url("oxygen-sans-bold-webfont.svg#oxygen-sanssans-bold") format("svg");
font-weight: bold;
font-style: normal; }
form input,
form button,
form textarea,
form select {
font-family: "Oxygen-Sans", sans-serif;
font-size: 1em;
color: #595959; }
form input,
form textarea,
form select {
background-color: white;
border: 1px solid #f2f2f2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 5px; }
form label,
form input,
form select {
display: -moz-inline-stack;
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;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-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;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px; }
.alert.alert-error {
background-color: rgba(253, 242, 213, 0.7);
color: rgba(77, 16, 10, 0.8);
font-size: .8em; }
.alert.alert-normal {
border-width: 0px; }
.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 {
font-family: "Oxygen-Sans", sans-serif;
font-size: 1em;
font-weight: normal; }
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: 150px; }
header nav > ul {
margin-top: 30px; }
header nav li {
line-height: 30px; }
header nav li > a {
color: white;
font-family: "Oxygen-Sans", sans-serif;
margin-left: 5px;
text-decoration: none; }
header nav li > a:before {
display: -moz-inline-stack;
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: "\f0e0"; }
header nav li > a[href="?action=bookmarks"]:before {
content: "\f02e"; }
header nav li > a[href="?action=history"]:before {
content: "\f1da"; }
header nav li > a[href="?action=feeds"]:before {
content: "\f143"; }
header nav li > a[href="?action=config"]:before {
content: "\f1de"; }
header nav li > a[href="?action=logout"]:before {
content: "\f08b"; }
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; }
section.page {
right: 0;
width: 85.35871%;
padding: 10px 20px; }
section.page .page-header {
position: relative; }
section.page a {
color: #009966; }
.page-header {
margin: 0 0 15px; }
.page-header ul {
position: absolute;
right: 0;
top: 5px; }
.page-header ul li {
display: -moz-inline-stack;
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;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 3px 0 #009966;
-moz-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"; }
.items article {
-webkit-box-shadow: 0 3px 0 #006644;
-moz-box-shadow: 0 3px 0 #006644;
box-shadow: 0 3px 0 #006644;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background-color: rgba(242, 242, 242, 0.29);
margin-bottom: 15px;
padding: 20px; }
.items article[data-item-status="read"][data-item-page="feed-items"] {
background-color: rgba(153, 153, 153, 0.7); }
.items article > h2,
.items article > p.preview {
display: block;
font-family: "OpenSansRegular", Helvetica, Arial, sans-serif; }
.items article h2 {
font-size: 1em;
font-weight: normal; }
.items article h2 a {
color: #000;
font-weight: bold;
text-decoration: none; }
.items article h2 .feed-last-checked {
font-size: .8em; }
.items article p.preview {
color: #4d4d4d;
font-size: 1em;
font-weight: normal; }
.items .item-menu {
font-size: .8em; }
.items .item-menu li {
display: -moz-inline-stack;
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[id*="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[id*="bookmark-"]:before {
content: "\f088"; }
.items .item-menu li a[id*="bookmark-"][data-reverse-label*="remove"]:before {
content: "\f087"; }
.items .item-menu li a[href*="action=mark-item-removed"]:before {
content: "\f014";
margin-right: 2px; }
.items .item-menu li a[id*="status-"]: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 {
display: none;
visibility: hidden; }
#current-item {
position: relative; }
#current-item > nav {
position: absolute;
width: 180px;
right: 0;
top: 0;
*zoom: 1; }
#current-item > nav:after {
content: "";
display: table;
clear: both; }
#current-item > nav span {
-webkit-box-shadow: 0 3px 0 #009966;
-moz-box-shadow: 0 3px 0 #009966;
box-shadow: 0 3px 0 #009966;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-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; }
#current-item > nav span.nav-right {
float: right; }
#current-item > h1 {
font-size: 1.6em; }
#current-item > h1 a {
color: black;
text-decoration: none; }
#current-item .item-infos {
border-bottom: 1px solid #b2b2b2;
border-top: 1px solid #b2b2b2;
margin: 10px 0;
padding: 5px 0; }
#current-item .item-infos li {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
font-size: 0.9em; }
#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;
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; }
#current-item #item-content h1, #current-item #item-content h2, #current-item #item-content h3, #current-item #item-content h4 {
padding: 15px 0 5px 0; }
#current-item #item-content h1 {
font-size: 1.5em;
margin-left: 5px; }
#current-item #item-content h2 {
font-size: 1.4em;
margin-left: 10px; }
#current-item #item-content h3 {
font-size: 1.3em;
margin-left: 15px; }
#current-item #item-content h4 {
font-size: 1.2em;
margin-left: 20px; }
#current-item #item-content p,
#current-item #item-content li {
line-height: 1.5; }
#current-item #item-content pre {
background-color: #f2f2f2;
border: 1px solid #b2b2b2;
padding: 10px;
margin: 10px 0; }
#current-item #item-content ul {
padding: 0 0 0 30px;
margin: 10px 0;
list-style-type: square; }
#current-item #item-content img {
margin: 15px auto 15px auto;
max-width: 95%;
width: 50%;
display: block; }
#current-item #item-content p,
#current-item #item-content br {
line-height: 30px; }
#login-page {
background-color: #fff; }
#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 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 0 #009966;
-moz-box-shadow: 0 3px 0 #009966;
box-shadow: 0 3px 0 #009966;
background-color: rgba(216, 216, 216, 0.9);
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: -moz-inline-stack;
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;
-webkit-box-shadow: 0 3px 0 #009966;
-moz-box-shadow: 0 3px 0 #009966;
box-shadow: 0 3px 0 #009966;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
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;
-webkit-box-shadow: 0 3px 0 #009966;
-moz-box-shadow: 0 3px 0 #009966;
box-shadow: 0 3px 0 #009966;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background-color: #f2f2f2;
margin: 10px auto; }
.menu-more li a {
display: block;
padding: 10px 20px;
text-decoration: none;
width: 100%; }
.items article p.preview {
display: none; }
#current-item {
padding-top: 35px; }
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; } }