Custom colors, fonts, and scrollbars for Tiny Tiny RSS

tt-rss.css

/* Options */ :root {
 --accent-normal: #642792;
 --accent-light: #642792cc;
 --accent-dark: #642792;
 --scrollbar-thumb-normal: #ccc;
 --scrollbar-thumb-sidebar: #d8d8d8;
 --scrollbar-thumb-inactive: #e6e6e6;
 --scrollbar-track: transparent;
 
 --font-family-sans: "Ubuntu", "Droid Sans", "Trebuchet MS", "DejaVu Sans", "Bitstream Vera Sans", "Verdana", sans-serif;
 --font-family-mono: "Ubuntu Mono", "Droid Sans Mono", "DejaVu Sans Mono", "Consolas", "Courier New", "Courier", monospace;
 --font-size-adjust-mono: 0.5625;
 --font-weight-normal-sans: lighter;
 --font-weight-bold-sans: 500;
}


/* Fonts */

.dijitReset:not(.dijitArrowButton),
div.cdmFooter,
html, body, input, select {
 font-family: var(--font-family-sans) !important;
 font-weight: var(--font-weight-normal-sans);
}
h1, h2, h3, h4, h5, h6, strong, b, th {
 font-weight: var(--font-weight-bold-sans);
}
#feedTree .dijitTreeRow .dijitTreeLabel.Unread,
div.cdm.expandable div.header a.title,
#overlay_inner,
.flat .dijitDialogTitle {
 font-weight: var(--font-weight-bold-sans) !important;
}
pre, code, kbd, samp, var, tt, textarea {
 font-family: var(--font-family-mono) !important;
 font-size-adjust: var(--font-size-adjust-mono);
}
body.ttrss_prefs .user-css-editor {
 font-size: 0.9375em !important;
}


/* Scrollbars - width and colors */

#feedTree, #headlines-frame {
 scrollbar-width: thin;
 scrollbar-color: var(--scrollbar-thumb-normal) var(--scrollbar-track);
 transition: scrollbar-color 0.0625s linear;
}
#feedTree {
 scrollbar-color: var(--scrollbar-thumb-inactive) var(--scrollbar-track);
}
#feedTree:hover {
 scrollbar-color: var(--scrollbar-thumb-sidebar) var(--scrollbar-track);
}

::-webkit-scrollbar {
 width: 6px !important;
}
#feedTree::-webkit-scrollbar-track, #headlines-frame::-webkit-scrollbar-track {
 background-color: var(--scrollbar-track);
}
#headlines-frame::-webkit-scrollbar-thumb {
 background-color: var(--scrollbar-thumb-normal);
}
#feedTree::-webkit-scrollbar-thumb {
 background-color: var(--scrollbar-thumb-inactive);
}
#feedTree:hover::-webkit-scrollbar-thumb {
 background-color: var(--scrollbar-thumb-sidebar);
}


/* Scrollbars - Move sidebar scrollbar to left hand side */

#feedTree {
 direction: rtl;
}
#feedTree > * {
 direction: ltr;
}
#feedTree:dir(rtl) {
 direction: ltr;
}
#feedTree:dir(rtl) > * {
 direction: rtl;
}


/* Colors - links - reverted below in div.cdm.expandable */

:root body.ttrss_main a {  /* in defines.less */
 color: var(--accent-normal);
}

:root body.ttrss_main a:hover {
 color: var(--accent-dark);
}


/* Colors - other source files */

body.ttrss_main #feeds-holder #feedTree .counterNode:not(.aux) {
 background-color: var(--accent-normal) !important;
 border-color: var(--accent-normal) !important;
}

.flat .dijitTreeExpando {
 color: var(--accent-normal) !important;
}

.flat .dijitMenuItemSelected td, .flat .dijitMenuItemSelected,
.flat .dijitMenuItemHover td, .flat .dijitMenuItemHover {
 background-color: var(--accent-normal) !important;
}

.flat .dijitMenu .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel {
 color: var(--accent-light) !important;
}


/* Colors - defines.less - div.cdm.expandable */

div.cdm.expandable div.header a.title {
 color: revert;
}

div.cdm.expandable.active div.header a.title,
div.cdm.expandable.active .collapse i.material-icons {
 color: var(--accent-normal) !important;
}


/* Colors - defines.less - other selectors */

body.ttrss_main .notify.notify_info i.icon-notify,
body.ttrss_main .hl span.feed a:hover,
body.ttrss_main .hl.active div.title a,
body.ttrss_main #feeds-holder #feedTree i.icon.icon-restore,
body.ttrss_main #headlines-frame div.feed-title a:hover,
body.ttrss_main #toolbar-frame #toolbar #selected_prompt,
body.ttrss_main #headlines-spacer a:hover,
body.ttrss_main ul.hotkeys-help .hk,
body.ttrss_main[view-mode="marked"] .dijitTreeRow.Has_Marked .dijitTreeLabel,
body.ttrss_main #prefFilterTestResultList .feed,
div.cdm.expanded.active div.header a.title,
.cdm div.feed-title a:hover,
div#floatingTitle .collapse i.material-icons,
div#floatingTitle .feed-title a.catchup:hover,
div.cdm.expandable.active .collapse i.material-icons,
div.cdm.expandable.active div.header a.title,
body.ttrss_utility .content h2,
body.ttrss_utility .content h3,
body.ttrss_utility .content h4,
body.ttrss_utility a,
body.ttrss_utility .footer a:hover,
.flat .dijitTab i.material-icons,
.flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons,
.flat .dijitTree .dijitTreeRowSelected .dijitTreeExpando {
 color: var(--accent-normal) !important;
}

body.ttrss_main .notify.notify_info,
body.ttrss_main div#cmdline,
body.ttrss_main #headlines-frame div.feed-title,
.cdm div.feed-title {
 border-color: var(--accent-normal) !important;
}

body.ttrss_main .hl.active {
 background-color: var(--accent-normal) !important;  /* !important in upstream */
}

::selection /*,
::-webkit-scrollbar-thumb*/ {
 background-color: var(--accent-normal) !important;
}

body.ttrss_main .notify.notify_info {
 background-color: var(--accent-light) !important;
}