MMM-NewsAPI.css

@keyframes hide {
    0% { opacity:1; }
    100% { opacity:0; }
  }
  
  @keyframes show {
    0% { opacity:0; }
    100% { opacity:1; }
  }
  
  .untouchable .touchable {
    display:none;
  }
  
  .showArticle {
    animation: show linear 1s;
  }
  
  .hideArticle {
    animation: hide linear 1s;
  }
  
  #NEWSAPI {
    line-height:1.1em;
  }
  
  #NEWSAPI .header .title {
    display:block;
    color:#FFF;
    font-size:99%;
  
  }
  
  #NEWSAPI .content {
    padding:10px;
    font-size:90%;
  }
  
  #NEWSAPI .footer {
    text-align:right;
  }
  #NEWSAPI .footer .sourceName,
  #NEWSAPI .footer .publishedAt,
  #NEWSAPI .footer .author {
    font-size:80%;
    text-align:right;
    display:inline-block;
  }
  
  #NEWSAPI .footer .sourceName {
    text-transform: uppercase;
  }
  
  /* custom className */
  #NEWSAPI .redTitle .title {
    color:#F99;
  }
  
  /* Type: Horizontal */
  #NEWSAPI.horizontal {
    width:100%;
  }
  
  #NEWSAPI.horizontal .content {
    text-align:center;
  }
  
  #NEWSAPI.horizontal .content .articleImage {
    margin-right:10px;
    float:left;
    max-width:15vw;
    max-height:15vh;
  }
  
/* Type: Vertical */
  #NEWSAPI.vertical {
    font-size: calc(2vh);
    width:400px;
  }
  
  #NEWSAPI.vertical .content .articleImage {
    max-width:400px;
    max-height:300px;
    margin-left:auto;
    margin-right:auto;
    display:block;
  }
  
  #NEWSAPI.vertical #NEWSAPI_CONTENT {
    padding-bottom:5px;
  }

  #NEWSAPI .article #NEWSAPI_QRCODE {
    float: right;
    margin-left: 20px;
  }