panel de errores con blur

by jpeter06

HTML

<div id="contErrores" class="errores">
  <div class="listaErrores">
    <div class="cabecera">
      <span class="title"> Errores:</span>
      <button id="show" onclick="add()">add</button>
      <button id="clean" onclick="clean()">clean</button>
      <button id="add" onclick="hide()">hide</button>
    </div>
    <div class="lista">
      <ul id="ul">
        <li>Error: 1</li>
        <li>Error: 2</li>
        <li>Error: 3</li>
        <li>Error: 4</li>
      </ul>
    </div>
  </div>
</div>
<div class="contenido">
  <button id="show" onclick="show()">
    show
  </button>
  <p>
    Contenido asdf asdf alsdfaj sdlfajslfdkasjfd asdfasdff asdf asdfasdf
  </p>
</div>

CSS

body,html{ margin:0;padding:0;overflow:hidden;width:100%;height:100%;
background:#ffd700;
font-family: Arial, sans-serif;}

.contenido{
  padding:5px;
}
.cabecera{
  display:flex;
  gap:5px;
  font-size:24px;
}
.cabecera .title{
  flex-grow:2;
}
.errores{
  position:absolute;
  top:0px;
  left:0vw;
  background:rgba(0,0,0,0.0);
  height:100vh;
  width:100vw;
   -webkit-backdrop-filter: blur(1px);
 backdrop-filter: blur(1px);
  
}

.errores .listaErrores{
  position:relative;
    border-radius: 4px;
  top:5vh;
  left:5vh;
  background:#001bb3;
  color:white;
  width:50vh;
  height:90vh;
  padding:5px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.errores .listaErrores .lista{
  background:#4dc1ff;
  color:#020080;
  position:relative;
  overflow-y:auto;
  flex-grow:2;
  
}

button{
    background: #f3f4fb;
    color: #001cae;
    border-radius: 2px;
    border: 0;
    display: inline-block;
    border-style: unset;
}

button:hover{
  background:white;
}

/***** SCROLL BARS ***/
::-webkit-scrollbar {
    height: 10px;
    width: 7px;
}

::-webkit-scrollbar-track-piece {
    background-color:  #ffffff33;
}

*::-webkit-scrollbar-thumb {
    background-color: #e7f7ff;
    border-radius: 2px;
    border: 1px solid tan;
}

* {
  scrollbar-width: thin;
  scrollbar-color: blue tan;
}

JavaScript

function show(){
console.log("show")
document.getElementById('contErrores').style.left='0px';
}

function hide(){
console.log("hide")
document.getElementById('contErrores').style.left='-100vw';
}

function clean(){
  console.log("clean");
  document.getElementById("ul").innerHTML = '';
  cont++;
    const li = document.createElement("li");
    li.innerHTML = 'Error: ' + cont;
    ul.appendChild(li)
}

let cont=4;
function add(){
console.log("add");
	const ul = document.getElementById("ul");
  for(let i=0; i < 5; i++){
  	cont++;
    const li = document.createElement("li");
    li.innerHTML = 'Error: ' + cont;
    ul.appendChild(li)
  }
}