3dae99ac27
The item id exists as data attribute or as element.id postfix on multiple elements in an article. The basic idea is to traverse the DOM tree - starting from the event firing element - in reverse order till an article element is found. This article element is passed to the JavaScript functions. These JavaScript functions are getting the elements which they want to manipulate starting from the article utilizing the JavaScript querySelector function. The bootstrap themes had a conflicting and unused class style definied, which is removed by now.
655 lines
18 KiB
CSS
Executable File
655 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"; }
|
|
|
|
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; } }
|