MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 6: | Zeile 6: | ||
---------- | ---------- | ||
<!-- For guidance or help with this banner, contact Seddon (WMF) --> | |||
<!-- This banners is set up to run to loggedin users only --> | |||
<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 | /* Main banner container. Banner: background, border colour and width and adding a margin between banner and article header*/ | ||
.cnotice { | .cnotice { | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
background: # | background: #f8f9fa; | ||
border: 1px solid | border: 1px solid #a2a9b1; | ||
border-radius: 2px; | |||
margin-bottom: 1em; | margin-bottom: 1em; | ||
cursor: pointer; | cursor: pointer; | ||
color: #222; | color: #222; | ||
font-weight: 500; | font-weight: 500; | ||
} | } | ||
Zeile 27: | Zeile 32: | ||
display: table; | display: table; | ||
width: 100%; | width: 100%; | ||
height: | 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-message-container, | ||
.cnotice-logo-container { | .cnotice-logo-container, | ||
.cnotice-misc-container { | |||
display: table-cell; | display: table-cell; | ||
height: 100%; | height: 100%; | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
Zeile 55: | Zeile 53: | ||
position: relative; | position: relative; | ||
margin: 0; | margin: 0; | ||
line-height: 1.2; | line-height: 1.2; | ||
padding: 5px 5px 5px 5px; | |||
padding: | |||
} | } | ||
@media (min-width: 1200px) { | @media (min-width: 1200px) { | ||
.cnotice-message { | .cnotice-message { | ||
padding: 11px | padding: 15px 0px 11px 30px; | ||
} | } | ||
} | } | ||
body.rtl .cnotice-message { | body.rtl .cnotice-message { | ||
padding: | padding: 5px 5px 5px 5px; | ||
} | } | ||
.cnotice-message p { | .cnotice-message p { | ||
margin: 0; | margin: 0; | ||
color: #222; | |||
font-family: Arial, sans-serif; | font-family: Arial, sans-serif; | ||
font- | font-weight: bold; | ||
font-size: | font-size: 100%; | ||
opacity: 1; | opacity: 1; | ||
text-align: center; | text-align: center; | ||
Zeile 84: | Zeile 80: | ||
@media (min-width: 1200px) { | @media (min-width: 1200px) { | ||
.cnotice-message p { font-size: | .cnotice-message p { font-size: 120%; } | ||
} | } | ||
Zeile 91: | Zeile 87: | ||
.cnotice-logo-container { | .cnotice-logo-container { | ||
width: 10%; | width: 10%; | ||
} | } | ||
body.rtl .cnotice-logo-container { | body.rtl .cnotice-logo-container { | ||
padding: | padding: 0 .25em 0 .9em; | ||
} | } | ||
Zeile 101: | Zeile 96: | ||
opacity: 1; | opacity: 1; | ||
display: block; | display: block; | ||
margin: | 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 --- */ | /* --- Close Options --- */ | ||
#cnotice-toggle-box-options { | #cnotice-toggle-box-options { | ||
display: | display: table-cell; | ||
font-size: .8em; | font-size: .8em; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
width: 38px; | |||
height: 38px; | |||
border-radius: 19px; | |||
vertical-align: middle; | |||
} | } | ||
#cnotice-toggle-box { | #cnotice-toggle-box { | ||
cursor: pointer; | cursor: pointer; | ||
opacity: . | position: absolute; | ||
top: 2px; | |||
right: 3px; | |||
z-index: 1; | |||
opacity: .8; | |||
} | } | ||
#cnotice-toggle-box | body.rtl #cnotice-toggle-box { | ||
left: 3px; | |||
right: unset; | |||
} | } | ||
#cnotice-toggle-box:hover { | |||
opacity: 1; | |||
} | } | ||
Zeile 151: | Zeile 153: | ||
.cnotice a.cnotice-full-banner-click:hover { | .cnotice a.cnotice-full-banner-click:hover { | ||
text-decoration: underline | text-decoration: underline; | ||
} | } | ||
.cnotice-button { | .cnotice-button { | ||
display: inline-block; | |||
border: | border: 2px solid #36c; | ||
border-radius: 2px; | |||
border-radius: | color: #fff; | ||
color: | padding: 5px 5px; | ||
padding: | |||
text-align: center; | text-align: center; | ||
font-weight: bold; | font-weight: bold; | ||
text-decoration: none; | text-decoration: none; | ||
font-size: | font-size: 14px; | ||
margin: 4px 2px; | margin: 4px 2px; | ||
-webkit-transition-duration: | -moz-transition-duration: 100ms; /* Firefox */ | ||
transition-duration: | -webkit-transition-duration: 100ms; /* Safari */ | ||
transition-duration: 100ms; | |||
cursor: pointer; | cursor: pointer; | ||
z-index: | z-index: 1; | ||
min-width: 80px; | |||
} | } | ||
@media (min-width: | @media (min-width: 1100px) { | ||
.cnotice-button { | .cnotice-button { | ||
min-width: 110px; | |||
width: 25%; | width: 25%; | ||
margin: auto; | margin: auto; | ||
} | } | ||
} | } | ||
Zeile 189: | Zeile 187: | ||
cursor: pointer; | cursor: pointer; | ||
text-decoration: none; | text-decoration: none; | ||
color: | color: #000; | ||
} | } | ||
.cnotice a.cnotice-buttonlink:hover { | .cnotice a.cnotice-buttonlink:hover { | ||
color: | color: #fff; | ||
} | } | ||
.cnotice-button1 { | .cnotice-button1 { | ||
background-color: # | background-color: #36c; | ||
color: | border-color: #36c; | ||
color: #fff; | |||
} | } | ||
.cnotice-button1:hover { | |||
background-color: #447ff5; | |||
border-color: #447ff5; | |||
} | |||
.cnotice-button1: | .cnotice-button1:active { | ||
background-color: # | background-color: #2a4b8d; | ||
border-color: #2a4b8d; | |||
} | |||
.rtl .cnotice-button1 { | |||
left: 23px; | |||
right: auto; | |||
margin-left: 20px; | |||
} | |||
#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> | </style> | ||
<div class="cnotice" id="{{{banner}}}"> | <div class="cnotice" id="{{{banner}}}"> | ||
<a class="cnotice-full-banner-click external text" href="// | <a class="cnotice-full-banner-click external text" href="//de.wikipedia.org/wiki/Wikipedia:WikiDACH/2018/Anmeldung"> | ||
<div id="cnotice-main"> | <div id="cnotice-main"> | ||
<div class="cnotice-logo-container"> | <div class="cnotice-logo-container"> | ||
<img src="//upload.wikimedia.org/wikipedia/commons/ | <img src="//upload.wikimedia.org/wikipedia/commons/e/e7/2018_05_16_barcamp_meets_Logo_Kopie_querformat.svg" alt="Banner logo" width="188px" height="55px"> | ||
</div> | </div> | ||
<div class="cnotice-message-container"> | <div class="cnotice-message-container"> | ||
<div class="cnotice-message"> | <div class="cnotice-message"> | ||
<p> | <p>Erfahre mehr über die Wikipedia und triff Beteiligte beim Barcamp WikiDACH am 22. + 23. September in Heidelberg. Jetzt Ticket sichern!</p> | ||
</div> | </div> | ||
</div> | </div> | ||
<div | <div class="cnotice-misc-container"> | ||
<div class="cnotice-button cnotice-button1">{{int:Centralnotice-strategic_plan1-learn-more}}</div> | |||
</div> | |||
</div> | </div> | ||
</a> | </a> | ||
<div id="cnotice-toggle-box | <div id="cnotice-toggle-box"> | ||
< | <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> | ||
</div> | </div> | ||
</div> | </div> |
Version vom 10. September 2018, 15:51 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>
@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*/
- 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 --- */
- cnotice-toggle-box-options {
display: table-cell; font-size: .8em; text-transform: uppercase; width: 38px; height: 38px; border-radius: 19px; vertical-align: middle;
}
- 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;
}
- 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;
}
- 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>
<a class="cnotice-full-banner-click external text" href="//de.wikipedia.org/wiki/Wikipedia:WikiDACH/2018/Anmeldung">
<img src="//upload.wikimedia.org/wikipedia/commons/e/e7/2018_05_16_barcamp_meets_Logo_Kopie_querformat.svg" alt="Banner logo" width="188px" height="55px">
</a>
<a href="#" title="⧼centralnotice-shared-hide⧽" onclick="mw.centralNotice.hideBanner();return false;"><img border="0" src="//upload.wikimedia.org/wikipedia/donate/a/ac/Close_oojs.png" alt="⧼centralnotice-shared-hide⧽" /></a>