User:MPossoupe (WMF)/CNB-tests

V1

<style>
  #comms-wnw-main-container {
    display: table;
    width: 100%;
    height: 152px;
    position: relative;
    overflow: hidden;
    background: #D5D1EC;
    border: 1px solid #a2a9b1;
    border-radius: 2px;
    margin-bottom: 1em;
    cursor: pointer;
    color: #000000;
  }

  #comms-wnw-main-container a {
    display: table;
    vertical-align: middle;
    position: relative;
    height: 152px;
    width: 100%;
    vertical-align: middle;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/25/Purple_Paper_Texture.png);
    background-size: cover;
    background-position: center;
    color: #000000;
    cursor: pointer;
    text-decoration: none;
  }

  body.skin-minerva #comms-wnw-main-container {
    height: 152px;
  }

  #comms-wnw-left-image-container {
    display: table-cell;
    height: 100%;
    width: 360.55px;
    padding-left: 10px;
    padding-right: 10px;
  }

  #comms-wnw-left-image-container img {
    position: absolute;
    width: 360.55px;
    height: 127px;
    top: 40px;
    left: 12px;

  }

  #comms-wnw-main-text-container {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    text-align: center;
  }

  #comms-wnw-main-text-container #comms-wnw-text-containter {
    display: inline-block;
  }

  #comms-wnw-main-text-container p {
    color: #000000;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 23px;
    line-height: 1.3em;
    text-align: left;
  }

  #comms-wnw-main-text-container p span {
    font-weight: bold;
  }

  #comms-wnw-right-logo-container {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
  }

  #comms-wnw-main-text-container a {
    color: #000000;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
  }

  #comms-wnw-main-text-container a:hover {
    text-decoration: underline;
  }

  #comms-wnw-right-logo-container {
    width: 99px;
    padding-right: 20px;
  }

  #comms-wnw-toggle-box-options {
    display: table-cell;
    font-size: .8em;
    text-transform: uppercase;
    width: 38px;
    height: 38px;
    border-radius: 19px;
    vertical-align: middle;
    border-radius: 50%;
    border: solid;
    padding: 2;
    background: #FFF;
  }

  #comms-wnw-toggle-box {
    cursor: pointer;
    position: absolute;
    top: 2px;
    right: 3px;
    z-index: 1;
    opacity: .8;
    border-radius: 50%;
    padding: 2;
    background: #FFF;
  }

  body.rtl #comms-wnw-toggle-box {
    left: 3px;
    right: unset;
  }

  #comms-wnw-toggle-box:hover {
    opacity: 1;
  }

  #comms-wnw-toggle-icon {
    background:
      linear-gradient(transparent, transparent),
      url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d=%22M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z%22/%3E%3Cpath d=%22M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z%22/%3E%3C/svg%3E");
        height: 100%;
        width: 17px;
        min-width: 17px;
        min-height: 17px;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        opacity: 0.8;
    }

    #comms-wnw-toggle-icon:hover {
      opacity: 1;
    }

    /* Media queries */

    @media (min-width: 320px) and (max-width: 480px){
        #comms-wnw-left-image-container, #comms-wnw-left-image-container img {
            display: none;
      }
      
      #comms-wnw-main-text-container p {
    color: #000000;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 21px;
    line-height: 1.4em;
    text-align: left;
}
    }


    @media (min-width: 768px) and (max-width: 1024px) {
        #comms-wnw-left-image-container, #comms-wnw-left-image-container img {
            display: block;
          top: 40px;
      }
    }
    

</style>

<div id="comms-wnw-main-container" dir="ltr">
  <a href="https://meta.wikimedia.org/wiki/Celebrate_Women" target="_blank">
    <div id="comms-wnw-left-image-container">
      <img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Women%27s_History_Month_Central_Notice_Banner_Collage_02.png" alt="Wikipedia Needs More Women">
    </div>
    <div id="comms-wnw-main-text-container">
      <div id="comms-wnw-text-containter">
        <p><b>Join us to Celebrate Women!</b> <br /> Help close the knowledge gender gap on Wikimedia this March: <br />
          <span> <b>click here and see what you can do.</b></span>
        </p>
      </div>
    </div>
    <!--<div id="comms-wnw-right-logo-container">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Wikimedia_Foundation_logo_-_vertical.svg" alt="Wikimedia Foundation Logo">
    </div>-->
    <div id="comms-wnw-toggle-box">
      <div id="comms-wnw-toggle-icon" href="#" title="{{int:centralnotice-shared-hide}}" onclick="mw.centralNotice.hideBanner();return false;"></div>
    </div>
  </a>
</div>

V2

<style type="text/css">
    #iwd {
        padding: 0;
        width: 100%;
        margin-bottom: 1em;
        position: relative;
        font-family: Inter, Helvetica, Arial, sans-serif;
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/25/Purple_Paper_Texture.png');
      background-repeat: no-repeat;
        background-size: cover;
        background-position: 40% 47%;
    }
    
    #mw-mf-viewport #iwd {
        margin-bottom: 0!important;
    }
    
    #iwd>a {
        display: table;
        table-layout: fixed;
        border: 1px solid rgba(0, 0, 0, 0.3);
        text-align: left;
        width: 100%;
        padding: 0;
        box-shadow: 0.1em 0.1em 0.6em 0 rgba(0, 0, 0, 0.4);
        transition: box-shadow 0.3s;
        height: 3em;
        text-decoration: none;
    }
    
    #iwd>a:hover {
        text-decoration: underline;
      text-decoration-color:#000;
        box-shadow: 0.06em 0.06em 0.4em 0 rgba(0, 0, 0, 0.7);
    }
    
    #iwd,
    #iwd * {
        box-sizing: border-box;
    }
    
    #iwd>a>* {
        display: table-cell;
        vertical-align: middle;
        /*padding: 0.7em 1.5em;*/
    }
    
    #iwd>a .iwd-logo {
        width: 15em;
        height: 6em;
        text-indent: -1000em;
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/02/Women%27s_History_Month_Central_Notice_Banner_Collage_02.png');
        background-repeat: repeat;
        background-size: contain;
        background-position: 40% 47%;
    }
    
    #iwd .iwd-cta {
        position: relative;
        width: 18em;
        padding-right: 1.5em;
    }
  
  #iwd .iwd-cta p{
    font-size:1em;
    color: #000;
    line-height: 1.5;
    padding-left: 5.2em;
    font-family: Inter, Helvetica, Arial, sans-serif;
  }
  
  #iwd .iwd-cta p span{
    font-weight: bold;
  }
    
    #iwd .iwd-close {
        position: absolute;
        right: 0.4em;
        top: 0.4em;
    }
    
    .banner-container {
        margin: 0;
        max-width: 100%;
    }
  
  /* Media queries */

  @media (min-width: 320px) and (max-width: 480px){
    #iwd > a .iwd-logo {
      display:none;
    }
    #iwd .iwd-cta p{
    padding-left: 1.2em;
  }
  }
  
  @media (min-width: 768px) and (max-width: 1024px) {
    #iwd>a .iwd-logo {
        background-repeat: no-repeat;
  }
    #iwd .iwd-cta p{
    padding-left: 1.2em;
  }
  }
</style>

<div id="iwd">
    <a href="https://meta.wikimedia.org/wiki/Celebrate_Women" target="_blank">
        <div class="iwd-logo"></div>
        <div class="iwd-cta"><p><b>Join us to Celebrate Women!</b> <br /> Help close the knowledge gender gap on Wikimedia this March: <br />
          <span> <b>click here and see what you can do.</b></span>
        </p></div>
    </a>
    <div id="cn-toggle-box" class="iwd-close">
        <a href="#" title="{{int:centralnotice-shared-hide}}" onclick="mw.centralNotice.hideBanner();return false;">
            <img border="0" src="https://upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="{{int:centralnotice-shared-hide}}" /></a>
    </div>
</div>

V3

<style type="text/css">
    #iwd {
        padding: 0;
        width: 80%;
        margin-bottom: 1em;
      margin:auto;
        position: relative;
        font-family: Inter, Helvetica, Arial, sans-serif;
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/25/Purple_Paper_Texture.png');
      background-repeat: no-repeat;
        background-size: cover;
        background-position: 40% 47%;
    }
    
    #mw-mf-viewport #iwd {
        margin-bottom: 0!important;
    }
    
    #iwd>a {
        display: table;
        table-layout: fixed;
        border: 1px solid rgba(0, 0, 0, 0.3);
        text-align: left;
        width: 100%;
        padding: 0;
        box-shadow: 0.1em 0.1em 0.6em 0 rgba(0, 0, 0, 0.4);
        transition: box-shadow 0.3s;
        height: 3em;
        text-decoration: none;
    }
    
    #iwd>a:hover {
        text-decoration: underline;
        text-decoration-color:#000;
        box-shadow: 0.06em 0.06em 0.4em 0 rgba(0, 0, 0, 0.7);
    }
    
    #iwd,
    #iwd * {
        box-sizing: border-box;
    }
    
    #iwd>a>* {
        display: table-cell;
        vertical-align: middle;
        /*padding: 0.7em 1.5em;*/
    }
    
    #iwd>a .iwd-logo {
        width: 10em;
        height: 6em;
        text-indent: -1000em;
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/02/Women%27s_History_Month_Central_Notice_Banner_Collage_02.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 40% 47%;
    }
    
    #iwd .iwd-cta {
        position: relative;
        width: 18em;
        padding-right: 1.5em;
    }
  
  #iwd .iwd-cta p{
    font-size:1.1em;
    color: #000;
    line-height: 1.5;
    padding-left: 5.2em;
    font-family: Inter, Helvetica, Arial, sans-serif;
  }
  
  #iwd .iwd-cta p span{
    font-weight: bold;
  }
    
    #iwd .iwd-close {
        position: absolute;
        right: 0.4em;
        top: 0.4em;
    }
    
    .banner-container {
        margin: 0;
        max-width: 100%;
    }
  
  #cnotice-translation-link {
    position: absolute;
    right: 40px;
    bottom: 10px;
    font-size: 0.8em;
    white-space: nowrap;
}

#cnotice-translation-link > a {
    padding: 0 5px;
}

#cnotice-translation-link:hover {
    text-decoration: underline;
}
  
  /* Media queries */

  @media (min-width: 320px) and (max-width: 480px){
    #iwd > a .iwd-logo {
      display:none;
    }
    #iwd .iwd-cta p{
      padding-left: 1.2em;
      padding-bottom: 5px;
  }
    #iwd {
        padding: 0;
        width: 100%;
    }
    
     #cnotice-translation-link {
    bottom: 5px;
}
  }
  
  @media (min-width: 768px) and (max-width: 1024px) {
    #iwd>a .iwd-logo {
        background-repeat: no-repeat;
  }
    #iwd .iwd-cta p{
    padding-left: 1.5em;
  }
    #iwd {
        padding: 0;
        width: 100%;
    }
  }
</style>

<div id="iwd">
    <a href="https://meta.wikimedia.org/wiki/Celebrate_Women" target="_blank">
        <div class="iwd-logo"></div>
        <div class="iwd-cta"><p><b>{{{headline}}}</b> <br /> {{{text}}} <br />
          <span> <b>{{{cta}}}</b></span>
        </p></div>
    </a>
    <div id="cn-toggle-box" class="iwd-close">
        <a href="#" title="{{int:centralnotice-shared-hide}}" onclick="mw.centralNotice.hideBanner();return false;">
            <img border="0" src="https://upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="{{int:centralnotice-shared-hide}}" /></a>
    </div>
  <div id="cnotice-translation-link">
        [<a id="cn-translation-link" href="//meta.wikimedia.org/wiki/Special:Translate?action=translate&group=Centralnotice-tgroup-IWD2023">Help translate</a>] 
    </div>
  
</div>

<script>
  $(function() {
    var language = mw.centralNotice.data.uselang;
    var country  = mw.centralNotice.data.country;

});
  
$( document ).ready(function() {
$("a#cn-translation-link").attr("href", "//meta.wikimedia.org/wiki/Special:Translate?action=translate&group=Centralnotice-tgroup-IWD2023" + "&uselang=" + mw.config.get('wgPageContentLanguage'))
});
</script>

V4

<style type="text/css">
    #iwd {
        padding: 0;
        width: 100%;
        margin-bottom: 1em;
      margin:auto;
        position: relative;
        font-family: Inter, Helvetica, Arial, sans-serif;
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/25/Purple_Paper_Texture.png');
      background-repeat: no-repeat;
        background-size: cover;
        background-position: 40% 47%;
    }
    
    #mw-mf-viewport #iwd {
        margin-bottom: 0!important;
    }
    
    #iwd>a {
        display: table;
        table-layout: fixed;
        border: 1px solid rgba(0, 0, 0, 0.3);
        text-align: left;
        width: 100%;
        padding: 0;
        box-shadow: 0.1em 0.1em 0.6em 0 rgba(0, 0, 0, 0.4);
        transition: box-shadow 0.3s;
        height: 3em;
        text-decoration: none;
    }
    
    #iwd>a:hover {
        text-decoration: underline;
        text-decoration-color:#000;
        box-shadow: 0.06em 0.06em 0.4em 0 rgba(0, 0, 0, 0.7);
    }
    
    #iwd,
    #iwd * {
        box-sizing: border-box;
    }
    
    #iwd>a>* {
        display: table-cell;
        vertical-align: middle;
        /*padding: 0.7em 1.5em;*/
    }
    
    #iwd>a .iwd-logo {
        width: 10em;
        height: 6em;
        text-indent: -1000em;
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/02/Women%27s_History_Month_Central_Notice_Banner_Collage_02.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 40% 47%;
    }
    
    #iwd .iwd-cta {
        position: relative;
        width: 18em;
        padding-right: 1.5em;
    }
  
  #iwd .iwd-cta p{
    font-size:1.1em;
    color: #000;
    line-height: 1.5;
    padding-left: 5.2em;
    font-family: Inter, Helvetica, Arial, sans-serif;
  }
  
  #iwd .iwd-cta p span{
    font-weight: bold;
  }
    
    #iwd .iwd-close {
        position: absolute;
        right: 0.4em;
        top: 0.4em;
    }
    
    .banner-container {
        margin: 0;
        max-width: 100%;
    }
  
  /* Media queries */

  @media (min-width: 320px) and (max-width: 480px){
    #iwd > a .iwd-logo {
      display:none;
    }
    #iwd .iwd-cta p{
    padding-left: 1.2em;
  }
    #iwd {
        padding: 0;
        width: 100%;
    }
  }
  
  @media (min-width: 768px) and (max-width: 1024px) {
    #iwd>a .iwd-logo {
        background-repeat: no-repeat;
  }
    #iwd .iwd-cta p{
    padding-left: 1.5em;
  }
    #iwd {
        padding: 0;
        width: 100%;
    }
  }
</style>

<div id="iwd">
    <a href="https://meta.wikimedia.org/wiki/Celebrate_Women" target="_blank">
        <div class="iwd-logo"></div>
        <div class="iwd-cta"><p><b>Join us to Celebrate Women!</b> <br /> Help close the knowledge gender gap on Wikimedia this March: <br />
          <span> <b>click here and see what you can do.</b></span>
        </p></div>
    </a>
    <div id="cn-toggle-box" class="iwd-close">
        <a href="#" title="{{int:centralnotice-shared-hide}}" onclick="mw.centralNotice.hideBanner();return false;">
            <img border="0" src="https://upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="{{int:centralnotice-shared-hide}}" /></a>
    </div>
</div>

<script>
$( document ).ready(function() {
$("a#cn-translation-link").attr("href", "//meta.wikimedia.org/wiki/Special:Translate?action=translate&group=Centralnotice-tgroup-IWD2023" + "&uselang=" + mw.config.get('wgPageContentLanguage'))
});
</script>