MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 5: | Zeile 5: | ||
----------< | ---------- | ||
<style> | |||
/* Main banner container. Banner: background gradient, border colour and width and adding a margin between banner and article header*/ | |||
/* Important -- background gradient -- If you change one you must change all*/ | |||
.cnotice { | |||
position: relative; | |||
overflow: hidden; | |||
</ | background: #FFFFFF; | ||
border: 1px solid rgba(0, 0, 0, 0.2); | |||
margin-bottom: 1em; | |||
cursor: pointer; | |||
color: #222; | |||
font-weight: 500; | |||
margin-bottom: 10px; | |||
} | |||
/* Sets the minimum banner height. If img + logo-container margins > height. Banner will be larger*/ | |||
#cnotice-main { | |||
display: table; | |||
width: 100%; | |||
height: 60px; /* need to set height for height 100% to work on elements within it */ | |||
} | |||
.cnotice-message-container, | |||
.cnotice-logo-container { | |||
display: table-cell; | |||
height: 100%; | |||
vertical-align: middle; | |||
} | |||
#localNotice { | |||
display: none; | |||
} | |||
#DTWMCH-flag { | |||
position: absolute; | |||
top: 10px; | |||
right: 50px; | |||
background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Innovation_-_The_Noun_Project.svg/50px-Innovation_-_The_Noun_Project.svg.png); | |||
height: 50px; | |||
width: 50px; | |||
background-repeat: no-repeat; | |||
} | |||
/* --- Main message --- */ | |||
.cnotice-message { | |||
position: relative; | |||
margin: 0; | |||
color: #4D4D4D; | |||
line-height: 1.2; | |||
font-weight: bold; | |||
padding: 11px 10px 11px 10px; | |||
} | |||
@media (min-width: 1200px) { | |||
.cnotice-message { | |||
padding: 11px 180px 11px 10px; | |||
} | |||
} | |||
body.rtl .cnotice-message { | |||
padding: 11px 40px 11px 10px; | |||
background-position: right 10px top 10px; | |||
} | |||
.cnotice-message p { | |||
margin: 0; | |||
font-family: Arial, sans-serif; | |||
font-style: bold; | |||
font-size: 14px; | |||
opacity: 1; | |||
text-align: center; | |||
padding-top: 10px; | |||
padding-bottom: 10px; | |||
} | |||
@media (min-width: 1200px) { | |||
.cnotice-message p { font-size: 14px; } | |||
} | |||
/* --- Logo Image text --- */ | |||
.cnotice-logo-container { | |||
width: 10%; | |||
padding: .5em 1.25em .5em .9em; | |||
} | |||
body.rtl .cnotice-logo-container { | |||
padding: 1.65em .5em .35em .2em; | |||
} | |||
.cnotice-logo-container img { | |||
opacity: 1; | |||
display: block; | |||
margin: 0 auto; | |||
} | |||
/* --- Close Options --- */ | |||
#cnotice-toggle-box-options { | |||
display: inline-block; | |||
position: absolute; | |||
right: .5em; | |||
top: .5em; | |||
font-size: .8em; | |||
text-transform: uppercase; | |||
} | |||
body.rtl #cnotice-toggle-box-options { | |||
right: auto; | |||
left: .5em; | |||
} | |||
#cnotice-toggle-box { | |||
display: inline-block; | |||
cursor: pointer; | |||
opacity: .5; | |||
} | |||
#cnotice-toggle-box:hover { opacity: 1; } | |||
#cnotice-toggle-box-x { | |||
background: url('//upload.wikimedia.org/wikipedia/donate/3/32/Close-thin.png') no-repeat center center; | |||
width: 9px; | |||
height: 9px; | |||
float: right; | |||
display: block; | |||
margin: .2em .4em; | |||
} | |||
body.rtl #cnotice-toggle-box-x { | |||
float: left; | |||
} | |||
/* --- 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 { | |||
background-color: #4caf50; /* Green */ | |||
border: none; | |||
display: none; | |||
border-radius: 4px; | |||
color: white; | |||
padding: 10px 16px; | |||
text-align: center; | |||
font-weight: bold; | |||
text-decoration: none; | |||
font-size: 12px; | |||
margin: 4px 2px; | |||
-webkit-transition-duration: 0.4s; /* Safari */ | |||
transition-duration: 0.4s; | |||
cursor: pointer; | |||
z-index: 999; | |||
} | |||
@media (min-width: 1200px) { | |||
.cnotice-button { | |||
display: inline-block; | |||
} | |||
} | |||
@media (max-width: 1200px) { | |||
.cnotice-button { | |||
width: 25%; | |||
margin: auto; | |||
margin-top: 10px; | |||
} | |||
} | |||
/* --- Buttons --- */ | |||
.cnotice a.cnotice-buttonlink { | |||
cursor: pointer; | |||
text-decoration: none; | |||
color: black; | |||
} | |||
.cnotice a.cnotice-buttonlink:hover { | |||
color: white; | |||
} | |||
.cnotice-button1 { | |||
background-color: #0082c0; | |||
color: white; | |||
position: static; | |||
top: 45%; | |||
right: 30px; | |||
transform: translateY(-45%); | |||
min-width: 110px; | |||
} | |||
@media (min-width: 1200px) { .cnotice-button1 { position: absolute; } } | |||
.cnotice-button1:hover { | |||
background-color: #447FF5; | |||
} | |||
</style> | |||
<div class="cnotice" id="{{{banner}}}"> | |||
<a class="cnotice-full-banner-click external text" href="//meta.wikimedia.org/wiki/Wikimedia_CH/Call_for_projects_2019"> | |||
<div id="cnotice-main"> | |||
<div class="cnotice-logo-container"> | |||
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/f/fe/WikimediaCHLogo.svg/50px-WikimediaCHLogo.svg.png"> | |||
</div> | |||
<div class="cnotice-message-container"> | |||
<div class="cnotice-message"> | |||
<p> | |||
<b>{{{text1}}}</b> | |||
</p> | |||
</div> | |||
</div> | |||
<div id="DTWMCH-flag"></div> | |||
</div> | |||
</a> | |||
<div id="cnotice-toggle-box-options"> | |||
<span id="cnotice-toggle-box" onclick="mw.centralNotice.hideBanner(); return false;"> | |||
<span id="cnotice-toggle-box-x"></span> | |||
</span> | |||
</div> | |||
</div> |