diff options
Diffstat (limited to 'css/tt-rss.less')
-rwxr-xr-x | css/tt-rss.less | 305 |
1 files changed, 121 insertions, 184 deletions
diff --git a/css/tt-rss.less b/css/tt-rss.less index 267782187..d16b8b6e5 100755 --- a/css/tt-rss.less +++ b/css/tt-rss.less @@ -204,54 +204,41 @@ body.ttrss_main { .hl { border: 0px solid #ddd; border-bottom-width: 1px; - padding : 1px; transition : color 0.2s, background 0.2s; + display : flex; + flex-direction : row; + flex-wrap : nowrap; - div.title { - display : table-cell; - cursor : pointer; - width : 100%; - vertical-align : middle; - overflow : hidden; + > * { + align-self : center; white-space : nowrap; - max-width : 500px; - text-overflow : ellipsis; - padding: 4px 6px; - } - - div.left { - display : table-cell; - vertical-align : middle; - white-space: nowrap; + padding : 5px; } - div.right { - display : table-cell; - white-space: nowrap; - text-align : right; + img { vertical-align : middle; } - div.right img { - max-width : 16px; - max-height : 16px; + div.title { + cursor : pointer; + flex-grow : 2; + overflow : hidden; + text-overflow : ellipsis; + padding-left : 5px; } - span.feed { - display : table-cell; - vertical-align : middle; + div.right { text-align : right; } span.feed a { border-radius : 4px; display : inline-block; - padding : 1px 4px 1px 4px; + padding : 1px 4px; font-size : 11px; font-style : italic; font-weight : normal; color : @default-text; - white-space : nowrap; } span.feed a:hover { @@ -260,11 +247,8 @@ body.ttrss_main { span.updated { color : @default-text; - display : table-cell; - vertical-align : middle; text-align : right; font-size : 11px; - white-space : nowrap; padding-left : 10px; } @@ -272,24 +256,14 @@ body.ttrss_main { display : inline-block; } - div.left { - padding-left : 8px; - } - div.left input { - margin-left : 4px; - margin-right : 4px; + margin : 0px 4px; } div.left img, div.right img { margin : 0px 4px; } - div.left img { - width : 16px; - height : 16px; - } - div.title a { font-weight : 600; text-rendering: optimizelegibility; @@ -390,6 +364,14 @@ body.ttrss_main { background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 4px; + + .close { + position: relative; + top: -2px; + right: -21px; + line-height: 20px; + cursor : pointer; + } } .alert, @@ -401,14 +383,6 @@ body.ttrss_main { margin: 0; } - .alert .close { - position: relative; - top: -2px; - right: -21px; - line-height: 20px; - cursor : pointer; - } - .alert-success { color: #468847; background-color: #dff0d8; @@ -435,10 +409,10 @@ body.ttrss_main { color: #3a87ad; background-color: #d9edf7; border-color: #bce8f1; - } - .alert-info h4 { - color: #3a87ad; + h4 { + color: #3a87ad; + } } ul.nomarks { @@ -461,55 +435,46 @@ body.ttrss_main { } #main-toolbar { + background : white; + border: 0px solid #ddd; + border-bottom-width: 1px; + height : 32px; + line-height : 32px; + display : flex; + flex-direction : row; + flex-wrap : nowrap; + color : @default-text; + font-size : 12px; > * { - white-space : nowrap; - display : table-cell; - color : #999; - overflow : hidden; + align-self : center; } - > *, - table *, - .actionChooser * { - text-rendering: optimizelegibility; - font-family : @fonts-ui; - font-size : 12px; + .dijitSelect, + .dijitDropDownButton .dijitButtonNode, + .dijitComboButton .dijitButtonNode { + border : 0px; + } + + #main_toolbar_form { } #headlines-toolbar { padding-right : 4px; - width : 100%; - - span.holder { - display : table; - width : 100%; + flex-grow : 2; + display : flex; + + .left { + flex-grow: 2; + + img { + vertical-align : middle; + margin-right : 8px; + position : relative; + top : -2px; + } } - - span.holder > * { - display : table-cell; - } - - .main { - text-align : right; - } - - .main, - .r { - line-height : 24px; - } - - span.r img { - margin-right : 4px; - position : relative; - top : 3px; - } - - span.r .error a { - color : red; - } - } #selected_prompt { @@ -518,6 +483,10 @@ body.ttrss_main { margin-right : 4px; } + .actionChooser { + + } + @media (max-width: 992px) { #selected_prompt { display : none; @@ -533,6 +502,11 @@ body.ttrss_main { padding-left : 4px; } + .hl.Selected .hlLabelRef, + .hl.active .hlLabelRef { + color : #063064; + } + span.hlLabelRef { background-color : #fff7d5; font-size : 8px; @@ -562,6 +536,7 @@ body.ttrss_main { } div.tagCloudContainer { + background : white; border : 1px solid #ddd; margin : 5px 0px 5px 0px; padding : 5px; @@ -590,6 +565,7 @@ body.ttrss_main { ul.browseFeedList { height : 300px; + width : 100%; overflow : auto; border-width : 0px 1px 1px 1px; border-color : #ddd; @@ -689,20 +665,19 @@ body.ttrss_main { } - div#headlines-frame.wide .title { - max-width : none; - overflow : visible; - white-space : normal; - } + div#headlines-frame.wide { + .title { + overflow: visible; + white-space: normal; + } - div#headlines-frame.wide .hl .feed { - display : none; + .hl .feed { + display: none; + } } img.score-pic { - vertical-align : middle; - width : 16px; - height : 16px; + } div.dlgSec { @@ -742,9 +717,12 @@ body.ttrss_main { margin : 2px; } - div.dlgButtons { - text-align : right; - clear : both; + .dijitDialog { + .dlgButtons { + margin-top : 4px; + text-align: right; + clear: both; + } } span.labelColorIndicator { @@ -755,7 +733,6 @@ body.ttrss_main { vertical-align : middle; font-size : 9px; display : inline-block; - border : 1px solid #ccc; background-color : #fff7d5; color : #063064; text-align : center; @@ -813,43 +790,6 @@ body.ttrss_main { 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; - } - #feedTree { height : 100%; overflow-x : hidden; @@ -885,7 +825,34 @@ body.ttrss_main { left : -3px; height : 22px; position : relative; - top : -3px; + top : -6px; + } + + .dijitTreeRow .dijitTreeLabel.Unread { + font-weight : bold; + } + + .dijitTreeRow.Error .dijitTreeLabel { + color : red; + } + + .dijitTreeRow.UpdatesDisabled .dijitTreeLabel { + color : #909090; + } + + .dijitTreeNode .dijitTreeRow { + border : 1px solid transparent; + } + + .dijitTreeNode .dijitTreeRowSelected { + box-shadow : -1px 0px 2px -1px rgba(0,0,0,0.1); + border-color : #ddd transparent; + background : white; + } + + img.tinyFeedIcon { + position : relative; + top : -2px; } } @@ -929,12 +896,12 @@ body.ttrss_main { display : none; } - #content-insert_splitter.dijitSplitterH { + /* #content-insert_splitter.dijitSplitterH { background : #f0f0f0; border-color: #ddd; border-top-width : 1px; border-style : solid; - } + } */ #toolbar { padding : 0px; @@ -944,15 +911,6 @@ body.ttrss_main { font-size : 12px; } - #main-toolbar { - background : white; - border: 0px solid #ddd; - border-bottom-width: 1px; - padding-left : 4px; - height : 26px; - - } - #header { border-width : 0px; text-align : right; @@ -1037,15 +995,19 @@ body.ttrss_main { list-style-type : none; border-style : solid; border-color : #ddd; - border-width : 0px 1px 1px 1px; + border-width : 1px 1px 1px 1px; background-color : white; margin : 0px 0px 5px 0px; - padding : 0px; + padding : 4px; + min-height : 16px; } ul#filterDlg_Matches li, ul#filterDlg_Actions li { cursor : pointer; - padding : 0px 0px 0px 5px; + } + + ul#filterDlg_Matches li .dijitCheckBox, ul#filterDlg_Actions li .dijitCheckBox { + margin-right: 4px; } ul.helpKbList { @@ -1085,10 +1047,6 @@ body.ttrss_main { width : 410px; } - ul#filterDlg_Matches li div.dijitCheckBox, ul#filterDlg_Actions li div.dijitCheckBox { - margin-right : 5px; - } - span.highlight { background-color : #ffff00; color : #cc90cc; @@ -1099,28 +1057,7 @@ body.ttrss_main { } #headlines-frame .dijitCheckBox { - border-width : 0px; - opacity : 0.5; - } - - #headlines-frame .dijitCheckBoxHover, - #headlines-frame .dijitCheckBoxChecked { - opacity : 1; - } - - #feedTree .dijitTreeRow img.dijitTreeExpandoLeaf { - width : 16px; - height : 16px; - vertical-align : middle; - position : relative; - } - - .dijitDropDownButton.attachments .dijitButtonText { - font-size : 12px; - } - - .dijitDropDownButton.attachments { - display : inline-block; + margin-right : 4px; } #editTagsDlg{ |