Jump to content

MediaWiki:Centralnotice-template-stewnoms mobile

From Meta, a Wikimedia project coordination wiki

<style>

@font-face { 

 font-family: 'Montserrat';
 font-style: normal;
 src: local('Montserrat'), local('Montserrat'), url(https://upload.wikimedia.org/wikipedia/donate/c/cd/Montserrat.woff2) format('woff2');}

/* Main banner container. Banner: background, border colour and width and adding a margin between banner and article header*/ .cnotice { 

   position: relative;
   overflow: hidden;
   background: #f8f9fa;
   border: 1px solid #a2a9b1;
   border-radius: 2px;
   margin-bottom: 1em;
   cursor: pointer;
   color: #222;
   font-weight: 500;

}

/* Sets the minimum banner height. If img + logo-container margins > height. Banner will be larger*/

  1. cnotice-main {
   display: table;
   width: 100%;
   height: 80px; /* need to set height for height 100% to work on elements within it */

}

/*MOBILE - Adjust mobile height of banner*/ body.skin-minerva #cnotice-main { 

   height: 100px;

}

/*IMPORTANT - don't touch*/ .cnotice-message-container, .cnotice-logo-container, .cnotice-misc-container { 

   display: table-cell;
   height: 100%;
   vertical-align: middle;

}

/* --- Main message --- */ .cnotice-message { 

   position: relative;
   margin: 0;
   line-height: 1.2;
   padding: 5px 5px 5px 5px;

}

@media (min-width: 1200px) { 

   .cnotice-message {
        padding: 15px 0px 11px 30px;
   }

}

body.rtl .cnotice-message { 

   padding: 5px 5px 5px 5px;

}

.cnotice-message p { 

   margin: 0;
   color: #222;
   font-family: Arial, sans-serif;
   font-weight: bold;
   font-size: 100%;
   opacity: 1;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;

}

@media (min-width: 1200px) { 

   .cnotice-message p { font-size: 120%; }

}


/* --- Logo Image text --- */ .cnotice-logo-container { 

   width: 10%;

}

body.rtl .cnotice-logo-container { 

   padding: 0 .25em 0 .9em;

}

.cnotice-logo-container img { 

   opacity: 1;
   display: block;
   margin-left: 15%;
   margin-top: 2px;
   margin-bottom: 1px;

}

/*Misc containter stuff starts here*/ .cnotice-misc-container { 

   width: 10%;
   padding-right: 40px;

}

/*Detects and adjusts for mobile skin */ body.skin-minerva .cnotice-misc-container { 

   padding-right: 10px;

}


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

  1. cnotice-toggle-box-options {
   display: table-cell;
   font-size: .8em;
   text-transform: uppercase;
   width: 38px;
   height: 38px;
   border-radius: 19px;
   vertical-align: middle;

}

  1. cnotice-toggle-box {
   cursor: pointer;
   position: absolute;
   top: 2px;
   right: 3px;
   z-index: 1;
   opacity: .8;

}

body.rtl #cnotice-toggle-box { 

   left: 3px;
   right: unset;

}

  1. cnotice-toggle-box:hover {
   opacity: 1;

}

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

   display: inline-block;
   border: 2px solid #36c;
   border-radius: 2px;
   color: #fff;
   padding: 5px 5px;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   font-size: 14px;
   margin: 4px 2px;
   -moz-transition-duration: 100ms; /* Firefox */
   -webkit-transition-duration: 100ms; /* Safari */
   transition-duration: 100ms;
   cursor: pointer;
   z-index: 1;
   min-width: 80px;

}

@media (min-width: 1100px) { 

   .cnotice-button {
       min-width: 110px;
       width: 25%;
       margin: auto;
   }

}

/* --- Buttons --- */ .cnotice a.cnotice-buttonlink { 

   cursor: pointer;
   text-decoration: none;
   color: #000;

}

.cnotice a.cnotice-buttonlink:hover { 

   color: #fff;

}

.cnotice-button1 { 

   background-color: #36c;
   border-color: #36c;
   color: #fff;

}

.cnotice-button1:hover { 

   background-color: #447ff5;
   border-color: #447ff5;

}

.cnotice-button1:active { 

   background-color: #2a4b8d;
   border-color: #2a4b8d;

}

.rtl .cnotice-button1 { 

   left: 23px;
   right: auto;
   margin-left: 20px;

}

  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>

<script type="text/javascript"> var wgHideStewardNomNotice = { 'insysops':false,

/********* ** Initialize script *********/ 'initialize':function() { /* not administrator */ if( typeof mw.config.get( 'wgUserName' ) === 'undefined' ) { return; } /* get elements */ this.notice = document.getElementById('{{{banner}}}'); if( !this.notice ) return mw.log.warn( 'could not locate #{{{banner}}}' );

/* only visible to sysops */ for (var i=0;i<mw.config.get( 'wgUserGroups' ).length;i++) { if (mw.config.get( 'wgUserGroups' )[i] === 'sysop') { this.insysops = true; break; } } if(this.insysops) { this.notice.style.display = 'block'; }else{ this.notice.style.display = 'none'; } }, alterImpressionData: function( impressionData ) { if (this.insysops) { return true; } impressionData.reason = 'NotSysop'; return false; } };

mw.centralNotice.bannerData.alterImpressionData = wgHideStewardNomNotice.alterImpressionData;

wgHideStewardNomNotice.initialize(); </script>

Retrieved from "https://meta.wikimedia.org/w/index.php?title=MediaWiki:Centralnotice-template-stewnoms_mobile&oldid=26054643"