lesson edit (add 阶段/步骤)

Html/apps/static/css/lesson.css

@@ -1,10 +1,67 @@
-/* 侧边栏 */
-.course-details {
-    position: fixed; top:0; right:-360px; width:360px; height:100%;
-    background:#fff; box-shadow:-2px 0 10px rgba(0,0,0,.1);
-    transition:right .3s ease; padding:16px; overflow:auto; z-index: 1000;
-  }
-  .course-details.open { right:0; }
+/* 问号图标 */
+.help-icon {
+  display: inline-block;
+  margin-left: 8px;
+  color: #888;
+  font-weight: bold;
+  cursor: help;
+}
+.help-icon:hover { color: #4CAF50; }
+
+/* Portal Tooltip（挂在 body 下） */
+.tooltip-portal {
+  position: fixed;   /* 不受父级 overflow 影响 */
+  left: 0; top: 0;
+  z-index: 999999;   /* 足够高，覆盖侧栏等 */
+  display: none;
+  opacity: 0;
+  transition: opacity .08s linear;
+
+  background: rgba(0,0,0,.9);
+  color: #fff;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 1.4;
+  pointer-events: none; /* 鼠标穿透，避免闪烁 */
+  white-space: nowrap;
+  box-shadow: 0 4px 12px rgba(0,0,0,.25);
+}
+
+
+
+.add-step-btn, .add-phase-btn {
+  background-color: #4CAF50;
+  color: white;
+  display: block; 
+  border: none;
+  padding: 5px 10px;
+  font-size: 14px;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 5px;
+  margin-left: 10px;
+}
+.add-step-btn{
+  margin-left: 30px;
+}
+.add-step-btn:hover, .add-phase-btn:hover {
+  background-color: #45a049;
+}
+
+/* 增加按钮与大纲列表的间距 */
+#outline-tree li {
+  margin: 5px 0;
+}
+
+#outline-tree li.lvl2 {
+  padding-left: 20px;
+}
+
+#outline-tree li.lvl3 {
+  padding-left: 40px;
+}
+
   .details-header { display:flex; justify-content:space-between; align-items:center; }
   .close-btn { border:none; background:transparent; font-size:22px; cursor:pointer; }
   
@@ -20,7 +77,7 @@
   #outline-tree .lvl1 { font-weight:700; }
   #outline-tree .lvl2 { margin-left:12px; }
   #outline-tree .lvl3 { margin-left:24px; }
-  #outline-tree li.active { background:#eaf6ff; border-radius:6px; padding:2px 6px; }
+  #outline-tree li.active { background:#eaf6ff; border-radius:6px; font-weight: bold; }
   
   .editor-pane {
     flex:1; display:flex; flex-direction:column; min-width:0;

Html/apps/static/css/teacherboard.css

@@ -52,20 +52,24 @@
 }
 
 /* 课程目录弹出框 */
-
 .course-details {
     position: fixed;
     top: 0;
-    right: -400px;
+    left: -400px;  /* 从左侧滑入 */
     width: 300px;
     height: 100%;
     background-color: #fff;
-    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);  /* 修改阴影方向 */
     padding: 20px;
-    transition: right 0.3s ease;
+    transition: left 0.3s ease;  /* 过渡效果改为 left */
     z-index: 9999;
-    border-radius: 15px;  /* 添加圆角 */
+    border-radius: 15px;
 }
+
+.course-details.open {
+    left: 0;  /* 打开时显示 */
+}
+
 /* 基本的课程卡片样式 */
 .course-card {
     width: 150px;
@@ -133,7 +137,6 @@
     display: flex;
     justify-content: space-between;
 }
-/* 基本样式，保证输入框和下拉框占满整行 */
 input[type="text"], select {
     width: 100%; /* 占满一行 */
     padding: 12px; /* 增加内边距 */
@@ -267,10 +270,6 @@ label[for="course-description"] {
     color: #333; /* 标签颜色 */
 }
 
-.course-details.open {
-    right: 0;  /* 打开时显示 */
-}
-
 .details-header {
     display: flex;
     justify-content: space-between;