438
edits
No edit summary |
No edit summary |
||
Line 29: | Line 29: | ||
div.style.backgroundImage="linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url('" + picArr[key] + "')"; | div.style.backgroundImage="linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url('" + picArr[key] + "')"; | ||
div.innerHTML += '<span class="nbweek-banner">Happy <a href="https://nonbinary.wiki/wiki/International_Nonbinary_Day">Nonbinary Awareness Week</a>!<br><span class="nbweek-flag">Currently showing the <a href="https://nonbinary.wiki/wiki/' + key + '">' + key + '</a> flag.</span></span>'; | div.innerHTML += '<span class="nbweek-banner">Happy <a href="https://nonbinary.wiki/wiki/International_Nonbinary_Day">Nonbinary Awareness Week</a>!<br><span class="nbweek-flag">Currently showing the <a href="https://nonbinary.wiki/wiki/' + key + '">' + key + '</a> flag.</span></span>'; | ||
/* Adds all the CSS so that if JS doesn't load, nothing will change. */ | |||
function addStyle(styleString) { | |||
const style = document.createElement('style'); | |||
style.textContent = styleString; | |||
document.head.append(style); | |||
} | |||
addStyle(` | |||
/* Defaults to the nonbinary flag */ | |||
#mw-head { | |||
background: white; | |||
background-repeat: repeat-x; | |||
background-size: contain; | |||
} | |||
/* Style article tabs for the flags */ | |||
.vector-menu-tabs .selected { | |||
background: rgba(255, 255, 255, .7); | |||
} | |||
.vector-menu-tabs li { | |||
background: rgba(255, 255, 255, .3); | |||
} | |||
.vector-menu-tabs li:hover { | |||
background: rgba(255, 255, 255, .7); | |||
} | |||
.vector-menu-tabs a { | |||
background-image: none; | |||
} | |||
/* "Happy Nonbinary Awareness Week" banner */ | |||
.nbweek-banner { | |||
background: rgba(255,255,255,.4); | |||
padding: 7px; | |||
position: absolute; | |||
bottom: 0; | |||
font-weight: bold; | |||
} | |||
.nbweek-flag { | |||
font-size: 80%; | |||
font-weight: normal; | |||
font-style: italic; | |||
} | |||
/* Adds transparent backgrouund to top user menu for better readability */ | |||
#p-personal { | |||
background: rgba(255, 255, 255, .7); | |||
top: 0; | |||
right: 0; | |||
padding-top: 5px; | |||
padding-right: 15px; | |||
border-radius: 0 0 0 5px; | |||
display: inline; | |||
right: 0; | |||
} | |||
#p-personal ul { | |||
padding: 0; | |||
} | |||
`); |