diff --git a/css/tarteaucitron.css b/css/tarteaucitron.css index 3b0951d..84806e0 100644 --- a/css/tarteaucitron.css +++ b/css/tarteaucitron.css @@ -1,3 +1,13 @@ +.modal-open{ + overflow: hidden; + height: 100%; +} + + +a:focus, button:focus { + outline: 2px solid #cb3333; +} + /*** * Responsive layout for the control panel */ @@ -71,11 +81,14 @@ color: #fff; } -#tarteaucitron b { +#tarteaucitron strong { font-size: 22px; font-weight: 500; } +#tarteaucitron ul { + padding: 0; +} /*** * Root div added just before */ @@ -96,6 +109,18 @@ vertical-align: initial; } +#tarteaucitronRoot h1 { + font-size: 1.5em; + text-align: center; + color: #fff; +} + +#tarteaucitronRoot h2 { + display: inline-block; + margin-left: 5px; + color: #fff; +} + /*** * Control panel */ @@ -289,6 +314,7 @@ text-align: center; text-decoration: none; width: auto; + border: 0; } #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronName .tarteaucitronListCookies { diff --git a/tarteaucitron.js b/tarteaucitron.js index a971d5d..a7b794c 100644 --- a/tarteaucitron.js +++ b/tarteaucitron.js @@ -55,7 +55,7 @@ var tarteaucitron = { if (scrollPos > (screen.height * 2)) { tarteaucitron.userInterface.respondAll(true); } else if (scrollPos > (screen.height / 2)) { - document.getElementById('tarteaucitronDisclaimerAlert').innerHTML = '' + tarteaucitron.lang.alertBigScroll + ' ' + tarteaucitron.lang.alertBig; + document.getElementById('tarteaucitronDisclaimerAlert').innerHTML = '' + tarteaucitron.lang.alertBigScroll + ' ' + tarteaucitron.lang.alertBig; } if (tarteaucitron.orientation === 'top') { @@ -110,7 +110,7 @@ var tarteaucitron = { if (scrollPos > (screen.height * 2)) { tarteaucitron.userInterface.respondAll(true); } else if (scrollPos > (screen.height / 2)) { - document.getElementById('tarteaucitronDisclaimerAlert').innerHTML = '' + tarteaucitron.lang.alertBigScroll + ' ' + tarteaucitron.lang.alertBig; + document.getElementById('tarteaucitronDisclaimerAlert').innerHTML = '' + tarteaucitron.lang.alertBigScroll + ' ' + tarteaucitron.lang.alertBig; } if (tarteaucitron.orientation === 'top') { document.getElementById('tarteaucitronPercentage').style.top = heightPosition; @@ -236,46 +236,45 @@ var tarteaucitron = { // Step 3: prepare the html html += '
'; - html += '
'; - html += '
'; - html += '
'; + html += ''; + html += ''; + html += ' '; html += '
'; - html += '
'; + html += '

'+ tarteaucitron.lang.title + '

'; html += '
'; - html += ' ' + tarteaucitron.lang.all + ''; + html += '

' + tarteaucitron.lang.all + '

'; html += '
'; html += '
'; - html += '
'; - html += ' ✓ ' + tarteaucitron.lang.allow; - html += '
'; - html += '
'; - html += ' ✗ ' + tarteaucitron.lang.deny; - html += '
'; + html += ' '; + html += ' '; html += '
'; html += '
'; html += '
'; html += ' ' + tarteaucitron.lang.disclaimer; if (defaults.removeCredit === false) { html += '

'; - html += ' ' + tarteaucitron.lang.credit + ''; + html += ' ' + tarteaucitron.lang.credit + ''; } html += '
'; html += '
'; - html += '
'; + html += '
    '; for (i = 0; i < cat.length; i += 1) { - html += '
    '; + html += '
  • '; html += '
    '; - html += ' ' + tarteaucitron.lang[cat[i]].title; + html += ' '; html += '
    '; html += '
    '; html += ' ' + tarteaucitron.lang[cat[i]].details; html += '
    '; - html += '
  • '; - html += '
    '; + html += '
      '; } - html += '
      '; + html += '
    '; html += '
    '; html += '
    '; html += '
    '; @@ -289,43 +288,43 @@ var tarteaucitron = { html += ' '; html += ' ' + tarteaucitron.lang.alertBigPrivacy; html += ' '; - html += ' '; + html += ' '; html += '
    '; } else { html += '
    '; html += ' '; html += ' ' + tarteaucitron.lang.alertBigClick + ' ' + tarteaucitron.lang.alertBig; html += ' '; - html += ' '; + html += ' '; + html += ' '; html += '
    '; html += '
    '; } if (defaults.showAlertSmall === true) { html += '
    '; - html += '
    '; + html += '
    0
    '; + html += ' '; html += '
    '; - html += '
    '; + html += '
    '; + html += ' '; html += '
    '; - html += ' 0 cookie'; + html += ' 0 cookie'; html += '
    '; html += '
    '; html += '
    '; @@ -388,11 +387,11 @@ var tarteaucitron = { html = '
    '; html += ' '; html += ' ' + tarteaucitron.lang.adblock + '
    '; - html += ' ' + tarteaucitron.lang.adblock_call + ''; + html += ' ' + tarteaucitron.lang.adblock_call + ''; html += '
    '; - html += ' '; + html += ' '; html += '
    '; html += '
    '; div.id = 'tarteaucitronRoot'; @@ -426,27 +425,27 @@ var tarteaucitron = { if (tarteaucitron.added[service.key] !== true) { tarteaucitron.added[service.key] = true; - html += '
    '; + html += '
  • '; html += '
    '; - html += ' ' + service.name + '
    '; + html += '

    ' + service.name + '


    '; html += '
    '; - html += ' '; + html += ' '; html += ' ' + tarteaucitron.lang.more; html += ' '; html += ' - '; - html += ' '; + html += ' '; html += ' ' + tarteaucitron.lang.source; html += ' '; html += '
    '; html += '
    '; - html += '
    '; + html += '
    '; - html += '
    '; + html += ' '; + html += '
    '; + html += ' '; html += '
    '; - html += '
  • '; + html += ''; tarteaucitron.userInterface.css('tarteaucitronServicesTitle_' + service.type, 'display', 'block'); @@ -653,6 +652,8 @@ var tarteaucitron = { tarteaucitron.userInterface.css('tarteaucitron', 'display', 'block'); tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'block'); tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'display', 'none'); + document.getElementById('tarteaucitronClosePanel').focus(); + document.getElementsByTagName('body')[0].classList.add('modal-open'); tarteaucitron.userInterface.jsSizing('main'); }, "closePanel": function () { @@ -673,6 +674,9 @@ var tarteaucitron = { } else { tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'none'); } + document.getElementById('tarteaucitronCloseAlert').focus(); + document.getElementsByTagName('body')[0].classList.remove('modal-open'); + }, "openAlert": function () { "use strict"; @@ -1036,14 +1040,14 @@ var tarteaucitron = { html += '
    '; } html += '
    '; - html += '
    × ' + name + ''; + html += '
    ' + name + ''; html += '
    '; html += '
    ' + cookies[i].split('=').slice(1).join('=') + '
    '; html += '
    '; } } else { html += '
    '; - html += '
    -
    '; + html += '
    -
    '; html += '
    '; html += '
    '; } @@ -1243,10 +1247,10 @@ var tarteaucitron = { html += '
    '; html += '
    '; - html += ' ' + tarteaucitron.services[id].name + ' ' + tarteaucitron.lang.fallback; - html += '
    '; + html += ' ' + tarteaucitron.services[id].name + ' ' + tarteaucitron.lang.fallback; + html += '
    '; + html += ' '; html += '
    '; html += '
    ';