extension/skin/style.css

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