MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 3: | Zeile 3: | ||
<br> | <br> | ||
<br> | <br> | ||
<style type="text/css"> | |||
#wlm-de { | |||
padding: 0; | |||
width: 100%; | |||
margin-bottom: 1em; | |||
position: relative; | |||
} | |||
#mw-mf-viewport #wlm-de { | |||
margin-bottom: 0!important; | |||
} | |||
#wlm-de>a { | |||
display: table; | |||
table-layout: fixed; | |||
border: 1px solid rgba(0, 0, 0, 0.3); | |||
background-color: #FFF; | |||
font-size: 15px; | |||
font-weight: bold; | |||
line-height: 1.4; | |||
text-align: left; | |||
width: 100%; | |||
padding: 0; | |||
box-shadow: 0.1em 0.1em 0.6em 0 rgba(0, 0, 0, 0.4); | |||
transition: box-shadow 0.3s; | |||
height: auto; | |||
text-decoration: none; | |||
} | |||
#wlm-de>a:hover { | |||
text-decoration: none; | |||
box-shadow: 0.06em 0.06em 0.4em 0 rgba(0, 0, 0, 0.7); | |||
} | |||
#wlm-de, | |||
#wlm-de * { | |||
box-sizing: border-box; | |||
} | |||
#wlm-de>a>* { | |||
display: table-cell; | |||
vertical-align: middle; | |||
padding: 0.7em 1.5em; | |||
} | |||
#wlm-de>a .wlm-logo { | |||
width: 13rem; | |||
text-indent: -1000em; | |||
background-image: url('//upload.wikimedia.org/wikipedia/commons/b/b3/WLM_Sharing_Heritage_Logo.svg'); | |||
background-repeat: no-repeat; | |||
background-size: contain; | |||
background-position: 40% 47%; | |||
height:5rem; | |||
} | |||
@keyframes scroll { | |||
100% { background-position: 1000em 50% } | |||
} | |||
#wlm-de>a .wlm-image { | |||
background-size: auto 100%; | |||
background-repeat: repeat-x; | |||
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/d/de/WLM-Banner-Bg-2017.jpg/865px-WLM-Banner-Bg-2017.jpg'); | |||
background-position: 0 50%; | |||
animation: scroll 500s infinite linear; | |||
} | |||
#wlm-de>a:hover .wlm-image { | |||
animation-play-state: paused; | |||
} | |||
#wlm-de .wlm-cta { | |||
position: relative; | |||
background-color: #8F0000; | |||
color: #FFF; | |||
width: 20em; | |||
padding-right: 2.5em; | |||
overflow: hidden; | |||
} | |||
#wlm-de .wlm-cta .cta-slides { | |||
position:relative; | |||
} | |||
#wlm-de .cta-slide { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
} | |||
#wlm-de .wlm-cta .cta-slide:last-child { | |||
position:absolute; | |||
top:200%; | |||
left:0; | |||
right:0; | |||
bottom:-200%; | |||
} | |||
@keyframes jump { | |||
0% {transform: translateY(0)} | |||
50% {transform: translateY(0)} | |||
60% {transform: translateY(-200%)} | |||
100% {transform: translateY(-200%)} | |||
} | |||
#wlm-de .wlm-cta .cta-slides { | |||
animation: jump 7s infinite ease-in-out; | |||
animation-direction: alternate; | |||
} | |||
#wlm-de .wlm-cta:after { | |||
position: absolute; | |||
right: 0.7em; | |||
top: 50%; | |||
transform: translateY(-61%); | |||
content: '»'; | |||
display: block; | |||
font-size: 2em; | |||
font-weight: normal; | |||
transition: right 0.3s; | |||
} | |||
#wlm-de a:hover .wlm-cta:after { | |||
right: 0.4em; | |||
} | |||
#wlm-de .wlm-close { | |||
position: absolute; | |||
right: 0.4em; | |||
top: 0.4em; | |||
} | |||
.banner-container { | |||
margin: 0; | |||
max-width: 100%; | |||
} | |||
@media screen and (max-width:719px) { | |||
#wlm-de > a .wlm-logo { | |||
position: absolute; | |||
background-image: url('//upload.wikimedia.org/wikipedia/commons/9/99/WLM_Sharing_Heritage_Logo_neg.svg'); | |||
} | |||
#wlm-de>a { | |||
display: block; | |||
table-layout: auto; | |||
height: auto; | |||
} | |||
#wlm-de>a>* { | |||
display: block; | |||
width: 100%!important; | |||
min-height: 88px; | |||
vertical-align: middle; | |||
} | |||
#wlm-de>a>.wlm-cta { | |||
font-size: .8em; | |||
min-height: 2.8em; | |||
padding-right: 3em; | |||
} | |||
#wlm-de>a .wlm-logo { | |||
background-position: 48% 47%; | |||
} | |||
#wlm-de>a br { | |||
display: none; | |||
} | |||
#wlm-de .wlm-close { | |||
right: 0; | |||
top: 0; | |||
} | |||
#wlm-de .wlm-close a { | |||
display: block; | |||
padding: 1em 1em .5em .5em; | |||
} | |||
} | |||
@media screen and (max-width:55.8em) { | |||
.wlm-de { | |||
position: relative; | |||
top: -1px; | |||
margin-left: -20px!important; | |||
margin-right: -20px!important; | |||
} | |||
.wlm-de .outer-box, | |||
.wlm-de .inner-box { | |||
padding-left: 2em!important; | |||
padding-right: 2em!important; | |||
} | |||
.wlm-de .inner-box { | |||
margin-left: -2em!important; | |||
margin-right: -2em!important; | |||
} | |||
.wlm-de .wlm-title { | |||
font-size: 5.4vw!important; | |||
} | |||
} | |||
@media screen and (max-width:30em) { | |||
.wlm-de .wlm-title { | |||
font-size: 7.2vw!important; | |||
} | |||
} | |||
</style> | |||
<script type="text/javascript"> | |||
function updateTime(){ | |||
var fs = 1000; | |||
var fm = fs * 60; | |||
var fh = fm * 60; | |||
var fd = fh * 24; | |||
var delta = Math.max(0, Date.UTC(2018, 8, 30, 22, 0) - new Date()); | |||
var days = Math.floor(delta / fd); | |||
var hours = Math.floor((delta % fd) / fh); | |||
var minutes = Math.floor((delta % fh) / fm); | |||
var seconds = Math.floor((delta % fm) / fs); | |||
var str = (days>1)? days + ' Tage, ' : | |||
(days<=0)? '' : 'ein Tag, ' ; | |||
str += (hours >1)? hours + ' Stunden und ' : | |||
(hours <=0)? '' : 'eine Stunde und ' ; | |||
str += (minutes>1)? minutes + ' Minuten' : | |||
(minutes <=0)? '' : 'eine Minute' ; | |||
console.log('delta :' + delta + ' str: '+str); | |||
$('.count-down').text(str); | |||
} | |||
setInterval(updateTime, 30000); | |||
updateTime(); | |||
</script> | |||
<div id="wlm-de"> | |||
<a href="https://de.m.wikipedia.org/wiki/Wikipedia:Wiki_Loves_Monuments_2018/Deutschland" target="_blank"> | |||
<div class="wlm-logo">WIKI loves monuments</div> | |||
<div class="wlm-image"></div> | |||
<div class="wlm-cta"><div class="cta-slides"><div class="cta-slide"><div>{{{text}}}</div></div><div class="cta-slide"><div>{{{Text2}}}</div></div><!--<div class="cta-slide"><div>Nur noch <span class="count-down">wenige Tage</span> – Jetzt hochladen!</div></div>//--></div></div> | |||
</a> | |||
<div id="cn-toggle-box" class="wlm-close"> | |||
<a href="#" title="{{int:centralnotice-shared-hide}}" onclick="mw.centralNotice.hideBanner();return false;"> | |||
<img border="0" src="https://upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="{{int:centralnotice-shared-hide}}" /></a> | |||
</div> | |||
</div> |
Version vom 10. September 2018, 15:31 Uhr
<a href="https://itunes.apple.com/de/artist/christian-wolf/id903688769/"><img src="//hurraki.de/w/images/7/74/Leichte_Sprache_App_Apple_banner.jpg" title="Leichte Sprache App für iPhone und iPad" style="border: none; float: middle; width: 800px; height: 221px; margin-right: .8em; vertical-align: middle;" /></a>
<a href="#" title="Schließen" onclick="mw.centralNotice.hideBanner();return false;"><img border="0" src="//upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="Schließen" /></a>
<style type="text/css">
#wlm-de { padding: 0; width: 100%; margin-bottom: 1em; position: relative; } #mw-mf-viewport #wlm-de { margin-bottom: 0!important; } #wlm-de>a { display: table; table-layout: fixed; border: 1px solid rgba(0, 0, 0, 0.3); background-color: #FFF; font-size: 15px; font-weight: bold; line-height: 1.4; text-align: left; width: 100%; padding: 0; box-shadow: 0.1em 0.1em 0.6em 0 rgba(0, 0, 0, 0.4); transition: box-shadow 0.3s; height: auto; text-decoration: none; } #wlm-de>a:hover { text-decoration: none; box-shadow: 0.06em 0.06em 0.4em 0 rgba(0, 0, 0, 0.7); } #wlm-de, #wlm-de * { box-sizing: border-box; } #wlm-de>a>* { display: table-cell; vertical-align: middle; padding: 0.7em 1.5em; } #wlm-de>a .wlm-logo { width: 13rem; text-indent: -1000em; background-image: url('//upload.wikimedia.org/wikipedia/commons/b/b3/WLM_Sharing_Heritage_Logo.svg'); background-repeat: no-repeat; background-size: contain; background-position: 40% 47%; height:5rem; }
@keyframes scroll { 100% { background-position: 1000em 50% } } #wlm-de>a .wlm-image { background-size: auto 100%; background-repeat: repeat-x; background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/d/de/WLM-Banner-Bg-2017.jpg/865px-WLM-Banner-Bg-2017.jpg'); background-position: 0 50%; animation: scroll 500s infinite linear; } #wlm-de>a:hover .wlm-image { animation-play-state: paused; } #wlm-de .wlm-cta { position: relative; background-color: #8F0000; color: #FFF; width: 20em; padding-right: 2.5em; overflow: hidden; }
#wlm-de .wlm-cta .cta-slides { position:relative; }
#wlm-de .cta-slide { display: flex; flex-direction: column; justify-content: center; }
#wlm-de .wlm-cta .cta-slide:last-child { position:absolute; top:200%; left:0; right:0; bottom:-200%; }
@keyframes jump { 0% {transform: translateY(0)} 50% {transform: translateY(0)} 60% {transform: translateY(-200%)} 100% {transform: translateY(-200%)} }
#wlm-de .wlm-cta .cta-slides { animation: jump 7s infinite ease-in-out; animation-direction: alternate; }
#wlm-de .wlm-cta:after { position: absolute; right: 0.7em; top: 50%; transform: translateY(-61%); content: '»'; display: block; font-size: 2em; font-weight: normal; transition: right 0.3s; } #wlm-de a:hover .wlm-cta:after { right: 0.4em; } #wlm-de .wlm-close { position: absolute; right: 0.4em; top: 0.4em; } .banner-container { margin: 0; max-width: 100%; } @media screen and (max-width:719px) { #wlm-de > a .wlm-logo { position: absolute; background-image: url('//upload.wikimedia.org/wikipedia/commons/9/99/WLM_Sharing_Heritage_Logo_neg.svg'); } #wlm-de>a { display: block; table-layout: auto; height: auto; } #wlm-de>a>* { display: block; width: 100%!important; min-height: 88px; vertical-align: middle; }
#wlm-de>a>.wlm-cta { font-size: .8em; min-height: 2.8em; padding-right: 3em; }
#wlm-de>a .wlm-logo { background-position: 48% 47%; } #wlm-de>a br { display: none; } #wlm-de .wlm-close { right: 0; top: 0; } #wlm-de .wlm-close a { display: block; padding: 1em 1em .5em .5em; } } @media screen and (max-width:55.8em) { .wlm-de { position: relative; top: -1px; margin-left: -20px!important; margin-right: -20px!important; } .wlm-de .outer-box, .wlm-de .inner-box { padding-left: 2em!important; padding-right: 2em!important; } .wlm-de .inner-box { margin-left: -2em!important; margin-right: -2em!important; } .wlm-de .wlm-title { font-size: 5.4vw!important; } } @media screen and (max-width:30em) { .wlm-de .wlm-title { font-size: 7.2vw!important; } }
</style>
<script type="text/javascript"> function updateTime(){
var fs = 1000; var fm = fs * 60; var fh = fm * 60; var fd = fh * 24;
var delta = Math.max(0, Date.UTC(2018, 8, 30, 22, 0) - new Date());
var days = Math.floor(delta / fd); var hours = Math.floor((delta % fd) / fh); var minutes = Math.floor((delta % fh) / fm); var seconds = Math.floor((delta % fm) / fs);
var str = (days>1)? days + ' Tage, ' : (days<=0)? : 'ein Tag, ' ;
str += (hours >1)? hours + ' Stunden und ' : (hours <=0)? : 'eine Stunde und ' ;
str += (minutes>1)? minutes + ' Minuten' : (minutes <=0)? : 'eine Minute' ;
console.log('delta :' + delta + ' str: '+str); $('.count-down').text(str);
}
setInterval(updateTime, 30000); updateTime(); </script>
<a href="https://de.m.wikipedia.org/wiki/Wikipedia:Wiki_Loves_Monuments_2018/Deutschland" target="_blank">
WIKI loves monuments
</a>
<a href="#" title="⧼centralnotice-shared-hide⧽" onclick="mw.centralNotice.hideBanner();return false;"> <img border="0" src="https://upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="⧼centralnotice-shared-hide⧽" /></a>