MediaWiki:Centralnotice-template-Edit a thon: Difference between revisions

m Protected "MediaWiki:Centralnotice-template-Edit a thon": Automatically protected by CentralNotice; only edit via Special:CentralNotice or Special:Translate. ([Edit=Allow only central notice administrators] (indefinite) [Move=Allow only central notice administrators] (indefinite)) [cascading]
No edit summary
Tag: centralnotice
 
Line 1: Line 1:
<!-- Empty banner -->
<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: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: medium;
    font-size: 13px;
    line-height: 1.4;
    color: #555A5F !important;
    text-align: left;
}
 
.cbnnr-special .cbnnr-message {
    color: #d9e0f5 !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: 18px;
        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 #f29100;
    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;
}
.rtl .cbnnr-icon {
    right: 15px;
}
@media all and (min-width: 720px) {
    .cbnnr-icon {
      left: 15px;
    }
    .rtl .cbnnr-icon {
      right: 15px;
    }
}
 
.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: 83px;
    padding-right: 64px;
    padding-top: 5px;
    margin: auto;
}
 
.rtl .cbnnr-message p {
    padding-right: 83px;
    padding-left: 64px;
    padding-top: 5px;
    margin: auto;
}
 
.cbnnr-message-rimg p {
    padding-left: 83px;
    padding-right: 145px;
    padding-top: 5px;
    margin: auto;
}
 
.rtl .cbnnr-message-rimg p {
    padding-right: 83px;
    padding-left: 145px;
    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: 5px;
    }
 
    .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 {
    display: block;
    margin-top: 4px;
}
 
@media all and (min-width: 720px) {
    .cbnnr-cta {
        margin-top: 2px;
    }
}
 
.cbnnr-cta:hover {
    text-decoration: underline;
}
 
.cbnnr-rightimg {
    display:none;
}
 
.cbnnr-rightimgshow {
    display:block;
    top: 50%;
    right: 75px;
    transform: translateY(-50%);
    position: absolute;
}
 
.rtl .cbnnr-rightimgshow {
    left: 75px;
    right: unset;
}
 
@media all and (max-width: 720px) {
    .cbnnr-rightimg {
        display:none;
    }
}
 
/* --- Close Options --- */
 
.cbnnr-close {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 1;
    opacity: .8;
    background: #eaecf0;
    border-radius: 50%;
    padding: 12px;
    width: 44px;
    height: 44px;
    transition: all .3s 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: 0.8;
}
 
.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 */
}
 
.cbnnr-close-icon:hover {
    opacity: 1;
}
 
#cnotice-translation-link {
    position: absolute;
    right: 65px;
    bottom: 0px;
    font-size: 0.8em;
    white-space: nowrap;
}
 
#cnotice-translation-link:hover {
    text-decoration: underline;
}
 
.rtl #cnotice-translation-link {
    text-align: left;
    left: 65px;
}
 
</style>
 
<div class="cbnnr" id="wlm_2020" style="display: block;">
 
    <div class="cbnnr-main">
 
        <div class="cbnnr-message fade cbnnr-message-rimg" id="banner1">
            <p>
                <span class="cbnnr-text">Wikipedia India team is organizing a multi-lingual edit-a-thon. The goal of this edit-a-thon is to create India-related articles.</span>
                <span class="cbnnr-cta"><a href="//commons.wikimedia.org/wiki/Commons:Wiki_Loves_Monuments_2020_in_India" class="cbnnr-message fade cbnnr-message-rimg" id="banner1">Click here to register yourself and get a chance to win exciting prizes.</a></span>
            </p>
 
            <figure class="cbnnr-rightimg cbnnr-rightimgshow">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Flag_of_India.svg/70px-Flag_of_India.svg.png" alt="" style="display: block;">
            </figure>
 
      </div>
 
        <div class="cbnnr-close">
            <div class="cbnnr-close-icon" href="#" title="Hide" onclick="mw.centralNotice.hideBanner(); return false;"></div>
        </div>
 
    </div>
 
</div>

Latest revision as of 13:18, 21 September 2020

<style> .skin-monobook #siteNotice p {

  padding-left: 90px !important;
  padding-right: 64px !important;
  padding-top: 4px !important;

}

  1. 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: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   font-weight: medium;
   font-size: 13px;
   line-height: 1.4;
   color: #555A5F !important;
   text-align: left;

}

.cbnnr-special .cbnnr-message {

   color: #d9e0f5 !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: 18px; 
       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 #f29100;
   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;

} .rtl .cbnnr-icon {

   right: 15px;

} @media all and (min-width: 720px) {

   .cbnnr-icon {
      left: 15px;
   }
   .rtl .cbnnr-icon {
      right: 15px;
   }

}

.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: 83px;
   padding-right: 64px;
   padding-top: 5px;
   margin: auto;

}

.rtl .cbnnr-message p {

   padding-right: 83px;
   padding-left: 64px;
   padding-top: 5px;
   margin: auto;

}

.cbnnr-message-rimg p {

   padding-left: 83px;
   padding-right: 145px;
   padding-top: 5px;
   margin: auto;

}

.rtl .cbnnr-message-rimg p {

   padding-right: 83px;
   padding-left: 145px;
   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: 5px;
   }
   .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 {

   display: block;
   margin-top: 4px;

}

@media all and (min-width: 720px) {

   .cbnnr-cta {
       margin-top: 2px;
   }

}

.cbnnr-cta:hover {

   text-decoration: underline;

}

.cbnnr-rightimg {

   display:none;

}

.cbnnr-rightimgshow {

   display:block;
   top: 50%;
   right: 75px;
   transform: translateY(-50%);
   position: absolute;

}

.rtl .cbnnr-rightimgshow {

   left: 75px;
   right: unset;

}

@media all and (max-width: 720px) {

   .cbnnr-rightimg {
       display:none;
   }

}

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

.cbnnr-close {

   cursor: pointer;
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
   z-index: 1;
   opacity: .8;
   background: #eaecf0;
   border-radius: 50%;
   padding: 12px;
   width: 44px;
   height: 44px;
   transition: all .3s 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: 0.8;

}

.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 */

}

.cbnnr-close-icon:hover {

   opacity: 1;

}

  1. cnotice-translation-link {
   position: absolute;
   right: 65px;
   bottom: 0px;
   font-size: 0.8em;
   white-space: nowrap;

}

  1. cnotice-translation-link:hover {
   text-decoration: underline;

}

.rtl #cnotice-translation-link {

   text-align: left;
   left: 65px;

}

</style>

Wikipedia India team is organizing a multi-lingual edit-a-thon. The goal of this edit-a-thon is to create India-related articles. <a href="//commons.wikimedia.org/wiki/Commons:Wiki_Loves_Monuments_2020_in_India" class="cbnnr-message fade cbnnr-message-rimg" id="banner1">Click here to register yourself and get a chance to win exciting prizes.</a>

           <figure class="cbnnr-rightimg cbnnr-rightimgshow">
               <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Flag_of_India.svg/70px-Flag_of_India.svg.png" alt="" style="display: block;">
           </figure>