rework some styles related to three panel mode

[tt-rss.git] / css / tt-rss.less

diff --git a/css/tt-rss.less b/css/tt-rss.less
old mode 100644 (file)
new mode 100755 (executable)
index 66dbc3e..5bf6118
--- a/css/tt-rss.less
+++ b/css/tt-rss.less
@@ -9,19 +9,18 @@ body.ttrss_main {
                outline: none;
        }
 
-       div.postReply {
+       div.post {
                padding : 0px;
 
-               div.postHeader {
+               div.header {
                        padding : 5px;
-                       margin-right : 4px;
                        color : #909090;
                        border: 0px solid #ddd;
                        border-bottom-width: 1px;
+                       background: #f0f0f0;
 
-                       div.postDate {
+                       div.date {
                                text-align : right;
-                               color : #909090;
                                float : right;
                        }
 
@@ -30,14 +29,15 @@ body.ttrss_main {
                        }
 
                        span.author {
-                               color : #555;
+                               color : @default-text;
                                font-size : 11px;
                                font-weight : normal;
                        }
                }
 
-               div.postTitle {
+               div.title {
                        overflow : hidden;
+                       font-size : 15px;
                        text-overflow: ellipsis;
                        white-space : nowrap;
                        font-weight : 600;
@@ -45,11 +45,11 @@ body.ttrss_main {
                        font-family : @fonts-ui-bold;
                }
 
-               div.postDate {
+               div.date {
                        padding-left : 10px;
                }
 
-               div.postContent {
+               div.content {
                        padding : 10px;
                        font-size : 16px;
 
@@ -81,7 +81,7 @@ body.ttrss_main {
                }
 
                div.postEnclosures {
-                       color : #555;
+                       color : @default-text;
                }
 
                img.tagsPic {
@@ -219,8 +219,9 @@ body.ttrss_main {
                border: 0px solid #ddd;
                border-bottom-width: 1px;
                padding : 1px;
+               transition : color 0.2s, background 0.2s;
 
-               div.hlTitle {
+               div.title {
                        display : table-cell;
                        cursor : pointer;
                        width : 100%;
@@ -250,29 +251,29 @@ body.ttrss_main {
                        max-height : 16px;
                }
 
-               span.hlFeed {
+               span.feed {
                        display : table-cell;
                        vertical-align : middle;
                        text-align : right;
                }
 
-               span.hlFeed a {
+               span.feed a {
                        border-radius : 4px;
                        display : inline-block;
                        padding : 1px 4px 1px 4px;
                        font-size : 11px;
                        font-style : italic;
                        font-weight : normal;
-                       color : #555;
+                       color : @default-text;
                        white-space : nowrap;
                }
 
-               span.hlFeed a:hover {
+               span.feed a:hover {
                        color : @color-accent;
                }
 
                span.hlUpdated {
-                       color : #555;
+                       color : @default-text;
                        display : table-cell;
                        vertical-align : middle;
                        text-align : right;
@@ -303,7 +304,7 @@ body.ttrss_main {
                        height : 16px;
                }
 
-               div.hlTitle a {
+               div.title a {
                        font-weight : 600;
                        text-rendering: optimizelegibility;
                        font-family : @fonts-ui;
@@ -325,21 +326,30 @@ body.ttrss_main {
                text-decoration : line-through;
        }
 
-       .hl.Unread div.hlTitle a {
+       .hl.Unread div.title a {
                color : black;
        }
 
-       .hl.active {
-               background : @color-accent-light ! important;
-       }
-
-       .hl.active div.hlTitle a {
+       .hl.active div.title a {
                color : @color-accent;
                /* text-shadow : 1px 1px 2px #fff; */
        }
 
+       .hl.active {
+               background : @color-accent ! important;
+       }
+
+       .hl.active,
        .hl.Selected {
-               background : #f9fbff;
+               color : white;
+               background : desaturate(@color-accent, 25%);
+
+               a,
+               .feed a,
+               .hlContent a.title,
+               span {
+                       color : white;
+               }
        }
 
        .hl.Grayed {
@@ -359,7 +369,7 @@ body.ttrss_main {
        #headlines-frame blockquote,
        .dijitContentPane blockquote {
                margin : 5px 0px 5px 0px;
-               color : #555;
+               color : @default-text;
                padding-left : 10px;
                border: 0px solid #ccc;
                border-left-width: 4px;
@@ -378,7 +388,7 @@ body.ttrss_main {
        .dijitContentPane pre {
                margin: 5px 0px 5px 0px;
                padding: 10px;
-               color: #555;
+               color: @default-text;
                font-family: monospace;
                font-size: 12px;
                border: 0px solid #ccc;
@@ -453,12 +463,12 @@ body.ttrss_main {
        }
 
        div.prefHelp {
-               color : #555;
+               color : @default-text;
                padding : 5px;
        }
 
        .insensitive {
-               color : #555;
+               color : @default-text;
        }
 
        .small {
@@ -588,7 +598,7 @@ body.ttrss_main {
                padding : 5px;
 
                em {
-                       color : #555;
+                       color : @default-text;
                }
        }
 
@@ -694,17 +704,17 @@ body.ttrss_main {
        }
 
 
-       div#headlines-frame.wide .hlTitle {
+       div#headlines-frame.wide .title {
                max-width : none;
                overflow : visible;
                white-space : normal;
        }
 
-       div#headlines-frame.wide .hl .hlFeed {
+       div#headlines-frame.wide .hl .feed {
                display : none;
        }
 
-       img.hlScorePic {
+       img.score-pic {
                vertical-align : middle;
                width : 16px;
                height : 16px;
@@ -712,7 +722,7 @@ body.ttrss_main {
 
        div.dlgSec {
                font-size : 12px;
-               color : #555;
+               color : @default-text;
                font-weight : bold;
                clear : both;
                height : 20px;
@@ -763,7 +773,7 @@ body.ttrss_main {
                left : 5px;
                bottom : 5px;
                font-size : 11px;
-               color : #555;
+               color : @default-text;
                font-weight : bold;
                background-color : white;
                border : 1px solid @color-accent;
@@ -818,6 +828,10 @@ body.ttrss_main {
                        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;
@@ -860,9 +874,9 @@ body.ttrss_main {
                                display : inline-block;
                                font-size : 9px;
                                text-align : center;
-                               border : 1px solid @color-accent;
+                               border : 1px solid lighten(@color-accent, 5%);;
                                color : white;
-                               background : @color-accent;
+                               background : lighten(@color-accent, 5%);
                                border-radius : 4px;
                                vertical-align : middle;
                                float : right;
@@ -903,6 +917,13 @@ body.ttrss_main {
                display : none;
        }
 
+       #content-insert_splitter.dijitSplitterH {
+               background : #f0f0f0;
+               border-color: #ddd;
+               border-top-width : 1px;
+               border-style : solid;
+       }
+
        #toolbar {
                padding : 0px;
                margin : 0px;
@@ -923,7 +944,7 @@ body.ttrss_main {
        #header {
                border-width : 0px;
                text-align : right;
-               color : #555;
+               color : @default-text;
                padding : 5px 5px 0px 0px;
                margin : 0px;
                position : absolute;
@@ -934,7 +955,7 @@ body.ttrss_main {
 
        #footer {
                text-align : center;
-               color : #555;
+               color : @default-text;
                padding : 4px 4px 8px 4px;
                border-width : 0px;
        }
@@ -944,7 +965,6 @@ body.ttrss_main {
                border-color : #ddd;
                border-width : 0px;
                line-height: 1.5;
-               font-size : 15px;
                overflow : auto;
                -webkit-overflow-scrolling : touch;
        }
@@ -959,10 +979,10 @@ body.ttrss_main {
 
        .player {
                display : inline-block;
-               color : #555;
+               color : @default-text;
                font-size : 11px;
                font-family : sans-serif;
-               border : 1px solid #555;
+               border : 1px solid @default-text;
                padding : 0px 4px 0px 4px;
                margin : 0px 2px 0px 2px;
                width : 50px;
@@ -984,12 +1004,12 @@ body.ttrss_main {
                height : 100%;
                margin-left : 1px;
                text-align : center;
-               color : #555;
+               color : @default-text;
                font-size : 11px;
                font-style : italic;
 
                a, span {
-                       color : #555;
+                       color : @default-text;
                        padding : 10px;
                        display : block;
                }
@@ -1037,14 +1057,6 @@ body.ttrss_main {
                }
        }
 
-       span.collapseBtn {
-               cursor : pointer;
-
-               img {
-                       vertical-align : middle;
-               }
-       }
-
        select.attachments {
                display : block;
                margin-top : 10px;
@@ -1102,6 +1114,92 @@ body.ttrss_main {
        #editTagsDlg{
                overflow: visible;
        }
+
+       #feedEditDlg img.feedIcon {
+               border : 1px solid #ccc;
+               padding : 5px;
+               margin : 5px;
+               max-width : 20px;
+               max-height : 20px;
+               height : auto;
+               width : auto;
+       }
 }
 
+body.ttrss_login {
+       padding : 2em;
+       font-size : 14px;
+
+       fieldset {
+               margin-left : auto;
+               margin-right : auto;
+               display : block;
+               width : 400px;
+               border-width : 0px;
+       }
+
+       label {
+               width : 120px;
+               margin-right : 20px;
+               display : inline-block;
+               text-align : right;
+               color : gray;
+       }
+
+       div.header {
+               border: 0px solid @color-accent;
+               border-bottom-width: 1px;
+               margin-bottom : 1em;
+               padding-bottom : 5px;
+       }
+
+       div.footer {
+               margin-top : 1em;
+               padding-top : 5px;
+               border: 0px solid @color-accent;
+               border-top-width: 1px;
+               text-align : center;
+               color : gray;
+               font-size : 12px;
+       }
+
+       a.forgotpass {
+               text-align : right;
+               font-size : 11px;
+               display : inline-block;
+       }
+
+       a {
+               color: @color-accent;
+               text-decoration: none;
+       }
+
+       a:hover,
+       a:focus {
+               color: @color-accent;
+               text-decoration: underline;
+       }
 
+       div.footer a {
+               color : gray;
+       }
+
+       div.footer a:hover {
+               color : @color-accent;
+       }
+
+       div.row {
+               padding : 0px 0px 5px 0px;
+       }
+
+       div.row-error {
+               color : red;
+               text-align : center;
+               padding : 0px 0px 5px 0px;
+       }
+}
+
+::selection {
+       background : @color-accent;
+       color : white;
+}