-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss-variable-editor.bookmarklet
1 lines (1 loc) · 2.95 KB
/
css-variable-editor.bookmarklet
1
javascript:(function(){;var%20cve=%7Binit:function()%7Bvar%20self=this;this.addJquery();setTimeout(function()%7Bself.addStyles();self.addEditor();self.addListeners()%7D,250)%7D,addJquery:function()%7Bvar%20s=document.createElement(%22script%22);s.type=%22text/javascript%22;s.src=%22https://code.jquery.com/jquery-3.2.1.min.js%22;document.body.appendChild(s)%7D,addStyles:function()%7Bvar%20self=this;$(%22head%22).append(%22%3Cstyle%3E%22+%22.cve%20%7B%22+%22position:%20fixed;%22+%22right:%200;%22+%22bottom:%200;%22+%22padding:%201rem;%22+%22font-size:%200.9rem%20!important;%22+%22color:%20black%20!important;%22+%22text-align:%20left;%22+%22border:%20solid%20#333333%20!important;%22+%22border-width:%201px%200%200%201px%20!important;%22+%22background-color:%20#f5f5f5%20!important;%22+%22%7D%22+%22%3C/style%3E%22)%7D,addEditor:function()%7Bvar%20self=this;$(%22body%22).append(%22%22+'%3Cdiv%20class=%22cve%22%3E'+'%3Cdiv%20class=%22cve__input%20cve__input--color%22%3E'+%22%3Clabel%3EBackground%20color:%3Cbr%3E%22+'%3Cinput%20type=%22color%22%20id=%22background-color%22%20value=%22#ffffff%22%3E'+%22%3C/label%3E%22+%22%3C/div%3E%22+'%3Cdiv%20class=%22cve__input%20cve__input--color%22%3E'+%22%3Clabel%3EFont%20color:%3Cbr%3E%22+'%3Cinput%20type=%22color%22%20id=%22font-color%22%20value=%22#ffffff%22%3E'+%22%3C/label%3E%22+%22%3C/div%3E%22+'%3Cdiv%20class=%22cve__input%20cve__input--text%22%3E'+%22%3Clabel%3EFont%20size:%3Cbr%3E%22+'%3Cinput%20type=%22range%22%20id=%22font-size%22%20min=%2250%22%20max=%22250%22%20step=%221%22%20value=%22150%22%3E'+%22%3C/label%3E%22+%22%3C/div%3E%22+'%3Cdiv%20class=%22cve__input%20cve__input--text%22%3E'+'%3Cbutton%20id=%22reset%22%3EReset%20styles%20and%20restart%3C/button%3E'+%22%3C/div%3E%22+%22%3C/div%3E%22)%7D,handleInput:function(property,value,unit)%7Bvar%20unit=unit%7C%7C%22%22;document.documentElement.style.setProperty(%22--%22+property,value+unit);localStorage.setItem(property,value+unit)%7D,addListeners:function()%7Bvar%20self=this;$(%22#background-color%22).on(%22change%22,function(e)%7Bself.handleInput(%22background-color%22,e.target.value)%7D);$(%22#font-color%22).on(%22change%22,function(e)%7Bself.handleInput(%22font-color%22,e.target.value)%7D);$(%22#font-size%22).on(%22input%22,function(e)%7Bself.handleInput(%22font-size%22,e.target.value,%22%25%22)%7D);$(%22#reset%22).on(%22click%22,function(e)%7BlocalStorage.clear();window.location.reload(true)%7D);$(document).ready(function()%7Bself.updateFromLocalStorage(%22background-color%22);self.updateFromLocalStorage(%22font-color%22);self.updateFromLocalStorage(%22font-size%22)%7D)%7D,updateFromLocalStorage:function(property)%7Bvar%20value=localStorage.getItem(property);var%20$input=$(%22#%22+property);if(value)%7Bdocument.documentElement.style.setProperty(%22--%22+property,value);$input.val(value.replace(%22rem%22,%22%22))%7Delse%7Bvalue=getComputedStyle(document.body).getPropertyValue(%22--%22+property);$input.val(value.replace(%22rem%22,%22%22).trim())%7D%7D%7D;cve.init();})()