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