input focus color

This commit is contained in:
Jaco Greeff
2021-04-07 13:07:37 +03:00
parent bf6b4a27fd
commit 8d1c77f119
+3 -2
View File
@@ -17,6 +17,7 @@
h3 { font: var(--font-sans); font-weight: 400; margin: 0; opacity: 0.5; text-transform: lowercase }
p { line-height: 1.5rem; margin: 0.75rem 0 }
input { color: var(--color); display: block; opacity: 0.85; padding: 0.5rem 0.75rem; width: 100% }
input:focus { outline: none }
.box { background: rgba(255, 255, 255, 0.85); border-radius: 0.25rem; flex: 1 1; margin: 0.5rem; min-width: 15rem; max-width: 40rem; padding: 1rem 1.5rem; text-align: center; white-space: nowrap; width: 40rem; z-index: 2 }
.buttons { display: none; margin: 2rem 0 1.5rem }
@@ -32,7 +33,7 @@
.row { align-items: center; display: flex; justify-content: center }
p.search { padding: 0 1rem }
input#search { display: none }
input#search { border: 1px solid #888; border-radius: 0.25rem; display: none }
table { margin: 0 }
td:not(.centered) { font: var(--font-mono); padding: 0.25rem 0.5rem; text-align: right }
@@ -94,7 +95,7 @@
function draw () {
hue = (hue + 1) % 360;
document.body.style.background = `hsl(${hue}, 45%, 85%)`;
style.innerHTML = `a { color: hsl(${hue}, 45%, 45%) !important } .buttons a { border-color: hsl(${hue}, 45%, 45%) !important } .buttons .invert { background: hsl(${hue}, 45%, 45%) !important }`;
style.innerHTML = `a { color: hsl(${hue}, 45%, 45%) !important } .buttons a { border-color: hsl(${hue}, 45%, 45%) !important } .buttons .invert { background: hsl(${hue}, 45%, 45%) !important } input#search:focus { border-color: hsl(${hue}, 45%, 45%) }`;
setTimeout(() => window.requestAnimationFrame(draw), 100);
}