miniflux.css

/**
 * Copyright 2023 Gerben Versluis. All rights reserved.
 * Use of this source code is governed by the Apache 2.0
 * license that can be found in the LICENSE file.
 */

/**
 * I wrote this CSS for my own use.
 * This CSS was originally written for Miniflux v2 version 2.0.41
 * This CSS was updated for Miniflux v2 version 2.1.3
 */

:root {
  --table-border-color: #333; /* table borders distract from content */
  --body-background: #000; /* black background, less energy and more contrast */
  --link-color: #fff; /* more contrast when viewing lists */
  --table-tr-hover-background-color: #080E0E; /* make table hovers stand out less because it is not that important */
  --feed-has-unread-background-color: #000; /* grayed out usually means unusable so it makes more sense to use that on feeds without new articles */
  --feed-read-background-color: #111; /* grayed out usually means unusable so it makes */
  --icon-size: 32px;
}

/* do not bounce sticky/fixed menu when reaching end of page */
html {
 	overscroll-behavior: none;
}
 
/* always show menu so it is easy to switch */
.header {
	position: sticky;
	z-index: 100;
	top: 0;
	width: 100%;
	max-width: 820px;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 4px;
	background: #532b00;
}

/* wide settings fields so you can see the content */
form[action$="/update"] input[type="url"],
form[action$="/update"] input[type="text"] {
  width: 100%;
}

/* the entry content might affects the actions so always show actions */
/* sticky would be nicer but actions are embedded in entry-header which contains title/date and do not need to be sticky */
.entry-header .entry-actions {
	position: fixed;
	order: 1;
	width: 100%;
	max-width: 820px;
	margin: 0;
	padding: 10px;
	background: var(--body-background);
}
.entry header {
	display: flex;
	flex-direction: column;
	padding-inline: 0;
}
.entry header h1 {
	margin: 0;
	order: 10;
}
.entry header .entry-meta {
	margin-top: calc(var(--icon-size) + 6px);
	order: 3;
}
.entry header .entry-date {
	order: 2;
}
.entry-actions li {
	margin-right: 8px;
}

/* icon to replace unread button */
.header li {
	display: inline-block;
	width: 24px;
	height: calc(var(--icon-size) + 4px);
	font-size: 0;
	margin-right: 16px;
}
.header li.active>a::before {
	filter: sepia(100%);
}
.header li>a[href$="/unread"]::before {
	content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2RkZCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz4KICAgICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI5IiAvPgogICAgICAgIDxwYXRoIGQ9Ik0xMCAxMGw0IDRtMCAtNGwtNCA0IiAvPgo8L3N2Zz4=");
}
.header li>a[href$="/starred"]::before {
	content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2RkZCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+CjxwYXRoIGQ9Ik0xMiAxNy43NWwtNi4xNzIgMy4yNDUgMS4xNzktNi44NzMtNC45OTMtNC44NjcgNi45LTEuMDAyTDEyIDJsMy4wODYgNi4yNTMgNi45IDEuMDAyLTQuOTkzIDQuODY3IDEuMTc5IDYuODczeiIgLz4KPC9zdmc+");
}
.header li>a[href$="/history"]::before {
	content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2RkZCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI5IiAvPjxwYXRoIGQ9Ik05IDEybDIgMmw0IC00IiAvPjwvc3ZnPg==");
}
.header li>a[href$="/feeds"]::before {
	content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2RkZCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIj48L3BhdGg+CjxjaXJjbGUgY3g9IjUiIGN5PSIxOSIgcj0iMSI+PC9jaXJjbGU+CjxwYXRoIGQ9Ik00IDRhMTYgMTYgMCAwIDEgMTYgMTYiPjwvcGF0aD4KPHBhdGggZD0iTTQgMTFhOSA5IDAgMCAxIDkgOSI+PC9wYXRoPgo8L3N2Zz4=");
}
.header li>a[href$="/categories"]::before {
	content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2RkZCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiPjwvcGF0aD4KICAgICAgICA8cGF0aCBkPSJNNSA0aDRsMyAzaDdhMiAyIDAgMCAxIDIgMnY4YTIgMiAwIDAgMSAtMiAyaC0xNGEyIDIgMCAwIDEgLTIgLTJ2LTExYTIgMiAwIDAgMSAyIC0yIj48L3BhdGg+CiAgICAgICAgPGxpbmUgeDE9IjEyIiB5MT0iMTAiIHgyPSIxMiIgeTI9IjE2Ij48L2xpbmU+CiAgICAgICAgPGxpbmUgeDE9IjkiIHkxPSIxMyIgeDI9IjE1IiB5Mj0iMTMiPjwvbGluZT4KPC9zdmc+");
}
.header li>a[href$="/search"]::before {
	top: -21px;
	content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI3IiB3aWR0aD0iMjciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iI2RkZCIgZmlsbD0iI2RkZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KPHBhdGggZD0iTTEyIDI0YTEyIDEyIDAgMSAxIDEyLTEyIDEyLjAxMyAxMi4wMTMgMCAwIDEtMTIgMTJ6bTAtMjJhMTAgMTAgMCAxIDAgMTAgMTBBMTAuMDExIDEwLjAxMSAwIDAgMCAxMiAyeiIvPjxwYXRoIGQ9Ik0xMSAxNWE1IDUgMCAxIDEgNS01IDUuMDA2IDUuMDA2IDAgMCAxLTUgNXptMC04YTMgMyAwIDEgMCAzIDMgMyAzIDAgMCAwLTMtM3oiLz48cGF0aCBkPSJtMTIuMjkzIDEzLjcwNyAxLjQxNS0xLjQxNCA0IDQtMS40MTQgMS40MTV6Ii8+Cjwvc3ZnPg==");
}
.header li>a[href$="/settings"]::before {
	content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2RkZCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiPjwvcGF0aD4KICAgICAgICA8cGF0aCBkPSJNMTAuMzI1IDQuMzE3Yy40MjYgLTEuNzU2IDIuOTI0IC0xLjc1NiAzLjM1IDBhMS43MjQgMS43MjQgMCAwIDAgMi41NzMgMS4wNjZjMS41NDMgLS45NCAzLjMxIC44MjYgMi4zNyAyLjM3YTEuNzI0IDEuNzI0IDAgMCAwIDEuMDY1IDIuNTcyYzEuNzU2IC40MjYgMS43NTYgMi45MjQgMCAzLjM1YTEuNzI0IDEuNzI0IDAgMCAwIC0xLjA2NiAyLjU3M2MuOTQgMS41NDMgLS44MjYgMy4zMSAtMi4zNyAyLjM3YTEuNzI0IDEuNzI0IDAgMCAwIC0yLjU3MiAxLjA2NWMtLjQyNiAxLjc1NiAtMi45MjQgMS43NTYgLTMuMzUgMGExLjcyNCAxLjcyNCAwIDAgMCAtMi41NzMgLTEuMDY2Yy0xLjU0MyAuOTQgLTMuMzEgLS44MjYgLTIuMzcgLTIuMzdhMS43MjQgMS43MjQgMCAwIDAgLTEuMDY1IC0yLjU3MmMtMS43NTYgLS40MjYgLTEuNzU2IC0yLjkyNCAwIC0zLjM1YTEuNzI0IDEuNzI0IDAgMCAwIDEuMDY2IC0yLjU3M2MtLjk0IC0xLjU0MyAuODI2IC0zLjMxIDIuMzcgLTIuMzdjMSAuNjA4IDIuMjk2IC4wNyAyLjU3MiAtMS4wNjV6Ij48L3BhdGg+CiAgICAgICAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMyI+PC9jaXJjbGU+Cjwvc3ZnPg==");
}
.header li>a[href$="/logout"]::before {
	content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iNDAgNDAgNDMyIDQzMiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNkZGQiIGZpbGw9IiNkZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CjxwYXRoIGQ9Ik0yNTYgNzMuODI1YTE4Mi4xOCAxODIuMTggMCAwIDAtMTgyLjE4IDE4Mi4xOGMwIDEwMC42MTcgODEuNTY3IDE4Mi4xNyAxODIuMTggMTgyLjE3YTE4Mi4xNzUgMTgyLjE3NSAwIDEgMCAwLTM2NC4zNXptLTE4LjA5NiA4Ni4yMmExOC4wOTkgMTguMDk5IDAgMCAxIDM2LjE5NyAwdjUzLjk3NWExOC4wOTkgMTguMDk5IDAgMCAxLTM2LjE5NyAwek0yNTYgMzQ4LjU4OWE5Mi40MTMgOTIuNDEzIDAgMCAxLTMyLjk2My0xNzguNzUxdjMzLjM4YTYyLjQ1MyA2Mi40NTMgMCAxIDAgNjUuOTMgMHYtMzMuMzhBOTIuNDE1IDkyLjQxNSAwIDAgMSAyNTYgMzQ4LjU4OHoiLz4KPC9zdmc+");
}
.logo {
	display: none;
}

#header-menu {
	display: block;
}

.header li>a::before {
	position: absolute;
	z-index: 0;
	top: -24px;
	left: -12px;
	margin: 0;
}
.header li>a {
	position: absolute;
	margin-top: 24px;
	margin-left: 12px;
	padding: 2px;
}
.header li>a:hover {
	z-index: 1;
	font-size: 16px;
	line-height: 100%;
	background: var(--body-background);
}


/* hide add subscription since it is not a common task and can be added when clicking feeds first */
.header li>a[href$="/subscribe"] {
	display: none;
}

/* marked stars are yellow :) since they are favorites they are allowed to stand out so they are easy to recognize */
.item-meta-icons li > button[data-value="star"],
.item-meta button[data-value="star"]:focus {
  color: yellow;
}

/* menu always visible on mobile */
.header nav ul {
  display: inline-block;
}

/* header is visible but already clicked so not that important */
/* leave space next to it for buttons that affect this page */
.page-header h1 {
	font-size: 16px;
	display: inline-block;
}

/* put items next to each other so they take up less space */
.header nav ul li,
.page-header ul,
.page-header ul li {
  display: inline-block;
  line-height: 100%;
  vertical-align: top;
}

/* hide text so it takes less space on my small screen */
.page-header ul li {
  display: inline-block;
  width: var(--icon-size);
  margin: 0 0 0 8px;
  font-size: 0;
}
.page-header ul li a,
.page-header ul li button {
	font-size: 0px;
}
.page-header ul li button:hover {
	background-color: var(--body-background);
	font-size: 16px;
}

/* hovers for icons */
.page-header ul li>a {
  position: absolute;
  margin-top: 24px;
  padding-top: 6px;
}
.page-header ul li a svg {
  margin-top: calc(-24px - 6px);
}
.page-header ul li>a:hover {
  z-index: 1;
  background: var(--body-background);
  font-size: 16px;
  padding: 6px 12px 6px 0;
}

/* but keep confirm visible, complex because those jump up at different places in tags */
.confirm {
  position: absolute;
  z-index: 200;
  display: inline-block;
  block-size: fit-content;
  margin-top: 32px;
  line-height: 100%;
  font-size: 16px;
  padding: 16px;
  border: 1px solid #600;
  background: #300;
  color: #c00;
}

/* labels are indicating enough and less labels means more space for content */
.icon-label { 
  display:none;
}

/* bigger icons so the visual indicator is bigger */
.icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* border is only to seperate items so we don't need a border all around so there is less to process for the eye */
/* relative positioning so everything within the item can be positioned more easily */
.items .item {
  position: relative;
  overflow: visible; /* for star */
  border-width: 0px 0px 1px 0px;
  border-color: #333;
  padding-left: calc(var(--icon-size) + 2mm);
  padding-bottom: 2mm;
  margin-bottom: 4mm;
}

/* bigger icon */
.items .item-title img  {
  position: absolute;
  left: calc(-1 * var(--icon-size) - 7px);
  top: 0px;
  width: var(--icon-size);
  height: var(--icon-size);
  margin: 4px 0;
}

/* weird positioning of text so   */
.item-title {
	display: block;
	width: 1px;
}
.items .item-title a {
	position: relative;
	display: block;
	width: calc( min(100vw, 820px) - (var(--icon-size) + 2mm + var(--icon-size) + 4px + var(--icon-size) + 5px + 5px + 20px) );
}

/* leave some space for the title */
.items .category {
	margin: 40px 0 0 0;
	padding: 0;
	border: 0px;
	background: transparent;
	font-size: 11px;
}
.items .category:after {
	content: "|";
	color: var(--item-meta-li-color);
	padding-left: 4px;
}
.items .item-meta-info {
	font-size: 11px;
}
.items .item-header,
.items .category,
.items .item-meta,
.items .item-meta-info {
	display: inline;
}

/* move the favorites star to the top right of the item */
.pagination-top + .items .item-meta button[data-value="star"],
.pagination-top + .items .item-meta button[data-value="unstar"] {
  position: absolute;
  right: 0;
  top: 0;
}

.pagination-top + .items .item-meta button[data-value="read"],
.pagination-top + .items .item-meta button[data-value="unread"] {
  position: absolute;
  right: 0;
  top: calc(var(--icon-size) + 4px);
}

.pagination-top + .items .item-meta a[data-original-link] {
  display: none;
}

.pagination-top + .items .item-meta a[data-comments-link] {
  position: absolute;
  right: calc(var(--icon-size) + 4px);
  top: calc(var(--icon-size) + 4px);
}

/* feeds overview page */
/* hide item meta icons if it is empty */
:not(.pagination-top) + .items .item-meta ul {
	display: inline;
	margin: 0;
}

.items .feed-item .item-meta-icons li > a[href$="/edit"] {
	position: absolute;
	top: 0;
	right: calc(var(--icon-size) + 4px);
}
.items .feed-item .item-meta-icons li > a[href$="/refresh"] {
	position: absolute;
	top: 0;
	right: 0;
}

/* not important, we can do this after clicking on the feed */
.items .feed-item .item-meta-icons li > button[data-url$="/remove"],
.items .feed-item .item-meta-icons li > button[data-url$="/mark-all-as-read"] {
	display: none;
}

/* add spacing to unread feeds layout so it emphasizes the feed */
.items .feed-item {
	border-style: solid;
	border-color: var(--feed-read-background-color);
	background: var(--feed-read-background-color);
}
.items .feed-item.feed-has-unread {
	border-color: var(--feed-has-unread-background-color);
	background: var(--feed-has-unread-background-color);
}
.items .feed-item.feed-parsing-error {
	border-color: var(--feed-parsing-error-background-color);
	background: var(--feed-parsing-error-background-color);
}
.items .feed-item {
	border-width: 10px 0;	/* fake padding */
}

.items .feed-item .feed-entries-counter {
	position: absolute;
	top: 2px;
	right: calc(var(--icon-size) + 4px + var(--icon-size) + 13px);
	display: block;
	text-align: right;
	font-size: 0;
}

.items .feed-item .feed-entries-counter span {
	color: #999;
	padding: 2px 6px;
	margin: 2px;
	font-size: 11px;
	border-radius: 4px;
}

.items .feed-item.feed-has-unread .feed-entries-counter span:nth-child(3) {
	background: #297cc6;
	color: #fff;
}

.items .feed-item.feed-has-unread .feed-entries-counter span:nth-child(6) {
	background: #333;
	color: #fff;
}


/* empty columns dont need extra padding so there is more space for content */
td:empty {
  padding: 0;
}
/* hackernews comments use nested table which makes me scroll horizontally and this tries to contain the content at least a little */
.entry-content table {
	max-width: 100vw;
}
.entry-content table table {
	max-width: calc(100vw - 20px);
}
.entry-content table table td * {
	max-width: calc(100vw - 30px)
}
.entry-content table table table {
	max-width: calc(100vw - 40px);
}
.entry-content table table table td * {
	max-width: calc(100vw - 50px)
}

/* make tables more compact on small screens */
@media (max-width: calc(600px - 1px)) {
	.entry-content table td:first-child {
		padding-left: 0;
	}
	.entry-content table td:last-child {
		padding-right: 0;
	}
}


/* wider window adjustments */
@media (min-width: 600px) {
	/* logo does not have search */
	.logo a::after {
		content: "";
		padding: 0;
	}
	.search {
		display: inline-block;
		float: right;
		margin-top: 3px;
		margin-right: 18px;
	}
	
	/* logo dimensions are different based on window size */
	.entry-header .entry-actions ul::before {
		margin: 0 -5px 0 14px;
	}

	:not(.pagination-top) + .items .item {
	  border-left-width: 12px;
	  border-right-width: 12px;
	}
}

/* highlight content using rewrite replace("(your words)"|"<abbr title='highlight'>$1</abbr>") */
/* rewrite risks breaking html tags */
/* abused abbr[title], tag span or attr class wont pass sanitizer */
/* sanitizer tag/attr list @ https://github.com/miniflux/v2/blob/main/reader/sanitizer/sanitizer.go#L372 */

abbr[title="highlight"] {
  background-color: yellow;
  color: var(--body-background);
  border: 0px;
  padding: 0px 4px;
}