
* {
  font-family: sans-serif;
}

#drop-zone {
  text-align: center;
}

#drop-zone .help-label {
  visibility: hidden;
  display: inline-block;
  margin: 0 auto;
  color: #999;
  margin: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}

#drop-zone.drop-target {
  border: 3px dashed silver;
  background: #ddd;
}

#drop-zone.drop-target .help-label {
  visibility: visible;
}

#drop-zone.dropping {
  background: white;
  border: 3px dashed red;
}

#drop-zone.dropping .help-label {
  visibility: hidden;
}

.file.invisible, .folder.invisible {
  display: none;
}

.folder-children {
  padding-left: 1em;
}

.file > summary, .folder > summary {
  font-family: monospace;
}

.folder > summary {
  font-weight: bold;
}


* {
  font-family: sans-serif;
}

#drop-zone {
  text-align: center;
}

#drop-zone .help-label {
  visibility: hidden;
  display: inline-block;
  margin: 0 auto;
  color: #999;
  margin: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}

#drop-zone.drop-target {
  border: 3px dashed silver;
  background: #ddd;
}

#drop-zone.drop-target .help-label {
  visibility: visible;
}

#drop-zone.dropping {
  background: white;
  border: 3px dashed red;
}

#drop-zone.dropping .help-label {
  visibility: hidden;
}

.file.invisible, .folder.invisible {
  background: #eee;
  /* display: none; */
}

.folder-children {
  padding-left: 1em;
}

.file > summary, .folder > summary {
  font-family: monospace;
}

.folder > summary {
  font-weight: bold;
}

Use background color instead of hiding items
Use background color instead of hiding items