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