commit
0b0e327260
4 changed files with 212 additions and 0 deletions
@ -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; |
||||
|
} |
||||
@ -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 = '<p></p>' |
||||
|
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) |
||||
|
}) |
||||
|
|
||||
@ -0,0 +1,138 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<title></title> |
||||
|
<script src="cssVarCookies.js" defer></script> |
||||
|
<link rel="stylesheet" href="cssVarCookies.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<section> |
||||
|
<nav></nav> |
||||
|
<textarea id="pad" name="" cols="30" rows="100"> |
||||
|
|
||||
|
0042: |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
##### |
||||
|
# # |
||||
|
# # |
||||
|
# # |
||||
|
##### |
||||
|
# # |
||||
|
# # |
||||
|
# # |
||||
|
# # |
||||
|
##### |
||||
|
|
||||
|
|
||||
|
|
||||
|
0043: |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
#### |
||||
|
# # |
||||
|
# # |
||||
|
# |
||||
|
# |
||||
|
# |
||||
|
# |
||||
|
# # |
||||
|
# # |
||||
|
#### |
||||
|
|
||||
|
|
||||
|
</textarea> |
||||
|
</section> |
||||
|
</body> |
||||
|
</html> |
||||
|
<style> |
||||
|
:root { |
||||
|
--dim:24px; |
||||
|
--largeur-1:2.0px; |
||||
|
--largeur-0:1px; |
||||
|
--couleur-A:lightgreen; |
||||
|
--couleur-B:lightgray; |
||||
|
} |
||||
|
#pad, nav{ |
||||
|
font-size:var(--dim); |
||||
|
letter-spacing: calc(var(--dim) * .31); |
||||
|
line-height:var(--dim); |
||||
|
font-size-adjust:0.7; |
||||
|
font-family:Unifont |
||||
|
} |
||||
|
nav {padding-left:4px;position:sticky;top:0px;display:none} |
||||
|
#pad{border:none;height:100%;width:100%;background:none; |
||||
|
transform:translate(4px,-0px); |
||||
|
border-left:var(--largeur-1) solid var(--couleur-A); |
||||
|
border-top:var(--largeur-1) solid var(--couleur-A); |
||||
|
|
||||
|
background-size: var(--dim) var(--dim); |
||||
|
/* background-image: |
||||
|
linear-gradient(to right, grey 1px, transparent 1px), |
||||
|
linear-gradient(to bottom, grey 1px, transparent 1px); |
||||
|
*/ |
||||
|
background: |
||||
|
repeating-linear-gradient(90deg, transparent, transparent calc(var(--dim) * 8 - var(--largeur-1)), var(--couleur-A) calc(var(--dim) * 8 - var(--largeur-1)), var(--couleur-A) calc(var(--dim) * 8 )), |
||||
|
repeating-linear-gradient(90deg, transparent, transparent calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 )), |
||||
|
repeating-linear-gradient( 0deg, transparent, transparent calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 )) |
||||
|
; |
||||
|
background-position-y:-4.5px; |
||||
|
background-position-x:4.5px; |
||||
|
|
||||
|
background-position-y:-.6px; |
||||
|
background-position-x:2px; |
||||
|
|
||||
|
} |
||||
|
section { |
||||
|
margin-left:var(--dim); |
||||
|
margin-top:var(--dim); |
||||
|
width:calc(var(--dim) * 8 * 5) |
||||
|
|
||||
|
/* |
||||
|
background-image: url("grid.png"); |
||||
|
background-color: #cccccc; |
||||
|
height:100%; |
||||
|
*/ |
||||
|
} |
||||
|
body {height:100%} |
||||
|
html {height:100vh} |
||||
|
.curseur {position:absolute; |
||||
|
width:var(--dim); |
||||
|
height:var(--dim); |
||||
|
border:1px solid black; |
||||
|
pointer-events:none; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: Unifont; |
||||
|
src: url("../unifont-15.1.05.otf") format("opentype"); |
||||
|
} |
||||
|
*{font-family:Unifont} |
||||
|
nav {width:100%;background:ivory;height:var(--dim)} |
||||
|
</style> |
||||
|
<script> |
||||
|
const nav = document.querySelector('nav') |
||||
|
for (let i = 0; i < 16; i ++){ |
||||
|
nav.innerHTML += (i+1)%10 |
||||
|
} |
||||
|
//const entete = document.createElement('nav') |
||||
|
//body.appendChild(entete) |
||||
|
const body = document.querySelector('body') |
||||
|
|
||||
|
const textarea = document.querySelector('textarea') |
||||
|
const dim = 24; |
||||
|
let curseur = document.createElement('div') |
||||
|
body.appendChild(curseur) |
||||
|
curseur.classList.add('curseur') |
||||
|
textarea.addEventListener("mousemove", (e) => { |
||||
|
console.log(e) |
||||
|
let x = Math.ceil(e.clientX / dim) * dim - dim - 10 |
||||
|
let y = Math.ceil(e.clientY / dim) * dim - dim + 6 + dim |
||||
|
curseur.style.left= `${x}px` |
||||
|
curseur.style.top= `${y}px` |
||||
|
}); |
||||
|
</script> |
||||
Binary file not shown.
Loading…
Reference in new issue