MediaWiki:Centralnotice-template-Election2017 BoardSubmission
<style>
/* Main banner container. Banner: background gradient, border colour and width and adding a margin between banner and article header*/ /* Important -- background gradient -- If you change one you must change all*/ .cnotice {
position: relative; overflow: hidden; background: -moz-linear-gradient(top, rgba(251,250,249,1) 0%, rgba(254,254,253,1) 20%, rgba(254,254,253,1) 23%, rgba(254,254,253,1) 27%, rgba(240,240,240,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(251,250,249,1) 0%, rgba(254,254,253,1) 20%, rgba(254,254,253,1) 23%, rgba(254,254,253,1) 27%, rgba(240,240,240,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(251,250,249,1) 0%, rgba(254,254,253,1) 20%, rgba(254,254,253,1) 23%, rgba(254,254,253,1) 27%, rgba(240,240,240,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */ border: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: 1em; cursor: pointer; color: #222; font-weight: 500; margin-bottom: 10px;
}
/* Sets the minimum banner height. If img + logo-container margins > height. Banner will be larger*/
- cnotice-main {
display: table; width: 100%; height: 80px; /* need to set height for height 100% to work on elements within it */
}
.cnotice-message-container, .cnotice-logo-container {
display: table-cell; height: 100%; vertical-align: middle;
}
/* --- Main message --- */ .cnotice-message {
position: relative; margin: 0; color: #4D4D4D; line-height: 1.2; font-weight: bold; padding: 11px 10px 11px 10px;
}
@media (min-width: 1200px) {
.cnotice-message { padding: 11px 180px 11px 10px; }
}
body.rtl .cnotice-message {
padding: 11px 40px 11px 140px; background-position: right 10px top 10px;
}
.cnotice-message p {
margin: 0; font-family: Arial, sans-serif; font-style: bold; font-size: 14px; opacity: 1; text-align: center; padding-top: 10px; padding-bottom: 10px;
}
@media (min-width: 1200px) {
.cnotice-message p { font-size: 16px; }
}
/* --- Logo Image text --- */
.cnotice-logo-container {
width: 10%; padding: .5em 1.25em .5em .9em;
}
body.rtl .cnotice-logo-container {
padding: .5em 1.25em .5em .9em
}
.cnotice-logo-container img {
opacity: 0.6; display: block; margin: 0 auto;
}
/* --- Close Options --- */
- cnotice-toggle-box-options {
display: inline-block; position: absolute; right: .5em; top: .5em; font-size: .8em; text-transform: uppercase;
}
body.rtl #cnotice-toggle-box-options {
right: auto; left: .5em;
}
- cnotice-toggle-box {
display: inline-block; cursor: pointer; opacity: .5;
}
- cnotice-toggle-box:hover { opacity: 1; }
- cnotice-toggle-box-x {
background: url('//upload.wikimedia.org/wikipedia/donate/3/32/Close-thin.png') no-repeat center center; width: 9px; height: 9px; float: right; display: block; margin: .2em .4em;
}
body.rtl #cnotice-toggle-box-x {
float: left;
}
/* --- Full Banner Link --- */ .cnotice a.cnotice-full-banner-click {
display: block; height: 100%; width: 100%; cursor: pointer; text-decoration: none;
}
.cnotice a.cnotice-full-banner-click:hover {
text-decoration: underline
}
.cnotice-button {
background-color: #4caf50; /* Green */ border: none; display: none; border-radius: 4px; color: white; padding: 10px 10px; text-align: center; font-weight: bold; text-decoration: none; font-size: 12px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; z-index: 999;
}
@media (min-width: 1200px) {
.cnotice-button { display: inline-block; }
} @media (max-width: 1200px) {
.cnotice-button { width: 25%; margin: auto; margin-top: 10px; }
}
/* --- Buttons --- */ .cnotice a.cnotice-buttonlink {
cursor: pointer; text-decoration: none; color: black;
}
.cnotice a.cnotice-buttonlink:hover {
color: white;
}
.cnotice-button1 {
background-color: #0082c0; color: white; position: static; top: 45%; right: 23px; transform: translateY(-25%); min-width: 110px;
}
.rtl .cnotice-button1 {
left: 23px; right: auto;
} @media (min-width: 1200px) { .cnotice-button1 { position: absolute; } }
.cnotice-button1:hover {
background-color: #447FF5;
}
- cnotice-translation-link {
position: absolute; right: 95px; top: 5px; font-size: 0.8em; white-space: nowrap;
}
- cnotice-translation-link:hover {
text-decoration: underline;
}
.rtl #cnotice-translation-link {
text-align: left; left: 95px;
} </style>
<a class="cnotice-full-banner-click external text" href="//meta.wikimedia.org/wiki/Wikimedia_Foundation_elections/2017/Board_of_Trustees">
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Wikimedia-logo_black.svg/45px-Wikimedia-logo_black.svg.png" alt="Banner logo">
</a><a class="cnotice-buttonlink" href="//meta.wikimedia.org/wiki/Wikimedia_Foundation_elections/2017/Board_of_Trustees"> </a>
Close
<a href="//meta.wikimedia.org/w/index.php?title=Special:Translate&group=Centralnotice-tgroup-Election2017_BoardSubmission&filter="> [ Help with translations! ] </a>