miniflux-legacy/assets/css/app.css
Ing. Jan Kaláb 6088fb9ff3 Make the whole menu row clickable on small screens
Not sure if this doesn't break some themes, but it makes the menu more usable with default one.
2016-07-28 11:17:14 +02:00

1013 lines
15 KiB
CSS

@-ms-viewport { width: device-width; }
figure,
li,
ul,
table,
tr,
td,
th,
p,
blockquote,
body {
margin: 0;
padding: 0;
font-size: 100%;
}
body {
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 30px;
max-width: 780px;
color: #333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
}
a {
color: #3366CC;
}
a:focus {
outline: 0;
color: red;
text-decoration: none;
border: 1px dotted #aaa;
}
a:hover {
color: #333;
text-decoration: none;
}
h1, h2, h3 {
font-weight: normal;
color: #333;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.2em;
}
h5, h6 {
margin: 0;
padding: 0;
}
blockquote {
border-left: 4px solid #ddd;
padding-left: 25px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
color: #888;
line-height: 1.4em;
font-family: Georgia, serif;
}
q {
color: purple;
font-family: Georgia, serif;
font-style: italic;
}
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;
}
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;
}
pre, code {
background: #fcfcfc;
border: 1px solid #ccc;
font-family: monospace;
color: #666;
line-height: 1.3em;
border-radius: 5px;
}
pre {
padding: 10px;
overflow: auto;
}
pre > code {
border: none;
}
p > code {
padding: 3px;
}
/* forms */
form {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
border-left: 2px dotted #ddd;
}
form h3 {
font-weight: bold;
}
form h3:first-child {
margin-top: 0;
}
label {
cursor: pointer;
display: block;
}
input[type="checkbox"] {
border: 1px solid #ccc;
margin-right: 0.5em;
}
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="text"] {
border: 1px solid #ccc;
padding: 3px;
line-height: 15px;
width: 250px;
font-size: 99%;
margin-bottom: 10px;
margin-top: 5px;
-webkit-appearance: none;
appearance: none;
}
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
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;
}
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;
}
::-moz-placeholder {
color: #bbb;
padding-top: 2px;
}
.form-actions {
margin-top: 30px;
}
input.form-error,
textarea.form-error {
border: 2px solid #b94a48;
}
.form-errors {
color: #b94a48;
margin-left: 15px;
list-style-type: none;
}
.form-help {
font-size: 0.9em;
color: brown;
margin-bottom: 15px;
}
.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;
margin-bottom: 0px;
}
#grouplist input[type="checkbox"]:checked + span {
opacity: 1;
}
ul#grouplist {
float: left;
}
ul#grouplist li {
margin-left: 0px;
}
/* alerts */
.alert, .panel {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
color: #c09853;
background-color: #fcf8e3;
border: 1px solid #fbeed5;
border-radius: 4px;
overflow: auto;
}
.alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-error, .panel-danger {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.alert-info {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-normal, .panel-default {
color: #333;
background-color: #f0f0f0;
border-color: #ddd;
}
.alert-error a, .panel-danger a {
color: #b94a48;
}
/* buttons */
.btn, #grouplist span {
-webkit-appearance: none;
appearance: none;
display: inline-block;
color: #333;
border: 1px solid #ccc;
background: #efefef;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
font-size: 90%;
cursor: pointer;
border-radius: 2px;
}
a.btn {
text-decoration: none;
font-weight: bold;
}
.btn-red {
border-color: #b0281a;
background: #d14836;
color: #fff;
}
a.btn-red:hover,
.btn-red:hover,
.btn-red:focus {
color: #fff;
background: #c53727;
}
.btn-blue {
border-color: #3079ed;
background: #4d90fe;
color: #fff;
}
.btn-blue:hover,
.btn-blue:focus {
border-color: #2f5bb7;
background: #357ae8;
}
/* icons */
article .read-icon,
article .bookmark-icon {
cursor: pointer;
color: #aaa;
font-weight: 200;
}
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 */
}
/* header */
header {
margin-bottom: 50px;
margin-top: 10px;
}
header ul {
text-align: right;
font-size: 90%;
}
header li {
display: inline;
padding-left: 3%;
}
header a {
color: #777;
text-decoration: none;
}
nav .active a {
color: #333;
font-weight: bold;
text-decoration: none;
}
.logo {
color: #000;
letter-spacing: 1px;
float: left;
}
.logo span {
color: #339966;
}
.page-section {
margin-top: 30px;
}
.page-section,
.page-header {
margin-bottom: 30px;
}
.page-section h2,
.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 {
font-size: 90%;
display: inline;
padding-right: 5px;
}
.page-header li:last-child {
border: none;
padding-right: 0;
}
#bottom-menu {
border-bottom: 1px dotted #ccc;
padding-bottom: 3px;
font-size: 0.9em;
text-align: right;
padding-top: 30px;
}
.feed-last-checked {
color: brown;
font-size: 0.7em;
font-weight: normal;
}
.feed-parsing-error {
visibility: hidden;
}
/* items listing */
.items article[data-feed-error] .feed-parsing-error {
visibility: visible;
color: #000;
font-size: 0.7em;
font-weight: normal;
}
.items article {
border: 1px dotted #ddd;
margin-bottom: 20px;
padding: 5px;
background-color: #fff;
}
.items article[data-feed-error] {
background-color: #fcf8e3;
border-color: #fcf8e3;
}
.items article[data-feed-disabled] * {
color: #aaa;
}
.items h2 {
font-size: 100%;
margin: 0;
padding: 0;
padding-bottom: 2px;
font-weight: bold;
}
.items a {
text-decoration: none;
}
.items a:hover,
.items a:focus {
text-decoration: underline;
}
.item-menu,
.items .preview {
color: #aaa;
font-size: 70%;
}
.items .preview {
line-height: 1.5em;
font-size: 100%;
font-family: Georgia, serif;
overflow: auto;
}
.items #current-item {
border: 3px solid #bce;
padding: 3px;
}
.items article:hover .preview,
.items #current-item .preview {
color: #555;
}
.items article[data-item-status="read"] h2 a {
color: #666;
}
/* item preview full-content */
.preview-full-content {
overflow: auto;
color: #666;
}
.preview-full-content:not(:empty), p.preview:not(:empty) {
margin-top: 15px;
}
.preview-full-content img {
max-width: 100%;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
/* item */
.item {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 50px;
color: #555;
font-family: Georgia, serif;
line-height: 1.6em;
font-size: 1.1em;
}
.item h2,
.item h3 {
font-weight: bold;
}
.item pre,
.item ul,
.item p {
margin-top: 15px;
}
.item p {
margin-bottom: 20px;
overflow: auto;
}
.item ul {
margin-left: 25px;
}
#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;
}
#item-content img,
#item-content > a img,
#item-content > img,
#item-content figure img,
.item p img {
margin-top: 10px;
margin-bottom: 10px;
display: block;
max-width: 100%;
}
#item-content h1 img,
#item-content h2 img,
#item-content h3 img,
#item-content br + img {
display: inline;
margin: 0;
}
.item h1 a {
font-size: 2.1em;
text-decoration: none;
}
#item-content a:visited {
color: purple;
}
.item nav span,
.item nav a,
.item nav a:visited {
color: #333;
font-family: sans-serif;
}
.item nav {
width: 100%;
}
.item nav.bottom {
border-top: 1px dotted #ddd;
padding-top: 8px;
margin-top: 50px;
}
.nav-left {
width: 50%;
display: block;
float: left;
text-align: left;
}
.nav-right {
text-align: right;
margin-left: 50%;
width: 50%;
display: block;
}
.nav-left:before {
content: "« ";
}
.nav-right:after {
content: " »";
}
ul.item-menu,
ul.item-infos {
margin: 0;
padding: 0;
color: #aaa;
}
.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;
}
#items-paging {
margin-top: 40px;
margin-bottom: 15px;
font-size: 80%;
text-align: center;
}
#item-content-enclosure {
border-bottom: 1px dashed #ccc;
margin-bottom: 20px;
padding-bottom: 10px;
}
.items article .favicon {
height: 16px;
}
/* other pages */
section li {
margin-left: 15px;
list-style-type: square;
}
video,
iframe {
max-width: 98%;
}
.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%;
}
.menu-more li {
font-size: 1.1em;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
list-style-type: none;
}
.menu-more a {
text-decoration: none;
color: #333;
display: block;
}
#help-layer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
overflow: auto;
background: #f0f0f0;
box-shadow: 2px 0px 5px 0 #ccc;
}
#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;
}
#login {
width: 350px;
margin: 0 auto;
margin-top: 15%;
}
#login form {
border: none;
margin-bottom: 45px;
}
#database-selector h4 {
margin: 0;
margin-bottom: 10px;
padding: 0;
font-weight: normal;
}
.bookmarklet {
font-size: 0.9em;
font-weight: bold;
line-height: 30px;
padding: 4px;
text-decoration: none;
color: #333;
background: #fff;
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: "";
}
/* desktop design */
@media only screen and (min-width: 480px) {
.hide-desktop {
display: none;
}
.items h2 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.search {
margin-top: -30px;
}
}
/* mobile design */
@media only screen and (max-width: 480px) {
ul li.hide-mobile,
.hide-mobile {
display: none;
}
body {
max-width: 480px;
}
header {
margin-bottom: 0;
}
nav .active a {
font-weight: normal;
}
.page {
clear: both;
padding-top: 20px;
}
.page li {
margin-left: 5px;
}
.item {
font-size: 1.0em;
}
.item h1 {
font-size: 0.75em;
}
.item-infos {
font-size: 0.9em;
margin-bottom: 5px;
}
.item nav a {
font-weight: bold;
text-decoration: none;
}
.items .preview {
color: #555;
}
.item-menu li,
ul.item-infos li {
padding-left: 0;
padding-right: 5px;
border: none;
}
section li {
font-size: 0.85em;
}
#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;
}
}