Vimium-material-alpenglow.conf

/* https://github.com/noisyBrain/dots/blob/badec5adda8ce670b43d033278fc28d164f9b4e8/vimium.conf#L26 */

/* Vimium-material-alpenglow */


/*
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 Vimium UI.
  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.
*/

:root {

    /* Uncomment Only One */
    /* Material or Alpenglow */

    /* Material */
/*
    --fg: #ffb86c;
    --bg: #272727;
    --border: #272727;
    --select: rgb(255, 184, 108, 0.2);
    --src-title: #8ff0a4;
*/
    /* Alpenglow */

    --fg: #ffb59e;
    --bg: #201629;
    --border: #201629;
    --select: #5a3056;
    --src-title: #bd93f9;
 
    /* Do Not Comment Secondary */

    /* Secondary */

    --border-hint: #865e3c;
    --input: #cdab8f;
    --active-hint: #ff0000;
    --url: #79c0ff;
    --text: #d6d3cf;

}

/* Link hint boxes */
#vimiumHintMarkerContainer div.internalVimiumHintMarker,
#vimiumHintMarkerContainer div.vimiumHintMarker {
    background: var(--bg);
    font-size: 14px;
    border: 1px solid var(--border-hint);
    border-radius: 0.34em;
    box-shadow: 0em 0.1em 0.6em 0.1em rgba(0, 0, 0, 0.4);
}

/* Link hint text */
#vimiumHintMarkerContainer div span {
    color: var(--fg);
    font-size: inherit;
    text-shadow: none;
}

/* Link hint active numerical marker */
#vimiumHintMarkerContainer div.vimiumActiveHintMarker span {
    color: var(--active-hint) !important;
}

/* Link hint hide first matching number */
#vimiumHintMarkerContainer div > .matchingCharacter {
    color: var(--bg);
}

/* Select a link by typing its text */
div.vimiumReset.vimiumFlash {
    box-shadow: 0px 0px 4px 2px var(--active-hint);
}

/* Vomnibar */
#vomnibar {
    animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
    border: 2px solid var(--border);
    background: var(--bg);
}

/* Animate Slide in */
@keyframes show {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

#vomnibar .vomnibarSearchArea {
    display: block;
    padding: 10px;
    background: var(--bg);
    border-radius: 4px 4px 0 0;
    border-bottom: 0px solid var(--border);
}

#vomnibar ul {
    background: var(--bg);
    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 var(--border);
    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 .vomnibarTopHalf {
    padding: 0 0 2px;
}

#vomnibar li .vomnibarSource {
    color: var(--src-title);
    margin-right: 4px;
}

#vomnibar li .vomnibarUrl {
    white-space: nowrap;
    color: var(--url);
}

#vomnibar li .vomnibarMatch {
    font-weight: bold;
    color: var(--fg);
}

#vomnibar li em,
#vomnibar li .vomnibarTitle {
    color: var(--text);
    margin-left: 4px;
    font-weight: normal;
}

#vomnibar li em {
    font-style: italic;
}

#vomnibar li em .vomnibarMatch,
#vomnibar li .vomnibarTitle .vomnibarMatch {
    color: var(--fg);
}

#vomnibar li.vomnibarSelected {
    background: var(--select);
    font-weight: normal;
}

/* Help Page */
#vimiumHelpDialog {
    border: 1px solid var(--border);
    background: var(--bg);
}

div#vimiumHelpDialogContainer {
    border: 2px solid var(--border);
}

span#vimiumTitle {
    color: var(--src-title);
    font-size: 20px;
}

#helpDialogOptionsPage,
#helpDialogWikiPage {
    color: var(--src-title);
    font-size: 14px;
    text-decoration: underline;
}

div#vimiumHelpDialog,
a#toggleAdvancedCommands,
a:link.vimiumHelDialogLink {
    color: var(--url);
    font-size: 10px;
}

div#vimiumHelpDialog a.closeButton {
    color: var(--src-title);
}

div#vimiumHelpDialog a.closeButton:hover {
    color: red;
}

div#vimiumHelpDialogFooter {
    color: var(--text);
}

div#vimiumHelpDialog td.vimiumHelpSectionTitle,
td.vimiumHelpDescription {
    padding-top: 3px;
    font-size: 16px;
    font-weight: bold;
    color: var(--src-title);
}

div#vimiumHelpDialog td.vimiumHelpDescription {
    font-size: 14px;
    color: var(--text);
    font-weight: normal;
}

span.vimiumHelpDialogKey {
    background: var(--bg);
    color: var(--fg);
    border: solid 1px var(--border-hint);
    box-shadow: none;
}

/* HUD */
div.vimiumHUD {
    background: var(--bg);
    border: var(--border);
}

div.vimiumHUD .vimiumHUDSearchArea {
    background: var(--bg);
}

div.vimiumHUD .vimiumHUDSearchAreaInner {
    background: var(--bg);
    border: 1px solid var(--border);
}

div.vimiumHUD span#hud-find-input {
    color: var(--text);
}