improvement icon and slideContent navigation

criar-art · Jun 14, 2024 · 79535eb · 79535eb
1 parent 0eaab59
commit 79535eb
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 40 deletions.
diff --git a/src/app/style.scss b/src/app/style.scss
@@ -1,3 +1,11 @@
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("../assets/webfonts/fa-solid-900.woff2") format("woff2"), url("../assets/webfonts/fa-solid-900.ttf") format("truetype");
+}
+
 body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;

diff --git a/src/assets/webfonts/fa-solid-900.ttf b/src/assets/webfonts/fa-solid-900.ttf
diff --git a/src/assets/webfonts/fa-solid-900.woff2 b/src/assets/webfonts/fa-solid-900.woff2
diff --git a/src/components/SlideContent/style.scss b/src/components/SlideContent/style.scss
@@ -1,5 +1,5 @@
 .slide-content {
-  border-radius: 15px;
+  border-radius: 10px;
   color: #000;
   margin: 0 auto;
   max-height: 100vh;
@@ -18,68 +18,62 @@
     }
   }
   .btn {
-    background: rgba(255,255,255,0.3);
+    background: #fff;
+    border: 1px solid #444;
     border-radius: 100%;
-    border: 2px solid rgba(0,0,0,0.3);
-    backdrop-filter: blur(5px);
-    box-shadow: 0 0 1px 1px rgba(255,255,255,0.5), 0 0 10px 2px rgba(0,0,0,0.2);
+    box-shadow: 0 0 0 2px rgba(#fff, .5), 0 0 10px 10px rgba(#000, .1);
     cursor: pointer;
     font-size: 0;
     font-weight: bold;
-    height: 60px;
+    height: 40px;
     outline: none;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    transition: 0.3s all;
+    transition: .3s all;
     user-select: none;
-    width: 60px;
+    width: 40px;
     z-index: 1;
-    &:before, &::after {
-      background: #000;
-      border-radius: 10px;
-      content: "";
-      display: flex;
-      height: 50%;
-      width: 5px;
-    }
     &:hover {
-      background: rgba(0,0,0,0.3);
+      background: #444;
+      border: 1px solid #fff;
+      box-shadow: 0 0 10px 10px rgba(#fff, .5);
       color: #fff;
-      &:before, &::after {
-        background: #fff;
-      }
-    }
-    @media (max-width: 640px) {
-      height: 30px;
-      width: 30px;
+      transform: translateY(-50%) scale(1.2);
       &:before,
       &:after {
-        width: 3px;
-        height: 10px;
+        color: #fff;
       }
     }
+    &:before,
+    &:after {
+      font-family: 'Font Awesome 6 Free';
+      background: transparent;
+      content: "";
+      color: #444;
+      font-size: 1.5rem;
+      display: flex;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      transform: translateX(5px);
+    }
   }
   .prev {
     left: 10px;
-    &:active { transform: translateY(-50%) translateX(10px);       }
-    &:before { transform: rotate(45deg)    translate(17px, -10px); }
-    &:after  { transform: rotate(-45deg)   translate(18px, 10px);  }
-    @media (max-width: 640px) {
-      &:active { transform: translateY(-50%) translateX(-10px);    }
-      &:before { transform: rotate(45deg)    translate(5px, -3px); }
-      &:after  { transform: rotate(-45deg)   translate(6px, 2px);  }
+    &:before {
+      content: "\f053";
+    }
+    &:active {
+      transform: translateX(-5px) translateY(-50%) scale(1.2);
     }
   }
   .next {
     right: 10px;
-    &:active { transform: translateY(-50%) translateX(-10px);      }
-    &:before { transform: rotate(-45deg)   translate(11px, 19px);  }
-    &:after  { transform: rotate(45deg)    translate(11px, -19px); }
-    @media (max-width: 640px) {
-      &:active { transform: translateY(-50%)  translateX(10px);     }
-      &:before { transform: rotate(45deg)     translate(11px, 1px); }
-      &:after  { transform: rotate(-45deg)    translate(10px, 0px); }
+    &:before {
+      content: "\f054";
+    }
+    &:active {
+      transform: translateX(5px) translateY(-50%) scale(1.2);
     }
   }
 }