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