Skip to content

Instantly share code, notes, and snippets.

@RobinBoers
Last active August 24, 2024 20:31
Show Gist options
  • Save RobinBoers/b468638c902777a956ecced9c3cef167 to your computer and use it in GitHub Desktop.
Save RobinBoers/b468638c902777a956ecced9c3cef167 to your computer and use it in GitHub Desktop.
Custom CSS to make Miniflux v1.x look like v2 :)
@import url("/assets/css/app.min.css");
:root {
--font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--body-color:#333;
--body-background:#fff;
--hr-border-color:#ccc;
--title-color:#333;
--link-color:#3366CC;
--link-focus-color:red;
--link-hover-color:#333;
--link-visited-color:purple;
--header-list-border-color:#ddd;
--header-link-color:#444;
--header-link-focus-color:#888;
--header-link-hover-color:#888;
--header-active-link-color:#444;
--page-header-title-color:#333;
--page-header-title-border-color:#333;
--logo-color:#000;
--logo-hover-color-span:#000;
--table-border-color:#ddd;
--table-th-background:#fcfcfc;
--table-th-color:#333;
--table-tr-hover-background-color:#f9f9f9;
--table-tr-hover-color:#333;
--button-primary-border-color:#3079ed;
--button-primary-background:#4d90fe;
--button-primary-color:#fff;
--button-primary-focus-border-color:#2f5bb7;
--button-primary-focus-background:#357ae8;
--input-border:1px solid #ccc;
--input-background:#fff;
--input-color:#333;
--input-placeholder-color:#d0d0d0;
--input-focus-color:#000;
--input-focus-border-color:rgba(82, 168, 236, 0.8);
--input-focus-box-shadow:0 0 8px rgba(82, 168, 236, 0.6);
--alert-color:#c09853;
--alert-background-color:#fcf8e3;
--alert-border-color:#fbeed5;
--alert-success-color:#468847;
--alert-success-background-color:#dff0d8;
--alert-success-border-color:#d6e9c6;
--alert-error-color:#b94a48;
--alert-error-background-color:#f2dede;
--alert-error-border-color:#eed3d7;
--alert-info-color:#3a87ad;
--alert-info-background-color:#d9edf7;
--alert-info-border-color:#bce8f1;
--panel-background:#fcfcfc;
--panel-border-color:#ddd;
--panel-color:#333;
--modal-background:#f0f0f0;
--modal-color:#333;
--modal-box-shadow:2px 0 5px 0 #ccc;
--pagination-link-color:#333;
--pagination-border-color:#ddd;
--category-color:#333;
--category-background-color:#fffcd7;
--category-border-color:#d5d458;
--category-link-color:#000;
--category-link-hover-color:#000;
--item-border-color:#ddd;
--item-padding:5px;
--item-title-link-font-weight:600;
--item-status-read-title-link-color:#777;
--item-status-read-title-focus-color:#777;
--item-meta-focus-color:#777;
--item-meta-li-color:#aaa;
--current-item-border-width:3px;
--current-item-border-color:#bce;
--current-item-box-shadow:none;
--entry-header-border-color:#ddd;
--entry-header-title-link-color:#333;
--entry-content-color:#555;
--entry-content-code-color:#333;
--entry-content-code-background:#f0f0f0;
--entry-content-code-border-color:#ddd;
--entry-content-quote-color:#666;
--entry-content-abbr-border-color:#999;
--entry-enclosure-border-color:#333;
--parsing-error-color:#333;
--feed-parsing-error-background-color:#fcf8e3;
--feed-parsing-error-border-style:solid;
--feed-parsing-error-border-color:#f9e883;
--feed-has-unread-background-color:#dfd;
--feed-has-unread-border-style:solid;
--feed-has-unread-border-color:#bee6bc;
--category-has-unread-background-color:#dfd;
--category-has-unread-border-style:solid;
--category-has-unread-border-color:#bee6bc;
--keyboard-shortcuts-li-color:#333;
--counter-color:#666
}
html {
color-scheme: light;
}
:root {
--entry-content-font-weight:300;
--entry-content-font-family:Georgia, 'Times New Roman', Times, serif;
--entry-content-quote-font-family:var(--entry-content-font-family)
}
* {
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 !important;
}
body > header {
margin-top:12px;
margin-bottom:20px
}
.search {
margin-top: -10px;
}
#scroll {
display: none;
}
.item-icons {
display: none
}
body > header ul {
text-align: left;
}
body > header li {
display: inline;
cursor:pointer;
padding: 0;
padding-right: 15px;
font-size: 1em;
}
.logo {
font-size: .9em;
margin-right: 15px;
}
body > header * {
text-transform: capitalize;
}
body > header li a:hover {
color:#888
}
body > header a {
color:var(--header-link-color);
text-decoration:none;
border:none;
font-weight:400
}
body > header .active a {
color:var(--header-active-link-color);
font-weight:600
}
body > header a:hover {
color:var(--header-link-hover-color)
}
body > header a:focus {
color:var(--header-link-focus-color)
}
.page-header h2 {
font-weight:500;
font-size: 1.5em;
border-bottom:1px dotted var(--page-header-title-border-color)
}
.page-header h2 a {
text-decoration:none;
color:var(--page-header-title-color)
}
.page-header h2 a:hover,
.page-header h2 a:focus {
color:#666
}
#nav-counter, .items-count {
font-size: .9em;
font-weight: 300;
color: var(--counter-color)
}
@media(min-width:620px) {
body {
margin:auto;
max-width:750px
}
}
ul.item-menu {
padding-top: 2px;
}
ul.item-menu li, ul.item-menu a {
color: var(--item-meta-focus-color)
}
ul.item-menu a:hover {
color: #333 !important;;
}
[data-item-page="unread"] ul.item-menu li:nth-child(2) {
display: none;
}
[data-item-page="unread"] ul.item-menu li:nth-child(4) {
border: none
}
ul.item-menu li:nth-child(5)::before {
content: "";
display: block;
}
ul.item-menu li:nth-child(n+5) a,
[data-item-page="feeds"] .item-menu a {
color: #777;
font-size: 1.3em;
display: inline-block;
margin-top: 7px;
}
.feed-last-checked {
color: var(--item-meta-focus-color);
}
[data-item-page="feeds"] article .feed-groups {
display: none;
}
@media only screen and (min-width:480px) {
body > header ul li.hide-desktop {
display:initial
}
}
@media only screen and (min-width:690px) {
body > header ul li.hide-desktop {
display:none
}
}
@media only screen and (max-width:690px) {
body > header ul li.hide-mobile {
display:none
}
body > header ul {
text-align: right
}
}
h1, h2, h3 {
color: var(--title-color);
}
.page h1 {
font-size: 2em;
line-height: 1.25em;
margin: 5px 0 30px;
overflow-wrap: break-word;
font-family: var(--font-family);
font-weight: bold;
margin-bottom: 25px;
margin-top: 20px;
}
.page h1 a {
color: inherit;
font-size: 1em;
}
.item-infos {
font-family: var(--font-family);
font-size: 0.9em;
}
.item-infos a {
font-size: 1em !important;
}
.item-infos li:nth-child(3) {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment