You are here

Home » API reference » Accessibility toolkit 7

field-loss.css in Accessibility toolkit 7 

#a11y-sim-field-loss-area {
  display: none;
}
body.a11y-sim-field-loss #a11y-sim-field-loss-area {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  z-index: 1000000000;
  position: fixed;
  opacity: 0.8;
  pointer-events: none;
  display: block !important;
}

body.a11y-sim-field-loss-central #a11y-sim-field-loss-area {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  top: 25%;
  left: 25%;
  right: 25%;
  bottom: 25%;
  -webkit-filter: blur(1rem);
  -moz-filter: blur(1rem);
  -o-filter: blur(1rem);
  -ms-filter: blur(1rem);
  filter: blur(1rem);
}
body.a11y-sim-field-loss-peripheral #a11y-sim-field-loss-area {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border-color: #242424;
  border-style: solid;
  border-width: 6rem;
  -webkit-filter: blur(1rem);
  -moz-filter: blur(1rem);
  -o-filter: blur(1rem);
  -ms-filter: blur(1rem);
  filter: blur(1rem);
}

#a11y-sim-field-loss-close {
  display: none;
}
body.a11y-sim-field-loss #a11y-sim-field-loss-close {
  z-index: 1000000001;
  bottom: 0;
  position: fixed;
  color: #242424;
  background-color: #eeeeee;
  font-size: 1.5rem;
  padding: .5rem;
  margin: 0 auto;
  text-align: center;
  right: 35%;
  left: 35%;
  display: block !important;
}

File

simulations/field-loss/field-loss.css
View source 
  1. #a11y-sim-field-loss-area {

  2.   display: none;

  3. }

  4. body.a11y-sim-field-loss #a11y-sim-field-loss-area {

  5.   top: 0;

  6.   bottom: 0;

  7.   left: 0;

  8.   right: 0;

  9.   background-color: #000000;

  10.   z-index: 1000000000;

  11.   position: fixed;

  12.   opacity: 0.8;

  13.   pointer-events: none;

  14.   display: block !important;

  15. }

  16. 

  17. body.a11y-sim-field-loss-central #a11y-sim-field-loss-area {

  18.   -moz-border-radius: 100px;

  19.   -webkit-border-radius: 100px;

  20.   border-radius: 100px;

  21.   top: 25%;

  22.   left: 25%;

  23.   right: 25%;

  24.   bottom: 25%;

  25.   -webkit-filter: blur(1rem);

  26.   -moz-filter: blur(1rem);

  27.   -o-filter: blur(1rem);

  28.   -ms-filter: blur(1rem);

  29.   filter: blur(1rem);

  30. }

  31. body.a11y-sim-field-loss-peripheral #a11y-sim-field-loss-area {

  32.   top: 0;

  33.   left: 0;

  34.   right: 0;

  35.   bottom: 0;

  36.   background: transparent;

  37.   border-color: #242424;

  38.   border-style: solid;

  39.   border-width: 6rem;

  40.   -webkit-filter: blur(1rem);

  41.   -moz-filter: blur(1rem);

  42.   -o-filter: blur(1rem);

  43.   -ms-filter: blur(1rem);

  44.   filter: blur(1rem);

  45. }

  46. 

  47. #a11y-sim-field-loss-close {

  48.   display: none;

  49. }

  50. body.a11y-sim-field-loss #a11y-sim-field-loss-close {

  51.   z-index: 1000000001;

  52.   bottom: 0;

  53.   position: fixed;

  54.   color: #242424;

  55.   background-color: #eeeeee;

  56.   font-size: 1.5rem;

  57.   padding: .5rem;

  58.   margin: 0 auto;

  59.   text-align: center;

  60.   right: 35%;

  61.   left: 35%;

  62.   display: block !important;

  63. }