X-Git-Url: https://git.wh0rd.org/?a=blobdiff_plain;f=css%2Ftt-rss.css;h=d732c13ba6bd06cafe2a1a62e86f80341e0f4681;hb=0e21b0b4753937bb825c69afcf35e37771fcd329;hp=c7592e54c1d79f7b9e393946cfb8e1e42182f3b4;hpb=e48c486d24ac2e4a3a85b973466f6d36946d8d04;p=tt-rss.git diff --git a/css/tt-rss.css b/css/tt-rss.css index c7592e54..d732c13b 100644 --- a/css/tt-rss.css +++ b/css/tt-rss.css @@ -7,34 +7,28 @@ body#ttrssMain, body#ttrssPrefs, body#ttrssLogin, body { font-size: 14px; } -body#ttrssPrefs { - background-color : #ecf4ff; -} - -body#ttrssPrefs #footer, body#ttrssPrefs #header { - background-color : #ecf4ff; - padding-left : 8px; - padding-right : 8px; -} - div.postReply { padding : 0px; } div.postReply div.postHeader { - border-width : 0px 0px 1px 0px; - border-style : solid; - border-color : #eee; - background : white; - box-shadow : 0px 0px 3px 0px rgba(0,0,0,0.1); padding : 5px; + margin-right : 4px; color : #909090; + border-width : 0px 0px 1px 0px; + border-color : #ddd; + border-style : solid; } div.postReply div.postTitle { overflow : hidden; text-overflow: ellipsis; white-space : nowrap; + font-weight : 600; + text-rendering: optimizelegibility; + font-family : "Segoe WP Semibold", "Segoe UI Semibold", + "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "DejaVu Sans", "Helvetica Neue", + Helvetica, Arial, sans-serif; } div.postReply div.postDate { @@ -66,13 +60,10 @@ div.postReply img.tagsPic { div.articleNote { background-color : #fff7d5; padding : 5px; - /* border-radius : 4px; */ margin : 5px; border-style : solid; border-color : #e7d796; border-width : 1px; - /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */ - background-color : #fff7d5; color : #9a8c59; } @@ -87,22 +78,44 @@ div.postReply span.author { h1 { font-size : 18px; + font-weight : 600; + text-rendering: optimizelegibility; + font-family : "Segoe WP Semibold", "Segoe UI Semibold", + "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "DejaVu Sans", "Helvetica Neue", + Helvetica, Arial, sans-serif; } h2 { font-size : 16px; - font-weight : bold; + font-weight : 600; border-width : 0px 0px 1px 0px; border-style : solid; border-color : #ecf4ff; + text-rendering: optimizelegibility; + font-family : "Segoe WP Semibold", "Segoe UI Semibold", + "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "DejaVu Sans", "Helvetica Neue", + Helvetica, Arial, sans-serif; } h3 { - font-size : 12px; - font-weight : bold; + font-size : 13px; border-width : 0px 0px 1px 0px; border-style : solid; border-color : #ecf4ff; + font-weight : 600; + text-rendering: optimizelegibility; + font-family : "Segoe WP Semibold", "Segoe UI Semibold", + "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "DejaVu Sans", "Helvetica Neue", + Helvetica, Arial, sans-serif; +} + +h4 { + font-size : 14px; + font-weight : 600; + text-rendering: optimizelegibility; + font-family : "Segoe WP Semibold", "Segoe UI Semibold", + "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "DejaVu Sans", "Helvetica Neue", + Helvetica, Arial, sans-serif; } hr { @@ -137,7 +150,6 @@ a:hover { min-width : 100px; padding : 5px; -width : 200px; - /* box-shadow : 0px 0px 2px rgba(0,0,0,0.2); */ } #notify img { @@ -180,7 +192,11 @@ a:hover { } .hl div.hlTitle a { - font-weight : bold; + font-weight : 600; + text-rendering: optimizelegibility; + font-family : "Segoe WP Semibold", "Segoe UI Semibold", + "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "DejaVu Sans", "Helvetica Neue", + Helvetica, Arial, sans-serif; color : #777; } @@ -188,13 +204,9 @@ a:hover { color : black; } -.hl.active { - /* box-shadow : inset 0px 0px 3px 0px rgba(0,0,0,0.1); */ -} - .hl.active div.hlTitle a { color : #4684ff; - text-shadow : 1px 1px 2px #fff; + /* text-shadow : 1px 1px 2px #fff; */ } .hl.Selected { @@ -205,18 +217,11 @@ a:hover { color : #909090; } -/* #headlines-frame div.hl:nth-child(even) { - background : #fafafa; -} */ - -#headlines-frame.normal { - -} - .hl { border-width : 0px 0px 1px 0px; border-style : solid; - border-color : #eee; + border-color : #ddd; + padding : 1px; } .hl.active { @@ -226,13 +231,11 @@ a:hover { div.filterTestHolder { height : 300px; overflow : auto; - border-color : #c0c0c0; + border-color : #ddd; border-style : solid; margin : 0px 0px 5px 0px; - background-color : #ecf4ff; + background-color : #f5f5f5; border-width : 1px; - /* border-radius : 4px; */ - /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */ } @@ -241,7 +244,7 @@ div.filterTestHolder { color : #555; padding-left : 10px; border-width : 0px 0px 0px 4px; - border-color : #c0c0c0; + border-color : #ccc; border-style : solid; } @@ -258,9 +261,9 @@ div.filterTestHolder { font-family : monospace; font-size : 12px; border-width : 0px; - border-color : #c0c0c0; + border-color : #ccc; border-style : solid; - background : #fafafa; + background : #f5f5f5; display : block; max-width : 98%; overflow : auto; @@ -273,9 +276,7 @@ div.notice, div.warning, div.error { font-size : 12px; border-style : solid; border-color : #ccc; - /* border-radius : 4px; */ border-width : 1px; - /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */ } div.notice div.inner, div.warning div.inner, div.error div.inner { @@ -323,46 +324,66 @@ div.prefHelp { color : #555; } -div#headlines-toolbar { - border-width : 0px; +#main-toolbar > * { + white-space : nowrap; + display : table-cell; + color : #999; +} + +#main-toolbar > *, +#main-toolbar table *, +#main-toolbar .actionChooser * { + text-rendering: optimizelegibility; + font-family : "Segoe WP", "Segoe UI Web", "Segoe UI", Ubuntu, "DejaVu Sans", "Helvetica Neue", + Helvetica, Arial, sans-serif; font-size : 12px; - font-family : "Segoe UI", Tahoma, sans-serif; - color : #555; - padding : 0px; - margin : 0px; - overflow : hidden; - height : 25px; - line-height : 25px; - padding-left : 4px; - background : #fafafa; + } -div#headlines-toolbar .dijitSelect { - font-size : 11px; - position : relative; - top : -2px; +#main-toolbar #headlines-toolbar { + padding-right : 4px; + width : 100%; } -div#headlines-toolbar span.r { - float: right; - position: relative; - padding : 0 4px 0px 4px; +#main-toolbar #headlines-toolbar span.holder { + display : table; + width : 100%; +} + +#main-toolbar #headlines-toolbar span.holder > * { + display : table-cell; +} + +#main-toolbar #headlines-toolbar .main { text-align : right; -} +} + +#main-toolbar #headlines-toolbar .main, +#main-toolbar #headlines-toolbar .r { + line-height : 24px; +} + +#headlines-toolbar span.r img { + margin-right : 4px; + position : relative; + top : 3px; +} #headlines-toolbar span.r .error a { color : red; } -div#headlines-toolbar span.r a { - color : #555; +#main-toolbar #selected_prompt { + font-style : italic; + text-align : right; + margin-right : 4px; } span.contentPreview { color : #999; font-weight : normal; - text-shadow : 1px 1px 2px #fff; - font-size : 11px; + font-size : 12px; + padding-left : 4px; } span.hlLabelRef { @@ -395,63 +416,50 @@ div.postHeader div { #allEntryTags { border-width : 0px 0px 1px 0px; border-style : solid; - border-color : #c0c0c0; + border-color : #ddd; padding-bottom : 5px; display : none; } -a.hlFeed { - display : block; - white-space : nowrap; - font-size : 9px; - font-style : italic; - font-weight : normal; - /* border-radius : 4px; */ - display : inline-block; - padding : 1px 2px 1px 2px; - margin-bottom : 2px; - margin-top : 2px; - color : #555; +img.markedPic, img.pubPic { + cursor : pointer; + vertical-align : middle; + opacity : 0.5; + -webkit-transition : opacity 0.25s; + transition : opacity 0.25s; } -a.hlFeed:hover { - color : #4684ff; +img.markedPic:hover, img.pubPic:hover { + opacity : 1; } -img.markedPic, img.pubPic { - cursor : pointer; - vertical-align : middle; +img[src*='pub_set.png'], img[src*='mark_set.png'] { + opacity : 1; } div.tagCloudContainer { - border : 1px solid #c0c0c0; - background-color : #ecf4ff; + border : 1px solid #ddd; + background-color : #f5f5f5; margin : 5px 0px 5px 0px; padding : 5px; text-align : center; - /* border-radius : 4px; */ - /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */ } div.errorExplained { - border : 1px solid #c0c0c0; - background-color : #ecf4ff; + border : 1px solid #ddd; + background-color : #f5f5f5; margin : 5px 0px 5px 0px; padding : 5px; - /* border-radius : 4px; */ - /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */ } ul.feedErrorsList { max-height : 300px; overflow : auto; list-style-type : none; - border : 1px solid #c0c0c0; - background-color : #ecf4ff; + border : 1px solid #ddd; + background-color : #f5f5f5; margin : 0px 0px 5px 0px; padding : 5px; - /* border-radius : 4px; */ - /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */ } ul.feedErrorsList em { @@ -462,7 +470,7 @@ ul.browseFeedList { height : 300px; overflow : auto; border-width : 0px 1px 1px 1px; - border-color : #c0c0c0; + border-color : #ddd; border-style : solid; margin : 0px 0px 5px 0px; background-color : white; @@ -526,14 +534,6 @@ form { padding : 0px; } -#main_toolbar_form { - margin : 0px; - padding : 0px; - display : table-cell; - white-space : nowrap; - width : 100%; -} - div.loadingPrompt { padding : 1em; text-align : center; @@ -543,20 +543,11 @@ div.loadingPrompt { div.whiteBox { margin-left : 1px; text-align : center; - padding : 1em; -} - -/* html, body#ttrssMain, #main { - width: 100%; - height: 100%; - padding: 0; - margin: 0; -} */ - -#toolbar div.actionChooser { - display : table-cell; - text-align : right; - padding-right : 3px; + padding : 1em 1em 0px 1em; + font-size : 11px; + border-width : 0px 0px 1px 0px; + border-style : solid; + border-color : #ddd; } div.autocomplete { @@ -587,11 +578,13 @@ div.autocomplete ul li { cursor : pointer; } -.hlTitle { +.hl .hlTitle { overflow : hidden; white-space : nowrap; max-width : 500px; text-overflow : ellipsis; + padding-left : 6px; + padding-right : 6px; } div#headlines-frame.wide .hlTitle { @@ -600,6 +593,10 @@ div#headlines-frame.wide .hlTitle { white-space : normal; } +div#headlines-frame.wide .hl .hlFeed { + display : none; +} + .hl a.title.high, span.hlContent.high .contentPreview { color : #00aa00; } @@ -665,7 +662,6 @@ span.labelColorIndicator { background-color : #fff7d5; color : #063064; text-align : center; - /* box-shadow : 0px 0px 1px 0px rgba(0,0,0,0.1); */ } div#cmdline { @@ -714,14 +710,39 @@ div.hlRight img { max-height : 16px; } -span.hlUpdated { +.hl span.hlFeed { + display : table-cell; + vertical-align : middle; + text-align : right; +} + +.hl span.hlFeed a { + border-radius : 4px; + display : inline-block; + padding : 1px 4px 1px 4px; + font-size : 11px; + font-style : italic; + font-weight : normal; + color : #555; + white-space : nowrap; +} + +.hl span.hlFeed a:hover { + color : #4684ff; +} + +.hl span.hlUpdated { color : #555; - min-width : 100px; display : table-cell; - width : 100%; vertical-align : middle; text-align : right; - font-size : 10px; + font-size : 11px; + white-space : nowrap; + padding-left : 10px; +} + +span.hlUpdated div { + display : inline-block; } div.hlLeft { @@ -769,9 +790,7 @@ div.fatalError textarea { #content-wrap { padding : 0px; - border-width : 0px 0px 0px 0px; - border-style : solid; - border-color : #c0c0c0; + border-width : 0px; margin : 0px; } @@ -779,9 +798,11 @@ div.fatalError textarea { padding : 0px; border-width : 0px 1px 0px 0px; border-style : solid; - border-color : #eee; + border-color : #ddd; overflow : hidden; - background : #fafafa; + background : #f5f5f5; + box-shadow : inset -1px 0px 2px -1px rgba(0,0,0,0.1); + -webkit-overflow-scrolling : touch; } #headlines-wrap-inner { @@ -792,11 +813,10 @@ div.fatalError textarea { #headlines-frame { padding : 0px; - border-color : #c0c0c0; - border-style : solid; border-width : 0px; + border-color : #ddd; margin-top : 0px; - /* box-shadow : inset 0px 0px 3px rgba(0,0,0,0.1); */ + -webkit-overflow-scrolling : touch; } #headlines-toolbar_splitter, #toolbar_splitter { @@ -809,13 +829,16 @@ div.fatalError textarea { border-width : 0px; white-space: nowrap; font-size : 12px; - /* box-shadow : 0px 0px 2px rgba(0,0,0,0.1); */ } #main-toolbar { background : white; - border-width : 0px; - padding-left : 0px; + border-width : 0px 0px 1px 0px; + border-color : #ddd; + border-style : solid; + padding-left : 4px; + height : 26px; + } #header { @@ -839,12 +862,12 @@ div.fatalError textarea { #content-insert { padding : 0px; - border-color : #eee; - border-bottom-width : 0px; - border-right-width : 0px; - border-left-width : 0px; - line-height: 20px; + border-color : #ddd; + border-width : 0px; + line-height: 1.5; + font-size : 15px; overflow : auto; + -webkit-overflow-scrolling : touch; } #feedTree .dijitTreeRow .dijitTreeLabel.Unread { @@ -855,33 +878,6 @@ div.fatalError textarea { color : red; } -.dijitTreeLabel { - outline : 0; -} - -.feedParam { - color : #555; - float : right; - margin-right : 1em; -} - -.labelParam { - float : right; - margin-right : 1em; -} - -.dijitTreeLabel.Disabled, .labelParam.Disabled { - color : #555; -} - -.dijitTreeRow.Error { - color : red; -} - -.dijitTreeRow.Hidden { - display : none; -} - img.feedIcon, img.tinyFeedIcon { width : 16px; height : 16px; @@ -890,24 +886,6 @@ img.feedIcon, img.tinyFeedIcon { display : inline-block; } -.dijitToolbar { - text-shadow : 1px 1px 2px #fff; -} - -.dijitAccordionTitleFocus { - text-shadow : 1px 1px 2px #fff; -} - -.dijitDialog .dijitToolbar { - border : 1px solid #c0c0c0; -} - -.dijitDialog h2 { - margin-top : 0px; - margin-bottom : 4px; - border-width : 0px; -} - .player { display : inline-block; color : #555; @@ -935,22 +913,31 @@ img.feedIcon, img.tinyFeedIcon { height : 100%; margin-left : 1px; text-align : center; - padding : 1em; color : #555; + font-size : 11px; + font-style : italic; +} + +#headlines-spacer a, #headlines-spacer span { + color : #555; + padding : 10px; + display : block; } +#headlines-spacer a:hover { + color : #88b0f0; +} ul#filterDlg_Matches, ul#filterDlg_Actions { max-height : 100px; overflow : auto; list-style-type : none; border-style : solid; - border-color : #c0c0c0; + border-color : #ddd; border-width : 0px 1px 1px 1px; - background-color : #ecf4ff; + background-color : white; margin : 0px 0px 5px 0px; padding : 0px; - /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */ } ul#filterDlg_Matches li, ul#filterDlg_Actions li { @@ -958,20 +945,14 @@ ul#filterDlg_Matches li, ul#filterDlg_Actions li { padding : 0px 0px 0px 5px; } -ul#filterDlg_Matches li div.dijitCheckBox, ul#filterDlg_Actions li div.dijitCheckBox { - margin-right : 5px; -} - ul.helpKbList { max-height : 300px; overflow : auto; list-style-type : none; - border : 1px solid #c0c0c0; - background-color : #ecf4ff; + border : 1px solid #ddd; + background-color : #f5f5f5; margin : 0px 0px 5px 0px; padding : 5px; - /* border-radius : 4px; */ - /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */ } ul.helpKbList span.hksequence { @@ -986,15 +967,20 @@ ul.helpKbList h2 { margin-top : 0px; } -.dijitTreeNode .loadingNode { - margin-left : 3px; - height : 9px; -} - span.collapseBtn { cursor : pointer; } +div.postContent h1 { + font-size : 16px; +} + +div.postContent h2, +div.postContent h3, +div.postContent h4 { + font-size : 15px; +} + div.postContent p { max-width : 650px; -webkit-hyphens: auto; @@ -1012,79 +998,6 @@ div.postHeader span.author { font-weight : normal; } -body#ttrssZoom { - margin-left : auto; - margin-right : auto; - padding : 20px; - max-width : 670px; - background : #f9fbff; -} - -body#ttrssZoom div.postHeader div.postFeedTitle { - float : left; - text-align : right; - padding-left : 0px; - font-size : 10px; -} - -body#ttrssZoom div.postHeader a.postComments { - text-align : right; - padding-left : 0px; - font-size : 10px; -} - -body#ttrssZoom div.postHeader div.postDate { - float : none; - text-align : right; - padding-left : 0px; - color : #777; - font-size : 10px; -} - -body#ttrssZoom div.postHeader div.postTags { - color : #777; - font-size : 10px; -} - -body#ttrssZoom div.postHeader div.postTitle { - white-space : normal; -} - -body#ttrssZoom div.postContent p { - max-width : 650px; - -webkit-hyphens: auto; - -moz-hyphens: auto; - hyphens: auto; -} - -body#ttrssZoom div.postHeader { - margin : 10px; - border : 1px solid #ccc; - /* box-shadow : none; */ - /* border-radius : 4px; */ -} - -body#ttrssZoom div.postReply { - border : 1px solid #ccc; - /* border-radius : 4px; - box-shadow : inset 0px 0px 3px rgba(0,0,0,0.1); */ - background : white; -} - -body#ttrssZoom div.postContent { - -} - -body#ttrssZoom div.footer { - margin-top : 1em; - text-align : center; -} - -body#ttrssZoom div.postContent img { - max-width : 650px; - height : auto; -} - select.attachments { display : block; margin-top : 10px; @@ -1104,46 +1017,28 @@ body#ttrssMain #feedTree .dijitTreeRow { padding : 2px 0px 2px; height : 22px; border-width : 1px; - border-color : transparent; color : #333; } -body#ttrssMain #feedTree .dijitFolderClosed, -body#ttrssMain #feedTree .dijitFolderOpened { - display : none; -} - -.dijitTreeNode .dijitCheckBox { - margin-left : 4px; -} - -body#ttrssMain #feedTree .dijitTreeIsRoot > .dijitTreeRow > .dijitTreeExpando { - margin-left : 5px; -} - -body#ttrssMain #feedTree .dijitTreeExpando { - margin-top : 0px; - opacity : 0.6; -} - -body#ttrssMain #feedTree .dijitTreeNode { - padding : 0px; - border-width : 0px; +ul#filterDlg_Matches li div.dijitCheckBox, ul#filterDlg_Actions li div.dijitCheckBox { + margin-right : 5px; } body#ttrssMain #feedTree { height : 100%; overflow-x : hidden; - font-family : "Segoe UI", Tahoma, sans-serif; + text-rendering: optimizelegibility; + font-family : "Segoe UI Web", "Segoe UI", Ubuntu, "DejaVu Sans", "Helvetica Neue", + Helvetica, Arial, sans-serif; } -#feedTree .counterNode.aux { +body#ttrssMain #feedTree .counterNode.aux { background : #f0f0f0; color : #999; border-color : #f0f0f0; } -#feedTree .counterNode { +body#ttrssMain #feedTree .counterNode { font-weight : bold; display : inline-block; font-size : 9px; @@ -1162,60 +1057,6 @@ body#ttrssMain #feedTree { height : 14px; } -#feedTree .dijitTreeRow { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; -} - -body#ttrssPrefs hr { - border-color : #ecf4ff; - max-width : 100%; -} - -.dijitMenuItemLabel { - font-size : 13px; -} - -body#ttrssMain #feedTree .dijitTreeRowSelected { - background : #ecf4ff; - /* box-shadow : inset 0px 0px 3px rgba(0,0,0,0.1); */ -} - -body#ttrssMain #feedTree .dijitTreeRowHover { - background : white; -} - -body#ttrssMain #feedTree .dijitTreeRowActive { - background-color : transparent; - background-image : none; - border-color : transparent; -} - -/* body#ttrssMain .dijitTreeRowHover, -body#ttrssPrefs .dijitTreeRowHover, -body#ttrssMain .dijitTreeRowActive, -body#ttrssPrefs .dijitTreeRowActive { - background-color : transparent; - background-image : none; - border-color : transparent; -} */ - -body#ttrssMain .dijitTreeRowSelected .dijitTreeLabel, -body#ttrssPrefs .dijitTreeRowSelected .dijitTreeLabel { - color : #4684ff; - font-weight : bold; -} - -body#ttrssMain .dijitTreeRowHover .dijitTreeLabel, -body#ttrssPrefs .dijitTreeRowHover .dijitTreeLabel { - color : #4684ff; -} - -.dijitTreeRowSelected .dijitTreeLabel { - text-shadow : 1px 1px 2px #fff; -} - #feedTree img[src*='indicator_white.gif'] { position : relative; top : -2px; @@ -1226,18 +1067,27 @@ span.highlight { color : #cc90cc; } -body#ttrssMain #feedTree .dijitTreeRow .dijitTreeExpando { - background-image: url("../images/treeExpandImages.png"); - position : relative; - top : -1px; -} +div.enclosure_title { -body#ttrssMain #feedTree .dijitTreeRow .dijitTreeExpandoLeaf { - display : none; } -div.enclosure_title { +body#ttrssMain #headlines-frame .dijitCheckBox { + border-width : 0px; + opacity : 0.5; +} +body#ttrssMain #headlines-frame .dijitCheckBoxHover, +body#ttrssMain #headlines-frame .dijitCheckBoxChecked { + opacity : 1; } +body#ttrssMain #feedTree .dijitTreeRow img.dijitTreeExpandoLeaf { + width : 16px; + height : 16px; + vertical-align : middle; + position : relative; +} +:focus { + outline: none; +}