unify main and headlines toolbar

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

diff --git a/css/tt-rss.css b/css/tt-rss.css
index bdf1bf72a84ad5b65158b1876909e4ad54dd4dd1..ee921716a1123e4dac6ae1e797b5d3eaf1c2d5cf 100644 (file)
--- a/css/tt-rss.css
+++ b/css/tt-rss.css
@@ -22,13 +22,11 @@ div.postReply {
 }
 
 div.postReply div.postHeader {
-       border-width : 0px 0px 1px 0px;
-       border-style : solid;
-       border-color : #c0c0c0;
-       background : #fafafa;
-       box-shadow : 0px 0px 3px 0px rgba(0,0,0,0.1);
+       background : white;
+       box-shadow : 0px 1px 1px 0px rgba(0,0,0,0.1);
        padding : 5px;
        color : #909090;
+       background : #fafafa;
 }
 
 div.postReply div.postTitle {
@@ -66,12 +64,12 @@ div.postReply img.tagsPic {
 div.articleNote {
        background-color : #fff7d5;
        padding : 5px;
-       border-radius : 4px;
+       /* 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);
+       /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */
        background-color : #fff7d5;
        color : #9a8c59;
 }
@@ -108,8 +106,7 @@ h3 {
 hr {
        border-width : 0px 0px 1px 0px;
        border-style : solid;
-       border-color : #c0c0c0;
-       max-width : 90%;
+       border-color : #ccc;
 }
 
 a {
@@ -138,7 +135,7 @@ a:hover {
        min-width : 100px;
        padding : 5px;
        -width : 200px;
-       box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
+       /* box-shadow : 0px 0px 2px rgba(0,0,0,0.2); */
 }
 
 #notify img {
@@ -190,7 +187,7 @@ a:hover {
 }
 
 .hl.active {
-       box-shadow : inset 0px 0px 3px 0px rgba(0,0,0,0.1);
+       /* box-shadow : inset 0px 0px 3px 0px rgba(0,0,0,0.1); */
 }
 
 .hl.active div.hlTitle a {
@@ -206,18 +203,10 @@ 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 : #c0c0c0;
+       border-color : #eee;
 }
 
 .hl.active {
@@ -232,8 +221,8 @@ div.filterTestHolder {
        margin : 0px 0px 5px 0px;
        background-color : #ecf4ff;
        border-width : 1px;
-       border-radius : 4px;
-       box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1);
+       /* border-radius : 4px; */
+       /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */
 }
 
 
@@ -274,9 +263,9 @@ div.notice, div.warning, div.error {
        font-size : 12px;
        border-style : solid;
        border-color : #ccc;
-       border-radius : 4px;
+       /* border-radius : 4px; */
        border-width : 1px;
-       box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1);
+       /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */
 }
 
 div.notice div.inner, div.warning div.inner, div.error div.inner {
@@ -299,7 +288,7 @@ div.error {
 }
 
 div.warning img, div.notice img, div.error img {
-       margin-right : 4px;
+       margin : 4px;
        vertical-align : middle;
 }
 
@@ -320,48 +309,48 @@ div.prefHelp {
        padding : 5px;
 }
 
-span.feed_error {
-       color : red;
-}
-
 .insensitive {
        color : #555;
 }
 
-div#headlines-toolbar {
-       border-width : 0px 0px 1px 0px;
-       background-color : #fcfcfc;
-       border-color : #c0c0c0;
-       font-size : 12px;
+#main-toolbar > * {
+       white-space : nowrap;
+       display : table-cell;
+       color : #999;
        font-family : "Segoe UI", Tahoma, sans-serif;
-       color : #555;
-       padding : 0px;
-       margin : 0px;
-       overflow : hidden;
-       height : 25px;
-       line-height : 25px;
-       padding-left : 4px;
 }
 
-div#headlines-toolbar .dijitSelect {
-       font-size : 11px;
-       position : relative;
-       top : -2px;
+#main-toolbar #headlines-toolbar {
+       padding-right : 4px;
+       width : 100%;
+}
+
+#main-toolbar #headlines-toolbar span.holder {
+       display : table;
+       width : 100%;
+}
+
+#main-toolbar #headlines-toolbar span.holder > * {
+       display : table-cell;
 }
 
-div#headlines-toolbar span.r {
-       float: right;
-   position: relative;
-       padding : 0 4px 0px 4px;
+#main-toolbar #headlines-toolbar .main {
        text-align : right;
-}      
+}
+
+#headlines-toolbar span.r img {
+       margin-right : 4px;
+       position : relative;
+       top : 3px;
+}
 
-div#headlines-toolbar span.r span.error {
+#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 : center;
 }
 
 span.contentPreview {
@@ -381,12 +370,12 @@ span.hlLabelRef {
        display : inline-block;
        vertical-align : middle;
        white-space: nowrap;
-       border-radius : 4px;
+       border-radius : 4px; 
 }
 
 div.postHeader div.postDate {
        text-align : right;
-       color : #555;
+       color : #909090;
        float : right;
 }
 
@@ -412,7 +401,7 @@ a.hlFeed {
        font-size : 9px;
        font-style : italic;
        font-weight : normal;
-       border-radius : 4px;
+       /* border-radius : 4px; */
        display : inline-block;
        padding : 1px 2px 1px 2px;
        margin-bottom : 2px;
@@ -435,8 +424,8 @@ div.tagCloudContainer {
        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);
+       /* border-radius : 4px; */
+       /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */
 }
 
 div.errorExplained {
@@ -444,8 +433,8 @@ div.errorExplained {
        background-color : #ecf4ff;
        margin : 5px 0px 5px 0px;
        padding : 5px;
-       border-radius : 4px;
-       box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1);
+       /* border-radius : 4px; */
+       /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */
 }
 
 ul.feedErrorsList {
@@ -456,8 +445,8 @@ ul.feedErrorsList {
        background-color : #ecf4ff;
        margin : 0px 0px 5px 0px;
        padding : 5px;
-       border-radius : 4px;
-       box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1);
+       /* border-radius : 4px; */
+       /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */
 }
 
 ul.feedErrorsList em {
@@ -532,14 +521,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;
@@ -559,12 +540,6 @@ div.whiteBox {
        margin: 0;
 } */
 
-#toolbar div.actionChooser {
-       display : table-cell;
-       text-align : right;
-       padding-right : 3px;
-}
-
 div.autocomplete {
        position : absolute;
        width : 250px;
@@ -660,29 +635,18 @@ div.dlgButtons {
 }
 
 span.labelColorIndicator {
-       height : 14px;
-       width : 14px;
+       height : 16px;
+       width : 16px;
+       border-radius : 4px;
        line-height : 14px;
+       vertical-align : middle;
        font-size : 9px;
        display : inline-block;
-       border : 1px solid black;
-       background-color : #fff7d5;     
-       color : #063064;
-       text-align : center;
-       margin-right : 2px;
-}
-
-span.labelColorIndicator2 {
-       height : 14px;
-       width : 14px;
-       font-size : 9px;
-       display : inline-block;
-       border : 1px solid black;
+       border : 1px solid #ccc;
        background-color : #fff7d5;     
        color : #063064;
        text-align : center;
-       margin-right : 2px;
-       vertical-align : bottom;
+       /* box-shadow : 0px 0px 1px 0px rgba(0,0,0,0.1); */
 }
 
 div#cmdline {
@@ -786,7 +750,7 @@ div.fatalError textarea {
 
 #content-wrap {
        padding : 0px;
-       border-width : 0px 0px 0px 1px;
+       border-width : 0px 0px 0px 0px;
        border-style : solid;
        border-color : #c0c0c0;
        margin : 0px;
@@ -794,13 +758,11 @@ div.fatalError textarea {
 
 #feeds-holder {
        padding : 0px;
-       border-color : #c0c0c0;
-       border-left-width : 0px;
-       border-bottom-width : 0px;
-       border-top-width : 0px;
+       border-width : 0px 1px 0px 0px;
+       border-style : solid;
+       border-color : #eee;
        overflow : hidden;
-       box-shadow : inset 0px 0px 3px rgba(0,0,0,0.1);
-       background : #f9fbff;
+       background : #fafafa;
 }
 
 #headlines-wrap-inner {
@@ -811,11 +773,11 @@ div.fatalError textarea {
 
 #headlines-frame {
        padding : 0px;
-       border-color : #c0c0c0;
+       border-color : #eee;
        border-style : solid;
        border-width : 0px;
        margin-top : 0px;
-       box-shadow : inset 0px 0px 3px rgba(0,0,0,0.1);
+       /* box-shadow : inset 0px 0px 3px rgba(0,0,0,0.1); */
 }
 
 #headlines-toolbar_splitter, #toolbar_splitter {
@@ -828,7 +790,13 @@ div.fatalError textarea {
        border-width : 0px;
        white-space: nowrap;
        font-size : 12px;
-       box-shadow : 0px 0px 2px rgba(0,0,0,0.1);
+       /* box-shadow : 0px 0px 2px rgba(0,0,0,0.1); */
+}
+
+#main-toolbar {
+       background : white;
+       border-width : 0px;
+       padding-left : 0px;
 }
 
 #header {
@@ -852,18 +820,20 @@ div.fatalError textarea {
 
 #content-insert {
        padding : 0px;
-       border-color : #c0c0c0;
-       border-bottom-width : 0px;
-       border-right-width : 0px;
-       border-left-width : 0px;
+       border-color : #eee;
+       border-width : 0px;
        line-height: 20px;
        overflow : auto;
 }
 
-.dijitTreeLabel.Unread {
+#feedTree .dijitTreeRow .dijitTreeLabel.Unread {
        font-weight : bold;
 }
 
+#feedTree .dijitTreeRow.Error .dijitTreeLabel {
+       color : red;
+}
+
 .dijitTreeLabel {
        outline : 0;
 }
@@ -894,6 +864,7 @@ div.fatalError textarea {
 img.feedIcon, img.tinyFeedIcon {
        width : 16px;
        height : 16px;
+       line-height : 16px;
        vertical-align : middle;
        display : inline-block;
 }
@@ -947,6 +918,7 @@ img.feedIcon, img.tinyFeedIcon {
        color : #555;
 }
 
+
 ul#filterDlg_Matches, ul#filterDlg_Actions {
        max-height : 100px;
        overflow : auto;
@@ -957,7 +929,7 @@ ul#filterDlg_Matches, ul#filterDlg_Actions {
        background-color : #ecf4ff;
        margin : 0px 0px 5px 0px;
        padding : 0px;
-       box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1);
+       /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */
 }
 
 ul#filterDlg_Matches li, ul#filterDlg_Actions li {
@@ -977,8 +949,8 @@ ul.helpKbList {
        background-color : #ecf4ff;
        margin : 0px 0px 5px 0px;
        padding : 5px;
-       border-radius : 4px;
-       box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1);
+       /* border-radius : 4px; */
+       /* box-shadow : inset 0px 0px 2px rgba(0,0,0,0.1); */
 }
 
 ul.helpKbList span.hksequence {
@@ -1004,6 +976,9 @@ span.collapseBtn {
 
 div.postContent p {
        max-width : 650px;
+       -webkit-hyphens: auto;
+       -moz-hyphens: auto;
+       hyphens: auto;
 }
 
 div.postContent iframe {
@@ -1020,25 +995,58 @@ body#ttrssZoom {
        margin-left : auto;
        margin-right : auto;
        padding : 20px;
-       max-width : 800px;
+       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;
+       /* 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);
+       /* border-radius : 4px;
+       box-shadow : inset 0px 0px 3px rgba(0,0,0,0.1); */
        background : white;
 }
 
@@ -1062,14 +1070,15 @@ select.attachments {
        max-width : 120px;
 }
 
-div.hl.active {
-       border-color : #88b0f0;
-}
-
 #selected_prompt {
        margin-right : 25px;
 }
 
+#feedTree img.feedIcon {
+       position : relative;
+       top : -2px;
+}
+
 body#ttrssMain #feedTree .dijitTreeRow {
        padding : 2px 0px 2px;
        height : 22px;
@@ -1078,8 +1087,8 @@ body#ttrssMain #feedTree .dijitTreeRow {
        color : #333;
 }
 
-.dijitFolderClosed,
-.dijitFolderOpened {
+body#ttrssMain #feedTree .dijitFolderClosed,
+body#ttrssMain #feedTree .dijitFolderOpened {
        display : none;
 }
 
@@ -1111,7 +1120,6 @@ body#ttrssMain #feedTree {
        background : #f0f0f0;
        color : #999;
        border-color : #f0f0f0;
-       text-shadow : none;
 }
 
 #feedTree .counterNode {
@@ -1125,12 +1133,12 @@ body#ttrssMain #feedTree {
        border-radius : 4px;
        vertical-align : middle;
        float : right;
+       position : relative;
        line-height : 14px;
-       margin-right : 4px;
+       margin-right : 8px;
        margin-top : 3px;
        min-width : 23px;
        height : 14px;
-       text-shadow : 1px 1px rgba(0,0,0,0.2);
 }
 
 #feedTree .dijitTreeRow {
@@ -1148,7 +1156,67 @@ body#ttrssPrefs hr {
        font-size : 13px;
 }
 
+body#ttrssMain #feedTree .dijitTreeRowSelected {
+       background : white;
+       /* box-shadow : inset 0px 0px 3px rgba(0,0,0,0.1); */
+}
+
+body#ttrssMain #feedTree .dijitTreeRowHover {
+       background : #ecf4ff;
+}
+
+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;
+}
+
+span.highlight {
+       background-color : #ffff00;
+       color : #cc90cc;
+}
+
+body#ttrssMain #feedTree .dijitTreeRow .dijitTreeExpando {
+       background-image: url("../images/treeExpandImages.png");
+       position : relative;
+       top : -1px;
+}
+
+body#ttrssMain #feedTree .dijitTreeRow .dijitTreeExpandoLeaf {
+       display : none;
+}
+
+div.enclosure_title {
+
+}
+
+