MediaWiki:Centralnotice-template-EU Blackout 2019
<style> .countDown_cont {
font-family: Lato, Arial, Gadget, sans-serif; font-size: 4px; display: flex; color: #ccc;
} .countDown_interval_cont {
display: flex; justify-content: space-around; width: auto;
} .countDown_interval_cont:nth-child(n+1):not(:last-child) {
margin-right: 1em;
} .countDown_interval_basic_cont {
display: flex; flex-direction: column;
} .countDown_interval_basic_cont_description {
display: flex; margin-left: 0.3em; margin-top: 0.3em; font-size: 1.2em; font-weight: bold; color: none; text-shadow: 0.1em 0.1em 0.1em contrast(none);
} .countDown_digit_cont {
-webkit-perspective: 3.2em; perspective: 3.2em; box-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2); width: 1em; height: 1.6em; position: relative; line-height: 1.6em; font-size: 5em; font-weight: bold; border-radius: 0.08em;
} .countDown_digit_cont:nth-child(n+1):not(:last-child) {
margin-right: 0.05em;
} .countDown_digit_last_placeholder, .countDown_digit_new_placeholder {
position: absolute; left: 0; width: 100%; height: 50%; text-align: center; overflow: hidden;
} .countDown_digit_last_placeholder {
bottom: 0; background: #555; border-radius: 0 0 0.08em 0.08em;
} .countDown_digit_last_placeholder_inner {
width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; bottom: 50%; position: absolute;
} .countDown_digit_new_placeholder {
top: 0; background: #666; border-radius: 0.08em 0.08em 0 0;
} .countDown_digit_last_rotate, .countDown_digit_new_rotate {
display: flex; justify-content: center; width: 100%; height: 50%; font-weight: bold; position: absolute; top: 0; overflow: hidden; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-timing-function: linear; animation-timing-function: linear; border-radius: 0.08em 0.08em 0 0; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%;
} .countDown_digit_last_rotate:after, .countDown_digit_new_rotate:after {
content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 100%; border-bottom: 0.01em solid rgba(0, 0, 0, 0.1);
} .countDown_digit_last_rotate {
-webkit-animation-name: countDown_flip_1; animation-name: countDown_flip_1; background: #666;
} .countDown_digit_new_rotate {
-webkit-animation-name: countDown_flip_2; animation-name: countDown_flip_2; background: #555;
} .countDown_digit_new_rotated {
-webkit-transform: rotateX(180deg); transform: rotateX(180deg); width: 100%; height: 100%;
} .countDown_digit_new_rotated_inner {
width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; bottom: 50%; position: absolute;
} @-webkit-keyframes countDown_flip_1 {
0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 1; } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); z-index: 0; }
} @keyframes countDown_flip_1 {
0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 1; } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); z-index: 0; }
} @-webkit-keyframes countDown_flip_2 {
0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 0; } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); z-index: 1; }
} @keyframes countDown_flip_2 {
0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 0; } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); z-index: 1; }
} body {
display: flex; justify-content: center; background: #444;
} body .heading {
color: white; text-shadow: 2px 2px rgba(180, 180, 180, 0.4);
} body .heading:not(:first-child) {
margin-top: 50px;
}
</style>
<script>
"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var Countdown = /*#__PURE__*/ function () { _createClass(Countdown, [{ key: "TIMESTAMP_SECOND", get: function get() { return 1000; } }, { key: "TIMESTAMP_MINUTE", get: function get() { return 60 * this.TIMESTAMP_SECOND; } }, { key: "TIMESTAMP_HOUR", get: function get() { return 60 * this.TIMESTAMP_MINUTE; } }, { key: "TIMESTAMP_DAY", get: function get() { return 24 * this.TIMESTAMP_HOUR; } }, { key: "TIMESTAMP_WEEK", get: function get() { return 7 * this.TIMESTAMP_DAY; } }, { key: "TIMESTAMP_YEAR", get: function get() { return 365 * this.TIMESTAMP_DAY; } /** * @param {{}} userOptions structure like this.options below */
}]);
function Countdown(userOptions) { _classCallCheck(this, Countdown);
this.options = { cont: null, countdown: true, date: { year: 0, month: 0, day: 0, hour: 0, minute: 0, second: 0 }, endCallback: null, outputFormat: 'year|week|day|hour|minute|second', outputTranslation: { year: 'Years', week: 'Weeks', day: 'Days', hour: 'Hours', minute: 'Minutes', second: 'Seconds' } }; this.lastTick = null; this.intervalsBySize = ['year', 'week', 'day', 'hour', 'minute', 'second']; this.elementClassPrefix = 'countDown_'; this.interval = null; this.digitConts = {};
this._assignOptions(this.options, userOptions); }
_createClass(Countdown, [{ key: "start", value: function start() { var _this = this;
var date, dateData;
this._fixCompatibility();
date = this._getDate(this.options.date); dateData = this._prepareTimeByOutputFormat(date);
this._writeData(dateData);
this.lastTick = dateData;
if (this.options.countdown && date.getTime() <= Date.now()) { if (typeof this.options.endCallback === 'function') { this.stop(); this.options.endCallback(); } } else { this.interval = setInterval(function () { _this._updateView(_this._prepareTimeByOutputFormat(date)); }, this.TIMESTAMP_SECOND); } } }, { key: "stop", value: function stop() { if (this.interval !== null) { clearInterval(this.interval); } } /** * @param {Date|Object|String|Number} date * * @returns {Date} * @private */
}, { key: "_getDate", value: function _getDate(date) { if (_typeof(date) === 'object') { if (_instanceof(date, Date)) { return date; } else { var expectedValues = { day: 0, month: 0, year: 0, hour: 0, minute: 0, second: 0 };
for (var i in expectedValues) { if (expectedValues.hasOwnProperty(i) && date.hasOwnProperty(i)) { expectedValues[i] = date[i]; } }
return new Date(expectedValues.year, expectedValues.month > 0 ? expectedValues.month - 1 : expectedValues.month, expectedValues.day, expectedValues.hour, expectedValues.minute, expectedValues.second); } } else if (typeof date === 'number' || typeof date === 'string') { return new Date(date); } else { return new Date(); } } /** * @param {Date} dateObj * * @return {{}} * @private */
}, { key: "_prepareTimeByOutputFormat", value: function _prepareTimeByOutputFormat(dateObj) { var _this2 = this;
var usedIntervals, output = {}, timeDiff; usedIntervals = this.intervalsBySize.filter(function (item) { return _this2.options.outputFormat.split('|').indexOf(item) !== -1; }); timeDiff = this.options.countdown ? dateObj.getTime() - Date.now() : Date.now() - dateObj.getTime(); usedIntervals.forEach(function (item) { var value;
if (timeDiff > 0) { switch (item) { case 'year': value = Math.trunc(timeDiff / _this2.TIMESTAMP_YEAR); timeDiff -= value * _this2.TIMESTAMP_YEAR; break;
case 'week': value = Math.trunc(timeDiff / _this2.TIMESTAMP_WEEK); timeDiff -= value * _this2.TIMESTAMP_WEEK; break;
case 'day': value = Math.trunc(timeDiff / _this2.TIMESTAMP_DAY); timeDiff -= value * _this2.TIMESTAMP_DAY; break;
case 'hour': value = Math.trunc(timeDiff / _this2.TIMESTAMP_HOUR); timeDiff -= value * _this2.TIMESTAMP_HOUR; break;
case 'minute': value = Math.trunc(timeDiff / _this2.TIMESTAMP_MINUTE); timeDiff -= value * _this2.TIMESTAMP_MINUTE; break;
case 'second': value = Math.trunc(timeDiff / _this2.TIMESTAMP_SECOND); timeDiff -= value * _this2.TIMESTAMP_SECOND; break; } } else { value = '00'; }
output[item] = (( + value).length < 2 ? '0' + value : + value).split(); }); return output; } }, { key: "_fixCompatibility", value: function _fixCompatibility() { Math.trunc = Math.trunc || function (x) { if (isNaN(x)) { return NaN; }
if (x > 0) { return Math.floor(x); }
return Math.ceil(x); }; } /** * @param {{}} data * @private */
}, { key: "_writeData", value: function _writeData(data) { var _this3 = this;
var code = "
intervalName;
for (intervalName in data) { if (data.hasOwnProperty(intervalName)) {
var element = "data[intervalName].forEach(function (digit, index) {
element += "});
code += element + '} }
this.options.cont.innerHTML = code + '';
this.lastTick = data; } /** * @param {Number} newDigit * @param {Number} lastDigit * * @returns {String} * @private */
}, { key: "_getDigitElementString", value: function _getDigitElementString(newDigit, lastDigit) {
return "
\n
\n
\n
");
} /** * @param {{}} data * @private */
}, { key: "_updateView", value: function _updateView(data) { var _this4 = this;
var _loop = function _loop(intervalName) { if (data.hasOwnProperty(intervalName)) { data[intervalName].forEach(function (digit, index) { if (_this4.lastTick !== null && _this4.lastTick[intervalName][index] !== data[intervalName][index]) { _this4._getDigitCont(intervalName, index).innerHTML = _this4._getDigitElementString(data[intervalName][index], _this4.lastTick[intervalName][index]); } }); } };
for (var intervalName in data) { _loop(intervalName); }
this.lastTick = data; } /** * @param {String} intervalName * @param {String} index * * @returns {HTMLElement} * @private */
}, { key: "_getDigitCont", value: function _getDigitCont(intervalName, index) { if (!this.digitConts["".concat(intervalName, "_").concat(index)]) { this.digitConts["".concat(intervalName, "_").concat(index)] = this.options.cont.querySelector(".".concat(this._getIntervalContClassName(intervalName), " .").concat(this._getDigitContClassName(index))); }
return this.digitConts["".concat(intervalName, "_").concat(index)]; } /** * @param {String} intervalName * * @returns {String} * @private */
}, { key: "_getIntervalContClassName", value: function _getIntervalContClassName(intervalName) { return "".concat(this.elementClassPrefix, "interval_cont_").concat(intervalName); } /** * @returns {String} * @private */
}, { key: "_getIntervalContCommonClassName", value: function _getIntervalContCommonClassName() { return "".concat(this.elementClassPrefix, "interval_cont"); } /** * @param {String} index * * @returns {String} * @private */
}, { key: "_getDigitContClassName", value: function _getDigitContClassName(index) { return "".concat(this.elementClassPrefix, "digit_cont_").concat(index); } /** * @returns {String} * @private */
}, { key: "_getDigitContCommonClassName", value: function _getDigitContCommonClassName() { return "".concat(this.elementClassPrefix, "digit_cont"); } /** * @param {{}} options * @param {{}} userOptions */
}, { key: "_assignOptions", value: function _assignOptions(options, userOptions) { for (var i in options) { if (options.hasOwnProperty(i) && userOptions.hasOwnProperty(i)) { if (options[i] !== null && _typeof(options[i]) === 'object' && _typeof(userOptions[i]) === 'object') { this._assignOptions(options[i], userOptions[i]); } else { options[i] = userOptions[i]; } } } } }]);
return Countdown; }(); </script>
<script> let cd = new Countdown({
cont: document.querySelector('.container'), countdown: true, // true for classic countdown, false for countup date: { day: 26, month: 3, year: 2019, hour: 12, minute: 00, second: 00, }, outputTranslation: { year: , week: , day: , hour: , minute: , second: },
endCallback: null, outputFormat: 'hour',
});
cd.start(); </script>
<style> @font-face {
font-family: 'Anonymous Pro'; font-style: normal; src: local('Anonymous Pro'), local('Anonymous Pro'), url(https://upload.wikimedia.org/wikipedia/donate/9/92/Anonymous_Pro.woff) format('woff');}
/* Hide when editing */ .action-edit .ceb, .ve-activated .ceb {
display: none !important;
} .heading-holder {
overflow: visible;
}
.noscroll {
position: fixed; overflow: scroll; -webkit-overflow-scrolling: touch; width: 100%; height: 100%;
}
/* z-index override for #siteNotice now having .mw-body-content class [1] */
- siteNotice {
z-index: auto;
}
/* z-index override for German Wikipedia */ .mw-body {
z-index: auto;
}
/* Box-sizing */ .ceb, .ceb *, .ceb *:before, .ceb *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* Inline banner styles
*/
/*Reset focus outlines*/ .ceb-inline-main:focus, .ceb-inline-close:focus, .ceb-rml-email:focus, .ceb-btn-submit:focus {
outline: 0;
}
.ceb {
position: fixed; margin-bottom: 24px; background: #111; z-index: 101; top: 0; left: 0; right: 0; height: 100vh; margin: auto; padding: 20px 0px; overflow: scroll; -webkit-overflow-scrolling: touch; transition: padding 0.5s cubic-bezier(.55, 0, .1, 1);
}
@media all and (min-width: 960px) { .ceb {
padding: 100px 0px;
} }
body.skin-minerva .ceb {
padding: 20px 0px;
}
body.skin-minerva .ceb-inline-clock {
display:none;
}
body.skin-minerva .ceb-inline-wikimedialogo {
display:none;
}
/*Default style is grey*/ .ceb-inline-main, .ceb-inline-main:visited {
color: #eee;
}
.ceb-inline-main{
text-align: center; margin: 0px auto; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Oxygen-Sans",Ubuntu,Cantarell,Lato,"Helvetica Neue",Helvetica,Arial,sans-serif; max-width: 750px; padding: 20px; position: relative; background: transparent;
}
.ceb-inline-footer {
text-align: center; margin: 0px auto; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Oxygen-Sans",Ubuntu,Cantarell,Lato,"Helvetica Neue",Helvetica,Arial,sans-serif; max-width: 750px; padding: 10px 20px; position: relative; background: transparent; width: 100%;
}
.ceb-inline-smalltext a {
color: #ccc;
}
.ceb-inline-smalltext a:visited {
color: #bbb;
}
.ceb-inline-table {
display: inline-block;
}
.ceb-inline-main:hover {
text-decoration: none;
}
.ceb-btn-submit:hover, .ceb-btn-submit:focus {
background-color: #ffcc33; border: 1px solid #ffcc33;
}
.ceb-btn-submit:active {
background-color: #FFB000; border: 1px solid #FFB000;
}
.ceb-inline-main:focus .ceb-btn-submit {
box-shadow: inset 0 0 0 1px #d33, inset 0 0 0 2px #FFFFFF;
}
.ceb-inline-main,
.ceb-inline-message,
.ceb-inline-title,
.ceb-inline-smalltext,
.ceb-btn-submit {
display: inherit; margin: 0px auto; transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
} .ceb-inline-footer{
display: table; transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
}
.ceb-inline-main,
.ceb-inline-message,
.ceb-inline-title {
width: 100%;
}
.ceb-inline-wordmark {
text-align: left; display: inherit; margin: 0px auto; position: relative; padding-bottom: 40px;
}
@media all and (min-width: 960px) {
.ceb-inline-wordmark {
} } .ceb-inline-title {
margin-bottom: 30px; font-size: 28px; line-height: 1.125; /*27px @24px*/ text-align: left; text-transform: uppercase; font-family: 'Anonymous Pro', monospace;
}
@media all and (min-width: 960px) {
.ceb-inline-title { font-size: 36px; line-height: 1.3; /*30px @25px*/ }
}
.ceb-inline-message {
margin-bottom: 10px; font-size: 18px; line-height: 1.4; /*20px @15px*/ text-align: left; font-weight: 600;
}
.ceb-inline-message p {
padding-top: 5px; padding-bottom: 5px;
}
@media all and (min-width: 960px) {
.ceb-inline-message { margin-bottom: 10px; font-size: 18px; line-height: 1.5; /*25px @19px*/ }
}
.ceb-inline-message a {
text-decoration: none; color: #fff; border-bottom: solid 2px #FFCC00;
}
.ceb-inline-message p {
padding-top: 5px; padding-bottom: 5px;
}
.ceb-inline-smalltext {
font-size: 16px; color: #9a9a9a; text-align: left; margin-top: 20px; padding-bottom: 20px; border-bottom: solid 1px #222;
}
.ceb-inline-title-icon {
width: 1em; height: 1em; margin-bottom: -0.12em; margin-right: 0.08em;
}
.ceb-inline-buttons{
text-align: left; font-weight: 600; display: inherit; margin: 0px auto; margin-top: 40px; margin-bottom: 40px;
}
.ceb-inline-link:hover {
text-decoration: none;
}
/* --- Close button --- */
.ceb-inline-close {
position: absolute; top: -20px; right: -20px; padding: 8px; cursor: pointer;
}
.ceb-inline-close .ceb-icon-close path {
stroke: #222;
}
.ceb-inline-close .ceb-icon-close circle {
fill: #fff;
}
.ceb-icon-close {
width: 28px; height: 28px;
}
.ceb-btn-submit { margin: 0 auto; min-height: 44px; padding: 15px 15px; background-color: #FFCC00; border: 1px solid #FFCC00; text-align: center; font-size: 16px; font-weight: 600; line-height: 1; border-radius: 8px; cursor: pointer; color: #000; }
.ceb-btn-table {
display: inline-block;
}
.ceb-btn-cell {
display: table-cell; vertical-align: middle; text-transform: uppercase; font-weight: 700;
}
.ceb-btn-icon {
margin-right: 8px;
}
.ceb-inline-title .highlight {
background-image: linear-gradient(to right, transparent 50%, #FFC600 50%); background-position: 0% 0; background-size: 200% auto; text-decoration: none; transition: all 0.5s ease-out; animation-name: highlight-grow; animation-duration: 1s; animation-timing-function: ease-out; animation-delay: 2s; animation-fill-mode: forwards; font-weight: normal; padding-left: 5px;
}
@keyframes highlight-grow{
from {background-position: -0.1%; color: #fff} to {background-position: -99.99%; color: #111}
}
.ceb-inline-communitytextlogo{
display: table-cell; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Oxygen-Sans",Ubuntu,Cantarell,Lato,"Helvetica Neue",Helvetica,Arial,sans-serif; text-transform: uppercase; color: #666; font-weight: bold; text-align: left; line-height: 1em;
}
body.skin-minerva .ceb-inline-communitytextlogo{
font-size: 0.8em;
}
.ceb-inline-wikimedialogo{
display: none; text-align: left; vertical-align:middle;
}
@media all and (min-width: 960px) { .ceb-inline-wikimedialogo{
display: table-cell;
} }
.ceb-inline-clock{
display: table-cell; top: 50%; left: 50%; transform: translate(10%, 6%);
}
</style>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Wikipedia-logo-white.svg" width="160px"> {{{EU_Translations,message-title-b}}}
{{{EU_Translations,message-body-1}}} {{{EU_Translations,message-body-2}}}
{{{EU_Translations,message-body-3}}} {{{EU_Translations,message-body-4}}} {{{EU_Translations,message-body-5}}}
{{{EU_Translations,message-body-6}}}
{{{EU_Translations,message-body-7}}}
<a class="ceb-inline-link" href="{{{EU_Translations,contact-link}}}" title="EU Copyright Reform" target="_blank">
{{{EU_Translations,button-contact}}} ➝
</a>
{{{EU_Translations,privacy}}}
<script> var ceb = ceb || {};
ceb.dayNames = {
'en' : [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
};
ceb.insertInlineBanner = function() {
var $inlineBanner = $('#ceb-inline'); if ( window.location.href.indexOf('m.wikipedia') > -1 ) { $('.pre-content').prepend( $inlineBanner ); } else { $('body').prepend($('#centralNotice')); } $inlineBanner.css('display', 'block');
};
$(function() {
var language = mw.centralNotice.data.uselang; var country = mw.centralNotice.data.country; $('body').addClass('noscroll'); $('.ceb-directive-link').wrap("<a href='{{{EU_Translations,directive-link}}}'></a>"); $('.ceb-privacy-link').wrap("<a href='{{{EU_Translations,privacy-link}}}'></a>"); $('.ceb-contact-link').wrap("<a id='ceb-contact-dynamiclink' href='{{{EU_Translations,contact-link}}}'></a>");
// Adjustments for mobile if ( window.location.href.indexOf('m.wikipedia') > -1 ) { $('.ceb').addClass('ceb--is-mobile'); }
}); </script> <script> var cn_rewrite_url = function() {
url = ; switch(Geo.country) { } if(url!=) $("div.ceb a.ceb-inline-link").attr("href",url);
} $(document).ready(cn_rewrite_url); </script>