Utente:Laurentius/sandbox: differenze tra le versioni

Contenuto cancellato Contenuto aggiunto
copio da https://meta.wikimedia.org/wiki/Special:CentralNoticeBanners/edit/EU_Fixcopyright_Small_v2
adatto
Riga 1:
<!-- For guidance or help with this banner, contact Seddon (WMF) -->
<!-- This banners is set up to run to loggedin users only -->
<style>
/* Hide when editing */
 
.action-edit .ceb,
@font-face {
.ve-activated .ceb {
font-family: 'Montserrat';
display: none !important;
font-style: normal;
}
src: local('Montserrat'), local('Montserrat'), url(https://upload.wikimedia.org/wikipedia/donate/c/cd/Montserrat.woff2) format('woff2');}
.heading-holder {
 
overflow: visible;
/* Main banner container. Banner: background, border colour and width and adding a margin between banner and article header*/
.cnotice {
position: relative;
overflow: hidden;
border: 1px solid #d33;
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Oxygen-Sans",Ubuntu,Cantarell,Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;
border-radius: 2px;
margin-bottom: 1em;
cursor: pointer;
color: #222;
font-weight: 500;
}
 
#centralNotice.collapsed .ceb {
/* Sets the minimum banner height. If img + logo-container margins > height. Banner will be larger*/
display: none;
#cnotice-main {
display: table;
width: 100%;
height: 80px; /* need to set height for height 100% to work on elements within it */
}
 
/* z-index override for #siteNotice now having .mw-body-content class [https://phabricator.wikimedia.org/T155863] */
/*MOBILE - Adjust mobile height of banner*/
#siteNotice {
body.skin-minerva #cnotice-main {
heightz-index: 100pxauto;
}
 
/* z-index override for German Wikipedia */
/*IMPORTANT - don't touch*/
.mw-body {
.cnotice-message-container,
z-index: auto;
.cnotice-logo-container,
.cnotice-misc-container {
display: table-cell;
height: 100%;
vertical-align: middle;
}
 
/* Box--- Main message ---sizing */
.ceb,
.cnotice-message {
.ceb *,
position: relative;
.ceb *:before,
margin: 0;
.ceb *:after {
padding: 5px 5px 5px 5px;
font-sizemoz-box-sizing: 22pxborder-box;
line-heightwebkit-box-sizing: 1.2border-box;
box-sizing: border-box;
}
 
/* Inline banner styles
@media (min-width: 1200px) {
---------------------------- */
.cnotice-message {
/*Reset focus outlines*/
padding: 15px 0px 11px 30px;
.ceb-inline-main:focus,
}
.ceb-inline-close:focus,
.ceb-rml-email:focus,
.ceb-btn-submit:focus {
outline: 0;
}
 
.ceb {
body.rtl .cnotice-message {
paddingposition: 5px 5px 5px 5pxrelative;
margin-bottom: 24px;
}
 
/*Default style is grey*/
.cnotice-message p {
.ceb-inline-main,
margin: 0;
.ceb-inline-main:visited {
color: #222;
}
font-weight: bold;
 
font-size: 20px;
.ceb-inline-main {
opacity: 1;
text-align: center;
padding-topwidth: 10px100%;
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Oxygen-Sans",Ubuntu,Cantarell,Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;
padding-bottom: 10px;
width: 100%;
padding: 15px 10px;
border: 3px solid #d33;
border-radius: 2px;
}
 
.ceb-inline-table {
@media (min-width: 1200px) {
display: block;
.cnotice-message p { font-size: 22px; }
}
 
@media all and (min-width: 640px) {
 
.ceb-inline-table {
/* --- Logo Image text --- */
display: table;
.cnotice-logo-container {
width: 10%;}
}
 
.ceb-inline-main:hover {
body.rtl .cnotice-logo-container {
text-decoration: none;
padding: 0 .25em 0 .9em;
}
 
.ceb-inline-main:hover .ceb-btn-submit,
.cnotice-logo-container img {
.ceb-inline-main:focus .ceb-btn-submit {
opacity: 1;
displaybackground-color: block#B8211F;
border: 1px solid #B8211F;
margin-left: 15%;
margin-top: 2px;
margin-bottom: 1px;
}
 
.ceb-inline-main:active .ceb-btn-submit {
/*Misc containter stuff starts here*/
background-color: #951B19;
.cnotice-misc-container {
widthborder: 10%1px solid #951B19;
padding-right: 40px;
}
 
.ceb-inline-main:focus .ceb-btn-submit {
/*Detects and adjusts for mobile skin */
box-shadow: inset 0 0 0 1px #d33, inset 0 0 0 2px #FFFFFF;
body.skin-minerva .cnotice-misc-container {
padding-right: 10px;
}
 
 
.ceb-inline-main,
/* --- Close Options --- */
.ceb-inline-message,
 
.ceb-inline-title,
#cnotice-toggle-box-options {
.ceb-btn-submit {
display: table-cell;
font-sizedisplay: .8eminline-block;
text-transform: uppercase;
width: 38px;
height: 38px;
border-radius: 19px;
vertical-align: middle;
}
 
.ceb-inline-main,
#cnotice-toggle-box {
.ceb-inline-message,
cursor: pointer;
.ceb-inline-title {
position: absolute;
topwidth: 2px100%;
right: 3px;
z-index: 1;
opacity: .8;
}
 
.ceb-inline-title {
body.rtl #cnotice-toggle-box {
leftmargin-bottom: 3px5px;
rightfont-size: unset18px;
line-height: 1.125; /*27px @24px*/
font-weight: bold;
}
 
@media all and (min-width: 960px) {
#cnotice-toggle-box:hover {
opacity:.ceb-inline-title 1;{
font-size: 22px;
line-height: 1.2; /*30px @25px*/
}
}
 
.ceb-inline-message {
/* --- Full Banner Link --- */
margin-bottom: 10px;
.cnotice a.cnotice-full-banner-click {
displayfont-size: block15px;
line-height: 100%1.4; /*20px @15px*/
font-family: Georgia, Times, serif;
width: 100%;
cursortext-align: pointerleft;
text-decoration: none;
}
 
@media all and (min-width: 960px) {
.cnotice a.cnotice-full-banner-click:hover {
.ceb-inline-message {
text-decoration: underline;
margin-bottom: 10px;
font-size: 17px;
width: 80%;
line-height: 1.5; /*25px @19px*/
}
}
 
.ceb-inline-title-icon {
.cnotice-button {
displaywidth: inline-block1em;
borderheight: 2px solid #d331em;
bordermargin-radiusbottom: 2px-0.12em;
colormargin-right: #fff0.08em;
padding: 5px 5px;
text-align: center;
font-weight: bold;
text-decoration: none;
font-size: 17px;
margin: 4px 2px;
-moz-transition-duration: 100ms; /* Firefox */
-webkit-transition-duration: 100ms; /* Safari */
transition-duration: 100ms;
cursor: pointer;
z-index: 1;
min-width: 80px;
}
 
/* --- Close button --- */
@media (min-width: 1100px) {
.cnotice-button {
min-width: 110px;
width: 25%;
margin: auto;
}
}
 
.ceb-inline-close {
/* --- Buttons --- */
position: absolute;
.cnotice a.cnotice-buttonlink {
top: -20px;
right: -20px;
padding: 8px;
cursor: pointer;
text-decoration: none;
color: #000;
}
 
.ceb-inline-close .ceb-icon-close path {
.cnotice a.cnotice-buttonlink:hover {
colorstroke: #fff222;
}
 
.ceb-inline-close .ceb-icon-close circle {
.cnotice-button1 {
background-colorfill: #d33fff;
border-color: #d33;
color: #fff;
}
 
.ceb-inline-close:hover .ceb-icon-close circle,
.cnotice-button1:hover {
.ceb-inline-close:focus .ceb-icon-close circle {
background-color: #447ff5;
border-colorstroke: #447ff5d33;
}
 
.ceb-inline-close:hover .ceb-icon-close path,
.cnotice-button1:active {
.ceb-inline-close:focus .ceb-icon-close path {
background-color: #2a4b8d;
border-colorstroke: #2a4b8dd33;
}
 
.ceb-icon-close {
.rtl .cnotice-button1 {
leftwidth: 23px28px;
rightheight: auto28px;
margin-left: 20px;
}
 
.ceb-btn-submit {
#cnotice-translation-link {
positionmargin: absolute0 auto;
rightmin-height: 65px30px;
bottompadding: 0px5px 15px 5px;
fontbackground-sizecolor: 0.8em#d33;
white-spaceborder: nowrap1px solid #d33;
text-align: center;
font-size: 15px;
font-weight: 600;
line-height: 1; /*17px @17px*/
border-radius: 2px;
cursor: pointer;
color: #fff;
}
 
.ceb-btn-table {
#cnotice-translation-link:hover {
text-decorationdisplay: underlinetable;
}
 
.ceb-btn-cell {
.rtl #cnotice-translation-link {
text-aligndisplay: lefttable-cell;
leftvertical-align: 65pxmiddle;
}
 
.ceb-btn-icon {
margin-right: 8px;
}
 
Riga 231 ⟶ 212:
}
 
.cnoticeceb-messageinline-title .highlight {
background-image: linear-gradient(to right, transparent 50%, #ffff00 50%);
background-position: 0% 0;
Riga 249 ⟶ 230:
</style>
 
<div id="ceb-inline" class="ceb"><!-- the in-article banner -->
<div class="cnotice" id="{{{banner}}}">
<a class="cnoticeceb-fullinline-banner-click external textmain" href="https://metafixcopyright.wikimedia.org/wiki/Meta:Example?uselang=it" title="Riforma del copyright europeo" target="_blank">
<divspan idclass="cnoticeceb-maininline-title">
<svg class="ceb-inline-title-icon" role="img" aria-labelledby="ceb-inline-title-icon-title" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title id="ceb-inline-message-title-icon">Info icon</title><g fill="none" fill-rule="evenodd"><circle class="ceb-inline-message-title-icon-circle" fill="#d33" cx="16" cy="16" r="16"/><path d="M16.748 10.159c-1.494 0-2.042-.648-2.042-1.52 0-.174.025-.398.125-.995C15.005 6.598 15.678 6 17.17 6c1.495 0 2.043.647 2.043 1.519 0 .174-.025.398-.125.996-.174 1.046-.847 1.644-2.34 1.644zM15.728 25c-2.043 0-3.088-1.17-3.088-2.988 0-.548.05-.971.249-1.992l.996-5.33H10l.473-2.838h7.57l-1.917 10.21.423.124 3.486-3.56 1.993 1.767-1.52 1.743C18.84 24.03 17.447 25 15.729 25z" fill="#FFF"/></g></svg>
<div class="cnotice-message-container">
A tutti i nostri lettori in <span class="ceb-replace-countryname">COUNTRY</span>. <span class="redtitle">È tempo di <span class="highlight">aggiornare il diritto d'autore</span>.</span>
<div class="cnotice-message">
</span>
<p>To all our readers in <span class="ceb-replace-countryname">COUNTRY</span>. <span class="redtitle">It's time to <span class="highlight">fix copyright</span>.</span></p>
<span </divclass="ceb-inline-message">
<!--
</div>
<p>This <span class="ceb-replace-dayofweek"></span> we need your help. On September 12, the European Parliament will vote on changes to copyright law. It will define how you communicate online and how you share knowledge and culture in the digital age. European lawmakers have recognised the importance of this moment. Now they need to hear from you to make the right choice so that together, we can keep Wikipedia and the Internet a place for information to be exchanged and consumed freely in <span class="ceb-replace-countryname">COUNTRY</span> and around the world. Thank you. </p>
<div class="cnotice-misc-container">
-->
<div class="cnotice-button cnotice-button1">Take Action</div>
<p>Solo per oggi abbiamo oscurato le immagini su Wikipedia. Tutti i giorni, però, i volontari di Wikipedia incontrano ostacoli nella loro missione di rendere la conoscenza accessibile a chiunque.</p>
</div>
<p>Il 12 settembre il Parlamento europeo voterà gli emendamenti alla direttiva sul diritto d'autore. È l'occasione per promuovere la creatività introducendo misure come la libertà di panorama e la protezione del pubblico dominio in <span class="ceb-replace-countryname">COUNTRY</span> e nel mondo.</p>
</div>
</span>
<span class="ceb-btn-submit ceb-btn-table">
<span class="ceb-btn-cell">
<svg class="ceb-btn-icon" role="img" aria-labelledby="ceb-btn-icon-title" width="20" height="21" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg"><title id="ceb-btn-icon-title">Edit Icon</title><path d="M17.521 7.83l2.156-2.222c.43-.433.43-1.133 0-1.567L15.966.375a1.111 1.111 0 0 0-1.567 0L12.222 2.53l5.3 5.3zm-6.455-4.122L0 14.774v5.278h5.278L16.344 8.986l-5.278-5.278z" fill="#FFF" fill-rule="nonzero"/></svg>
</span>
<span class="ceb-btn-cell ceb-btn-txt">
Approfondisci
</span>
</span>
</a>
<divspan idclass="cnoticeceb-toggleinline-boxclose" tabindex="0">
<svg class="ceb-icon ceb-icon-close" role="img" aria-labelledby="ceb-icon-close-title" width="34" height="34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title id="ceb-icon-close-title">Close</title><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><circle stroke="#A2A9B1" fill="#F8F9FA" cx="16" cy="16" r="16"></circle><path d="M10 10l12 12m0-12L10 22" stroke="#d33" stroke-width="3" stroke-linecap="round"></path></g></svg>
<a href="#" title="{{int:centralnotice-shared-hide}}" onclick="mw.centralNotice.hideBanner();return false;"><img border="0" src="//upload.wikimedia.org/wikipedia/donate/a/ac/Close_oojs.png" alt="{{int:centralnotice-shared-hide}}" /></a>
</divspan>
</div><!-- ceb-inline -->
 
<script>
var ceb = ceb || {};
 
// Check in user language first, then fall back to English
ceb.countryNames = {
'en' : {
'US' : 'the U.S.',
'BD' : 'Bangladesh',
'IN' : 'India',
'GB' : 'the UK',
}
};
 
ceb.dayNames = {
'en' : [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
};
 
ceb.iPadTranslations = {
'en' : 'iPad'
};
 
ceb.getCurrentDate = function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
 
if(dd<10) {
dd='0'+dd;
}
if(mm<10) {
mm='0'+mm;
}
 
today = mm+'/'+dd+'/'+yyyy;
return today;
};
 
ceb.insertInlineBanner = function() {
var $inlineBanner = $('#ceb-inline');
if ( window.___location.href.indexOf('m.wikipedia') > -1 ) {
$('.pre-content').prepend( $inlineBanner );
} else {
$('#siteNotice').prepend($('#centralNotice'));
}
$inlineBanner.css('display', 'block');
};
 
$(function() {
 
var language = mw.centralNotice.data.uselang;
var country = mw.centralNotice.data.country;
 
// Country name
var countryName;
if ( ceb.countryNames[language] ) {
countryName = ceb.countryNames[language][country] || ceb.countryNames.en[country];
} else {
countryName = ceb.countryNames.en[country];
}
$('.ceb-replace-countryname').html( countryName );
 
// Day of week
var now = new Date();
var dayNumber = now.getDay();
 
if ( $('.ceb-replace-dayofweek').length > 0 ) {
if ( ceb.dayNames[language] ) {
$('.ceb-replace-dayofweek').html( ceb.dayNames[language][dayNumber] );
} else {
console.log('Warning: banner should contain a day of the week, but no translations found.');
}
}
 
// Replace device with iPad if needed
var ua = navigator.userAgent;
if ( ua.match( /ipad/i ) ) {
$('.ceb-replace-device').html( ceb.iPadTranslations[language] || ceb.iPadTranslations.en );
}
 
// Close top banner on click or return
$('.ceb-inline-close').on('click keypress', function(e) {
if (e.which === 13 || e.type === 'click') {
$('#ceb-inline').hide();
mw.centralNotice.hideBanner();
e.stopPropagation();
}
});
 
if (!mw.centralNotice.bannerData.hideResult) {
ceb.insertInlineBanner();
}
 
// Adjustments for mobile
if ( window.___location.href.indexOf('m.wikipedia') > -1 ) {
$('.ceb').addClass('ceb--is-mobile');
}
 
// Blackout the images
$('.mw-wiki-logo').css({'filter': 'brightness(0)', '-webkit-filter': 'brightness(0)'});
$('img').css({'filter': 'brightness(0)', '-webkit-filter': 'brightness(0)'});
});
</script>