fix some bug

code-server-like/static/css/index.css

@@ -49,22 +49,40 @@ body {
 }
 #searchSidebar {  border-left: 1px solid #ddd;  display: none; overflow-y: auto; }
 
-/* 给按钮设置统一的样式 */
-#topbar button {
-    background: none;
-    border: none;
-    font-size: 12px; /* 可以调整图标的大小 */
-    cursor: pointer;
-    padding: 2px;
-    color: #333;
-    transition: color 0.3s ease;
+  /* 按钮默认样式 */
+  #topbar button {
+      background: none;
+      border: none;
+      font-size: 12px;
+      cursor: pointer;
+      padding: 2px;
+      color: #333;
+      transition: color 0.3s ease;
   }
-  
+
   /* 鼠标悬浮时改变图标的颜色 */
   #topbar button:hover {
-    color: #007bff;
+      color: #007bff;
   }
-  
+
+  /* 按钮动画效果 */
+  @keyframes bounce {
+    0% { transform: scale(1);color: #007bff; }
+    30% { transform: scale(1.2); color: #007bff;}
+    50% { transform: scale(1); color: #007bff;}
+    70% { transform: scale(1.2); color: #007bff;}
+    100% { transform: scale(1); color: #007bff;}
+  }
+
+  .bounce-animation {
+    animation: bounce 0.5s ease-in-out; /* 持续0.5秒 */
+  }
+
+  .bigger-color {
+    color: #007bff; /* 点击后颜色变化 */
+    font-size: 14px; /* 放大字体 */
+  }
+
   /* 可以根据需要设置按钮的大小和间距 */
   #newFileBtn, #newFolderBtn, #toggleSearchBtn, #refreshBtn, #openTerminalBtn, #saveBtn {
     margin-right: 10px;

code-server-like/static/css/notification.css

@@ -0,0 +1,72 @@
+/* 提示框容器：固定在右上角 */
+#notificationsContainer {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  max-width: 300px; /* 最大宽度 */
+  z-index: 9999;
+}
+
+/* 每个提示框样式 */
+.notification {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  width: 100%;
+  opacity: 1;
+  transition: opacity 0.5s ease;
+}
+
+/* 提示框的不同颜色 */
+.success {
+  background-color: #e7f9e7;
+  color: #2d6a3b;
+  border-left: 5px solid #2d6a3b;
+}
+
+.notification.success .icon {
+  background-color: #2d6a3b;
+}
+
+.info {
+  background-color: #e9ecef;
+  color: #007bff;
+  border-left: 5px solid #007bff;
+}
+
+.notification.info .icon {
+  background-color: #007bff;
+}
+
+.warning {
+  background-color: #fff3cd;
+  color: #856404;
+  border-left: 5px solid #856404;
+}
+
+.notification.warning .icon {
+  background-color: #856404;
+}
+
+.error {
+  background-color: #f8d7da;
+  color: #721c24;
+  border-left: 5px solid #721c24;
+}
+
+.notification.error .icon {
+  background-color: #721c24;
+}
+
+/* 圆形图标 */
+.icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 10px;
+  display: inline-block;
+  flex-shrink: 0;
+}