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