extension/skin/style.css

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