extension/skin/style.css

   1 /*
   2  * Copyright Simon Lydell 2015.
   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: 32px;
  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
  69
  70 /* All styles below are intentionally very generic to fit with the user’s system
  71  * and preferences. */
  72
  73
  74
  75 /***** Markers *****/
  76
  77 #VimFxMarkersContainer {
  78   position: absolute;
  79 }
  80
  81 /* Marker styles should be kept simple for performance. */
  82 #VimFxMarkersContainer .marker {
  83   position: absolute;
  84   --padding: 0.2em;
  85   padding: var(--padding);
  86   --border-color: #ad810c;
  87   --border-width: 1px;
  88   border: solid var(--border-width) var(--border-color);
  89   background-color: #ffd76e;
  90   color: #302505;
  91   font: menu;
  92   line-height: 1;
  93   font-weight: bold;
  94   text-transform: uppercase;
  95   white-space: nowrap;
  96   /* Some light-weight themes set a `text-shadow` that the hint markers inherit,
  97    * making them almost unreadable. */
  98   text-shadow: none;
  99 }
 100
 101 #VimFxMarkersContainer .marker-char {} /* Keep as documentation. */
 102
 103 #VimFxMarkersContainer .marker--matched,
 104 #VimFxMarkersContainer .marker-char--matched {
 105   color: #ffa22a;
 106 }
 107
 108 #VimFxMarkersContainer .marker--hidden {
 109   display: none;
 110 }
 111
 112 /* alt, ctrl and meta can also be targeted. */
 113 #main-window[vimfx-held-modifiers~="shift"] #VimFxMarkersContainer {
 114   opacity: 0.2;
 115 }
 116
 117 #VimFxMarkersContainer .marker[data-type="scrollable"] {
 118   --width: 1px;
 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   position: absolute;
 145   overflow-y: auto;
 146   overflow-x: hidden;
 147
 148   opacity: 0.92;
 149   background-color: Window;
 150   color: WindowText;
 151   font: menu;
 152   /* Some light-weight themes set a `text-shadow` that the hint markers inherit,
 153    * making them almost unreadable. */
 154   text-shadow: none;
 155
 156   --page-padding: 3em;
 157   --gutter: 1em;
 158   padding-top: calc(var(--page-padding) / 2);
 159   padding-left: calc(var(--page-padding) - var(--gutter));
 160   padding-right: var(--page-padding);
 161 }
 162
 163   #VimFxHelpDialogContainer * {
 164     display: block;
 165   }
 166
 167   #VimFxHelpDialogContainer :-moz-any([class^="heading"], .key-sequence) {
 168     font-weight: bold;
 169     white-space: nowrap;
 170   }
 171
 172
 173 #VimFxHelpDialogContainer .header {
 174   position: relative;
 175   margin-left: var(--gutter);
 176   margin-bottom: calc(var(--page-padding) / 4);
 177 }
 178
 179   #VimFxHelpDialogContainer .heading-main {
 180     font-size: 4.2em;
 181     /* Add space for the close button. */
 182     margin-right: 0.4em;
 183   }
 184
 185     #VimFxHelpDialogContainer .logo {
 186       display: inline;
 187       margin-right: 0.5ch;
 188       color: #349938;
 189       font-style: italic;
 190       letter-spacing: -0.06em;
 191       text-shadow: 0.04em 0.02em black;
 192     }
 193
 194       #VimFxHelpDialogContainer .logo::before {
 195         content: 'ım';
 196         margin-left: -0.15em;
 197         padding-left: 1.34ch;
 198         background: url(icon128.png) no-repeat;
 199         background-size: contain;
 200       }
 201
 202       #VimFxHelpDialogContainer .logo::after {
 203          content: 'Fx';
 204          color: #d37826;
 205       }
 206
 207     #VimFxHelpDialogContainer .title {
 208       display: inline-block;
 209       font-size: 1.4ex;
 210       line-height: 1.2;
 211     }
 212
 213   #VimFxHelpDialogContainer .close-button {
 214     position: absolute;
 215     right: 0;
 216     top: 0;
 217     font-size: 3em;
 218     -moz-user-select: none;
 219   }
 220
 221     #VimFxHelpDialogContainer .close-button:hover {
 222       cursor: pointer;
 223     }
 224
 225 #VimFxHelpDialogContainer .content {
 226   display: flex;
 227   flex-wrap: wrap;
 228 }
 229
 230   #VimFxHelpDialogContainer .category {
 231     flex: 1 16em;
 232     margin-left: var(--gutter);
 233     margin-bottom: calc(var(--page-padding) / 2);
 234   }
 235
 236   #VimFxHelpDialogContainer .heading-mode,
 237   #VimFxHelpDialogContainer .category:not(.first)::before {
 238     font-size: 2em;
 239   }
 240
 241   #VimFxHelpDialogContainer .category:not(.first)::before {
 242     /* Insert newline the same size as a `.heading-mode` to vertically align all
 243      * `.heading-category`s. */
 244     content: "\A";
 245     white-space: pre;
 246   }
 247
 248   #VimFxHelpDialogContainer .heading-category {
 249     font-size: 1.5em;
 250   }
 251
 252   #VimFxHelpDialogContainer .command {
 253     float: left;
 254     clear: left;
 255     width: 100%;
 256     margin-top: 0.2em;
 257   }
 258
 259     #VimFxHelpDialogContainer .key-sequence {
 260       float: left;
 261       margin-right: 1.7ch;
 262     }
 263
 264       #VimFxHelpDialogContainer .key-sequence:last-of-type {
 265         margin-right: 0.7ch;
 266       }
 267
 268       #VimFxHelpDialogContainer .key-sequence-special-keys {
 269         /* The special keys are not helpful in the help dialog. If somebody
 270          * disagrees, they can simply re-show them with custom CSS. */
 271         display: none;
 272       }
 273
 274       #VimFxHelpDialogContainer .key-sequence-rest {
 275         display: inline;
 276       }
 277
 278     #VimFxHelpDialogContainer .description {
 279       float: right;
 280       /* The space to the left should be wide enough to fit `<c-w>`. */
 281       width: calc(100% - 3.5em);
 282     }
 283
 284 }