Vimium CSS

vimium.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 */
/*
  border: 0.20em solid #6272A4;
  border: 0.20em solid #ffb86c;
*/
div > .vimiumHintMarker {
  font-size: 11px;
  background: #282a36;
  border: 0.20em solid rgba(255, 184, 108, 1);
  border-radius: 0.35em;
  box-shadow: 0.0em  0.0em 1px rgba(255, 184, 108, 0.4);
  /*
  box-shadow:
     0.1em  0.1em 0.02em rgba(255, 184, 108, 0.4),
     0.1em -0.1em 0.02em rgba(255, 184, 108, 0.4),
    -0.1em  0.1em 0.02em rgba(255, 184, 108, 0.4),
    -0.1em -0.1em 0.02em rgba(255, 184, 108, 0.4);
  */
  display: flex;
  padding: 0.10em 3px 0px 3px;
  margin: auto;
  align-items: center;
  justify-content: center;
}

/* Link hint text */
div > .vimiumHintMarker span {
  color: #f8f8f2;
  text-shadow: none;
  display: inline-flex;
  position: unset;
  font-size: 11px;
  padding: 0.10em 0px;
}

/* Link hint matching characters */
div > .vimiumHintMarker > .matchingCharacter {
  color: #6272a4;
  color: #50fa7b;
  color: rgba(255, 184, 108, 1.0);
}

/* 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;
  border-radius: 0.2em;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
  border: 0.20em solid #6272A4;
}

#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-radius: 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:last-child {
  border-radius: 0.20em;
}
*/

#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;
}