diff options
Diffstat (limited to 'themes')
-rw-r--r-- | themes/night.css | 281 |
1 files changed, 163 insertions, 118 deletions
diff --git a/themes/night.css b/themes/night.css index 788d72797..f702a7251 100644 --- a/themes/night.css +++ b/themes/night.css @@ -1,201 +1,246 @@ @import "default.php"; -body.claro.ttrss_main #feeds-holder { - background : #222; - border-color : #666; - border-left-width : 1px; +:root { + --bg-main : #333; + --border-main : #666; + --border-dark : #222; + --bg-panel : #222; + --fg-main: #999; + --fg-light : #ccc; + --bg-active: #2a89bc; } -body.claro.ttrss_main #headlines-frame { - border-color : #ddd; +body.claro.ttrss_index #feeds-holder { + background : var(--bg-panel); + box-shadow : inset -1px 0px 2px -1px var(--border-main); } -body.claro.ttrss_main div.whiteBox { - border-color : #666; +body.claro.ttrss_index #headlines-frame, +body.claro.ttrss_index div.whiteBox { + border-color : var(--border-main); } -body.claro.ttrss_main #content-insert { - background : #333; +body.claro.ttrss_index #content-insert { + background : var(--bg-main); } -body.claro.ttrss_main #feedTree .dijitTreeRow { - color : #ccc ! important; +body.claro.ttrss_index #feedTree .dijitTreeRow { + color : var(--fg-light) ! important; } -body.claro.ttrss_main .dijitTree .dijitTreeRowHover { - background : #444; - border-color : #666; +body.claro.ttrss_index .dijitTree .dijitTreeRowHover { + background : var(--bg-panel); + border-color : var(--border-main) transparent; } -body.claro.ttrss_main .dijitTree .dijitTreeRowSelected { - background : #555; - border-color : #666 ! important; +body.claro.ttrss_index #feeds-holder .dijitTree#feedTree .dijitTreeRowSelected { + background : var(--bg-main); + border-color : var(--bg-main) transparent; } -body.claro.ttrss_main .dijitTreeRowSelected .dijitTreeLabel { +body.claro.ttrss_index .dijitTreeRowSelected .dijitTreeLabel { text-shadow : none; } -body.claro.ttrss_main #feedTree .counterNode.aux { - background : #555; - color : #999; - border-color : #333; +body.claro.ttrss_index #feeds-holder #feedTree .counterNode.aux { + background : var(--bg-panel); + color : var(--fg-main); + border-color : var(--bg-main); } -body.claro.ttrss_main #feedTree .counterNode { - border : 1px solid #6280AD; - color : white; - background : #6280AD; +body.claro.ttrss_index #headlines-frame { + background : var(--bg-main); + color : var(--fg-light); } -body.claro.ttrss_main #headlines-frame { - background : #333; - color : #ccc; +body.claro.ttrss_index #main-toolbar { + background : var(--bg-panel); + border-color : var(--border-dark); } -body.claro.ttrss_main #main-toolbar { - background : #333; - border-color : #666; +body.claro.ttrss_index #main-toolbar .dijitButtonText { + color : var(--fg-light); } -body.claro.ttrss_main #main-toolbar .dijitButtonText { - color : #ddd; +body.claro.ttrss_index #main-toolbar .dijitSelect, +body.claro.ttrss_index #main-toolbar .dijitSelect .dijitButtonText { + background : black; } -body.claro.ttrss_main #main-toolbar .dijitSelect { - border-color : #666; +body.claro.ttrss_index #main, +body.claro.ttrss_index #overlay { + background : var(--bg-main); + color : var(--fg-main); } - -body.claro.ttrss_main #main, -body.claro.ttrss_main #overlay { - background : #333; - color : #ccc; +body.claro.ttrss_index .hl .feed a, +body.claro.ttrss_index .cdm .feed a { + color : white; } -body.claro.ttrss_main .hl .feed a, -body.claro.ttrss_main .cdm .feed a { - color : white; +body.claro.ttrss_index div.cdm div.footer { + border-color : var(--border-dark); + color : var(--fg-light); } -body.claro.ttrss_main div.cdm.expanded div.footer, -body.claro.ttrss_main div.cdm.expandable div.footer { - border-color : #666; - color : #ccc; +body.claro.ttrss_index div.cdm .header a.title { + color : var(--fg-main); } -body.claro.ttrss_main div.cdm.expandable.Selected { - background : #6280AD; +body.claro.ttrss_index div.cdm.Unread .header a.title { + color : var(--fg-light); } -body.claro.ttrss_main div.cdm.expanded.Unread .header a.title, -body.claro.ttrss_main div.cdm.expandable.Unread a.title { - color : #ccc; +body.claro.ttrss_index .cdm.expandable.active .header a.title, +body.claro.ttrss_index .cdm.expanded.active .header a.title { + color : #2a89bc; } -body.claro.ttrss_main div.cdm.expanded .header a.title, -body.claro.ttrss_main div.cdm.expandable a.title { - color : #aaa; +body.claro.ttrss_index #headlines-frame .cdm { + border-color : var(--border-dark); } -body.claro.ttrss_main .cdm.expandable.active, -body.claro.ttrss_main .cdm.expandable { - border-color : #666; - background : transparent; +body.claro.ttrss_index #headlines-frame .cdm .header .author { + color : var(--fg-main); } -body.claro.ttrss_main .cdm.active { - background : transparent ! important; +body.claro.ttrss_index #headlines-frame .cdm.expandable { + background : var(--bg-main) ! important; } -body.claro.ttrss_main .cdm .content-inner, -body.claro.ttrss_main .cdm .titleWrap { - color : #bbb; +body.claro.ttrss_index #headlines-frame .cdm.expandable.Selected { + background : var(--bg-active) ! important; } -body.claro.ttrss_main #content-insert blockquote, -body.claro.ttrss_main #headlines-frame blockquote, -body.claro.ttrss_main .dijitContentPane blockquote { - color : #999; - border-color : #666; +body.claro.ttrss_index #headlines-frame .cdm.expandable.active { + background : var(--bg-main); } -body.claro.ttrss_main #content-insert code, -body.claro.ttrss_main #headlines-frame code, -body.claro.ttrss_main .dijitContentPane code { - color : #009900; +body.claro.ttrss_index #headlines-frame .cdm.expanded.active { + background : var(--bg-main); } -body.claro.ttrss_main #content-insert pre, -body.claro.ttrss_main #headlines-frame pre, -body.claro.ttrss_main.dijitContentPane pre { - color : #999; - background : black; +body.claro.ttrss_index #content-insert blockquote, +body.claro.ttrss_index #headlines-frame blockquote, +body.claro.ttrss_index .dijitContentPane blockquote { + color : var(--fg-main); + border-color : var(--border-main); } -body.claro.ttrss_main .dijitInputField.dijitButtonText { - background : #333; +body.claro.ttrss_index #content-insert code, +body.claro.ttrss_index #headlines-frame code, +body.claro.ttrss_index .dijitContentPane code { + color : #009900; } -/*body.claro.ttrss_main .cdm .content-inner img, -body.claro.ttrss_main .cdm img.tinyFeedIcon, -body.claro.ttrss_main .cdm .footer img, -body.claro.ttrss_main #feedTree img, -body.claro.ttrss_main .post .content img { - filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); // firefox lol - filter: grayscale(1); - -webkit-filter: grayscale(1); -}*/ +body.claro.ttrss_index #content-insert pre, +body.claro.ttrss_index #headlines-frame pre, +body.claro.ttrss_index.dijitContentPane pre { + color : var(--fg-main); + background : black; +} -body.claro.ttrss_main .hl img.hlScorePic { - opacity : 0.5; +body.claro.ttrss_index .dijitInputField.dijitButtonText { + background : var(--bg-main); } -body.claro.ttrss_main .cdm .footer img { +body.claro.ttrss_index .cdm .footer img { opacity : 0.6; } -body.claro.ttrss_main #floatingTitle { - background : #333; - border-color : #666; +body.claro.ttrss_index #floatingTitle { + background : var(--bg-panel); + border-color : var(--border-main); } -body.claro.ttrss_main #floatingTitle a.title { - color : #ccc; +body.claro.ttrss_index #floatingTitle * { + color : var(--fg-light) ! important; } -body.claro.ttrss_main .dijitMenu, -body.claro.ttrss_main .dijitMenuTable, -body.claro.ttrss_main .dijitMenu .dijitMenuItem td { - border-color : #666; - background : #666; +body.claro.ttrss_index .dijitMenu, +body.claro.ttrss_index .dijitMenuTable, +body.claro.ttrss_index .dijitMenu .dijitMenuItem td { + border-color : var(--border-main); + background : var(--border-main); } -body.claro.ttrss_main .dijitMenu .dijitMenuItemSelected, -body.claro.ttrss_main .dijitMenu .dijitMenuItemSelected td { +body.claro.ttrss_index .dijitMenu .dijitMenuItemSelected, +body.claro.ttrss_index .dijitMenu .dijitMenuItemSelected td { background : black; color : white; } -body.claro.ttrss_main .hl { - border-color : #666; +body.claro.ttrss_index #headlines-frame .hl { + border-color : var(--border-dark); +} + +body.claro.ttrss_index #headlines-frame .hl:not(.Selected):not(.active) .title a { + color : var(--fg-main); +} + +body.claro.ttrss_index #headlines-frame .hl.Unread:not(.Selected):not(.active) .title a { + color : var(--fg-light); } -body.claro.ttrss_main .hl .hl-title a { - color : #ccc; +body.claro.ttrss_index .post .header { + background : var(--bg-panel); + border-color : var(--border-main); } -body.claro.ttrss_main .hl.Selected, -body.claro.ttrss_main .hl.active { - background : #6280AD ! important; +body.claro.ttrss_index .post .content, +body.claro.ttrss_index .cdm .content-inner { + color : var(--fg-main); } -body.claro.ttrss_main .post .header { - background : #333; - border-color : #666; +body.claro.ttrss_index .articleNote { + background : var(--bg-panel); + border-color : #9a8c59; } -body.claro.ttrss_main .hl.Unread div.title a { - color: #bbb; +body.claro.ttrss_index .post .content img, +body.claro.ttrss_index .cdm .content-inner img, +body.claro.ttrss_index .post .content video, +body.claro.ttrss_index .cdm .content-inner video { + transition : opacity 0.5s linear, filter 0.5s linear; } +body.claro.ttrss_index .post .content img:not(:hover), +body.claro.ttrss_index .cdm .content-inner img:not(:hover), +body.claro.ttrss_index .post .content video:not(:hover), +body.claro.ttrss_index .cdm .content-inner video:not(:hover) { + opacity : 0.5; + filter: grayscale(80%); +} + +body.claro.ttrss_index #content-insert_splitter { + border-color : var(--border-main); + background : var(--bg-panel); +} + +body.claro.ttrss_index #feeds-holder_splitter { + border-color : var(--border-main); + background : var(--bg-main); +} + +body.claro.ttrss_index .insensitive { + color : var(--fg-light); +} + +body.claro.ttrss_index hr, +body.claro.ttrss_index h1, +body.claro.ttrss_index h2, +body.claro.ttrss_index h3 { + border-color : var(--border-dark); +} + +::-webkit-scrollbar { + width: 4px; +} + +::-webkit-scrollbar-thumb { + background-color: var(--border-main); +} + +::-webkit-scrollbar-track { + background-color: var(--bg-panel); +} |