MediaWiki:Vector-2022.js: Difference between revisions

Revision as of 14:15, 10 July 2022

var picArr = {"neutrois": "https://static.miraheze.org/nonbinarywiki/c/c1/Neutrois.png",
"nonbinary": "https://static.miraheze.org/nonbinarywiki/thumb/c/c0/Nonbinary.png/800px-Nonbinary.png",
"transgender": "https://static.miraheze.org/nonbinarywiki/c/cd/Transgender.png",
"genderqueer": "https://static.miraheze.org/nonbinarywiki/b/b5/Genderqueer.png",
"genderfluid": "https://static.miraheze.org/nonbinarywiki/1/12/Genderfluid.png",
"genderflux": "https://static.miraheze.org/nonbinarywiki/a/ae/Genderflux.png",
"agender": "https://static.miraheze.org/nonbinarywiki/8/83/Agender.png",
"androgyne": "https://static.miraheze.org/nonbinarywiki/7/73/Androgyne.png",
"ambonec": "https://static.miraheze.org/nonbinarywiki/2/2e/Ambonec.png",
"aporagender": "https://static.miraheze.org/nonbinarywiki/4/48/Aporagender.png",
"bigender": "https://static.miraheze.org/nonbinarywiki/7/7c/Bigender_by_no-bucks-for-this-doe.png",
"deminonbinary": "https://static.miraheze.org/nonbinarywiki/e/ee/Deminonbinary.png",
"graygender": "https://static.miraheze.org/nonbinarywiki/a/a2/Graygender_flag.png",
"intergender": "https://nonbinary.wiki/wiki/File:Intergender.png",
"multigender": "https://static.miraheze.org/nonbinarywiki/3/3b/Multigender.png",
"maverique": "https://static.miraheze.org/nonbinarywiki/e/e2/Maverique.png",
"polygender": "https://static.miraheze.org/nonbinarywiki/8/87/Polygender.png",
"trigender": "https://static.miraheze.org/nonbinarywiki/4/40/Trigender.png",
"demiboy": "https://static.miraheze.org/nonbinarywiki/5/5c/Demiboy.png",
"demigirl": "https://static.miraheze.org/nonbinarywiki/8/80/Demigirl.png",
"gender neutral": "https://static.miraheze.org/nonbinarywiki/f/f1/Gender_neutral_2_by_enbygsrd.png",
"transmasculine": "https://static.miraheze.org/nonbinarywiki/8/8d/Transmasculine_pride_flag.png",
"transfeminine": "https://static.miraheze.org/nonbinarywiki/b/b4/Transfeminine_pride_flag.png"};

var myNumber = Math.floor((Math.random() * 23));
var key = Object.keys(picArr)[myNumber];

var div = document.getElementById("mw-head");
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>';

/* 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;
}
`);