miniflux/ui/static/css/common.css
Vincent Bernat 881c0f406b Do not lighten blockquote font color
It is confusing to have blockquote content displayed with a lighter
font color. Usually, quotes are important to the text while reducing
the contrast may hint a user it is not. In my case, I usually skip the
content of the blockquote as it was some additional note in the text.

Without the color change, the blockquote is still indented
differently, with the vertical bar. It should be enough for a user to
identify it as a quote.
2019-11-15 19:52:40 -08:00

934 lines
15 KiB
CSS

/* Layout */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font-family: var(--font-family);
text-rendering: optimizeLegibility;
color: var(--body-color);
background: var(--body-background);
}
hr {
border: 0;
height: 0;
border-top: 1px dotted var(--hr-border-color);
padding-bottom: 10px;
}
h1, h2, h3 {
color: var(--title-color);
}
main {
padding-left: 5px;
padding-right: 5px;
margin-bottom: 30px;
}
a {
color: var(--link-color);
}
a:focus {
outline: 0;
color: var(--link-focus-color);
text-decoration: none;
outline: 1px dotted #aaa;
}
a:hover {
color: var(--link-hover-color);
text-decoration: none;
}
/* Header and main menu */
.header {
margin-top: 10px;
margin-bottom: 20px;
}
.header nav ul {
display: none;
}
.header li {
cursor: pointer;
padding-left: 10px;
line-height: 2.1em;
font-size: 1.2em;
border-bottom: 1px dotted var(--header-list-border-color);
}
.header li:hover a {
color: #888;
}
.header a {
font-size: 0.9em;
color: var(--header-link-color);
text-decoration: none;
border: none;
font-weight: 400;
}
.header .active a {
color: var(--header-active-link-color);
font-weight: 500;
}
.header a:hover {
color: var(--header-link-hover-color);
}
.header a:focus {
color: var(--header-link-focus-color);
}
/* Page header and footer*/
.page-header {
margin-bottom: 25px;
}
.page-footer {
margin-bottom: 10px;
}
.page-header h1 {
font-weight: 500;
border-bottom: 1px dotted var(--page-header-title-border-color);
}
.page-header ul,
.page-footer ul {
margin-left: 25px;
}
.page-header li,
.page-footer li {
list-style-type: circle;
line-height: 1.8em;
}
/* Logo */
.logo {
cursor: pointer;
text-align: center;
}
.logo a {
color: var(--logo-color);
letter-spacing: 1px;
}
.logo a:hover {
color: #339966;
}
.logo a span {
color: #339966;
}
.logo a:hover span {
color: var(--logo-hover-color-span);
}
/* Search form */
.search {
text-align: center;
display: none;
}
.search-toggle-switch {
display: none;
}
.toast-wrap {
visibility: hidden;
opacity: 0;
position: fixed;
left: 0;
bottom: 10%;
color: #fff;
width: 100%;
text-align: center;
}
.toast-msg {
background-color: rgba(0,0,0,0.7);
padding: 2px 5px;
border-radius: 5px;
}
.toastAnimate {
animation: toastKeyFrames 2s;
}
@keyframes toastKeyFrames {
0% {visibility: hidden; opacity: 0;}
25% {visibility: visible; opacity: 1; z-index: 9999}
50% {visibility: visible; opacity: 1; z-index: 9999}
75% {visibility: visible; opacity: 1; z-index: 9999}
100% {visibility: hidden; opacity: 0; z-index: 0}
}
@media (min-width: 600px) {
body {
margin: auto;
max-width: 750px;
}
.header {
margin-bottom: 0;
}
.logo {
text-align: left;
float: left;
margin-right: 15px;
margin-left: 5px;
}
.header nav ul {
display: block;
}
.header li {
display: inline;
padding: 0;
padding-right: 15px;
line-height: normal;
border: none;
font-size: 1.0em;
}
.page-header ul,
.page-footer ul {
margin-left: 0;
}
.page-header li,
.page-footer li {
display: inline;
padding-right: 15px;
}
/* Search form */
.search {
text-align: right;
display: block;
margin-top: 10px;
margin-right: 5px;
}
.search-toggle-switch {
display: block;
}
.search-form {
display: none;
}
.search-toggle-switch.has-search-query {
display: none;
}
.search-form.has-search-query {
display: block;
}
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid var(--table-border-color);
}
th, td {
padding: 5px;
text-align: left;
}
td {
vertical-align: top;
}
th {
background: var(--table-th-background);
color: var(--table-th-color);
font-weight: 400;
}
tr:hover {
color: var(--table-tr-hover-color);
background-color: var(--table-tr-hover-background-color);
}
.column-40 {
width: 40%;
}
.column-25 {
width: 25%;
}
.column-20 {
width: 20%;
}
/* Forms */
fieldset {
border: 1px solid #ddd;
padding: 8px;
}
legend {
font-weight: 500;
padding-left: 3px;
padding-right: 3px;
}
label {
cursor: pointer;
display: block;
}
.radio-group {
line-height: 1.9em;
}
div.radio-group label {
display: inline-block;
}
select {
margin-bottom: 15px;
}
input[type="search"],
input[type="url"],
input[type="password"],
input[type="text"] {
color: var(--input-color);
background: var(--input-background);
border: var(--input-border);
padding: 3px;
line-height: 20px;
width: 250px;
font-size: 99%;
margin-bottom: 10px;
margin-top: 5px;
-webkit-appearance: none;
}
input[type="search"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
color: var(--input-focus-color);
border-color: var(--input-focus-border-color);
outline: 0;
box-shadow: var(--input-focus-box-shadow);
}
input[type="checkbox"] {
margin-bottom: 15px;
}
::-moz-placeholder,
::-ms-input-placeholder,
::-webkit-input-placeholder {
color: #ddd;
padding-top: 2px;
}
.form-help {
font-size: 0.9em;
color: brown;
margin-bottom: 15px;
}
.form-section {
border-left: 2px dotted #ddd;
padding-left: 20px;
margin-left: 10px;
}
details > summary {
outline: none;
cursor: pointer;
}
.details-content {
margin-top: 15px;
}
/* Buttons */
a.button {
text-decoration: none;
}
.button {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 1.1em;
cursor: pointer;
padding: 3px 10px;
border: 1px solid;
border-radius: unset;
}
.button-primary {
border-color: var(--button-primary-border-color);
background: var(--button-primary-background);
color: var(--button-primary-color);
}
.button-primary:hover,
.button-primary:focus {
border-color: var(--button-primary-focus-border-color);
background: var(--button-primary-focus-background);
}
.button-danger {
border-color: #b0281a;
background: #d14836;
color: #fff;
}
.button-danger:hover,
.button-danger:focus {
color: #fff;
background: #c53727;
}
.button:disabled {
color: #ccc;
background: #f7f7f7;
border-color: #ccc;
}
.buttons {
margin-top: 10px;
margin-bottom: 20px;
}
/* Alerts */
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
color: var(--alert-color);
background-color: var(--alert-background-color);
border: 1px solid var(--alert-border-color);
border-radius: 4px;
overflow: auto;
}
.alert h3 {
margin-top: 0;
margin-bottom: 15px;
}
.alert-success {
color: var(--alert-success-color);
background-color: var(--alert-success-background-color);
border-color: var(--alert-success-border-color);
}
.alert-error {
color: var(--alert-error-color);
background-color: var(--alert-error-background-color);
border-color: var(--alert-error-border-color);
}
.alert-error h3,
.alert-error a {
color: var(--alert-error-color);
}
.alert-info {
color: var(--alert-info-color);
background-color: var(--alert-info-background-color);
border-color: var(--alert-info-border-color);
}
/* Panel */
.panel {
color: var(--panel-color);
background-color: var(--panel-background);
border: 1px solid var(--panel-border-color);
border-radius: 5px;
padding: 10px;
margin-bottom: 15px;
}
.panel h3 {
font-weight: 500;
margin-top: 0;
margin-bottom: 20px;
}
.panel ul {
margin-left: 30px;
}
/* Modals */
#modal-left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 360px;
overflow: auto;
color: var(--modal-color);
background: var(--modal-background);
box-shadow: var(--modal-box-shadow);
padding: 5px;
padding-top: 30px;
}
#modal-left h3 {
font-weight: 400;
margin: 0;
}
.btn-close-modal {
position: absolute;
top: 0;
right: 0;
font-size: 1.7em;
color: #ccc;
padding:0 .2em;
margin: 10px;
text-decoration: none;
}
.btn-close-modal:hover {
color: #999;
}
/* Keyboard Shortcuts */
.keyboard-shortcuts li {
margin-left: 25px;
list-style-type: square;
color: var(--keyboard-shortcuts-li-color);
font-size: 0.95em;
line-height: 1.45em;
}
.keyboard-shortcuts p {
line-height: 1.9em;
}
/* Login form */
.login-form {
margin: 50px auto 0;
max-width: 280px;
}
/* Counters */
.unread-counter-wrapper,
.error-feeds-counter-wrapper {
font-size: 0.9em;
font-weight: 300;
color: var(--counter-color);
}
/* Category label */
.category {
font-size: 0.75em;
background-color: var(--category-background-color);
border: 1px solid var(--category-border-color);
border-radius: 5px;
margin-left: 0.25em;
padding: 1px 0.4em 1px 0.4em;
white-space: nowrap;
color: var(--category-color);
}
.category a {
color: var(--category-link-color);
text-decoration: none;
}
.category a:hover,
.category a:focus {
color: var(--category-link-hover-color);
}
/* Pagination */
.pagination {
font-size: 1.1em;
display: flex;
align-items: center;
padding-top: 8px;
}
.pagination-bottom {
border-top: 1px dotted var(--pagination-border-color);
margin-bottom: 15px;
margin-top: 50px;
}
.pagination > div {
flex: 1;
}
.pagination-next {
text-align: right;
}
.pagination-prev:before {
content: "« ";
}
.pagination-next:after {
content: " »";
}
.pagination a {
color: var(--pagination-color);
}
.pagination a:hover,
.pagination a:focus {
text-decoration: none;
}
/* List view */
.item {
border: 1px dotted var(--item-border-color);
margin-bottom: 20px;
padding: var(--item-padding);
overflow: hidden;
}
.item.current-item {
border: var(--current-item-border-width) solid var(--current-item-border-color);
padding: 3px;
box-shadow: var(--current-item-box-shadow);
}
.item-title a {
text-decoration: none;
font-weight: var(--item-title-link-font-weight);
}
.item-status-read .item-title a {
color: var(--item-status-read-title-link-color);
}
.item-meta {
color: var(--item-meta-focus-color);
font-size: 0.8em;
}
.item-meta a {
color: #777;
text-decoration: none;
}
.item-meta a:hover,
.item-meta a:focus {
color: #333;
}
.item-meta ul {
margin-top: 5px;
}
.item-meta li {
display: inline;
}
.item-meta li:after {
content: "|";
color: var(--item-meta-li-color);
}
.item-meta li:last-child:after {
content: "";
}
.items {
overflow-x: hidden;
}
.hide-read-items .item-status-read:not(.current-item) {
display: none;
}
/* Feeds list */
article.feed-parsing-error {
background-color: var(--feed-parsing-error-background-color);
border-color: #aaa;
}
.parsing-error {
font-size: 0.85em;
margin-top: 2px;
color: var(--parsing-error-color);
}
.parsing-error-count {
cursor: pointer;
}
/* Entry view */
.entry header {
padding-bottom: 5px;
border-bottom: 1px dotted var(--entry-header-border-color);
}
.entry header h1 {
font-size: 2.0em;
line-height: 1.25em;
margin: 5px 0 30px 0;
}
.entry header h1 a {
text-decoration: none;
color: var(--entry-header-title-link-color);
}
.entry header h1 a:hover,
.entry header h1 a:focus {
color: #666;
}
.entry-actions {
margin-bottom: 20px;
}
.entry-actions a {
text-decoration: none;
}
.entry-actions li {
display: inline;
}
.entry-actions li:not(:last-child):after {
content: "|";
}
.entry-meta {
font-size: 0.95em;
margin: 0 0 20px;
color: #666;
overflow-wrap: break-word;
}
.entry-website img {
vertical-align: top;
}
.entry-website a {
color: #666;
vertical-align: top;
text-decoration: none;
}
.entry-website a:hover,
.entry-website a:focus {
text-decoration: underline;
}
.entry-date {
font-size: 0.65em;
font-style: italic;
color: #555;
}
.entry-content {
padding-top: 15px;
font-size: 1.2em;
font-weight: 300;
font-family: var(--entry-content-font-family);
color: var(--entry-content-color);
line-height: 1.4em;
overflow-wrap: break-word;
}
.entry-content h1, h2, h3, h4, h5, h6 {
margin-top: 15px;
margin-bottom: 10px;
}
.entry-content iframe,
.entry-content video,
.entry-content img {
max-width: 100%;
}
.entry-content figure {
margin-top: 15px;
margin-bottom: 15px;
}
.entry-content figure img {
border: 1px solid #000;
}
.entry-content figcaption {
font-size: 0.75em;
text-transform: uppercase;
color: #777;
}
.entry-content p {
margin-top: 10px;
margin-bottom: 15px;
}
.entry-content a {
overflow-wrap: break-word;
}
.entry-content a:visited {
color: purple;
}
.entry-content dt {
font-weight: 500;
margin-top: 15px;
color: #555;
}
.entry-content dd {
margin-left: 15px;
margin-top: 5px;
padding-left: 20px;
border-left: 3px solid #ddd;
color: #777;
font-weight: 300;
line-height: 1.4em;
}
.entry-content blockquote {
border-left: 4px solid #ddd;
padding-left: 25px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
line-height: 1.4em;
font-family: var(--entry-content-quote-font-family);
}
.entry-content q {
color: var(--entry-content-quote-color);
font-family: var(--entry-content-quote-font-family);
font-style: italic;
}
.entry-content q:before {
content: "“";
}
.entry-content q:after {
content: "”";
}
.entry-content pre {
padding: 5px;
overflow: auto;
overflow-wrap: initial;
border-width: 1px;
border-style: solid;
}
.entry-content pre,
.entry-content code {
color: var(--entry-content-code-color);
background: var(--entry-content-code-background);
border-color: var(--entry-content-code-border-color);
}
.entry-content table {
table-layout: fixed;
max-width: 100%;
}
.entry-content ul,
.entry-content ol {
margin-left: 30px;
margin-top: 15px;
margin-bottom: 15px;
}
.entry-content li ul,
.entry-content li ol {
margin-top: 0;
margin-bottom: 0;
}
.entry-content ul {
list-style-type: square;
}
.entry-content strong {
font-weight: 600;
}
.entry-enclosures h3 {
font-weight: 500;
}
.entry-enclosure {
border: 1px dotted var(--entry-enclosure-border-color);
padding: 5px;
margin-top: 10px;
max-width: 100%;
}
.entry-enclosure-download {
font-size: 0.85em;
overflow-wrap: break-word;
}
.enclosure-video video,
.enclosure-image img {
max-width: 100%;
}
/* Confirmation */
.confirm {
font-weight: 500;
color: #ed2d04;
}
.confirm a {
color: #ed2d04;
}
.loading {
font-style: italic;
}
/* Bookmarlet */
.bookmarklet {
border: 1px dashed #ccc;
border-radius: 5px;
padding: 15px;
margin: 15px;
text-align: center;
}
.bookmarklet a {
font-weight: 600;
text-decoration: none;
font-size: 1.2em;
}