Varia: Overwrite Jetpack's default styles for the Cookies & Consents Banner

varia/sass/vendors/_jetpack.scss

@@ -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;
+			}
+		}
+	}
+}

varia/style-rtl.css

@@ -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;
+	}
+}

varia/style.css

@@ -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;
+	}
+}