Remove overriding CSS values from body

mozilla · Sep 8, 2022 · 3e6dc51 · 3e6dc51
1 parent e40c2b7
commit 3e6dc51
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 57 deletions.
diff --git a/src/content_script.css b/src/content_script.css
@@ -1,17 +1,21 @@
-
 body {
-    --blue60: #0060df;
-    --blue70: #003eaa;
-    --primaryText: #15141A;
-    --secondaryText: #5B5B66;
-    --grey20: #ededf0;
-	--light-gray: #F0F0F4;
-	--white: #ffffff;
-    --transition: all .15s cubic-bezier(.07,.95,0,1);
-    --borders: 1px solid #ededf0;
-	font-size: 13px;
+	--fbc-blue-60: #0060df;
+    --fbc-blue-70: #003eaa;
+    --fbc-gray-20: #ededf0;
+	--fbc-light-gray: #F0F0F4;
+	--fbc-white: #ffffff;
+    --fbc-transition: all .15s cubic-bezier(.07,.95,0,1);
+    --fbc-borders: 1px solid #ededf0;
+	--fbc-primary-text: #15141A;
+    --fbc-secondary-text: #5B5B66;
+	--fbc-font-size: 13px;
+}
+
+.fbc-container {
+	font-size: var(--fbc-font-size);
 	font-weight: 400;
-	color: #15141A;
+	color: var(--fbc-primary-text);
+	background: var(--fbc-white);
     font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
@@ -66,7 +70,7 @@ body {
 	position: absolute;
 	z-index: 100;
 	transition: opacity 0.2s ease-out;
-	--transition: all .15s cubic-bezier(.07,.95,0,1)
+	--fbc-transition: all .15s cubic-bezier(.07,.95,0,1)
 }
 
 .fbc-badge.fbc-badge-disabled {
@@ -136,10 +140,6 @@ body {
 	opacity: 1;
 }
 
-.fbc-container {
-	overflow: hidden;
-}
-
 .fbc-wrapper{
 	position: fixed;
 	height: 100%;
@@ -156,7 +156,7 @@ body {
 	color: var(--black);
 	box-shadow: 0 5px 12px 0 rgba(0,0,0,0.2);
 	border: 1px solid rgba(0,0,0,0.2);
-	background: var(--white);
+	background: var(--fbc-white);
 	border-radius: 8px;
 	line-height: 120%;
 }
@@ -223,25 +223,25 @@ body {
 	margin: 0;
 	line-height: 0;
 	padding: 15px 0 20px 0;
-	border-bottom: 1px solid var(--light-gray);
+	border-bottom: 1px solid var(--fbc-light-gray);
 	justify-content: center;
 	align-items: center;
 	text-align: center;
-	color: var(--primaryText);
+	color: var(--fbc-primary-text);
 }
 
 .fbc-badge-prompt p {
 	line-height: 140%;
 }
 
 .fbc-subtitle-login, .fbc-subtitle-email {
-	color: var(--primaryText);
+	color: var(--fbc-primary-text);
 	font-weight: 500;
 }
 
 .fbc-badge-prompt-contents {
 	padding: 4px 8px;
-	background: var(--white);
+	background: var(--fbc-white);
 }
 
 .fbc-badge-prompt form {
@@ -262,7 +262,7 @@ body {
 	-o-appearance: none;
 	appearance: none;
 	margin: 0;
-	background-color: var(--light-gray);
+	background-color: var(--fbc-light-gray);
 	border: 1px solid #8F8F9D;
 	border-radius: 2px;
 	height: 13px;
@@ -276,7 +276,7 @@ body {
 }
 
 .fbc-badge-prompt label {
-	color: var(--secondaryText);
+	color: var(--fbc-secondary-text);
 	margin: 0;
 	cursor: pointer;
 }
@@ -305,9 +305,9 @@ body {
 	border: 0;
 	font-size: 13px;
 	font-weight: 500;
-	color: var(--primaryText);
-	background: var(--light-gray);
-	transition: var(--transition);
+	color: var(--fbc-primary-text);
+	background: var(--fbc-light-gray);
+	transition: var(--fbc-transition);
 	cursor: pointer;
 	text-align: center;
 }
@@ -326,7 +326,7 @@ body {
 	padding: 5px 10px 10px;
 	width: 250px;
 	max-width: 250px;
-	background: var(--white);
+	background: var(--fbc-white);
 	z-index: 9999;
 	position: absolute;
 	left: calc( 100% + 0.5em);

diff --git a/src/panel.css b/src/panel.css
@@ -1,11 +1,11 @@
 body {
-  --blue60: #0060df;
-  --blue70: #003eaa;
-  --primaryText: #0c0c0d;
-  --secondaryText: #737373;
-  --grey20: #ededf0;
-  --transition: all .15s cubic-bezier(.07,.95,0,1);
-  --borders: 1px solid #ededf0;
+  --fbc-blue-60: #0060df;
+  --fbc-blue-70: #003eaa;
+  --fbc-primary-text: #0c0c0d;
+  --fbc-secondary-text: #737373;
+  --fbc-gray-20: #ededf0;
+  --fbc-transition: all .15s cubic-bezier(.07,.95,0,1);
+  --fbc-borders: 1px solid #ededf0;
   font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
@@ -48,7 +48,7 @@ h1 { /* "Facebook Container" headline for all panels */
   font-weight: 600;
   margin: 0;
   font-size: 13px;
-  border-bottom: var(--borders);
+  border-bottom: var(--fbc-borders);
   position: relative;
   display: flex;
   align-items: center;
@@ -83,7 +83,7 @@ h3 {
 }
 
 .Facebook-text {
-  color: var(--secondaryText);
+  color: var(--fbc-secondary-text);
   font-weight: 500;
   font-size: 14px;
 }
@@ -122,20 +122,20 @@ a {
 }
 
 a {
-  color: var(--blue60);
+  color: var(--fbc-blue-60);
   text-decoration: none;
   cursor: pointer;
 }
 
 a:hover {
-  color: var(--blue70);
-  border-bottom: 1.5px solid var(--blue70);
+  color: var(--fbc-blue-70);
+  border-bottom: 1.5px solid var(--fbc-blue-70);
 }
 
 .fw-bottom-btn { /* Full-width bottom bar "How Facebook Container Works" button. Only on non-onboarding panels. */
   padding: .7rem 0;
   background-color: transparent;
-  border-top: var(--borders);
+  border-top: var(--fbc-borders);
 }
 
 .highlight-on-hover { /* Full-width element that wraps around the "How Facebook Container Works" span and arrow icon */
@@ -147,7 +147,7 @@ a:hover {
   position: relative;
   display: flex;
   justify-content: space-between;
-  transition: var(--transition);
+  transition: var(--fbc-transition);
 }
 
 .highlight-on-hover::after {
@@ -199,7 +199,7 @@ a:hover {
   color: black;
   font-size: 13px;
   line-height: 17px;
-  background-color: var(--grey20);
+  background-color: var(--fbc-gray-20);
   border: 1px solid #BEBEBF;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
   font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
@@ -221,13 +221,13 @@ a:hover {
   display: flex;
   align-items: center;
   min-height: 1.25rem;
-  transition: var(--transition);
+  transition: var(--fbc-transition);
 }
 
 .remove-btn, .allow-btn {
-  background-color: var(--blue60);
-  border: 1px solid var(--blue60);
-  border-top: 1px solid var(--blue70);
+  background-color: var(--fbc-blue-60);
+  border: 1px solid var(--fbc-blue-60);
+  border-top: 1px solid var(--fbc-blue-70);
   cursor: pointer;
   line-height: 41px;
   text-align: center;
@@ -236,7 +236,7 @@ a:hover {
 }
 
 .remove-btn:hover, .allow-btn:hover {
-  background-color: var(--blue70);
+  background-color: var(--fbc-blue-70);
 }
 
 .remove-site, .add-site {
@@ -263,15 +263,15 @@ a:hover {
 
 .allowed-site-wrapper:hover,
 .highlight-on-hover:hover {
-  background-color: var(--grey20);
-  transition: var(--transition);
+  background-color: var(--fbc-gray-20);
+  transition: var(--fbc-transition);
 }
 
 .fw-bottom-btn,
 .bottom-btns {
   display: flex;
   justify-content: space-between;
-  transition: var(--transition);
+  transition: var(--fbc-transition);
   cursor: pointer;
 }
 
@@ -284,7 +284,7 @@ a:hover {
   line-height: 103%;
   height: 3.37rem;
   width: 50%;
-  color: var(--primaryText);
+  color: var(--fbc-primary-text);
   padding: 1.15rem 0;
   text-align: center;
 }
@@ -302,16 +302,16 @@ a:hover {
 }
 
 .bottom-btn:last-of-type { /* Onboarding Panels only: The second bottom button on the onboarding panels is always blue */
-  border-top: 1px solid var(--blue70);
-  border-left: 1px solid var(--blue60);
+  border-top: 1px solid var(--fbc-blue-70);
+  border-left: 1px solid var(--fbc-blue-60);
   border-right: 0;
   color: rgba(255, 255, 255, 1);
-  background-color: var(--blue60);
+  background-color: var(--fbc-blue-60);
   right: 0;
 }
 
 .bottom-btn:last-of-type:hover {
-  background-color: var(--blue70);
+  background-color: var(--fbc-blue-70);
 }
 
 .allow-btn,
@@ -320,7 +320,7 @@ a:hover {
 .remove-btn:hover,
 .bottom-btn,
 .bottom-btn:hover {
-  transition: var(--transition);
+  transition: var(--fbc-transition);
 }
 
 .in-fbc-subhead::before,