Fix style (#49)

* fix: 为 content script 样式添加 !important 防止被网站样式覆盖

- 为 public/content-script.css 所有样式属性添加 !important
- 删除重复的 styles/content-script.css 文件
- 确保扩展样式不会被网站样式影响

* chore: 更新版本号到 4.0.4

Author: ety001

package.json

@@ -1,6 +1,6 @@
 {
   "name": "review-bookmark",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "A bookmark manager for Chrome.",
   "author": "ETY001 <work@akawa.ink>",
   "license": "MIT",

public/content-script.css

@@ -1,15 +1,17 @@
 /* Content Script 专用样式 - 使用 rb- 前缀避免与页面样式冲突 */
+/* 所有样式都使用 !important 确保不被网站样式覆盖 */
+
 /* 容器默认隐藏 */
 #review-bookmark {
-  display: none;
+  display: none !important;
 }
 
 #review-bookmark-notification {
-  display: none;
+  display: none !important;
 }
 
 #review-bookmark-dialog {
-  display: none;
+  display: none !important;
 }
 
 /* 显示状态类 */
@@ -19,216 +21,228 @@
 
 /* 对话框遮罩层 */
 .rb-dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 999999998;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  z-index: 999999998 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
 
 /* 对话框容器 */
 .rb-dialog-container {
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 24px;
-  max-width: 512px;
-  width: calc(100% - 32px);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  background-color: #fff !important;
+  border-radius: 8px !important;
+  padding: 24px !important;
+  max-width: 512px !important;
+  width: calc(100% - 32px) !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
 }
 
 /* 对话框标题 */
 .rb-dialog-title {
-  font-size: 18px;
-  font-weight: 600;
-  margin-bottom: 8px;
-  color: #444;
+  font-size: 18px !important;
+  font-weight: 600 !important;
+  margin-bottom: 8px !important;
+  color: #444 !important;
 }
 
 /* 对话框描述 */
 .rb-dialog-description {
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 16px;
+  font-size: 14px !important;
+  color: #666 !important;
+  margin-bottom: 16px !important;
 }
 
 /* 对话框按钮容器 */
 .rb-dialog-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+  display: flex !important;
+  justify-content: flex-end !important;
+  gap: 8px !important;
 }
 
 /* 对话框按钮 */
 .rb-dialog-button {
-  padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  border-radius: 4px;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.2s;
+  padding: 8px 16px !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  border-radius: 4px !important;
+  border: none !important;
+  cursor: pointer !important;
+  transition: background-color 0.2s !important;
+  background-color: transparent !important;
+  color: inherit !important;
 }
 
 .rb-dialog-button-cancel {
-  background-color: #fff;
-  color: #444;
-  border: 1px solid #ccc;
+  background-color: #fff !important;
+  color: #444 !important;
+  border: 1px solid #ccc !important;
 }
 
 .rb-dialog-button-cancel:hover {
-  background-color: #f3f4f6;
+  background-color: #f3f4f6 !important;
 }
 
 .rb-dialog-button-confirm {
-  background-color: #53a8ff;
-  color: #fff;
+  background-color: #53a8ff !important;
+  color: #fff !important;
 }
 
 .rb-dialog-button-confirm:hover {
-  background-color: #4285d6;
+  background-color: #4285d6 !important;
 }
 
 /* 通知容器 */
 .rb-notification {
-  position: fixed;
-  z-index: 999999999;
-  background-color: #fff;
-  border: 2px solid #53a8ff;
-  border-radius: 12px;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  min-width: 320px;
-  max-width: 420px;
-  pointer-events: auto;
-  color: #444;
-  font-family: system-ui, -apple-system, sans-serif;
+  position: fixed !important;
+  z-index: 999999999 !important;
+  background-color: #fff !important;
+  border: 2px solid #53a8ff !important;
+  border-radius: 12px !important;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
+  padding: 20px !important;
+  min-width: 320px !important;
+  max-width: 420px !important;
+  pointer-events: auto !important;
+  color: #444 !important;
+  font-family: system-ui, -apple-system, sans-serif !important;
 }
 
 .rb-notification-top-right {
-  top: 16px;
-  right: 16px;
+  top: 16px !important;
+  right: 16px !important;
 }
 
 .rb-notification-top-left {
-  top: 16px;
-  left: 16px;
+  top: 16px !important;
+  left: 16px !important;
 }
 
 .rb-notification-bottom-right {
-  bottom: 16px;
-  right: 16px;
+  bottom: 16px !important;
+  right: 16px !important;
 }
 
 .rb-notification-bottom-left {
-  bottom: 16px;
-  left: 16px;
+  bottom: 16px !important;
+  left: 16px !important;
 }
 
 /* 通知内容区域 */
 .rb-notification-content {
-  margin-bottom: 12px;
+  margin-bottom: 12px !important;
 }
 
 .rb-notification-title {
-  font-weight: 700;
-  font-size: 16px;
-  margin-bottom: 10px;
-  color: #1f2937;
-  line-height: 1.4;
+  font-weight: 700 !important;
+  font-size: 16px !important;
+  margin-bottom: 10px !important;
+  color: #1f2937 !important;
+  line-height: 1.4 !important;
 }
 
 .rb-notification-url {
-  font-size: 12px;
-  color: #666;
-  line-height: 14px;
-  word-break: break-all;
+  font-size: 12px !important;
+  color: #666 !important;
+  line-height: 14px !important;
+  word-break: break-all !important;
 }
 
 .rb-notification-url-link {
-  color: #2563eb;
-  text-decoration: none;
+  color: #2563eb !important;
+  text-decoration: none !important;
 }
 
 .rb-notification-url-link:hover {
-  text-decoration: underline;
+  text-decoration: underline !important;
 }
 
 /* 通知按钮容器 */
 .rb-notification-buttons {
-  display: flex;
-  gap: 8px;
+  display: flex !important;
+  gap: 8px !important;
 }
 
 /* 通知按钮 */
 .rb-notification-button {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  border: none; /* 移除边框，使用背景色 */
-  color: #fff; /* 图标颜色为白色 */
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; /* 添加 transform 过渡 */
-  padding: 0;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* 按钮阴影 */
+  width: 36px !important;
+  height: 36px !important;
+  border-radius: 50% !important;
+  border: none !important;
+  color: #fff !important;
+  cursor: pointer !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out !important;
+  padding: 0 !important;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  background-color: transparent !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  text-align: center !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
 }
 
 .rb-notification-button:hover {
-  transform: scale(1.05); /* hover 放大效果 */
+  transform: scale(1.05) !important;
 }
 
 .rb-notification-button-icon {
-  width: 18px; /* 增大图标尺寸 */
-  height: 18px; /* 增大图标尺寸 */
-  color: #fff; /* 图标颜色为白色 */
+  width: 18px !important;
+  height: 18px !important;
+  color: #fff !important;
 }
 
 .rb-notification-button-close {
-  background-color: #fbbf24; /* 橙色 */
+  background-color: #fbbf24 !important;
 }
+
 .rb-notification-button-close:hover {
-  background-color: #f59e0b;
+  background-color: #f59e0b !important;
 }
 
 .rb-notification-button-block {
-  background-color: #3b82f6; /* 蓝色 */
+  background-color: #3b82f6 !important;
 }
+
 .rb-notification-button-block:hover {
-  background-color: #2563eb;
+  background-color: #2563eb !important;
 }
 
 .rb-notification-button-edit {
-  background-color: #10b981; /* 绿色 */
+  background-color: #10b981 !important;
 }
+
 .rb-notification-button-edit:hover {
-  background-color: #059669;
+  background-color: #059669 !important;
 }
 
 .rb-notification-button-remove {
-  background-color: #ef4444; /* 红色 */
+  background-color: #ef4444 !important;
 }
+
 .rb-notification-button-remove:hover {
-  background-color: #dc2626;
+  background-color: #dc2626 !important;
 }
 
 /* 倒计时显示 */
 .rb-notification-countdown {
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  font-size: 11px;
-  color: #9ca3af;
-  font-weight: 500;
-  background-color: rgba(0, 0, 0, 0.05);
-  padding: 2px 6px;
-  border-radius: 4px;
-  white-space: nowrap;
-  text-align: center;
+  position: absolute !important;
+  bottom: 8px !important;
+  right: 8px !important;
+  font-size: 11px !important;
+  color: #9ca3af !important;
+  font-weight: 500 !important;
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  padding: 2px 6px !important;
+  border-radius: 4px !important;
+  white-space: nowrap !important;
+  text-align: center !important;
 }