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 } 147