X-Git-Url: https://git.wh0rd.org/?a=blobdiff_plain;f=css%2Ftt-rss.css;h=d5737989a03aa9c618ada8307315a811d7ccc9cf;hb=d9c93ebfdb860878609c6a59ef4df99f8f93643f;hp=459413ed5eefaf36ad8d7aeff636bdd4ab1f1595;hpb=d0b72e7a92d0ed23dced0fc731ea8c499f426f3c;p=tt-rss.git diff --git a/css/tt-rss.css b/css/tt-rss.css index 459413ed..d5737989 100644 --- a/css/tt-rss.css +++ b/css/tt-rss.css @@ -7,16 +7,6 @@ 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; } @@ -25,9 +15,8 @@ div.postReply div.postHeader { padding : 5px; margin-right : 4px; color : #909090; - background : #f5f5f5; - border-width : 1px; - border-color : #eee; + border-width : 0px 0px 1px 0px; + border-color : #ddd; border-style : solid; } @@ -35,6 +24,11 @@ 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 { @@ -70,7 +64,6 @@ div.articleNote { border-style : solid; border-color : #e7d796; border-width : 1px; - background-color : #fff7d5; color : #9a8c59; } @@ -85,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 { @@ -123,18 +138,30 @@ a:hover { position : absolute; } +#notify.visible { + transform: translate(0, -35px); + -webkit-transform: translate(0, -35px); + -o-transform: translate(0, -35px); + -moz-transform: translate(0, -35px); + + transition: all 0.5s ease-in-out; + -webkit-transition: all 0.5s ease-in-out; + -moz-transition: all 0.5s ease-in-out; + -o-transition: all 0.5s ease-in-out; +} + #notify { - bottom : 10px; - right : 20px; - border-width : 1px; + bottom : -35px; + right : 0px; + height : 20px; + left : 0px; + border-width : 1px 0px 0px 0px; border-style : solid; position : absolute; font-size : 12px; z-index : 99; - max-width : 200px; - min-width : 100px; padding : 5px; - -width : 200px; + box-shadow : 0px -2px 2px rgba(0,0,0,0.1); } #notify img { @@ -161,23 +188,27 @@ a:hover { background-color : #fff7d5; } -.notify.progress { +.notify.notify_progress { border-color : #d7c47a; background-color : #fff7d5; } -.notify.info { +.notify.notify_info { border-color : #88b0f0; background-color : #ecf4ff; } -.notify.error { +.notify.notify_error { background-color : #ffcccc; border-color : #ff0000; } .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; } @@ -187,7 +218,7 @@ a:hover { .hl.active div.hlTitle a { color : #4684ff; - text-shadow : 1px 1px 2px #fff; + /* text-shadow : 1px 1px 2px #fff; */ } .hl.Selected { @@ -201,7 +232,8 @@ a:hover { .hl { border-width : 0px 0px 1px 0px; border-style : solid; - border-color : #eee; + border-color : #ddd; + padding : 1px; } .hl.active { @@ -211,7 +243,7 @@ a:hover { div.filterTestHolder { height : 300px; overflow : auto; - border-color : #eee; + border-color : #ddd; border-style : solid; margin : 0px 0px 5px 0px; background-color : #f5f5f5; @@ -308,8 +340,16 @@ div.prefHelp { white-space : nowrap; display : table-cell; color : #999; - font-family : "Segoe UI", Tahoma, sans-serif; +} + +#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; + } #main-toolbar #headlines-toolbar { @@ -330,6 +370,11 @@ div.prefHelp { 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; @@ -349,8 +394,8 @@ div.prefHelp { span.contentPreview { color : #999; font-weight : normal; - text-shadow : 1px 1px 2px #fff; - font-size : 11px; + font-size : 12px; + padding-left : 4px; } span.hlLabelRef { @@ -383,28 +428,11 @@ div.postHeader div { #allEntryTags { border-width : 0px 0px 1px 0px; border-style : solid; - border-color : #eee; + border-color : #ddd; padding-bottom : 5px; display : none; } -a.hlFeed { - display : block; - white-space : nowrap; - font-size : 9px; - font-style : italic; - font-weight : normal; - display : inline-block; - padding : 1px 2px 1px 2px; - margin-bottom : 2px; - margin-top : 2px; - color : #555; -} - -a.hlFeed:hover { - color : #4684ff; -} - img.markedPic, img.pubPic { cursor : pointer; vertical-align : middle; @@ -422,7 +450,7 @@ img[src*='pub_set.png'], img[src*='mark_set.png'] { } div.tagCloudContainer { - border : 1px solid #eee; + border : 1px solid #ddd; background-color : #f5f5f5; margin : 5px 0px 5px 0px; padding : 5px; @@ -430,7 +458,7 @@ div.tagCloudContainer { } div.errorExplained { - border : 1px solid #eee; + border : 1px solid #ddd; background-color : #f5f5f5; margin : 5px 0px 5px 0px; padding : 5px; @@ -440,7 +468,7 @@ ul.feedErrorsList { max-height : 300px; overflow : auto; list-style-type : none; - border : 1px solid #eee; + border : 1px solid #ddd; background-color : #f5f5f5; margin : 0px 0px 5px 0px; padding : 5px; @@ -454,7 +482,7 @@ ul.browseFeedList { height : 300px; overflow : auto; border-width : 0px 1px 1px 1px; - border-color : #eee; + border-color : #ddd; border-style : solid; margin : 0px 0px 5px 0px; background-color : white; @@ -527,7 +555,11 @@ div.loadingPrompt { div.whiteBox { margin-left : 1px; text-align : center; - padding : 1em; + padding : 1em 1em 0px 1em; + font-size : 11px; + border-width : 0px 0px 1px 0px; + border-style : solid; + border-color : #ddd; } div.autocomplete { @@ -558,11 +590,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 { @@ -571,6 +605,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; } @@ -684,14 +722,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 { @@ -740,8 +803,6 @@ div.fatalError textarea { #content-wrap { padding : 0px; border-width : 0px; - border-style : solid; - border-color : #eee; margin : 0px; } @@ -749,9 +810,11 @@ div.fatalError textarea { padding : 0px; border-width : 0px 1px 0px 0px; border-style : solid; - border-color : #eee; + border-color : #ddd; overflow : hidden; background : #f5f5f5; + box-shadow : inset -1px 0px 2px -1px rgba(0,0,0,0.1); + -webkit-overflow-scrolling : touch; } #headlines-wrap-inner { @@ -762,10 +825,10 @@ div.fatalError textarea { #headlines-frame { padding : 0px; - border-color : #eee; - border-style : solid; border-width : 0px; + border-color : #ddd; margin-top : 0px; + -webkit-overflow-scrolling : touch; } #headlines-toolbar_splitter, #toolbar_splitter { @@ -783,7 +846,7 @@ div.fatalError textarea { #main-toolbar { background : white; border-width : 0px 0px 1px 0px; - border-color : #eee; + border-color : #ddd; border-style : solid; padding-left : 4px; height : 26px; @@ -811,10 +874,12 @@ div.fatalError textarea { #content-insert { padding : 0px; - border-color : #eee; + border-color : #ddd; border-width : 0px; - line-height: 20px; + line-height: 1.5; + font-size : 15px; overflow : auto; + -webkit-overflow-scrolling : touch; } #feedTree .dijitTreeRow .dijitTreeLabel.Unread { @@ -825,33 +890,6 @@ div.fatalError textarea { color : red; } -.claro .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; @@ -860,24 +898,6 @@ img.feedIcon, img.tinyFeedIcon { display : inline-block; } -.dijitToolbar { - text-shadow : 1px 1px 2px #fff; -} - -.dijitAccordionTitleFocus { - text-shadow : 1px 1px 2px #fff; -} - -.claro .dijitDialog .dijitToolbar { - border : 1px solid #eee; -} - -.dijitDialog h2 { - margin-top : 0px; - margin-bottom : 4px; - border-width : 0px; -} - .player { display : inline-block; color : #555; @@ -905,17 +925,27 @@ 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 : #eee; + border-color : #ddd; border-width : 0px 1px 1px 1px; background-color : white; margin : 0px 0px 5px 0px; @@ -927,15 +957,11 @@ 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 #eee; + border : 1px solid #ddd; background-color : #f5f5f5; margin : 0px 0px 5px 0px; padding : 5px; @@ -953,15 +979,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; @@ -1001,37 +1032,16 @@ body#ttrssMain #feedTree .dijitTreeRow { color : #333; } -.claro .dijitTreeRow { - border-color : transparent; -} - -.claro .dijitFolderClosed, -.claro .dijitFolderOpened { - display : none; -} - -.claro .dijitTreeNode .dijitCheckBox { - margin-left : 4px; -} - -.claro .dijitTreeIsRoot > .dijitTreeRow > .dijitTreeExpando { - margin-left : 5px; -} - -.claro .dijitTree .dijitTreeExpando { - margin-top : 0px; - opacity : 0.6; -} - -.claro .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; } body#ttrssMain #feedTree .counterNode.aux { @@ -1059,39 +1069,6 @@ body#ttrssMain #feedTree .counterNode { height : 14px; } -.claro .dijitTree .dijitTreeRow { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; -} - -body#ttrssPrefs hr { - border-color : #ecf4ff; - max-width : 100%; -} - -.claro .dijitMenuItemLabel { - font-size : 13px; -} - -.claro .dijitTree .dijitTreeRowSelected { - background : white; -} - -.claro .dijitTree .dijitTreeRowHover { - background : #ecf4ff; -} - -.claro .dijitTree .dijitTreeRowActive { - background-color : transparent; - background-image : none; - border-color : transparent; -} - -.claro .dijitTreeRowSelected .dijitTreeLabel { - text-shadow : 1px 1px 2px #fff; -} - #feedTree img[src*='indicator_white.gif'] { position : relative; top : -2px; @@ -1102,216 +1079,26 @@ span.highlight { color : #cc90cc; } -.claro .dijitTreeRow .dijitTreeExpando { - background-image: url("../images/treeExpandImages.png"); - position : relative; - top : -1px; -} - -.claro .dijitTreeRow .dijitTreeExpandoLeaf { - background : none; -} - -/* body#ttrssMain #feedTree .dijitTreeRow .dijitTreeExpandoLeaf { - display : none; -} */ - div.enclosure_title { } body#ttrssMain #headlines-frame .dijitCheckBox { border-width : 0px; + opacity : 0.5; } -.claro .dijitCheckBox { - background-image : url("../images/untick.png"); - background-color : transparent; - width : 16px; - height : 16px; - background-position : center center; - opacity : 0.4; - -webkit-transition : opacity 0.25s; - transition : opacity 0.25s; - border : 1px solid #eee; - border-radius : 2px; - padding : 1px; -} -.claro .dijitCheckBox:hover { - opacity : 1; -} - -.claro .dijitCheckBox.dijitCheckBoxDisabled:hover { - opacity : 0.6; -} - -.claro .dijitCheckBox.dijitCheckBoxChecked { - border-color : #ddffdd; - background-image : url("../images/tick.png"); +body#ttrssMain #headlines-frame .dijitCheckBoxHover, +body#ttrssMain #headlines-frame .dijitCheckBoxChecked { opacity : 1; } -.claro .dijitButton .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNode, -.claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, -.claro .dijitToolbar .dijitComboButton, -.claro .dijitToolbar .dijitComboButton .dijitButtonNode { - background : none; - border-color : transparent; - box-shadow : none; -} - -button { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size : 14px; -} - -button, -.claro .dijitButton, -.claro .dijitComboButton { - display: inline-block; - padding: 4px 12px; - margin-bottom: 0; - font-size: 14px; - line-height: 20px; - color: #333333; - text-align: center; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - vertical-align: middle; - cursor: pointer; - background-color: #f5f5f5; - background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); - background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); - background-repeat: repeat-x; - border: 1px solid #cccccc; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - border-bottom-color: #b3b3b3; - -webkit-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -} - -button:hover, -button:focus, -button:active, -.claro .dijitButton:hover, -.claro .dijitButton:focus, -.claro .dijitButton:active, -.claro .dijitComboButton:hover, -.claro .dijitComboButton:focus, -.claro .dijitComboButton:active, -.claro .dijitButton.dijitButtonDisabled { - color: #333333; - background-color: #e6e6e6; -} - -button:active, -.claro .dijitButton:active, -.claro .dijitComboButton:active { - background-color: #cccccc \9; -} - -.claro .dijitToolbar .dijitButton, -.claro .dijitToolbar .dijitButton.dijitHover, -.claro .dijitToolbar .dijitComboButton, -.claro .dijitToolbar .dijitComboButton.dijitHover { - background : none; - border-color : transparent; - box-shadow : none; - padding : 0px; - margin : 0px; - line-height : auto; -} - -.claro .dijitToolbar .dijitButton.dijitHover, -.claro .dijitToolbar .dijitDropDownButton.dijitHover .dijitButtonNode, -.claro .dijitToolbar .dijitComboButton.dijitHover { - border-color : #ccc; -} - -.claro .dijitToolbar .dijitButton.dijitHover .dijitButtonNode, -.claro .dijitToolbar .dijitButton.dijitButtonActive .dijitButtonNode { - background : none; -} - -.claro .dijitToolbar .dijitButton .dijitButtonContents, -.claro .dijitToolbar .dijitDropDownButton .dijitButtonContents, -.claro .dijitToolbar .dijitComboButton .dijitButtonContents { - font-size : 13px; -} - -button:hover, -button:focus, -.claro .dijitButton:hover, -.claro .dijitToolbar .dijitButton:hover .dijitButtonNode, -.claro .dijitToolbar .dijitButton.dijitHover .dijitButtonNode, -.claro .dijitButton:focus, -.claro .dijitComboButton:hover, -.claro .dijitComboButton:focus { - color: #333333; - text-decoration: none; - background-position: 0 -15px; - -webkit-transition: background-position 0.1s linear; - transition: background-position 0.1s linear; -} - -button:focus, -.claro .dijitButton:focus, -.claro .dijitComboButton:focus { - outline: thin dotted #333; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -button:active, -.claro .dijitButton:active, -.claro .dijitComboButton:active, -.claro .dijitToolbar .dijitDropDownButton.dijitOpened, -.claro .dijitToolbar .dijitComboButton.dijitOpened, -.claro .dijitToolbar .dijitButton.dijitButtonActive .dijitButtonNode { - background-image: none; - outline: 0; - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -} - -button[disabled], -.claro .dijitButton[disabled], -.claro .dijitButton.dijitButtonDisabled, -.claro .dijitComboButton.dijitButtonDisabled { - cursor: default; - background-image: none; - opacity: 0.65; - filter: alpha(opacity=65); - -webkit-box-shadow: none; - box-shadow: none; -} - -.claro .dijitButton .dijitButtonContents, -.claro .dijitComboButton .dijitButtonContents { - font-size : 14px; - font-weight : normal; - line-height : 20px; -} - -.claro .dijitMenu { - border-color : #ccc; -} - -.claro .dijitMenu .dijitMenuItem.dijitHover, -.claro .dijitMenu .dijitMenuItem.dijitFocused, -.claro .dijitMenuTable .dijitMenuItem.dijitHover .dijitMenuItemLabel, -.claro .dijitMenuTable .dijitMenuItem.dijitFocused .dijitMenuItemLabel { - background : #eee; - border-color : transparent; -} - -.claro .dijitButton .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNode { - padding : 0px; -} +body#ttrssMain #feedTree .dijitTreeRow img.dijitTreeExpandoLeaf { + width : 16px; + height : 16px; + vertical-align : middle; + position : relative; +} :focus { outline: none;