[ Index ] |
PHP Cross Reference of Joomla 4.2.2 documentation |
[Summary view] [Print] [Text view]
1 :root { 2 --jooa11y-font-face: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 3 "Helvetica Neue", Arial, "FontAwesome", sans-serif; 4 --jooa11y-large-text: 16px; 5 --jooa11y-normal-text: 15px; 6 --jooa11y-focus-color: rgba(0, 208, 255, .75); 7 --jooa11y-pulse-color: rgba(0, 208, 255, 0); 8 --jooa11y-good: #36844e; 9 --jooa11y-good-hover: #38a459; 10 --jooa11y-good-text: #fff; 11 --jooa11y-good-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25px' height='25px' role='img' focusable='false' aria-hidden='true' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'%3E%3C/path%3E%3C/svg%3E"); 12 --jooa11y-warning: #ffc800; 13 --jooa11y-warning-hover: #ffd226; 14 --jooa11y-warning-text: #000; 15 --jooa11y-warning-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25px' height='25px' role='img' focusable='false' aria-hidden='true' viewBox='0 0 512 512'%3E%3Cpath fill='%23505050' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z'/%3E%3C/svg%3E"); 16 --jooa11y-warning-svg-color: #d39c00; 17 --jooa11y-error: #d30017; 18 --jooa11y-error-hover: #f00; 19 --jooa11y-error-text: #fff; 20 --jooa11y-error-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' role='img' focusable='false' aria-hidden='true' viewBox='0 0 576 576' width='25px' height='25px'%3E%3Cpath fill='%23ffffff' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'%3E%3C/path%3E%3C/svg%3E"); 21 --jooa11y-setting-switch-on-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 0 576 512'%3E%3Cpath fill='%23000000' d='M384 64H192C86 64 0 150 0 256s86 192 192 192h192c106 0 192-86 192-192S490 64 384 64zm0 320c-70.8 0-128-57.3-128-128 0-70.8 57.3-128 128-128 70.8 0 128 57.3 128 128 0 70.8-57.3 128-128 128z'/%3E%3C/svg%3E"); 22 --jooa11y-setting-switch-off-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 0 576 512'%3E%3Cpath fill='%23000000' d='M384 64H192C85.961 64 0 149.961 0 256s85.961 192 192 192h192c106.039 0 192-85.961 192-192S490.039 64 384 64zM64 256c0-70.741 57.249-128 128-128 70.741 0 128 57.249 128 128 0 70.741-57.249 128-128 128-70.741 0-128-57.249-128-128zm320 128h-48.905c65.217-72.858 65.236-183.12 0-256H384c70.741 0 128 57.249 128 128 0 70.74-57.249 128-128 128z'/%3E%3C/svg%3E"); 23 --jooa11y-close-btn-svg: url("data:image/svg+xml,%3Csvg width='20px' height='20px' aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='%23000000' d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'%3E%3C/path%3E%3C/svg%3E"); 24 --jooa11y-shortcut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' viewBox='0 0 351 123'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill-rule: evenodd; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M10-.022H152.1a10,10,0,0,1,10,10V112.906a10,10,0,0,1-10,10H10a10,10,0,0,1-10-10V9.978A10,10,0,0,1,10-.022Zm111.91,81q0.647,0.63,3.956.63,0.493,0,1.046-.019T128,81.53v8.131l-5.135.191q-7.683.267-10.5-2.672-1.826-1.87-1.825-5.764V55.8h-5.781V48.051h5.781V36.446h10.725V48.051H128V55.8h-6.732V77.789Q121.264,80.347,121.91,80.976ZM87.6,33.01H98.444V89.279H87.6V33.01Zm-22.887,44.7H44.073l-3.8,11.567H28.02L48.032,33.01H61.286L81.12,89.279h-12.7ZM54.535,45.875L47.26,68.016H61.617ZM199-.022H341.1a10,10,0,0,1,10,10V112.906a10,10,0,0,1-10,10H199a10,10,0,0,1-10-10V9.978A10,10,0,0,1,199-.022ZM249.987,60.49V50.708l29.407-10.481L249.987,29.809V19.991l41.228,15.82v8.929Zm25.446,44.535H264.747V94.514h10.686v10.511Z'/%3E%3C/svg%3E"); 25 } 26 27 /* SVG icons by FontAwesome 5: https://fontawesome.com/license/free */ 28 /* --jooa11y-shortcut-svg (Alt + .) SVG was created by Adam Chaboryk, MIT license. */ 29 html, 30 html[data-jooa11y-theme=light] { 31 --jooa11y-red-text: #d30017; 32 --jooa11y-yellow-text: #966f0d; 33 --jooa11y-panel-badge: #e9e9e9; 34 --jooa11y-panel-primary: #333; 35 --jooa11y-panel-bg: #fff; 36 --jooa11y-panel-bg-secondary: #f6f6f6; 37 --jooa11y-panel-bg-splitter: #d7d7d7; 38 --jooa11y-panel-error: #d30017; 39 --jooa11y-panel-secondary: #4d4d4d; 40 --jooa11y-panel-secondary-hover: #0077c8; 41 --jooa11y-panel-toggle-active: #c6c6c6; 42 --jooa11y-setting-switch-bg-on: #21b5ff; 43 --jooa11y-setting-switch-bg-off: #757575; 44 --jooa11y-hyperlink: #004c9b; 45 --jooa11y-shortcut-hover: #e8e8e8; 46 } 47 48 html[data-jooa11y-theme=dark] { 49 --jooa11y-red-text: #fe5b5f; 50 --jooa11y-yellow-text: #ffc800; 51 --jooa11y-panel-badge: #3500c4; 52 --jooa11y-panel-primary: #dde8ff; 53 --jooa11y-panel-bg: #0a2051; 54 --jooa11y-panel-bg-secondary: #072c7c; 55 --jooa11y-panel-bg-splitter: #0041c9; 56 --jooa11y-panel-error: #f00; 57 --jooa11y-panel-secondary: #a3c1ff; 58 --jooa11y-panel-secondary-hover: rgb(0 0 0 / 40%); 59 --jooa11y-panel-toggle-active: #000; 60 --jooa11y-setting-switch-bg-on: #21b5ff; 61 --jooa11y-setting-switch-bg-off: #bfbfbf; 62 --jooa11y-hyperlink: #64b2ff; 63 --jooa11y-shortcut-hover: #093698; 64 } 65 66 @media (prefers-color-scheme: dark) { 67 html, 68 html[data-jooa11y-theme=dark] { 69 --jooa11y-red-text: #ff6c6f; 70 --jooa11y-yellow-text: #ffc800; 71 --jooa11y-panel-badge: #3500c4; 72 --jooa11y-panel-primary: #dde8ff; 73 --jooa11y-panel-bg: #0a2051; 74 --jooa11y-panel-bg-secondary: #072c7c; 75 --jooa11y-panel-bg-splitter: #0041c9; 76 --jooa11y-panel-error: #f00; 77 --jooa11y-panel-secondary: #a3c1ff; 78 --jooa11y-panel-secondary-hover: rgb(0 0 0 / 40%); 79 --jooa11y-panel-toggle-active: #000; 80 --jooa11y-setting-switch-bg-on: #21b5ff; 81 --jooa11y-setting-switch-bg-off: #bfbfbf; 82 --jooa11y-hyperlink: #64b2ff; 83 --jooa11y-shortcut-hover: #093698; 84 } 85 86 html[data-jooa11y-theme=light] { 87 --jooa11y-red-text: #d30017; 88 --jooa11y-yellow-text: #966f0d; 89 --jooa11y-panel-badge: #e9e9e9; 90 --jooa11y-panel-primary: #333; 91 --jooa11y-panel-bg: #fff; 92 --jooa11y-panel-bg-secondary: #f6f6f6; 93 --jooa11y-panel-bg-splitter: #d7d7d7; 94 --jooa11y-panel-error: #d30017; 95 --jooa11y-panel-secondary: #4d4d4d; 96 --jooa11y-panel-secondary-hover: #0077c8; 97 --jooa11y-panel-toggle-active: #c6c6c6; 98 --jooa11y-setting-switch-bg-on: #21b5ff; 99 --jooa11y-setting-switch-bg-off: #757575; 100 --jooa11y-hyperlink: #004c9b; 101 --jooa11y-shortcut-hover: #e8e8e8; 102 } 103 } 104 #jooa11y-container div { 105 display: block; 106 } 107 108 #jooa11y-container * { 109 font-family: var(--jooa11y-font-face); 110 line-height: 22px; 111 -webkit-font-smoothing: auto; 112 } 113 114 #jooa11y-container p, 115 #jooa11y-container ol, 116 #jooa11y-container ul, 117 #jooa11y-container li, 118 #jooa11y-container label { 119 font-size: var(--jooa11y-normal-text); 120 font-weight: normal; 121 letter-spacing: normal; 122 word-break: normal; 123 -webkit-padding-start: 0; 124 padding-inline-start: 0; 125 margin-bottom: 0; 126 } 127 128 .jooa11y-instance { 129 display: block; 130 } 131 132 .jooa11y-instance-inline { 133 display: inline-block; 134 } 135 136 .jooa11y-overflow { 137 overflow: auto; 138 } 139 140 /*===== Main button ===== */ 141 #jooa11y-container #jooa11y-toggle { 142 position: fixed; 143 inset-inline-end: 15px; 144 bottom: 15px; 145 z-index: 9999999999; 146 width: 55px; 147 height: 55px; 148 padding: 10px; 149 margin: 0; 150 overflow: visible; 151 color: #fff; 152 cursor: pointer; 153 background-image: linear-gradient(to top, #e040fb, #00bcd4); 154 background-size: 150% 150%; 155 border: 0; 156 border-radius: 50px; 157 transition: all 0.2s ease-in-out; 158 } 159 160 #jooa11y-container #jooa11y-toggle:hover, 161 #jooa11y-container #jooa11y-toggle:focus { 162 -webkit-animation: jooa11y-toggle-gradient 3s ease; 163 animation: jooa11y-toggle-gradient 3s ease; 164 } 165 166 #jooa11y-container .jooa11y-notification-badge-warning { 167 color: var(--jooa11y-warning-text); 168 background-color: var(--jooa11y-warning-hover); 169 border: 1px solid var(--jooa11y-warning); 170 } 171 172 #jooa11y-container #jooa11y-notification-badge { 173 position: absolute; 174 top: -3px; 175 right: -3px; 176 display: none; 177 align-items: center; 178 justify-content: center; 179 width: 20px; 180 height: 20px; 181 font-size: 13px; 182 font-weight: normal; 183 line-height: 1; 184 color: #fff; 185 background-color: #eb0000; 186 border-radius: 100px; 187 } 188 189 #jooa11y-container #jooa11y-notification-badge > div { 190 position: absolute; 191 top: 50%; 192 left: 50%; 193 -webkit-transform: translate(-50%, -50%); 194 transform: translate(-50%, -50%); 195 } 196 197 #jooa11y-container button.jooa11y-on { 198 background-image: linear-gradient(to bottom, #e040fb, #00bcd4); 199 } 200 201 #jooa11y-container .loading-jooa11y::before { 202 position: absolute; 203 box-sizing: border-box; 204 display: inline-block; 205 width: 100%; 206 height: 100%; 207 margin: -10px; 208 content: ""; 209 border: 4px solid rgba(255, 255, 255, 0.9); 210 border-top: 4px solid transparent; 211 border-bottom: 4px solid transparent; 212 border-radius: 50%; 213 -webkit-animation: jooa11y-rotate 1.5s ease; 214 animation: jooa11y-rotate 1.5s ease; 215 -webkit-animation-fill-mode: forwards; 216 animation-fill-mode: forwards; 217 } 218 219 #jooa11y-toggle svg path { 220 fill: var(--jooa11y-panel-bg); 221 } 222 223 /* Main focus styles */ 224 #jooa11y-container #jooa11y-panel a:focus, 225 #jooa11y-container .jooa11y-close-btn:focus, 226 #jooa11y-container #jooa11y-cycle-toggle:focus, 227 #jooa11y-container button.jooa11y-btn:focus, 228 #jooa11y-container button#jooa11y-toggle:focus { 229 outline: 0; 230 box-shadow: 0 0 0 5px var(--jooa11y-focus-color); 231 } 232 233 /*===== Main panel/container ===== */ 234 #jooa11y-container label { 235 display: inline-block; 236 width: 180px; 237 margin: 0; 238 font-weight: normal; 239 color: var(--jooa11y-panel-primary); 240 cursor: pointer; 241 } 242 243 #jooa11y-container #jooa11y-panel.jooa11y-active { 244 height: auto; 245 visibility: visible; 246 opacity: 1; 247 transition: opacity 0.2s, -webkit-transform 0.2s; 248 transition: transform 0.2s, opacity 0.2s; 249 transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s; 250 -webkit-transform: scale(1); 251 transform: scale(1); 252 -webkit-transform-origin: bottom right; 253 transform-origin: bottom right; 254 } 255 256 #jooa11y-container #jooa11y-panel { 257 position: fixed; 258 inset-inline-end: 42px; 259 bottom: 25px; 260 z-index: 8890; 261 width: 310px; 262 overflow: visible; 263 visibility: hidden; 264 background: var(--jooa11y-panel-bg); 265 border-radius: 0.25em; 266 box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15); 267 opacity: 0; 268 transition: opacity 0.2s, -webkit-transform 0.2s; 269 transition: transform 0.2s, opacity 0.2s; 270 transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s; 271 -webkit-transform: scale(0); 272 transform: scale(0); 273 -webkit-transform-origin: 100% 100%; 274 transform-origin: 100% 100%; 275 } 276 277 #jooa11y-container #jooa11y-panel-alert { 278 align-items: center; 279 max-height: 200px; 280 padding: 15px 20px 15px 15px; 281 overflow-y: auto; 282 color: var(--jooa11y-panel-primary); 283 border-bottom: 1px solid var(--jooa11y-panel-bg-splitter); 284 } 285 286 #jooa11y-container #jooa11y-panel-alert-preview, 287 #jooa11y-container #jooa11y-panel-alert-text { 288 font-family: var(--jooa11y-font-face); 289 font-size: var(--jooa11y-normal-text); 290 font-weight: normal; 291 line-height: 22px; 292 } 293 294 #jooa11y-container #jooa11y-panel-alert-preview { 295 padding: 10px; 296 margin-top: 15px; 297 background: var(--jooa11y-panel-bg-secondary); 298 border: 1px dashed var(--jooa11y-panel-bg-splitter); 299 border-radius: 5px; 300 } 301 302 #jooa11y-container #jooa11y-panel-content { 303 display: flex; 304 align-items: center; 305 padding: 10px 20px 10px 10px; 306 color: var(--jooa11y-panel-primary); 307 } 308 309 #jooa11y-container #jooa11y-panel-controls { 310 display: flex; 311 } 312 313 #jooa11y-container #jooa11y-panel a { 314 color: var(--jooa11y-hyperlink); 315 text-decoration: underline; 316 cursor: pointer; 317 border-bottom: 0; 318 } 319 320 #jooa11y-container #jooa11y-panel a:hover, 321 #jooa11y-container #jooa11y-panel a:focus { 322 text-decoration: none; 323 } 324 325 #jooa11y-container #jooa11y-status { 326 font-size: var(--jooa11y-large-text); 327 color: var(--jooa11y-panel-primary); 328 margin: 0; 329 } 330 331 #jooa11y-container .jooa11y-errors .jooa11y-panel-icon, 332 #jooa11y-container .jooa11y-good .jooa11y-panel-icon, 333 #jooa11y-container .jooa11y-warnings .jooa11y-panel-icon { 334 width: 35px; 335 height: 35px; 336 } 337 338 #jooa11y-container .jooa11y-errors .jooa11y-panel-icon { 339 background: var(--jooa11y-panel-error); 340 mask: var(--jooa11y-error-svg) center no-repeat; 341 -webkit-mask: var(--jooa11y-error-svg) center no-repeat; 342 } 343 344 #jooa11y-container .jooa11y-good .jooa11y-panel-icon { 345 background: var(--jooa11y-good); 346 mask: var(--jooa11y-good-svg) center no-repeat; 347 -webkit-mask: var(--jooa11y-good-svg) center no-repeat; 348 } 349 350 #jooa11y-container .jooa11y-warnings .jooa11y-panel-icon { 351 background: var(--jooa11y-warning-svg-color); 352 mask: var(--jooa11y-warning-svg) center no-repeat; 353 -webkit-mask: var(--jooa11y-warning-svg) center no-repeat; 354 } 355 356 /* Shortcut icon */ 357 .jooa11y-shortcut-icon { 358 display: inline-block; 359 width: 50px; 360 height: 20px; 361 margin-top: 5px; 362 background: var(--jooa11y-panel-primary); 363 mask: var(--jooa11y-shortcut-svg) center no-repeat; 364 -webkit-mask: var(--jooa11y-shortcut-svg) center no-repeat; 365 } 366 367 /* Outline and settings Panel */ 368 #jooa11y-container #jooa11y-panel-alert, 369 #jooa11y-container #jooa11y-readability-panel, 370 #jooa11y-container #jooa11y-settings-panel, 371 #jooa11y-container #jooa11y-outline-panel { 372 display: none; 373 opacity: 0; 374 } 375 376 #jooa11y-container #jooa11y-panel-alert.jooa11y-active, 377 #jooa11y-container #jooa11y-readability-panel.jooa11y-active, 378 #jooa11y-container #jooa11y-settings-panel.jooa11y-active, 379 #jooa11y-container #jooa11y-outline-panel.jooa11y-active { 380 display: block; 381 opacity: 1; 382 } 383 384 #jooa11y-container #jooa11y-settings-header, 385 #jooa11y-container #jooa11y-outline-header { 386 padding: 10px 15px 0; 387 } 388 389 #jooa11y-container #jooa11y-settings-content, 390 #jooa11y-container #jooa11y-outline-content { 391 padding: 0 15px 10px; 392 border-bottom: 1px solid var(--jooa11y-panel-bg-splitter); 393 } 394 395 #jooa11y-container #jooa11y-outline-content { 396 max-height: 250px; 397 overflow-y: auto; 398 } 399 400 #jooa11y-container #jooa11y-settings-panel, 401 #jooa11y-container #jooa11y-outline-panel .jooa11y-outline-list-item { 402 color: var(--jooa11y-panel-primary); 403 } 404 405 #jooa11y-container #jooa11y-settings-panel .jooa11y-red-text, 406 #jooa11y-container #jooa11y-outline-panel .jooa11y-outline-list-item.jooa11y-red-text { 407 color: var(--jooa11y-red-text); 408 } 409 410 #jooa11y-container .jooa11y-missing-h1 { 411 padding: 2px; 412 margin: 0 15px; 413 border: 2px dashed var(--jooa11y-red-text); 414 } 415 416 #jooa11y-container .jooa11y-badge { 417 display: inline; 418 min-width: 10px; 419 padding: 2px 5px; 420 font-size: 12px; 421 font-weight: 700; 422 color: var(--jooa11y-panel-primary); 423 text-align: center; 424 white-space: nowrap; 425 background-color: var(--jooa11y-panel-badge); 426 border-radius: 10px; 427 } 428 429 #jooa11y-container .jooa11y-error-badge { 430 color: var(--jooa11y-error-text); 431 background: var(--jooa11y-error); 432 } 433 434 #jooa11y-container .jooa11y-warning-badge { 435 color: var(--jooa11y-panel-bg); 436 background: var(--jooa11y-yellow-text); 437 } 438 439 #jooa11y-container #jooa11y-outline-list .jooa11y-outline-2 { 440 -webkit-margin-start: 15px; 441 margin-inline-start: 15px; 442 } 443 444 #jooa11y-container #jooa11y-outline-list .jooa11y-outline-3 { 445 -webkit-margin-start: 30px; 446 margin-inline-start: 30px; 447 } 448 449 #jooa11y-container #jooa11y-outline-list .jooa11y-outline-4 { 450 -webkit-margin-start: 45px; 451 margin-inline-start: 45px; 452 } 453 454 #jooa11y-container #jooa11y-outline-list .jooa11y-outline-5 { 455 -webkit-margin-start: 60px; 456 margin-inline-start: 60px; 457 } 458 459 #jooa11y-container #jooa11y-outline-list .jooa11y-outline-6 { 460 -webkit-margin-start: 75px; 461 margin-inline-start: 75px; 462 } 463 464 #jooa11y-container #jooa11y-outline-list { 465 display: block; 466 padding: 0; 467 margin: 0; 468 } 469 470 #jooa11y-container #jooa11y-outline-list li { 471 display: block; 472 padding: 0; 473 margin-top: 0; 474 margin-bottom: 0; 475 list-style-type: none; 476 } 477 478 /* Readability panel */ 479 #jooa11y-container .jooa11y-readability-level { 480 display: inline-block; 481 -webkit-padding-start: 10px; 482 padding-inline-start: 10px; 483 } 484 485 #jooa11y-container #jooa11y-readability-content { 486 width: 100%; 487 padding: 10px 15px; 488 color: var(--jooa11y-panel-primary); 489 border-bottom: 1px solid var(--jooa11y-panel-bg-splitter); 490 } 491 492 #jooa11y-container #jooa11y-readability-details { 493 padding: 0; 494 margin: 0; 495 white-space: normal; 496 list-style-type: none; 497 } 498 499 #jooa11y-container #jooa11y-readability-details li { 500 display: inline-block; 501 padding: 0 10px 0 0; 502 margin: 0; 503 list-style-type: none; 504 } 505 506 /* Scroll bar */ 507 #jooa11y-container #jooa11y-panel-alert::-webkit-scrollbar, 508 #jooa11y-container #jooa11y-settings-content::-webkit-scrollbar, 509 #jooa11y-container #jooa11y-outline-content::-webkit-scrollbar { 510 width: 7px; 511 } 512 513 #jooa11y-container #jooa11y-panel-alert, 514 #jooa11y-container #jooa11y-settings-content, 515 #jooa11y-container #jooa11y-outline-content { 516 scrollbar-width: thin; 517 scrollbar-color: var(--jooa11y-panel-bg-splitter); 518 } 519 520 #jooa11y-container #jooa11y-panel-alert::-webkit-scrollbar-thumb, 521 #jooa11y-container #jooa11y-settings-content::-webkit-scrollbar-thumb, 522 #jooa11y-container #jooa11y-outline-content::-webkit-scrollbar-thumb { 523 background-color: var(--jooa11y-panel-bg-splitter); 524 border-radius: 6px; 525 } 526 527 /* Jump to issue button */ 528 #jooa11y-container #jooa11y-cycle-toggle { 529 position: relative; 530 width: 35px; 531 height: 35px; 532 -webkit-margin-end: 10px; 533 margin-inline-end: 10px; 534 overflow: visible; 535 cursor: pointer; 536 border: 0; 537 border-radius: 50px; 538 transition: all 0.2s ease-in-out; 539 background: none; 540 padding: 0; 541 } 542 543 #jooa11y-container #jooa11y-cycle-toggle:before { 544 position: absolute; 545 top: -7px; 546 right: -7px; 547 bottom: -7px; 548 left: -7px; 549 content: ""; 550 } 551 552 #jooa11y-container #jooa11y-cycle-toggle:hover:not(:disabled), 553 #jooa11y-container #jooa11y-cycle-toggle:focus:not(:disabled) { 554 background-color: var(--jooa11y-shortcut-hover); 555 } 556 557 /* Setting & Outline toggles */ 558 #jooa11y-container #jooa11y-settings-toggle.jooa11y-settings-active, 559 #jooa11y-container #jooa11y-settings-toggle:hover, 560 #jooa11y-container #jooa11y-outline-toggle.jooa11y-outline-active, 561 #jooa11y-container #jooa11y-outline-toggle:hover { 562 background-color: var(--jooa11y-shortcut-hover); 563 } 564 565 #jooa11y-container #jooa11y-outline-toggle { 566 border-radius: 0 0 0 5px; 567 } 568 569 #jooa11y-container #jooa11y-settings-toggle, 570 #jooa11y-container #jooa11y-outline-toggle { 571 position: relative; 572 display: block; 573 width: 100%; 574 height: 30px; 575 padding: 0; 576 margin: 0; 577 font-size: var(--jooa11y-normal-text); 578 font-weight: 400; 579 line-height: 0; 580 color: var(--jooa11y-panel-secondary); 581 text-align: center; 582 cursor: pointer; 583 background: var(--jooa11y-panel-bg-secondary); 584 background-color: var(--jooa11y-panel-bg-secondary); 585 border-top: 1px solid var(--jooa11y-panel-bg-splitter); 586 border-right: 1px solid var(--jooa11y-panel-bg-splitter); 587 border-bottom: 0; 588 border-left: 0; 589 outline: 0; 590 opacity: 1; 591 transition: background 0.2s; 592 } 593 594 /* Accessibility: Increase target size. */ 595 #jooa11y-container #jooa11y-settings-toggle:before, 596 #jooa11y-container #jooa11y-outline-toggle:before { 597 position: absolute; 598 top: -7px; 599 right: 0; 600 bottom: -8px; 601 left: 0; 602 content: ""; 603 } 604 605 #jooa11y-container #jooa11y-other-options li, 606 #jooa11y-container #jooa11y-settings-options li { 607 display: flex; 608 align-items: center; 609 justify-content: space-between; 610 padding: 1px 0; 611 list-style-type: none; 612 } 613 614 #jooa11y-container #jooa11y-other-options li + li, 615 #jooa11y-container #jooa11y-settings-options li + li { 616 border-color: var(--jooa11y-panel-bg-splitter); 617 border-top: 1px solid; 618 } 619 620 /* Close button within panel. */ 621 #jooa11y-container .jooa11y-close-btn { 622 position: relative; 623 float: right; 624 width: 30px; 625 height: 30px; 626 margin: 0; 627 font-size: var(--jooa11y-normal-text); 628 font-weight: normal; 629 color: var(--jooa11y-panel-primary); 630 cursor: pointer; 631 background: none; 632 border: 0; 633 border-radius: 50%; 634 transition: all 0.2s ease-in-out; 635 } 636 637 [dir=rtl] #jooa11y-container .jooa11y-close-btn { 638 float: left; 639 } 640 641 #jooa11y-container .jooa11y-close-btn:hover, 642 #jooa11y-container .jooa11y-close-btn:focus { 643 background-color: var(--jooa11y-shortcut-hover); 644 } 645 646 #jooa11y-container .jooa11y-close-btn:after { 647 position: absolute; 648 top: -7px; 649 right: -7px; 650 bottom: -7px; 651 left: -7px; 652 content: ""; 653 } 654 655 #jooa11y-container .jooa11y-close-btn:after { 656 background: var(--jooa11y-setting-switch-bg-off); 657 mask: var(--jooa11y-close-btn-svg) center no-repeat; 658 -webkit-mask: var(--jooa11y-close-btn-svg) center no-repeat; 659 } 660 661 /* Toggle buttons within Settings panel. */ 662 #jooa11y-container .jooa11y-settings-switch { 663 position: relative; 664 width: 80px; 665 height: 45px; 666 padding: 7px 10px; 667 margin: 0; 668 font-size: var(--jooa11y-normal-text); 669 font-weight: normal; 670 color: var(--jooa11y-panel-primary); 671 cursor: pointer; 672 background: none; 673 border: 0; 674 border-radius: 5px; 675 } 676 677 #jooa11y-container .jooa11y-settings-switch[aria-pressed=true]:after, 678 #jooa11y-container .jooa11y-settings-switch[aria-pressed=false]:after { 679 display: inline-block; 680 width: 27px; 681 height: 27px; 682 margin: 0 4px 4px; 683 vertical-align: middle; 684 content: ""; 685 } 686 687 #jooa11y-container .jooa11y-settings-switch[aria-pressed=true]:after { 688 background: var(--jooa11y-setting-switch-bg-on); 689 mask: var(--jooa11y-setting-switch-on-svg) center no-repeat; 690 -webkit-mask: var(--jooa11y-setting-switch-on-svg) center no-repeat; 691 } 692 693 #jooa11y-container .jooa11y-settings-switch[aria-pressed=false]:after { 694 background: var(--jooa11y-setting-switch-bg-off); 695 mask: var(--jooa11y-setting-switch-off-svg) center no-repeat; 696 -webkit-mask: var(--jooa11y-setting-switch-off-svg) center no-repeat; 697 } 698 699 /* Default keyboard focus */ 700 #jooa11y-container .jooa11y-settings-switch:focus, 701 #jooa11y-container #jooa11y-settings-toggle:focus, 702 #jooa11y-container #jooa11y-outline-toggle:focus { 703 outline: 0; 704 box-shadow: inset 0 0 0 4px var(--jooa11y-focus-color); 705 } 706 707 button.jooa11y-btn:focus, 708 #jooa11y-container [tabindex="0"]:focus, 709 #jooa11y-container [tabindex="-1"]:focus { 710 outline: 0; 711 box-shadow: 0 0 0 5px var(--jooa11y-focus-color); 712 } 713 714 /* Remove default focus styles for mouse users ONLY if :focus-visible is supported. */ 715 #jooa11y-container .jooa11y-settings-switch:focus:not(:focus-visible), 716 #jooa11y-container #jooa11y-settings-toggle:focus:not(:focus-visible), 717 #jooa11y-container #jooa11y-outline-toggle:focus:not(:focus-visible) { 718 outline: 0; 719 box-shadow: none; 720 } 721 722 button.jooa11y-btn:focus, 723 #jooa11y-container [tabindex="0"]:focus:not(:focus-visible), 724 #jooa11y-container [tabindex="-1"]:focus:not(:focus-visible) { 725 outline: 0; 726 box-shadow: none; 727 } 728 729 /* :focus-visible supported */ 730 #jooa11y-container .jooa11y-settings-switch:focus-visible, 731 #jooa11y-container #jooa11y-settings-toggle:focus-visible, 732 #jooa11y-container #jooa11y-outline-toggle:focus-visible { 733 outline: 0; 734 box-shadow: inset 0 0 0 4px var(--jooa11y-focus-color); 735 } 736 737 button.jooa11y-btn:focus, 738 #jooa11y-container [tabindex="0"]:focus-visible, 739 #jooa11y-container [tabindex="-1"]:focus-visible { 740 outline: 0; 741 box-shadow: 0 0 0 5px var(--jooa11y-focus-color); 742 } 743 744 /*===== Error, Warning, Pass buttons ===== */ 745 button.jooa11y-btn { 746 position: absolute; 747 z-index: 8888; 748 display: block; 749 width: 36px; 750 min-width: 0; 751 height: 36px; 752 padding: 0; 753 font-size: 0; 754 line-height: normal; 755 cursor: pointer; 756 border-radius: 50%; 757 box-shadow: 0 0 16px 0 #00004f; 758 transition: all 0.2s ease-in-out; 759 } 760 761 button.jooa11y-btn:after { 762 position: absolute; 763 top: -7px; 764 left: -7px; 765 width: 36px; 766 height: 36px; 767 padding: 7px; 768 content: ""; 769 } 770 771 /* To prevent overlap. */ 772 button.jooa11y-warning-btn { 773 margin: 20px; 774 } 775 776 button.jooa11y-good-btn, 777 button.jooa11y-error-btn { 778 margin: 10px; 779 } 780 781 button.jooa11y-error-btn-text, 782 button.jooa11y-good-btn-text, 783 button.jooa11y-warning-btn-text { 784 margin: -30px 10px; 785 } 786 787 /* Error */ 788 button.jooa11y-error-btn, 789 button.jooa11y-error-btn-text { 790 background: 50% 50% var(--jooa11y-error) var(--jooa11y-error-svg) no-repeat; 791 background-color: var(--jooa11y-error); 792 background-size: 22px; 793 border: 1px solid var(--jooa11y-error); 794 } 795 796 button.jooa11y-error-btn:hover, 797 button.jooa11y-error-btn:focus, 798 button.jooa11y-error-btn-text:hover, 799 button.jooa11y-error-btn-text:focus { 800 background-color: var(--jooa11y-error-hover); 801 } 802 803 /* Pass button */ 804 button.jooa11y-good-btn, 805 button.jooa11y-good-btn-text { 806 background: 50% 50% var(--jooa11y-good) var(--jooa11y-good-svg) no-repeat; 807 background-color: var(--jooa11y-good); 808 background-size: 20px; 809 border: 1px solid var(--jooa11y-good); 810 } 811 812 button.jooa11y-good-btn:hover, 813 button.jooa11y-good-btn:focus, 814 button.jooa11y-good-btn-text:hover, 815 button.jooa11y-good-btn-text:focus { 816 background-color: var(--jooa11y-good-hover); 817 } 818 819 /* Warning button */ 820 button.jooa11y-warning-btn, 821 button.jooa11y-warning-btn-text { 822 background: 50% 50% var(--jooa11y-warning) var(--jooa11y-warning-svg) no-repeat; 823 background-color: var(--jooa11y-warning); 824 background-size: 24px; 825 border: 1px solid var(--jooa11y-warning); 826 } 827 828 button.jooa11y-warning-btn:hover, 829 button.jooa11y-warning-btn:focus, 830 button.jooa11y-warning-btn-text:hover, 831 button.jooa11y-warning-btn-text:focus { 832 background-color: var(--jooa11y-warning-hover); 833 } 834 835 /* Misc */ 836 .jooa11y-visually-hidden { 837 position: absolute; 838 display: block; 839 width: 1px; 840 height: 1px; 841 padding: 0; 842 overflow: hidden; 843 clip: rect(1px, 1px, 1px, 1px); 844 -webkit-clip-path: inset(50%); 845 clip-path: inset(50%); 846 white-space: nowrap; 847 border: 0; 848 } 849 850 .jooa11y-header-text-inline, 851 .jooa11y-header-text h2, 852 .jooa11y-header-text { 853 display: block; 854 margin-bottom: 3px; 855 font-size: var(--jooa11y-large-text); 856 font-weight: 600; 857 color: var(--jooa11y-panel-primary); 858 } 859 860 .jooa11y-header-text-inline { 861 display: inline-block; 862 } 863 864 .jooa11y-kbd { 865 padding: 0.1em 0.3em; 866 color: var(--jooa11y-panel-primary); 867 background-color: var(--jooa11y-panel-badge); 868 border-radius: 0.2em; 869 } 870 871 /* Link, text, and image outlines */ 872 .jooa11y-bold { 873 font-weight: 600; 874 } 875 876 .jooa11y-red-text { 877 font-family: var(--jooa11y-font-face); 878 font-size: var(--jooa11y-normal-text); 879 color: var(--jooa11y-red-text); 880 } 881 882 .jooa11y-yellow-text { 883 font-family: var(--jooa11y-font-face); 884 font-size: var(--jooa11y-normal-text); 885 color: var(--jooa11y-yellow-text); 886 } 887 888 .jooa11y-error-border { 889 outline: 5px solid var(--jooa11y-error); 890 } 891 892 .jooa11y-warning-border { 893 outline: 5px solid var(--jooa11y-warning); 894 } 895 896 .jooa11y-good-border { 897 outline: 5px solid var(--jooa11y-good); 898 } 899 900 p#jooa11y-readability-info { 901 -webkit-margin-start: 10px; 902 margin-inline-start: 10px; 903 display: inline; 904 } 905 906 .jooa11y-readability-score { 907 padding: 2px 5px; 908 -webkit-margin-start: 5px; 909 margin-inline-start: 5px; 910 color: var(--jooa11y-panel-primary); 911 background-color: var(--jooa11y-panel-badge); 912 border-radius: 0.25em; 913 } 914 915 a.jooa11y-good-text, 916 .jooa11y-good-text { 917 color: var(--jooa11y-good-text); 918 background-color: var(--jooa11y-good); 919 border-color: transparent; 920 border-radius: 0.25em; 921 box-shadow: 0 0 0 4px var(--jooa11y-good); 922 } 923 924 a.jooa11y-error-text, 925 .jooa11y-error-text { 926 color: var(--jooa11y-error-text); 927 background-color: var(--jooa11y-error); 928 border-color: transparent; 929 border-radius: 0.25em; 930 box-shadow: 0 0 0 4px var(--jooa11y-error); 931 } 932 933 .jooa11y-warning-uppercase, 934 a.jooa11y-warning-text, 935 .jooa11y-warning-text { 936 color: var(--jooa11y-warning-text); 937 background-color: var(--jooa11y-warning); 938 border-color: transparent; 939 border-radius: 0.25em; 940 box-shadow: 0 0 0 4px var(--jooa11y-warning); 941 } 942 943 /* Full width panels */ 944 .jooa11y-error-message-container, 945 .jooa11y-warning-message-container, 946 .jooa11y-good-message-container { 947 position: absolute; 948 top: 0; 949 z-index: 99999; 950 display: block; 951 width: 100%; 952 } 953 954 .jooa11y-error-message, 955 .jooa11y-warning-message, 956 .jooa11y-good-message { 957 max-width: 900px; 958 padding: 10px 0 7px; 959 margin: 0 auto; 960 font-family: var(--jooa11y-font-face); 961 font-size: var(--jooa11y-normal-text); 962 line-height: 22px; 963 text-align: center; 964 } 965 966 .jooa11y-error-message-container { 967 background-color: var(--jooa11y-error); 968 } 969 970 .jooa11y-warning-message-container { 971 background-color: var(--jooa11y-warning); 972 } 973 974 .jooa11y-good-message-container { 975 background-color: var(--jooa11y-good); 976 } 977 978 .jooa11y-error-message a, 979 .jooa11y-warning-message a, 980 .jooa11y-good-message a { 981 text-decoration: underline; 982 border: 0; 983 } 984 985 .jooa11y-error-message a, 986 .jooa11y-error-message { 987 color: var(--jooa11y-error-text); 988 } 989 990 .jooa11y-warning-message a, 991 .jooa11y-warning-message { 992 color: var(--jooa11y-warning-text); 993 } 994 995 .jooa11y-good-message a, 996 .jooa11y-good-message { 997 color: var(--jooa11y-good-text); 998 } 999 1000 .jooa11y-error-message a:hover, 1001 .jooa11y-error-message a:focus, 1002 .jooa11y-warning-message a:hover, 1003 .jooa11y-warning-message a:focus, 1004 .jooa11y-good-message a:hover, 1005 .jooa11y-good-message a:focus { 1006 text-decoration: none; 1007 } 1008 1009 .jooa11y-error-message:before, 1010 .jooa11y-warning-message:before, 1011 .jooa11y-good-message:before { 1012 width: 24px; 1013 height: 24px; 1014 margin: 10px; 1015 vertical-align: middle; 1016 } 1017 1018 .jooa11y-error-message:before { 1019 content: var(--jooa11y-error-svg); 1020 } 1021 1022 .jooa11y-warning-message:before { 1023 content: var(--jooa11y-warning-svg); 1024 } 1025 1026 .jooa11y-good-message:before { 1027 content: var(--jooa11y-good-svg); 1028 } 1029 1030 /*===== Heading label ===== */ 1031 span.jooa11y-label-visible { 1032 display: inline-block !important; 1033 } 1034 1035 span.jooa11y-heading-label { 1036 position: absolute; 1037 z-index: 200; 1038 display: none; 1039 padding: 3px; 1040 margin: -5px 0 0 5px; 1041 font-family: var(--jooa11y-font-face); 1042 font-size: var(--jooa11y-normal-text); 1043 font-weight: 500; 1044 line-height: normal; 1045 color: #fff; 1046 text-shadow: none; 1047 letter-spacing: normal; 1048 background-color: #777678; 1049 background-image: linear-gradient(to bottom right, #b629ce, #16aec2); 1050 border-radius: 3px; 1051 } 1052 1053 /* Pulse border: https://codepen.io/olam/pen/zcqea */ 1054 .jooa11y-pulse-border { 1055 border: 3px solid var(--jooa11y-focus-color); 1056 box-shadow: 0 0 0 var(--jooa11y-focus-color); 1057 -webkit-animation: pulse 2s infinite; 1058 animation: pulse 2s infinite; 1059 } 1060 1061 .jooa11y-pulse-border:hover, 1062 .jooa11y-pulse-border:focus { 1063 -webkit-animation: none; 1064 animation: none; 1065 } 1066 1067 @-webkit-keyframes pulse { 1068 0% { 1069 box-shadow: 0 0 0 0 var(--jooa11y-focus-color); 1070 } 1071 70% { 1072 box-shadow: 0 0 0 10px var(--jooa11y-pulse-color); 1073 } 1074 100% { 1075 box-shadow: 0 0 0 0 var(--jooa11y-pulse-color); 1076 } 1077 } 1078 1079 @keyframes pulse { 1080 0% { 1081 box-shadow: 0 0 0 0 var(--jooa11y-focus-color); 1082 } 1083 70% { 1084 box-shadow: 0 0 0 10px var(--jooa11y-pulse-color); 1085 } 1086 100% { 1087 box-shadow: 0 0 0 0 var(--jooa11y-pulse-color); 1088 } 1089 } 1090 /* ===== Helper ===== */ 1091 .jooa11y-clone-image-text { 1092 display: none; 1093 } 1094 1095 /*===== Animations ===== */ 1096 @-webkit-keyframes jooa11y-toggle-gradient { 1097 0% { 1098 background-position: 50% 0%; 1099 } 1100 50% { 1101 background-position: 50% 100%; 1102 } 1103 100% { 1104 background-position: 50% 0%; 1105 } 1106 } 1107 @keyframes jooa11y-toggle-gradient { 1108 0% { 1109 background-position: 50% 0%; 1110 } 1111 50% { 1112 background-position: 50% 100%; 1113 } 1114 100% { 1115 background-position: 50% 0%; 1116 } 1117 } 1118 @-webkit-keyframes jooa11y-rotate { 1119 0% { 1120 -webkit-transform: rotate(360deg); 1121 transform: rotate(360deg); 1122 } 1123 100% { 1124 border: 4px solid rgba(255, 255, 255, 0.05); 1125 } 1126 } 1127 @keyframes jooa11y-rotate { 1128 0% { 1129 -webkit-transform: rotate(360deg); 1130 transform: rotate(360deg); 1131 } 1132 100% { 1133 border: 4px solid rgba(255, 255, 255, 0.05); 1134 } 1135 } 1136 @media (prefers-reduced-motion: reduce) { 1137 #jooa11y-container * { 1138 transition: none; 1139 -webkit-transform: none; 1140 transform: none; 1141 -webkit-animation: none; 1142 animation: none; 1143 } 1144 1145 #jooa11y-container .loading-jooa11y::before { 1146 opacity: 0; 1147 -webkit-animation: none; 1148 animation: none; 1149 } 1150 } 1151 /*===== Tooltip additions ===== */ 1152 .jooa11y-hr { 1153 height: 1px; 1154 padding: 0; 1155 margin: 10px 0; 1156 background: var(--jooa11y-panel-bg-splitter); 1157 border: none; 1158 } 1159 1160 /*===== Custom tippy theme for Jooa11y ===== */ 1161 /* Hacky CSS reset to ensure maximum compatibility. */ 1162 .tippy-box[data-theme~=jooa11y-theme][role=tooltip] { 1163 all: unset; 1164 box-sizing: border-box; 1165 -webkit-animation: inherit; 1166 animation: inherit; 1167 } 1168 1169 .tippy-box[data-theme~=jooa11y-theme][role=tooltip][data-animation=fade][data-state=hidden] { 1170 opacity: 0; 1171 } 1172 1173 .tippy-box[data-theme~=jooa11y-theme][data-inertia][data-state=visible] { 1174 transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); 1175 } 1176 1177 /* Tooltip content */ 1178 .tippy-box[data-theme~=jooa11y-theme] * { 1179 font-family: var(--jooa11y-font-face); 1180 line-height: 22px; 1181 -webkit-font-smoothing: auto; 1182 letter-spacing: unset; 1183 } 1184 1185 .tippy-box[data-theme~=jooa11y-theme][role=tooltip], 1186 .tippy-box[data-theme~=jooa11y-theme] { 1187 display: block; 1188 padding: 8px; 1189 font-weight: normal; 1190 color: var(--jooa11y-panel-primary); 1191 background-color: var(--jooa11y-panel-bg); 1192 border-radius: 4px; 1193 outline: 0; 1194 box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15); 1195 transition-property: visibility, opacity, -webkit-transform; 1196 transition-property: transform, visibility, opacity; 1197 transition-property: transform, visibility, opacity, -webkit-transform; 1198 } 1199 1200 .tippy-box[data-theme~=jooa11y-theme] *:not(.jooa11y-header-text):not(.jooa11y-bold) { 1201 font-size: var(--jooa11y-normal-text); 1202 } 1203 1204 .tippy-box[data-theme~=jooa11y-theme] ul { 1205 padding: 5px 10px 0 20px; 1206 margin: 0; 1207 } 1208 1209 .tippy-box[data-theme~=jooa11y-theme] li { 1210 padding-bottom: 5px; 1211 } 1212 1213 .tippy-box[data-theme~=jooa11y-theme] a { 1214 color: var(--jooa11y-hyperlink); 1215 text-decoration: underline; 1216 } 1217 1218 .tippy-box[data-theme~=jooa11y-theme] a:hover, 1219 .tippy-box[data-theme~=jooa11y-theme] a:focus { 1220 text-decoration: none; 1221 } 1222 1223 /* Arrows */ 1224 .tippy-box[data-theme~=jooa11y-theme][data-placement^=top] > .tippy-arrow::before { 1225 border-top-color: var(--jooa11y-panel-bg); 1226 } 1227 1228 .tippy-box[data-theme~=jooa11y-theme][data-placement^=bottom] > .tippy-arrow::before { 1229 border-bottom-color: var(--jooa11y-panel-bg); 1230 } 1231 1232 .tippy-box[data-theme~=jooa11y-theme][data-placement^=left] > .tippy-arrow::before { 1233 border-left-color: var(--jooa11y-panel-bg); 1234 } 1235 1236 .tippy-box[data-theme~=jooa11y-theme][data-placement^=right] > .tippy-arrow::before { 1237 border-right-color: var(--jooa11y-panel-bg); 1238 } 1239 1240 /*----------------------------------------------------------------------- 1241 Jooa11y: the accessibility quality assurance assistant. 1242 License: "GPL-2.0-or-later" 1243 Copyright Open Source Matters, Inc 1244 1245 Jooa11y began as a vanilla js fork of the Sa11y library 1246 Author: Development led by Adam Chaboryk at Ryerson University. 1247 All acknowledgements and contributors: https://github.com/ryersondmp/sa11y 1248 License: "GPL-2.0-or-later" 1249 Copyright (c) 2020 - 2022 Ryerson University 1250 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 1251 ------------------------------------------------------------------------*/
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Wed Sep 7 05:41:13 2022 | Chilli.vc Blog - For Webmaster,Blog-Writer,System Admin and Domainer |