martlem
2 weeks ago
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