perf: Optimize icon styles

Author: ZhaoJiSen

src/app/elements/chat/chat.component.scss

@@ -18,11 +18,52 @@ nz-float-button {
   flex-direction: column;
   align-items: flex-end;
 
+  .content {
+    height: 100%;
+    iframe {
+      border: none;
+    }
+  }
+
+  .drawer-panel {
+    background-color: transparent;
+    position: fixed;
+    top: 0;
+    right: 440px;
+    width: 440px;
+    min-width: 260px;
+    height: 100vh;
+    user-select: none;
+    border-radius: 10px 0 0 10px;
+    transition: transform 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+    box-shadow: 0 0 8px 4px #00000014;
+    transform: translate(100%);
+    z-index: 1000;
+    opacity: 0.95;
+  }
+
+  .show {
+    transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+  }
+
+  .show .modal {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    opacity: 1;
+  }
+
+  .show .drawer-panel {
+    transform: translate(0);
+  }
+
   ::ng-deep {
     .ant-float-btn-group {
       position: absolute;
       padding: 10px 0;
-      opacity: 0.8;
+      opacity: 1;
     }
 
     .ant-float-btn-group-circle .ant-float-btn-circle:not(:last-child) {
@@ -31,64 +72,42 @@ nz-float-button {
 
     .ant-float-btn-default,
     .ant-float-btn-default .ant-float-btn-body {
-      background: rgba(255, 255, 255, 0.05);
+      position: relative;
+      background: rgba(30, 30, 30, 0.85);
+      border-radius: 999px;
+      box-shadow: 0 6px 16px rgba(0,0,0,.30);
+      transition: background .2s ease, box-shadow .2s ease;
+      border: none;
+    }
+    .ant-float-btn-default:hover,
+    .ant-float-btn-default:hover .ant-float-btn-body {
+      background: rgba(20, 20, 20, 0.92);
+      box-shadow: 0 8px 22px rgba(0,0,0,.36);
+    }
 
-      &:hover {
-        background: rgba(255, 255, 255, 0.1);
-      }
+    .ant-float-btn-default .ant-float-btn-body::before,
+    .ant-float-btn-default::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 999px;
+      pointer-events: none;
+      box-shadow:
+        inset 0 0 0 1px rgba(255,255,255,.65),
+        0 0 0 1px rgba(0,0,0,.75);
     }
 
-    .ant-btn .anticon {
-      color: white;
+    .ant-btn .anticon,
+    .ant-float-btn .anticon {
+      color: #fff;
+      filter: drop-shadow(0 1px 1px rgba(0,0,0,.75));
     }
 
-    img {
+    img.chat-img {
       width: 18px;
       height: 18px;
-      opacity: 0.8;
+      opacity: .95;
+      filter: drop-shadow(0 1px 1px rgba(0,0,0,.75));
     }
   }
-
-  .content {
-    height: 100%;
-
-    iframe {
-      border: none;
-    }
-  }
-}
-
-//
-.drawer-panel {
-  background-color: transparent;
-  position: fixed;
-  top: 0;
-  right: 440px;
-  width: 440px;
-  min-width: 260px;
-  height: 100vh;
-  user-select: none;
-  border-radius: 10px 0 0 10px;
-  transition: transform 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
-  box-shadow: 0 0 8px 4px #00000014;
-  transform: translate(100%);
-  z-index: 1000;
-  opacity: 0.95;
-}
-
-.show {
-  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-}
-
-.show .modal {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-  opacity: 1;
-}
-
-.show .drawer-panel {
-  transform: translate(0);
 }