tweak "Open in App" button style

memo33 · Dec 18, 2024 · 555f30d · 555f30d
1 parent fae6363
commit 555f30d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/web/channel/styles.css b/web/channel/styles.css
@@ -23,16 +23,46 @@ h2 {
   background-color: #707070;
   text-decoration: none;
 }
+
 button.open-app-btn {
+  text-align: center;
+  /* text-transform: uppercase; */
+  cursor: pointer;
+  font-size: 1.0em;
+  letter-spacing: 3px;
+  position: relative;
   background-color: #3469f0;
-  color: white;
+  color: #fff;
   padding: 12px 36px;
+  transition-duration: 0.4s;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
   border-radius: 5px;
-  font-size: 1.0em;
 }
 button.open-app-btn:hover {
   background-color: #6b90ef;
+  color: #fff;
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.25);
 }
+button.open-app-btn:after {
+  content: "";
+  background: #1459d0;
+  display: block;
+  position: absolute;
+  padding-top: 300%;
+  padding-left: 350%;
+  margin-left: -36px !important;
+  margin-top: -120%;
+  opacity: 0;
+  transition: all 0.8s
+}
+button.open-app-btn:active:after {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s
+}
+
 ul.unstyled-list {
   list-style: none;
   margin: 0;

diff --git a/web/src/main/scala/sc4pac/web/ChannelPage.scala b/web/src/main/scala/sc4pac/web/ChannelPage.scala
@@ -150,7 +150,7 @@ object ChannelPage {
         .send(backend)
         .onComplete {
           case scala.util.Success(response) if response.is200 =>
-            openButton.textContent = "Opened in App"
+            // openButton.textContent = "Opened in App"
             openButtonResult.textContent = ""
           case _ =>
             if (openButtonResult.textContent.isEmpty)