css/cdm.less

   1 .cdm {
   2         margin-right : 4px;
   3
   4         .cdmHeader, .cdmFooter {
   5                 display : table;
   6         }
   7
   8         .cdmHeader img, .cdmHeader input, .cdmFooter img {
   9                 vertical-align : middle;
  10         }
  11
  12         .cdmHeader > div, .cdmFooter > div {
  13                 white-space : nowrap;
  14         }
  15
  16         .cdmHeader > span, .cdmFooter > span.left {
  17                 width : 100%;
  18         }
  19
  20         .cdmHeader img, .cdmFooter img {
  21                 margin : 0px 4px;
  22         }
  23
  24         .cdmHeader {
  25                 > * {
  26                         display : table-cell;
  27                         padding : 5px;
  28                 }
  29
  30                 span.updated {
  31                         color : @default-text;
  32                         font-weight : normal;
  33                         font-size : 11px;
  34                         white-space : nowrap;
  35                         vertical-align : middle;
  36                 }
  37
  38                 input {
  39                         margin-right : 5px;
  40                 }
  41
  42                 div.updPic {
  43                         width : 25px;
  44                         display : inline-block;
  45                         text-align : center;
  46                 }
  47
  48                 div.updPic img {
  49                         vertical-align : middle;
  50                 }
  51
  52                 input {
  53                         margin-left : 4px;
  54                         margin-right : 4px;
  55                 }
  56         }
  57
  58         .cdmFooter {
  59                 height : 30px;
  60                 padding-left : 5px;
  61                 font-weight : normal;
  62                 color : @default-text;
  63                 clear : both;
  64
  65                 > * {
  66                         display : table-cell;
  67                         vertical-align : middle;
  68                 }
  69         }
  70
  71         .cdmIntermediate {
  72                 margin : 10px;
  73         }
  74
  75         .cdmContentInner {
  76                 margin : 10px;
  77                 line-height : 1.5;
  78                 font-size : 16px;
  79
  80                 h1 {
  81                         font-size : 16px;
  82                 }
  83
  84                 h2,
  85                 h3,
  86                 h4 {
  87                         font-size : 15px;
  88                 }
  89
  90         }
  91
  92         .cdmIntermediate img,
  93         .cdmIntermediate video,
  94         .cdmContentInner img,
  95         .cdmContentInner video {
  96                 border-width : 0px;
  97                 max-width : 98%;
  98                 height : auto;
  99         }
 100 }
 101
 102 .cdm.expanded {
 103         margin-top : 4px;
 104         margin-bottom : 4px;
 105
 106         .cdmFooter {
 107                 border: 0px solid #ddd;
 108                 border-bottom-width: 1px;
 109         }
 110
 111         > hr {
 112                 margin-top : 0px;
 113                 margin-bottom : 0px;
 114         }
 115
 116 }
 117
 118 .cdm.expandable {
 119         background-color : #f0f0f0;
 120         border: 0px solid #ddd;
 121         border-bottom-width: 1px;
 122
 123         > hr {
 124                 display : none;
 125         }
 126
 127         div.cdmHeader span.titleWrap {
 128                 white-space : nowrap;
 129                 text-overflow : ellipsis;
 130                 overflow : hidden;
 131                 max-width : 500px;
 132         }
 133 }
 134
 135 .cdm.expandable.Unread {
 136         background : white;
 137 }
 138
 139 .cdm.expandable.Selected:not(.active) {
 140         background : desaturate(@color-accent, 25%);
 141
 142         a,
 143         .cdmHeader a.title,
 144         span {
 145                 color : white;
 146         }
 147 }
 148
 149 .cdm.expandable.active {
 150         background : white ! important;
 151 }
 152
 153 div.cdm.expandable.active div.cdmHeader span.titleWrap {
 154         white-space : normal;
 155 }
 156
 157 div.cdm.expandable div.cdmHeader a.title {
 158         font-weight : 600;
 159         color : @default-text;
 160         font-size : 14px;
 161         transition : color 0.2s, background 0.2s;
 162         text-rendering: optimizelegibility;
 163         font-family : @fonts-ui-bold;
 164 }
 165
 166 div.cdm.expandable.Unread div.cdmHeader a.title {
 167         color : black;
 168 }
 169
 170 div.cdm.expandable.active div.cdmHeader a.title {
 171         color: @color-link;
 172         font-size: 16px;
 173         font-weight: 600;
 174         text-rendering: optimizelegibility;
 175         font-family: @fonts-ui-bold;
 176 }
 177
 178 div.cdm.expanded div.cdmHeader {
 179         background : transparent ! important;
 180 }
 181
 182 div.cdm.expanded div.cdmHeader a.title {
 183         font-size : 16px;
 184         color : #999;
 185         font-weight : 600;
 186         transition : color 0.2s, background 0.2s;
 187         text-rendering: optimizelegibility;
 188         font-family : @fonts-ui-bold;
 189 }
 190
 191 div.cdm.expanded.active {
 192         background : white;
 193 }
 194
 195 div.cdm.expanded.active div.cdmHeader a.title {
 196         color : @color-link;
 197 }
 198
 199 div.cdm.expanded.Unread div.cdmHeader a.title {
 200         color : black;
 201 }
 202
 203 div.cdm.expanded div.cdmContent {
 204         color : @default-text;
 205 }
 206
 207 div.cdm.expanded.Unread div.cdmContent {
 208         color : black;
 209 }
 210
 211 div.cdm.active div.cdmContent {
 212         color : black;
 213 }
 214
 215 span.cdmExcerpt {
 216         white-space : nowrap;
 217         font-size : 11px;
 218         color : #999;
 219         font-weight : normal;
 220         cursor : pointer;
 221 }
 222
 223 div.cdmContent div.postEnclosures {
 224         margin-top : 1em;
 225         color : @default-text;
 226 }
 227
 228 div.cdmFeedTitle {
 229         border: 0px solid @color-link;
 230         border-bottom-width: 1px;
 231         padding : 5px 3px 5px 5px;
 232 }
 233
 234 div.cdmFeedTitle a.title {
 235         color : @default-text;
 236         font-weight : bold;
 237 }
 238
 239 div.cdmFeedTitle a {
 240         color : @default-text;
 241 }
 242
 243 div.cdmFeedTitle a:hover {
 244         color : @color-link;
 245 }
 246
 247 div.cdmHeader span.hlFeed {
 248         float : right;
 249         font-weight : normal;
 250         font-style : italic;
 251 }
 252
 253 div.cdmHeader div.hlFeed, div.cdmHeader div.hlFeed a {
 254         vertical-align : middle;
 255         color : @default-text;
 256         font-weight : normal;
 257         font-style : italic;
 258         font-size : 11px;
 259 }
 260
 261 div.cdm .hlFeed a {
 262         border-radius : 4px;
 263         display : inline-block;
 264         padding : 1px 4px 1px 4px;
 265 }
 266
 267 div.cdmContentInner p {
 268         /*max-width : 650px;*/
 269         -webkit-hyphens: auto;
 270         -moz-hyphens: auto;
 271         hyphens: auto;
 272 }
 273
 274 div.cdmContentInner iframe {
 275         min-width : 50%;
 276         max-width : 98%;
 277 }
 278
 279 div.cdmHeader span.author {
 280         white-space : nowrap;
 281         color : @default-text;
 282         font-size : 11px;
 283         font-weight : normal;
 284 }
 285
 286 div#floatingTitle {
 287         position : absolute;
 288         z-index : 5;
 289         top : 0px;
 290         right : 0px;
 291         left : 0px;
 292         border: 0px solid #ddd;
 293         border-bottom-width: 1px;
 294         background : white;
 295         color : @default-text;
 296         box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
 297
 298         > * {
 299                 display : table-cell;
 300                 white-space : nowrap;
 301                 vertical-align : middle;
 302                 padding : 9px 5px;
 303         }
 304
 305         img {
 306                 margin-right : 4px;
 307                 margin-left : 4px;
 308         }
 309
 310         span.author {
 311                 color : @default-text;
 312                 font-size : 11px;
 313                 font-weight : normal;
 314         }
 315
 316         a.title {
 317                 font-size : 16px;
 318                 color : #999;
 319                 transition : color 0.2s, background 0.2s;
 320                 font-weight : 600;
 321                 text-rendering: optimizelegibility;
 322                 font-family : @fonts-ui-bold;
 323         }
 324
 325         img.anchor {
 326                 margin-left : 0px;
 327         }
 328
 329         div.hlFeed {
 330                 padding-right : 10px;
 331                 color : @default-text;
 332                 font-weight : normal;
 333                 font-style : italic;
 334                 font-size : 11px;
 335                 white-space : nowrap;
 336         }
 337
 338         div.hlFeed a {
 339                 border-radius : 4px;
 340                 display : inline-block;
 341                 padding : 1px 4px 1px 4px;
 342         }
 343
 344         span.updated {
 345                 padding-right : 10px;
 346                 white-space : nowrap;
 347                 color : @default-text;
 348                 font-size : 11px;
 349         }
 350
 351         div.hlFeed a {
 352                 color : @default-text;
 353         }
 354
 355         span.titleWrap {
 356                 width : 100%;
 357                 white-space : normal;
 358         }
 359
 360         .dijit,
 361         img.hlScorePic {
 362                 display : none;
 363         }
 364
 365 }
 366
 367 div#floatingTitle.Unread a.title {
 368         color : black;
 369 }
 370
 371 .cdm.high .cdmHeader {
 372         a.title.high,
 373         .cdmExcerpt,
 374         span.author {
 375                 color : #00aa00;
 376         }
 377 }
 378
 379 .cdm.Unread.high .cdmHeader {
 380         a.title.high,
 381         .cdmExcerpt,
 382         span.author {
 383                 color : #00dd00;
 384         }
 385 }
 386
 387 .cdm .cdmHeader a.title.low,
 388 .cdm.low .cdmHeader .cdmExcerpt,
 389 .cdm.Unread .cdmHeader a.title.low,
 390 .cdm.Unread.low .cdmHeader .cdmExcerpt,
 391 .cdm.low .cdmHeader span.author {
 392         color : #909090;
 393         text-decoration : line-through;
 394 }
 395
 396 .cdmFeedTitle {
 397
 398         > * {
 399                 display : table-cell;
 400                 vertical-align : middle;
 401         }
 402
 403         a.title {
 404                 width : 100%;
 405         }
 406
 407         a.catchup {
 408                 text-align : right;
 409                 color : @default-text;
 410                 padding-right : 10px;
 411                 font-size : 11px;
 412                 white-space : nowrap;
 413         }
 414
 415         a.catchup:hover {
 416                 color : @color-link;
 417         }
 418
 419 }