]> git.wh0rd.org - tt-rss.git/blobdiff - css/cdm.less
pngcrush.sh
[tt-rss.git] / css / cdm.less
index 5a79addbd1e2db00f511f3b71ada9bb9f4fbd75a..fc8120700d25759444b0e230673f220231569ab8 100644 (file)
@@ -1,34 +1,34 @@
 .cdm {
        margin-right : 4px;
 
-       .cdmHeader, .cdmFooter {
+       .header, .footer {
                display : table;
        }
 
-       .cdmHeader img, .cdmHeader input, .cdmFooter img {
+       .header img, .header input, .footer img {
                vertical-align : middle;
        }
 
-       .cdmHeader > div, .cdmFooter > div {
+       .header > div, .footer > div {
                white-space : nowrap;
        }
 
-       .cdmHeader > span, .cdmFooter > span.left {
+       .header > span, .footer > span.left {
                width : 100%;
        }
 
-       .cdmHeader img, .cdmFooter img {
+       .header img, .footer img {
                margin : 0px 4px;
        }
 
-       .cdmHeader {
+       .header {
                > * {
                        display : table-cell;
                        padding : 5px;
                }
 
                span.updated {
-                       color : #555;
+                       color : @default-text;
                        font-weight : normal;
                        font-size : 11px;
                        white-space : nowrap;
                }
        }
 
-       .cdmFooter {
+       .footer {
                height : 30px;
                padding-left : 5px;
                font-weight : normal;
-               color : #555;
+               color : @default-text;
                clear : both;
 
                > * {
                }
        }
 
-       .cdmIntermediate {
+       .intermediate {
                margin : 10px;
        }
 
-       .cdmContentInner {
+       .content-inner {
                margin : 10px;
                line-height : 1.5;
                font-size : 16px;
 
        }
 
-       .cdmIntermediate img,
-       .cdmIntermediate video,
-       .cdmContentInner img,
-       .cdmContentInner video {
+       .intermediate img,
+       .intermediate video,
+       .content-inner img,
+       .content-inner video {
                border-width : 0px;
                max-width : 98%;
                height : auto;
        margin-top : 4px;
        margin-bottom : 4px;
 
-       .cdmFooter {
+       .collapse {
+               display : none;
+       }
+
+       .footer {
                border: 0px solid #ddd;
                border-bottom-width: 1px;
        }
 
 }
 
-.cdm.expandable {
-       background-color : #f0f0f0;
-       border: 0px solid #ddd;
-       border-bottom-width: 1px;
-
-       > hr {
-               display : none;
-       }
-
-       div.cdmHeader span.titleWrap {
-               white-space : nowrap;
-               text-overflow : ellipsis;
-               overflow : hidden;
-               max-width : 500px;
-       }
-}
-
-.cdm.expandable.Unread {
-       background : white;
-}
-
-.cdm.expandable.Selected {
-       background : #f9fbff;
-}
-
-.cdm.expandable.active {
-       background : white ! important;
-}
-
-div.cdm.expandable.active div.cdmHeader span.titleWrap {
-       white-space : normal;
-}
-
-div.cdm.expandable div.cdmHeader a.title {
-       font-weight : 600;
-       color : #555;
-       font-size : 14px;
-       -webkit-transition : color 0.2s;
-       transition : color 0.2s;
-       text-rendering: optimizelegibility;
-       font-family : @fonts-ui-bold;
-}
-
-div.cdm.expandable.Unread div.cdmHeader a.title {
-       color : black;
-}
-
-div.cdm.expandable.active div.cdmHeader a.title {
-       color: @color-link;
-       font-size: 16px;
-       font-weight: 600;
-       text-rendering: optimizelegibility;
-       font-family: @fonts-ui-bold;
-}
-
-div.cdm.expanded div.cdmHeader {
+div.cdm.expanded div.header {
        background : transparent ! important;
 }
 
-div.cdm.expanded div.cdmHeader a.title {
+div.cdm.expanded div.header a.title {
        font-size : 16px;
        color : #999;
        font-weight : 600;
-       -webkit-transition : color 0.2s;
-       transition : color 0.2s;
+       transition : color 0.2s, background 0.2s;
        text-rendering: optimizelegibility;
        font-family : @fonts-ui-bold;
 }
@@ -188,95 +136,89 @@ div.cdm.expanded.active {
        background : white;
 }
 
-div.cdm.expanded.active div.cdmHeader a.title {
+div.cdm.expanded.active div.header a.title {
        color : @color-link;
 }
 
-div.cdm.expanded.Unread div.cdmHeader a.title {
+div.cdm.expanded.Unread div.header a.title {
        color : black;
 }
 
-div.cdm.expanded div.cdmContent {
-       color : #555;
+div.cdm.expanded div.content {
+       color : @default-text;
 }
 
-div.cdm.expanded.Unread div.cdmContent {
+div.cdm.expanded.Unread div.content {
        color : black;
 }
 
-div.cdm.active div.cdmContent {
+div.cdm.active div.content {
        color : black;
 }
 
-span.cdmExcerpt {
-       white-space : nowrap;
-       font-size : 11px;
-       color : #999;
-       font-weight : normal;
-       cursor : pointer;
-}
-
-div.cdmContent div.postEnclosures {
-       margin-top : 1em;
-       color : #555;
-}
+.cdm {
+       div.content div.postEnclosures {
+               margin-top: 1em;
+               color: @default-text;
+       }
 
-div.cdmFeedTitle {
-       border: 0px solid @color-link;
-       border-bottom-width: 1px;
-       padding : 5px 3px 5px 5px;
-}
+       div.feed-title {
+               border: 0px solid @color-link;
+               border-bottom-width: 1px;
+               padding: 5px 3px 5px 5px;
+       }
 
-div.cdmFeedTitle a.title {
-       color : #555;
-       font-weight : bold;
-}
+       div.feed-title a.title {
+               color: @default-text;
+               font-weight: bold;
+       }
 
-div.cdmFeedTitle a {
-       color : #555;
-}
+       div.feed-title a {
+               color: @default-text;
+       }
 
-div.cdmFeedTitle a:hover {
-       color : @color-link;
-}
+       div.feed-title a:hover {
+               color: @color-link;
+       }
 
-div.cdmHeader span.hlFeed {
-       float : right;
-       font-weight : normal;
-       font-style : italic;
-}
+       div.header span.feed {
+               float: right;
+               font-weight: normal;
+               font-style: italic;
+       }
 
-div.cdmHeader div.hlFeed, div.cdmHeader div.hlFeed a {
-       vertical-align : middle;
-       color : #555;
-       font-weight : normal;
-       font-style : italic;
-       font-size : 11px;
-}
+       div.header div.feed, div.header div.feed a {
+               vertical-align: middle;
+               color: @default-text;
+               font-weight: normal;
+               font-style: italic;
+               font-size: 11px;
+       }
 
-div.cdm .hlFeed a {
-       border-radius : 4px;
-       display : inline-block;
-       padding : 1px 4px 1px 4px;
-}
+       div.content-inner p {
+               /*max-width : 650px;*/
+               -webkit-hyphens: auto;
+               -moz-hyphens: auto;
+               hyphens: auto;
+       }
 
-div.cdmContentInner p {
-       /*max-width : 650px;*/
-       -webkit-hyphens: auto;
-       -moz-hyphens: auto;
-       hyphens: auto;
-}
+       div.content-inner iframe {
+               min-width : 50%;
+               max-width : 98%;
+       }
 
-div.cdmContentInner iframe {
-       min-width : 50%;
-       max-width : 98%;
-}
+       div.header span.author {
+               white-space : nowrap;
+               color : @default-text;
+               font-size : 11px;
+               font-weight : normal;
+       }
 
-div.cdmHeader span.author {
-       white-space : nowrap;
-       color : #555;
-       font-size : 11px;
-       font-weight : normal;
+       .feed a {
+               border-radius : 4px;
+               display : inline-block;
+               padding : 1px 4px 1px 4px;
+       }
 }
 
 div#floatingTitle {
@@ -288,7 +230,7 @@ div#floatingTitle {
        border: 0px solid #ddd;
        border-bottom-width: 1px;
        background : white;
-       color : #555;
+       color : @default-text;
        box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
 
        > * {
@@ -304,7 +246,7 @@ div#floatingTitle {
        }
 
        span.author {
-               color : #555;
+               color : @default-text;
                font-size : 11px;
                font-weight : normal;
        }
@@ -312,8 +254,7 @@ div#floatingTitle {
        a.title {
                font-size : 16px;
                color : #999;
-               -webkit-transition : color 0.2s;
-               transition : color 0.2s;
+               transition : color 0.2s, background 0.2s;
                font-weight : 600;
                text-rendering: optimizelegibility;
                font-family : @fonts-ui-bold;
@@ -323,16 +264,16 @@ div#floatingTitle {
                margin-left : 0px;
        }
 
-       div.hlFeed {
+       div.feed {
                padding-right : 10px;
-               color : #555;
+               color : @default-text;
                font-weight : normal;
                font-style : italic;
                font-size : 11px;
                white-space : nowrap;
        }
 
-       div.hlFeed a {
+       div.feed a {
                border-radius : 4px;
                display : inline-block;
                padding : 1px 4px 1px 4px;
@@ -341,12 +282,12 @@ div#floatingTitle {
        span.updated {
                padding-right : 10px;
                white-space : nowrap;
-               color : #555;
+               color : @default-text;
                font-size : 11px;
        }
 
-       div.hlFeed a {
-               color : #555;
+       div.feed a {
+               color : @default-text;
        }
 
        span.titleWrap {
@@ -355,62 +296,128 @@ div#floatingTitle {
        }
 
        .dijit,
-       img.hlScorePic {
+       img.score-pic {
                display : none;
        }
 
+       .feed-title {
+               > * {
+                       display : table-cell;
+                       vertical-align : middle;
+               }
+
+               a.title {
+                       width : 100%;
+               }
+
+               a.catchup {
+                       text-align : right;
+                       color : @default-text;
+                       padding-right : 10px;
+                       font-size : 11px;
+                       white-space : nowrap;
+               }
+
+               a.catchup:hover {
+                       color : @color-link;
+               }
+
+       }
 }
 
 div#floatingTitle.Unread a.title {
        color : black;
 }
 
-.cdm.high .cdmHeader {
+.cdm.high .header {
        a.title.high,
-       .cdmExcerpt,
+       .excerpt,
        span.author {
                color : #00aa00;
        }
 }
 
-.cdm.Unread.high .cdmHeader {
+.cdm.Unread.high .header {
        a.title.high,
-       .cdmExcerpt,
+       .excerpt,
        span.author {
                color : #00dd00;
        }
 }
 
-.cdm .cdmHeader a.title.low,
-.cdm.low .cdmHeader .cdmExcerpt,
-.cdm.Unread .cdmHeader a.title.low,
-.cdm.Unread.low .cdmHeader .cdmExcerpt,
-.cdm.low .cdmHeader span.author {
+.cdm .header a.title.low,
+.cdm.low .header .excerpt,
+.cdm.Unread .header a.title.low,
+.cdm.Unread.low .header .excerpt,
+.cdm.low .header span.author {
        color : #909090;
        text-decoration : line-through;
 }
 
-.cdmFeedTitle {
-
-       > * {
-               display : table-cell;
-               vertical-align : middle;
-       }
+.cdm.expandable {
+       background-color : #f0f0f0;
+       border: 0px solid #ddd;
+       border-bottom-width: 1px;
 
-       a.title {
-               width : 100%;
+       > hr {
+               display : none;
        }
 
-       a.catchup {
-               text-align : right;
-               color : #555;
-               padding-right : 10px;
-               font-size : 11px;
+       div.header span.titleWrap {
                white-space : nowrap;
+               text-overflow : ellipsis;
+               overflow : hidden;
+               max-width : 500px;
        }
+}
+
+.cdm.expandable.Unread {
+       background : white;
+}
+
+.cdm.expandable.Selected:not(.active) {
+       background : desaturate(@color-accent, 25%);
 
-       a.catchup:hover {
-               color : @color-link;
+       a,
+       .header a.title,
+       span {
+               color : white;
        }
+}
 
+.cdm.expandable.active {
+       background : white ! important;
 }
+
+div.cdm.expandable.active div.header span.titleWrap {
+       white-space : normal;
+}
+
+div.cdm.expandable div.header a.title {
+       font-weight : 600;
+       color : @default-text;
+       font-size : 14px;
+       transition : color 0.2s, background 0.2s;
+       text-rendering: optimizelegibility;
+       font-family : @fonts-ui-bold;
+}
+
+div.cdm.expandable.Unread div.header a.title {
+       color : black;
+}
+
+div.cdm.expandable.active div.header a.title {
+       color: @color-link;
+       font-size: 16px;
+       font-weight: 600;
+       text-rendering: optimizelegibility;
+       font-family: @fonts-ui-bold;
+}
+
+div.cdm.expandable:not(.active) {
+       cursor : pointer;
+
+       .content, .collapse {
+               display : none;
+       }
+}
\ No newline at end of file