User:MPossoupe (WMF)/CNB-Option-2

<style> 
.skin-monobook #siteNotice p {
padding-left: 90px !important;
padding-right: 64px !important;
padding-top: 4px !important;
}

#mw-mf-page-center {
background-color: #fff;
}

/* Resets */
.cbnnr * {
margin: 0;
padding: 0;
}

/* Box-sizing */
.cbnnr,
.cbnnr *,
.cbnnr *:before,
.cbnnr *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* Font sizes and line heights */

.cbnnr-message {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, Helvetica Neue, Helvetica, Aria, sans-serif;
font-weight: medium;
font-size: 13px;
line-height: 1.4;
color: #333 !important;
text-align: left;
}

.cbnnr-special .cbnnr-message {
color: #333 !important;
}

.cbnnr-cta {

font-size: 15px;
font-weight: bold;
color: #222;
}

.cbnnr-special .cbnnr-cta {
color: white;
}



@media all and (min-width: 720px) {
.cbnnr-message { 
font-size: 20px; 
line-height: 1.5;
}
.cbnnr-cta { font-size: 20px; }
}

/* Styles */


.cbnnr {
background-color: #fff;
position: relative;
margin-bottom: 12px;
}

/* Hide banner when Wikipedia site search is enabled */
.overlay-enabled .cbnnr {
display: none !important;
}


.cbnnr-main {
position: relative;
clear: both;
padding: 10px;
background-color: white;
border: 1px solid #c8ccd1;
min-height: 88px;
}

.cbnnr-special .cbnnr-main {
background-color: #c8ccd1;
border: none;
}

@media all and (min-width: 720px) {
.cbnnr-main {
padding: 15px;
min-height: 98px;
}
}

.skin-minerva .cbnnr-main {
border: none;
border-bottom: 1px solid #c8ccd1;
}

@media all and (min-width: 1000px) {
.skin-minerva .cbnnr-main {
border: 1px solid #c8ccd1;
margin-top: 20px;
}
}

.cbnnr-message {
display: block;
}

.rtl .cbnnr-message {
text-align:right;
}

.cbnnr-icon {
width: 68px;
height: 68px;
border-radius: 2px;
overflow: hidden;
top: 50%;
position: absolute;
float: left;
transform: translateY(-50%);
left: 10px;
overflow: hidden;
background: #fff;
opacity: 1;
filter: grayscale(0);
}
.rtl .cbnnr-icon {
right: 15px;
}
@media all and (min-width: 720px) {
.cbnnr-icon {
left: 20px;
}
.rtl .cbnnr-icon {
right: 20px;
}
}

.cbnnr-icon-border {
border: 1px solid #c8ccd1;
}

.cbnnr-icon img {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
left: 0;
}

.cbnnr-icon-border img {
max-width: 80%;
max-height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}


.cbnnr-message p {
padding-left: 88px;
padding-right: 64px;
padding-top: 5px;
margin: auto;
}

.rtl .cbnnr-message p {
padding-right: 88px;
padding-left: 64px;
padding-top: 5px;
margin: auto;
}


@media all and (max-width: 720px) {
.cbnnr-message p  {
padding-left: 78px;
padding-right: 54px;
padding-top: 15px;
}
.rtl .cbnnr-message p  {
padding-right: 78px;
padding-left: 54px;
padding-top: 15px;
}
}

@media all and (max-width: 500px) {
.cbnnr-message p  {
padding-left: 5px;
}

.rtl .cbnnr-message p  {
padding-right: 75px;
}

.cbnnr-icon {
display:none;
}

}

@media all and (max-width: 500px) {
.skin-minerva .cbnnr-message p  {
padding-left: 78px;
}

.rtl .skin-minerva .cbnnr-message p  {
padding-left: 0;
padding-right: 78px;
}


.skin-minerva .cbnnr-icon {
display:block;
}

}

@media all and (max-width: 350px) {
.skin-minerva .cbnnr-message p  {
padding-left: 5px;
}


.skin-minerva .cbnnr-icon {
display:none;
}

}
.cbnnr-headline,
.cbnnr-text {
display: block;
}

@media all and (min-width: 720px) {
.cbnnr-headline,
.cbnnr-text {
display: inline;
}
.cbnnr-headline:after {
content: ' | ';
}
}

.cbnnr-cta-container {
/*display: block;*/
}

.cbnnr-cta {
display: inline;
margin-top: 4px;
}

@media all and (min-width: 720px) {
.cbnnr-cta {
margin-top: 2px;
}
}


/* --- Close Options --- */

.cbnnr-close {
cursor: pointer;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
z-index: 1;
opacity: .6;
background: #eaecf0;
border-radius: 50%;
padding: 12px;
width: 44px;
height: 44px;
transition: all .1s ease-in-out;  
}

.cbnnr-special .cbnnr-close {
background: rgba(255,255,255,.5);
opacity: 1;
}

body.rtl .cbnnr-close {
left: 10px;
right: unset;
}

@media all and (min-width: 720px) {
.cbnnr-close   {
right: 15px;
}
body.rtl .cbnnr-close {
left: 15px;
right: unset;
}
}

.cbnnr-close:hover { 
opacity: 1;
}

.cbnnr-special .cbnnr-close:hover  {
background: rgba(255,255,255,.7);
}

.cbnnr-close-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: 20px;
min-width: 20px;
min-height: 20px;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
opacity: 1;
}

.cbnnr-special .cbnnr-close-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 fill=%22%23ffffff%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");
}


.cbnnr-special .cbnnr-close-icon  {
opacity: 1;
}


.cbnnr-special .cbnnr-close-icon {
/* need new svg */
}

#cnotice-translation-link {
position: relative;
text-align: right;
padding: 2px;
font-size: 0.8em;
white-space: nowrap;
}

#cnotice-translation-link::before {
content: '';
background-image: url(/w/extensions/UniversalLanguageSelector/lib/jquery.uls/images/language.svg?80b0b);
background-position: left 0.08333333em;
background-repeat: no-repeat;
background-size: 1.3em 1.3em;
padding-top: 0.2em;
padding-left: 1.66666667em;
margin-right: 2px;
opacity: 0.67;
}

#cnotice-translation-link:hover {
text-decoration: underline;
}

.rtl #cnotice-translation-link {
text-align: left;
left: 65px;
}

a.cbnnr-cta-link{
text-decoration: none;
border-bottom: 2px solid #222 ;
}

.cbnnr-cta:hover{
border-bottom: 2px solid #222 ;
}

.cbnnr-close:hover + .cbnnr-message .cbnnr-cta {
border-bottom: none;
}

#cbnnr-footnote {
text-align: right;
}

#cbnnr-disclaimer {
position: relative;
display: inline;
padding-right: 5px;
width: 100%;
left: 0;
right: 0;
text-align: center;
font-size: 0.8em;
}

</style>

<div class="cbnnr" id="board-of-trustees_vote" style="display: block;">
<div class="cbnnr-container">

<div class="cbnnr-main" id="banner1">
<div class="cbnnr-close" href="#" title="Hide" onclick="mw.centralNotice.hideBanner(); return false;">
    <div class="cbnnr-close-icon"></div>
</div>
<div class="cbnnr-message fade">

    <figure class="cbnnr-icon ">
        <img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Wikimedia-logo_black.svg/45px-Wikimedia-logo_black.svg.png" alt="">
    </figure>

    <p>
        <span class="cbnnr-text">{{{text1}}}</span>
        <span class="cbnnr-cta-container"><a class="cbnnr-cta-link" href="https://meta.wikimedia.org/wiki/Wikimedia_Foundation_elections/2024/Voter_information?wprov=cnbw1"> <span class="cbnnr-cta">{{{text2}}}</span></a><span>
    </span></span></p>

</div>
</div>

</div>
<div id="cbnnr-footnote">
<p>
<span style="display:none;">|</span>
<span id="cnotice-translation-link" style="">
  <a href="https://meta.wikimedia.org/w/index.php?title=Special:Translate&group=Centralnotice-tgroup-2024_board_election_v2&task=view&language=en&filter=%21translated&action=translate"> Help with translations! </a>
</span>
</p>
</div>
</div>
<script>
var cbnnr = cbnnr || {};

cbnnr.show = function() {
$('.cbnnr').css('display', 'block');
};

$(function() {


if ( !mw.centralNotice.bannerData.hideResult ) {
cbnnr.show();
}

});

$(document).ready(function() {
 
  if ( mw.config.get( 'wgUserEditCount' ) < 300 ) { // don't show the banner for users with less than 300 local edits
    $( '#centralNotice' ).css('display', 'none');
  }
 
});
</script>