diff --git a/VERSIONS_WIP/200425 b/VERSIONS_WIP/200425
new file mode 100644
index 0000000000000000000000000000000000000000..5160b23dde3d0d9afbb160babc3f115b54700c44
--- /dev/null
+++ b/VERSIONS_WIP/200425
@@ -0,0 +1 @@
+ - fonctionnalité #200425 : Boite d'accessibilité : ajout de la police Luciole pour les malvoyants.
\ No newline at end of file
diff --git a/public/opac/js/access_config/css/accessconfig.css b/public/opac/js/access_config/css/accessconfig.css
index 87cadfe0d9b1a30271796c3faa56d4901bdca2f2..389c90b82d40faf04cd6df1999f2f4bcf88225ce 100755
--- a/public/opac/js/access_config/css/accessconfig.css
+++ b/public/opac/js/access_config/css/accessconfig.css
@@ -8,70 +8,70 @@
***************************
*/
#a42-ac {
- position: fixed;
- z-index: 9999;
- width: 100%;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- padding: .75rem 1.5rem 1.5rem;
- background-color: #fff;
- border: 1px solid #fff;
- overflow: auto;
- font-size: 1rem;
-
- /* Hide AccessConfig by default */
- display: none;
-
- /* Access42 colors */
- color: #0b1b34;
-}
-
- @media screen and (max-width: 29.9em) {
-
- #a42-ac {
- border: 0;
- padding: .75rem;
- }
- }
+ position: fixed;
+ z-index: 9999;
+ width: 100%;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ padding: .75rem 1.5rem 1.5rem;
+ background-color: #fff;
+ border: 1px solid #fff;
+ overflow: auto;
+ font-size: 1rem;
+
+ /* Hide AccessConfig by default */
+ display: none;
+
+ /* Access42 colors */
+ color: #0b1b34;
+}
+
+@media screen and (max-width: 29.9em) {
+
+ #a42-ac {
+ border: 0;
+ padding: .75rem;
+ }
+}
#a42-ac,
#a42-ac *,
#a42-ac *::after,
#a42-ac *::before {
- box-sizing: border-box;
-}
-
- @media screen and (min-width: 50em) {
- #a42-ac{
- width: 90%;
- top: 10%;
- left: 50%;
- right: auto;
- bottom: auto;
- margin-left: -45%;
- }
- }
-
- @media screen and (min-width: 64em) {
- #a42-ac{
- width: 58.750em;
- margin-left: -29.375rem;
- }
- }
-
+ box-sizing: border-box;
+}
+
+@media screen and (min-width: 50em) {
+ #a42-ac{
+ width: 90%;
+ top: 10%;
+ left: 50%;
+ right: auto;
+ bottom: auto;
+ margin-left: -45%;
+ }
+}
+
+@media screen and (min-width: 64em) {
+ #a42-ac{
+ width: 58.750em;
+ margin-left: -29.375rem;
+ }
+}
+
/**
* AccessConfig main title
*/
#a42-ac h1 {
- margin: 0 3rem 0 0;
- font-size: 1.75em;
- line-height: 1.3;
+ margin: 0 3rem 0 0;
+ font-size: 1.75em;
+ line-height: 1.3;
- /* Access42 colors */
- color: #0b1b34;
+ /* Access42 colors */
+ color: #0b1b34;
}
@@ -84,29 +84,29 @@
*/
#a42-ac .sr-only {
- border: 0 !important;
- clip: rect(1px, 1px, 1px, 1px) !important;
- -webkit-clip-path: inset(50%) !important;
- clip-path: inset(50%) !important;
- height: 1px !important;
- margin: -1px !important;
- overflow: hidden !important;
- padding: 0 !important;
- position: absolute !important;
- width: 1px !important;
- white-space: nowrap !important;
+ border: 0 !important;
+ clip: rect(1px, 1px, 1px, 1px) !important;
+ -webkit-clip-path: inset(50%) !important;
+ clip-path: inset(50%) !important;
+ height: 1px !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ padding: 0 !important;
+ position: absolute !important;
+ width: 1px !important;
+ white-space: nowrap !important;
}
#a42-ac .sr-only-focusable:focus,
#a42-ac .sr-only-focusable:active {
- clip: auto !important;
- -webkit-clip-path: none !important;
- clip-path: none !important;
- height: auto !important;
- margin: auto !important;
- overflow: visible !important;
- width: auto !important;
- white-space: normal !important;
+ clip: auto !important;
+ -webkit-clip-path: none !important;
+ clip-path: none !important;
+ height: auto !important;
+ margin: auto !important;
+ overflow: visible !important;
+ width: auto !important;
+ white-space: normal !important;
}
@@ -114,38 +114,38 @@
* AccessConfig close button
*/
#a42-ac-close {
- position: absolute;
- top: 1.5rem;
- right: 1.5rem;
- width: 1.5rem;
- height: 1.5rem;
- cursor: pointer;
- border: 0;
+ position: absolute;
+ top: 1.5rem;
+ right: 1.5rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ cursor: pointer;
+ border: 0;
}
#a42-ac-close,
#a42-ac #a42-ac-close{
- overflow: hidden;
+ overflow: hidden;
}
#a42-ac-close::after {
- content: '';
- position: absolute;
- top: 0;
- left: 50%;
- display: block;
- margin-left: -.75rem;
- width: 1.5rem;
- height: 1.5rem;
- background: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiMzMTQ4NmUiLz48L3N2Zz4=') no-repeat 50% 50%;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 50%;
+ display: block;
+ margin-left: -.75rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ background: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiMzMTQ4NmUiLz48L3N2Zz4=') no-repeat 50% 50%;
}
#a42-ac-close:hover,
#a42-ac-close:focus,
#a42-ac-close:active {
- opacity: .6;
- background-color: transparent !important;
+ opacity: .6;
+ background-color: transparent !important;
}
@@ -159,233 +159,233 @@
#a42-ac optgroup,
#a42-ac select,
#a42-ac textarea {
- font-family: inherit;
- font-size: 100%;
- line-height: 1.15;
- margin: 0;
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
}
#a42-ac button,
#a42-ac input {
- overflow: visible;
+ overflow: visible;
}
#a42-ac button,
#a42-ac select {
- text-transform: none;
+ text-transform: none;
}
#a42-ac button,
#a42-ac [type="button"],
#a42-ac [type="submit"] {
- -webkit-appearance: button;
+ -webkit-appearance: button;
}
#a42-ac button::-moz-focus-inner,
#a42-ac [type="button"]::-moz-focus-inner,
#a42-ac [type="reset"]::-moz-focus-inner,
#a42-ac [type="submit"]::-moz-focus-inner {
- border-style: none;
- padding: 0;
+ border-style: none;
+ padding: 0;
}
#a42-ac button:-moz-focusring,
#a42-ac [type="button"]:-moz-focusring,
#a42-ac [type="reset"]:-moz-focusring,
#a42-ac [type="submit"]:-moz-focusring {
- outline: 1px dotted ButtonText;
+ outline: 1px dotted ButtonText;
}
#a42-ac-button {
background: url(../images/eye-low-vision-solid.png) no-repeat;
- background-size: auto 80%;
- color: transparent !important;
- height: 30px;
- background-color: var(--white);
- background-position: right 10px center;
- margin: 0;
- width: 50px;
- display: block;
+ background-size: auto 80%;
+ color: transparent !important;
+ height: 30px;
+ background-color: var(--white);
+ background-position: right 10px center;
+ margin: 0;
+ width: 50px;
+ display: block;
}
#a42-ac legend {
- box-sizing: border-box;
- color: inherit;
- display: table;
- max-width: 100%;
- padding: 0;
- white-space: normal;
+ box-sizing: border-box;
+ color: inherit;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal;
}
#a42-ac [type="checkbox"],
#a42-ac [type="radio"] {
- box-sizing: border-box;
- padding: 0;
+ box-sizing: border-box;
+ padding: 0;
}
/* Then, AccessConfig custom styles */
#a42-ac fieldset {
- margin: 1em 0 0 0;
- padding: 1em .5em 1em 1em;
- border-width: 0 0 0 .625em;
- border-style: solid;
+ margin: 1em 0 0 0;
+ padding: 1em .5em 1em 1em;
+ border-width: 0 0 0 .625em;
+ border-style: solid;
- /* Access42 colors */
- border-color: #cedae6;
- background-color: #e3ebf2;
+ /* Access42 colors */
+ border-color: #cedae6;
+ background-color: #e3ebf2;
}
- @media screen and (min-width: 50em) {
+@media screen and (min-width: 50em) {
- #a42-ac .a42-ac-content {
- display: flex;
- align-items: flex-start;
- flex-wrap: wrap;
- }
+ #a42-ac .a42-ac-content {
+ display: flex;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ }
- #a42-ac fieldset {
- width: 45%;
- width: calc(50% - .5em);
- align-self: stretch;
- }
+ #a42-ac fieldset {
+ width: 45%;
+ width: calc(50% - .5em);
+ align-self: stretch;
+ }
- #a42-ac fieldset:nth-child(odd) {
- clear: left;
- margin-right: .5em;
- }
+ #a42-ac fieldset:nth-child(odd) {
+ clear: left;
+ margin-right: .5em;
+ }
- #a42-ac fieldset:nth-child(even) {
- margin-left: .5em;
- }
- }
+ #a42-ac fieldset:nth-child(even) {
+ margin-left: .5em;
+ }
+}
- @media screen and (max-width: 29.9em) {
+@media screen and (max-width: 29.9em) {
- #a42-ac fieldset {
- font-size: .875em; /* 14px */
- padding: .5em;
- border-left-width: .357em;
- }
- }
+ #a42-ac fieldset {
+ font-size: .875em; /* 14px */
+ padding: .5em;
+ border-left-width: .357em;
+ }
+}
#a42-ac legend {
- float: left;
- width: 100%;
- margin: 0;
- padding-bottom: .364em;
- font-weight: bold;
- font-size: 1.375em;
+ float: left;
+ width: 100%;
+ margin: 0;
+ padding-bottom: .364em;
+ font-weight: bold;
+ font-size: 1.375em;
- /* Access42 colors */
- color: #0b1b34;
+ /* Access42 colors */
+ color: #0b1b34;
}
#a42-ac legend + *:first-child {
- clear: left;
+ clear: left;
}
#a42-ac label {
- margin: 0 1em .533em .5em;
- padding-top: .067em;
- padding-bottom: .067em;
- font-size: 0.938em; /* 15px */
- line-height: 1.6;
+ margin: 0 1em .533em .5em;
+ padding-top: .067em;
+ padding-bottom: .067em;
+ font-size: 0.938em; /* 15px */
+ line-height: 1.6;
}
/* Fake radios */
#a42-ac input[type="radio"]
{
- border: 0 !important;
- clip: rect(1px, 1px, 1px, 1px) !important;
- -webkit-clip-path: inset(50%) !important;
- clip-path: inset(50%) !important;
- height: 1px !important;
- margin: -1px !important;
- overflow: hidden !important;
- padding: 0 !important;
- position: absolute !important;
- width: 1px !important;
- white-space: nowrap !important;
+ border: 0 !important;
+ clip: rect(1px, 1px, 1px, 1px) !important;
+ -webkit-clip-path: inset(50%) !important;
+ clip-path: inset(50%) !important;
+ height: 1px !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ padding: 0 !important;
+ position: absolute !important;
+ width: 1px !important;
+ white-space: nowrap !important;
}
#a42-ac input[type="radio"] + label {
- position: relative;
- display: inline-block;
- vertical-align: middle;
- margin-left: 0;
- padding-left: 2.267em;
+ position: relative;
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 0;
+ padding-left: 2.267em;
}
#a42-ac input[type="radio"] + label::after,
#a42-ac input[type="radio"] + label::before {
- content: '';
- position: absolute;
- display: block;
- border-radius: 100%;
+ content: '';
+ position: absolute;
+ display: block;
+ border-radius: 100%;
}
#a42-ac input[type="radio"] + label::after
{
- top: .33334em; /* 5px */
- left: .33334em; /* 5px */
- width: .933em; /* 14px */
- height: .933em; /* 14px */
- transition: all 0.2s;
+ top: .33334em; /* 5px */
+ left: .33334em; /* 5px */
+ width: .933em; /* 14px */
+ height: .933em; /* 14px */
+ transition: all 0.2s;
- /* Access42 colors */
- background-color: #31486e;
+ /* Access42 colors */
+ background-color: #31486e;
}
#a42-ac input[type="radio"] + label::before {
- top: 0;
- left: 0;
- width: 1.6em; /* 24px */
- height: 1.6em; /* 24px */
- border-width: .2em;
- border-style: solid;
+ top: 0;
+ left: 0;
+ width: 1.6em; /* 24px */
+ height: 1.6em; /* 24px */
+ border-width: .2em;
+ border-style: solid;
- /* Access42 colors */
- border-color: #a0b0bd;
- background-color: #f9fcff;
+ /* Access42 colors */
+ border-color: #a0b0bd;
+ background-color: #f9fcff;
}
- @media screen and (max-width: 29.9em) {
+@media screen and (max-width: 29.9em) {
- #a42-ac input[type="radio"] + label::after {
- top: .357em;
- left: .357em;
- width: 1em;
- height: 1em;
- }
+ #a42-ac input[type="radio"] + label::after {
+ top: .357em;
+ left: .357em;
+ width: 1em;
+ height: 1em;
+ }
- #a42-ac input[type="radio"] + label::before {
- width: 1.714em;
- height: 1.714em;
- }
- }
+ #a42-ac input[type="radio"] + label::before {
+ width: 1.714em;
+ height: 1.714em;
+ }
+}
#a42-ac input[type="radio"]:focus + label {
- outline: 1px dotted;
+ outline: 1px dotted;
}
#a42-ac input[type="radio"]:checked + label::before {
- /* Access42 colors */
- border-color: #31486e;
+ /* Access42 colors */
+ border-color: #31486e;
}
#a42-ac input[type="radio"]:not(:checked) + label::after {
- opacity: 0;
- -webkit-transform: scale(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
- -ms-transform: scale(0); /* IE 9 */
- transform: scale(0); /* IE 10, Fx 16+, Op 12.1+ */
+ opacity: 0;
+ -webkit-transform: scale(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
+ -ms-transform: scale(0); /* IE 9 */
+ transform: scale(0); /* IE 10, Fx 16+, Op 12.1+ */
}
#a42-ac input[type="radio"]:disabled + label {
- opacity: .5;
+ opacity: .5;
}
#a42-ac input[type="radio"]:disabled + label:hover {
- cursor: not-allowed;
+ cursor: not-allowed;
}
@@ -395,7 +395,7 @@
*****************************
*/
body.a42-ac-active {
- overflow: hidden;
+ overflow: hidden;
}
@@ -403,28 +403,28 @@ body.a42-ac-active {
***************************
* AccessConfig page overlay
***************************
-*/
+ */
.a42-ac-overlay {
- position: fixed; /* could also be absolute */
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- background-color: rgba(11,27,52,0.8);
- z-index: 998;
- display: none;
+ position: fixed; /* could also be absolute */
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(11,27,52,0.8);
+ z-index: 998;
+ display: none;
}
.a42-ac-active .a42-ac-overlay{
- display: block;
+ display: block;
}
.a42-ac-inv-contrast .a42-ac-overlay {
- background-color: rgba(0,13,99,0.8) !important;
+ background-color: rgba(0,13,99,0.8) !important;
}
.a42-ac-high-contrast .a42-ac-overlay {
- background-color: rgba(32,33,41,0.8) !important;
+ background-color: rgba(32,33,41,0.8) !important;
}
@@ -445,8 +445,8 @@ body.a42-ac-active {
.a42-ac-inv-contrast *::after,
.a42-ac-high-contrast *::before,
.a42-ac-inv-contrast *::before {
- border-image: none !important;
- text-shadow: none !important;
+ border-image: none !important;
+ text-shadow: none !important;
}
/* Let SVG elements adapt to the chosen color scheme */
@@ -458,7 +458,7 @@ body.a42-ac-active {
.a42-ac-inv-contrast polygon,
.a42-ac-inv-contrast svg,
.a42-ac-inv-contrast svg * {
- fill: currentColor;
+ fill: currentColor;
}
/* Add a border on form elements when custom contrasts are on */
@@ -470,37 +470,37 @@ body.a42-ac-active {
.a42-ac-inv-contrast textarea,
.a42-ac-inv-contrast select,
.a42-ac-inv-contrast form button{
- border-width: 1px !important;
- border-style: solid !important;
+ border-width: 1px !important;
+ border-style: solid !important;
}
/* Change color of ::first-letter pseudo-elements if needed */
.a42-ac-high-contrast *::first-letter,
.a42-ac-inv-contrast *::first-letter{
- color: inherit !important;
+ color: inherit !important;
}
/* input[type="range"] */
.a42-ac-high-contrast input[type="range"],
.a42-ac-inv-contrast input[type="range"]{
- border: 0 !important;
+ border: 0 !important;
}
.a42-ac-high-contrast input[type="range"]::-webkit-slider-thumb,
.a42-ac-inv-contrast input[type="range"]::-webkit-slider-thumb {
- margin-top: -.25em; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
+ margin-top: -.25em; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
- @supports (-ms-ime-align: auto) { /* Dirty hack to target Edge only */
- .a42-ac-high-contrast input[type="range"]::-webkit-slider-thumb,
- .a42-ac-inv-contrast input[type="range"]::-webkit-slider-thumb {
- margin-top: 0;
- }
- }
+@supports (-ms-ime-align: auto) { /* Dirty hack to target Edge only */
+ .a42-ac-high-contrast input[type="range"]::-webkit-slider-thumb,
+ .a42-ac-inv-contrast input[type="range"]::-webkit-slider-thumb {
+ margin-top: 0;
+ }
+}
.a42-ac-high-contrast input[type="range"]::-webkit-slider-runnable-track,
.a42-ac-inv-contrast input[type="range"]::-webkit-slider-runnable-track {
- height: 0.313em;
+ height: 0.313em;
}
@@ -509,108 +509,108 @@ body.a42-ac-active {
*/
.a42-ac-high-contrast,
.a42-ac-high-contrast *{
- background-color: #343643 !important;
- color: white !important;
+ background-color: #343643 !important;
+ color: white !important;
}
.a42-ac-high-contrast,
.a42-ac-high-contrast *,
.a42-ac-high-contrast *::before,
.a42-ac-high-contrast *::after{
- border-color: white !important;
+ border-color: white !important;
}
.a42-ac-high-contrast #a42-ac-close::after {
- background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
+ background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
}
.a42-ac-high-contrast #a42-ac input[type="radio"] + label::before {
- border-color: #f9fcff !important;
- background-color: transparent !important;
+ border-color: #f9fcff !important;
+ background-color: transparent !important;
}
.a42-ac-high-contrast #a42-ac input[type="radio"] + label::after
{
- background-color: #f9fcff !important;
+ background-color: #f9fcff !important;
}
/* Add a border on form elements when high contrast is on */
.a42-ac-high-contrast input,
.a42-ac-high-contrast textarea,
.a42-ac-high-contrast select{
- border-color: #f9fcff !important;
- color: inherit !important;
+ border-color: #f9fcff !important;
+ color: inherit !important;
}
/* High contrast placeholder */
.a42-ac-high-contrast *::-webkit-input-placeholder { /* Chrome/Opera/Safari */
- color: white !important;
+ color: white !important;
}
.a42-ac-high-contrast *::-moz-placeholder { /* Firefox 19+ */
- color: white !important;
- opacity: 1 !important;
+ color: white !important;
+ opacity: 1 !important;
}
.a42-ac-high-contrast *:-ms-input-placeholder { /* IE 10+ */
- color: white !important;
+ color: white !important;
}
.a42-ac-high-contrast *:-moz-placeholder { /* Firefox 18- */
- color: white !important;
- opacity: 1 !important;
+ color: white !important;
+ opacity: 1 !important;
}
/* High contrast for input[type="date"] */
.a42-ac-high-contrast *::-webkit-datetime-edit-text {
- color: white !important;
+ color: white !important;
}
.a42-ac-high-contrast *::-webkit-datetime-edit-month-field {
- color: white !important;
+ color: white !important;
}
.a42-ac-high-contrast *::-webkit-datetime-edit-day-field {
- color: white !important;
+ color: white !important;
}
.a42-ac-high-contrast *::-webkit-datetime-edit-year-field {
- color: white !important;
+ color: white !important;
}
.a42-ac-high-contrast ::-webkit-calendar-picker-indicator {
- background: #343643 !important;
+ background: #343643 !important;
}
/* High contrast for input[type="range"] */
.a42-ac-high-contrast input[type="range"]::-webkit-slider-runnable-track { /* Webkit */
- background: white !important;
+ background: white !important;
}
.a42-ac-high-contrast input[type="range"]::-moz-range-track { /* Firefox */
- background: white !important;
+ background: white !important;
}
.a42-ac-high-contrast input[type="range"]::-moz-range-thumb {
- background: black !important;
- border: .15em solid white !important;
+ background: black !important;
+ border: .15em solid white !important;
}
.a42-ac-high-contrast input[type="range"]::-ms-fill-lower { /* IE/Edge */
- background: white !important;
+ background: white !important;
}
.a42-ac-high-contrast input[type="range"]::-ms-fill-upper {
- background: white !important;
+ background: white !important;
}
.a42-ac-high-contrast input[type="range"]:focus::-ms-fill-lower {
- background: white !important;
+ background: white !important;
}
.a42-ac-high-contrast input[type="range"]:focus::-ms-fill-upper {
- background: white !important;
+ background: white !important;
}
.a42-ac-high-contrast input[type="range"]::-ms-thumb {
- background: black !important;
- border: .15em solid white !important;
+ background: black !important;
+ border: .15em solid white !important;
}
@@ -619,107 +619,107 @@ body.a42-ac-active {
*/
.a42-ac-inv-contrast,
.a42-ac-inv-contrast *{
- background-color: #000080 !important;
- color: #FFFF00 !important;
+ background-color: #000080 !important;
+ color: #FFFF00 !important;
}
.a42-ac-inv-contrast,
.a42-ac-inv-contrast *,
.a42-ac-inv-contrast *::before,
.a42-ac-inv-contrast *::after{
- border-color: #FFFF00 !important;
+ border-color: #FFFF00 !important;
}
.a42-ac-inv-contrast #a42-ac-close::after {
- background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiNmZjAiLz48L3N2Zz4=');
+ background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiNmZjAiLz48L3N2Zz4=');
}
.a42-ac-inv-contrast #a42-ac input[type="radio"] + label::before {
- border-color: #FFFF00 !important;
- background-color: transparent !important;
+ border-color: #FFFF00 !important;
+ background-color: transparent !important;
}
.a42-ac-inv-contrast #a42-ac input[type="radio"] + label::after
{
- background-color: #FFFF00 !important;
+ background-color: #FFFF00 !important;
}
/* Add a border on form elements when high contrast is on */
.a42-ac-inv-contrast input,
.a42-ac-inv-contrast textarea,
.a42-ac-inv-contrast select{
- border-color: #FFFF00 !important;
+ border-color: #FFFF00 !important;
}
/* Inverted contrast placeholder */
.a42-ac-inv-contrast *::-webkit-input-placeholder { /* Chrome/Opera/Safari */
- color: #FFFF00 !important;
+ color: #FFFF00 !important;
}
.a42-ac-inv-contrast *::-moz-placeholder { /* Firefox 19+ */
- color: #FFFF00 !important;
- opacity: 1 !important;
+ color: #FFFF00 !important;
+ opacity: 1 !important;
}
.a42-ac-inv-contrast *:-ms-input-placeholder { /* IE 10+ */
- color: #FFFF00 !important;
+ color: #FFFF00 !important;
}
.a42-ac-inv-contrast *:-moz-placeholder { /* Firefox 18- */
- color: #FFFF00 !important;
- opacity: 1 !important;
+ color: #FFFF00 !important;
+ opacity: 1 !important;
}
/* Inverted contrast for input[type="date"] */
.a42-ac-inv-contrast *::-webkit-datetime-edit-text {
- color: #FFFF00 !important;
+ color: #FFFF00 !important;
}
.a42-ac-inv-contrast *::-webkit-datetime-edit-month-field {
- color: #FFFF00 !important;
+ color: #FFFF00 !important;
}
.a42-ac-inv-contrast *::-webkit-datetime-edit-day-field {
- color: #FFFF00 !important;
+ color: #FFFF00 !important;
}
.a42-ac-inv-contrast *::-webkit-datetime-edit-year-field {
- color: #FFFF00 !important;
+ color: #FFFF00 !important;
}
.a42-ac-inv-contrast ::-webkit-calendar-picker-indicator {
- background: #000080 !important;
+ background: #000080 !important;
}
/* Inverted contrast for input[type="range"] */
.a42-ac-inv-contrast input[type="range"]::-webkit-slider-runnable-track {
- background: #FFFF00 !important;
+ background: #FFFF00 !important;
}
.a42-ac-inv-contrast input[type="range"]::-moz-range-track { /* Firefox */
- background: #FFFF00 !important;
+ background: #FFFF00 !important;
}
.a42-ac-inv-contrast input[type="range"]::-moz-range-thumb {
- background: #000080 !important;
- border: .15em solid #FFFF00 !important;
+ background: #000080 !important;
+ border: .15em solid #FFFF00 !important;
}
.a42-ac-inv-contrast input[type="range"]::-ms-fill-lower { /* IE/Edge */
- background: #FFFF00 !important;
+ background: #FFFF00 !important;
}
.a42-ac-inv-contrast input[type="range"]::-ms-fill-upper {
- background: #FFFF00 !important;
+ background: #FFFF00 !important;
}
.a42-ac-inv-contrast input[type="range"]:focus::-ms-fill-lower {
- background: #FFFF00 !important;
+ background: #FFFF00 !important;
}
.a42-ac-inv-contrast input[type="range"]:focus::-ms-fill-upper {
- background: #FFFF00 !important;
+ background: #FFFF00 !important;
}
.a42-ac-inv-contrast input[type="range"]::-ms-thumb {
- background: #000080 !important;
- border: .15em solid #FFFF00 !important;
+ background: #000080 !important;
+ border: .15em solid #FFFF00 !important;
}
@@ -727,25 +727,41 @@ body.a42-ac-active {
* Dyslexia font
*/
@font-face {
- font-family: 'opendys';
- src: url('fonts/opendyslexic-regular-webfont.woff2') format('woff2'),
- url('fonts/opendyslexic-regular-webfont.woff') format('woff');
- font-weight: normal;
- font-style: normal;
+ font-family: 'opendys';
+ src: url('fonts/opendyslexic-regular-webfont.woff2') format('woff2'),
+ url('fonts/opendyslexic-regular-webfont.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
}
body.a42-ac-dys-font,
body.a42-ac-dys-font *:not(i){
- font-family: 'opendys' !important;
+ font-family: 'opendys' !important;
+}
+
+/**
+ * Malvoyant font
+ */
+
+@font-face {
+ font-family: 'luciole';
+ src: url('fonts/luciole-regular-webfont.woff2') format('woff2'),
+ url('fonts/luciole-regular-webfont.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
}
+body.a42-ac-malvoyant-font,
+body.a42-ac-malvoyant-font *:not(i){
+ font-family: 'luciole' !important;
+}
/**
* Dyslexia line-spacing
*/
.a42-ac-dys-spacing,
.a42-ac-dys-spacing *{
- line-height: 2 !important; /*1.5*/
+ line-height: 2 !important; /*1.5*/
}
@@ -754,7 +770,7 @@ body.a42-ac-dys-font *:not(i){
*/
.a42-ac-dys-letter-spacing,
.a42-ac-dys-letter-spacing *{
- letter-spacing: 3px !important;
+ letter-spacing: 3px !important;
}
@@ -763,7 +779,7 @@ body.a42-ac-dys-font *:not(i){
*/
.a42-ac-cancel-justification,
.a42-ac-cancel-justification *{
- text-align: left !important;
+ text-align: left !important;
}
@@ -771,8 +787,8 @@ body.a42-ac-dys-font *:not(i){
* Replace images by their alternatives
*/
.a42-ac-replace-style{
- border: 5px solid !important;
- padding: .2em;
+ border: 5px solid !important;
+ padding: .2em;
}
@@ -780,8 +796,8 @@ body.a42-ac-dys-font *:not(i){
* Up text
*/
.a42-ac-up-text *{
- /* font-size: xx-large; */
- font-size-adjust: .8;
+ /* font-size: xx-large; */
+ font-size-adjust: .8;
}
@@ -789,7 +805,7 @@ body.a42-ac-dys-font *:not(i){
* Down text
*/
.a42-ac-down-text *{
- font-size: small;
+ font-size: small;
}
@@ -797,12 +813,12 @@ body.a42-ac-dys-font *:not(i){
* Maj text
*/
.a42-ac-maj-text-transform *{
- text-transform: uppercase!important;
+ text-transform: uppercase!important;
}
/**
* Maj text
*/
.a42-ac-min-text-transform *{
- text-transform: lowercase!important;
+ text-transform: lowercase!important;
}
diff --git a/public/opac/js/access_config/css/fonts/luciole-regular-webfont.woff b/public/opac/js/access_config/css/fonts/luciole-regular-webfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..e953af3920c41579edc371d2e0cae2c54c6b3250
Binary files /dev/null and b/public/opac/js/access_config/css/fonts/luciole-regular-webfont.woff differ
diff --git a/public/opac/js/access_config/css/fonts/luciole-regular-webfont.woff2 b/public/opac/js/access_config/css/fonts/luciole-regular-webfont.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..1ea6303e74aff81b74849106d9ceeff5ed2cc3e5
Binary files /dev/null and b/public/opac/js/access_config/css/fonts/luciole-regular-webfont.woff2 differ
diff --git a/public/opac/js/access_config/js/src/accessconfig2.js b/public/opac/js/access_config/js/src/accessconfig2.js
index ae5e939946ca6caf344ed01c8d042144215591ac..cee8d816fee7148f13ce325779403aa9d6b53c6d 100644
--- a/public/opac/js/access_config/js/src/accessconfig2.js
+++ b/public/opac/js/access_config/js/src/accessconfig2.js
@@ -168,8 +168,8 @@ var AccessConfig = (function() {
DyslexiaLegend: {
//label
lang: {
- en: 'Font (dyslexia)',
- fr: 'Police (dyslexie)'
+ en: 'Font',
+ fr: 'Police'
}
},
DefaultFontCheckbox:{
@@ -190,8 +190,19 @@ var AccessConfig = (function() {
groupName: 'font',
//label
lang: {
- en: 'Adapt',
- fr: 'Adapter'
+ en: 'dyslexie',
+ fr: 'dyslexie'
+ }
+ },
+ MalVoyantFontCheckbox:{
+ id: 'malvoyant-font',
+ value: 'malvoyant-font',
+ //caution : don't change
+ groupName: 'font',
+ //label
+ lang: {
+ en: 'malvoyant',
+ fr: 'malvoyant'
}
},
@@ -666,6 +677,15 @@ var AccessConfig = (function() {
fieldset.appendChild( CInput );
fieldset.appendChild( CLabel );
fieldsetContent.appendChild( fieldset );
+
+ /**Alternative option : alternative font Luciole**/
+ var CInput = $create({tagName:'input', type:'radio', id:userPrefix+'-'+config.MalVoyantFontCheckbox.id, value:userPrefix+'-'+config.MalVoyantFontCheckbox.value, name:userPrefix+'-'+config.MalVoyantFontCheckbox.groupName});
+ var CLabel = $create({tagName:'label', for:userPrefix+'-'+config.MalVoyantFontCheckbox.id});
+ var defaultCText = document.createTextNode ( config.MalVoyantFontCheckbox.lang[ langRef ] );
+ CLabel.appendChild( defaultCText );
+ fieldset.appendChild( CInput );
+ fieldset.appendChild( CLabel );
+ fieldsetContent.appendChild( fieldset );
}
/**