From ad0a9c02e5255fe9aa37ebdd12b87dc87efa7497 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Fri, 28 Feb 2020 14:48:48 +0300 Subject: move default (light) theme LESS source to a more appropriate place add compact_dark theme variant --- css/tt-rss.less | 1340 ------------------------------------------------------- 1 file changed, 1340 deletions(-) delete mode 100755 css/tt-rss.less (limited to 'css/tt-rss.less') diff --git a/css/tt-rss.less b/css/tt-rss.less deleted file mode 100755 index 857900d74..000000000 --- a/css/tt-rss.less +++ /dev/null @@ -1,1340 +0,0 @@ -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; -} - -- cgit v1.2.3