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 #VimFxButton[vimfx-mode="ignore"] {
  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 #VimFxButton[cui-areatype="menu-panel"][vimfx-mode="ignore"],
  40 toolbarpaletteitem[place="palette"] > #VimFxButton[vimfx-mode="ignore"] {
  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   #VimFxButton[vimfx-mode="ignore"] {
  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   #VimFxButton[cui-areatype="menu-panel"][vimfx-mode="ignore"],
  59   toolbarpaletteitem[place="palette"] > #VimFxButton[vimfx-mode="ignore"] {
  60       list-style-image: url(icon64-red.png);
  61   }
  62 }
  63
  64
  65
  66 /* All styles below are intentionally very generic to fit with the user’s system
  67  * and preferences. */
  68
  69
  70
  71 /***** Markers *****/
  72
  73 #VimFxMarkersContainer {
  74   position: absolute;
  75 }
  76
  77 /* Marker styles should be kept simple for performance. */
  78 #VimFxMarkersContainer .marker {
  79   position: absolute;
  80   padding: 0.2em;
  81   border: solid 1px #ad810c;
  82   background-color: #ffd76e;
  83   color: #302505;
  84   font: menu;
  85   line-height: 1;
  86   font-weight: bold;
  87   text-transform: uppercase;
  88   white-space: nowrap;
  89 }
  90
  91 #VimFxMarkersContainer .marker-char {} /* Keep as documentation. */
  92
  93 #VimFxMarkersContainer .marker--matched,
  94 #VimFxMarkersContainer .marker-char--matched {
  95   color: #ffa22a;
  96 }
  97
  98 #VimFxMarkersContainer .marker--hidden {
  99   display: none;
 100 }
 101
 102 /* alt, ctrl and meta can also be targeted. */
 103 #main-window[vimfx-held-modifiers~="shift"] #VimFxMarkersContainer {
 104   opacity: 0.2;
 105 }
 106
 107
 108
 109 /***** Help Dialog *****/
 110
 111 #VimFxHelpDialogContainer {
 112   position: absolute;
 113   overflow-y: auto;
 114   overflow-x: hidden;
 115
 116   opacity: 0.92;
 117   background-color: Window;
 118   color: WindowText;
 119   font: menu;
 120
 121   --page-padding: 3em;
 122   --gutter: 1em;
 123   padding-top: calc(var(--page-padding) / 2);
 124   padding-left: calc(var(--page-padding) - var(--gutter));
 125   padding-right: var(--page-padding);
 126 }
 127
 128   #VimFxHelpDialogContainer * {
 129     display: block;
 130   }
 131
 132   #VimFxHelpDialogContainer :-moz-any([class^="heading"], .key-sequence) {
 133     font-weight: bold;
 134     white-space: nowrap;
 135   }
 136
 137
 138 #VimFxHelpDialogContainer .header {
 139   position: relative;
 140   margin-left: var(--gutter);
 141   margin-bottom: calc(var(--page-padding) / 4);
 142 }
 143
 144   #VimFxHelpDialogContainer .heading-main {
 145     font-size: 4.2em;
 146     /* Add space for the close button. */
 147     margin-right: 0.4em;
 148   }
 149
 150     #VimFxHelpDialogContainer .logo {
 151       display: inline;
 152       margin-right: 0.5ch;
 153       color: #349938;
 154       font-style: italic;
 155       letter-spacing: -0.06em;
 156       text-shadow: 0.04em 0.02em black;
 157     }
 158
 159       #VimFxHelpDialogContainer .logo::before {
 160         content: 'ım';
 161         margin-left: -0.15em;
 162         padding-left: 1.34ch;
 163         background: url(icon128.png) no-repeat;
 164         background-size: contain;
 165       }
 166
 167       #VimFxHelpDialogContainer .logo::after {
 168          content: 'Fx';
 169          color: #d37826;
 170       }
 171
 172     #VimFxHelpDialogContainer .title {
 173       display: inline-block;
 174       font-size: 1.4ex;
 175       line-height: 1.2;
 176     }
 177
 178   #VimFxHelpDialogContainer .close-button {
 179     position: absolute;
 180     right: 0;
 181     top: 0;
 182     font-size: 3em;
 183     -moz-user-select: none;
 184   }
 185
 186     #VimFxHelpDialogContainer .close-button:hover {
 187       cursor: pointer;
 188     }
 189
 190 #VimFxHelpDialogContainer .content {
 191   display: flex;
 192   flex-wrap: wrap;
 193 }
 194
 195   #VimFxHelpDialogContainer .category {
 196     flex: 1 16em;
 197     margin-left: var(--gutter);
 198     margin-bottom: calc(var(--page-padding) / 2);
 199   }
 200
 201   #VimFxHelpDialogContainer .heading-mode,
 202   #VimFxHelpDialogContainer .category:not(.first)::before {
 203     font-size: 2em;
 204   }
 205
 206   #VimFxHelpDialogContainer .category:not(.first)::before {
 207     /* Insert newline the same size as a `.heading-mode` to vertically align all
 208      * `.heading-category`s. */
 209     content: "\A";
 210     white-space: pre;
 211   }
 212
 213   #VimFxHelpDialogContainer .heading-category {
 214     font-size: 1.5em;
 215   }
 216
 217   #VimFxHelpDialogContainer .command {
 218     float: left;
 219     clear: left;
 220     width: 100%;
 221     margin-top: 0.2em;
 222   }
 223
 224     #VimFxHelpDialogContainer .key-sequence {
 225       float: left;
 226       margin-right: 1.7ch;
 227     }
 228
 229       #VimFxHelpDialogContainer .key-sequence:last-of-type {
 230         margin-right: 0.7ch;
 231       }
 232
 233       #VimFxHelpDialogContainer .key-sequence-special-keys {
 234         /* The special keys are not helpful in the help dialog. If somebody
 235          * disagrees, they can simply re-show them with custom CSS. */
 236         display: none;
 237       }
 238
 239       #VimFxHelpDialogContainer .key-sequence-rest {
 240         display: inline;
 241       }
 242
 243     #VimFxHelpDialogContainer .description {
 244       float: right;
 245       /* The space to the left should be wide enough to fit `<c-w>`. */
 246       width: calc(100% - 3.5em);
 247     }
 248
 249 }