// ==UserScript==
// @name         Geoguessr custom status bar
// @version      1.0.0
// @description  Customize the color palette and fonts in the status bar from classic games
// @match        https://www.geoguessr.com/*
// @author       victheturtle#5159
// @license      MIT
// @namespace    https://greasyfork.org/users/967692-victheturtle
// @downloadURL none
// ==/UserScript==

// DEFINE YOUR GRADIENT OF COLORS FOR THE STATUS BAR BACKGROUND HERE
const gradient = `
#D22F2FBF 0%,
#FD6E00BF 20%,
#FEEE60BF 40%,
#4BAD4FBF 60%,
#1975D0BF 80%,
#8E26AABF 100%
`;
// The format for colors is #rrggbbaa: red (between 00 and ff), green (between 00 and ff), blue (between 00 and ff),
//                                     opacity (00 = transparent, ff = opaque, defaults to ff if you don't write it)
// If you have no idea how your favourite color is written in hex, go there: https://redketchup.io/color-picker
// Percentages are from top (0%) to bottom (100%) of the progress bar.
// So the color written with 0% is going to be the color at the top of the progress bar.
// You can add (and remove) any number of intermediate percentages, just don't forget the coma between the lines
// If you want just one color (not a gradient) you can just set the same color for both 0% and 100% and remove everything else

// COLOR OF THE "MAP", "ROUND", "SCORE"... LABELS
const labelColor = `#8E26AABF`;

// COLOR OF THE OTHER TEXTS (name of the map, 1/5...)
const valueColor = `#FFFFFFFF`;

// FONTS FOR THESE TEXTS
const fonts = ``;
// example:
// const fonts = `"Comic Sans MS", "Comic Sans"`;
// const fonts = ``; for keeping geoguessr's default

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



var style = document.createElement("style");
document.head.appendChild(style);
style.sheet.insertRule(`div[class*='slanted-wrapper_variantPurple__'] { --variant-background-color: linear-gradient(180deg, ${gradient}); }`);
style.sheet.insertRule(`div[class*='status_label__'] { color: ${labelColor}; font-family: ${fonts}, neo-sans, sans-serif }`);
style.sheet.insertRule(`div[class*='status_value__'] { color: ${valueColor}; font-family: ${fonts}, neo-sans, sans-serif }`);