ui/accessibility/extensions/alt/hide-images.css

   1 /* Copyright (c) 2014 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file. */
   4
   5 body[show-alt] img {
   6     /* add some fake content to hang the ::before element off */
   7     content: "" !important;
   8     background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
   9
  10     /* display non-floated and remove any background color */
  11     float: none !important;
  12     background-color: inherit !important;
  13
  14     /* set height to contain the text content */
  15     height: 100% !important;
  16 }
  17
  18 body[show-alt] img:not([alt]):not([aria-hidden=true]):not([role=presentation]):before {
  19     content: url('chrome-extension://__MSG_@@extension_id__/images/speech-missing-alt-16.png') " " attr(_repaired) !important;
  20     box-shadow: inset 0 -4px 0 rgba(230, 124, 115, 1) !important;
  21 }
  22
  23 body[show-alt] img:not([aria-hidden=true]):not([role=presentation]):not([alt='']):before {
  24     content: url('chrome-extension://__MSG_@@extension_id__/images/speech-16.png') " " attr(alt) !important;
  25     box-shadow: inset 0 -4px 0 rgba(139, 195, 74, 1) !important;
  26     display: table;
  27     clear: both;
  28 }
  29
  30 @-webkit-keyframes slideDown {
  31     from {
  32       -webkit-transform: translateY(-150%);
  33     }
  34     to {
  35       -webkit-transform: translateY(0px);
  36     }
  37 }
  38
  39 @-webkit-keyframes slideUp {
  40     from {
  41       -webkit-transform: translateY(0%);
  42     }
  43     to {
  44       -webkit-transform: translateY(-150%);
  45     }
  46 }
  47
  48 body[show-alt] .show-alt-infobar {
  49     -webkit-animation-name: slideDown;
  50     -webkit-animation-duration: 0.5s;
  51     -webkit-animation-delay: 0.5s;
  52     -webkit-animation-iteration-count: 1;
  53     -webkit-animation-timing-function: ease;
  54     -webkit-animation-direction: forwards;
  55     -webkit-transform: translateY(0%);
  56 }
  57
  58 body:not([show-alt]) .show-alt-infobar {
  59     -webkit-animation-name: slideUp;
  60     -webkit-animation-duration: 0.5s;
  61     -webkit-animation-delay: 0.5s;
  62     -webkit-animation-iteration-count: 1;
  63     -webkit-animation-timing-function: ease;
  64     -webkit-animation-direction: forwards;
  65     -webkit-transform: translateY(-150%);
  66 }
  67
  68 .show-alt-infobar {
  69     top: 0;
  70     left: 0;
  71     right: 0;
  72     z-index: 100000001;  /* :( */
  73     position: fixed !important;
  74     background: #fde073 !important;
  75     text-align: center !important;
  76     line-height: 2.0;
  77     overflow: hidden;
  78     box-shadow: 0 0 5px black;
  79     box-shadow:         0 0 5px black;
  80     font-family: Arial, sans-serif !important;
  81     font-size: 12pt !important;
  82     -webkit-animation-fill-mode: backwards;
  83 }
  84
  85 .show-alt-infobar .content {
  86     display: inline-block !important;
  87 }
  88
  89 .show-alt-infobar span {
  90     margin: 5px;
  91 }
  92
  93 .show-alt-infobar button.link-button {
  94     -webkit-appearance: none !important;
  95     font: inherit !important;
  96     background: inherit !important;
  97     border: none !important;
  98     color: #1155CC !important;
  99     cursor: pointer !important;
 100     display: inline !important;
 101     margin: 0 !important;
 102     padding: 0 !important;
 103     text-decoration: none !important;
 104     box-shadow: none !important;
 105     text-transform: none !important;
 106     padding: none !important;
 107 }
 108
 109 .show-alt-infobar button.link-button:hover,
 110 .show-alt-infobar button.link-button:focus {
 111     color: #1155CC;
 112     text-decoration: underline;
 113     outline: none;
 114 }
 115
 116 .show-alt-infobar .controls {
 117     float: right !important;
 118     display: inline-block !important;
 119     padding-right: 5px !important;
 120 }
 121
 122 .show-alt-infobar .close-button-gray:hover,
 123 .show-alt-infobar .close-button-gray:focus {
 124     background-position: -143px -96px !important;
 125     outline: none;
 126 }
 127
 128 .show-alt-infobar .close-button-gray {
 129     -webkit-appearance: none !important;
 130     font: inherit !important;
 131     background: inherit !important;
 132     border: none !important;
 133     cursor: pointer !important;
 134     margin: 0 !important;
 135     padding: 0 !important;
 136     text-decoration: none !important;
 137     box-shadow: none !important;
 138     text-transform: none !important;
 139     padding: none !important;
 140     width: 13px !important;
 141     height: 13px !important;
 142     background-position: -175px -96px !important;
 143     background-image: url('chrome-extension://__MSG_@@extension_id__/images/statusbarButtonGlyphs.png') !important;
 144     background-size: 320px 144px !important;
 145     display: inline-block !important;
 146 }