ea58bac548
# Change HTML tag to button Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript. # Differentiate links and buttons visually When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear. Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button. I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
1286 lines
22 KiB
CSS
1286 lines
22 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;
|
|
}
|
|
|
|
.sr-only {
|
|
border: 0 !important;
|
|
clip: rect(1px, 1px, 1px, 1px) !important;
|
|
-webkit-clip-path: inset(50%) !important;
|
|
clip-path: inset(50%) !important;
|
|
height: 1px !important;
|
|
overflow: hidden !important;
|
|
margin: -1px !important;
|
|
padding: 0 !important;
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.skip-to-content-link {
|
|
--padding-size: 8px;
|
|
--border-size: 1px;
|
|
|
|
background-color: var(--category-background-color);
|
|
color: var(--category-color);
|
|
border: var(--border-size) solid var(--category-border-color);
|
|
border-radius: 5px;
|
|
inset-inline-start: 50%;
|
|
padding: var(--padding-size);
|
|
position: absolute;
|
|
transition: translate 0.3s;
|
|
translate: -50% calc(-100% - calc(var(--padding-size) * 2) - calc(var(--border-size) * 2));
|
|
}
|
|
|
|
.skip-to-content-link:focus {
|
|
translate: -50% 0;
|
|
}
|
|
|
|
/* Header and main menu */
|
|
.header {
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.header nav {
|
|
display: flex;
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header nav .logo svg {
|
|
padding: 5px;
|
|
inline-size: 24px;
|
|
block-size: 24px;
|
|
}
|
|
|
|
.header nav .logo[aria-expanded="true"] svg {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
.header ul.js-menu-show {
|
|
display: initial;
|
|
}
|
|
|
|
.header ul:not(.js-menu-show) {
|
|
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 a:hover {
|
|
color: #888;
|
|
}
|
|
|
|
.header :is(a, summary) {
|
|
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);
|
|
/* Note: Firefox on Windows does not show the link as bold if the value is under 600 */
|
|
font-weight: 600;
|
|
}
|
|
|
|
.header a:focus {
|
|
color: var(--header-link-focus-color);
|
|
}
|
|
|
|
/* Page header and footer*/
|
|
.page-header {
|
|
padding-inline: 5px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.page-footer {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-weight: 500;
|
|
border-bottom: 1px dotted var(--page-header-title-border-color);
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.page-header h1 a {
|
|
text-decoration: none;
|
|
color: var(--page-header-title-color);
|
|
}
|
|
|
|
.page-header h1 a:hover,
|
|
.page-header h1 a:focus {
|
|
color: #666;
|
|
}
|
|
|
|
.page-header li,
|
|
.page-footer li {
|
|
list-style-type: none;
|
|
line-height: 1.8em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.page-header ul a .icon {
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.page-header-action-form {
|
|
display: inline-flex;
|
|
}
|
|
|
|
:is(.page-button, .page-link) {
|
|
color: var(--link-color);
|
|
border: none;
|
|
background-color: transparent;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
|
|
&:is(hover, :focus) {
|
|
color: var(--link-hover-color);
|
|
}
|
|
}
|
|
|
|
.page-button:active {
|
|
translate: 1px 1px;
|
|
}
|
|
|
|
/* Logo */
|
|
.logo {
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo a {
|
|
color: var(--logo-color);
|
|
letter-spacing: 1px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.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;
|
|
margin-top: 10px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.search details svg {
|
|
padding: 5px;
|
|
inline-size: 24px;
|
|
block-size: 24px;
|
|
translate: 0 -3px;
|
|
}
|
|
|
|
.search details[open] svg {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
.search details > summary {
|
|
list-style: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
inline-size: fit-content;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.search details > summary::marker, /* Latest Chrome, Edge, Firefox */
|
|
.search details > summary::-webkit-details-marker /* Safari */ {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.search-toggle-switch {
|
|
display: none;
|
|
}
|
|
|
|
/* PWA prompt */
|
|
#prompt-home-screen {
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
background: #000;
|
|
opacity: 85%;
|
|
}
|
|
|
|
#btn-add-to-home-screen {
|
|
text-decoration: none;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
}
|
|
|
|
#btn-add-to-home-screen:hover {
|
|
color: red;
|
|
}
|
|
|
|
/* Notification - "Toast" */
|
|
#toast-wrapper {
|
|
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-bottom: 4px;
|
|
padding-left: 4px;
|
|
padding-right: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.toast-animate {
|
|
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: 620px) {
|
|
body {
|
|
margin: auto;
|
|
max-width: 750px;
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.logo {
|
|
text-align: left;
|
|
float: left;
|
|
margin-right: 15px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.header li {
|
|
display: inline;
|
|
padding: 0;
|
|
padding-right: 15px;
|
|
line-height: normal;
|
|
border: none;
|
|
font-size: 1.0em;
|
|
}
|
|
|
|
.header nav {
|
|
align-items: end;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.header .logo svg {
|
|
display: none;
|
|
}
|
|
|
|
.header ul:not(.js-menu-show), .header ul.js-menu-show {
|
|
display: revert;
|
|
}
|
|
|
|
.header :is(a, summary):hover {
|
|
color: var(--header-link-hover-color);
|
|
}
|
|
|
|
.page-header li,
|
|
.page-footer li {
|
|
display: inline;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
/* Search form */
|
|
.search {
|
|
text-align: right;
|
|
display: block;
|
|
}
|
|
|
|
.search details > summary {
|
|
margin-inline: auto 0;
|
|
}
|
|
|
|
.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 dotted #ddd;
|
|
padding: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
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"],
|
|
input[type="number"] {
|
|
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;
|
|
appearance: none;
|
|
}
|
|
|
|
input[type="search"]:focus,
|
|
input[type="url"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="text"]:focus,
|
|
input[type="number"]:focus {
|
|
color: var(--input-focus-color);
|
|
border-color: var(--input-focus-border-color);
|
|
outline: 0;
|
|
box-shadow: var(--input-focus-box-shadow);
|
|
}
|
|
|
|
#form-entries-per-page {
|
|
max-width: 80px;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
textarea {
|
|
width: 350px;
|
|
color: var(--input-color);
|
|
background: var(--input-background);
|
|
border: var(--input-border);
|
|
padding: 3px;
|
|
margin-bottom: 10px;
|
|
margin-top: 5px;
|
|
appearance: none;
|
|
}
|
|
|
|
textarea:focus {
|
|
color: var(--input-focus-color);
|
|
border-color: var(--input-focus-border-color);
|
|
outline: 0;
|
|
box-shadow: var(--input-focus-box-shadow);
|
|
}
|
|
|
|
input::placeholder {
|
|
color: var(--input-placeholder-color);
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.form-label-row {
|
|
display: flex;
|
|
}
|
|
|
|
.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;
|
|
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);
|
|
}
|
|
|
|
a.button-primary:hover,
|
|
a.button-primary:focus,
|
|
.button-primary:hover,
|
|
.button-primary:focus {
|
|
border-color: var(--button-primary-focus-border-color);
|
|
background: var(--button-primary-focus-background);
|
|
color: var(--button-primary-color);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
fieldset .buttons {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* 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 */
|
|
template {
|
|
display: none;
|
|
}
|
|
|
|
#modal-left {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 380px;
|
|
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;
|
|
background-color: transparent;
|
|
border: 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: 300px;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
|
|
.category-item-total {
|
|
color: var(--body-color);
|
|
}
|
|
|
|
/* Pagination */
|
|
.pagination {
|
|
font-size: 1.1em;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.pagination-top {
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.pagination-bottom {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.pagination-entry-top {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.pagination-entry-bottom {
|
|
border-top: 1px dotted var(--pagination-border-color);
|
|
margin-bottom: 15px;
|
|
margin-top: 50px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.pagination > div {
|
|
flex: 1;
|
|
}
|
|
|
|
.pagination-next {
|
|
text-align: right;
|
|
}
|
|
|
|
.pagination-prev:before {
|
|
content: "« ";
|
|
}
|
|
|
|
.pagination-next:after {
|
|
content: " »";
|
|
}
|
|
|
|
.pagination a {
|
|
color: var(--pagination-link-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.current-item:focus {
|
|
outline: none;
|
|
}
|
|
|
|
|
|
.item-header {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.item-header span {
|
|
font-weight: normal;
|
|
display: inline-block;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 1rem;
|
|
margin: 0;
|
|
display: inline;
|
|
}
|
|
|
|
.item-title a {
|
|
text-decoration: none;
|
|
font-weight: var(--item-title-link-font-weight);
|
|
font-size: inherit;
|
|
}
|
|
|
|
.feed-entries-counter {
|
|
display: inline-flex;
|
|
gap: 2px;
|
|
align-items: center;
|
|
}
|
|
|
|
.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 :is(a:is(:focus, :hover), button:is(:focus, :hover)) {
|
|
color: #333;
|
|
}
|
|
|
|
.item-meta ul {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.item-meta li {
|
|
display: inline-block;
|
|
}
|
|
|
|
.item-meta-info {
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.item-meta-info li:not(:last-child):after {
|
|
content: "|";
|
|
color: var(--item-meta-li-color);
|
|
}
|
|
|
|
.item-meta-icons li {
|
|
margin-right: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.item-meta-icons li:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.item-meta-icons li > :is(a, button) {
|
|
color: #777;
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
border: none;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.item-meta-icons a span {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.item-meta-icons button:active {
|
|
translate: 1px 1px;
|
|
}
|
|
|
|
.items {
|
|
overflow-x: hidden;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.hide-read-items .item-status-read:not(.current-item) {
|
|
display: none;
|
|
}
|
|
|
|
.entry-swipe {
|
|
transition-property: transform;
|
|
transition-duration: 0s;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
|
|
/* Feeds list */
|
|
article.feed-parsing-error {
|
|
background-color: var(--feed-parsing-error-background-color);
|
|
border-style: var(--feed-parsing-error-border-style);
|
|
border-color: var(--feed-parsing-error-border-color);
|
|
}
|
|
|
|
article.feed-has-unread {
|
|
background-color: var(--feed-has-unread-background-color);
|
|
border-style: var(--feed-has-unread-border-style);
|
|
border-color: var(--feed-has-unread-border-color);
|
|
}
|
|
|
|
.parsing-error {
|
|
font-size: 0.85em;
|
|
margin-top: 2px;
|
|
color: var(--parsing-error-color);
|
|
}
|
|
|
|
.parsing-error-count {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Categories list */
|
|
article.category-has-unread {
|
|
background-color: var(--category-has-unread-background-color);
|
|
border-style: var(--category-has-unread-border-style);
|
|
border-color: var(--category-has-unread-border-color);
|
|
}
|
|
|
|
/* Icons */
|
|
.icon,
|
|
.icon-label {
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Entry view */
|
|
.entry header {
|
|
padding-bottom: 5px;
|
|
padding-inline: 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;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.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 span {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.entry-actions li {
|
|
display: inline-block;
|
|
margin-right: 15px;
|
|
line-height: 1.7em;
|
|
}
|
|
|
|
.entry-meta {
|
|
font-size: 0.95em;
|
|
margin: 0 0 20px;
|
|
color: #666;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.entry-tags {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.entry-tags strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.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: var(--entry-content-font-weight);
|
|
font-family: var(--entry-content-font-family);
|
|
color: var(--entry-content-color);
|
|
line-height: 1.4em;
|
|
overflow-wrap: break-word;
|
|
touch-action: pan-y pinch-zoom;
|
|
}
|
|
|
|
.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: var(--link-visited-color);
|
|
}
|
|
|
|
.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 {
|
|
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-content sub,
|
|
.entry-content sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.entry-content sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
.entry-content sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
.entry-content abbr {
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
border-bottom: 1px dashed var(--entry-content-abbr-border-color);
|
|
}
|
|
|
|
details.entry-enclosures {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.entry-enclosures summary {
|
|
font-weight: 500;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.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 button {
|
|
color: #ed2d04;
|
|
border: none;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.disabled {
|
|
opacity: 20%;
|
|
}
|
|
|
|
audio, video {
|
|
width: 100%;
|
|
}
|
|
|
|
.integration-form summary {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.integration-form details {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.integration-form details .form-section {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|