css/cdm.less

   1 @fonts-ui-bold: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
   2 @fonts-ui:  "Segoe UI Web", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
   3
   4 .cdm {
   5         margin-right : 4px;
   6
   7         .cdmHeader, .cdmFooter {
   8                 display : table;
   9         }
  10
  11         .cdmHeader img, .cdmHeader input, .cdmFooter img {
  12                 vertical-align : middle;
  13         }
  14
  15         .cdmHeader > div, .cdmFooter > div {
  16                 white-space : nowrap;
  17         }
  18
  19         .cdmHeader > span, .cdmFooter > span.left {
  20                 width : 100%;
  21         }
  22
  23         .cdmHeader img, .cdmFooter img {
  24                 margin : 0px 4px;
  25         }
  26
  27         .cdmHeader {
  28                 > * {
  29                         display : table-cell;
  30                         padding : 5px;
  31                 }
  32
  33                 span.updated {
  34                         color : #555;
  35                         font-weight : normal;
  36                         font-size : 11px;
  37                         white-space : nowrap;
  38                         vertical-align : middle;
  39                 }
  40
  41                 input {
  42                         margin-right : 5px;
  43                 }
  44
  45                 div.updPic {
  46                         width : 25px;
  47                         display : inline-block;
  48                         text-align : center;
  49                 }
  50
  51                 div.updPic img {
  52                         vertical-align : middle;
  53                 }
  54
  55                 input {
  56                         margin-left : 4px;
  57                         margin-right : 4px;
  58                 }
  59         }
  60
  61         .cdmFooter {
  62                 height : 30px;
  63                 padding-left : 5px;
  64                 font-weight : normal;
  65                 color : #555;
  66                 clear : both;
  67
  68                 > * {
  69                         display : table-cell;
  70                         vertical-align : middle;
  71                 }
  72         }
  73
  74         .cdmIntermediate {
  75                 margin : 10px;
  76         }
  77
  78         .cdmContentInner {
  79                 margin : 10px;
  80                 line-height : 1.5;
  81                 font-size : 16px;
  82
  83                 h1 {
  84                         font-size : 16px;
  85                 }
  86
  87                 h2,
  88                 h3,
  89                 h4 {
  90                         font-size : 15px;
  91                 }
  92
  93         }
  94
  95         .cdmIntermediate img,
  96         .cdmIntermediate video,
  97         .cdmContentInner img,
  98         .cdmContentInner video {
  99                 border-width : 0px;
 100                 max-width : 98%;
 101                 height : auto;
 102         }
 103 }
 104
 105 .cdm.expanded {
 106         margin-top : 4px;
 107         margin-bottom : 4px;
 108
 109         .cdmFooter {
 110                 border: 0px solid #ddd;
 111                 border-bottom-width: 1px;
 112         }
 113
 114         > hr {
 115                 margin-top : 0px;
 116                 margin-bottom : 0px;
 117         }
 118
 119 }
 120
 121 .cdm.expandable {
 122         background-color : #f0f0f0;
 123         border: 0px solid #ddd;
 124         border-bottom-width: 1px;
 125
 126         > hr {
 127                 display : none;
 128         }
 129
 130         div.cdmHeader span.titleWrap {
 131                 white-space : nowrap;
 132                 text-overflow : ellipsis;
 133                 overflow : hidden;
 134                 max-width : 500px;
 135         }
 136 }
 137
 138 .cdm.expandable.Unread {
 139         background : white;
 140 }
 141
 142 .cdm.expandable.Selected {
 143         background : #f9fbff;
 144 }
 145
 146 .cdm.expandable.active {
 147         background : white ! important;
 148 }
 149
 150 div.cdm.expandable.active div.cdmHeader span.titleWrap {
 151         white-space : normal;
 152 }
 153
 154 div.cdm.expandable div.cdmHeader a.title {
 155         font-weight : 600;
 156         color : #555;
 157         font-size : 14px;
 158         -webkit-transition : color 0.2s;
 159         transition : color 0.2s;
 160         text-rendering: optimizelegibility;
 161         font-family : @fonts-ui-bold;
 162 }
 163
 164 div.cdm.expandable.Unread div.cdmHeader a.title {
 165         color : black;
 166 }
 167
 168 div.cdm.expandable.active div.cdmHeader a.title {
 169         color: #0088cc;
 170         font-size: 16px;
 171         font-weight: 600;
 172         text-rendering: optimizelegibility;
 173         font-family: @fonts-ui-bold;
 174 }
 175
 176 div.cdm.expanded div.cdmHeader {
 177         background : transparent ! important;
 178 }
 179
 180 div.cdm.expanded div.cdmHeader a.title {
 181         font-size : 16px;
 182         color : #999;
 183         font-weight : 600;
 184         -webkit-transition : color 0.2s;
 185         transition : color 0.2s;
 186         text-rendering: optimizelegibility;
 187         font-family : @fonts-ui-bold;
 188 }
 189
 190 div.cdm.expanded.active {
 191         background : white;
 192 }
 193
 194 div.cdm.expanded.active div.cdmHeader a.title {
 195         color : #0088cc;
 196 }
 197
 198 div.cdm.expanded.Unread div.cdmHeader a.title {
 199         color : black;
 200 }
 201
 202 div.cdm.expanded div.cdmContent {
 203         color : #555;
 204 }
 205
 206 div.cdm.expanded.Unread div.cdmContent {
 207         color : black;
 208 }
 209
 210 div.cdm.active div.cdmContent {
 211         color : black;
 212 }
 213
 214 span.cdmExcerpt {
 215         white-space : nowrap;
 216         font-size : 11px;
 217         color : #999;
 218         font-weight : normal;
 219         cursor : pointer;
 220 }
 221
 222 div.cdmContent div.postEnclosures {
 223         margin-top : 1em;
 224         color : #555;
 225 }
 226
 227 div.cdmFeedTitle {
 228         border: 0px solid #0088cc;
 229         border-bottom-width: 1px;
 230         padding : 5px 3px 5px 5px;
 231 }
 232
 233 div.cdmFeedTitle a.title {
 234         color : #555;
 235         font-weight : bold;
 236 }
 237
 238 div.cdmFeedTitle a {
 239         color : #555;
 240 }
 241
 242 div.cdmFeedTitle a:hover {
 243         color : #0088cc;
 244 }
 245
 246 div.cdmHeader span.hlFeed {
 247         float : right;
 248         font-weight : normal;
 249         font-style : italic;
 250 }
 251
 252 div.cdmHeader div.hlFeed, div.cdmHeader div.hlFeed a {
 253         vertical-align : middle;
 254         color : #555;
 255         font-weight : normal;
 256         font-style : italic;
 257         font-size : 11px;
 258 }
 259
 260 div.cdm .hlFeed a {
 261         border-radius : 4px;
 262         display : inline-block;
 263         padding : 1px 4px 1px 4px;
 264 }
 265
 266 div.cdmContentInner p {
 267         /*max-width : 650px;*/
 268         -webkit-hyphens: auto;
 269         -moz-hyphens: auto;
 270         hyphens: auto;
 271 }
 272
 273 div.cdmContentInner iframe {
 274         min-width : 50%;
 275         max-width : 98%;
 276 }
 277
 278 div.cdmHeader span.author {
 279         white-space : nowrap;
 280         color : #555;
 281         font-size : 11px;
 282         font-weight : normal;
 283 }
 284
 285 div#floatingTitle {
 286         position : absolute;
 287         z-index : 5;
 288         top : 0px;
 289         right : 0px;
 290         left : 0px;
 291         border: 0px solid #ddd;
 292         border-bottom-width: 1px;
 293         background : white;
 294         color : #555;
 295         box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
 296
 297         > * {
 298                 display : table-cell;
 299                 white-space : nowrap;
 300                 vertical-align : middle;
 301                 padding : 9px 5px;
 302         }
 303
 304         img {
 305                 margin-right : 4px;
 306                 margin-left : 4px;
 307         }
 308
 309         span.author {
 310                 color : #555;
 311                 font-size : 11px;
 312                 font-weight : normal;
 313         }
 314
 315         a.title {
 316                 font-size : 16px;
 317                 color : #999;
 318                 -webkit-transition : color 0.2s;
 319                 transition : color 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 : #555;
 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 : #555;
 348                 font-size : 11px;
 349         }
 350
 351         div.hlFeed a {
 352                 color : #555;
 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 : #555;
 410                 padding-right : 10px;
 411                 font-size : 11px;
 412                 white-space : nowrap;
 413         }
 414
 415         a.catchup:hover {
 416                 color : #0088cc;
 417         }
 418
 419 }