miniflux-legacy/assets/css/app.css

1042 lines
15 KiB
CSS
Raw Normal View History

@-ms-viewport { width: device-width; }
2013-03-17 23:16:25 +01:00
figure,
2013-02-18 03:48:21 +01:00
li,
ul,
table,
tr,
td,
th,
p,
blockquote,
body {
margin: 0;
padding: 0;
font-size: 100%;
}
body {
2014-11-08 18:55:30 +01:00
padding-left: 10px;
padding-right: 10px;
2016-07-31 00:07:04 +02:00
margin: 0 auto 30px;
2013-08-30 01:34:11 +02:00
max-width: 780px;
2013-02-18 03:48:21 +01:00
color: #333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
2013-03-17 23:16:25 +01:00
text-rendering: optimizeLegibility;
2013-02-18 03:48:21 +01:00
}
a {
color: #3366CC;
}
a:focus {
outline: 0;
color: red;
text-decoration: none;
border: 1px dotted #aaa;
}
a:hover {
color: #333;
2013-02-18 03:48:21 +01:00
text-decoration: none;
}
h1, h2, h3 {
font-weight: normal;
color: #333;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.2em;
}
2013-08-04 18:17:10 +02:00
h5, h6 {
margin: 0;
padding: 0;
}
2013-03-17 23:16:25 +01:00
blockquote {
border-left: 4px solid #ddd;
padding-left: 25px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
2015-01-13 01:59:17 +01:00
color: #888;
2013-03-17 23:16:25 +01:00
line-height: 1.4em;
font-family: Georgia, serif;
}
2013-04-25 02:00:02 +02:00
q {
color: purple;
font-family: Georgia, serif;
font-style: italic;
}
2013-03-17 23:16:25 +01:00
blockquote + p {
color: #555;
font-style: italic;
}
figcaption {
font-size: 0.8em;
text-transform: uppercase;
color: #777;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=975632 */
table-layout: fixed;
2013-03-17 23:16:25 +01:00
}
table caption {
font-weight: bold;
font-size: 1.0em;
text-align: left;
padding-bottom: 0.5em;
padding-top: 0.5em;
}
th,
td {
border: 1px solid #ccc;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 5px;
}
th {
text-align: left;
}
2013-08-08 02:18:48 +02:00
pre, code {
2015-01-13 01:59:17 +01:00
background: #fcfcfc;
2013-08-08 02:18:48 +02:00
border: 1px solid #ccc;
font-family: monospace;
2015-01-13 01:59:17 +01:00
color: #666;
2013-08-30 01:34:11 +02:00
line-height: 1.3em;
2013-08-08 02:18:48 +02:00
border-radius: 5px;
2013-03-17 23:16:25 +01:00
}
2013-08-08 02:18:48 +02:00
pre {
padding: 10px;
overflow: auto;
2013-03-17 23:16:25 +01:00
}
2013-08-08 02:18:48 +02:00
pre > code {
border: none;
}
p > code {
padding: 3px;
2013-03-17 23:16:25 +01:00
}
2013-02-18 03:48:21 +01:00
/* forms */
form {
padding-top: 5px;
padding-bottom: 5px;
2013-07-20 02:39:49 +02:00
padding-left: 15px;
border-left: 2px dotted #ddd;
2013-02-18 03:48:21 +01:00
}
2014-12-24 19:50:20 +01:00
form h3 {
font-weight: bold;
}
form h3:first-child {
margin-top: 0;
}
2013-02-18 03:48:21 +01:00
label {
cursor: pointer;
display: block;
}
2013-06-11 04:09:51 +02:00
input[type="checkbox"] {
border: 1px solid #ccc;
margin-right: 0.5em;
2013-03-17 23:16:25 +01:00
}
2013-02-18 03:48:21 +01:00
input[type="email"],
input[type="tel"],
input[type="password"],
implement frontend autoupdate Only the unread counter is updated right know. The AutoUpdate Feature is designed on the premise of don't wasting resources. A distinction is made between updates when Miniflux is visible or hidden. To determine the visibility status, the Page Visibility API is used. The API is available starting with Chrome 33, Firefox 18 and IE10. [https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API] As IE9 returns an undefined, it doesn't break the compatibility at least. If Miniflux is visible, the unread counter on the web page is updated as soon as a mismatch between the counter and the number of unread articles in the database is found. If Miniflux is hidden, the timestamp of the most recent article from each feed is compared with the value from the last run. We have an update If the timestamp of the latest article is greater than the stored one and the latest article is unread. The web page title is updated with a ? symbol to notify the user and the update check pauses till Miniflux gets visible again. If Miniflux gets visible again, the number of unread articles is queried from the database, the unread counter on the web page is updated and finally the ? symbol is removed from the web page title. This way I can use my fever API client to read new articles (or at least the latest article) while Miniflux is hidden and as I've seen the new articles already a new articles notification is prevented. It's intentionally that the page does not reload automatically as long as articles are visible. If I'm in hurry, I only scroll through the articles to spot something interesting. Most of the time I don't reach the last article. If the page is reloaded while I'm away, I would have to scan from the top again. If we're on a nothing_to_read page and have unread articles in the database, a redirect to the unread page will be done. The default update check interval is 10 minutes and can be changed on the settings page. A zero value disables the update check entirely. fixes #213
2014-11-27 22:36:04 +01:00
input[type="number"],
2013-02-18 03:48:21 +01:00
input[type="text"] {
border: 1px solid #ccc;
padding: 3px;
line-height: 15px;
width: 250px;
font-size: 99%;
2013-04-13 03:08:55 +02:00
margin-bottom: 10px;
margin-top: 5px;
-webkit-appearance: none;
2013-02-18 03:48:21 +01:00
}
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
implement frontend autoupdate Only the unread counter is updated right know. The AutoUpdate Feature is designed on the premise of don't wasting resources. A distinction is made between updates when Miniflux is visible or hidden. To determine the visibility status, the Page Visibility API is used. The API is available starting with Chrome 33, Firefox 18 and IE10. [https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API] As IE9 returns an undefined, it doesn't break the compatibility at least. If Miniflux is visible, the unread counter on the web page is updated as soon as a mismatch between the counter and the number of unread articles in the database is found. If Miniflux is hidden, the timestamp of the most recent article from each feed is compared with the value from the last run. We have an update If the timestamp of the latest article is greater than the stored one and the latest article is unread. The web page title is updated with a ? symbol to notify the user and the update check pauses till Miniflux gets visible again. If Miniflux gets visible again, the number of unread articles is queried from the database, the unread counter on the web page is updated and finally the ? symbol is removed from the web page title. This way I can use my fever API client to read new articles (or at least the latest article) while Miniflux is hidden and as I've seen the new articles already a new articles notification is prevented. It's intentionally that the page does not reload automatically as long as articles are visible. If I'm in hurry, I only scroll through the articles to spot something interesting. Most of the time I don't reach the last article. If the page is reloaded while I'm away, I would have to scan from the top again. If we're on a nothing_to_read page and have unread articles in the database, a redirect to the unread page will be done. The default update check interval is 10 minutes and can be changed on the settings page. A zero value disables the update check entirely. fixes #213
2014-11-27 22:36:04 +01:00
input[type="number"]:focus,
2013-02-18 03:48:21 +01:00
input[type="text"]:focus,
textarea:focus {
color: #000;
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}
input[type="number"] {
width: 40px;
}
2013-02-18 03:48:21 +01:00
textarea {
border: 1px solid #ccc;
padding: 3px;
width: 400px;
height: 200px;
font-size: 99%;
}
select {
margin-bottom: 15px;
}
::-webkit-input-placeholder {
color: #bbb;
padding-top: 2px;
}
::-ms-input-placeholder {
color: #bbb;
padding-top: 2px;
}
2013-07-06 02:59:34 +02:00
::-moz-placeholder {
2013-02-18 03:48:21 +01:00
color: #bbb;
padding-top: 2px;
}
.form-actions {
2015-01-18 00:53:40 +01:00
margin-top: 30px;
2013-02-18 03:48:21 +01:00
}
input.form-error,
textarea.form-error {
border: 2px solid #b94a48;
}
.form-errors {
color: #b94a48;
2013-04-13 03:08:55 +02:00
margin-left: 15px;
2013-02-18 03:48:21 +01:00
list-style-type: none;
}
.form-help {
font-size: 0.9em;
color: brown;
2013-04-13 03:08:55 +02:00
margin-bottom: 15px;
}
2013-02-18 03:48:21 +01:00
2013-07-21 17:11:41 +02:00
.hide {
display: none;
}
/* Feed group buttons */
#grouplist span {
float: left;
opacity: 0.4;
min-width: 4em;
margin-right: 6px;
overflow: auto;
text-align: center;
}
#grouplist input[type="text"] {
width: 150px;
}
#grouplist input[type="checkbox"] + span, #grouplist input[type="text"] {
padding: 4px;
margin-top: 6px;
2016-07-31 00:07:04 +02:00
margin-bottom: 0;
}
#grouplist input[type="checkbox"]:checked + span {
opacity: 1;
}
ul#grouplist {
float: left;
}
ul#grouplist li {
2016-07-31 00:07:04 +02:00
margin-left: 0;
}
2013-02-18 03:48:21 +01:00
/* alerts */
.alert, .panel {
2013-02-18 03:48:21 +01:00
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
color: #c09853;
background-color: #fcf8e3;
border: 1px solid #fbeed5;
border-radius: 4px;
2014-11-08 22:59:52 +01:00
overflow: auto;
2013-02-18 03:48:21 +01:00
}
.alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-error, .panel-danger {
2013-02-18 03:48:21 +01:00
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.alert-info {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-normal, .panel-default {
2013-04-03 04:49:14 +02:00
color: #333;
background-color: #f0f0f0;
border-color: #ddd;
}
.alert-error a, .panel-danger a {
color: #b94a48;
}
2013-02-18 03:48:21 +01:00
/* buttons */
.btn, #grouplist span {
-webkit-appearance: none;
2013-03-17 23:16:25 +01:00
display: inline-block;
2013-02-18 03:48:21 +01:00
color: #333;
border: 1px solid #ccc;
background: #efefef;
2017-01-04 03:49:57 +01:00
padding: 3px 8px;
font-size: 1.1em;
2013-02-18 03:48:21 +01:00
cursor: pointer;
border-radius: 2px;
}
2013-03-17 23:16:25 +01:00
a.btn {
text-decoration: none;
font-weight: bold;
}
.btn-red {
border-color: #b0281a;
2013-03-17 23:16:25 +01:00
background: #d14836;
color: #fff;
}
a.btn-red:hover,
.btn-red:hover,
.btn-red:focus {
color: #fff;
background: #c53727;
}
2013-02-18 03:48:21 +01:00
.btn-blue {
border-color: #3079ed;
background: #4d90fe;
color: #fff;
}
.btn-blue:hover,
.btn-blue:focus {
border-color: #2f5bb7;
background: #357ae8;
}
/* icons */
2016-02-28 20:35:25 +01:00
article .read-icon,
article .bookmark-icon {
color: #aaa !important;
font-weight: 200 !important;
text-decoration: none !important;
2016-02-28 20:35:25 +01:00
}
article[data-item-bookmark="0"] .bookmark-icon:before {
content: "☆";
}
article[data-item-bookmark="1"] .bookmark-icon:before {
content: "★";
}
article[data-item-status="read"] .read-icon:before {
content: "✘";
}
article[data-item-status="unread"] .read-icon:before {
content: "✔";
}
/* counter brackets */
span#nav-counter:not(:empty):before, span#page-counter:not(:empty):before {
content: " (";
}
span.items-count:before {
content: "(";
}
span#nav-counter:not(:empty):after, span#page-counter:not(:empty):after, span.items-count:after {
content: ")";
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
/* Chrome, Safari, Opera */
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
.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 */
}
2013-02-18 03:48:21 +01:00
/* header */
header {
margin-bottom: 50px;
margin-top: 10px;
}
header ul {
text-align: right;
font-size: 90%;
}
header li {
display: inline;
2014-02-05 03:47:59 +01:00
padding-left: 3%;
2013-02-18 03:48:21 +01:00
}
header a {
color: #777;
text-decoration: none;
}
2016-11-10 14:22:48 +01:00
nav .menu-more-switcher {
color: #777;
cursor: pointer;
}
2013-02-18 03:48:21 +01:00
nav .active a {
color: #333;
font-weight: bold;
text-decoration: none;
2013-02-18 03:48:21 +01:00
}
.logo {
color: #000;
letter-spacing: 1px;
float: left;
}
.logo span {
color: #339966;
}
.page-section {
margin-top: 30px;
}
.page-section,
2013-02-18 03:48:21 +01:00
.page-header {
margin-bottom: 30px;
}
.page-section h2,
2013-02-18 03:48:21 +01:00
.page-header h2 {
margin: 0;
padding: 0;
font-size: 130%;
border-bottom: 1px dotted #ccc;
}
.page-header ul {
text-align: right;
margin-top: 2px;
}
.page-header li {
2013-03-17 23:16:25 +01:00
font-size: 90%;
2013-02-18 03:48:21 +01:00
display: inline;
2013-04-13 03:08:55 +02:00
padding-right: 5px;
2013-02-18 03:48:21 +01:00
}
.page-header li:last-child {
border: none;
padding-right: 0;
}
#bottom-menu {
2013-09-19 01:55:18 +02:00
border-bottom: 1px dotted #ccc;
padding-bottom: 3px;
font-size: 0.9em;
2013-09-19 01:55:18 +02:00
text-align: right;
padding-top: 30px;
}
.feed-last-checked {
color: brown;
font-size: 0.7em;
font-weight: normal;
}
2013-02-18 03:48:21 +01:00
.feed-parsing-error {
visibility: hidden;
}
.feed-groups li {
display: inline;
margin-left: 0;
}
.feed-groups li a:after {
content: ', ';
}
.feed-groups li:last-child a:after {
content: '';
}
.feed-groups a {
color: #333;
}
.items .feed-groups a:focus,
.items .feed-groups a:hover {
color: #777;
text-decoration: none;
}
/* items listing */
.items article[data-feed-error] .feed-parsing-error {
visibility: visible;
color: #000;
font-size: 0.7em;
font-weight: bold;
}
2013-02-18 03:48:21 +01:00
.items article {
border: 1px dotted #ddd;
2013-02-18 03:48:21 +01:00
margin-bottom: 20px;
padding: 5px;
background-color: #fff;
2013-02-18 03:48:21 +01:00
}
.items article[data-feed-error] {
background-color: #fcf8e3;
border-color: #fcf8e3;
}
.items article[data-feed-disabled] * {
color: #aaa;
}
2013-02-18 03:48:21 +01:00
.items h2 {
font-size: 100%;
margin: 0;
2016-07-31 00:07:04 +02:00
padding: 0 0 2px;
2013-03-17 23:16:25 +01:00
font-weight: bold;
2013-02-18 03:48:21 +01:00
}
.items a {
text-decoration: none;
}
.items a:hover,
2013-03-17 23:16:25 +01:00
.items a:focus {
2013-02-18 03:48:21 +01:00
text-decoration: underline;
}
2014-02-15 03:21:14 +01:00
.item-menu,
.items .preview {
2013-02-18 03:48:21 +01:00
color: #aaa;
font-size: 70%;
}
2013-03-17 23:16:25 +01:00
.items .preview {
line-height: 1.5em;
font-size: 100%;
font-family: Georgia, serif;
overflow: auto;
2013-03-17 23:16:25 +01:00
}
2013-04-03 04:49:14 +02:00
.items #current-item {
border: 3px solid #bce;
padding: 3px;
2013-04-03 04:49:14 +02:00
}
.items article:hover .preview,
.items #current-item .preview {
color: #555;
}
.items article[data-item-status="read"] h2 a {
color: #666;
}
2015-05-17 19:14:33 +02:00
/* item preview full-content */
.preview-full-content {
overflow: auto;
color: #666;
}
.preview-full-content:not(:empty), p.preview:not(:empty) {
2015-05-17 19:14:33 +02:00
margin-top: 15px;
}
.preview-full-content img {
max-width: 100%;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
2013-02-18 03:48:21 +01:00
/* item */
.item {
2013-04-25 02:00:02 +02:00
padding-left: 5px;
padding-right: 5px;
2013-02-18 03:48:21 +01:00
padding-bottom: 50px;
2013-04-25 02:00:02 +02:00
color: #555;
2013-03-17 23:16:25 +01:00
font-family: Georgia, serif;
line-height: 1.6em;
2013-04-25 02:00:02 +02:00
font-size: 1.1em;
2013-03-17 23:16:25 +01:00
}
.item h2,
.item h3 {
font-weight: bold;
2013-02-18 03:48:21 +01:00
}
.item pre,
.item ul,
.item p {
margin-top: 15px;
}
.item p {
margin-bottom: 20px;
overflow: auto;
}
.item ul {
margin-left: 25px;
}
2015-01-13 01:59:17 +01:00
#item-content {
font-size: 1.1em;
}
#item-content[dir="rtl"] blockquote {
border-right: 4px solid #ddd;
border-left: none;
padding-right: 25px;
padding-left: 0;
}
2014-02-23 16:56:46 +01:00
#item-content img,
2013-08-04 18:17:10 +02:00
#item-content > a img,
#item-content > img,
2013-09-19 23:54:50 +02:00
#item-content figure img,
2013-08-04 03:06:08 +02:00
.item p img {
2013-08-04 18:17:10 +02:00
margin-top: 10px;
margin-bottom: 10px;
2013-02-18 03:48:21 +01:00
display: block;
2013-02-20 04:09:32 +01:00
max-width: 100%;
2013-02-18 03:48:21 +01:00
}
2014-03-30 00:48:49 +01:00
#item-content h1 img,
#item-content h2 img,
#item-content h3 img,
#item-content br + img {
display: inline;
margin: 0;
}
2013-02-18 03:48:21 +01:00
.item h1 a {
2013-03-17 23:16:25 +01:00
font-size: 2.1em;
2013-02-18 03:48:21 +01:00
text-decoration: none;
}
2013-10-15 04:38:07 +02:00
#item-content a:visited {
2013-03-17 23:16:25 +01:00
color: purple;
}
2013-03-27 02:57:12 +01:00
.item nav span,
.item nav a,
.item nav a:visited {
2014-02-05 03:47:59 +01:00
color: #333;
font-family: sans-serif;
2013-03-27 02:57:12 +01:00
}
.item nav {
2014-02-05 03:47:59 +01:00
width: 100%;
}
.item nav.bottom {
2013-03-27 02:57:12 +01:00
border-top: 1px dotted #ddd;
padding-top: 8px;
margin-top: 50px;
}
.nav-left {
2014-02-05 04:12:27 +01:00
width: 50%;
2013-03-27 02:57:12 +01:00
display: block;
float: left;
text-align: left;
2013-03-27 02:57:12 +01:00
}
.nav-right {
text-align: right;
2014-02-05 04:12:27 +01:00
margin-left: 50%;
width: 50%;
2013-03-27 02:57:12 +01:00
display: block;
}
.nav-left:before {
content: "« ";
}
.nav-right:after {
content: " »";
}
2014-02-15 03:21:14 +01:00
ul.item-menu,
ul.item-infos {
margin: 0;
padding: 0;
color: #aaa;
2013-06-15 05:12:08 +02:00
}
2014-02-15 03:21:14 +01:00
.item-menu li,
ul.item-infos li {
margin: 0;
padding-left: 7px;
padding-right: 5px;
display: inline;
border-right: 1px solid #ccc;
}
.item-menu li:first-child,
ul.item-infos li:first-child {
padding-left: 0;
}
.item-menu li:last-child,
ul.item-infos li:last-child {
border: none;
}
.item-menu a,
ul.item-infos a {
color: #aaa;
}
ul.item-infos {
margin-bottom: 20px;
}
#download-item {
color: #000;
2013-06-15 05:12:08 +02:00
}
2013-07-06 04:37:19 +02:00
#items-paging {
margin-top: 40px;
margin-bottom: 15px;
font-size: 80%;
2013-07-06 04:37:19 +02:00
text-align: center;
}
2014-05-25 14:47:03 +02:00
#item-content-enclosure {
border-bottom: 1px dashed #ccc;
margin-bottom: 20px;
padding-bottom: 10px;
}
2014-12-24 23:54:27 +01:00
.items article .favicon {
height: 16px;
}
2013-03-27 02:57:12 +01:00
/* other pages */
section li {
2013-04-13 03:08:55 +02:00
margin-left: 15px;
2013-03-27 02:57:12 +01:00
list-style-type: square;
}
video,
iframe {
max-width: 98%;
}
2016-05-04 02:15:20 +02:00
.search {
text-align: right;
}
#search-opener {
color: #777;
font-size: 87.5%;
cursor: pointer;
text-transform: lowercase;
}
#search-opener:hover {
color: #333;
}
#search-form {
border: 0;
padding: 0;
}
#search-form input {
font-size: 75%;
}
2016-11-10 14:22:48 +01:00
#menu-more {
padding-top: 20px;
}
#menu-more li {
font-size: 1.1em;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
list-style-type: none;
}
2016-11-10 14:22:48 +01:00
#menu-more li.active a {
color: #333;
2016-11-10 14:22:48 +01:00
}
#menu-more a {
text-decoration: none;
color: #777;
display: block;
}
2013-03-17 23:16:25 +01:00
2016-03-06 16:23:19 +01:00
#help-layer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 350px;
2016-03-06 16:23:19 +01:00
overflow: auto;
background: #f0f0f0;
2016-07-31 00:07:04 +02:00
box-shadow: 2px 0 5px 0 #ccc;
2016-03-06 16:23:19 +01:00
}
#help-layer .panel {
border: 0;
}
.btn-close {
position: absolute;
top: 0;
right: 0;
font: 28px/1 sans-serif;
color: #ccc;
padding:0 .2em;
margin: 10px;
cursor: pointer;
}
.btn-close:hover {
color: #999;
}
2014-11-08 18:55:30 +01:00
#login {
width: 350px;
2016-07-31 00:07:04 +02:00
margin: 15% auto 0;
2014-11-08 18:55:30 +01:00
}
#login form {
border: none;
2014-11-19 01:16:14 +01:00
margin-bottom: 45px;
}
2015-01-18 00:53:40 +01:00
#database-selector h4 {
2016-07-31 00:07:04 +02:00
margin: 0 0 10px;
2015-01-18 00:53:40 +01:00
padding: 0;
font-weight: normal;
}
2014-12-26 16:43:27 +01:00
.bookmarklet {
font-size: 0.9em;
font-weight: bold;
line-height: 30px;
padding: 4px;
text-decoration: none;
color: #333;
background: #fff;
2014-12-26 16:43:27 +01:00
border: 1px dotted #ccc;
border-radius: 4px;
cursor: move;
}
.bookmarklet:focus,
.bookmarklet:hover {
color: #339966;
}
#config-form {
border-left: none;
padding: 0;
}
#config-form h3 {
border-bottom: 1px dotted #ccc;
}
.options {
border-left: 3px dotted #eee;
padding-left: 20px;
}
html[dir="rtl"] form,
html[dir="rtl"] .options,
html[dir="rtl"] ul.item-infos li {
border: none;
}
html[dir="rtl"] .nav-right:after,
html[dir="rtl"] .nav-left:before,
html[dir="rtl"] span.items-count:after,
html[dir="rtl"] span.items-count:before {
content: "";
}
2014-02-05 03:47:59 +01:00
/* desktop design */
@media only screen and (min-width: 480px) {
.hide-desktop {
display: none;
}
.items h2 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
2016-05-04 02:15:20 +02:00
.search {
margin-top: -30px;
}
2014-02-05 03:47:59 +01:00
}
2013-03-17 23:16:25 +01:00
/* mobile design */
@media only screen and (max-width: 480px) {
2014-02-15 03:21:14 +01:00
ul li.hide-mobile,
2013-07-20 02:39:49 +02:00
.hide-mobile {
display: none;
}
2013-03-17 23:16:25 +01:00
body {
max-width: 480px;
}
header {
2014-02-05 03:47:59 +01:00
margin-bottom: 0;
2013-03-17 23:16:25 +01:00
}
2014-02-05 03:47:59 +01:00
nav .active a {
font-weight: normal;
}
2013-03-17 23:16:25 +01:00
.page {
clear: both;
padding-top: 20px;
overflow-x: hidden;
2013-03-17 23:16:25 +01:00
}
2013-04-07 16:57:38 +02:00
.page li {
margin-left: 5px;
}
2013-03-17 23:16:25 +01:00
.item {
font-size: 1.0em;
2013-03-17 23:16:25 +01:00
}
.item h1 {
2014-02-05 03:47:59 +01:00
font-size: 0.75em;
2013-03-17 23:16:25 +01:00
}
2014-02-15 03:21:14 +01:00
.item-infos {
2013-03-17 23:16:25 +01:00
font-size: 0.9em;
margin-bottom: 5px;
2013-03-17 23:16:25 +01:00
}
2013-07-20 02:39:49 +02:00
2014-02-05 03:47:59 +01:00
.item nav a {
font-weight: bold;
text-decoration: none;
}
.items .preview {
color: #555;
}
2014-02-15 03:21:14 +01:00
.item-menu li,
ul.item-infos li {
padding-left: 0;
padding-right: 5px;
border: none;
}
2013-07-20 02:39:49 +02:00
section li {
font-size: 0.85em;
}
2016-05-04 02:15:20 +02:00
#search-form input {
box-sizing: border-box;
width: 100%;
}
.item-icons {
display: block;
float: right;
}
.item-title {
display: block;
}
.item-icons .read-icon,
.item-icons .bookmark-icon {
font-size: 1.7em;
margin-left: 15px;
}
.item-infos .bookmark-icon {
font-size: 2.0em;
}
}