extension/skin/style.css

   1 /***** Button *****/
   2
   3 #VimFxButton {
   4   list-style-image: url(icon16.png);
   5 }
   6
   7 #main-window[vimfx-mode="ignore"] #VimFxButton {
   8   list-style-image: url(icon16-red.png);
   9 }
  10
  11 #VimFxButton[cui-areatype="menu-panel"],
  12 toolbarpaletteitem[place="palette"] > #VimFxButton {
  13   list-style-image: url(icon32.png);
  14 }
  15
  16 #main-window[vimfx-mode="ignore"] #VimFxButton[cui-areatype="menu-panel"],
  17 #main-window[vimfx-mode="ignore"] toolbarpaletteitem[place="palette"] > #VimFxButton {
  18   list-style-image: url(icon32-red.png);
  19 }
  20
  21 @media (min-resolution: 2dppx) {
  22   #VimFxButton {
  23     list-style-image: url(icon32.png);
  24   }
  25
  26   #main-window[vimfx-mode="ignore"] #VimFxButton {
  27     list-style-image: url(icon32-red.png);
  28   }
  29
  30   #VimFxButton[cui-areatype="menu-panel"],
  31   toolbarpaletteitem[place="palette"] > #VimFxButton {
  32     list-style-image: url(icon64.png);
  33   }
  34
  35   #main-window[vimfx-mode="ignore"] #VimFxButton[cui-areatype="menu-panel"],
  36   #main-window[vimfx-mode="ignore"] toolbarpaletteitem[place="palette"] > #VimFxButton {
  37     list-style-image: url(icon64-red.png);
  38   }
  39 }
  40
  41 #main-window:-moz-any(
  42       [vimfx-mode="normal"][vimfx-focus-type="editable"],
  43       [vimfx-mode="find"][vimfx-focus-type="findbar"]
  44     ) #VimFxButton image {
  45   filter: grayscale(100%) brightness(150%);
  46 }
  47
  48
  49
  50 /* All styles below are intentionally very generic to fit with the user’s system
  51  * and preferences. */
  52
  53
  54
  55 /***** Markers *****/
  56
  57 #VimFxMarkersContainer {
  58   display: -moz-box;
  59   position: relative;
  60   pointer-events: none;
  61   font: menu;
  62 }
  63
  64   #VimFxMarkersContainer.ui {
  65     position: fixed;
  66     top: 0;
  67     left: 0;
  68     width: 100%;
  69     height: 100%;
  70     z-index: 9999;
  71   }
  72
  73 /* Marker styles should be kept simple for performance. */
  74 #VimFxMarkersContainer .marker {
  75   position: absolute;
  76   --padding: 0.2em;
  77   padding: var(--padding);
  78   --border-color: rgba(0, 0, 0, 0.4);
  79   --border-width: 1px;
  80   border: solid var(--border-width) var(--border-color);
  81   background-color: #ffd76e;
  82   color: black;
  83   font-size: 0.8em;
  84   line-height: 1;
  85   font-weight: bold;
  86   white-space: nowrap;
  87   /* Some light-weight themes set a `text-shadow` that the hint markers inherit,
  88    * making them almost unreadable. */
  89   text-shadow: none;
  90 }
  91
  92 #VimFxMarkersContainer:not(.has-mixedcase) .marker {
  93   text-transform: uppercase;
  94 }
  95
  96 #VimFxMarkersContainer .marker-char {} /* Keep as documentation. */
  97
  98 #VimFxMarkersContainer .marker--matched,
  99 #VimFxMarkersContainer .marker-char--matched {
 100   color: rgba(0, 0, 0, 0.3);
 101 }
 102
 103 #VimFxMarkersContainer .marker--highlighted {
 104   background-color: lime;
 105 }
 106
 107 #VimFxMarkersContainer .marker--hidden {
 108   display: none;
 109 }
 110
 111 /* alt, ctrl, meta and shift can be targeted. */
 112 #main-window[vimfx-held-modifiers~="ctrl"][vimfx-held-modifiers~="shift"]
 113     #VimFxMarkersContainer {
 114   opacity: 0.2;
 115 }
 116
 117 #VimFxMarkersContainer .marker[data-type="scrollable"] {
 118   --width: 0.17em;
 119   padding-right: calc(var(--padding) + var(--border-width) + var(--width));
 120 }
 121
 122   #VimFxMarkersContainer .marker[data-type="scrollable"]::after {
 123     content: '';
 124     position: absolute;
 125     top: 0;
 126     right: 0;
 127     height: 100%;
 128     width: var(--width);
 129     border-left: inherit;
 130     background-image: linear-gradient(
 131       to bottom,
 132       transparent 15%,
 133       var(--border-color) 0,
 134       var(--border-color) 75%,
 135       transparent 0
 136     );
 137   }
 138
 139
 140
 141 /***** Help Dialog *****/
 142
 143 #VimFxHelpDialogContainer {
 144   display: -moz-box;
 145   position: relative;
 146
 147   opacity: 0.92;
 148   background-color: Window;
 149   color: WindowText;
 150   font: menu;
 151   /* Some light-weight themes set a `text-shadow` that the hint markers inherit,
 152    * making them almost unreadable. */
 153   text-shadow: none;
 154   cursor: default;
 155
 156   --page-padding: 3em;
 157   --gutter: 1em;
 158 }
 159
 160   #VimFxHelpDialogContainer .wrapper {
 161     position: absolute;
 162     top: 0;
 163     bottom: 0;
 164     left: 0;
 165     right: 0;
 166     overflow-y: auto;
 167     overflow-x: hidden;
 168     padding-top: calc(var(--page-padding) / 2);
 169     padding-left: calc(var(--page-padding) - var(--gutter));
 170     padding-right: var(--page-padding);
 171   }
 172
 173   #VimFxHelpDialogContainer .vimfx-box {
 174     display: block;
 175   }
 176
 177   #VimFxHelpDialogContainer :-moz-any(.heading-mode, .heading-category, .key-sequence) {
 178     font-weight: bold;
 179     white-space: nowrap;
 180   }
 181
 182
 183 #VimFxHelpDialogContainer .header {
 184   position: relative;
 185   margin-left: var(--gutter);
 186   margin-bottom: calc(var(--page-padding) / 4);
 187   font-weight: bold;
 188 }
 189
 190   #VimFxHelpDialogContainer .heading-main {
 191     font-size: 4.2em;
 192     /* Add space for the close button. */
 193     margin-right: 0.4em;
 194   }
 195
 196     #VimFxHelpDialogContainer .logo {
 197       display: inline;
 198       margin-right: 0.5ch;
 199       color: #349938;
 200       font-family: Helvetica, Arial, Verdana, sans-serif;
 201       font-style: italic;
 202       letter-spacing: -0.035em;
 203       text-shadow: 0.04em 0.02em black;
 204     }
 205
 206       #VimFxHelpDialogContainer .logo::before {
 207         content: 'ım';
 208         margin-left: -0.15em;
 209         padding-left: 1.67ch;
 210         background: url(icon128.png) no-repeat;
 211         background-size: contain;
 212       }
 213
 214       #VimFxHelpDialogContainer .logo::after {
 215          content: 'Fx';
 216          color: #d37826;
 217       }
 218
 219     #VimFxHelpDialogContainer .title {
 220       display: inline-block;
 221       font-size: 1.4ex;
 222       line-height: 1.2;
 223     }
 224
 225   #VimFxHelpDialogContainer .close-button {
 226     position: absolute;
 227     right: 0;
 228     top: 0;
 229     font-size: 3em;
 230     -moz-user-select: none;
 231   }
 232
 233     #VimFxHelpDialogContainer .close-button:hover {
 234       cursor: pointer;
 235     }
 236
 237 #VimFxHelpDialogContainer .content {
 238   display: flex;
 239   flex-wrap: wrap;
 240 }
 241
 242   #VimFxHelpDialogContainer .category {
 243     flex: 1 16em;
 244     margin-left: var(--gutter);
 245     margin-bottom: calc(var(--page-padding) / 2);
 246   }
 247
 248   #VimFxHelpDialogContainer :-moz-any([data-mode="find"], [data-mode="marks"]) {
 249     display: none;
 250   }
 251
 252   #VimFxHelpDialogContainer .heading-mode,
 253   #VimFxHelpDialogContainer .category:not(.first)::before {
 254     font-size: 2em;
 255   }
 256
 257   #VimFxHelpDialogContainer .category:not(.first)::before {
 258     /* Insert newline the same size as a `.heading-mode` to vertically align all
 259      * `.heading-category`s. */
 260     content: "\A";
 261     white-space: pre;
 262   }
 263
 264   #VimFxHelpDialogContainer .heading-category {
 265     font-size: 1.5em;
 266   }
 267
 268   #VimFxHelpDialogContainer .command {
 269     float: left;
 270     clear: left;
 271     width: 100%;
 272     margin-top: 0.2em;
 273   }
 274
 275     #VimFxHelpDialogContainer .command.has-click {
 276       cursor: pointer;
 277     }
 278
 279     #VimFxHelpDialogContainer .command.has-click:hover * {
 280       text-decoration: underline;
 281     }
 282
 283     #VimFxHelpDialogContainer .key-sequence {
 284       float: left;
 285       margin-right: 1.7ch;
 286     }
 287
 288       #VimFxHelpDialogContainer .key-sequence:last-of-type {
 289         margin-right: 0.7ch;
 290       }
 291
 292       #VimFxHelpDialogContainer .key-sequence-special-keys {
 293         /* The special keys are not helpful in the help dialog. If somebody
 294          * disagrees, they can simply re-show them with custom CSS. */
 295         display: none;
 296       }
 297
 298       #VimFxHelpDialogContainer .key-sequence-rest {
 299         display: inline;
 300       }
 301
 302     #VimFxHelpDialogContainer .description {
 303       float: right;
 304       width: calc(100% - 3.7em);
 305     }
 306
 307   #VimFxHelpDialogContainer .search-input {
 308     position: absolute;
 309     right: 0;
 310     bottom: 0;
 311   }
 312
 313     #VimFxHelpDialogContainer .search-input:not(:focus) {
 314       opacity: 0;
 315       pointer-events: none;
 316     }
 317
 318   #VimFxHelpDialogContainer .search-match {} /* Keep as documentation. */
 319
 320   #VimFxHelpDialogContainer .search-non-match {
 321     opacity: 0.2;
 322   }
 323
 324   #VimFxHelpDialogContainer .search-highlight {
 325     display: inline;
 326     background-color: Highlight;
 327     color: HighlightText;
 328   }