src/extensions/renderer/resources/extension.css

   1 /*
   2  * Copyright 2014 The Chromium Authors. All rights reserved.
   3  * Use of this source code is governed by a BSD-style license that can be
   4  * found in the LICENSE file.
   5  *
   6  * This stylesheet is used to apply Chrome styles to extension pages that opt in
   7  * to using them. These styles have been copied from
   8  * ui/webui/resources/css/chrome_shared.css and
   9  * ui/webui/resources/css/widgets.css. This is to prevent WebUI changes from
  10  * breaking extensions, however please keep the files in sync if possible.
  11  */
  12
  13 /* Prevent CSS from overriding the hidden property. */
  14 [hidden] {
  15   display: none !important;
  16 }
  17
  18 html.loading * {
  19   -webkit-transition-delay: 0 !important;
  20   -webkit-transition-duration: 0 !important;
  21 }
  22
  23 body {
  24   cursor: default;
  25   margin: 0;
  26 }
  27
  28 p {
  29   line-height: 1.8em;
  30 }
  31
  32 h1,
  33 h2,
  34 h3 {
  35   -webkit-user-select: none;
  36   font-weight: normal;
  37   /* Makes the vertical size of the text the same for all fonts. */
  38   line-height: 1;
  39 }
  40
  41 h1 {
  42   font-size: 1.5em;
  43 }
  44
  45 h2 {
  46   font-size: 1.3em;
  47   margin-bottom: 0.4em;
  48 }
  49
  50 h3 {
  51   color: black;
  52   font-size: 1.2em;
  53   margin-bottom: 0.8em;
  54 }
  55
  56 a {
  57   color: rgb(17, 85, 204);
  58   text-decoration: underline;
  59 }
  60
  61 a:active {
  62   color: rgb(5, 37, 119);
  63 }
  64
  65 /* Elements that need to be LTR even in an RTL context, but should align
  66  * right. (Namely, URLs, search engine names, etc.)
  67  */
  68 html[dir='rtl'] .weakrtl {
  69   direction: ltr;
  70   text-align: right;
  71 }
  72
  73 /* Input fields in search engine table need to be weak-rtl. Since those input
  74  * fields are generated for all cr.ListItem elements (and we only want weakrtl
  75  * on some), the class needs to be on the enclosing div.
  76  */
  77 html[dir='rtl'] div.weakrtl input {
  78   direction: ltr;
  79   text-align: right;
  80 }
  81
  82 html[dir='rtl'] .favicon-cell.weakrtl {
  83   -webkit-padding-end: 22px;
  84   -webkit-padding-start: 0;
  85 }
  86
  87 /* weakrtl for selection drop downs needs to account for the fact that
  88  * Webkit does not honor the text-align attribute for the select element.
  89  * (See Webkit bug #40216)
  90  */
  91 html[dir='rtl'] select.weakrtl {
  92   direction: rtl;
  93 }
  94
  95 html[dir='rtl'] select.weakrtl option {
  96   direction: ltr;
  97 }
  98
  99 /* WebKit does not honor alignment for text specified via placeholder attribute.
 100  * This CSS is a workaround. Please remove once WebKit bug is fixed.
 101  * https://bugs.webkit.org/show_bug.cgi?id=63367
 102  */
 103 html[dir='rtl'] input.weakrtl::-webkit-input-placeholder,
 104 html[dir='rtl'] .weakrtl input::-webkit-input-placeholder {
 105   direction: rtl;
 106 }
 107
 108 /* Default state **************************************************************/
 109
 110 :-webkit-any(button,
 111              input[type='button'],
 112              input[type='submit']):not(.custom-appearance):not(.link-button),
 113 select,
 114 input[type='checkbox'],
 115 input[type='radio'] {
 116   -webkit-appearance: none;
 117   -webkit-user-select: none;
 118   background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
 119   border: 1px solid rgba(0, 0, 0, 0.25);
 120   border-radius: 2px;
 121   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
 122       inset 0 1px 2px rgba(255, 255, 255, 0.75);
 123   color: #444;
 124   font: inherit;
 125   margin: 0 1px 0 0;
 126   outline: none;
 127   text-shadow: 0 1px 0 rgb(240, 240, 240);
 128 }
 129
 130 :-webkit-any(button,
 131              input[type='button'],
 132              input[type='submit']):not(.custom-appearance):not(.link-button),
 133 select {
 134   min-height: 2em;
 135   min-width: 4em;
 136 <if expr="is_win">
 137   /* The following platform-specific rule is necessary to get adjacent
 138    * buttons, text inputs, and so forth to align on their borders while also
 139    * aligning on the text's baselines. */
 140   padding-bottom: 1px;
 141 </if>
 142 }
 143
 144 :-webkit-any(button,
 145              input[type='button'],
 146              input[type='submit']):not(.custom-appearance):not(.link-button) {
 147   -webkit-padding-end: 10px;
 148   -webkit-padding-start: 10px;
 149 }
 150
 151 select {
 152   -webkit-appearance: none;
 153   -webkit-padding-end: 20px;
 154   -webkit-padding-start: 6px;
 155   /* OVERRIDE */
 156   background-image: url("../../../ui/webui/resources/images/select.png"),
 157       linear-gradient(#ededed, #ededed 38%, #dedede);
 158   background-position: right center;
 159   background-repeat: no-repeat;
 160 }
 161
 162 html[dir='rtl'] select {
 163   background-position: center left;
 164 }
 165
 166 input[type='checkbox'] {
 167   bottom: 2px;
 168   height: 13px;
 169   position: relative;
 170   vertical-align: middle;
 171   width: 13px;
 172 }
 173
 174 input[type='radio'] {
 175   /* OVERRIDE */
 176   border-radius: 100%;
 177   bottom: 3px;
 178   height: 15px;
 179   position: relative;
 180   vertical-align: middle;
 181   width: 15px;
 182 }
 183
 184 /* TODO(estade): add more types here? */
 185 input[type='number'],
 186 input[type='password'],
 187 input[type='search'],
 188 input[type='text'],
 189 input[type='url'],
 190 input:not([type]),
 191 textarea {
 192   border: 1px solid #bfbfbf;
 193   border-radius: 2px;
 194   box-sizing: border-box;
 195   color: #444;
 196   font: inherit;
 197   margin: 0;
 198   /* Use min-height to accommodate addditional padding for touch as needed. */
 199   min-height: 2em;
 200   padding: 3px;
 201   outline: none;
 202 <if expr="is_win or is_macosx or is_ios">
 203   /* For better alignment between adjacent buttons and inputs. */
 204   padding-bottom: 4px;
 205 </if>
 206 }
 207
 208 input[type='search'] {
 209   -webkit-appearance: textfield;
 210   /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
 211    * of the default text in relatively spacious languages (i.e. German). */
 212   min-width: 160px;
 213 }
 214
 215 /* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed.
 216  * TODO(dbeam): are there more types that would benefit from this? */
 217 input[type='search']::-webkit-textfield-decoration-container {
 218   direction: inherit;
 219 }
 220
 221 /* Checked ********************************************************************/
 222
 223 input[type='checkbox']:checked::before {
 224   -webkit-user-select: none;
 225   background-image: url("../../../ui/webui/resources/images/check.png");
 226   background-size: 100% 100%;
 227   content: '';
 228   display: block;
 229   height: 100%;
 230   width: 100%;
 231 }
 232
 233 input[type='radio']:checked::before {
 234   background-color: #666;
 235   border-radius: 100%;
 236   bottom: 3px;
 237   content: '';
 238   display: block;
 239   left: 3px;
 240   position: absolute;
 241   right: 3px;
 242   top: 3px;
 243 }
 244
 245 /* Hover **********************************************************************/
 246
 247 :enabled:hover:-webkit-any(
 248     select,
 249     input[type='checkbox'],
 250     input[type='radio'],
 251     :-webkit-any(
 252         button,
 253         input[type='button'],
 254         input[type='submit']):not(.custom-appearance):not(.link-button)) {
 255   background-image: linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 256   border-color: rgba(0, 0, 0, 0.3);
 257   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
 258       inset 0 1px 2px rgba(255, 255, 255, 0.95);
 259   color: black;
 260 }
 261
 262 :enabled:hover:-webkit-any(select) {
 263   /* OVERRIDE */
 264   background-image: url("../../../ui/webui/resources/images/select.png"),
 265       linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 266 }
 267
 268 /* Active *********************************************************************/
 269
 270 :enabled:active:-webkit-any(
 271     select,
 272     input[type='checkbox'],
 273     input[type='radio'],
 274     :-webkit-any(
 275         button,
 276         input[type='button'],
 277         input[type='submit']):not(.custom-appearance):not(.link-button)) {
 278   background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
 279   box-shadow: none;
 280   text-shadow: none;
 281 }
 282
 283 :enabled:active:-webkit-any(select) {
 284   /* OVERRIDE */
 285   background-image: url("../../../ui/webui/resources/images/select.png"),
 286       linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
 287 }
 288
 289 /* Disabled *******************************************************************/
 290
 291 :disabled:-webkit-any(
 292     button,
 293     input[type='button'],
 294     input[type='submit']):not(.custom-appearance):not(.link-button),
 295 select:disabled {
 296   background-image: linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
 297   border-color: rgba(80, 80, 80, 0.2);
 298   box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
 299       inset 0 1px 2px rgba(255, 255, 255, 0.75);
 300   color: #aaa;
 301 }
 302
 303 select:disabled {
 304   /* OVERRIDE */
 305   background-image: url("../../../ui/webui/resources/images/disabled_select.png"),
 306       linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
 307 }
 308
 309 input:disabled:-webkit-any([type='checkbox'],
 310                            [type='radio']) {
 311   opacity: .75;
 312 }
 313
 314 input:disabled:-webkit-any([type='password'],
 315                            [type='search'],
 316                            [type='text'],
 317                            [type='url'],
 318                            :not([type])) {
 319   color: #999;
 320 }
 321
 322 /* Focus **********************************************************************/
 323
 324 :enabled:focus:-webkit-any(
 325     select,
 326     input[type='checkbox'],
 327     input[type='number'],
 328     input[type='password'],
 329     input[type='radio'],
 330     input[type='search'],
 331     input[type='text'],
 332     input[type='url'],
 333     input:not([type]),
 334     :-webkit-any(
 335          button,
 336          input[type='button'],
 337          input[type='submit']):not(.custom-appearance):not(.link-button)) {
 338   /* OVERRIDE */
 339   -webkit-transition: border-color 200ms;
 340   /* We use border color because it follows the border radius (unlike outline).
 341    * This is particularly noticeable on mac. */
 342   border-color: rgb(77, 144, 254);
 343   outline: none;
 344 }
 345
 346 /* Link buttons ***************************************************************/
 347
 348 .link-button {
 349   box-shadow: none;
 350   background: transparent none;
 351   border: none;
 352   color: rgb(17, 85, 204);
 353   cursor: pointer;
 354   /* Input elements have -webkit-small-control which can override the body font.
 355    * Resolve this by using 'inherit'. */
 356   font: inherit;
 357   margin: 0;
 358   padding: 0 4px;
 359 }
 360
 361 .link-button:hover {
 362   text-decoration: underline;
 363 }
 364
 365 .link-button:active {
 366   color: rgb(5, 37, 119);
 367   text-decoration: underline;
 368 }
 369
 370 .link-button[disabled] {
 371   color: #999;
 372   cursor: default;
 373   text-decoration: none;
 374 }
 375
 376 /* Checkbox/radio helpers ******************************************************
 377  *
 378  * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
 379  * these classes with the markup structure:
 380  *
 381  *   <div class="checkbox">
 382  *     <label>
 383  *       <input type="checkbox"></input>
 384  *       <span>
 385  *     </label>
 386  *   </div>
 387  */
 388
 389 :-webkit-any(.checkbox, .radio) label {
 390   /* Don't expand horizontally: <http://crbug.com/112091>. */
 391   display: inline-flex;
 392   padding-bottom: 7px;
 393   padding-top: 7px;
 394 }
 395
 396 :-webkit-any(.checkbox, .radio) label input ~ span {
 397   -webkit-margin-start: 0.6em;
 398   /* Make sure long spans wrap at the same horizontal position they start. */
 399   display: block;
 400 }
 401
 402 :-webkit-any(.checkbox, .radio) label:hover {
 403   color: black;
 404 }
 405
 406 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
 407   color: #999;
 408 }