chore(fe): css variables to rgba where needed

petio-team · Apr 4, 2024 · bf0deee · bf0deee
1 parent e58dd64
commit bf0deee
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 6 deletions.
diff --git a/pkg/frontend/src/styles/components/hero.module.scss b/pkg/frontend/src/styles/components/hero.module.scss
@@ -19,7 +19,7 @@
 
     &:before {
       content: '';
-      background: rgba(var(--grey), 0.2);
+      background: rgba(var(--grey-rgb), 0.2);
       top: 0;
       left: 0;
       width: 100%;

diff --git a/pkg/frontend/src/styles/components/nav.module.scss b/pkg/frontend/src/styles/components/nav.module.scss
@@ -10,7 +10,7 @@
   z-index: 500;
   backdrop-filter: blur(20px);
   border-bottom: solid 1px rgba(#fff, 0.2);
-  background: rgba(#000, 0.6);
+  background: rgba(var(--grey-rgb), 0.6);
   // height: 51px;
 
   @media (min-width: $lg) {
@@ -227,7 +227,7 @@
   height: calc(60px + env(safe-area-inset-bottom));
   backdrop-filter: blur(20px);
   border-top: solid 1px rgba(#fff, 0.2);
-  background: rgba(var(--grey), 0.6);
+  background: rgba(var(--grey-rgb), 0.6);
   z-index: 500;
   padding: 0 20px;
   padding-bottom: env(safe-area-inset-bottom);

diff --git a/pkg/frontend/src/styles/components/trailer.module.scss b/pkg/frontend/src/styles/components/trailer.module.scss
@@ -165,7 +165,7 @@
     &__buffer {
       height: 100%;
       width: 25%;
-      background: rgba(var(--orange-dark-30), 0.5);
+      background: rgba(var(--orange-dark-30-rgb), 0.5);
       position: absolute;
       top: 0;
       left: 0;

diff --git a/pkg/frontend/src/styles/global/global.scss b/pkg/frontend/src/styles/global/global.scss
@@ -6,6 +6,7 @@
   --black: #111;
   --white: #fff;
   --grey: #202020;
+  --grey-rgb: 32, 32, 32;
   --grey-light-10: color-mix(in srgb, var(--grey), #fff 10%);
   --grey-light-20: color-mix(in srgb, var(--grey), #fff 20%);
   --grey-light-30: color-mix(in srgb, var(--grey), #fff 30%);
@@ -16,6 +17,7 @@
   --orange: #ff8300;
   --orange-dark-10: color-mix(in srgb, var(--orange), #000 10%);
   --orange-dark-30: color-mix(in srgb, var(--orange), #000 30%);
+  --orange-dark-30-rgb: 178, 91, 0;
   --green: #98dd32;
   --green-dark-30: color-mix(in srgb, var(--green), #000 30%);
   --green-dark: #2e8321;
@@ -160,7 +162,7 @@ hr {
     color: white;
 
     @media (max-width: $lg) {
-      background: rgba(var(--grey), 0.8);
+      background: rgba(var(--grey-rgb), 0.8);
       backdrop-filter: blur(20px);
       margin-top: 5px;
       border-radius: 5px !important;

diff --git a/pkg/frontend/src/styles/views/movie.module.scss b/pkg/frontend/src/styles/views/movie.module.scss
@@ -265,7 +265,7 @@
 
       &__option {
         padding: 10px;
-        border-bottom: solid 1px rgba(var(--grey), 0.5);
+        border-bottom: solid 1px rgba(var(--grey-rgb), 0.5);
         cursor: pointer;
 
         &:last-child {