CSS Stylings for vBookmarks (Neater Bookmarks)

style.css

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: #c8c8c8;
  border: 2px solid transparent;
}

::-webkit-scrollbar-track-piece {
  background-color: transparent;
}

menu[type=context] {
  font-size: 14px;
  color: #c8c8c8;
  background-color: #4d4d4d;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  z-index: 9;
}

menu[type=context] command {
  line-height: 24px;
  cursor: pointer;
  transition: all 300ms;
}

menu[type=context] command:hover {
  color: #fff;
}

menu[type=context] hr {
  background-color: transparent;
  margin: 4px 0;
}

#results,
#tree {
  font-family: Noto Sans, sans-serif;
  font-size: 14px;
  text-shadow: none;
  background-color: #21272a;
}

#search {
  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

#search:focus {
  outline: none;
}

#search input {
  font-size: 14px;
  color: #c8c8c8;
  background-color: #21272a;
  border: none;
  padding: 8px;
  outline: none;
}

#results ul li a,
#tree ul li a,
#tree ul li span {
  color: #c8c8c8;
  line-height: 24px;
  transition: all 300ms;
}

#results ul li a:active,
#results ul li a.active,
#results ul li a:focus,
#tree ul li a:active,
#tree ul li span:active,
#tree ul li a.active,
#tree ul li span.active,
#tree ul li a:focus,
#tree ul li span:focus,
menu[type=context] command:focus {
  background-color: inherit;
  background-image: none;
  text-shadow: none;
  box-shadow: none;
}

#results ul li a:hover,
#tree ul li a:hover,
#tree ul li span:hover,
#results ul li a:focus,
#tree ul li a:focus,
#tree ul li span:focus {
  color: #fff;
  background-color: #555;

}

#tree ul li a.focus,
#tree ul li span.focus {
  animation: none;
}

#results ul li a:hover i,
#tree ul li a:hover i {
  text-decoration: none;
}

#results ul li a img,
#results ul li span img,
#tree ul li a img,
#tree ul li span img {
  margin-right: 8px; 
}

.searchFocus #results ul>li:first-child a {
  background-color: inherit;
}

.searchFocus #results ul>li:first-child a:hover {
  color: #fff;
  background-color: #555;
}

#cover {
  background-color: rgba(0, 0, 0, 0.5);
}

.needAlert #alert-dialog,
.needConfirm #confirm-dialog,
.needEdit #edit-dialog,
.needInputName #new-folder-dialog {
  z-index: 9;
}

.dialog {
  color: #c8c8c8;
  background-color: #21272a;
  border: none;
  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.2);
}

#edit-dialog input,
#new-folder-dialog input {
  font-size: 14px;
  color: #c8c8c8;
  background-color: #4d4d4d;
  border: none;
  border-radius: 4px;
  padding: 8px;
  margin-top: 8px; 
  outline: none;
}

#edit-dialog .buttons,
#new-folder-dialog .buttons {
  margin-top: 16px;
}

.dialog .buttons button {
  font-size: 14px;
  color: #c8c8c8;
  background-color: #4d4d4d;
  border: none;
  padding: 8px;
  margin-left: 4px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  transition: all 300ms;
}

.dialog .buttons button:hover,
.dialog .buttons button:focus {
  color: #fff;
  background-color: #555;
}