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

@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, .item > h1 { font-family: "Montserrat", "Liberation Sans", 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, .items #bottom-menu > a, .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; }
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; margin-bottom: 5px; }
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; font-size: 1em; }
.alert.alert-error { background-color: rgba(248, 201, 196, 0.7); color: rgba(77, 16, 10, 0.8); }
.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; overflow: hidden; text-overflow: ellipsis; color: white; }
header nav li.active a { color: #edbf47; }
header nav li > a { color: white; margin-left: 5px; text-decoration: none; font-family: "Montserrat", "Liberation Sans", sans-serif; font-weight: bold; white-space: nowrap; }
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; font-weight: normal; 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; }

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: "\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: "\f084"; }
.page-header ul li a[href*="action=refresh-feed"]:after { content: "\f021"; }
.page-header ul li a[href*="action=console"]:after { content: "\f120"; }
.page-header ul li a[href*="action=flush-console"]:after { content: "\f12d"; }
.page-section h2 { margin-bottom: 15px; margin-top: 15px; }

#page-counter, #nav-counter, .items-count { margin: 0 3px; }
#page-counter:not(:empty):before, #nav-counter:not(:empty):before, .items-count:not(:empty):before { content: " ("; }
#page-counter:not(:empty):after, #nav-counter:not(:empty):after, .items-count:not(:empty):after { content: ") "; }

.feed-parsing-error { visibility: hidden; }

.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-bookmark="0"] .bookmark:before { content: "\f006"; }
.items article[data-item-bookmark="1"] .bookmark:before { content: "\f005"; }
.items article[data-item-status="read"] { background-color: rgba(153, 153, 153, 0.7); }
.items article[data-feed-error] { background-color: rgba(248, 201, 196, 0.7); }
.items article[data-feed-error] .feed-parsing-error { font-size: .8em; visibility: visible; }
.items article[data-feed-disabled="1"] { 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 .favicon { height: 16px; width: 16px; }
.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:first-child a:before { content: "\f09e"; }
.items .item-menu li a { color: #008055; text-decoration: none; }
.items .item-menu li a:before { margin-right: 2px; }
.items .item-menu li a.original:before { 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[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=enable-feed"]:before { content: "\f05d"; }
.items #bottom-menu { padding: 5px 0; margin-bottom: 10px; float: right; }
.items #bottom-menu > a, .items #bottom-menu > a:after { overflow: hidden; display: block; height: 25px; text-decoration: none; width: 25px; }
.items #bottom-menu > 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; text-align: left; }
.items #bottom-menu > a:after { content: "\f058"; position: absolute; top: 0; left: 0; line-height: 25px; z-index: 999; text-indent: 0; text-align: center; }

#items-paging { clear: both; 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; }

.item { position: relative; }
.item[data-item-bookmark="0"] .bookmark-icon:before { content: "\f006"; }
.item[data-item-bookmark="1"] .bookmark-icon:before { content: "\f005"; }
.item > nav { *zoom: 1; }
.item > nav:after { content: ""; display: table; clear: both; }
.item > nav.top { display: block; float: right; }
.item > nav.bottom { display: none; }
.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; }
.item > nav span a { text-decoration: none; color: #009966; }
.item > nav span.nav-left { float: left; margin-right: 10px; }
.item > nav span.nav-right { float: right; }
.item > h1 { display: inline-block; float: left; line-height: 25px; margin-bottom: 20px; max-width: 82%; }
.item > h1 a { color: #000; text-decoration: none; vertical-align: middle; }
.item .item-infos { border-bottom: 1px solid #b2b2b2; border-top: 1px solid #b2b2b2; clear: both; display: block; padding: 0; }
.item .item-infos li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; font-size: 0.9rem; margin: 10px 0; }
.item .item-infos li:before { content: " / "; }
.item .item-infos li:first-child:before { display: none; }
.item .item-infos li a { color: #009966; font-size: 0.9rem; text-decoration: none; }
.item .item-infos li a:hover { text-decoration: underline; }
.item .item-infos li a.bookmark-icon:hover { text-decoration: none; }
.item #item-content { padding: 10px 0; *zoom: 1; }
.item #item-content:after { content: ""; display: table; clear: both; }
.item #item-content #item-content-enclosure { display: none; }

#item-content h1, #item-content h2, #item-content h3, #item-content h4 { font-family: "Montserrat", "Liberation Sans", 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 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; 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; }
#login-page form + div { margin-left: 20px; margin-top: 20px; }
#login-page form + div h3 { font-weight: bold; }
#login-page form + div ul { list-style-type: square; padding-left: 25px; }

@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: 980px) { body > header { top: 5px; left: 20px; bottom: inherit; width: auto; z-index: 999; background-color: transparent !important; }
  body > .page { width: auto !important; 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 { padding-left: 10px; padding-right: 10px; }
  .items article .preview { display: none; }
  .items .item-menu { display: block; *zoom: 1; }
  .items .item-menu:after { content: ""; display: table; clear: both; }
  .items .item-menu li:first-child { display: block; float: left; }
  .items .item-menu li:last-child { float: right; }
  .items .item-menu li:last-child:before { display: none; visibility: hidden; }
  .items .item-menu li .mark, .items .item-menu li .mark:before { height: 25px; text-align: center; width: 25px; }
  .items .item-menu li .mark { -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; display: block; position: relative; overflow: hidden; text-indent: -999px; }
  .items .item-menu li .mark:before { position: absolute; top: 0; left: 0; line-height: 25px; z-index: 999; text-indent: 0; }
  #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; } }