CSS tweaks for popup

Emilia-Capital · Apr 12, 2024 · a98950c · a98950c
1 parent edce03a
commit a98950c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/assets/css/admin.css b/assets/css/admin.css
@@ -8,6 +8,7 @@
 	--prpl-column-max-width: 30rem;
 	--prpl-max-columns: 4;
 	--prpl-border-radius: 8px;
+	--prpl-border-radius-big: calc(var(--prpl-border-radius) * 2);
 
 	--prpl-container-max-width: calc(var(--prpl-column-max-width) * var(--prpl-max-columns) + var(--prpl-gap) * (var(--prpl-max-columns) - 1));
 
@@ -201,7 +202,7 @@ button.prpl-info-icon {
 .prpl-wrap .counter-big-wrapper {
 	background-color: var(--prpl-background-purple);
 	padding: var(--prpl-padding);
-	border-radius: calc(var(--prpl-border-radius) * 2);
+	border-radius: var(--prpl-border-radius-big);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -545,20 +546,29 @@ body.prpl-popup-open.prpl-popup-badges-details #prpl-popup-badges-details {
 /*------------------------------------*\
 	Badges popup.
 \*------------------------------------*/
-#popup-badges-content {
+#popup-badges-content,
+#popup-badges-maintenance {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 	grid-gap: var(--prpl-padding);
 }
 
-#popup-badges-content .inner {
-	background: var(--prpl-background-red);
-	border-radius: calc(var(--prpl-border-radius) * 2);
+#popup-badges-content .inner,
+#popup-badges-maintenance .inner {
+	border-radius: var(--prpl-border-radius-big);
 	padding: var(--prpl-padding);
 	font-size: var(--prpl-font-size-small);
 	text-align: center;
 }
 
+#popup-badges-content .inner {
+	background: var(--prpl-background-red);
+}
+
+#popup-badges-maintenance .inner {
+	background: var(--prpl-background-blue);
+}
+
 .badges-popup-progress-total {
 	display: block;
 	width: 100%;

diff --git a/classes/popups/class-badges.php b/classes/popups/class-badges.php
@@ -86,7 +86,7 @@ protected function the_content() {
 			<div class="prpl-widget-wrapper">
 				<h3><?php \esc_html_e( 'Keep adding post and pages', 'progress-planner' ); ?></h3>
 				<p><?php \esc_html_e( 'The more you write, the closer you come to winning your badges. You can earn level 1 of this badge immediately after installing the plugin if you have written more than 200 posts.', 'progress-planner' ); ?></p>
-				<div id="popup-badges-content">
+				<div id="popup-badges-maintenance">
 					<?php $this->print_badges( 'content' ); ?>
 				</div>
 			</div>