User:Ember314/style.js

/*** * * common.css is lame, this is so much better * * work in progress * /

/*jshint esversion:6 */ $('body').prepend(" function changeg(select,val){if(select==1){ localStorage.setItem('mainColor', val)};	document.body.style.color = localStorage.getItem('mainColor'); document.getElementById('colorPick').value = standardize_color(localStorage.getItem('mainColor'))} ");

//1 is color const COLORS =['red','orange','yellow', 'green','blue','indigo','black']

const FONTS={ 'Times New Roman':{ 'family':'serif' },		'Georgia':{ 'family':'serif' },		'Garamond':{ 'family':'serif' },		'Arial':{ 'family':'Sans-serif' },		'Verdana':{ 'family':'Sans-serif' },		'Helvetica':{ 'family':'Sans-serif' },		'Courier New':{ 'family':'Monospace' },		'Lucida Console':{ 'family':'Monospace' },		'Monaco':{ 'family':'Monospace' },		'Brush Script MT':{ 'family':'Cursive' },		'Lucida Handwriting':{ 'family':'Cursive' },		'Copperplate':{ 'family':'Fantasy' },		'Papyrus':{ 'family':'Fantasy' }, }

const FONT_LIST = Object.getOwnPropertyNames(FONTS) $('body').prepend("  font  useless button :(  ");

$('body').prepend(' #styleTab{flex-direction:row;display:flex; flex-wrap: nowrap;justify-content:center;position: fixed;bottom: 0;height: 100px;width: 500px; z-index: 1000000;pointser-events: none; overflow: auto; background-color: #f8f9fa; border-top-right-radius:15px; border-style: solid; border-width: 1px 1px 0px 0px ; border-color: #a2a9b1;} '); $('body').prepend(' #color{ order:1;flex-wrap:wrap;}#idk{order:2;}#font{order:3;flex-wrap:wrap;} '); $('body').prepend(' .box{background-color:#f8f9fa;display:flex; flex-grow:1;justify-content:center;flex-direction:column;align-content:center;} '); $('body').prepend(' .intab{opacity:0.5;transition: opacity 0.5s;} .intab:hover{opacity:1;transition: opacity 0.5s;;}} ');

const colour = document.getElementById("color"); for(var i=0; i < COLORS.length; i++){ colour.innerHTML+=""+COLORS[i]+" " $('body').append(" #"+COLORS[i]+"Button{background-color:"+COLORS[i]+"} "); }

var select = document.getElementById("dropdown");

for(var i = 0; i < FONT_LIST.length; i++) { var opt = FONT_LIST[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); }

var changeFontStyle = function (type,val) {//1 is font, 2 is color if(type==1){ localStorage.setItem('mainFont',val.value) document.body.style.fontFamily = localStorage.getItem('mainFont') }       if(type==2){ localStorage.setItem('mainColor',val.value) document.body.style.color = localStorage.getItem('mainColor') document.getElementById('colorPick').value = localStorage.getItem('mainColor') }

}       if(localStorage.getItem('mainColor')!=null){ var colorr = localStorage.getItem('mainColor'); document.body.style.color = colorr if(document.getElementById('colorPick').value){ document.getElementById('colorPick').value = standardize_color(colorr) }else{ document.getElementById('colorPick').value = colorr } }if(localStorage.getItem('mainFont')!=null){ document.body.style.fontFamily = localStorage.getItem('mainFont') document.body.getElementById(dropdown).value = localStorage.getItem('mainFont') } function standardize_color(str){ var ctx = document.createElement("canvas").getContext("2d"); ctx.fillStyle = str; return ctx.fillStyle; }