]> git.wh0rd.org - tt-rss.git/blobdiff - css/tt-rss.less
rework some styles related to three panel mode
[tt-rss.git] / css / tt-rss.less
old mode 100644 (file)
new mode 100755 (executable)
index 8ceafbe..5bf6118
@@ -1,34 +1,26 @@
 body.ttrss_main {
-
        background : white;
        color : black;
-       margin : 0px;
-       padding : 0px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
-
-       body#ttrssMain {
-               overflow : hidden;
-               max-height : 100%;
-       }
+       overflow : hidden;
 
        :focus {
                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;
                        }
 
@@ -37,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;
@@ -52,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;
 
@@ -88,7 +81,7 @@ body.ttrss_main {
                }
 
                div.postEnclosures {
-                       color : #555;
+                       color : @default-text;
                }
 
                img.tagsPic {
@@ -226,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%;
@@ -257,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;
@@ -310,7 +304,7 @@ body.ttrss_main {
                        height : 16px;
                }
 
-               div.hlTitle a {
+               div.title a {
                        font-weight : 600;
                        text-rendering: optimizelegibility;
                        font-family : @fonts-ui;
@@ -332,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 {
@@ -366,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;
@@ -385,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;
@@ -460,12 +463,12 @@ body.ttrss_main {
        }
 
        div.prefHelp {
-               color : #555;
+               color : @default-text;
                padding : 5px;
        }
 
        .insensitive {
-               color : #555;
+               color : @default-text;
        }
 
        .small {
@@ -595,7 +598,7 @@ body.ttrss_main {
                padding : 5px;
 
                em {
-                       color : #555;
+                       color : @default-text;
                }
        }
 
@@ -701,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;
@@ -719,7 +722,7 @@ body.ttrss_main {
 
        div.dlgSec {
                font-size : 12px;
-               color : #555;
+               color : @default-text;
                font-weight : bold;
                clear : both;
                height : 20px;
@@ -770,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;
@@ -797,12 +800,6 @@ body.ttrss_main {
                }
        }
 
-       #ttrssMain #main {
-               border-width : 0px;
-               margin : 0px;
-               padding : 0px;
-       }
-
        #header-wrap {
                border-width : 0px;
                margin : 0px;
@@ -822,6 +819,83 @@ body.ttrss_main {
                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;
+               }
+
+               #feedTree {
+                       height : 100%;
+                       overflow-x : hidden;
+                       text-rendering: optimizelegibility;
+                       font-family : @fonts-ui;
+
+                       .counterNode.aux {
+                               background : #f0f0f0;
+                               color : #999;
+                               border-color : #f0f0f0;
+                       }
+
+                       .counterNode {
+                               font-weight : bold;
+                               display : inline-block;
+                               font-size : 9px;
+                               text-align : center;
+                               border : 1px solid lighten(@color-accent, 5%);;
+                               color : white;
+                               background : lighten(@color-accent, 5%);
+                               border-radius : 4px;
+                               vertical-align : middle;
+                               float : right;
+                               position : relative;
+                               line-height : 14px;
+                               margin-right : 8px;
+                               margin-top : 2px;
+                               min-width : 23px;
+                               height : 14px;
+                       }
+
+                       .dijitTreeNode .loadingExpando {
+                               left : -3px;
+                               height : 22px;
+                               position : relative;
+                               top : -3px;
+                       }
+
+               }
        }
 
        #headlines-wrap-inner {
@@ -843,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;
@@ -863,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;
@@ -874,7 +955,7 @@ body.ttrss_main {
 
        #footer {
                text-align : center;
-               color : #555;
+               color : @default-text;
                padding : 4px 4px 8px 4px;
                border-width : 0px;
        }
@@ -884,19 +965,10 @@ body.ttrss_main {
                border-color : #ddd;
                border-width : 0px;
                line-height: 1.5;
-               font-size : 15px;
                overflow : auto;
                -webkit-overflow-scrolling : touch;
        }
 
-       #feedTree .dijitTreeRow .dijitTreeLabel.Unread {
-               font-weight : bold;
-       }
-
-       #feedTree .dijitTreeRow.Error .dijitTreeLabel {
-               color : red;
-       }
-
        img.feedIcon, img.tinyFeedIcon {
                width : 16px;
                height : 16px;
@@ -907,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;
@@ -932,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;
                }
@@ -985,14 +1057,6 @@ body.ttrss_main {
                }
        }
 
-       span.collapseBtn {
-               cursor : pointer;
-
-               img {
-                       vertical-align : middle;
-               }
-       }
-
        select.attachments {
                display : block;
                margin-top : 10px;
@@ -1004,31 +1068,6 @@ body.ttrss_main {
                vertical-align  : middle;
        }
 
-       body#ttrssMain.claro #feedTree.dijitTree .dijitTreeNode .dijitTreeRowSelected {
-               box-shadow : -1px 0px 2px -1px rgba(0,0,0,0.1);
-               border-right-color : white;
-       }
-
-       body#ttrssMain #feedTree.dijitTree .dijitTreeContainer {
-               max-width : 100%;
-       }
-
-       body#ttrssMain #feedTree.dijitTree .dijitTreeRow {
-               overflow: hidden;
-               text-overflow: ellipsis;
-       }
-
-       body#ttrssMain #feedTree.dijitTree .dijitTreeNode .dijitTreeRow {
-               padding : 4px 0px 4px;
-               border-width : 1px;
-               color : #333;
-       }
-
-       body#ttrssMain #feedTree.dijitTree img.tinyFeedIcon {
-               position : relative;
-               top : -2px;
-       }
-
        #filterDlg_feeds select {
                height : 150px;
                width : 410px;
@@ -1038,46 +1077,6 @@ body.ttrss_main {
                margin-right : 5px;
        }
 
-       body#ttrssMain #feedTree {
-               height : 100%;
-               overflow-x : hidden;
-               text-rendering: optimizelegibility;
-               font-family : @fonts-ui;
-
-               .counterNode.aux {
-                       background : #f0f0f0;
-                       color : #999;
-                       border-color : #f0f0f0;
-               }
-
-               .counterNode {
-                       font-weight : bold;
-                       display : inline-block;
-                       font-size : 9px;
-                       text-align : center;
-                       border : 1px solid @color-accent;
-                       color : white;
-                       background : @color-accent;
-                       border-radius : 4px;
-                       vertical-align : middle;
-                       float : right;
-                       position : relative;
-                       line-height : 14px;
-                       margin-right : 8px;
-                       margin-top : 2px;
-                       min-width : 23px;
-                       height : 14px;
-               }
-
-               .dijitTreeNode .loadingExpando {
-                       left : -3px;
-                       height : 22px;
-                       position : relative;
-                       top : -3px;
-               }
-
-       }
-
        span.highlight {
                background-color : #ffff00;
                color : #cc90cc;
@@ -1087,17 +1086,17 @@ body.ttrss_main {
 
        }
 
-       body#ttrssMain #headlines-frame .dijitCheckBox {
+       #headlines-frame .dijitCheckBox {
                border-width : 0px;
                opacity : 0.5;
        }
 
-       body#ttrssMain #headlines-frame .dijitCheckBoxHover,
-       body#ttrssMain #headlines-frame .dijitCheckBoxChecked {
+       #headlines-frame .dijitCheckBoxHover,
+       #headlines-frame .dijitCheckBoxChecked {
                opacity : 1;
        }
 
-       body#ttrssMain #feedTree .dijitTreeRow img.dijitTreeExpandoLeaf {
+       #feedTree .dijitTreeRow img.dijitTreeExpandoLeaf {
                width : 16px;
                height : 16px;
                vertical-align : middle;
@@ -1116,114 +1115,91 @@ body.ttrss_main {
                overflow: visible;
        }
 
-       body#ttrssZoom {
-               margin-left : auto;
-               margin-right : auto;
-               padding : 20px;
-               max-width : 770px;
-               background : #f5f5f5;
-
-               div.postHeader div.postFeedTitle {
-                       float : left;
-                       text-align : right;
-                       padding-left : 0px;
-                       font-size : 11px;
-               }
-
-               div.postHeader a.postComments {
-                       text-align : right;
-                       padding-left : 0px;
-                       font-size : 11px;
-               }
-
-               div.postHeader div.postDate {
-                       float : none;
-                       text-align : right;
-                       padding-left : 0px;
-                       color : #777;
-                       font-size : 11px;
-               }
-
-               div.postHeader div.postTags {
-                       color : #777;
-                       font-size : 11px;
-               }
-
-               div.postHeader div.postTitle {
-                       white-space : normal;
-                       font-size : 16px;
-               }
-
-               div.postContent {
-                       font-size : 15px;
-                       line-height : 1.5;
-               }
+       #feedEditDlg img.feedIcon {
+               border : 1px solid #ccc;
+               padding : 5px;
+               margin : 5px;
+               max-width : 20px;
+               max-height : 20px;
+               height : auto;
+               width : auto;
+       }
+}
 
-               div.postContent p {
-                       -webkit-hyphens: auto;
-                       -moz-hyphens: auto;
-                       hyphens: auto;
-               }
+body.ttrss_login {
+       padding : 2em;
+       font-size : 14px;
 
-               div.postHeader {
-                       margin : 10px;
-                       border-width : 0px 0px 1px 0px;
-                       border-style : solid;
-                       border-color : #eee;
-                       background : white;
-               }
+       fieldset {
+               margin-left : auto;
+               margin-right : auto;
+               display : block;
+               width : 400px;
+               border-width : 0px;
+       }
 
-               div.postReply {
-                       border : 1px solid #ddd;
-                       background : white;
-                       box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
-                       border-radius : 6px;
-               }
+       label {
+               width : 120px;
+               margin-right : 20px;
+               display : inline-block;
+               text-align : right;
+               color : gray;
+       }
 
-               div.footer {
-                       margin-top : 1em;
-                       text-align : center;
-               }
+       div.header {
+               border: 0px solid @color-accent;
+               border-bottom-width: 1px;
+               margin-bottom : 1em;
+               padding-bottom : 5px;
+       }
 
-               div.postContent img {
-                       max-width : 730px;
-                       height : auto;
-               }
+       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;
+       }
 
-               div.postContent blockquote {
-                       margin : 5px 0px 5px 0px;
-                       color : #555;
-                       padding-left : 10px;
-                       border-width : 0px 0px 0px 4px;
-                       border-color : #ccc;
-                       border-style : solid;
-               }
+       a.forgotpass {
+               text-align : right;
+               font-size : 11px;
+               display : inline-block;
+       }
 
-               div.postContent code {
-                       color : #009900;
-                       font-family : monospace;
-                       font-size : 12px;
-               }
+       a {
+               color: @color-accent;
+               text-decoration: none;
+       }
 
-               div.postContent pre {
-                       margin : 5px 0px 5px 0px;
-                       padding : 10px;
-                       color : #555;
-                       font-family : monospace;
-                       font-size : 12px;
-                       border-width : 0px;
-                       border-color : #ccc;
-                       border-style : solid;
-                       background : #f5f5f5;
-                       display : block;
-                       max-width : 98%;
-                       overflow : auto;
-               }
+       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;
+}