Merge pull request #188 from pavlovcik/styles/match-pitchdeck-ii

Styles/match pitchdeck ii
ubiquity · Mar 9, 2024 · 9d7429c · 9d7429c
2 parents c3174d6 + 10fa05a
commit 9d7429c
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 15 deletions.
diff --git a/static/index.html b/static/index.html
@@ -31,6 +31,8 @@
   </head>
   <body>
     <background>
+      <div class="gradient"></div>
+      <div class="gradient"></div>
       <div id="grid"></div>
     </background>
     <main>

diff --git a/static/styles/rewards/background.css b/static/styles/rewards/background.css
@@ -12,10 +12,39 @@ background {
 }
 
 background #grid {
-  -webkit-mask-image: radial-gradient(#00000020 0, #00000080 100%);
-  mask-image: radial-gradient(#00000020 0, #00000080 100%);
+  /* -webkit-mask-image: radial-gradient(#00000020 0, #00000080 100%); */
+  /* mask-image: radial-gradient(#00000020 0, #00000080 100%); */
   /* opacity: 1; */
   pointer-events: none;
+  opacity: 0.5;
+
   /* background-image: url(../../media/grid-1.png); */
   /* background-repeat: repeat; */
 }
+
+canvas {
+  width: 100vw;
+  height: 100vh;
+}
+
+.gradient {
+  width: 200vw;
+  height: 200vh;
+  position: absolute;
+  background-image: radial-gradient(#00bfff00 0%, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%);
+  opacity: 0;
+  animation: fadeIn 2s ease-in-out forwards;
+}
+
+background > :nth-child(1) {
+  transform: translateX(-100vw);
+}
+background > :nth-child(2) {
+  transform: translateY(-50vh);
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 0.125;
+  }
+}
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
@@ -1,9 +1,9 @@
 :root {
   --left-table-column-width: 120px;
 
-  --background-color-default-brightness: 3%;
+  --background-color-default-brightness: 1%;
   --background-color-light-brightness: 6%;
-  --border-brightness: 9%;
+  --border-brightness: 5%;
 
   --background-color-default: hsl(225 50% var(--background-color-default-brightness) / 1);
   --background-color-light: hsl(225 50% var(--background-color-light-brightness) / 1);
@@ -29,6 +29,8 @@ table {
   max-width: 640px;
   background-color: var(--background-color-default);
   border: 1px solid var(--border-color);
+  /* box-shadow: inset 0 0 96px #00bfff10; */
+  box-shadow: 0 12px 64px #00000010;
 }
 table tr {
   /* width: 100%; */
@@ -192,7 +194,7 @@ table[data-claim-rendered] tr {
 }
 table[data-claim-rendered] tr#additional-details-border {
   /* background-color: #80808010; */
-  background-color: var(--background-color-light);
+  /* background-color: var(--background-color-light); */
   /* -webkit-backdrop-filter: blur(4px); */
   /* backdrop-filter: blur(4px); */
   /* border: 1px solid #80808020; */
@@ -262,6 +264,8 @@ table thead {
 }
 table tbody {
   display: none;
+  /* box-shadow: inset 0 0 96px #00000008; */
+  box-shadow: inset 0 0 96px #00bfff10;
 }
 table[data-claim="error"] thead {
   display: table-row-group;

diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css
@@ -40,7 +40,9 @@
   table[data-claim-rendered] button:hover > div {
     color: #000;
   }
-
+  table[data-claim-rendered] button:hover{
+    background-color: #80808018;
+  }
   table a:hover,
   table a:hover > div {
     color: #000;
@@ -62,23 +64,34 @@
   html {
     background-color: #fff;
   }
-  #grid {
-    opacity: 0.25;
+  background #grid {
+    opacity: 0.33;
+    filter: invert(1);
   }
 
   table {
     background-color: var(--light-mode-background-color-default);
+    /* background-color: #fff; */
     border: 1px solid var(--light-mode-border-color);
+    /* box-shadow: inset 0 0 96px #00000010; */
+  }
+
+  table tbody{
+    box-shadow: inset 0 0 96px #00000008;
   }
 
   table[data-claim-rendered] tr#additional-details-border {
-    background-color: var(--light-mode-background-color-dark);
+    /* background-color: var(--light-mode-background-color-dark); */
   }
   table[data-details-visible="true"] #additional-details-border ~ tr {
-    background-color: var(--light-mode-background-color-dark);
+    /* background-color: var(--light-mode-background-color-dark); */
   }
   .notifications .toast {
     border: 1px solid var(--light-mode-border-color);
     background-color: var(--light-mode-background-color-default);
   }
+  .gradient {
+    opacity: 0;
+    animation: none;
+  }
 }
diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css
@@ -140,8 +140,3 @@ footer {
   /* width: 100%; */
   /* padding-bottom: env(safe-area-inset-bottom); */
 }
-
-canvas {
-  width: 100vw;
-  height: 100vh;
-}