Sharing my custom CSS here. I made it mostly for my iPad usage to save space and improve usability (dragging of items etc), but I’m using it on desktop as well since all of the changes apply there as well for me.
It’s not much, but maybe someone can use it as an inspiration to fine tune theirs as they like.
Description of changes are in the css itself.
Feedback welcome of course, main goal is sharing though.
/* Disable selection, improved handling on touch screen */
html {
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
/* hide feed item icon in article list */
.header .right span { display: none; }
/* common row background for read/unread, I only gray the text for read items */
.cdm.expandable, .cdm.expandable.Unread {
background: #fefefe
}
/* disable underline in title (useless for touch screens, also dislike it on web) */
div.cdm.expandable div.header a.title {
text-decoration: none;
}
/* article title unread */
div.cdm.expandable.Unread div.header a.title {
color: rgba(0,0,0,.85);
}
/* article title read */
div.cdm.expandable div.header a.title {
color: rgba(0,0,0,.50);
}
/* update time font */
.cdm .header span.updated {
color: rgba(0,0,0,.45);
font-weight: normal;
font-size: 11px;
}
/* I tried to just highlight the text color here instead of the bg, doesn’t work yet, overwritten for some reason */
.cdm.expandable.score-half-high a.title {
color: red;
}
/* I just liked the looks of another theme so I stole this part */
div.cdm.expandable div.header a.title {
font-weight: 600;
font-size: 13px;
font-family: “Helvetica Neue”;
}
/* Highlight items with score… like… REALLY highlight */
.cdm.expandable.score-half-high, .cdm.expandable.score-high {
background: greenyellow;
}
/* reduce horiz padding of icon area, to save some space on small screens */
.cdm .header .left, .cdm .header .right {
padding-left: 0px;
padding-right: 0px;
}
/* Make collapse button wider. I want it to be a somewhat higher, much wider button, this is the best I’ve got so far -> wider and further apart from the title not to open it by accident */
.collapse i {
width: 40px;
text-align: center;
}
/* Disable mouse drag for feed item title */
.title { -webkit-user-drag: none; }
/* Disable mouse drag for images */
img {
pointer-events: none;
-webkit-user-drag: none;
}
/* Disable mouse drag for links in article */
div#headlines-wrap-inner a { -webkit-user-drag: none; }
/* Hide the link below last feed item, I don’t use it but tap it by accident */
body.ttrss_main #headlines-spacer a { display: none; }
/* Hide attachments in article */
.attachments { display: none; }
/* Hide some icons I don’t use */
i.pub-pic, i.icon-score, span.author, i.icon-syndicate { display: none }