vimium-dracula.css

/*
Dracula theme for Vimium
by Trollwut (trollwut@trollwut.org). This code is in the public domain.
To use:
  1. Copy the code.
  2. Go to the Vimium options.
  3. Click Show Advanced Options.
  4. Under Advanced Options, scroll down to CSS for link hints.
  5. Paste the code in the text field.
  6. Click Save Changes.
  7. Go to the website of your choice (or, if you have it open already, reload it) and check out the results.
*/

/* Link hint boxes */
div > .vimiumHintMarker {
  background: #282a36;
  font-size: 12px;
  border: 0.25em solid #ffb86c;
  border-radius: 0.34em;
  box-shadow: 0em 0.1em 0.6em 0.1em rgba(0, 0, 0, 0.4);
}

/* Link hint text */
div > .vimiumHintMarker span {
  color: #f8f8f2;
  font-size: inherit;
  text-shadow: none;
}

/* Link hint matching characters */
div > .vimiumHintMarker > .matchingCharacter {
  color: #6272a4;
}

/* HUD ("heads-up display") bar */
div.vimiumHUD {
  background: #282a36;
  border: 1px solid #6272a4;
}

div.vimiumHUD .vimiumHUDSearchArea {
  background: #282a36;
}

div.vimiumHUD .hud-find {
  background: #282a36;
  border: none;
  color: #f8f8f2;
}

div.vimiumHUD span#hud-find-input{
  color: #f8f8f2;  /* 'Foreground' color */
}

div.vimiumHUD span#hud-match-count {
  color: #6272a4;  /* 'Comment' color */
}

div.vimiumHUD .vimiumHUDSearchAreaInner {
  color: #6272a4;  /* 'Comment' color */
}

#vomnibar{
    background-color: #44475A;
}

#vomnibar input {
  color: #f8f8f2;
  font: -moz-window;
  /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  font-size: 20px;
  height: 34px;
  margin-bottom: 0;
  padding: 4px;
  background-color: #282a36;
  border-radius: 3px;
  border: 1px solid #6272a4;
  box-shadow: #bd93f9 0px 0px 1px;
  width: 100%;
  outline: none;
  box-sizing: border-box;
}

#vomnibar .vomnibarSearchArea {
  display: block;
  padding: 10px;
  background-color: #6272a4;
  border-radius: 4px 4px 0 0;
  border-bottom: 0px solid #bd93f9;
}

#vomnibar ul {
  background-color: #44475a;
  border-radius: 0 0 4px 4px;
  list-style: none;
  padding-top: 0;
  padding-bottom: 0;
  margin-block-start: 2px;
  margin-block-end: 0px;
}

#vomnibar li {
  border-bottom: 1px solid #6272a4;
  line-height: 1.1em;
  padding: 7px 10px;
  font-size: 16px;
  color: #f8f8f2;
  position: relative;
  display: list-item;
  margin: auto;
}

#vomnibar li .vomnibarBottomHalf {
  font-size: 15px;
  margin-top: 3px;
  padding: 2px 0;
}

#vomnibar li .vomnibarSource {
  color: #bd93f9;
  margin-right: 4px;
}
#vomnibar li .vomnibarRelevancy {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px;
  background-color: #282a36;
  color: #f8f8f2;
  font-family: monospace;
  width: 100px;
  overflow: hidden;
}

#vomnibar li .vomnibarUrl {
  white-space: nowrap;
  color: #50fa7b;
}

#vomnibar li .vomnibarMatch {
  font-weight: bold;
  color: #ffb86c;
}

#vomnibar li em, #vomnibar li .vomnibarTitle {
  color: #f8f8f2;
  margin-left: 4px;
  font-weight: normal;
}
#vomnibar li em { font-style: italic; }
#vomnibar li em .vomnibarMatch, #vomnibar li .vomnibarTitle .vomnibarMatch {
  color: #ffb86c;
}

#vomnibar li.vomnibarSelected {
  background-color: #6272a4;
  font-weight: normal;
}

#vomnibarInput::selection {
  background-color: #8be9fd;
}