code-server-like

2025-09-15 14:15:20 +08:00
parent 306bf48754
commit ec45771376
19 changed files with 962 additions and 0 deletions
--- a/code-server-like/static/css/index.css
+++ b/code-server-like/static/css/index.css
@@ -0,0 +1,155 @@
+
+/* 给按钮设置统一的样式 */
+#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;
+  }
+  
+  /* 可以根据需要设置按钮的大小和间距 */
+  #newFileBtn, #newFolderBtn, #toggleSearchBtn, #refreshBtn {
+    margin-right: 10px;
+  }
+  
+
+
+
+
+/* 默认树节点样式 */
+.tree-item {
+  padding: 4px 8px;  /* 调整左右内边距 */
+  margin: 2px 0;
+  border-radius: 4px;
+  cursor: pointer;
+  align-items: center;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+/* 鼠标悬停时的动画效果 */
+.tree-item:hover {
+  background-color: #d3d3d3;
+  transform: scale(1.02);  /* 略微放大 */
+}
+
+/* 选中项的样式 */
+.tree-item.selected {
+  background-color: #42aaef;  /* 选中项背景颜色 */
+  color: rgb(32, 32, 32);  /* 选中项字体颜色 */
+  border: 2px solid #000000;
+}
+
+/* 文件夹样式 */
+.directory {
+  background-color: #e6e6e6;  /* 文件夹背景色 */
+  color: rgb(32, 32, 32);  /* 文件夹字体颜色 */
+}
+
+.directory i {
+  margin-right: 8px;  /* 图标与文本之间的间距 */
+}
+
+.directory:hover {
+  background-color: #42aaef;  /* 悬停时的文件夹颜色 */
+  color: rgb(32, 32, 32);  /* 悬停时字体变白 */
+}
+
+/* 文件样式 */
+.file {
+  background-color: #e6e6e6;  /* 文件背景色 */
+  color: rgb(32, 32, 32);  /* 文件字体颜色 */
+}
+
+.file i {
+  margin-right: 8px;  /* 图标与文本之间的间距 */
+}
+
+.file:hover {
+  background-color: #42aaef;  /* 文件悬停时背景 */
+  color: rgb(32, 32, 32);  /* 悬停时字体颜色 */
+}
+
+/* 处理文件夹和文件图标 */
+.directory i::before {
+  content: "\f07b";  /* 文件夹图标 */
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+}
+
+.file i::before {
+  content: "\f15b";  /* 文件图标 */
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+}
+
+/* 树节点的层级缩进 */
+.tree-item-level-1 {
+  padding-left: 20px;
+}
+
+.tree-item-level-2 {
+  padding-left: 40px;
+}
+
+.tree-item-level-3 {
+  padding-left: 60px;
+}
+
+.tree-item-level-4 {
+  padding-left: 80px;
+}
+
+.tree-item-level-5 {
+  padding-left: 100px;
+}
+
+.tree-item-level-6 {
+  padding-left: 120px;
+}
+
+.tree-item-level-7 {
+  padding-left: 140px;
+}
+
+
+
+/* 隐藏右键菜单 */
+.context-menu {
+  position: absolute;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  display: none; /* 默认隐藏 */
+  z-index: 1000;
+  border-radius: 5px;
+  width: 150px;
+}
+
+.context-menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.context-menu li {
+  padding: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.context-menu li:hover {
+  background-color: #f0f0f0;
+}
+
+/* 选中状态样式 */
+.context-menu .active {
+  background-color: #d3d3d3;
+}