From 88b8830a6bec4bb2278f410fd1e645d8289a99e9 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Tue, 4 Dec 2018 20:17:50 +0300 Subject: various CSS updates for flat theme --- css/default.css | 182 ++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 118 insertions(+), 64 deletions(-) (limited to 'css/default.css') diff --git a/css/default.css b/css/default.css index daa19a0d0..2783de5ae 100644 --- a/css/default.css +++ b/css/default.css @@ -20,14 +20,7 @@ body.ttrss_main { border-top-width : 1px; border-style : solid; } */ - /* ul#filterDlg_Matches li div.dijitCheckBox, ul#filterDlg_Actions li div.dijitCheckBox { - margin-right : 5px; - } */ - /* #headlines-frame .dijitCheckBox { - border-width : 0px; - opacity : 0.5; - } - + /* #headlines-frame .dijitCheckBoxHover, #headlines-frame .dijitCheckBoxChecked { opacity : 1; @@ -441,12 +434,11 @@ body.ttrss_main #main-toolbar > *, body.ttrss_main #main-toolbar table *, body.ttrss_main #main-toolbar .actionChooser * { text-rendering: optimizelegibility; - font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; } body.ttrss_main #main-toolbar #headlines-toolbar { padding-right: 4px; - width: 100%; + width: 80%; } body.ttrss_main #main-toolbar #headlines-toolbar span.holder { display: table; @@ -726,47 +718,12 @@ body.ttrss_main #feeds-holder { background: #f5f5f5; box-shadow: inset -1px 0px 2px -1px rgba(0, 0, 0, 0.1); -webkit-overflow-scrolling: touch; - /* #feedTree .dijitTreeRow .dijitTreeLabel.Unread { - font-weight : bold; - } - - #feedTree .dijitTreeRow.Error .dijitTreeLabel { - color : red; - } - - #feedTree .dijitTreeRow.UpdatesDisabled .dijitTreeLabel { - color : #909090; - } - - #feedTree.dijitTree .dijitTreeNode .dijitTreeRowSelected { - box-shadow : -1px 0px 2px -1px rgba(0,0,0,0.1); - border-right-color : white; - } - - #feedTree.dijitTree .dijitTreeContainer { - max-width : 100%; - } - - #feedTree.dijitTree .dijitTreeRow { - overflow: hidden; - text-overflow: ellipsis; - } - - #feedTree.dijitTree .dijitTreeNode .dijitTreeRow { - padding : 4px 0px 4px; - border-width : 1px; - color : #333; - } - - #feedTree.dijitTree img.tinyFeedIcon { - position : relative; - top : -2px; - } */ } body.ttrss_main #feeds-holder #feedTree { height: 100%; overflow-x: hidden; text-rendering: optimizelegibility; + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } body.ttrss_main #feeds-holder #feedTree .counterNode.aux { background: #f0f0f0; @@ -795,7 +752,28 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando { left: -3px; height: 22px; position: relative; - top: -3px; + top: -6px; +} +body.ttrss_main #feeds-holder #feedTree .dijitTreeRow .dijitTreeLabel.Unread { + font-weight: bold; +} +body.ttrss_main #feeds-holder #feedTree .dijitTreeRow.Error .dijitTreeLabel { + color: red; +} +body.ttrss_main #feeds-holder #feedTree .dijitTreeRow.UpdatesDisabled .dijitTreeLabel { + color: #909090; +} +body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow { + border: 1px solid transparent; +} +body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRowSelected { + box-shadow: -1px 0px 2px -1px rgba(0, 0, 0, 0.1); + border-color: #ccc transparent; + background: white; +} +body.ttrss_main #feeds-holder #feedTree img.tinyFeedIcon { + position: relative; + top: -2px; } body.ttrss_main #headlines-wrap-inner { padding: 0px; @@ -928,7 +906,10 @@ body.ttrss_main ul#filterDlg_Actions { body.ttrss_main ul#filterDlg_Matches li, body.ttrss_main ul#filterDlg_Actions li { cursor: pointer; - padding: 0px 0px 0px 5px; +} +body.ttrss_main ul#filterDlg_Matches li .dijitCheckBox, +body.ttrss_main ul#filterDlg_Actions li .dijitCheckBox { + margin-right: 4px; } body.ttrss_main ul.helpKbList { max-height: 300px; @@ -965,6 +946,9 @@ body.ttrss_main span.highlight { background-color: #ffff00; color: #cc90cc; } +body.ttrss_main #headlines-frame .dijitCheckBox { + margin-right: 4px; +} body.ttrss_main #editTagsDlg { overflow: visible; } @@ -1408,10 +1392,22 @@ div.cdm.expandable:not(.active) .collapse { body.ttrss_prefs { background-color: #f5f5f5; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; + font-size: 14px; /* div#pref-tabs .dijitContentPane { font-size : 14px; } */ + /* div#pref-tabs { + box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1); + margin : 0px 5px 0px 5px; + } */ + /* div#pref-tabs .dijitContentPane { + h1:first-of-type, + h2:first-of-type, + h3:first-of-type, + h4:first-of-type { + margin-top: 0px; + } + } */ /* preferences */ /* table.prefPrefsList h3 { margin-top : 0.5em; @@ -1431,15 +1427,10 @@ body.ttrss_prefs #header img { vertical-align: middle; cursor: pointer; } -body.ttrss_prefs div#pref-tabs { - box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1); - margin: 0px 5px 0px 5px; -} -body.ttrss_prefs div#pref-tabs .dijitContentPane h1:first-of-type, -body.ttrss_prefs div#pref-tabs .dijitContentPane h2:first-of-type, -body.ttrss_prefs div#pref-tabs .dijitContentPane h3:first-of-type, -body.ttrss_prefs div#pref-tabs .dijitContentPane h4:first-of-type { - margin-top: 0px; +body.ttrss_prefs .dijitTree#filterTree .dijitTreeIcon, +body.ttrss_prefs .dijitTree#labelTree .dijitTreeIcon, +body.ttrss_prefs .dijitTree#filterTree .dijitTreeIcon { + display: none; } body.ttrss_prefs #pref-filter-wrap, body.ttrss_prefs #pref-filter-header, @@ -1533,23 +1524,74 @@ body.ttrss_prefs hr { border-color: #ecf4ff; max-width: 100%; } -.flat .dijitTree .filterRules span.inverse, +.flat { + /* .dijitCheckBox { + background-image: url("../images/untick.png"); + background-color: transparent; + width: 15px; + height: 15px; + margin: 1px; + opacity: 0.7; + background-position: center center; + transition: opacity 0.25s; + -webkit-transition: opacity 0.25s; + padding: 1px; + border-width : 0px; + content : ""; + } + + .dijitCheckBox.dijitCheckBoxChecked { + border-color: #69C671; + background-image: url("../images/tick.png"); + opacity: 1; + } */ +} +.flat li { + padding: 2px; +} +.flat .filterRules span.inverse, .flat #filterDlg_Matches span.filterRule.inverse { color: red; } +.flat .filterRules span { + display: block; + color: green; +} +.flat #filterDlg_Matches span.filterRule { + color: green; +} .flat .dijitToolbar { font-size: 13px; + padding: 0px; +} +.flat .dijitTab:not(.dijitTabChecked) { + background: #f5f5f5; +} +.flat .dijitCheckBox { + border: 0px; + background: #ccc; +} +.flat .dijitCheckBox:before { + font-family: "flat-icon"; + content: "\f00c"; + color: white; +} +.flat .dijitCheckBox.dijitCheckBoxChecked { + background-color: #69C671; } .flat .dijitTree .dijitFolderClosed, .flat .dijitTree .dijitFolderOpened { display: none; } -.flat .dijitTree .filterRules span { - display: block; - color: green; +.flat .dijitTree .dijitTreeRow .dijitTreeExpando { + position: relative; + top: -2px; } -.flat .dijitTree #filterDlg_Matches span.filterRule { - color: green; +.flat .dijitTree .dijitTreeRowSelected .dijitTreeExpando { + color: #257aa7; +} +.flat .dijitTree .dijitTreeNode .dijitTreeRowSelected { + background: white; } .flat .dijitTree .labelParam { float: right; @@ -1567,6 +1609,18 @@ body.ttrss_prefs hr { margin-left: 100px; line-height: normal; } +.flat .dijitTree .dijitTreeContainer { + max-width: 100%; +} +.flat .dijitTree .dijitTreeRow { + overflow: hidden; + text-overflow: ellipsis; +} +.flat .dijitTree .dijitTreeNode .dijitTreeRow { + padding: 4px 0px 4px; + border-width: 1px; + color: #333; +} /* Tree */ .claro { /*.dijitTree .dijitTreeRow { -- cgit v1.2.3