Teamliste verbessert.
parent
adb7294552
commit
08dd14b273
|
|
@ -644,11 +644,38 @@ aside {
|
|||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.candidates li a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
padding-top: 4px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-bottom: 4px;
|
||||
margin-top: -4px;
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.candidates li a:hover {
|
||||
background-color: #efebdc;
|
||||
}
|
||||
.candidates li a:after {
|
||||
content: 'mehr';
|
||||
display: block;
|
||||
clear: both;
|
||||
position: relative;
|
||||
top: -1.5em;
|
||||
height: 0px;
|
||||
left: 20px;
|
||||
font-style: italic;
|
||||
color: #00aff0;
|
||||
}
|
||||
.candidates img {
|
||||
float: right;
|
||||
width: 150px;
|
||||
height: auto;
|
||||
border: 3px solid #bedc0a;
|
||||
border: 3px solid #00aff0;
|
||||
border-radius: 3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ iframe {
|
|||
position : relative;
|
||||
top : 64px;
|
||||
left : 10%;
|
||||
z-index : 2;
|
||||
transition: height 2s, top 2s, left 2s, margin-right 2s;
|
||||
}
|
||||
|
||||
|
|
@ -138,6 +139,7 @@ iframe {
|
|||
overflow : visible;
|
||||
top : 64px;
|
||||
left : 10%;
|
||||
z-index : 2;
|
||||
transition: height 2s, top 2s, left 2s, font-size 2s, line-height 2s;
|
||||
}
|
||||
|
||||
|
|
@ -163,7 +165,7 @@ iframe {
|
|||
|
||||
#BoxLinksPos {
|
||||
position : absolute;
|
||||
top : 100%;
|
||||
top : 0px;
|
||||
margin-top : -66px;
|
||||
left : 0px;
|
||||
text-align : center;
|
||||
|
|
@ -172,6 +174,7 @@ iframe {
|
|||
|
||||
#BoxLinks {
|
||||
width : 100%;
|
||||
padding-top: 300px;
|
||||
overflow-x : scroll;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
|
@ -392,6 +395,9 @@ iframe {
|
|||
top : 0px;
|
||||
height : 200px;
|
||||
}
|
||||
#BoxLinks {
|
||||
padding-top: 200px;
|
||||
}
|
||||
#BoxTop .bgImage {
|
||||
padding-top : 13px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
(function () {
|
||||
let link = document.getElementById('europaLink');
|
||||
if (!link) {
|
||||
link = document.createElement('a');
|
||||
link.href = 'https://eu.klimaliste.org/';
|
||||
link.className = 'MenuLink';
|
||||
link.setAttribute('id', 'europaLink');
|
||||
let menu = document.getElementById('BoxLinks');
|
||||
if (!menu) {
|
||||
for (let i = 0; i < document.getElementsByTagName('div').length; i++)
|
||||
if ((' '+document.getElementsByTagName('div')[i].className+' ').indexOf(' nav__links ') >= 0) {
|
||||
menu = document.getElementsByTagName('div')[i];
|
||||
link.className = 'nav__item';
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!menu) {
|
||||
for (let i = 0; i < document.getElementsByTagName('ul').length; i++)
|
||||
if ((' '+document.getElementsByTagName('ul')[i].className+' ').indexOf(' main-menu ') >= 0) {
|
||||
menu = document.getElementsByTagName('ul')[i];
|
||||
let li = document.createElement('li');
|
||||
li.className = 'menu-item';
|
||||
menu.appendChild(li);
|
||||
menu = li;
|
||||
link.className = 'menu-link';
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (menu) menu.appendChild(link);
|
||||
}
|
||||
link.style.visibility = 'hidden';
|
||||
link.innerHTML = ''
|
||||
+'<span style="height:1.2em; width:1.8em; overflow:visible; display:inline-block; position:relative; vertical-align:middle; line-height:1em;" id="europa">'
|
||||
+' <svg style="height:1.2em; display:inline-block; vertical-align:middle; position:relative; max-width:none; " version="1.1" viewBox="0 0 3000 540" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">'
|
||||
+' <defs>'
|
||||
+' <clipPath clipPathUnits="userSpaceOnUse" id="europaClipNo"></clipPath>'
|
||||
+' <clipPath clipPathUnits="userSpaceOnUse" id="europaTextClip">'
|
||||
+' <rect x="810" y="0" width="2190" height="540">'
|
||||
+' </clipPath>'
|
||||
+' </defs>'
|
||||
+' <rect width="810" height="540" fill="#003399" id="europaSky"/>'
|
||||
+' <g fill="#ffcc00" stroke-width=".999997">'
|
||||
+' <path d="m404.999 59.9998-6.73632 20.7284h-21.7948l17.6328 12.8125-6.73826 20.7304 17.6367-12.8125 17.6366 12.8125-6.73826-20.7323 17.6328-12.8105h-21.7948l-6.73631-20.7284z"/>'
|
||||
+' <path d="m494.999 84.115-6.73631 20.7284h-21.7948l17.6328 12.8106-6.73826 20.7304 17.6366-12.8125 17.6367 12.8125-6.73826-20.7304 17.6328-12.8106h-21.7948l-6.73632-20.7284z"/>'
|
||||
+' <path d="m560.884 150-6.73437 20.7284h-21.7948l17.6309 12.8105-6.73632 20.7324 17.6348-12.8125 17.6308 12.8125-6.7324-20.7324 17.6328-12.8105h-21.7948l-6.7363-20.7284z"/>'
|
||||
+' <path d="m584.999 239.999-6.73632 20.7284h-21.7948l17.6328 12.8105-6.73826 20.7323 17.6367-12.8125 17.6366 12.8125-6.73826-20.7304 17.6328-12.8125h-21.7948l-6.73631-20.7284z"/>'
|
||||
+' <path d="m560.884 329.999-6.73437 20.7284h-21.7948l17.6309 12.8105-6.73632 20.7324 17.6348-12.8125 17.6308 12.8125-6.7324-20.7304 17.6328-12.8125h-21.7948l-6.7363-20.7284z"/>'
|
||||
+' <path d="m494.999 395.884-6.73631 20.7304h-21.7948l17.6328 12.8106-6.73826 20.7304 17.6366-12.8125 17.6367 12.8125-6.73631-20.7304 17.6308-12.8106h-21.7948l-6.73632-20.7304z"/>'
|
||||
+' <path d="m404.999 419.999-6.73632 20.7284h-21.7948l17.6328 12.8125-6.73826 20.7304 17.6367-12.8125 17.6366 12.8125-6.73826-20.7323 17.6328-12.8105h-21.7948l-6.73631-20.7284z"/>'
|
||||
+' <path d="m314.999 395.884-6.73631 20.7304h-21.7948l17.6309 12.8106-6.73631 20.7304 17.6366-12.8125 17.6367 12.8125-6.73826-20.7304 17.6328-12.8106h-21.7948l-6.73632-20.7304z"/>'
|
||||
+' <path d="m249.114 329.999-6.73631 20.7284h-21.7948l17.6328 12.8125-6.7324 20.7304 17.6308-12.8125 17.6348 12.8125-6.73631-20.7324 17.6309-12.8105h-21.7948l-6.73436-20.7284z"/>'
|
||||
+' <path d="m224.999 239.999-6.73632 20.7284h-21.7948l17.6328 12.8125-6.73826 20.7304 17.6367-12.8125 17.6366 12.8125-6.73826-20.7323 17.6328-12.8105h-21.7948l-6.73631-20.7284z"/>'
|
||||
+' <path d="m249.114 150-6.73631 20.7284h-21.7948l17.6328 12.8105-6.7324 20.7324 17.6308-12.8125 17.6348 12.8125-6.73631-20.7324 17.6309-12.8105h-21.7948l-6.73436-20.7284z"/>'
|
||||
+' <path d="m314.999 84.115-6.73631 20.7284h-21.7948l17.6328 12.8106-6.73826 20.7304 17.6366-12.8125 17.6367 12.8125-6.73826-20.7304 17.6328-12.8106h-21.7948l-6.73632-20.7284z"/>'
|
||||
+' </g>'
|
||||
+' <text xml:space="preserve" x="860" y="200" fill="currentcolor" clip-path="url(#europaClipNo)">'
|
||||
+' <tspan x="880" y="200" style="font-size:192px; ">Wir treten zur</tspan>'
|
||||
+' <tspan x="880" y="440" style="font-size:192px; ">Europawahl an!</tspan>'
|
||||
+' </text>'
|
||||
+' <text xml:space="preserve" x="860" y="200" fill="currentcolor" clip-path="url(#europaClipNo)">'
|
||||
+' <tspan x="880" y="200" style="font-size:192px; ">Unterstütze uns</tspan>'
|
||||
+' <tspan x="880" y="440" style="font-size:192px; ">mit einer Spende.</tspan>'
|
||||
+' </text>'
|
||||
+' <text xml:space="preserve" x="860" y="200" fill="currentcolor" clip-path="url(#europaClipNo)">'
|
||||
+' <tspan x="880" y="200" style="font-size:192px; ">Damit Klimaschutz im</tspan>'
|
||||
+' <tspan x="880" y="440" style="font-size:192px; ">Wahlkampf sichtbar ist!</tspan>'
|
||||
+' </text>'
|
||||
+' </svg>'
|
||||
+'</span>';
|
||||
var menuBox = document.getElementById('europa');
|
||||
var flag = menuBox.getElementsByTagName('svg')[0];
|
||||
var texts = flag.getElementsByTagName('text');
|
||||
var textRect = document.getElementById('europaTextClip').getElementsByTagName('rect')[0];
|
||||
var stars = flag.getElementsByTagName('g')[0].getElementsByTagName('path');
|
||||
var sky = document.getElementById('europaSky');
|
||||
let absLeft = 0;
|
||||
let absTop = 0;
|
||||
let el = menuBox;
|
||||
while (el) {
|
||||
absLeft += el.offsetLeft;
|
||||
absTop += el.offsetTop;
|
||||
el = el.offsetParent;
|
||||
}
|
||||
var x = document.body.offsetWidth * 0.6 - absLeft;
|
||||
var y = 6;
|
||||
if (absTop > 100) y = -6;
|
||||
var p = 0;
|
||||
let spl = document.cookie.split(';');
|
||||
for (let i = 0; i < spl.length; i++) {
|
||||
spl[i] = spl[i].split('=');
|
||||
if (spl[i].length == 2 && spl[i][0].trim() == 'europeAnimationProgress') {
|
||||
p = parseFloat(spl[i][1]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
var starts = [0, 0.4, 1, 2.5, 3, 4.5, 5, 5.5, 7, 7.5, 8.5];
|
||||
var durations = [0.5, 2, 0.5, 0.5, 0.5, 0.5, 0.5, 1.5, 0.5, 1.5, 0.5];
|
||||
function apply () {
|
||||
let s = new Array();
|
||||
for (let i = 0; i < starts.length; i++) {
|
||||
s[i] = p-starts[i];
|
||||
if (s[i] < 0) s[i] = 0;
|
||||
s[i] /= durations[i];
|
||||
if (s[i] > 1) s[i] = 1;
|
||||
}
|
||||
p += 0.01;
|
||||
flag.style.left = x * (1-s[9])**2 + 'px';
|
||||
flag.style.top = y * (1-s[9]**2) + 'em';
|
||||
flag.style.height = 3 * (1-s[9]) + 1.2*s[9] + 'em';
|
||||
menuBox.style.width = 1.8 * s[10] + 'em';
|
||||
sky.setAttribute('y', (1-s[0])*270);
|
||||
sky.setAttribute('height', s[0]*540);
|
||||
for (let i = 0; i < 12; i++) {
|
||||
if (s[1]-i/12 > 0) stars[i].setAttribute('fill-opacity', 1);
|
||||
else stars[i].setAttribute('fill-opacity', 0);
|
||||
if (s[7]-i/12 > 0) stars[i].setAttribute('fill', '#bedc0a');
|
||||
}
|
||||
if (s[2] > 0 && s[3] < 1) {
|
||||
if (s[2] < 1) textRect.setAttribute('width', 2190*s[2]);
|
||||
else textRect.setAttribute('width', 2190*(1-s[3]));
|
||||
texts[0].setAttribute('clip-path', 'url(#europaTextClip)');
|
||||
} else texts[0].setAttribute('clip-path', 'url(#europaClipNo)');
|
||||
if (s[4] > 0 && s[5] < 1) {
|
||||
if (s[4] < 1) textRect.setAttribute('width', 2190*s[4]);
|
||||
else textRect.setAttribute('width', 2190*(1-s[5]));
|
||||
texts[1].setAttribute('clip-path', 'url(#europaTextClip)');
|
||||
} else texts[1].setAttribute('clip-path', 'url(#europaClipNo)');
|
||||
if (s[6] > 0 && s[8] < 1) {
|
||||
if (s[6] < 1) textRect.setAttribute('width', 2190*s[6]);
|
||||
else textRect.setAttribute('width', 2190*(1-s[8]));
|
||||
texts[2].setAttribute('clip-path', 'url(#europaTextClip)');
|
||||
} else texts[2].setAttribute('clip-path', 'url(#europaClipNo)');
|
||||
if ((p == Math.floor(p)) || (s[s.length-1] >= 1))
|
||||
document.cookie = 'europeAnimationProgress='+p+';path=/;SameSite=None';
|
||||
if (s[s.length-1] >= 1) window.clearInterval(timer);
|
||||
}
|
||||
var timer = window.setInterval(apply, 10);
|
||||
apply(0);
|
||||
link.style.visibility = 'visible';
|
||||
})();
|
||||
Loading…
Reference in New Issue