diff options
Diffstat (limited to 'themes/night.less')
-rw-r--r-- | themes/night.less | 559 |
1 files changed, 304 insertions, 255 deletions
diff --git a/themes/night.less b/themes/night.less index 12985996c..9e664fcd9 100644 --- a/themes/night.less +++ b/themes/night.less @@ -1,262 +1,311 @@ @import "../css/defines.less"; +@import "../lib/flat-ttrss/flat_combined_dark.css"; -:root { - --bg-main : #333; - --border-main : #666; - --border-dark : #222; - --bg-panel : #222; - --fg-main: #999; - --fg-light : #ccc; - --bg-active: #2a89bc; +@color-accent: #b87d2c; +@color-panel-bg : #222; +@default-text: #ccc; +@default-fg: @default-text; +@border-default: #222; +@default-bg : #333; + +@border-light : #666; + +@default-text: #ccc; + +@fg-insensitive: darken(@default-text, 20%); +@fg-light : lighten(@default-text, 10%); + +body.flat.ttrss_main.ttrss_prefs { + #main, #footer { + background: @color-panel-bg; + } + + #footer a { + color : #fff; + } + + td.filename, + div.prefHelp { + color : @fg-insensitive; + } } -/* main layout overrides */ - -body.flat.ttrss_main.ttrss_index { - - #feeds-holder { - background : var(--bg-panel); - box-shadow : inset -1px 0px 2px -1px var(--border-main); - } - - #headlines-frame, - div.whiteBox { - border-color : var(--border-main); - } - - #main, - #overlay { - background : var(--bg-main); - color : var(--fg-main); - } - - #content-insert { - background : var(--bg-main); - } - - #content-insert_splitter { - border-color : var(--border-main); - background : var(--bg-panel); - } - - #feeds-holder_splitter { - border-color : var(--border-main); - background : var(--bg-main); - } - - /* misc */ - - .insensitive { - color : var(--fg-light); - } - - hr, - h1, - h2, - h3 { - border-color : var(--border-dark); - } - - code { - color : #c90 ! important; - } - - pre { - color : var(--fg-main); - background : var(--bg-panel) ! important; - } - - /* feeds */ - - #feeds-holder #feedTree .dijitTreeRow { - color : var(--fg-light) ! important; - } - - #feeds-holder #feedTree.dijitTree .dijitTreeRowHover { - background : var(--bg-panel); - border-color : var(--border-main) transparent; - } - - #feeds-holder #feedTree.dijitTree .dijitTreeRowSelected { - background : var(--bg-main); - border-color : var(--bg-main) transparent; - } - - #feeds-holder #feedTree .dijitTreeRowSelected .dijitTreeLabel { - text-shadow : none; - } - - #feeds-holder #feedTree .counterNode.aux { - background : var(--bg-panel); - color : var(--fg-main); - border-color : var(--bg-main); - } - - /* headlines */ - - #headlines-frame { - background : var(--bg-main); - color : var(--fg-light); - } - - #main-toolbar { - background : var(--bg-panel); - border-color : var(--border-dark); - } - - #main-toolbar .dijitButtonText { - color : var(--fg-light); - } - - #main-toolbar .dijitSelect, - #main-toolbar .dijitSelect .dijitButtonText { - background : var(--bg-panel); - } - - .hl .feed a, - .cdm .feed a { - color : white; - } - - #headlines-frame .hl { - border-color : var(--border-dark); - } - - #headlines-frame .hl:not(.Selected):not(.active) .title a { - color : var(--fg-main); - } - - #headlines-frame .hl.Unread:not(.Selected):not(.active) .title a { - color : var(--fg-light); - } - - .post .header { - background : var(--bg-panel); - border-color : var(--border-main); - } - - .post .content, - .cdm .content-inner { - color : var(--fg-main); - } - - .post .content img, - .cdm .content-inner img, - .post .content video, - .cdm .content-inner video { - transition : opacity 0.5s linear, filter 0.5s linear; - } - - .post .content img:not(:hover), - .cdm .content-inner img:not(:hover), - .post .content video:not(:hover), - .cdm .content-inner video:not(:hover) { - opacity : 0.5; - filter: grayscale(80%); - } - - div.cdm div.footer { - border-color : var(--border-dark); - color : var(--fg-light); - } - - div.cdm .header a.title { - color : var(--fg-main); - } - - div.cdm.Unread .header a.title { - color : var(--fg-light); - } - - .cdm.expandable.active .header a.title, - .cdm.expanded.active .header a.title { - color : #2a89bc; - } - - #headlines-frame .cdm { - border-color : var(--border-dark); - } - - #headlines-frame .cdm .header .author { - color : var(--fg-main); - } - - #headlines-frame .cdm.expandable { - background : var(--bg-main) ! important; - } - - #headlines-frame .cdm.expandable.Selected { - background : var(--bg-active) ! important; - } - - #headlines-frame .cdm.expandable.active { - background : var(--bg-main); - } - - #headlines-frame .cdm.expanded.active { - background : var(--bg-main); - } - - #content-insert blockquote, - #headlines-frame blockquote, - .dijitContentPane blockquote { - color : var(--fg-main); - border-color : var(--border-main); - } - - .dijitInputField.dijitButtonText { - background : var(--bg-main); - } - - .cdm .footer img { - opacity : 0.6; - } - - #floatingTitle { - background : var(--bg-panel); - border-color : var(--border-main); - } - - #floatingTitle * { - color : var(--fg-light) ! important; - } - - /* other dijits */ - - .dijitMenu, - .dijitMenuTable, - .dijitMenu .dijitMenuItem td { - border-color : var(--bg-panel); - background : var(--bg-panel); - color : var(--fg-main); - } - - .dijitMenu .dijitMenuItemSelected, - .dijitMenu .dijitMenuItemSelected td { - background : black; - color : white; - } - - .dijitMenu .dijitMenuSeparator * { - border-bottom-color : var(--border-dark) ! important; - } - - .articleNote { - background : var(--bg-panel); - border-color : #9a8c59; - } - - ::-webkit-scrollbar { - width: 4px; - } - - ::-webkit-scrollbar-thumb { - background-color: var(--border-main); - } - - ::-webkit-scrollbar-track { - background-color: var(--bg-panel); - } +body.flat.ttrss_main { + img[src*='indicator_white.gif'] { + filter : invert(1); + } + + a:hover { + color : lighten(@color-link, 20%); + } + + #main, #overlay { + color : @default-text; + background: @default-bg; + } + + #toolbar-frame #toolbar { + background : @color-panel-bg; + color : @fg-light; + } + + #feeds-holder { + background : @color-panel-bg; + box-shadow : inset -1px 0px 2px -1px @border-light; + + #feedTree { + .counterNode.aux { + background: @color-panel-bg; + color: @default-text; + border-color: @default-bg; + } + + .dijitTreeRowSelected { + background : @default-bg; + border-color : @default-bg transparent; + color : @fg-light; + } + + .dijitTreeRowSelected .dijitTreeLabel { + text-shadow : none; + } + } + } + + #floatingTitle { + background-color : @default-bg; + + .feed a { + color : @fg-light; + } + + i.material-icons { + opacity : 0.7; + } + } + + div#floatingTitle.Unread a.title { + color : @fg-light; + } + + #headlines-frame { + .hl:not(.active):not(.Selected):not(.Unread), + .cdm.expandable:not(.active):not(.Selected):not(.Unread) { + background : @default-bg; + } + + .hl.Unread:not(.active):not(.Selected), + .cdm.expandable.Unread:not(.active):not(.Selected) { + background : @color-panel-bg; + } + + .cdm.expanded { + background: @default-bg; + } + + .hl.Unread .title, + .cdm.Unread .title { + color : @fg-light; + } + + .hl.active, + .hl.Selected, + .cdm.expandable.Selected { + > * { + filter : invert(1); + + img { + filter : invert(1); + } + } + + .dijitCheckBox { + filter : invert(1); + } + } + + .hl.Selected.marked, + .cdm.expandable.Selected.marked, + .hl.active.marked { + i.marked-pic { + filter : invert(1); + } + } + + .hl.Selected.published, + .cdm.expandable.Selected.published, + .hl.active.published { + i.pub-pic { + filter : invert(1); + } + } + + .cdm.expanded.active .title, + .cdm.expandable.active .title { + color : @color-accent; + } + + .cdm.expandable.active { + background : @color-panel-bg ! important; + } + + .hl, .cdm { + color : @default-text; + + .title { + color : @default-text; + } + + .author { + color : @fg-insensitive; + } + + .updated, .content { + color : @default-text; + } + + .feed a { + color : @fg-light; + } + } + + .cdm .footer { + border-color : @color-panel-bg; + color : @default-text; + } + + .left { + i.material-icons, + .dijitCheckBox { + opacity: 0.7; + } + } + + } + + .dijitToolbar { + .dijitSelect { + .dijitButtonContents, .dijitButtonNode { + transition: background-color 0.3s linear; + } + } + + .dijitSelect:not(.dijitHover) { + .dijitButtonContents, .dijitButtonNode { + background-color: @color-panel-bg; + } + } + } + + .dijitCheckBox:not(.dijitChecked)::before { + color : @fg-insensitive; + background: @color-panel-bg; + } + + .insensitive { + color : @fg-insensitive; + } + + .dijitAccordionInnerContainerSelected .dijitAccordionTitle { + color : white; + } + + .dijitDialog .dijitDialogPaneContent { + background : @color-panel-bg; + } + + .dijitTab:not(.dijitTabChecked) { + background : @color-panel-bg; + } + + .dijitTab.dijitTabChecked.dijitTabHover { + color : @fg-light; + } + + label.dijitButton { + border: 1px solid @border-light; + } + + label.dijitButton:hover { + border-color : lighten(@border-default, 5%); + background-color: @default-bg; + } + + textarea { + color : @fg-light; + } + + code { + color : #c90 ! important; + } + + .panel { + background-color : @color-panel-bg; + border-color : @border-light; + } + + .dijitDialog .panel { + background-color : @default-bg; + } + + #headlines-frame blockquote, + #content-insert blockquote { + color : @default-text; + border-color : @color-accent; + } + + pre { + color : @default-text; + background : @color-panel-bg ! important; + } + + ul#filterDlg_Matches, ul#filterDlg_Actions { + background: @color-panel-bg; + border-color : @border-light; + } + + /* + .post .content img, + .cdm .content-inner img, + .post .content video, + .cdm .content-inner video { + transition : opacity 0.2s linear, filter 0.2s linear; + } + + .post .content img:not(:hover), + .cdm .content-inner img:not(:hover), + .post .content video:not(:hover), + .cdm .content-inner video:not(:hover) { + opacity : 0.5; + filter: grayscale(80%); + } */ + + .article-note { + background : @color-accent; + border-color : @color-accent; + color : @default-bg; + + i.material-icons { + color : @default-bg; + } + } + + ::-webkit-scrollbar { + width: 4px; + } + + ::-webkit-scrollbar-thumb { + background-color: @border-light; + } + + ::-webkit-scrollbar-track { + background-color: @color-panel-bg; + } + + .alert { + background: @color-panel-bg; + border-color : darken(@color-accent, 20%); + } } |