diff options
Diffstat (limited to 'themes/light')
-rw-r--r-- | themes/light/cdm.less | 434 | ||||
-rw-r--r-- | themes/light/defines.less | 74 | ||||
-rw-r--r-- | themes/light/dijit_basic.less | 162 | ||||
-rw-r--r-- | themes/light/dijit_light.less | 14 | ||||
-rw-r--r-- | themes/light/light_base.less | 4 | ||||
-rw-r--r-- | themes/light/prefs.less | 194 | ||||
-rw-r--r-- | themes/light/tt-rss.less | 1340 | ||||
-rw-r--r-- | themes/light/utility.less | 116 | ||||
-rw-r--r-- | themes/light/zoom.less | 78 |
9 files changed, 2416 insertions, 0 deletions
diff --git a/themes/light/cdm.less b/themes/light/cdm.less new file mode 100644 index 000000000..7ac28913e --- /dev/null +++ b/themes/light/cdm.less @@ -0,0 +1,434 @@ +.cdm { + i.material-icons { + color : @color-icon; + } + + .header, .footer { + display : flex; + flex-direction : row; + flex-wrap : nowrap; + } + + .header img, .footer img, + .footer i.material-icons { + margin : 0px 4px; + vertical-align: middle; + } + + .header { + align-items : center; + + > * { + padding : 4px; + white-space : nowrap; + } + + .left, .right { + display : flex; + align-items : center; + + i.material-icons { + margin-left : 2px; + padding : 2px; + transition : color 0.2s linear; + user-select: none; + font-size : 21px; + } + } + + .titleWrap { + flex-grow : 2; + } + + span.updated { + color : @default-text; + font-weight : normal; + font-size : 11px; + white-space : nowrap; + } + + input { + margin : 0px 4px; + } + } + + .footer { + height : 30px; + padding-left : 5px; + font-weight : normal; + color : @default-text; + clear : both; + align-items : center; + + .left { + flex-grow : 2; + } + } + + .intermediate { + margin-top : 10px; + margin-left : 10px; + } + + .content-inner { + margin : 10px; + line-height : 1.5; + font-size : 16px; + } + + .intermediate img, + .intermediate video, + .content-inner img, + .content-inner video { + border-width : 0px; + max-width : 98%; + height : auto; + } +} + +.cdm.expanded { + /*margin-top : 4px; + margin-bottom : 4px;*/ + + .collapse, .excerpt { + display : none; + } + + .titleWrap { + white-space : normal; + } + + .footer { + border: 0px solid @border-default; + border-bottom-width: 1px; + } + + > hr { + margin-top : 0px; + margin-bottom : 0px; + } + +} + +div.cdm.expanded div.header { + background : transparent ! important; +} + +div.cdm.expanded div.header a.title { + font-size : 16px; + color : #999; + font-weight : 600; + transition : color 0.2s, background 0.2s; + text-rendering: optimizelegibility; + font-family : @fonts-ui-bold; +} + +div.cdm.expanded.active { + background : white; +} + +div.cdm.expanded.active div.header a.title { + color : @color-link; +} + +div.cdm.expanded.Unread div.header a.title { + color : black; +} + +div.cdm.expanded div.content { + color : @default-text; +} + +div.cdm.expanded.Unread div.content { + color : black; +} + +div.cdm.active div.content { + color : black; +} + +div.cdm.vgrlf .feed { + display : none; +} + +.cdm { + div.feed-title { + border: 0px solid @color-link; + border-bottom-width: 1px; + padding: 5px 3px 5px 5px; + } + + div.feed-title a.title { + color: @default-text; + font-weight: bold; + } + + div.feed-title a { + color: @default-text; + } + + div.feed-title a:hover { + color: @color-link; + } + + div.header span.feed { + float: right; + font-weight: normal; + font-style: italic; + } + + div.header div.feed, div.header div.feed a { + vertical-align: middle; + color: @default-text; + font-weight: normal; + font-style: italic; + font-size: 11px; + } + + div.content-inner p { + /*max-width : 650px;*/ + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + + div.content-inner iframe { + min-width : 50%; + max-width : 98%; + } + + div.header span.author { + white-space : nowrap; + color : @default-text; + font-size : 11px; + font-weight : normal; + } + + .feed a { + border-radius : 4px; + display : inline-block; + padding : 1px 4px 1px 4px; + } +} + +#main:not(.expandable) div#floatingTitle { + .collapse { + display : none; + } +} + +div#floatingTitle { + position : absolute; + z-index : 5; + top : 0px; + right : 0px; + left : 0px; + border: 0px solid @border-default; + border-bottom-width: 1px; + background : white; + color : @default-text; + display : flex; + flex-direction : row; + flex-wrap : nowrap; + box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1); + align-items: center; + + > * { + white-space : nowrap; + padding : 4px; + } + + .left, .right { + display : flex; + align-items : center; + + i.material-icons { + margin-left : 2px; + font-size : 21px; + padding : 2px; + user-select: none; + } + + i.icon-anchor { + margin-left : 0px; + margin-right : 1px; // replaces checkbox which is a bit wider + padding : 0px; + color : #ccc; + cursor : pointer; + } + } + + .excerpt { + display : none; + } + + .collapse i.material-icons { + color : @color-accent; + cursor : pointer; + } + + span.author { + color : @default-text; + font-size : 11px; + font-weight : normal; + } + + a.title { + font-size : 16px; + color : #999; + transition : color 0.2s, background 0.2s; + font-weight : 600; + text-rendering: optimizelegibility; + font-family : @fonts-ui-bold; + } + + div.feed { + padding-right : 10px; + color : @default-text; + font-weight : normal; + font-style : italic; + font-size : 11px; + white-space : nowrap; + } + + div.feed a { + border-radius : 4px; + display : inline-block; + padding : 1px 4px 1px 4px; + } + + span.updated { + padding-right : 10px; + white-space : nowrap; + color : @default-text; + font-size : 11px; + } + + div.feed a { + color : @default-text; + } + + span.titleWrap { + width : 100%; + white-space : normal; + } + + .feed-title { + > * { + display : table-cell; + vertical-align : middle; + } + + a.title { + width : 100%; + } + + a.catchup { + text-align : right; + color : @default-text; + padding-right : 10px; + font-size : 11px; + white-space : nowrap; + } + + a.catchup:hover { + color : @color-link; + } + + } +} + +div#floatingTitle.Unread a.title { + color : black; +} + +.cdm.expandable { + background-color : @color-panel-bg; + border: 0px solid @border-default; + border-bottom-width: 1px; + + > hr { + display : none; + } + + div.header span.titleWrap { + white-space : nowrap; + text-overflow : ellipsis; + overflow : hidden; + } + + .excerpt { + white-space : nowrap; + font-size : 11px; + color : #999; + font-weight : normal; + cursor : pointer; + } + +} + +.cdm.expandable:not(.active) { + user-select : none; +} + +.cdm.expandable.Unread { + background : white; +} + +.cdm.expandable.Selected:not(.active) { + background : desaturate(@color-accent, 25%); + + a, + .header a.title, + span { + color : white; + } +} + +.cdm.expandable.active { + background : white ! important; +} + +div.cdm.expandable.active div.header span.titleWrap { + white-space : normal; +} + +div.cdm.expandable div.header a.title { + font-weight : 600; + color : @default-text; + font-size : 14px; + transition : color 0.2s, background 0.2s; + text-rendering: optimizelegibility; + font-family : @fonts-ui-bold; +} + +div.cdm.expandable.Unread div.header a.title { + color : black; +} + +div.cdm.expandable.active { + .collapse i.material-icons { + color : @color-accent; + cursor : pointer; + } + + .excerpt { + display: none; + } + + div.header a.title { + color: @color-link; + font-size: 16px; + font-weight: 600; + text-rendering: optimizelegibility; + font-family: @fonts-ui-bold; + } +} + +div.cdm.expandable:not(.active) { + cursor : pointer; + + .content, .collapse { + display : none; + } +} diff --git a/themes/light/defines.less b/themes/light/defines.less new file mode 100644 index 000000000..5352f4d80 --- /dev/null +++ b/themes/light/defines.less @@ -0,0 +1,74 @@ +@fonts-ui-bold: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; +@fonts-ui: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; + +@default-fg: black; +@default-bg: white; +@color-accent: #257aa7; +@color-accent-light: lighten(@color-accent, 50%); +@color-link: @color-accent; +@color-published: lighten(#ff5718, 10%); +@color-marked: #ffc069; +@color-accent-marked : @color-accent; +@color-panel-bg: #f5f5f5; +@color-checked: #69C671; +@border-default : #ddd; +@default-text: #555; +@color-icon: #777; +@color-tooltip-fg: @color-panel-bg; +@color-tooltip-bg: darken(@color-accent, 10%); + +body.ttrss_main, +body.ttrss_prefs, +#main { + position : absolute; + width: 100%; + height: 100%; + border: 0; + padding: 0; + margin: 0; +} + +@import "tt-rss.less"; +@import "cdm.less"; +@import "prefs.less"; +@import "utility.less"; +@import "dijit_basic.less"; + +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(../lib/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ + src: local('Material Icons'), + local('MaterialIcons-Regular'), + url(../lib/iconfont/MaterialIcons-Regular.woff2) format('woff2'), + url(../lib/iconfont/MaterialIcons-Regular.woff) format('woff'), + url(../lib/iconfont/MaterialIcons-Regular.ttf) format('truetype'); +} + +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 18px; /* Preferred icon size */ + display: inline-block; + line-height: 1; + //color : #777; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + vertical-align: middle; + + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + + /* Support for IE. */ + font-feature-settings: 'liga'; +} diff --git a/themes/light/dijit_basic.less b/themes/light/dijit_basic.less new file mode 100644 index 000000000..a00cc5e59 --- /dev/null +++ b/themes/light/dijit_basic.less @@ -0,0 +1,162 @@ +.flat { + + li { + padding: 2px; + } + + #feedTree { + .dijitTreeContent .dijitInline { + vertical-align : baseline; + } + } + + .dijitButton i.material-icons { + position: relative; + top : -1px; + } + + .tabLabel > i.material-icons { + position : relative; + top : -1px; + } + + #filterDlg_Matches span.filterRule { + color: green; + } + + #filterTree .filterRules li.inverse, + #filterDlg_Matches span.filterRule.inverse { + color: red; + } + + .dijitToolbar { + font-size: 13px; + padding: 0px; + } + + .dijitAccordionContainer { + box-shadow : 0px 0px 8px rgba(0,0,0,0.1); + } + + .dijitCheckBox.dijitCheckBoxChecked { + background-color : @color-checked; + border-color : darken(@color-checked, 10%); + } + + .dijitMenu .dijitMenuItem .dijitMenuItemLabel { + padding: 4px 8px; + font-size: 13px; + } + + .dijitMenu .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel { + color : lighten(@color-accent, 10%); + } + + .dijitMenu .dijitMenuItem td { + padding: 0px; + } + + .dijitCheckBox { + margin : 1px; + } + + .dijitCheckBox:before { + font-family: "flat-icon"; + content: "\f00c"; + color: white; + } + + .dijitTab, + .dijitAccordionInnerContainer:not(.dijitSelected) { + i.material-icons { + color: @color-accent; + } + } + + .dijitTree { + .dijitFolderClosed, + .dijitFolderOpened { + display : none; + } + + .dijitTreeRowSelected { + .filterRules li { + color : white; + } + + .dijitTreeExpando { + color : @color-accent; + } + } + + .dijitTreeNode .dijitTreeRow.dijitTreeRowSelected { + color : white; + } + + .dijitTreeRow .dijitTreeExpando { + position : relative; + top : -2px; + } + + .labelParam { + float: right; + margin-right: 16px; + } + + .dijitTreeRow.filterDisabled { + opacity : 0.5; + + .filterRules { + filter : saturate(0%); + } + } + + .feedParam { + float: right; + } + + .filterRules { + font-size: 12px; + line-height : normal; + white-space: normal; + margin-left : 28px; + + li { + color : green; + } + } + + .dijitTreeContainer { + max-width : 100%; + } + + .dijitTreeRow { + overflow: hidden; + -moz-user-select: none; + text-overflow: ellipsis; + } + + } + + label.dijitButton { + border : 1px solid #ccc; + padding : 6px; + border-radius : 4px; + cursor : pointer; + position: relative; + top : 1px; + } + + label.dijitButton:hover { + background-color : @color-panel-bg; + } + + .dijitTree { + .dijitTreeNode .dijitTreeRow { + padding : 4px 0px 4px; + border-width : 1px; + color : @default-text; + } + } + +} diff --git a/themes/light/dijit_light.less b/themes/light/dijit_light.less new file mode 100644 index 000000000..53b098bba --- /dev/null +++ b/themes/light/dijit_light.less @@ -0,0 +1,14 @@ +.flat { + + .dijitDialog .dijitDialogPaneContent { + background : @color-panel-bg; + } + + .dijitTab:not(.dijitTabChecked) { + background : @color-panel-bg; + } + + .dijitCheckBox { + background : #ccc; + } +} diff --git a/themes/light/light_base.less b/themes/light/light_base.less new file mode 100644 index 000000000..769f23efe --- /dev/null +++ b/themes/light/light_base.less @@ -0,0 +1,4 @@ +@import "defines.less"; +@import "dijit_light.less"; +@import "zoom.less"; +@import "../lib/flat-ttrss/flat_combined.css"; diff --git a/themes/light/prefs.less b/themes/light/prefs.less new file mode 100644 index 000000000..7b187e584 --- /dev/null +++ b/themes/light/prefs.less @@ -0,0 +1,194 @@ +body.ttrss_prefs { + background-color : @color-panel-bg; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + + h1, h2, h3, h4 { + font-family : @fonts-ui-bold; + font-weight : 600; + color : @default-text; + } + + .dijitContentPane { + h1:first-of-type, + h2:first-of-type, + h3:first-of-type { + margin-top: 0px; + } + } + + #footer, #header { + padding : 8px; + font-size : 13px; + } + + #header { + float : right; + } + + #footer_splitter { + display : none; + } + + #footer { + background-color : @color-panel-bg; + font-size : 13px; + border : 0px; + text-align : center; + } + + #header img { + vertical-align : middle; + cursor : pointer; + } + + .dijitTree#filterTree .dijitTreeIcon, + .dijitTree#labelTree .dijitTreeIcon, + .dijitTree#filterTree .dijitTreeIcon { + display : none; + } + + .dijitAccordionTitle i.material-icons { + top : -1px; + position : relative; + } + + .dijitAccordionTitleSelected i.material-icons { + color : white; + } + + .dijitDialog #pref-profiles-list .dijitInlineEditBoxDisplayMode { + padding : 0px; + } + + div#feedlistLoading, div#filterlistLoading, div#labellistLoading { + text-align : center; + padding : 5px; + color : @default-text; + } + + div#feedlistLoading img, div#filterlistLoading img, div#labellistLoading { + margin-right : 5px; + } + + #errorButton { + color : red; + } + + .user-css-editor { + height : 300px; + width : 575px; + } + + fieldset.prefs { + min-height : 30px; + + label:first-of-type { + min-width : 300px; + } + + .help-text { + display : inline-block; + margin-left : 10px; + } + } + + fieldset.plugin { + label.description { + width : 600px; + margin-right : 150px; + display : inline-block; + + .dijitCheckBox { + margin-right : 10px; + } + } + } + + .prefErrorLog { + tr { + td { + font-size: 10px; + } + + .errno { + font-style : italic; + font-weight : bold; + white-space : nowrap; + } + + .errstr { + word-break: break-all; + } + + .filename, .login, .timestamp { + color : @default-text; + } + } + } + + hr { + border-color : @border-default; + max-width : 100%; + } + + .phpinfo { + table { + border-collapse : collapse; + } + + td.e, td.v { + border : 1px solid #ccc; + } + + td.e { + font-weight : bold; + } + + td.v { + font-family : monospace; + word-break : break-all; + } + } +} + +body.ttrss_prefs, +body.ttrss_main { + #filterNewRuleDlg { + .invalid { + background : #ffc0c0; + } + .valid { + background : #c0ffc0; + } + } +} + +body.ttrss_prefs, +body.ttrss_utility { + fieldset { + border-width : 0px; + padding : 5px 0px; + } + + fieldset.narrow { + padding : 2px 0px; + } + + fieldset.align-right { + text-align : right; + } + + fieldset > label:first-of-type { + min-width : 140px; + margin-right : 20px; + display : inline-block; + text-align : right; + font-weight : bold; + } + + fieldset > label.checkbox { + display : inline; + font-weight : normal; + } +} diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less new file mode 100644 index 000000000..857900d74 --- /dev/null +++ b/themes/light/tt-rss.less @@ -0,0 +1,1340 @@ +body.ttrss_main { + background : @default-bg; + color : @default-fg; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + overflow : hidden; + + :focus { + outline: none; + } + + div.post { + padding : 0px; + font-size : 13px; + + div.header { + padding : 5px; + color : #909090; + border: 0px solid @border-default; + border-bottom-width: 1px; + background: @color-panel-bg; + + .left, .right { + display : flex; + } + + .row { + display : flex; + margin-bottom : 4px; + flex-wrap : nowrap; + align-items : center; + justify-content : space-between; + } + + .comments { + flex-grow : 2; + } + + .date { + white-space : nowrap; + } + + img, i.material-icons { + margin : 0px 4px; + vertical-align: middle; + color : @color-icon; + } + + .title { + flex-grow : 2; + font-size : 15px; + font-weight : 600; + text-rendering: optimizelegibility; + font-family : @fonts-ui-bold; + } + } + + div.content { + padding : 10px; + font-size : 16px; + + img, + video { + border-width : 0px; + max-width : 98%; + height: auto; + } + + p { + hyphens: auto; + } + + iframe { + min-width : 50%; + max-width : 98%; + } + } + } + + .inline-player { + display : flex; + align-items : center; + + audio { + margin-right : 8px; + } + } + + .article-note { + background-color : #fff7d5; + margin : 5px; + border: 1px solid #e7d796; + color : #9a8c59; + display : flex; + align-items : center; + + > * { + padding : 5px; + } + } + + .article-note.editable { + cursor : pointer; + } + + h1 { + font-size : 18px; + font-weight : 600; + text-rendering: optimizelegibility; + //font-family : @fonts-ui; + } + + h2 { + font-size : 16px; + font-weight : 600; + text-rendering: optimizelegibility; + //font-family : @fonts-ui; + } + + h3 { + font-size : 16px; + font-weight : 600; + text-rendering: optimizelegibility; + //font-family : @fonts-ui; + } + + h4 { + font-size : 14px; + font-weight : 600; + text-rendering: optimizelegibility; + //font-family : @fonts-ui; + } + + a { + color: @color-link; + text-decoration: none; + } + + a:hover { + color: darken(@color-link, 20%); + text-decoration: underline; + } + + #notify.visible { + opacity: 100; + } + + #notify { + bottom : 20px; + right : 20px; + min-width : 200px; + max-width : 350px; + border-width : 1px; + border-style : solid; + position : fixed; + font-size : 14px; + z-index : 99; + display : flex; + opacity: 0; + align-items : center; + padding : 10px; + transition: opacity 0.2s linear; + box-shadow : 0px 0px 8px rgba(0,0,0,0.1); + + img { + vertical-align : middle; + } + + .msg { + flex-grow : 2; + padding : 0 10px; + line-height : 20px; + } + + .icon-close { + cursor : pointer; + } + } + + .notify { + border-color : #d7c47a; + background-color : #fff7d5; + } + + .notify.notify_progress { + border-color : #d7c47a; + background-color : #fff7d5; + } + + .notify.notify_info { + border-color : @color-accent; + background-color : @color-accent-light; + + i.icon-notify { + color : @color-accent; + } + } + + .notify.notify_error { + background-color : #c00; + border-color : #900; + color : white; + + i.icon-notify, i.icon-close { + color : white; + } + } + + .action-chooser { + .action-button { + .dijitButtonText { + vertical-align : unset; + } + .dijitArrowButtonInner { + display : none; + } + } + } + + .hl { + border: 0px solid @border-default; + border-bottom-width: 1px; + transition : color 0.2s, background 0.2s; + display : flex; + flex-direction : row; + flex-wrap : nowrap; + background : @color-panel-bg; + align-items : center; + user-select : none; + + > * { + white-space : nowrap; + padding : 4px; + } + + img { + vertical-align : middle; + } + + .left, .right { + display : flex; + align-items : center; + + i.material-icons { + margin-left : 2px; + padding : 2px; + transition : color 0.2s linear; + user-select: none; + font-size : 21px; + } + } + + .right { + i.material-icons { + color : @color-icon; + } + } + + div.title { + cursor : pointer; + flex-grow : 2; + overflow : hidden; + text-overflow : ellipsis; + } + + span.author { + white-space : nowrap; + color : @default-text; + font-size : 11px; + font-weight : normal; + } + + div.right { + text-align : right; + } + + span.feed a { + border-radius : 4px; + display : inline-block; + padding : 1px 4px; + font-size : 11px; + font-style : italic; + font-weight : normal; + color : @default-text; + } + + span.feed a:hover { + color : @color-accent; + } + + span.updated { + color : @default-text; + text-align : right; + font-size : 11px; + padding-left : 10px; + } + + span.updated div { + display : inline-block; + } + + div.left input { + margin : 0px 4px; + } + + div.left img, div.right img { + margin : 0px 4px; + } + + div.title a { + font-weight : 600; + text-rendering: optimizelegibility; + font-family : @fonts-ui; + color : #555; + } + + a.title.high, span.hl-content.high .preview { + color : #00aa00; + } + } + + .hl.vgrlf .feed { + display : none; + } + + .hl.Unread { + background : white; + } + + .hl.Unread div.title a { + color : black; + } + + .hl.active div.title a { + color : @color-accent; + /* text-shadow : 1px 1px 2px #fff; */ + } + + .hl.active { + background : @color-accent ! important; + } + + .hl.active, + .hl.Selected { + color : white; + background : desaturate(@color-accent, 25%); + + a, + .feed a, + .hl-content a.title, + span { + color : white; + } + } + + .hl.Grayed { + color : #909090; + } + + #content-insert blockquote, + #headlines-frame blockquote, + .dijitContentPane blockquote { + margin : 5px 0px 5px 0px; + color : @default-text; + padding-left : 10px; + border: 0px solid #ccc; + border-left-width: 4px; + } + + #content-insert code, + #headlines-frame code, + .dijitContentPane code { + color : #009900; + font-family : monospace; + } + + #content-insert pre, + #headlines-frame pre, + .dijitContentPane pre { + margin: 5px 0px 5px 0px; + padding: 10px; + color: @default-text; + font-family: monospace; + font-size: 12px; + border: 0px solid #ccc; + background: @color-panel-bg; + display: block; + max-width: 98%; + overflow: auto; + } + + div.prefHelp { + color : @default-text; + padding : 5px; + } + + span.preview { + color : #999; + font-weight : normal; + font-size : 12px; + padding-left : 4px; + } + + .label { + display : inline-block; + vertical-align: middle; + background-color : #fff7d5; + font-size : 9px; + color : @default-fg; + font-weight : normal; + margin-left : 2px; + padding : 2px 4px; + white-space: nowrap; + } + + i.marked-pic, i.pub-pic { + cursor : pointer; + color : #ccc; + } + + div.errorExplained { + border : 1px solid @border-default; + margin : 5px 0px 5px 0px; + padding : 5px; + } + + ul.browseFeedList { + height : 300px; + width : 100%; + overflow : auto; + border-width : 0px 1px 1px 1px; + border-color : @border-default; + border-style : solid; + margin : 0px 0px 5px 0px; + background-color : white; + list-style-type : none; + padding : 0px; + + li { + display : flex; + align-items : center; + + > * { + margin : 2px; + } + } + } + + + .browseFeedList span.subscribers { + color : #808080; + } + + ul.compact { + list-style-type : none; + margin : 0px; + padding : 0px; + + li { + margin : 0px; + padding : 0px; + } + } + + .noborder { + border-width : 0px; + } + + #overlay { + background : @default-bg; + left : 0; + top : 0; + height : 100%; + width : 100%; + z-index : 100; + position : absolute; + } + + #overlay_inner { + font-weight : bold; + margin : 1em; + } + + div.loadingPrompt { + padding : 1em; + text-align : center; + font-weight : bold; + } + + div.whiteBox { + margin-left : 1px; + text-align : center; + padding : 1em 1em 0px 1em; + font-size : 11px; + border: 0px solid @border-default; + border-bottom-width: 1px; + } + + div#headlines-frame.wide { + .title { + overflow: visible; + white-space: normal; + } + + .hl .feed { + display: none; + } + } + + .dijitDialog { + + header, + .dlgSec, .dlgSecHoriz { + font-size : 16px; + font-weight : 600; + color : @default-text; + font-family: @fonts-ui-bold; + } + + section, + .dlgSecCont { + margin : 10px 20px; + } + + header.horizontal + section, + .dlgSecHoriz + .dlgSecCont { + margin : 10px 0; + } + + section.narrow { + margin : 0; + } + + section, + div.dlgSecCont, div.dlgSecSimple { + + fieldset { + > label { + font-weight : bold; + margin-right : 10px; + display : inline-block; + min-width : 140px; + text-align : right; + } + + > label.checkbox { + font-weight : normal; + display : inline; + } + + > label.inline { + display : inline; + } + } + + fieldset { + border-width : 0px; + padding : 5px 0px; + } + + fieldset.narrow { + padding : 2px 0px; + } + + fieldset.align-right { + text-align : right; + } + } + + footer, + .dlgButtons { + margin-top : 5px; + text-align: right; + } + + footer.text-center { + text-align: center; + } + } + + i.icon-label { + color : #fff7d5; + } + + div#cmdline { + position : absolute; + left : 5px; + bottom : 5px; + font-size : 11px; + color : @default-text; + font-weight : bold; + background-color : @default-bg; + border : 1px solid @color-accent; + padding : 3px 5px 3px 5px; + z-index : 5; + } + + #feed_browser_spinner { + vertical-align : middle; + height : 18px; + width : 18px; + } + + #exceptionDlg { + .dijitDialogTitleBar { + background : red; + color : white; + } + + .dijitDialogPaneContent { + background : #fcc; + } + + .error-contents { + .message { + color : red; + } + + textarea { + width : 99%; + height : 200px; + } + .dlgButtons { + text-align : center; + } + } + } + + #content-wrap { + padding : 0px; + border-width : 0px; + margin : 0px; + } + + #feeds-holder { + padding : 0px; + border: 0px solid @border-default; + overflow : hidden; + background : @color-panel-bg; + box-shadow : inset -1px 0px 2px -1px rgba(0,0,0,0.1); + -webkit-overflow-scrolling : touch; + + #feedTree { + height : 100%; + overflow-x : hidden; + text-rendering: optimizelegibility; + font-family : @fonts-ui; + + .counterNode.aux, .counterNode.marked { + background : @color-panel-bg; + color : lighten(@default-text, 10%); + border-color : darken(@color-panel-bg, 10%); + } + + .counterNode.marked { + border-color : @color-accent-marked; + background : lighten(@color-accent-marked, 60%); + } + + .counterNode { + font-weight : bold; + display : none; + font-size : 9px; + text-align : center; + border : 1px solid lighten(@color-accent, 5%);; + color : white; + background : lighten(@color-accent, 5%); + border-radius : 4px; + vertical-align : middle; + float : right; + position : relative; + line-height : 14px; + margin-right : 8px; + margin-top : 2px; + min-width : 23px; + height : 14px; + } + + .dijitTreeNode .loadingExpando { + left : -3px; + height : 22px; + position : relative; + top : -3px; + } + + .dijitTreeRow .dijitTreeLabel.Unread { + font-weight : bold; + } + + .dijitTreeRow.Error .dijitTreeLabel { + color : red; + } + + .dijitTreeNode .dijitTreeRow { + border : 1px solid transparent; + } + + .dijitTreeNode .dijitTreeRowSelected { + box-shadow : -1px 0px 2px -1px rgba(0,0,0,0.1); + border-color : @border-default transparent; + background : @default-bg; + color : #333; + } + + .dijitIcon.feed-icon { + margin-right : 2px; + } + + i.icon.icon-inbox { + color : #555; + } + + i.icon.icon-archive { + color : #c77b2e; + } + + i.icon.icon-star { + position : relative; + color : @color-marked; + font-size : 21px; + left : -2px; + } + + i.icon.icon-rss_feed { + color : @color-published; + } + + i.icon.icon-whatshot { + color : @color-checked; + } + + i.icon.icon-restore { + position : relative; + top : -1px; + font-weight : bold; + color : @color-accent; + } + + } + } + + #headlines-wrap-inner { + padding : 0px; + margin : 0px; + border-width : 0px; + } + + #headlines-frame[is-vfeed="0"] .header .feed { + display : none; + } + + #headlines-frame { + padding : 0px; + border: 0px @border-default; + margin-top : 0px; + -webkit-overflow-scrolling : touch; + -webkit-transform: translateZ(0); + -webkit-backface-visibility: hidden; + + div.feed-title { + border: 0px solid @color-link; + border-bottom-width: 1px; + padding: 5px 8px; + } + + div.feed-title a.title { + color: @default-text; + font-weight: bold; + } + + div.feed-title a { + color: @default-text; + } + + div.feed-title a:hover { + color: @color-link; + } + } + + #headlines-frame.smooth-scroll { + scroll-behavior: smooth; + } + + #headlines-frame.forbid-smooth-scroll, + #content-insert.forbid-smooth-scroll { + scroll-behavior : auto; + } + + #toolbar-frame_splitter { + display : none; + } + + #toolbar-frame { + padding : 0px; + margin : 0px; + border-width : 0px; + white-space: nowrap; + font-size : 12px; + + #toolbar { + background : white; + border: 0px solid @border-default; + border-bottom-width: 1px; + padding-left : 4px; + height : 32px; + display : flex; + flex-direction : row; + flex-wrap : nowrap; + color : @default-text; + font-size : 12px; + align-items : center; + + .dijitSelect, + .dijitDropDownButton .dijitButtonNode, + .dijitComboButton .dijitButtonNode { + border : 0px; + } + + i.net-alert, .left i.icon-error { + color : red; + } + + i.log-alert { + color : #ddba1c; + } + + #toolbar-headlines { + padding-right : 4px; + flex-grow : 2; + display : flex; + + .left { + flex-grow: 2; + display : flex; + align-items : center; + + img { + vertical-align : middle; + margin-right : 8px; + } + } + + .right { + display : flex; + align-items : center; + } + } + + #updates-available { + color : @color-checked; + padding-right : 4px; + } + + #selected_prompt { + font-style : italic; + text-align : right; + margin-right : 4px; + color : @color-accent; + } + + @media (max-width: 992px) { + #selected_prompt { + display : none; + } + } + } + } + + #header { + border-width : 0px; + text-align : right; + color : @default-text; + padding : 5px 5px 0px 0px; + margin : 0px; + position : absolute; + right : 0px; + top : 0px; + z-index : 5; + } + + #content-insert { + padding : 0px; + border-color : @border-default; + border-width : 0px; + line-height: 1.5; + overflow : auto; + -webkit-overflow-scrolling : touch; + scroll-behavior: smooth; + } + + img.feed-icon, img.icon { + width : 16px; + height : 16px; + line-height : 16px; + vertical-align : middle; + display : inline-block; + } + + .player { + display : inline-block; + color : @default-text; + font-size : 11px; + font-family : sans-serif; + border : 1px solid @default-text; + padding : 0px 4px 0px 4px; + margin : 0px 2px 0px 2px; + width : 50px; + text-align : center; + background : @default-bg; + } + + .player.playing { + color : #00c000; + border-color : #00c000; + } + + .player:hover { + background : @color-panel-bg; + cursor : pointer; + } + + #headlines-frame.auto_catchup #headlines-spacer { + height : 100%; + } + + #headlines-spacer { + margin-left : 1px; + text-align : center; + color : @default-text; + font-size : 11px; + font-style : italic; + + a, span { + color : @default-text; + padding : 10px; + display : block; + } + + a:hover { + color : @color-accent; + } + } + + ul#filterDlg_Matches, ul#filterDlg_Actions { + max-height : 100px; + overflow : auto; + list-style-type : none; + border-style : solid; + border-color : @border-default; + border-width : 1px 1px 1px 1px; + background-color : @default-bg; + margin : 0px 0px 5px 0px; + padding : 4px; + min-height : 16px; + } + + ul#filterDlg_Matches li, ul#filterDlg_Actions li { + cursor : pointer; + } + + ul#filterDlg_Matches li .dijitCheckBox, ul#filterDlg_Actions li .dijitCheckBox { + margin-right: 4px; + } + + ul.hotkeys-help { + li { + display : flex; + } + + li.desc { + flex-grow : 2; + } + + .hk { + color : @color-accent; + width : 100px; + } + + h3 { + margin : 8px 0px; + } + } + + select.attachments { + display : block; + margin-top : 10px; + max-width : 120px; + } + + #filterDlg_feeds select { + height : 150px; + width : 410px; + } + + span.highlight { + background-color : #ffff00; + color : #cc90cc; + } + + div.enclosure_title { + + } + + #headlines-frame .dijitCheckBox { + margin-right : 4px; + } + + #editTagsDlg{ + overflow: visible; + } + + #feedEditDlg img.feedIcon { + border : 1px solid #ccc; + padding : 5px; + margin : 5px; + max-width : 20px; + max-height : 20px; + height : auto; + width : auto; + } + + .dijitTooltipContents { + background : @color-tooltip-bg; + color : @color-tooltip-fg; + } + + .dijitTooltipRight .dijitTooltipConnector { + border-right-color : @color-tooltip-bg; + } + + .dijitTooltipLeft .dijitTooltipConnector { + border-left-color : @color-tooltip-bg; + } + + .dijitTooltipBelow .dijitTooltipConnector { + border-bottom-color : @color-tooltip-bg; + } + + .dijitTooltipAbove .dijitTooltipConnector { + border-top-color : @color-tooltip-bg; + } +} + +body.ttrss_main .dijitDialog { + h1:first-of-type, + h2:first-of-type, + h3:first-of-type, + h4:first-of-type { + margin-top: 0px; + } +} + +body.ttrss_main[view-mode="marked"] #feeds-holder #feedTree { + .dijitTreeRow.Has_Marked .dijitTreeLabel { + color : @color-accent-marked; + } + .dijitTreeRow.Has_Marked .counterNode.marked { + display : inline-block; + } +} + +body.ttrss_main[view-mode="marked"][hide-read-feeds="true"][hide-read-shows-special="true"] #feeds-holder #feedTree + .dijitTreeRow:not(.dijitTreeRowSelected):not(.AlwaysVisible):not(.Special):not(.Has_Marked) { + display : none; +} + +body.ttrss_main[view-mode="marked"][hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree + .dijitTreeRow:not(.dijitTreeRowSelected):not(.AlwaysVisible):not(.Has_Marked) { + display : none; +} + + +body.ttrss_main:not([view-mode="marked"]) #feeds-holder #feedTree { + .dijitTreeRow.Unread .counterNode.unread { + display : inline-block; + } + .dijitTreeRow.Has_Aux:not(.Unread) .counterNode.aux { + display : inline-block; + } +} + +body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="true"] #feeds-holder #feedTree + .dijitTreeRow:not(.dijitTreeRowSelected):not(.Unread):not(.AlwaysVisible):not(.Special) { + display : none; +} + +body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree + .dijitTreeRow:not(.dijitTreeRowSelected):not(.Unread):not(.AlwaysVisible) { + display : none; +} + +body.ttrss_main { + #toolbar-headlines { + i.icon-syndicate { + color: @color-published; + margin-right: 8px; + border: 1px solid @color-published; + border-radius: 4px; + } + #feed_current_unread { + margin-left : 8px; + font-weight : bold; + text-align : center; + border : 1px solid lighten(@color-accent, 5%);; + color : white; + background : lighten(@color-accent, 5%); + border-radius : 4px; + min-width : 23px; + } + } + + i.icon-no-feed { + opacity : 0.2; + } + + .dijitTreeRow.UpdatesDisabled .dijitTreeLabel { + opacity : 0.5; + } + + #floatingTitle.marked i.marked-pic, + .cdm.marked .left i.marked-pic, + .hl.marked .left i.marked-pic { + color : @color-marked; + } + + #floatingTitle.published i.pub-pic, + .cdm.published .left i.pub-pic, + .hl.published .left i.pub-pic { + color : @color-published; + } + + .score-high i.icon-score { + color : @color-checked; + } + + .score-low i.icon-score { + color : #500; + } + + .score-neutral i.icon-score { + opacity : 0.5; + } + + i.icon-score { + cursor : pointer; + } + + .panel { + border : 1px solid @border-default; + background : @color-panel-bg; + padding : 4px; + } + + .dijitDialog .panel { + background : @default-bg; + } + + .panel-scrollable { + overflow : auto; + height : 200px; + } + + ul.list li { + padding : 2px; + } + + ul.list { + padding : 4px; + } + + ul.list-unstyled { + list-style-type : none; + } + + .text-center { + text-align : center; + } + + #prefFilterTestResultList { + .preview { + margin : 8px; + } + + .title { + font-weight: bold; + } + + .feed { + color : @color-accent; + } + } + +} + +body.ttrss_main, body.ttrss_utility { + .alert { + padding: 8px 35px 8px 14px; + margin-bottom: 10px; + /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); */ + background-color: #fcf8e3; + border: 1px solid #fbeed5; + border-radius: 4px; + + .close { + position: relative; + top: -2px; + right: -21px; + line-height: 20px; + cursor : pointer; + } + } + + .pull-right { + float : right; + } + + .pull-left { + float : left; + } + + .text-error { + color: #b94a48; + } + + .text-info { + color: #3a87ad; + } + + .text-success { + color: #468847; + } + + .text-warning { + color: darken(#c09853, 10%); + } + + .alert, + .alert h4 { + color: #c09853; + } + + .alert h4 { + margin: 0; + } + + .alert-success { + color: #468847; + background-color: #dff0d8; + border-color: #d6e9c6; + } + + .alert-success h4 { + color: #468847; + } + + .alert-danger, + .alert-error { + color: #b94a48; + background-color: #f2dede; + border-color: #eed3d7; + } + + .alert-danger h4, + .alert-error h4 { + color: #b94a48; + } + + .alert-info { + color: #3a87ad; + background-color: #d9edf7; + border-color: #bce8f1; + + h4 { + color: #3a87ad; + } + } + + hr { + border: 0px solid #ccc; + border-bottom-width: 1px; + } + + .text-muted { + color : @default-text; + } + + .small { + font-size : 11px; + } + + div.autocomplete { + position : absolute; + width : 250px; + background-color : @default-bg; + border :1px solid @border-default; + margin : 0px; + padding : 0px; + + ul { + list-style-type : none; + margin : 0px; + padding : 0px; + } + + ul li.selected { + background-color : darken(@default-bg, 10%); + } + + ul li { + list-style-type : none; + display : block; + margin : 0; + padding : 2px; + cursor : pointer; + } + } + +} + +::selection { + background : @color-accent; + color : @default-bg; +} + +::-webkit-scrollbar { + width: 4px; +} + +::-webkit-scrollbar-thumb { + background-color: @color-accent; +} + +::-webkit-scrollbar-track { + background-color: #eee; +} + +video::-webkit-media-controls-overlay-play-button { + display: none; +} + diff --git a/themes/light/utility.less b/themes/light/utility.less new file mode 100644 index 000000000..087c4ced3 --- /dev/null +++ b/themes/light/utility.less @@ -0,0 +1,116 @@ +body.ttrss_utility.sanity_failed { + background : #900; +} + +body.ttrss_utility { + background : @color-panel-bg; + color : @default-fg; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + margin : 4em; + + .content { + background : @default-bg; + border : 1px solid @border-default; + padding : 20px; + box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1); + + h2:first-of-type { + margin-top : 0; + } + + h2, h3, h4 { + color : @color-accent; + font-family: @fonts-ui-bold; + } + + h2 { + font-size : 18px; + } + + h3 { + font-size : 16px; + } + } + + a { + color : @color-link; + text-decoration : none; + } + + a:hover, + a:focus { + color: darken(@color-link, 20%); + text-decoration: underline; + } + + h1 { + color : gray; + font-family: @fonts-ui-bold; + font-size : 18px; + margin : 10px 0 0 0; + } + + .footer { + text-align : center; + padding-top : 10px; + + a { + color : gray; + } + + a:hover { + color : @color-accent; + } + } + + form { + margin : 0; + } +} + +body.ttrss_utility.otp { + .content { + fieldset > label { + display: inline; + } + } +} + +body.ttrss_utility.ttrss_login { + margin : 0; + padding : 0; + width : 100%; + height : 100%; + position : absolute; + display : flex; + align-items: center; + justify-content : center; + + .container { + max-width : 600px; + margin-left : auto; + margin-right : auto; + + .content { + padding : 40px; + } + } +} + +body.ttrss_utility.installer, +body.ttrss_utility.feed_debugger { + margin : 2em; +} + +body.ttrss_utility.share_popup { + margin : 0; + padding : 0; + background : white; + + .content { + padding : 15px; + border-width : 0; + box-shadow : none; + } +} diff --git a/themes/light/zoom.less b/themes/light/zoom.less new file mode 100644 index 000000000..ae8de7dba --- /dev/null +++ b/themes/light/zoom.less @@ -0,0 +1,78 @@ +body.ttrss_zoom { + max-width : 900px; + margin : 2em auto; + + div.post { + border : 1px solid @border-default; + background : @default-bg; + box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1); + + .attachments { + display : none; + } + + div.header { + padding-bottom : 10px; + border: 0px solid @border-default; + border-bottom-width: 1px; + background : @default-bg; + font-size : 12px; + color : @default-text; + + .row { + display : flex; + margin-bottom : 4px; + flex-wrap : nowrap; + align-items : center; + justify-content : space-between; + } + } + + p { + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + + div.content { + font-size : 15px; + line-height : 1.5; + border-width : 0; + padding : 0; + + img, video { + max-width : 760px; + height : auto; + } + + blockquote { + margin : 5px 0px 5px 0px; + color : @default-text; + padding-left : 10px; + border: 0px solid @border-default; + border-left-width: 4px; + } + + code { + color : #009900; + font-family : monospace; + font-size : 12px; + } + + pre { + margin : 5px 0px 5px 0px; + padding : 10px; + color : @default-text; + font-family : monospace; + font-size : 12px; + border: 0px solid #ccc; + background : @color-panel-bg; + display : block; + max-width : 98%; + overflow : auto; + } + } + } + +} + |