css/cdm.less

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