Varia: Overwrite Jetpack's default styles for the Cookies & Consents Banner
This commit is contained in:
Thomas Guillot
parent
ea1ce4c01f
commit
dd71616472
3 changed files with 226 additions and 16 deletions
72
varia/sass/vendors/_jetpack.scss
vendored
72
varia/sass/vendors/_jetpack.scss
vendored
|
|
@ -34,3 +34,75 @@
|
|||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cookies & Consents Banner
|
||||
*/
|
||||
body {
|
||||
.widget_eu_cookie_law_widget {
|
||||
background: transparent;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
|
||||
right: 0;
|
||||
|
||||
&.widget.top {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#eu-cookie-law {
|
||||
background: map-deep-get($config-global, "color", "background", "default");
|
||||
border: 1px solid map-deep-get($config-global, "color", "border", "default");
|
||||
color: map-deep-get($config-global, "color", "foreground", "default");
|
||||
font-size: map-deep-get($config-global, "font", "size", "sm");
|
||||
line-height: inherit;
|
||||
padding: map-deep-get($config-global, "spacing", "unit");
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding-bottom: #{4 * map-deep-get($config-global, "spacing", "horizontal") + map-deep-get($config-global, "spacing", "unit")};
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background: map-deep-get($config-global, "color", "foreground", "default");
|
||||
border-color: map-deep-get($config-global, "color", "foreground", "dark");
|
||||
color: map-deep-get($config-global, "color", "background", "default");
|
||||
|
||||
input.accept {
|
||||
background: map-deep-get($config-global, "color", "background", "default");
|
||||
color: map-deep-get($config-global, "color", "foreground", "default");
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.has-focus {
|
||||
background: map-deep-get($config-global, "color", "background", "dark");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.accept {
|
||||
margin: 0;
|
||||
margin-left: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
|
||||
|
||||
@extend %button-style;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
bottom: map-deep-get($config-global, "spacing", "unit");
|
||||
left: map-deep-get($config-global, "spacing", "unit");
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Position of the widget when Admin Bar is present
|
||||
&.admin-bar .widget_eu_cookie_law_widget {
|
||||
&.widget.top {
|
||||
top: 32px;
|
||||
|
||||
@media (max-width: 782px) {
|
||||
top: 46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1034,7 +1034,7 @@ button,
|
|||
.button,
|
||||
input[type="submit"],
|
||||
.wp-block-button__link,
|
||||
.wp-block-file__button, .a8c-posts-list__view-all {
|
||||
.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
|
||||
line-height: 1;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
|
@ -1051,11 +1051,11 @@ button:before,
|
|||
.button:before,
|
||||
input[type="submit"]:before,
|
||||
.wp-block-button__link:before,
|
||||
.wp-block-file__button:before, .a8c-posts-list__view-all:before, button:after,
|
||||
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
|
||||
.button:after,
|
||||
input[type="submit"]:after,
|
||||
.wp-block-button__link:after,
|
||||
.wp-block-file__button:after, .a8c-posts-list__view-all:after {
|
||||
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
|
|
@ -1066,7 +1066,7 @@ button:before,
|
|||
.button:before,
|
||||
input[type="submit"]:before,
|
||||
.wp-block-button__link:before,
|
||||
.wp-block-file__button:before, .a8c-posts-list__view-all:before {
|
||||
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
|
||||
margin-bottom: -0.12em;
|
||||
}
|
||||
|
||||
|
|
@ -1074,7 +1074,7 @@ button:after,
|
|||
.button:after,
|
||||
input[type="submit"]:after,
|
||||
.wp-block-button__link:after,
|
||||
.wp-block-file__button:after, .a8c-posts-list__view-all:after {
|
||||
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
|
||||
margin-top: -0.11em;
|
||||
}
|
||||
|
||||
|
|
@ -1082,15 +1082,15 @@ button:hover,
|
|||
.button:hover,
|
||||
input:hover[type="submit"],
|
||||
.wp-block-button__link:hover,
|
||||
.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
|
||||
.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
|
||||
.button:focus,
|
||||
input:focus[type="submit"],
|
||||
.wp-block-button__link:focus,
|
||||
.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
|
||||
.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
|
||||
.has-focus.button,
|
||||
input.has-focus[type="submit"],
|
||||
.has-focus.wp-block-button__link,
|
||||
.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
|
||||
.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
|
||||
color: white;
|
||||
background-color: indigo;
|
||||
}
|
||||
|
|
@ -3363,3 +3363,72 @@ img#wpstats {
|
|||
.wp-block-jetpack-subscriptions form > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cookies & Consents Banner
|
||||
*/
|
||||
body .widget_eu_cookie_law_widget {
|
||||
background: transparent;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget.widget.top {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law {
|
||||
background: white;
|
||||
border: 1px solid #DDDDDD;
|
||||
color: #444444;
|
||||
font-size: 0.83333rem;
|
||||
line-height: inherit;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law.negative {
|
||||
background: #444444;
|
||||
border-color: #111111;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept {
|
||||
background: white;
|
||||
color: #444444;
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:hover, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:focus, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept.has-focus {
|
||||
background: #DDDDDD;
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
|
||||
margin: 0;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
||||
top: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 782px) {
|
||||
body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
||||
top: 46px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1034,7 +1034,7 @@ button,
|
|||
.button,
|
||||
input[type="submit"],
|
||||
.wp-block-button__link,
|
||||
.wp-block-file__button, .a8c-posts-list__view-all {
|
||||
.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
|
||||
line-height: 1;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
|
@ -1051,11 +1051,11 @@ button:before,
|
|||
.button:before,
|
||||
input[type="submit"]:before,
|
||||
.wp-block-button__link:before,
|
||||
.wp-block-file__button:before, .a8c-posts-list__view-all:before, button:after,
|
||||
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
|
||||
.button:after,
|
||||
input[type="submit"]:after,
|
||||
.wp-block-button__link:after,
|
||||
.wp-block-file__button:after, .a8c-posts-list__view-all:after {
|
||||
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
|
|
@ -1066,7 +1066,7 @@ button:before,
|
|||
.button:before,
|
||||
input[type="submit"]:before,
|
||||
.wp-block-button__link:before,
|
||||
.wp-block-file__button:before, .a8c-posts-list__view-all:before {
|
||||
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
|
||||
margin-bottom: -0.12em;
|
||||
}
|
||||
|
||||
|
|
@ -1074,7 +1074,7 @@ button:after,
|
|||
.button:after,
|
||||
input[type="submit"]:after,
|
||||
.wp-block-button__link:after,
|
||||
.wp-block-file__button:after, .a8c-posts-list__view-all:after {
|
||||
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
|
||||
margin-top: -0.11em;
|
||||
}
|
||||
|
||||
|
|
@ -1082,15 +1082,15 @@ button:hover,
|
|||
.button:hover,
|
||||
input:hover[type="submit"],
|
||||
.wp-block-button__link:hover,
|
||||
.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
|
||||
.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
|
||||
.button:focus,
|
||||
input:focus[type="submit"],
|
||||
.wp-block-button__link:focus,
|
||||
.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
|
||||
.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
|
||||
.has-focus.button,
|
||||
input.has-focus[type="submit"],
|
||||
.has-focus.wp-block-button__link,
|
||||
.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
|
||||
.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
|
||||
color: white;
|
||||
background-color: indigo;
|
||||
}
|
||||
|
|
@ -3392,3 +3392,72 @@ img#wpstats {
|
|||
.wp-block-jetpack-subscriptions form > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cookies & Consents Banner
|
||||
*/
|
||||
body .widget_eu_cookie_law_widget {
|
||||
background: transparent;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 8px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget.widget.top {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law {
|
||||
background: white;
|
||||
border: 1px solid #DDDDDD;
|
||||
color: #444444;
|
||||
font-size: 0.83333rem;
|
||||
line-height: inherit;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law.negative {
|
||||
background: #444444;
|
||||
border-color: #111111;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept {
|
||||
background: white;
|
||||
color: #444444;
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:hover, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:focus, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept.has-focus {
|
||||
background: #DDDDDD;
|
||||
}
|
||||
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
|
||||
margin: 0;
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
||||
top: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 782px) {
|
||||
body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
||||
top: 46px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue