feat: elipse background available for all

Author: th0rOdinson

…derland/static/img/elipse_background.svg …/static/common/img/elipse_background.svgsites/wonderland/static/img/elipse_background.svg renamed to packages/common-config/static/common/img/elipse_background.svg sites/wonderland/static/img/elipse_background.svg renamed to packages/common-config/static/common/img/elipse_background.svg

@@ -17,16 +17,8 @@ html[data-theme="dark"] {
   --wonderland-lila: #a371ce;
 
   /* Optimism Brand Colors */
-  --op-red: #FF0420;
-  --op-red-dark: #e6001c;
-  --op-red-darker: #d9001a;
-  --op-red-darkest: #b30016;
+  --op-red: #ff0420;
   --op-red-light: #ff1a34;
-  --op-red-lighter: #ff263f;
-  --op-red-lightest: #ff475d;
-
-  /* Shape, Icons, etc customization */
-  --wonderland-accent: #978cfb;
 
   /* Wonderland Blue */
   --wonderland-blue-50: #f5f7ff;
@@ -145,6 +137,64 @@ html {
   overflow: hidden;
   position: relative;
 }
+
+/* Elypse Background Styles (Only visible for /docs pages) */
+html.docs-doc-page::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--wonderland-accent);
+  mask: url("/common/img/elipse_background.svg") no-repeat;
+  -webkit-mask: url("/common/img/elipse_background.svg") no-repeat;
+  mask-position: right 65%;
+  -webkit-mask-position: right 65%;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* Responsive background styles for html::before */
+@media (max-width: 1024px) {
+  html.docs-doc-page::before {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 150vw;
+    height: 150vh;
+    mask-position: 60% 50%;
+    -webkit-mask-position: 60% 50%;
+    mask-size: 80%;
+    -webkit-mask-size: 80%;
+  }
+}
+
+@media (max-width: 750px) {
+  html.docs-doc-page::before {
+    width: 200vw;
+    height: 200vh;
+    mask-position: 40% 50%;
+    -webkit-mask-position: 40% 50%;
+    mask-size: 100%;
+    -webkit-mask-size: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  html.docs-doc-page::before {
+    width: 250vw;
+    height: 250vh;
+    mask-position: 30% 50%;
+    -webkit-mask-position: 30% 50%;
+    mask-size: 120%;
+    -webkit-mask-size: 120%;
+  }
+}
+
 @media (max-width: 1024px) {
   html {
     background-size: 110%;

packages/common-config/static/common/styles/global.css

@@ -1 +1,6 @@
 /* Custom styles for your documentation site */
+
+/* Shape, Icons, etc customization */
+/* :root { */
+/* --wonderland-accent: #978cfb; */
+/* } */

sites/template/src/css/local.css

@@ -1,59 +1,8 @@
 /* Custom styles for your documentation site */
 
-html::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--wonderland-accent);
-  mask: url("/img/elipse_background.svg") no-repeat;
-  -webkit-mask: url("/img/elipse_background.svg") no-repeat;
-  mask-position: right 65%;
-  -webkit-mask-position: right 65%;
-  mask-size: contain;
-  -webkit-mask-size: contain;
-  pointer-events: none;
-  z-index: -1;
-}
-
-/* Responsive background styles for html::before */
-@media (max-width: 1024px) {
-  html::before {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 150vw;
-    height: 150vh;
-    mask-position: 60% 50%;
-    -webkit-mask-position: 60% 50%;
-    mask-size: 80%;
-    -webkit-mask-size: 80%;
-  }
-}
-
-@media (max-width: 750px) {
-  html::before {
-    width: 200vw;
-    height: 200vh;
-    mask-position: 40% 50%;
-    -webkit-mask-position: 40% 50%;
-    mask-size: 100%;
-    -webkit-mask-size: 100%;
-  }
-}
-
-@media (max-width: 480px) {
-  html::before {
-    width: 250vw;
-    height: 250vh;
-    mask-position: 30% 50%;
-    -webkit-mask-position: 30% 50%;
-    mask-size: 120%;
-    -webkit-mask-size: 120%;
-  }
+/* Shape, Icons, etc customization */
+:root {
+  --wonderland-accent: #978cfb;
 }
 
 /* Wonderland-specific menu icons */