extension/skin/style.css

   1 /*
   2  * Copyright Simon Lydell 2015.
   3  *
   4  * This file is part of VimFx.
   5  *
   6  * VimFx is free software: you can redistribute it and/or modify
   7  * it under the terms of the GNU General Public License as published by
   8  * the Free Software Foundation, either version 3 of the License, or
   9  * (at your option) any later version.
  10  *
  11  * VimFx is distributed in the hope that it will be useful,
  12  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  14  * GNU General Public License for more details.
  15  *
  16  * You should have received a copy of the GNU General Public License
  17  * along with VimFx.  If not, see <http://www.gnu.org/licenses/>.
  18  */
  19
  20 /* Allow file:/// prefix for testing using `gulp help.html`. */
  21 @-moz-document url(chrome://browser/content/browser.xul), url-prefix(file:///)
  22 {
  23
  24 /***** Button *****/
  25
  26 #VimFxButton {
  27     list-style-image: url(icon16.png);
  28 }
  29
  30 #VimFxButton[cui-areatype="menu-panel"],
  31 toolbarpaletteitem[place="palette"] > #VimFxButton {
  32     list-style-image: url(icon32.png);
  33 }
  34
  35 @media (min-resolution: 2dppx) {
  36   #VimFxButton {
  37       list-style-image: url(icon32.png);
  38   }
  39
  40   #VimFxButton[cui-areatype="menu-panel"],
  41   toolbarpaletteitem[place="palette"] > #VimFxButton {
  42       list-style-image: url(icon64.png);
  43   }
  44 }
  45
  46 #VimFxButton[vimfx-mode="ignore"] {
  47     filter: grayscale(100%);
  48 }
  49
  50
  51
  52 /* All styles below are intentionally very generic to fit with the user’s system
  53  * and preferences. */
  54
  55
  56
  57 /***** Markers *****/
  58
  59 #VimFxMarkersContainer {
  60   position: absolute;
  61 }
  62
  63 /* Marker styles should be kept simple for performance. */
  64 #VimFxMarkersContainer .marker {
  65   position: absolute;
  66   padding: 0.2em;
  67   border: solid 1px #ad810c;
  68   background-color: #ffd76e;
  69   color: #302505;
  70   font: menu;
  71   line-height: 1;
  72   font-weight: bold;
  73   text-transform: uppercase;
  74   white-space: nowrap;
  75 }
  76
  77 #VimFxMarkersContainer .marker-char {} /* Keep as documentation. */
  78
  79 #VimFxMarkersContainer .marker--matched,
  80 #VimFxMarkersContainer .marker-char--matched {
  81   color: #ffa22a;
  82 }
  83
  84 #VimFxMarkersContainer .marker--hidden {
  85   display: none;
  86 }
  87
  88 /* alt, ctrl and meta can also be targeted. */
  89 #main-window[vimfx-held-modifiers~="shift"] #VimFxMarkersContainer {
  90   opacity: 0.2;
  91 }
  92
  93
  94
  95 /***** Help Dialog *****/
  96
  97 #VimFxHelpDialogContainer {
  98   position: absolute;
  99   overflow-y: auto;
 100   overflow-x: hidden;
 101
 102   opacity: 0.92;
 103   background-color: Window;
 104   color: WindowText;
 105   font: menu;
 106
 107   --page-padding: 3em;
 108   --gutter: 1em;
 109   padding-top: calc(var(--page-padding) / 2);
 110   padding-left: calc(var(--page-padding) - var(--gutter));
 111   padding-right: var(--page-padding);
 112 }
 113
 114   #VimFxHelpDialogContainer * {
 115     display: block;
 116   }
 117
 118   #VimFxHelpDialogContainer :-moz-any([class^="heading"], .key-sequence) {
 119     font-weight: bold;
 120     white-space: nowrap;
 121   }
 122
 123
 124 #VimFxHelpDialogContainer .header {
 125   position: relative;
 126   margin-left: var(--gutter);
 127   margin-bottom: calc(var(--page-padding) / 4);
 128 }
 129
 130   #VimFxHelpDialogContainer .heading-main {
 131     font-size: 4.2em;
 132     /* Add space for the close button. */
 133     margin-right: 0.4em;
 134   }
 135
 136     #VimFxHelpDialogContainer .logo {
 137       display: inline;
 138       margin-right: 0.5ch;
 139       color: #349938;
 140       font-style: italic;
 141       letter-spacing: -0.06em;
 142       text-shadow: 0.04em 0.02em black;
 143     }
 144
 145       #VimFxHelpDialogContainer .logo::before {
 146         content: 'ım';
 147         margin-left: -0.15em;
 148         padding-left: 1.34ch;
 149         background: url(icon128.png) no-repeat;
 150         background-size: contain;
 151       }
 152
 153       #VimFxHelpDialogContainer .logo::after {
 154          content: 'Fx';
 155          color: #d37826;
 156       }
 157
 158     #VimFxHelpDialogContainer .title {
 159       display: inline-block;
 160       font-size: 1.4ex;
 161       line-height: 1.2;
 162     }
 163
 164   #VimFxHelpDialogContainer .close-button {
 165     position: absolute;
 166     right: 0;
 167     top: 0;
 168     font-size: 3em;
 169     -moz-user-select: none;
 170   }
 171
 172     #VimFxHelpDialogContainer .close-button:hover {
 173       cursor: pointer;
 174     }
 175
 176 #VimFxHelpDialogContainer .content {
 177   display: flex;
 178   flex-wrap: wrap;
 179 }
 180
 181   #VimFxHelpDialogContainer .category {
 182     flex: 1 16em;
 183     margin-left: var(--gutter);
 184     margin-bottom: calc(var(--page-padding) / 2);
 185   }
 186
 187   #VimFxHelpDialogContainer .heading-mode,
 188   #VimFxHelpDialogContainer .category:not(.first)::before {
 189     font-size: 2em;
 190   }
 191
 192   #VimFxHelpDialogContainer .category:not(.first)::before {
 193     /* Insert newline the same size as a `.heading-mode` to vertically align all
 194      * `.heading-category`s. */
 195     content: "\A";
 196     white-space: pre;
 197   }
 198
 199   #VimFxHelpDialogContainer .heading-category {
 200     font-size: 1.5em;
 201   }
 202
 203   #VimFxHelpDialogContainer .command {
 204     float: left;
 205     clear: left;
 206     width: 100%;
 207     margin-top: 0.2em;
 208   }
 209
 210     #VimFxHelpDialogContainer .key-sequence {
 211       float: left;
 212       margin-right: 1.7ch;
 213     }
 214
 215       #VimFxHelpDialogContainer .key-sequence:last-of-type {
 216         margin-right: 0.7ch;
 217       }
 218
 219     #VimFxHelpDialogContainer .description {
 220       float: right;
 221       /* The space to the left should be wide enough to fit `<c-w>`. */
 222       width: calc(100% - 3.5em);
 223     }
 224
 225 }