vimfx-solarized.css

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/*
 * Copyright Simon Lydell 2015, 2016.
 *
 * This file is part of VimFx.
 *
 * VimFx is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * VimFx is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with VimFx.  If not, see <http://www.gnu.org/licenses/>.
 */

/* Allow file:/// prefix for testing using `gulp help.html`. */
@-moz-document url(chrome://browser/content/browser.xul), url-prefix(file:///)
{

/***** Button *****/

#VimFxButton {
  list-style-image: url(icon16.png);
}

#main-window[vimfx-mode="ignore"] #VimFxButton {
  list-style-image: url(icon16-red.png);
}

#VimFxButton[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #VimFxButton {
  list-style-image: url(icon32.png);
}

#main-window[vimfx-mode="ignore"] #VimFxButton[cui-areatype="menu-panel"],
#main-window[vimfx-mode="ignore"] toolbarpaletteitem[place="palette"] > #VimFxButton {
  list-style-image: url(icon32-red.png);
}

@media (min-resolution: 2dppx) {
  #VimFxButton {
    list-style-image: url(icon32.png);
  }

  #main-window[vimfx-mode="ignore"] #VimFxButton {
    list-style-image: url(icon32-red.png);
  }

  #VimFxButton[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > #VimFxButton {
    list-style-image: url(icon64.png);
  }

  #main-window[vimfx-mode="ignore"] #VimFxButton[cui-areatype="menu-panel"],
  #main-window[vimfx-mode="ignore"] toolbarpaletteitem[place="palette"] > #VimFxButton {
    list-style-image: url(icon64-red.png);
  }
}

#main-window:-moz-any(
      [vimfx-mode="normal"][vimfx-focus-type="editable"],
      [vimfx-mode="find"][vimfx-focus-type="findbar"]
    ) #VimFxButton image {
  filter: grayscale(100%) brightness(150%);
}



/* All styles below are intentionally very generic to fit with the user’s system
 * and preferences. */



/***** Markers *****/

#VimFxMarkersContainer {
  position: absolute;
  pointer-events: none;
}

  #VimFxMarkersContainer.ui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }

/* Marker styles should be kept simple for performance. */
#VimFxMarkersContainer .marker {
  position: absolute;
  --padding: 0.2em;
  padding: var(--padding);
  --border-color: #b58900;
  --border-width: 1px;
  border: solid var(--border-width) var(--border-color);
  background-color: #002b36;
  color: #b58900;
  font: menu;
  line-height: 1;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  /* Some light-weight themes set a `text-shadow` that the hint markers inherit,
   * making them almost unreadable. */
  text-shadow: none;
  font-size: 1.2em !important; /* Larger text. */
  text-transform: lowercase !important; /* Lowercase text. */
  opacity: 0.8 !important; /* Semi-transparent. Warning: Might be slow! */
}


#VimFxMarkersContainer .marker-char {} /* Keep as documentation. */

#VimFxMarkersContainer .marker--matched,
#VimFxMarkersContainer .marker-char--matched {
  color: #ffa22a;
}

#VimFxMarkersContainer .marker--hidden {
  display: none;
}

/* alt, ctrl and meta can also be targeted. */
#main-window[vimfx-held-modifiers~="shift"] #VimFxMarkersContainer {
  opacity: 0.2;
}

#VimFxMarkersContainer .marker[data-type="scrollable"] {
  --width: 1px;
  padding-right: calc(var(--padding) + var(--border-width) + var(--width));
}

  #VimFxMarkersContainer .marker[data-type="scrollable"]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: var(--width);
    border-left: inherit;
    background-image: linear-gradient(
      to bottom,
      transparent 15%,
      var(--border-color) 0,
      var(--border-color) 75%,
      transparent 0
    );
  }



/***** Help Dialog *****/

#VimFxHelpDialogContainer {
  position: absolute;

  opacity: 0.92;
  background-color: Window;
  color: WindowText;
  font: menu;
  /* Some light-weight themes set a `text-shadow` that the hint markers inherit,
   * making them almost unreadable. */
  text-shadow: none;
  cursor: default;

  --page-padding: 3em;
  --gutter: 1em;
}

  #VimFxHelpDialogContainer .wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: calc(var(--page-padding) / 2);
    padding-left: calc(var(--page-padding) - var(--gutter));
    padding-right: var(--page-padding);
  }

  #VimFxHelpDialogContainer .vimfx-box {
    display: block;
  }

  #VimFxHelpDialogContainer :-moz-any(.heading-mode, .heading-category, .key-sequence) {
    font-weight: bold;
    white-space: nowrap;
  }


#VimFxHelpDialogContainer .header {
  position: relative;
  margin-left: var(--gutter);
  margin-bottom: calc(var(--page-padding) / 4);
  font-weight: bold;
}

  #VimFxHelpDialogContainer .heading-main {
    font-size: 4.2em;
    /* Add space for the close button. */
    margin-right: 0.4em;
  }

    #VimFxHelpDialogContainer .logo {
      display: inline;
      margin-right: 0.5ch;
      color: #349938;
      font-style: italic;
      letter-spacing: -0.06em;
      text-shadow: 0.04em 0.02em black;
    }

      #VimFxHelpDialogContainer .logo::before {
        content: 'ım';
        margin-left: -0.15em;
        padding-left: 1.34ch;
        background: url(icon128.png) no-repeat;
        background-size: contain;
      }

      #VimFxHelpDialogContainer .logo::after {
         content: 'Fx';
         color: #d37826;
      }

    #VimFxHelpDialogContainer .title {
      display: inline-block;
      font-size: 1.4ex;
      line-height: 1.2;
    }

  #VimFxHelpDialogContainer .close-button {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 3em;
    -moz-user-select: none;
  }

    #VimFxHelpDialogContainer .close-button:hover {
      cursor: pointer;
    }

#VimFxHelpDialogContainer .content {
  display: flex;
  flex-wrap: wrap;
}

  #VimFxHelpDialogContainer .category {
    flex: 1 16em;
    margin-left: var(--gutter);
    margin-bottom: calc(var(--page-padding) / 2);
  }

  #VimFxHelpDialogContainer .heading-mode,
  #VimFxHelpDialogContainer .category:not(.first)::before {
    font-size: 2em;
  }

  #VimFxHelpDialogContainer .category:not(.first)::before {
    /* Insert newline the same size as a `.heading-mode` to vertically align all
     * `.heading-category`s. */
    content: "\A";
    white-space: pre;
  }

  #VimFxHelpDialogContainer .heading-category {
    font-size: 1.5em;
  }

  #VimFxHelpDialogContainer .command {
    float: left;
    clear: left;
    width: 100%;
    margin-top: 0.2em;
    cursor: pointer;
  }

    #VimFxHelpDialogContainer .command:hover * {
      text-decoration: underline;
    }

    #VimFxHelpDialogContainer .key-sequence {
      float: left;
      margin-right: 1.7ch;
    }

      #VimFxHelpDialogContainer .key-sequence:last-of-type {
        margin-right: 0.7ch;
      }

      #VimFxHelpDialogContainer .key-sequence-special-keys {
        /* The special keys are not helpful in the help dialog. If somebody
         * disagrees, they can simply re-show them with custom CSS. */
        display: none;
      }

      #VimFxHelpDialogContainer .key-sequence-rest {
        display: inline;
      }

    #VimFxHelpDialogContainer .description {
      float: right;
      /* The space to the left should be wide enough to fit `<c-w>`. */
      width: calc(100% - 3.5em);
    }

  #VimFxHelpDialogContainer .search-input {
    position: absolute;
    right: 0;
    bottom: 0;
  }

    #VimFxHelpDialogContainer .search-input:not([focused="true"]) {
      opacity: 0;
      pointer-events: none;
    }

  #VimFxHelpDialogContainer .search-match {} /* Keep as documentation. */

  #VimFxHelpDialogContainer .search-non-match {
    opacity: 0.2;
  }

  #VimFxHelpDialogContainer .search-highlight {
    display: inline;
    background-color: Highlight;
    color: HighlightText;
  }

}