paper-burner/css/history_detail/03-components/context-menu.css

/**
 * Context Menu - 自定义右键菜单
 *
 * 职责：Notion 风格的右键菜单
 * 作用域：#custom-context-menu 及其子元素
 * 依赖：variables.css
 *
 * 合并自：history_detail_inline_styles.css
 *
 * 包含：
 * - 现代化菜单容器
 * - 颜色选择面板
 * - 高亮文本悬停效果
 * - 批注指示符
 */

/* ==================== 1. Notion 风格菜单容器 ==================== */

#custom-context-menu {
  position: fixed;  /* 改为 fixed，相对于视口定位，避免滚动导致的位置偏移 */
  z-index: 10000;

  /* Notion 风格外观 */
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* 布局 */
  padding: 6px 0;
  min-width: 220px;

  /* 字体 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);

  /* 隐藏状态 */
  display: none;
}

#custom-context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#custom-context-menu li {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.15s ease-in-out;
}

#custom-context-menu li:hover {
  background-color: #f5f5f5;
}

/* ==================== 2. 菜单项图标 ==================== */

#custom-context-menu li i.fa {
  margin-right: var(--spacing-md);
  color: #555;
  width: 16px;
  text-align: center;
}

/* 取消高亮选项的特殊样式 */
#custom-context-menu ul li[data-action="remove-highlight"] {
  color: #dc3545;
  border-top: 1px solid #eee;
}

#custom-context-menu ul li[data-action="remove-highlight"]:hover {
  background-color: #f8d7da;
  color: #721c24;
}

/* 添加批注选项的特殊样式 */
#custom-context-menu ul li[data-action="add-note"] {
  color: #28a745;
  border-top: 1px solid #eee;
}

#custom-context-menu ul li[data-action="add-note"]:hover {
  background-color: #d4edda;
  color: #155724;
}

/* 编辑批注选项的特殊样式 */
#custom-context-menu ul li[data-action="edit-note"] {
  color: #17a2b8;
  border-top: 1px solid #eee;
}

#custom-context-menu ul li[data-action="edit-note"]:hover {
  background-color: #d1ecf1;
  color: #0c5460;
}

/* ==================== 3. 颜色选择面板 ==================== */

#custom-context-menu .color-palette {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: var(--spacing-md);
}

#custom-context-menu .color-option {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-left: 6px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.1);
  transition: transform 0.1s ease-out;
}

#custom-context-menu .color-option:hover {
  transform: scale(1.15);
}

/* ==================== 4. 菜单分隔线 ==================== */

#custom-context-menu hr.menu-divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 6px 0;
}

.color-yellow {
  background-color: rgba(255, 255, 0, 0.75);
}

.color-pink {
  background-color: rgba(253, 170, 200, 0.75);
}

.color-lightblue {
  background-color: rgba(95, 211, 250, 0.75);
}

.color-lightgreen {
  background-color: rgba(178, 253, 178, 0.75);
}

.color-purple {
  background-color: rgba(221, 160, 221, 0.75);
}

.color-orange {
  background-color: rgba(255, 165, 0, 0.75);
}

.highlight-yellow {
  background-color: rgba(255, 255, 0, 0.75);
}

.highlight-pink {
  background-color: rgba(253, 170, 200, 0.75);
}

.highlight-lightblue {
  background-color: rgba(95, 211, 250, 0.75);
}

.highlight-lightgreen {
  background-color: rgba(178, 253, 178, 0.75);
}

.highlight-purple {
  background-color: rgba(221, 160, 221, 0.75);
}

.highlight-orange {
  background-color: rgba(255, 165, 0, 0.75);
}

/* 高亮文本悬停效果 */
.annotation-highlight:hover {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transform: translateY(-1px); /* 轻微上移效果 */
}

/* 高亮文本右上角的小符号 */
.annotation-highlight::after {
  content: "📝"; /* 使用笔记本emoji作为符号 */
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none; /* 不阻止点击事件 */
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 鼠标悬停时显示小符号 */
.annotation-highlight:hover::after {
  opacity: 1;
}

/* 有批注的高亮文本显示不同的符号 */
.annotation-highlight.has-note::after {
  content: "💬"; /* 使用对话框emoji表示有批注 */
  opacity: 0.8; /* 有批注的始终显示，但透明度较低 */
  background: rgba(255, 255, 255, 0.98);
}

.annotation-highlight.has-note:hover::after {
  opacity: 1;
}

/* 移动设备上始终显示小符号 */
@media (max-width: 768px) {
  .annotation-highlight::after {
    opacity: 0.6;
  }

  .annotation-highlight.has-note::after {
    opacity: 0.9;
  }
}