polynux
/
tarteauxmyrtilles
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better UI

This commit is contained in:
Amauri CHAMPEAUX 2014-10-08 19:05:00 +02:00
parent 257ba24255
commit eaa9907fb1
4 changed files with 108 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
css/tarteaucitron.css
View File

@ -1,7 +1,24 @@
/*** /***
* Responsive layout for the control panel * Responsive layout for the control panel
*/ */
@media screen and (max-width:650px) { @media screen and (max-width:350px) {
#tarteaucitronRoot #tarteaucitron #tarteaucitronInfo {
background-image: none;
padding-right: 0;
text-align: center;
}
}
@media screen and (max-width:400px) {
#tarteaucitronRoot #tarteaucitron #tarteaucitronInfo {
font-size: 14px !important;
}
}
@media screen and (max-width:470px) {
#tarteaucitron #tarteaucitronInfo {
font-size: 16px !important;
}
#tarteaucitron .tarteaucitronLine .tarteaucitronName { #tarteaucitron .tarteaucitronLine .tarteaucitronName {
width: 90% !important; width: 90% !important;
} }
@ -12,13 +29,19 @@
} }
} }
@media screen and (max-width:1020px) { @media screen and (max-width:840px) {
#tarteaucitron { #tarteaucitron {
top: 0; border: 0 !important;
bottom: 0 !important;
height: 100% !important;
max-height: 100% !important;
max-width: 100% !important;
top: 0 !important;
width: 100% !important;
} }
#tarteaucitron #tarteaucitronDisclaimer { #tarteaucitron #tarteaucitronClosePanel {
font-size: 14px; display: block !important;
} }
} }
@ -63,9 +86,8 @@
#tarteaucitronRoot * { #tarteaucitronRoot * {
box-sizing: initial; box-sizing: initial;
color: #333; color: #333;
font-family: verdana; font-family: sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.5;
vertical-align: initial; vertical-align: initial;
} }
@ -84,63 +106,80 @@
} }
#tarteaucitron { #tarteaucitron {
background: #333; background: #fff;
border: 0; border: 4px solid #fff;
border-bottom: 50px solid; box-shadow: 0 0 15px #4a4a4a;
display: none; display: none;
left: 0; left: 0;
margin: 0 auto; margin: 0 auto;
max-width: 1020px; max-height: 80%;
position: relative; max-width: 800px;
overflow: auto;
padding: 0;
position: fixed;
right: 0; right: 0;
top: 0; top: 10%;
z-index: 2147483647; z-index: 2147483647;
} }
#tarteaucitron #tarteaucitronClosePanel { #tarteaucitron #tarteaucitronClosePanel {
color: #FFF; background: #C63535;
border: 4px solid #fff;
border-right: 0;
color: #fff;
cursor: pointer; cursor: pointer;
display: block; display: none;
text-decoration: underline; float: right;
font-family: verdana; font-size: 12px;
margin: 0px 15px 15px 0; font-weight: 700;
padding-top: 10px; text-decoration: none;
padding: 4px 0;
text-align: center;
width: 70px;
}
#tarteaucitron #tarteaucitronInfo {
background: url('//opt-out.ferank.eu/css/img/m.gif') no-repeat scroll left center / contain #CB3333;
border-bottom: 4px solid #fff;
clear: both;
color: #fff;
font-size: 18px;
padding: 20px 20px 18px 0;
text-align: right; text-align: right;
} }
#tarteaucitron #tarteaucitronDisclaimer { #tarteaucitron #tarteaucitronServices {
color: #fff; background: #fff;
font-size: 16px; border-bottom: 4px solid #fff;
margin: 0 auto 10px; min-height: 250px;
max-width: 800px;
padding: 0 15px;
text-align: center;
} }
#tarteaucitron .tarteaucitronTitle { #tarteaucitron #tarteaucitronServices .tarteaucitronTitle {
background: #4a4a4a; background: #d7d7d7;
border-top: 25px solid #333; color: #2d2d2d;
color: #FFF;
font-size: 20px; font-size: 20px;
padding: 18px 22px; padding: 18px 22px;
} }
#tarteaucitron .tarteaucitronTitle .tarteaucitronDetails { #tarteaucitron #tarteaucitronServices .tarteaucitronTitle .tarteaucitronDetails {
color: #fff;
font-size: 13px; font-size: 13px;
} }
#tarteaucitron .tarteaucitronLine { #tarteaucitron #tarteaucitronServices .tarteaucitronLine:hover {
background: #f5f5f5; background: #f5f5f5;
border-bottom: 1px solid #fff; }
border-top: 1px solid #fff;
#tarteaucitron #tarteaucitronServices .tarteaucitronLine {
background: #fafafa;
border-left: 5px solid #f5f5f5;
height: auto; height: auto;
margin: 1px 0;
min-height: 100%; min-height: 100%;
overflow: hidden; overflow: hidden;
padding: 5px; padding: 5px;
} }
#tarteaucitron .tarteaucitronLine .tarteaucitronName { #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronName {
display: inline-block; display: inline-block;
float: left; float: left;
margin-left: 15px; margin-left: 15px;
@ -148,15 +187,15 @@
width: 50%; width: 50%;
} }
#tarteaucitron .tarteaucitronLine .tarteaucitronAsk { #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk {
display: inline-block; display: inline-block;
float: right; float: right;
margin: 7px 15px 0; margin: 7px 15px 0;
text-align: right; text-align: right;
} }
#tarteaucitron .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow, #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow,
#tarteaucitron .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny, #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny,
.tac_activate .tarteaucitronAllow { .tac_activate .tarteaucitronAllow {
background: gray; background: gray;
color: #fff; color: #fff;
@ -168,6 +207,24 @@
width: auto; width: auto;
} }
#tarteaucitron #tarteaucitronDisclaimer {
background: #fff;
border-top: 1px solid #eee;
color: #333;
font-size: 10px;
line-height: 1.5;
margin-top: 10px;
padding: 14px 10px 12px 10px;
text-align: center;
}
#tarteaucitron #tarteaucitronDisclaimer a {
color: #333;
font-size: 10px;
font-style: normal;
text-decoration: underline;
}
/*** /***
* Big alert * Big alert
*/ */
@ -254,7 +311,6 @@
bottom: 0; bottom: 0;
box-sizing: border-box; box-sizing: border-box;
color: #fff; color: #fff;
font-family: verdana;
font-size: 14px; font-size: 14px;
height: 80px; height: 80px;
left: 0; left: 0;

2
lang/tarteaucitron.en.js
View File

@ -5,11 +5,13 @@ tarteaucitron.lang = {
"personalize": "Personalize", "personalize": "Personalize",
"close": "Close", "close": "Close",
"info": "Transparency about cookies",
"disclaimer": "By allowing these third party services, you accept theirs cookies and the use of tracking technologies necessary for their proper functioning.", "disclaimer": "By allowing these third party services, you accept theirs cookies and the use of tracking technologies necessary for their proper functioning.",
"allow": "Allow", "allow": "Allow",
"deny": "Deny", "deny": "Deny",
"more": "Read more", "more": "Read more",
"source": "View the official website", "source": "View the official website",
"credit": "Cookies manager by tarteaucitron.js",
"fallback": "is disabled.", "fallback": "is disabled.",

2
lang/tarteaucitron.fr.js
View File

@ -5,11 +5,13 @@ tarteaucitron.lang = {
"personalize": "Personnaliser", "personalize": "Personnaliser",
"close": "Fermer", "close": "Fermer",
"info": "Transparence sur les cookies",
"disclaimer": "En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement.", "disclaimer": "En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement.",
"allow": "Autoriser", "allow": "Autoriser",
"deny": "Interdire", "deny": "Interdire",
"more": "En savoir plus", "more": "En savoir plus",
"source": "Voir le site officiel", "source": "Voir le site officiel",
"credit": "Gestion des cookies par tarteaucitron.js",
"fallback": "est désactivé.", "fallback": "est désactivé.",

13
tarteaucitron.js
View File

@ -84,13 +84,13 @@ var tarteaucitron = {
} }
// Step 3: prepare the html // Step 3: prepare the html
html += '<div id="tarteaucitronBack"></div>'; html += '<div id="tarteaucitronBack" onclick="tarteaucitron.userInterface.closePanel();"></div>';
html += '<div id="tarteaucitron">'; html += '<div id="tarteaucitron">';
html += ' <div id="tarteaucitronClosePanel" onclick="tarteaucitron.userInterface.closePanel();">'; html += ' <div id="tarteaucitronClosePanel" onclick="tarteaucitron.userInterface.closePanel();">';
html += ' ' + tarteaucitron.lang.close; html += ' ' + tarteaucitron.lang.close;
html += ' </div>'; html += ' </div>';
html += ' <div id="tarteaucitronDisclaimer">'; html += ' <div id="tarteaucitronInfo">';
html += ' ' + tarteaucitron.lang.disclaimer; html += ' ' + tarteaucitron.lang.info;
html += ' </div>'; html += ' </div>';
html += ' <div id="tarteaucitronServices">'; html += ' <div id="tarteaucitronServices">';
@ -127,6 +127,9 @@ var tarteaucitron = {
html += '<div class="clear"></div>'; html += '<div class="clear"></div>';
} }
html += ' </div>';
html += ' <div id="tarteaucitronDisclaimer">';
html += ' ' + tarteaucitron.lang.disclaimer + '<br/><a href="https://opt-out.ferank.eu/" rel="nofollow" target="_blank">' + tarteaucitron.lang.credit + '</a>';
html += ' </div>'; html += ' </div>';
html += '</div>'; html += '</div>';
html += '<div id="tarteaucitronAlertBig">'; html += '<div id="tarteaucitronAlertBig">';
@ -233,11 +236,11 @@ var tarteaucitron = {
index; index;
if (status === true) { if (status === true) {
tarteaucitron.userInterface.css(key + 'Line', 'backgroundColor', greenLight); tarteaucitron.userInterface.css(key + 'Line', 'borderLeft', '5px solid ' + greenDark);
tarteaucitron.userInterface.css(key + 'Allowed', 'backgroundColor', greenDark); tarteaucitron.userInterface.css(key + 'Allowed', 'backgroundColor', greenDark);
tarteaucitron.userInterface.css(key + 'Denied', 'backgroundColor', gray); tarteaucitron.userInterface.css(key + 'Denied', 'backgroundColor', gray);
} else if (status === false) { } else if (status === false) {
tarteaucitron.userInterface.css(key + 'Line', 'backgroundColor', redLight); tarteaucitron.userInterface.css(key + 'Line', 'borderLeft', '5px solid ' + redDark);
tarteaucitron.userInterface.css(key + 'Allowed', 'backgroundColor', gray); tarteaucitron.userInterface.css(key + 'Allowed', 'backgroundColor', gray);
tarteaucitron.userInterface.css(key + 'Denied', 'backgroundColor', redDark); tarteaucitron.userInterface.css(key + 'Denied', 'backgroundColor', redDark);
} }