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         .footer {
 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 div.cdm.expanded div.header {
 119         background : transparent ! important;
 120 }
 121
 122 div.cdm.expanded div.header a.title {
 123         font-size : 16px;
 124         color : #999;
 125         font-weight : 600;
 126         transition : color 0.2s, background 0.2s;
 127         text-rendering: optimizelegibility;
 128         font-family : @fonts-ui-bold;
 129 }
 130
 131 div.cdm.expanded.active {
 132         background : white;
 133 }
 134
 135 div.cdm.expanded.active div.header a.title {
 136         color : @color-link;
 137 }
 138
 139 div.cdm.expanded.Unread div.header a.title {
 140         color : black;
 141 }
 142
 143 div.cdm.expanded div.content {
 144         color : @default-text;
 145 }
 146
 147 div.cdm.expanded.Unread div.content {
 148         color : black;
 149 }
 150
 151 div.cdm.active div.content {
 152         color : black;
 153 }
 154
 155 .cdm {
 156         div.content div.postEnclosures {
 157                 margin-top: 1em;
 158                 color: @default-text;
 159         }
 160
 161         div.feed-title {
 162                 border: 0px solid @color-link;
 163                 border-bottom-width: 1px;
 164                 padding: 5px 3px 5px 5px;
 165         }
 166
 167         div.feed-title a.title {
 168                 color: @default-text;
 169                 font-weight: bold;
 170         }
 171
 172         div.feed-title a {
 173                 color: @default-text;
 174         }
 175
 176         div.feed-title a:hover {
 177                 color: @color-link;
 178         }
 179
 180         div.header span.feed {
 181                 float: right;
 182                 font-weight: normal;
 183                 font-style: italic;
 184         }
 185
 186         div.header div.feed, div.header div.feed a {
 187                 vertical-align: middle;
 188                 color: @default-text;
 189                 font-weight: normal;
 190                 font-style: italic;
 191                 font-size: 11px;
 192         }
 193
 194         div.content-inner p {
 195                 /*max-width : 650px;*/
 196                 -webkit-hyphens: auto;
 197                 -moz-hyphens: auto;
 198                 hyphens: auto;
 199         }
 200
 201         div.content-inner iframe {
 202                 min-width : 50%;
 203                 max-width : 98%;
 204         }
 205
 206         div.header span.author {
 207                 white-space : nowrap;
 208                 color : @default-text;
 209                 font-size : 11px;
 210                 font-weight : normal;
 211         }
 212
 213         .feed a {
 214                 border-radius : 4px;
 215                 display : inline-block;
 216                 padding : 1px 4px 1px 4px;
 217         }
 218 }
 219
 220 div#floatingTitle {
 221         position : absolute;
 222         z-index : 5;
 223         top : 0px;
 224         right : 0px;
 225         left : 0px;
 226         border: 0px solid #ddd;
 227         border-bottom-width: 1px;
 228         background : white;
 229         color : @default-text;
 230         box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
 231
 232         > * {
 233                 display : table-cell;
 234                 white-space : nowrap;
 235                 vertical-align : middle;
 236                 padding : 9px 5px;
 237         }
 238
 239         img {
 240                 margin-right : 4px;
 241                 margin-left : 4px;
 242         }
 243
 244         span.author {
 245                 color : @default-text;
 246                 font-size : 11px;
 247                 font-weight : normal;
 248         }
 249
 250         a.title {
 251                 font-size : 16px;
 252                 color : #999;
 253                 transition : color 0.2s, background 0.2s;
 254                 font-weight : 600;
 255                 text-rendering: optimizelegibility;
 256                 font-family : @fonts-ui-bold;
 257         }
 258
 259         img.anchor {
 260                 margin-left : 0px;
 261         }
 262
 263         div.feed {
 264                 padding-right : 10px;
 265                 color : @default-text;
 266                 font-weight : normal;
 267                 font-style : italic;
 268                 font-size : 11px;
 269                 white-space : nowrap;
 270         }
 271
 272         div.feed a {
 273                 border-radius : 4px;
 274                 display : inline-block;
 275                 padding : 1px 4px 1px 4px;
 276         }
 277
 278         span.updated {
 279                 padding-right : 10px;
 280                 white-space : nowrap;
 281                 color : @default-text;
 282                 font-size : 11px;
 283         }
 284
 285         div.feed a {
 286                 color : @default-text;
 287         }
 288
 289         span.titleWrap {
 290                 width : 100%;
 291                 white-space : normal;
 292         }
 293
 294         .dijit,
 295         img.score-pic {
 296                 display : none;
 297         }
 298
 299         .feed-title {
 300                 > * {
 301                         display : table-cell;
 302                         vertical-align : middle;
 303                 }
 304
 305                 a.title {
 306                         width : 100%;
 307                 }
 308
 309                 a.catchup {
 310                         text-align : right;
 311                         color : @default-text;
 312                         padding-right : 10px;
 313                         font-size : 11px;
 314                         white-space : nowrap;
 315                 }
 316
 317                 a.catchup:hover {
 318                         color : @color-link;
 319                 }
 320
 321         }
 322 }
 323
 324 div#floatingTitle.Unread a.title {
 325         color : black;
 326 }
 327
 328 .cdm.high .header {
 329         a.title.high,
 330         .cdmExcerpt,
 331         span.author {
 332                 color : #00aa00;
 333         }
 334 }
 335
 336 .cdm.Unread.high .header {
 337         a.title.high,
 338         .cdmExcerpt,
 339         span.author {
 340                 color : #00dd00;
 341         }
 342 }
 343
 344 .cdm .header a.title.low,
 345 .cdm.low .header .cdmExcerpt,
 346 .cdm.Unread .header a.title.low,
 347 .cdm.Unread.low .header .cdmExcerpt,
 348 .cdm.low .header span.author {
 349         color : #909090;
 350         text-decoration : line-through;
 351 }
 352