css/cdm.less

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