commit 0b0e327260f51385dd38ce49dd13381711526f49 Author: martlem Date: Wed Oct 23 22:47:43 2024 +0200 test de grille pour un fond de pad diff --git a/pad-en-grille/cssVarCookies.css b/pad-en-grille/cssVarCookies.css new file mode 100644 index 0000000..36209c3 --- /dev/null +++ b/pad-en-grille/cssVarCookies.css @@ -0,0 +1,32 @@ +#cvfc p::before {content:":root{}"} + +#cvfc:hover p::before {content:":root{"} +#cvfc:hover::after {content:"}"} + +#cvfc { + z-index:10000; + position:fixed; + bottom:10px; + left:10px; + background:whitesmoke; + border:1px solid black; + overflow:hidden; +border-radius:5px; +padding:10px; +width:fit-content; + +line-height:auto; +} +#cvfc::after, #cvfc * {color:black !important;font-size:16px; box-sizing:border-box;margin:0;font-family:Unifont;} +#cvfc tr {padding-left:2rem; display:flex;justify-content:space-between; gap:0px;width:inherit} +#cvfc tr:nth-of-type(2n - 1) {background:white} +#cvfc td {background:transparent;position:relative;width:inherit;height:18px !important; white-space:nowrap} +#cvfc td:last-of-type{border-bottom:1px solid transparent; padding-left:10px} +#cvfc textarea{padding:0;margin:0;resize:none; width:40ch;white-space:nowrap; +border:none;background:none} +#cvfc table {display:none; background:none} +#cvfc:hover table {display:inherit} +#cvfc tr:hover td:last-of-type {background:lightgray;border-bottom:1px solid black} +#cvfc:hover {border-color:black; + resize:horizontal; +} diff --git a/pad-en-grille/cssVarCookies.js b/pad-en-grille/cssVarCookies.js new file mode 100644 index 0000000..7e7257f --- /dev/null +++ b/pad-en-grille/cssVarCookies.js @@ -0,0 +1,42 @@ +function filterEntriesWithCSSVariables(obj) { + return Object.entries(obj).filter(([key, value]) => { + return typeof value === 'string' && value.startsWith('--'); + }); +} +const style = getComputedStyle(document.documentElement) +const cssVars = filterEntriesWithCSSVariables(style).map((v) => v[1]); + +const container = document.createElement('section') +container.innerHTML = '

' +container.setAttribute('id','cvfc') +document.body.appendChild(container) +const table = document.createElement('table') +container.appendChild(table) + +cssVars.reverse().forEach((cssVar) => { + let val = style.getPropertyValue(cssVar) + document.body.style.setProperty(cssVar,localStorage.getItem(cssVar) || val) + + const tr = document.createElement('tr') + + const key = document.createElement('td') + const value = document.createElement('td') + + const value_textArea = document.createElement('textarea') + value_textArea.setAttribute('rows',1) + value_textArea.addEventListener("input", function(){ + localStorage.setItem(cssVar, this.value); + document.body.style.setProperty(cssVar, this.value); + }); + + value_textArea.innerHTML = localStorage.getItem(cssVar) || val + value.appendChild(value_textArea) + + key.innerHTML = cssVar + + tr.appendChild(key) + tr.appendChild(value) + + table.appendChild(tr) +}) + diff --git a/pad-en-grille/index.html b/pad-en-grille/index.html new file mode 100644 index 0000000..bed891d --- /dev/null +++ b/pad-en-grille/index.html @@ -0,0 +1,138 @@ + + + + + + + + +

+ + +

+ + + + diff --git a/unifont-15.1.05.otf b/unifont-15.1.05.otf new file mode 100644 index 0000000..3d0dcd3 Binary files /dev/null and b/unifont-15.1.05.otf differ